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

Cleanup HTML and CSS

Browse source
This commit is contained in:
djmaze 2021-04-30 16:39:27 +02:00
parent d38a1acc24
commit 109c6b6ab5
28 changed files with 420 additions and 581 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dev/Knoin/AbstractViews.js
View file

@ -92,7 +92,7 @@ export class AbstractViewCenter extends AbstractView
{
constructor(name, templateID)
{
super(name, templateID, ViewType.Center);
super(name, templateID, ViewType.Content);
}
}

4
dev/Knoin/Knoin.js
View file

@ -18,7 +18,7 @@ export const ViewType = {
Popup: 'Popups',
Left: 'Left',
Right: 'Right',
Center: 'Center'
Content: 'Content'
};
/**
@ -76,7 +76,7 @@ function buildViewModel(ViewModelClass, vmScreen) {
let vmDom = null;
const vm = new ViewModelClass(vmScreen),
position = vm.viewModelPosition || '',
vmPlace = position ? doc.querySelector('#rl-content #rl-' + position.toLowerCase()) : null;
vmPlace = position ? doc.getElementById('rl-' + position.toLowerCase()) : null;
ViewModelClass.__builded = true;
ViewModelClass.__vm = vm;

67
dev/Styles/Admin.less
View file

@ -1,51 +1,28 @@
.b-admin-left {
#rl-left {
overflow: auto;
padding-top: 50px + @rlLowMargin + 10px;
.b-toolbar {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 34px;
padding: 8px 0 0 @rlLowMargin;
}
.b-content {
position: absolute;
top: 50px + @rlLowMargin + 10px;
bottom: @rlLowMargin;
left: 0;
right: 0;
overflow: hidden;
.content {
-webkit-overflow-scrolling: touch;
nav {
a {
color: var(--settings-menu-color, #333);
cursor: pointer;
display: block;
font-size: 18px;
line-height: 30px;
padding: 4px 10px;
text-decoration: none;
}
}
}
.b-admin-menu {
a:focus, a:hover {
background-color: var(--settings-menu-hover-bg-color, #333);
color: var(--settings-menu-hover-color, #eee);
}
a {
color: var(--settings-menu-color, #333);
cursor: pointer;
display: block;
font-size: 18px;
height: 30px;
line-height: 29px;
overflow: hidden;
padding: 4px 10px;
text-decoration: none;
}
a:focus, a:hover {
background-color: var(--settings-menu-hover-bg-color, #333);
color: var(--settings-menu-hover-color, #eee);
}
a.selected {
background-color: var(--settings-menu-selected-bg-color, #333);
color: var(--settings-menu-selected-color, #eee);
a.selected {
background-color: var(--settings-menu-selected-bg-color, #333);
color: var(--settings-menu-selected-color, #eee);
}
}
}
@ -82,10 +59,6 @@
box-shadow: @rlMainShadow;
border-radius: @rlMainBorderRadius;
.content {
-webkit-overflow-scrolling: touch;
}
}
}

8
dev/Styles/Animations.less
View file

@ -25,7 +25,7 @@ html.rl-started-delay {
@media screen and (min-width: 1000px) {
html.rl-started-trigger .b-login-content .loginFormWrapper {
html.rl-started-trigger .b-login-content {
/*transform: scale(1.1);*/
transform: translateY(-20px);
opacity: 0.5;
@ -40,11 +40,7 @@ html.rl-started-delay {
font-weight: bold;
}
.b-login-content .afterLoginHide {
opacity: 0;
}
.b-login-content .loginFormWrapper {
.b-login-content {
transition: all 0.3s ease-out;
}

2
dev/Styles/AnimationsUser.less
View file

@ -39,7 +39,7 @@
transition: margin 0.3s linear;
}
.b-folders .b-content.opacity-on-panel-disabled {
#rl-left .b-content {
transition: opacity 0.3s linear;
}

8
dev/Styles/Contacts.less
View file

@ -66,10 +66,6 @@
overflow-y: auto;
scroll-behavior: smooth;
.content {
-webkit-overflow-scrolling: touch;
}
.listClear {
text-align: center;
padding: 10px;
@ -179,10 +175,6 @@
overflow: auto;
border-left: 1px solid rgba(128,128,128,0.25);
.content {
-webkit-overflow-scrolling: touch;
}
span {
height: 20px;
line-height: 20px;

4
dev/Styles/FolderList.less
View file

@ -58,10 +58,6 @@
overflow: hidden;
overflow-y: auto;
min-width: 100px;
.content {
-webkit-overflow-scrolling: touch;
}
}
hr {

28
dev/Styles/Layout.less
View file

@ -5,7 +5,7 @@
background-position: center;
}
#rl-center, #rl-left, #rl-right {
#rl-left, #rl-right {
position: absolute;
top: 0;
right: 0;
@ -17,23 +17,8 @@
z-index: 0;
}
#rl-content {
height: 100%;
width: 100%;
}
#rl-center {
min-width: 600px;
min-height: 400px;
}
html.rl-mobile {
#rl-center {
min-width: 250px;
min-height: 250px;
}
&:not(.rl-left-panel-disabled) #rl-right {
right: -150px;
}
@ -218,11 +203,10 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
z-index: 1100;
overflow: auto;
background-color: rgba(0,0,0,0.3);
// -webkit-overflow-scrolling: touch;
}
.b-settings-content {
padding:20px 20px 20px 30px;
#rl-settings-subscreen {
padding:20px;
}
.dropdown-menu * + .dividerbar {
@ -295,8 +279,8 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
left: 155px;
}
.b-settings-content {
padding: 10px 10px 10px 20px;
#rl-settings-subscreen {
padding: 10px;
}
.dropdown-menu a {
@ -319,7 +303,7 @@ html.rl-left-panel-disabled {
display: block;
}
.opacity-on-panel-disabled {
.b-content {
opacity: 0.3;
}

32
dev/Styles/LayoutAdmin.less
View file

@ -5,7 +5,7 @@
background-position: center;
}
#rl-center, #rl-left, #rl-right {
#rl-left, #rl-right {
position: absolute;
top: 0;
right: 0;
@ -17,16 +17,6 @@
z-index: 0;
}
#rl-content {
height: 100%;
width: 100%;
}
#rl-center {
min-width: 600px;
min-height: 400px;
}
#rl-left {
width: @rlLeftWidth;
}
@ -45,11 +35,10 @@
z-index: 1100;
overflow: auto;
background-color: rgba(0,0,0,0.3);
// -webkit-overflow-scrolling: touch;
}
.b-settings-content {
padding:20px 20px 20px 30px;
#rl-settings-subscreen {
padding: 20px;
}
/* desktop */
@ -72,13 +61,8 @@
/* mobile and tablet */
@media screen and (max-width: 999px) {
.b-settings-content {
padding: 10px 10px 10px 20px;
}
#rl-center {
min-width: 250px;
min-height: 250px;
#rl-settings-subscreen {
padding: 10px;
}
html:not(.rl-left-panel-disabled) #rl-right {
@ -87,11 +71,7 @@
html.rl-left-panel-disabled {
#rl-left {
width: 0px !important;
.opacity-on-panel-disabled {
opacity: 0.3;
}
width: 0 !important;
}
#rl-right {
left: 5px !important;

86
dev/Styles/Login.less
View file

@ -1,14 +1,12 @@
.rl-view-model {
&.RL-Login, &.RL-AdminLogin {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 450px;
z-index: 5;
}
.RL-Login, .RL-AdminLogin {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
min-width: 250px;
max-width: 600px;
z-index: 5;
}
@glass-color: #fff;
@ -17,9 +15,7 @@
.b-login-content {
.loginFormWrapper {
position: relative;
}
position: relative;
.descWrapper {
color: var(--loading-color, #000);
@ -29,13 +25,19 @@
text-shadow: var(--loading-text-shadow);
}
.loginForm {
.controls, .control-group {
margin-bottom: 25px;
}
form {
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, 7px);
box-shadow: var(--login-box-shadow);
color: var(--login-color, @glass-m-color);
margin: 0;
padding: 40px 40px 20px 40px;
position: relative;
* {
color: var(--login-color, @glass-m-color);
@ -52,14 +54,28 @@
border-color: @glass-error-color;
}
}
}
.controls, .control-group {
margin-bottom: 25px;
}
&.submitting > * {
opacity: 0.3;
}
.wrapper {
padding: 40px 40px 20px 40px;
&.submitting::after{
content: '';
position: absolute;
width: 60px;
height: 60px;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
border: 8px solid transparent;
border-top-color: var(--spinner-color, #fff);
animation: loginRotation 1s infinite ease-in-out;
border-radius: 50%;
z-index: 1052;
}
}
.controls {
@ -158,8 +174,8 @@
}
@media screen and (max-width: 480px) {
.b-login-content .loginFormWrapper {
.wrapper {
.b-login-content {
form {
padding: 30px 4vw 10px;
}
}
@ -169,30 +185,6 @@
to {transform: rotate(1turn);}
}
.submitting-pane {
position: relative;
&.submitting > * {
opacity: 0.3;
}
html &.submitting::after{
content: '';
position: absolute;
width: 60px;
height: 60px;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
border: 8px solid transparent;
border-top-color: var(--spinner-color, #fff);
animation: loginRotation 1s infinite ease-in-out;
border-radius: 50%;
z-index: 1052;
}
}
.btn-submit-icon-wrp {
border: none;
background: none;

4
dev/Styles/MessageList.less
View file

@ -134,10 +134,6 @@ html.rl-no-preview-pane {
background-color: #fff;
.content {
-webkit-overflow-scrolling: touch;
}
.listClear {
text-align: center;
padding: 10px;

5
dev/Styles/MessageView.less
View file

@ -57,10 +57,6 @@
color: #DA4F49;
}
.content {
-webkit-overflow-scrolling: touch;
}
.message-fixed-button-toolbar {
z-index: 100;
position: absolute;
@ -190,7 +186,6 @@
left: 0;
right: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
border-radius: @rlLowBorderRadius;
scroll-behavior: smooth;

20
dev/Styles/Settings.less
View file

@ -1,21 +1,11 @@
.b-settins-left {
.b-toolbar {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 34px;
padding: 8px 0 0 @rlLowMargin;
}
.b-footer {
position: absolute;
bottom: 20px;
bottom: 10px;
right: 0;
left: 0;
height: 20px;
padding: 0 10px 0 5px;
z-index: 101;
}
@ -27,10 +17,6 @@
left: 0;
right: 0;
overflow: hidden;
.content {
-webkit-overflow-scrolling: touch;
}
}
}
@ -86,10 +72,6 @@
border: @rlMainBorderSize solid @rlMainDarkColor;
box-shadow: @rlMainShadow;
border-radius: @rlMainBorderRadius;
.content {
-webkit-overflow-scrolling: touch;
}
}
td {

2
dev/View/Admin/Login.js
View file

@ -21,8 +21,6 @@ class LoginAdminView extends AbstractViewCenter {
loginError: false,
passwordError: false,
formHidden: false,
submitRequest: false,
submitError: ''
});

2
dev/View/User/Login.js
View file

@ -46,8 +46,6 @@ class LoginUserView extends AbstractViewCenter {
emailError: false,
passwordError: false,
formHidden: false,
submitRequest: false,
submitError: '',
submitErrorAddidional: '',