mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-31 04:59:21 +03:00
Small ui fixes
This commit is contained in:
RainLoop Team
parent
639d8c58f6
commit
e1adfdb504
38 changed files with 272 additions and 2171 deletions
|
|
@ -30,7 +30,7 @@
|
|||
height: 16px;
|
||||
|
||||
cursor: default;
|
||||
background: url('@{editor-sprite}');
|
||||
background: url('@{rlEditorSprite}');
|
||||
|
||||
&.bold { background-position: 0 0; }
|
||||
&.italic { background-position: -16px 0; }
|
||||
|
|
|
|||
|
|
@ -110,9 +110,6 @@ html.rl-no-preview-pane {
|
|||
margin: 0;
|
||||
margin-top: -60px;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 50px;
|
||||
background-image: url('@{rlLoaderBlack}');
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -159,3 +159,57 @@ html.rgba .g-ui-resizable-delimiter-highlight {
|
|||
}
|
||||
}
|
||||
|
||||
e-spinner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html.cssanimations {
|
||||
|
||||
.e-spinner {
|
||||
display: block;
|
||||
margin: 5px auto 0;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.e-spinner .e-bounce {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: #ddd;
|
||||
margin: 0 5px;
|
||||
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
|
||||
animation: bouncedelay 1.4s infinite ease-in-out;
|
||||
/* Prevent first frame from flickering when animation starts */
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.e-spinner .bounce1 {
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.e-spinner .bounce2 {
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@-webkit-keyframes bouncedelay {
|
||||
0%, 80%, 100% { -webkit-transform: scale(0.0) }
|
||||
40% { -webkit-transform: scale(1.0) }
|
||||
}
|
||||
|
||||
@keyframes bouncedelay {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0.0);
|
||||
-webkit-transform: scale(0.0);
|
||||
} 40% {
|
||||
transform: scale(1.0);
|
||||
-webkit-transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
|
|
@ -95,14 +95,14 @@
|
|||
}
|
||||
|
||||
html.no-cssanimations .icon-spinner {
|
||||
background-image: url('@{sync-file-stop}');
|
||||
background-image: url('@{rlSyncFileStop}');
|
||||
background-repeat: no-repeat;
|
||||
font-family: Arial;
|
||||
&:before {
|
||||
content: "";
|
||||
}
|
||||
&.animated {
|
||||
background-image: url('@{sync-file}');
|
||||
background-image: url('@{rlSyncFile}');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,142 +0,0 @@
|
|||
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('fonts/icomoon.svg#icomoon') format('svg');
|
||||
}
|
||||
}
|
||||
|
||||
[class^="icon-"],
|
||||
[class*=" icon-"] {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-size: 15px;
|
||||
.ie7-restore-right-whitespace();
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
/* White icons with optional class, or on hover/active states of certain elements */
|
||||
.icon-white,
|
||||
.nav > .active > a > [class^="icon-"],
|
||||
.nav > .active > a > [class*=" icon-"] {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.g-ui-menu .e-item:hover [class^="icon-"],
|
||||
.g-ui-menu .e-item:hover [class*=" icon-"] {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[class^="icon2-"],
|
||||
[class*=" icon2-"] {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-size: 15px;
|
||||
.ie7-restore-right-whitespace();
|
||||
vertical-align: text-top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.icon2-none {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.icon3-as-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-checkbox-checked, .icon-checkbox-unchecked, .icon-checkbox-partial, .icon-radio-checked, .icon-radio-unchecked {
|
||||
cursor: pointer;
|
||||
color: #555;
|
||||
font-size: 1em;
|
||||
|
||||
&:hover, &:active {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.icon-white {
|
||||
&.icon-checkbox-checked, &.icon-checkbox-unchecked, &.icon-checkbox-partial, &.icon-radio-checked, &.icon-radio-unchecked {
|
||||
color: #eee;
|
||||
|
||||
&:hover, &:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-refresh.in-process {
|
||||
background-position: 0px 0px;
|
||||
background-image: url('@{sync-file}');
|
||||
}
|
||||
|
||||
.denied-by-browser {
|
||||
cursor: default;
|
||||
.icon-checkbox-checked, icon-checkbox-unchecked {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-arrow-right-3, .icon-arrow-down-3 {
|
||||
width: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.icon2-reload {
|
||||
background-image: url('@{sync-file-stop}');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.icon2-aminate-reload {
|
||||
background-image: url('@{sync-file}');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(359deg);}
|
||||
}
|
||||
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(359deg);}
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(359deg);}
|
||||
}
|
||||
|
||||
.icon-repeat, .icon-spinner, .icon-spinner-2 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.icon-repeat:before, .icon-spinner:before, .icon-spinner-2:before {
|
||||
font-size: 16px;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
html.no-cssanimations {
|
||||
.icon-repeat, .icon-spinner, .icon-spinner-2 {
|
||||
background-image: url('@{sync-file-stop}');
|
||||
background-repeat: no-repeat;
|
||||
font-family: Arial;
|
||||
&:before {
|
||||
content: "";
|
||||
}
|
||||
&.animated {
|
||||
background-image: url('@{sync-file}');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.cssanimations {
|
||||
.icon-repeat.animated, .icon-spinner.animated, .icon-spinner-2.animated {
|
||||
-webkit-animation: rotation 1s infinite linear;
|
||||
-moz-animation: rotation 1s infinite linear;
|
||||
animation: rotation 1s infinite linear;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,5 @@
|
|||
@loader-white: "images/loader-white.gif";
|
||||
@loader-black: "images/loader-black.gif";
|
||||
@editor-sprite: "images/editor.png";
|
||||
@sync-file-stop: "images/sync.png";
|
||||
@sync-file: "images/sync.gif";
|
||||
|
||||
@rlLoaderWhite: "images/loader-white.gif";
|
||||
@rlLoaderBlack: "images/loader-black.gif";
|
||||
@rlSyncFile: "images/sync.gif";
|
||||
@rlSyncFileStop: "images/sync.png";
|
||||
@rlEditorSprite: "images/editor.png";
|
||||
|
||||
@rlLeftWidth: 230px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue