Elastic: Use non-white background in footers/headers on mobile, other improvements

pull/5578/merge
Aleksander Machniak 7 years ago
parent 4d2d59f14f
commit 78d808aaf7

@ -7,7 +7,6 @@
<!-- keys list -->
<div class="list listbox selected" aria-labelledby="aria-label-enigmakeyslist">
<div class="header">
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
<span id="aria-label-enigmakeyslist" class="header-title"><roundcube:label name="enigma.enigmakeys" /></span>
<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 560">
<path fill="#d4dbde" d="M690 245c0 9.2-3.5 17.9-10.1 24.9l-175 175c-6.6 6.6-15.3 10.1-24.9 10.1-9.2 0-18.4-3.5-24.9-10.1l-175-175c-6.6-7-10.1-15.8-10.1-24.9 0-4.4.9-9.2 2.6-13.6C277.9 218.3 291 210 305 210h87.5V35c0-19.2 15.8-35 35-35h105c19.2 0 35 15.8 35 35v175H655c14 0 27.1 8.3 32.4 21.4 1.7 4.4 2.6 9.2 2.6 13.6zm0 245H270V350h-70v140c0 38.5 31.5 70 70 70h420c38.5 0 70-31.5 70-70V350h-70v140z"/>
</svg>

After

Width:  |  Height:  |  Size: 472 B

@ -35,6 +35,8 @@
@color-layout-header-background: #f4f4f4;
@color-layout-footer-background: #fff;
@color-layout-mobile-header-background: @color-layout-header-background;
@color-layout-mobile-footer-background: @color-layout-header-background;
// Task menu
@color-taskmenu-background: #414e54;
@ -162,7 +164,7 @@
@color-btn-danger: #fff;
@color-btn-danger-background: @color-error;
@color-quota-background: @color-black-shade-bg;
@color-quota-background: #fff;
@color-quota-text: @color-black-shade-text;
@color-quota-value: @color-main;
@color-quota-value-warning: @color-error;

@ -197,6 +197,8 @@ html.iframe {
}
body > #layout > div > .header {
background-color: @color-layout-mobile-header-background;
a.button {
// make the button active area smaller on touch devices
margin: 0 .3rem !important;
@ -218,6 +220,10 @@ html.iframe {
}
}
body > #layout > div > .footer {
background-color: @color-layout-mobile-footer-background;
}
a.toolbar-list-button {
display: none;
}

@ -47,4 +47,5 @@
@listing-treetoggle-width: 1.5em;
// Additional icons
@icon-resize-corner: data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 512x512
@icon-resize-corner: data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 512x512
@icon-file-drop: data-uri("image/svg+xml;charset=utf-8", "../images/download.svg");

@ -288,17 +288,18 @@ fieldset.image-attachment {
.bar {
flex: 1;
height: .5rem;
height: .75rem;
margin: 0 1rem;
background-color: @color-quota-background;
border: 1px solid @color-layout-border;
border-radius: .25rem;
overflow: hidden;
}
.value {
display: block;
background-color: @color-quota-value;
border-radius: .25rem;
height: .5rem;
height: 1rem;
opacity: .75;
&.warning {

@ -495,6 +495,8 @@
}
.mce-window-head {
background-color: @color-layout-mobile-header-background;
.mce-title {
font-size: 1rem;
text-align: center;
@ -507,6 +509,8 @@
}
.mce-foot {
background-color: @color-layout-mobile-footer-background;
.mce-container-body {
justify-content: space-evenly;
@ -679,6 +683,10 @@ html.touch .mce-grid td {
&.droptarget {
border: .2rem dashed @color-table-border;
&:after {
margin-top: 2rem;
}
}
button {

@ -827,8 +827,6 @@ html.touch .popupmenu.form {
margin: 0;
}
// TODO background image
.upload-form {
text-align: center;
padding-bottom: 1em;
@ -873,6 +871,15 @@ html.touch .popupmenu.form {
}
&.droptarget {
padding-bottom: .5rem !important;
&:after {
content: @icon-file-drop;
width: 10rem;
margin: 5rem auto 0 auto;
display: block;
}
&.active {
border-color: darken(@color-toolbar-button-background-hover, 20%);
}
@ -1269,4 +1276,9 @@ td.input-group input {
.input-group-text {
color: @color-input;
background-color: @color-input-addon-background;
input:focus {
z-index: 1;
border-color: @color-input-border-focus !important;
}
}

@ -79,6 +79,7 @@
position: absolute;
height: (@layout-header-height - .7rem);
margin: .25rem;
padding-bottom: .375rem;
cursor: pointer;
&:before {
@ -171,6 +172,7 @@
.ui-dialog-titlebar {
height: @layout-touch-header-height;
text-align: center;
background-color: @color-layout-mobile-header-background;
}
.ui-dialog-title {
@ -191,6 +193,7 @@
text-align: center !important;
border-top: 1px solid @color-dialog-header-border;
height: @layout-header-height !important;
background-color: @color-layout-mobile-footer-background;
.ui-dialog-buttonset {
justify-content: space-around;
@ -283,6 +286,7 @@
left: 50% !important;
transform: translate(-50%, -50%);
box-shadow: 10px 10px 10px 1000px @color-dialog-overlay-background;
z-index: 3 !important; // fixes datepicker over input-group
.ui-datepicker-header,
.ui-datepicker-title {

@ -257,6 +257,7 @@
input {
width: 3rem;
max-width: 5rem;
font-size: 90%;
text-align: center;
max-height: 1.6rem;

Loading…
Cancel
Save