Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-08-30 12:39:20 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Allow themes in mobile mode

Browse source 
Cleanup themes and drop the template.less
This commit is contained in:
djmaze 2021-02-06 23:37:53 +01:00
parent 4f1fc5f44b
commit 48424e213b
34 changed files with 722 additions and 741 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dev/App/Abstract.js
View file

@ -121,7 +121,7 @@ export class AbstractApp {
initOnStartOrLangChange();
if (mobile) {
$htmlCL.add('rl-mobile');
$htmlCL.toggle('rl-mobile', mobile);
leftPanelDisabled(true);
} else {
window.addEventListener('resize', () => leftPanelDisabled(767 >= window.innerWidth));

4
dev/Styles/@Boot.css
View file

@ -11,7 +11,7 @@ body {
}
#rl-loading, #rl-loading-error {
color: var(--loading-color);
color: var(--loading-color, #000);
text-shadow: var(--loading-text-shadow);
font-size: 30px;
line-height: 130%;
@ -30,7 +30,7 @@ body {
.e-spinner .e-bounce {
animation: bouncedelay 1.4s infinite ease-in-out;
background-color: var(--loading-color, #333);
background-color: var(--loading-color, #000);
border-radius: 100%;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
display: inline-block;

12
dev/Styles/Admin.less
View file

@ -43,7 +43,7 @@
cursor: default;
background-color: transparent;
color: var(--settings-menu-disabled-color, #888);
color: var(--settings-menu-disabled-color, #666);
padding: 4px 10px;
@ -53,17 +53,17 @@
.e-item.selectable .e-link {
cursor: pointer;
color: var(--settings-menu-color);
color: var(--settings-menu-color, #333);
}
.e-item.selectable {
&:hover .e-link{
background-color: var(--settings-menu-hover-bg-color, #555);
color: var(--settings-menu-hover-color, #fff);
background-color: var(--settings-menu-hover-bg-color, #333);
color: var(--settings-menu-hover-color, #eee);
}
&.selected .e-link {
background-color: var(--settings-menu-selected-bg-color, #555);
color: var(--settings-menu-selected-color, #fff);
background-color: var(--settings-menu-selected-bg-color, #333);
color: var(--settings-menu-selected-color, #eee);
}
}
}

20
dev/Styles/FolderList.less
View file

@ -86,7 +86,7 @@
line-height: 34px;
background-color: transparent;
vertical-align: middle;
color: var(--folders-disabled-color, grey);
color: var(--folders-disabled-color, #666);
cursor: not-allowed;
font-size: 14px;
@ -130,17 +130,17 @@
&.selectable {
color: var(--folders-color, #000);
color: var(--folders-color, #333);
cursor: pointer;
&:hover {
background-color: var(--folders-hover-bg-color, #555);
color: var(--folders-hover-color, #fff);
background-color: var(--folders-hover-bg-color, #333);
color: var(--folders-hover-color, #eee);
}
&.droppableHover {
background-color: var(--folders-drop-bg-color, #555);
color: var(--folders-drop-color, #fff);
background-color: var(--folders-drop-bg-color, #333);
color: var(--folders-drop-color, #eee);
}
&.droppableHover * {
@ -148,13 +148,13 @@
}
&.focused {
background-color: var(--folders-focused-bg-color, #555);
color: var(--folders-focused-color, #fff);
background-color: var(--folders-focused-bg-color, #333);
color: var(--folders-focused-color, #eee);
}
&.selected {
background-color: var(--folders-selected-bg-color, #555);
color: var(--folders-selected-color, #fff);
background-color: var(--folders-selected-bg-color, #333);
color: var(--folders-selected-color, #eee);
}
}

2
dev/Styles/Layout.less
View file

@ -384,7 +384,7 @@ html.rl-bottom-preview-pane {
left: 0;
right: 5px;
box-shadow: none;
background-color: var(--message-bg-color);
background-color: var(--message-bg-color, #fff);
}
}
}

6
dev/Styles/Login.less
View file

@ -26,7 +26,7 @@
.desc {
font-size: 30px;
color: var(--loading-color);
color: var(--loading-color, #000);
text-shadow: var(--loading-text-shadow);
}
}
@ -34,7 +34,7 @@
.loginForm {
background-color: var(--login-bg-color, rgba(0, 0, 0, .5));
border: var(--login-border, 1px solid rgba(255, 255, 255, .2));
border-radius: var(--login-border-radius);
border-radius: var(--login-border-radius, 7px);
box-shadow: var(--login-box-shadow);
margin: 0;
}
@ -206,7 +206,7 @@
right: 0;
bottom: 0;
background: var(---spinner-bg, rgba(0,0,0,.3));
border-radius: var(--login-border-radius);
border-radius: var(--login-border-radius, 7px);
z-index: 1051;
border-radius: 8px;
}

15
dev/Styles/Main.less
View file

@ -15,9 +15,8 @@ html, body {
body {
background-color: var(--main-bg-color, #e3e3e3);
background-image: var(--main-bg-image);
background-size: var(--main-bg-size);
color: var(--main-color, #000);
color: var(--main-color, #333);
-webkit-touch-callout: none;
@ -28,6 +27,15 @@ body {
right: 0;
}
/*
.rl-mobile / .no-mobile
*/
@media screen and (min-width: 1000px) {
body {
background-image: var(--main-bg-image);
}
}
textarea {
resize: none;
}
@ -39,9 +47,6 @@ option:disabled {
*, select:focus {
outline: none;
}
html.mobile *, html.rl-mobile * {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

12
dev/Styles/Settings.less
View file

@ -52,7 +52,7 @@
cursor: default;
background-color: transparent;
color: var(--settings-menu-disabled-color, #888);
color: var(--settings-menu-disabled-color, #666);
padding: 4px 10px;
@ -62,17 +62,17 @@
.e-item.selectable .e-link {
cursor: pointer;
color: var(--settings-menu-color);
color: var(--settings-menu-color, #333);
}
.e-item.selectable {
&:hover .e-link{
background-color: var(--settings-menu-hover-bg-color, #555);
color: var(--settings-menu-hover-color, #fff);
background-color: var(--settings-menu-hover-bg-color, #333);
color: var(--settings-menu-hover-color, #eee);
}
&.selected .e-link {
background-color: var(--settings-menu-selected-bg-color, #555);
color: var(--settings-menu-selected-color, #fff);
background-color: var(--settings-menu-selected-bg-color, #333);
color: var(--settings-menu-selected-color, #eee);
}
}
}

10
dev/Styles/Ui.less
View file

@ -31,19 +31,19 @@
.e-link {
text-decoration: none;
cursor: pointer;
color: var(--dropdown-menu-color);
background-color: var(--dropdown-menu-background-color);
color: var(--dropdown-menu-color, #333);
background-color: var(--dropdown-menu-bg-color, #fff);
}
.e-item.selected > .e-link {
background-color: var(--dropdown-menu-selected-background-color, #eee) !important;
background-color: var(--dropdown-menu-selected-bg-color, #eee) !important;
}
.e-item:not(.disabled) > .e-link:focus,
.e-item:not(.disabled) > .e-link:hover {
background-color: var(--dropdown-menu-hover-background-color, #555);
background-color: var(--dropdown-menu-hover-bg-color, #444);
background-image: none;
color: var(--dropdown-menu-hover-color, #fff);
color: var(--dropdown-menu-hover-color, #eee);
}
.e-item.disabled > .e-link {

3
dev/boot.js
View file

@ -4,7 +4,6 @@
const
doc = document,
eId = id => doc.getElementById(id),
htmlCL = doc.documentElement.classList,
app = eId('rl-app'),
options = app && app.dataset.boot && JSON.parse(app.dataset.boot) || {},
@ -171,8 +170,6 @@ Storage('local');
// init section
setInterval(setTimestamp, 60000); // 1m
htmlCL.add(options.mobileDevice ? 'mobile' : 'no-mobile');
[eId('app-css'),eId('app-theme-link')].forEach(css => css.href = css.dataset.href);
loadScript('./?/'