mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-07-13 03:27:39 +03:00
Hopefull improved styling for Firefox mobile fixes
This commit is contained in:
the-djmaze
parent
07409cde50
commit
93ff3001c6
17 changed files with 88 additions and 87 deletions
|
|
@ -14,7 +14,6 @@
|
|||
@import "../../vendors/bootstrap/less/alerts.less";
|
||||
|
||||
@import "_FontasticToBoot.less";
|
||||
@import "_BootstrapFix.less";
|
||||
|
||||
@import "Ui.less";
|
||||
@import "Main.less";
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@ html, body {
|
|||
}
|
||||
body#rl-app {
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
@import "../../vendors/bootstrap/less/utilities.less";
|
||||
|
||||
@import "_FontasticToBoot.less";
|
||||
@import "_BootstrapFix.less";
|
||||
|
||||
@import "Ui.less";
|
||||
@import "Main.less";
|
||||
|
|
|
|||
|
|
@ -1,9 +1,4 @@
|
|||
|
||||
#rl-content {
|
||||
display:flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#rl-left {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -70,7 +65,7 @@
|
|||
background-color: var(--settings-bg-clr, #fff);
|
||||
border: 1px solid var(--border-color, #aaa);
|
||||
border-radius: var(--border-radius, 5px);
|
||||
box-shadow: @rlMainShadow;
|
||||
box-shadow: var(--smMainShadow);
|
||||
height: calc(100% - @rlLowMargin - @rlLowMargin);
|
||||
margin: 0 @rlLowMargin @rlLowMargin 0;
|
||||
overflow-y: auto;
|
||||
|
|
@ -96,7 +91,6 @@
|
|||
@media screen and (max-width: 999px) {
|
||||
#rl-settings-subscreen {
|
||||
padding: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#rl-right {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html.list-loading body {
|
||||
/* cursor: wait;*/
|
||||
|
|
@ -26,6 +22,10 @@ option:disabled {
|
|||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
#rl-content {
|
||||
display:flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
background: rgba(0,0,0,0.5);
|
||||
|
|
@ -49,7 +49,8 @@ dialog {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 10px auto;
|
||||
max-height: calc(100vh - 20px);
|
||||
max-height: calc(100vh - var(--smDialogShrink));
|
||||
max-height: calc(100dvh - var(--smDialogShrink));
|
||||
max-width: 560px;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
|
|
@ -77,6 +78,7 @@ dialog:not(.animate) {
|
|||
.rl-mobile dialog {
|
||||
margin: 0 auto;
|
||||
/* max-height: calc(100vh - 86px);*/
|
||||
/* max-height: 100dvh;*/
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -142,3 +142,47 @@ tr:hover .drag-handle {
|
|||
.tabs > [id^="tab"]:checked + label + .tab-content {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
// OTHER
|
||||
|
||||
.legend {
|
||||
border-bottom: 1px solid var(--border-color, #ddd);
|
||||
font-size: 150%;
|
||||
line-height: 2.1;
|
||||
margin-bottom: 1.43em;
|
||||
}
|
||||
summary.legend {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn.btn-thin {
|
||||
padding: 0 9px;
|
||||
}
|
||||
|
||||
.alert a:not(.close) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.alert.alert-info a:not(.close) {
|
||||
color: var(--info-clr, #3a87ad);
|
||||
}
|
||||
|
||||
.alert.alert-error a:not(.close) {
|
||||
color: var(--error-clr, #b94a48);
|
||||
}
|
||||
|
||||
/* mobile and tablet */
|
||||
@media screen and (max-width: 999px) {
|
||||
.form-horizontal {
|
||||
.control-group {
|
||||
> label {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// Move over all input controls and content
|
||||
> *:not(label) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
}
|
||||
|
||||
#V-PopupsCompose {
|
||||
height: calc(100vh - 52px);
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
max-width: 1000px;
|
||||
width: 99%;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
|
||||
#V-PopupsContacts {
|
||||
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
max-width: 900px;
|
||||
min-height: 300px;
|
||||
|
||||
|
|
@ -13,7 +14,7 @@
|
|||
|
||||
.modal-body {
|
||||
display: flex;
|
||||
height: calc(100vh - 49px);
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,21 +2,24 @@
|
|||
@folderItemPadding: 7px;
|
||||
@subPadding: 15px;
|
||||
|
||||
.b-folders {
|
||||
|
||||
> * {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
left: 0;
|
||||
#V-MailFolderList,
|
||||
#V-MailFolderList .b-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.b-folders {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding-right: 2px;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
width: calc(100% - 8px);
|
||||
margin-left: 4px;
|
||||
width: calc(100% - 8px);
|
||||
}
|
||||
|
||||
.move-action-content-wrapper {
|
||||
|
|
@ -35,24 +38,17 @@
|
|||
}
|
||||
|
||||
.b-toolbar {
|
||||
top: 0;
|
||||
padding: 10px 0 0 @rlLowMargin;
|
||||
padding: 10px 0 10px @rlLowMargin;
|
||||
color: #fff;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.b-footer {
|
||||
bottom: 10px;
|
||||
padding: 0 10px 0 5px;
|
||||
z-index: 101;
|
||||
|
||||
padding: 10px @rlLowMargin;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.b-content {
|
||||
bottom: 32px + @rlLowMargin + @rlBottomMargin;
|
||||
top: 50px + @rlLowMargin;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
min-width: 100px;
|
||||
|
|
|
|||
|
|
@ -5,11 +5,6 @@
|
|||
background-position: center;
|
||||
}
|
||||
|
||||
#rl-content {
|
||||
display:flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#rl-left {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ html.rl-mobile, html.rl-no-preview-pane {
|
|||
|
||||
#V-MailMessageList.focused .messageList {
|
||||
border-color: #9d9d9d;
|
||||
box-shadow: @rlMainShadow;
|
||||
box-shadow: var(--smMainShadow);
|
||||
}
|
||||
|
||||
#sort-list-dropdown-id {
|
||||
|
|
|
|||
|
|
@ -454,7 +454,7 @@ html.rl-no-preview-pane .messageView {
|
|||
bottom: @rlBottomMargin;
|
||||
right: @rlBottomMargin;
|
||||
border: 1px solid var(--border-color, #aaa);
|
||||
box-shadow: @rlMainShadow;
|
||||
box-shadow: var(--smMainShadow);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
background-color: var(--settings-bg-clr, #fff);
|
||||
border: 1px solid var(--border-color, #aaa);
|
||||
border-radius: var(--border-radius, 5px);
|
||||
box-shadow: @rlMainShadow;
|
||||
box-shadow: var(--smMainShadow);
|
||||
height: calc(100% - 50px - @rlLowMargin - @rlLowMargin);
|
||||
margin: 50px @rlLowMargin @rlLowMargin 0;
|
||||
overflow-y: auto;
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
|
||||
.legend {
|
||||
border-bottom: 1px solid var(--border-color, #ddd);
|
||||
font-size: 150%;
|
||||
line-height: 2.1;
|
||||
margin-bottom: 1.43em;
|
||||
}
|
||||
summary.legend {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn.btn-thin {
|
||||
padding: 0 9px;
|
||||
}
|
||||
|
||||
.alert a:not(.close) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.alert.alert-info a:not(.close) {
|
||||
color: var(--info-clr, #3a87ad);
|
||||
}
|
||||
|
||||
.alert.alert-error a:not(.close) {
|
||||
color: var(--error-clr, #b94a48);
|
||||
}
|
||||
|
||||
/* mobile and tablet */
|
||||
@media screen and (max-width: 999px) {
|
||||
.form-horizontal {
|
||||
.control-group {
|
||||
> label {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// Move over all input controls and content
|
||||
> *:not(label) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,14 @@
|
|||
|
||||
@rlLeftWidth: 200px;
|
||||
|
||||
@rlMainShadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
|
||||
@rlLowMargin: 8px;
|
||||
@rlBottomMargin: 5px;
|
||||
|
||||
:root {
|
||||
--rlLeftWidth: 200px;
|
||||
--smDialogShrink: 20px;
|
||||
--smMainShadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.rl-mobile {
|
||||
/* For Firefox */
|
||||
--smDialogShrink: 50px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@
|
|||
<ul class="b-folders-user" data-bind="template: { name: 'MailFolderListItem', foreach: folderListVisible }"></ul>
|
||||
<div class="move-action-content-wrapper" data-bind="visible: moveAction"></div>
|
||||
</div>
|
||||
<div class="b-content show-on-panel-disabled" data-bind="click: toggleLeftPanel"></div>
|
||||
<div class="b-footer btn-toolbar">
|
||||
<div class="btn-group">
|
||||
<a class="btn fontastic" data-bind="click: toggleLeftPanel, text: leftPanelDisabled() ? '❯' : '❮'"></a>
|
||||
|
|
|
|||
|
|
@ -100,4 +100,9 @@
|
|||
--tab-active-bg-clr: #fff;
|
||||
--tab-hover-border-clr: #eee;
|
||||
|
||||
--smDialogShrink: 20px;
|
||||
--smMainShadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.rl-mobile {
|
||||
--smDialogShrink: 50px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue