diff --git a/dev/Styles/@Boot.css b/dev/Styles/@Boot.css index 95dbd117c..85ffa7a81 100644 --- a/dev/Styles/@Boot.css +++ b/dev/Styles/@Boot.css @@ -35,15 +35,29 @@ --fontSerif: "URW Palladio L", Georgia, Times, serif; } +*, *::before, *::after { + box-sizing: border-box; +} + html, body { margin: 0; padding: 0; + -webkit-text-size-adjust: 100%; /* 2 */ } #rl-app { background-color: var(--main-bg-color, #aaa); color: var(--main-color, #333); font-family: var(--fontSans); + + -webkit-touch-callout: none; + font-size: var(--main-font-size, 14px); + line-height: 1.25; /* 1 */ + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; } #rl-loading, #rl-loading-error { diff --git a/dev/Styles/@Main.less b/dev/Styles/@Main.less index a0af74919..994c9d501 100644 --- a/dev/Styles/@Main.less +++ b/dev/Styles/@Main.less @@ -57,11 +57,7 @@ @import "_End.less"; @media print { - body, html { - height: auto; - overflow: auto; - } - body, #rl-right { + #rl-app, #rl-right { position: initial; } #rl-left { diff --git a/dev/Styles/Admin/Domains.less b/dev/Styles/Admin/Domains.less index 8c92ecb57..ae5aab987 100644 --- a/dev/Styles/Admin/Domains.less +++ b/dev/Styles/Admin/Domains.less @@ -7,12 +7,10 @@ .domain-name { display: inline-block; word-break: break-all; - box-sizing: border-box; } .domain-alias { display: inline-block; - box-sizing: border-box; color: #bbb; padding-left: 5px; } diff --git a/dev/Styles/Admin/Layout.less b/dev/Styles/Admin/Layout.less index 7ca56e2ee..383ade99a 100644 --- a/dev/Styles/Admin/Layout.less +++ b/dev/Styles/Admin/Layout.less @@ -45,17 +45,15 @@ height: 100%; > .b-toolbar { + color: #fff; + display: flex; position: absolute; top: 0; right: 0; left: 0; - height: 34px; padding: 8px @rlLowMargin 8px 0; - color: #fff; text-shadow: 0 1px 1px #000; - display: flex; - h4 { flex-grow: 1; margin: 8px; @@ -73,7 +71,6 @@ border: 1px solid var(--border-color, #aaa); border-radius: var(--border-radius, 5px); box-shadow: @rlMainShadow; - box-sizing: border-box; height: calc(100% - 50px - @rlLowMargin - @rlLowMargin); margin: (50px + @rlLowMargin) @rlLowMargin @rlLowMargin 0; overflow-y: auto; diff --git a/dev/Styles/Admin/Plugin.less b/dev/Styles/Admin/Plugin.less index 370883f50..9459a1c5a 100644 --- a/dev/Styles/Admin/Plugin.less +++ b/dev/Styles/Admin/Plugin.less @@ -2,17 +2,6 @@ max-width: 660px; - .information { - display: inline-block; - background-color: #ddd; - border-radius: 10px; - cursor: pointer; - height: 25px; - width: 30px; - text-align: center; - padding-top: 5px; - } - textarea { width: 400px; height: 70px; diff --git a/dev/Styles/Components.less b/dev/Styles/Components.less index 5d61ccb65..501f72626 100644 --- a/dev/Styles/Components.less +++ b/dev/Styles/Components.less @@ -80,7 +80,6 @@ > div > div { position: absolute; - box-sizing: border-box; margin-top: 1px; animation: checkmark-to-box 200ms ease-out forwards; diff --git a/dev/Styles/Languages.less b/dev/Styles/Languages.less index c13fcb37b..69a962767 100644 --- a/dev/Styles/Languages.less +++ b/dev/Styles/Languages.less @@ -6,7 +6,7 @@ display: inline-block; padding: 5px 15px; margin: 2px 5px; - width: 180px; + width: 216px; background-color: rgba(128, 128, 128, 0.1); border: 1px solid transparent; border-radius: var(--input-border-radius, 3px); @@ -34,8 +34,8 @@ } } -@media screen and (max-width: 999px) { +@media screen and (max-width: 733px) { #V-PopupsLanguages label { - width: calc(100% - 40px); + width: 100%; } } diff --git a/dev/Styles/Main.less b/dev/Styles/Main.less index 31a97d448..6a9d4140a 100644 --- a/dev/Styles/Main.less +++ b/dev/Styles/Main.less @@ -3,23 +3,6 @@ * 2. Prevent adjustments of font size after orientation changes in iOS. */ -html, body { - height: 100%; - overflow: hidden; - -webkit-text-size-adjust: 100%; /* 2 */ -} - -#rl-app { - -webkit-touch-callout: none; - font-size: var(--main-font-size, 14px); - line-height: 1.25; /* 1 */ - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; -} - html.list-loading body { /* cursor: wait;*/ cursor: progress; @@ -62,7 +45,6 @@ dialog { border: 1px solid var(--dialog-border-clr, rgba(0,0,0,.3)); border-radius: var(--dialog-border-radius, 6px); box-shadow: 0 5px 80px rgba(0,0,0,0.3); - box-sizing: border-box; color: var(--dialog-clr, #333); display: flex; flex-direction: column; diff --git a/dev/Styles/Ui.less b/dev/Styles/Ui.less index f9d68d308..0c50878a2 100644 --- a/dev/Styles/Ui.less +++ b/dev/Styles/Ui.less @@ -20,7 +20,6 @@ .settings-save-trigger { display: inline-block; - height: 1em; line-height: 1em; margin-left: 0.5em !important; diff --git a/dev/Styles/User/Attachments.less b/dev/Styles/User/Attachments.less index 14693e551..025b453d1 100644 --- a/dev/Styles/User/Attachments.less +++ b/dev/Styles/User/Attachments.less @@ -83,7 +83,6 @@ } .iconMain, .iconPreview { - box-sizing: border-box; padding: 6px 0 0; font-size: 36px; color: #aaa; diff --git a/dev/Styles/User/Compose.less b/dev/Styles/User/Compose.less index d6e49f398..a1c67e36a 100644 --- a/dev/Styles/User/Compose.less +++ b/dev/Styles/User/Compose.less @@ -19,7 +19,6 @@ } .textAreaParent, .attachmentAreaParent { - box-sizing: border-box; height: 100%; min-height: 200px; position: relative; diff --git a/dev/Styles/User/EmailAddresses.less b/dev/Styles/User/EmailAddresses.less index 145ba47d2..543c8dc18 100644 --- a/dev/Styles/User/EmailAddresses.less +++ b/dev/Styles/User/EmailAddresses.less @@ -3,7 +3,6 @@ border: 1px solid var(--input-border-clr, #ccc); border-radius: var(--input-border-radius, 3px); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); - box-sizing: border-box; color: var(--input-clr, #555); cursor: text; font-size: 90%; diff --git a/dev/Styles/User/FolderList.less b/dev/Styles/User/FolderList.less index c113cc50c..76c98a830 100644 --- a/dev/Styles/User/FolderList.less +++ b/dev/Styles/User/FolderList.less @@ -31,7 +31,6 @@ .b-toolbar { top: 0; - height: 30px; padding: 10px 0 0 @rlLowMargin; color: #fff; z-index: 101; @@ -39,7 +38,6 @@ .b-footer { bottom: 10px; - height: 30px; padding: 0 10px 0 5px; z-index: 101; @@ -69,7 +67,6 @@ display: block; position: relative; z-index: 1; - height: 34px; line-height: 34px; background-color: transparent; vertical-align: middle; @@ -222,8 +219,7 @@ max-width: -webkit-fit-content; max-width: fit-content; overflow: hidden; - height: 19px; - padding: 4px 8px; + max-height: 2em; } } diff --git a/dev/Styles/User/MessageList.less b/dev/Styles/User/MessageList.less index 0dbd35510..ef8fbfee7 100644 --- a/dev/Styles/User/MessageList.less +++ b/dev/Styles/User/MessageList.less @@ -17,7 +17,6 @@ html.rl-no-preview-pane { } #V-MailMessageList .btn-toolbar { - height: 30px; padding: 10px 1px; white-space: nowrap; } diff --git a/dev/Styles/User/MessageView.less b/dev/Styles/User/MessageView.less index 18e2aaa52..3c81a2a30 100644 --- a/dev/Styles/User/MessageView.less +++ b/dev/Styles/User/MessageView.less @@ -44,9 +44,8 @@ html.rl-no-preview-pane { .b-message-view-checked-helper { text-align: center; font-size: 70px; - line-height: 70px; - padding-top: 100px; - color: #999; + padding-top: 25vh; + opacity: 0.6; } .b-message-view-checked-helper::after { content: ' ✉'; @@ -58,7 +57,7 @@ html.rl-no-preview-pane { font-size: 24px; line-height: 30px; color: #999; - padding: 120px 10px 0 10px; + padding: 25vh 10px 0; } .b-message-view-desc.error { diff --git a/dev/Styles/User/Settings.less b/dev/Styles/User/Settings.less index 517ca7012..23c275c83 100644 --- a/dev/Styles/User/Settings.less +++ b/dev/Styles/User/Settings.less @@ -27,11 +27,13 @@ cursor: pointer; display: block; font-size: 18px; - height: 30px; - line-height: 29px; + line-height: 2em; + max-height: 2em; overflow: hidden; - padding: 4px 10px; + padding: 0 10px; text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; } a:focus, a:hover { @@ -54,7 +56,6 @@ top: 0; right: 0; left: 0; - height: 34px; padding: 8px 0; color: #fff; } @@ -71,7 +72,6 @@ scroll-behavior: smooth; padding:20px; - box-sizing: border-box; height: calc(100% - 50px - @rlLowMargin - @rlLowMargin); background-color: var(--settings-bg-clr, #fff); diff --git a/dev/Styles/User/SquireUI.less b/dev/Styles/User/SquireUI.less index b0a23880a..e7fe24dc5 100644 --- a/dev/Styles/User/SquireUI.less +++ b/dev/Styles/User/SquireUI.less @@ -37,7 +37,6 @@ */ .squire-wysiwyg, .squire-plain { - box-sizing: border-box; font-size: 13px; height: 100%; line-height: 16px; diff --git a/dev/Styles/User/SystemDropDown.less b/dev/Styles/User/SystemDropDown.less index 2411de68b..406df8f48 100644 --- a/dev/Styles/User/SystemDropDown.less +++ b/dev/Styles/User/SystemDropDown.less @@ -15,7 +15,6 @@ position: absolute; top: 0; right: 0; - height: 30px; padding: 10px @rlLowMargin; z-index: 103; @@ -33,7 +32,7 @@ cursor: pointer; display: inline-block; font-size: 30px; - height: 30px; + height: 1em; margin-right: 10px; width: 1em; @@ -61,8 +60,7 @@ display: inline-block; font-weight: bold; font-size: 16px; - height: 29px; - line-height: 30px; + line-height: 29px; max-width: 25vw; overflow: hidden; padding: 1px 8px; diff --git a/dev/Styles/_FontasticToBoot.less b/dev/Styles/_FontasticToBoot.less index a7f883ed6..19bfc1adb 100644 --- a/dev/Styles/_FontasticToBoot.less +++ b/dev/Styles/_FontasticToBoot.less @@ -8,7 +8,7 @@ [class^="icon-"], [class*=" icon-"] { display: inline-block; - width: 1em; + min-width: 1em; .disabled &, .btn[disabled] & { @@ -35,8 +35,8 @@ .icon-spinner { - height: 0.75em; - width: 0.75em; + height: 1.2em; + width: 1.2em; margin: 0 -1px; diff --git a/integrations/nextcloud/snappymail/css/embed.css b/integrations/nextcloud/snappymail/css/embed.css index 130035ffb..150a27fe9 100644 --- a/integrations/nextcloud/snappymail/css/embed.css +++ b/integrations/nextcloud/snappymail/css/embed.css @@ -10,32 +10,6 @@ This stylesheet is used when SnappyMail runs in embed mode. min-height: 100%; } -#content[class*="app-"] #rl-app * { - box-sizing: content-box; -} -#content[class*="app-"] #rl-app #V-Settings-Domains .domain-name, -#content[class*="app-"] #rl-app #V-Settings-Domains .domain-alias -#content[class*="app-"] #rl-app #rl-settings-subscreen, -#content[class*="app-"] #rl-app .e-checkbox.material-design > div > div, -#content[class*="app-"] #rl-app .attachmentItem .iconMain, -#content[class*="app-"] #rl-app .attachmentItem .iconPreview, -#content[class*="app-"] #rl-app #V-PopupsCompose .textAreaParent, -#content[class*="app-"] #rl-app #V-PopupsCompose .attachmentAreaParent, -#content[class*="app-"] #rl-app .emailaddresses, -#content[class*="app-"] #rl-app .squire-wysiwyg, -#content[class*="app-"] #rl-app .squire-plain, -/* bootstrap */ -#content[class*="app-"] #rl-app .btn-block, -#content[class*="app-"] #rl-app select, -#content[class*="app-"] #rl-app .select, -#content[class*="app-"] #rl-app textarea, -#content[class*="app-"] #rl-app input, -#content[class*="app-"] #rl-app .input-block-level, -#content[class*="app-"] #rl-app .icon-spinner, -#content[class*="app-"] #rl-app #V-AdminPane #rl-settings-subscreen -{ - box-sizing: border-box; -} .squire-wysiwyg { min-width: 100%; min-height: 100%; @@ -78,7 +52,6 @@ This stylesheet is used when SnappyMail runs in embed mode. } #rl-app .squire-plain, #rl-app .squire-wysiwyg { - box-sizing: border-box; font-size: 13px; height: 100%; line-height: 16px; diff --git a/snappymail/v/0.0.0/app/templates/Views/User/SettingsMenu.html b/snappymail/v/0.0.0/app/templates/Views/User/SettingsMenu.html index 68fb56437..cd966b0c3 100644 --- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsMenu.html +++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsMenu.html @@ -3,7 +3,5 @@
diff --git a/vendors/bootstrap/less/buttons.less b/vendors/bootstrap/less/buttons.less index 8b2b71ead..5f208a925 100644 --- a/vendors/bootstrap/less/buttons.less +++ b/vendors/bootstrap/less/buttons.less @@ -11,8 +11,8 @@ border-radius: 3px; display: inline-block; - padding: 4px 12px; - line-height: 1.43em; + padding: 0 12px; + line-height: 2em; text-align: center; vertical-align: middle; cursor: pointer; @@ -74,10 +74,8 @@ // Block button .btn-block { display: block; - width: 100%; padding-left: 0; padding-right: 0; - box-sizing: border-box; } diff --git a/vendors/bootstrap/less/forms.less b/vendors/bootstrap/less/forms.less index f88683d3e..26657a059 100644 --- a/vendors/bootstrap/less/forms.less +++ b/vendors/bootstrap/less/forms.less @@ -41,7 +41,6 @@ select, .select, textarea, input { - box-sizing: border-box; display: inline-block; padding: 4px 6px; color: var(--input-clr, #555); diff --git a/vendors/bootstrap/less/mixins.less b/vendors/bootstrap/less/mixins.less index dd06b8441..8ecce7784 100644 --- a/vendors/bootstrap/less/mixins.less +++ b/vendors/bootstrap/less/mixins.less @@ -24,7 +24,6 @@ display: block; width: 100%; min-height: 30px; // Make inputs at least the height of their button counterpart - box-sizing: border-box; // Makes inputs behave like true block-level elements } diff --git a/vendors/bootstrap/less/type.less b/vendors/bootstrap/less/type.less index 986b5f068..a79d01b67 100644 --- a/vendors/bootstrap/less/type.less +++ b/vendors/bootstrap/less/type.less @@ -71,7 +71,6 @@ hr { margin: 1.43em 0; border: 0; border-bottom: 1px solid var(--hr-color, #eee); - box-sizing: content-box; height: 0; }