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

Cleanup more HTML and CSS

Browse source
This commit is contained in:
djmaze 2021-09-09 17:00:31 +02:00
parent e105ecdf1b
commit 371b23a2f3
22 changed files with 306 additions and 435 deletions
Download patch file Download diff file Expand all files Collapse all files

4
dev/Settings/User/Accounts.js
View file

@ -86,10 +86,10 @@ export class AccountsUserSettings {
onBuild(oDom) {
oDom.addEventListener('click', event => {
let el = event.target.closestWithin('.accounts-list .account-item .e-action', oDom);
let el = event.target.closestWithin('.accounts-list .e-action', oDom);
el && ko.dataFor(el) && this.editAccount(ko.dataFor(el));
el = event.target.closestWithin('.identities-list .identity-item .e-action', oDom);
el = event.target.closestWithin('.identities-list .e-action', oDom);
el && ko.dataFor(el) && this.editIdentity(ko.dataFor(el));
});
}

80
dev/Styles/User/SettingsAccounts.less
View file

@ -1,57 +1,47 @@
.b-settings-accounts {
.list-table {
.account-img, .identity-img {
font-size: 12px;
margin-right: 5px;
}
.account-name {
display: inline-block;
word-break: break-all;
box-sizing: border-box;
line-height: 22px;
}
.identity-default {
cursor: pointer;
color: #ccc;
}
.identity-name {
display: inline-block;
word-break: break-all;
box-sizing: border-box;
line-height: 22px;
cursor: pointer;
}
}
.accounts-list-top-padding, .identities-list-top-padding {
.account-name {
display: inline-block;
height: 5px;
width: 5px;
word-break: break-all;
}
.account-item {
.identity-default {
cursor: pointer;
color: #ccc;
}
.identity-name {
display: inline-block;
word-break: break-all;
cursor: pointer;
}
table {
margin-top: 1em;
}
tr {
white-space: nowrap;
.delete-account {
cursor: pointer;
opacity: 0.5;
}
}
.identity-item {
white-space: nowrap;
.delete-identity {
cursor: pointer;
opacity: 0.5;
}
td + td {
width: 150px;
}
td + td + td {
width: 1%;
}
.delete {
cursor: pointer;
opacity: 0.5;
}
.identity-default::before {
content: '(';
}
.identity-default::after {
content: ')';
}
}

70
dev/Styles/User/SettingsFolders.less
View file

@ -5,34 +5,34 @@
margin: 10px 0;
}
.list-table {
table {
margin-top: 1em;
.folder-padding {
display: inline-block;
width: 0;
}
.folder-name {
display: inline-block;
word-break: break-all;
white-space: pre-wrap;
box-sizing: border-box;
margin-left: 7px;
}
.folder-system-name {
display: inline-block;
opacity: 0.6;
}
.folder-name.can-be-edited:hover {
text-decoration-style: dashed;
cursor: pointer;
}
}
.folder-item {
td + td {
width: 1em;
}
table:not(.displaySpecSetting) td:last-child {
display: none;
}
.folder-name {
word-break: break-all;
white-space: pre-wrap;
box-sizing: border-box;
}
.folder-system-name {
opacity: 0.6;
}
.folder-name.can-be-edited:hover {
text-decoration-style: dashed;
cursor: pointer;
}
tr {
&:not(.selectable) {
font-style: italic;
@ -59,19 +59,19 @@
}
}
.folder-padding.deep-1 {
width: 25px;
.deep-1 {
text-indent: 15px;
}
.folder-padding.deep-2 {
width: 40px;
.deep-2 {
text-indent: 30px;
}
.folder-padding.deep-3 {
width: 55px;
.deep-3 {
text-indent: 45px;
}
.folder-padding.deep-4 {
width: 70px;
.deep-4 {
text-indent: 60px;
}
.folder-padding.deep-5 {
width: 85px;
.deep-5 {
text-indent: 75px;
}
}

32
dev/Styles/User/SettingsTemplates.less
View file

@ -1,32 +1,20 @@
.b-settings-templates {
.list-table {
.template-img {
font-size: 12px;
margin-right: 5px;
}
.template-name {
display: inline-block;
word-break: break-all;
box-sizing: border-box;
line-height: 22px;
}
.template-img {
font-size: 12px;
margin-right: 5px;
}
.templates-list-top-padding {
.template-name {
box-sizing: border-box;
display: inline-block;
height: 5px;
width: 5px;
line-height: 22px;
word-break: break-all;
}
.template-item {
.delete-template {
cursor: pointer;
opacity: 0.5;
}
.delete-template {
cursor: pointer;
opacity: 0.5;
}
}

68
dev/Styles/User/SystemDropDown.less
View file

@ -32,19 +32,15 @@
}
.audioPlace {
cursor: pointer;
display: inline-block;
font-size: 30px;
height: 30px;
margin-right: 10px;
width: 1em;
.playIcon, .stopIcon {
cursor: pointer;
color: orange;
text-shadow: 0 1px 0 #555;
}
.stopIcon {
color: orange;
display: none;
}
@ -93,60 +89,34 @@
}
}
@keyframes firstBar {
0% { height: 30%; }
50% { height: 100%; }
100% { height: 30%; }
@keyframes equaliserBar {
0% { top: 30%; }
50% { top: 100%; }
100% { top: 30%; }
}
@keyframes secondBar {
0% { height: 90%; }
50% { height: 30%; }
100% { height: 100%; }
}
@keyframes thirdBar {
0% { height: 20%; }
40% { height: 40%; }
60% { height: 80%; }
100% { height: 40%; }
}
.equaliser {
.playIcon {
margin-top: 5px;
width: 30px;
height: 20px;
position: relative;
.bar {
width: 5px;
height: 5px;
*, &::before, &::after {
animation: equaliserBar 1s infinite;
background: orange;
position: absolute;
bottom:0;
animation: none;
}
.first {
left: calc(1em / 2 - 10px);
}
.second {
left: calc(1em / 2 - 2px);
}
.third {
left: calc(1em / 2 + 6px);
position: absolute;
width: 5px;
content: '';
}
&.animated {
.first {
animation: firstBar 1s infinite;
}
.second {
animation: secondBar 1s infinite;
}
.third {
animation: thirdBar 1s infinite;
}
&::before {
left: calc(1em / 2 - 9px);
animation-delay: -0.33s;
}
&::after {
left: calc(1em / 2 + 5px);
animation-delay: -0.66s;
}
}