mirror of
https://github.com/the-djmaze/snappymail.git
synced 2025-01-09 08:17:53 +08:00
412d69ce75
The UserBackground is now handled with CSS3 on body.thm-body This allowed me to remove the #rl-bg so that the "video-on-login-screen" plugin will not work indefinitely.
357 lines
8.9 KiB
Text
357 lines
8.9 KiB
Text
|
|
// mixins +++
|
|
.thm-linear-gradient-mixin(@start, @end) when (iscolor(@start)) and (iscolor(@end)) {
|
|
background-color: mix(@start, @end, 60%) !important;
|
|
background-image: -moz-linear-gradient(top, @start, @end) !important; // FF 3.6+
|
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start), to(@end)) !important; // Safari 4+, Chrome 2+
|
|
background-image: -webkit-linear-gradient(top, @start, @end) !important; // Safari 5.1+, Chrome 10+
|
|
background-image: -o-linear-gradient(top, @start, @end !important); // Opera 11.10
|
|
background-image: linear-gradient(to bottom, @start, @end) !important; // Standard, IE10
|
|
background-repeat: repeat-x !important;
|
|
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start),argb(@end))) !important; // IE9 and down
|
|
}
|
|
|
|
.thm-border-radius(@radius) when (ispixel(@radius)) {
|
|
-webkit-border-radius: @radius !important;
|
|
-moz-border-radius: @radius !important;
|
|
border-radius: @radius !important;
|
|
}
|
|
|
|
.thm-box-shadow(@shadow) {
|
|
-webkit-box-shadow: @shadow !important;
|
|
-moz-box-shadow: @shadow !important;
|
|
box-shadow: @shadow !important;
|
|
}
|
|
.thm-body-background-image(@value) when (isstring(@value)) {
|
|
background-image: url("@{base}@{value}");
|
|
}
|
|
.thm-body-background-image(@value) when not (isstring(@value)) {
|
|
background-image: @value;
|
|
}
|
|
.thm-rgba-background-color(@simple, @rgba) when (@rgba = false) {
|
|
background-color: @simple !important;
|
|
}
|
|
.thm-rgba-background-color(@simple, @rgba) when not (@rgba = false) {
|
|
background-color: @simple !important;
|
|
background-color: @rgba !important;
|
|
}
|
|
// --- mixins
|
|
|
|
.thm-body {
|
|
color: @main-color;
|
|
background-color: @main-background-color;
|
|
background-size: @main-background-size;
|
|
.thm-body-background-image(@main-background-image);
|
|
}
|
|
|
|
.thm-loading {
|
|
color: @loading-color !important;
|
|
text-shadow: @loading-text-shadow !important;
|
|
|
|
.e-spinner .e-bounce {
|
|
background-color: @loading-color !important;
|
|
}
|
|
}
|
|
|
|
.thm-login-desc .desc {
|
|
color: @loading-color !important;
|
|
text-shadow: @loading-text-shadow !important;
|
|
}
|
|
|
|
.thm-login {
|
|
border: @login-border !important;
|
|
.thm-rgba-background-color(@login-background-color, @login-rgba-background-color);
|
|
.thm-linear-gradient-mixin(@login-gradient-start, @login-gradient-end);
|
|
.thm-border-radius(@login-border-radius);
|
|
.thm-box-shadow(@login-box-shadow);
|
|
|
|
&.submitting-pane.submitting {
|
|
&:before{
|
|
background: @spinner-background;
|
|
.thm-border-radius(@login-border-radius);
|
|
}
|
|
&:after{
|
|
border-top-color: @spinner-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.thm-login-text {
|
|
color: @login-color !important;
|
|
|
|
.legend, .e-checkbox-icon, .g-ui-link, .social-button, .language-button {
|
|
color: @login-color !important;
|
|
}
|
|
}
|
|
|
|
.thm-powered, .thm-mobile-switcher {
|
|
color: @powered-color;
|
|
a {
|
|
color: @powered-color;
|
|
&:hover {
|
|
color: lighten(@powered-color, 20%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.thm-languages {
|
|
color: @languages-color;
|
|
.flag-name {
|
|
color: @languages-color;
|
|
border-color: @languages-color;
|
|
}
|
|
}
|
|
|
|
.g-ui-menu {
|
|
color: @dropdown-menu-color !important;
|
|
background-color: @dropdown-menu-background-color !important;
|
|
}
|
|
|
|
.g-ui-menu .e-item > .e-link {
|
|
color: @dropdown-menu-color !important;
|
|
background-color: @dropdown-menu-background-color !important;
|
|
|
|
> i {
|
|
color: @dropdown-menu-color !important;
|
|
}
|
|
}
|
|
|
|
.g-ui-menu .e-item.selected > .e-link {
|
|
background-color: @dropdown-menu-selected-background-color !important;
|
|
}
|
|
|
|
.g-ui-menu .e-item > .e-link:hover, .g-ui-menu .e-item > .e-link:focus {
|
|
color: @dropdown-menu-hover-color !important;
|
|
background-color: @dropdown-menu-hover-background-color !important;
|
|
|
|
> i {
|
|
color: @dropdown-menu-hover-color !important;
|
|
}
|
|
}
|
|
|
|
.g-ui-menu .e-item.disabled > .e-link, .g-ui-menu .e-item.disabled > .e-link:hover {
|
|
color: @dropdown-menu-disabled-color !important;
|
|
background-color: @dropdown-menu-background-color !important;
|
|
|
|
> i {
|
|
color: @dropdown-menu-disabled-color !important;
|
|
}
|
|
}
|
|
|
|
.thm-message-list-top-toolbar, .thm-message-list-bottom-toolbar {
|
|
.thm-rgba-background-color(@message-list-toolbar-background-color, @message-list-toolbar-rgba-background-color);
|
|
.thm-linear-gradient-mixin(@message-list-toolbar-gradient-start, @message-list-toolbar-gradient-end);
|
|
}
|
|
|
|
.thm-folders .e-link {
|
|
|
|
color: @folders-disabled-color !important;
|
|
|
|
&.selectable {
|
|
color: @folders-color !important;
|
|
}
|
|
|
|
&.selectable:hover {
|
|
color: @folders-hover-color !important;
|
|
.thm-rgba-background-color(@folders-hover-background-color, @folders-hover-rgba-background-color);
|
|
}
|
|
|
|
&.selectable.selected {
|
|
color: @folders-selected-color !important;
|
|
.thm-rgba-background-color(@folders-selected-background-color, @folders-selected-rgba-background-color);
|
|
}
|
|
|
|
&.focused {
|
|
color: @folders-focused-color !important;
|
|
.thm-rgba-background-color(@folders-focused-background-color, @folders-focused-rgba-background-color);
|
|
}
|
|
|
|
&.selectable.droppableHover {
|
|
color: @folders-drop-color !important;
|
|
.thm-rgba-background-color(@folders-drop-background-color, @folders-drop-rgba-background-color);
|
|
}
|
|
}
|
|
|
|
.thm-settings-menu .e-item {
|
|
|
|
.e-link {
|
|
color: @settings-menu-disabled-color !important;
|
|
}
|
|
|
|
&.selectable .e-link {
|
|
color: @settings-menu-color !important;
|
|
}
|
|
|
|
&.selectable:hover .e-link {
|
|
.thm-rgba-background-color(@settings-menu-hover-background-color, @settings-menu-hover-rgba-background-color);
|
|
color: @settings-menu-hover-color !important;
|
|
}
|
|
|
|
&.selectable.selected .e-link {
|
|
.thm-rgba-background-color(@settings-menu-selected-background-color, @settings-menu-selected-rgba-background-color);
|
|
color: @settings-menu-selected-color !important;
|
|
}
|
|
}
|
|
|
|
.thm-message-view-background-color {
|
|
.thm-rgba-background-color(@message-background-color, @message-rgba-background-color);
|
|
}
|
|
|
|
#rl-app{
|
|
display: block;
|
|
}
|
|
|
|
html.no-css {
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: Arial, Verdana, Geneva, sans-serif;
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#rl-loading, #rl-loading-error {
|
|
position: absolute;
|
|
font-size: 30px;
|
|
line-height: 130%;
|
|
top: 50%;
|
|
width: 100%;
|
|
height: 65px;
|
|
margin: 0;
|
|
margin-top: -60px;
|
|
background-color: transparent;
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
|
|
.progressjs-container {
|
|
display: none;
|
|
}
|
|
|
|
.thm-body {
|
|
color: #333;
|
|
background-color: #aaa;
|
|
background-image: none;
|
|
}
|
|
|
|
.thm-loading {
|
|
color: #333 !important;
|
|
text-shadow: none !important;
|
|
|
|
.e-spinner .e-bounce {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.thm-login-desc .desc {
|
|
color: #333 !important;
|
|
text-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
// glass style
|
|
html.glass {
|
|
|
|
@glass-color: #fff !important;
|
|
@glass-p-color: #aaa !important;
|
|
@glass-error-color: #f76260 !important;
|
|
@glass-m-color: rgba(255, 255, 255, .8) !important;
|
|
|
|
.thm-login {
|
|
background: none !important;
|
|
background: rgba(0, 0, 0, .5) !important;
|
|
box-shadow: none !important;
|
|
|
|
border: none !important;
|
|
border: 1px solid rgba(255, 255, 255, .2) !important;
|
|
|
|
.controls {
|
|
.input-append .add-on i {
|
|
color: @glass-m-color;
|
|
text-shadow: none !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
input {
|
|
border: 1px solid none !important;
|
|
background: none !important;
|
|
outline: none !important;
|
|
text-shadow: none !important;
|
|
box-shadow: none !important;
|
|
|
|
color: @glass-color;
|
|
border-color: @glass-m-color;
|
|
|
|
&::-webkit-input-placeholder {
|
|
color: @glass-color;
|
|
text-shadow: none !important;
|
|
}
|
|
&::-moz-placeholder {
|
|
color: @glass-color;
|
|
text-shadow: none !important;
|
|
}
|
|
&:-moz-placeholder {
|
|
color: @glass-color;
|
|
text-shadow: none !important;
|
|
}
|
|
&:-ms-input-placeholder {
|
|
color: @glass-color;
|
|
text-shadow: none !important;
|
|
}
|
|
&:input-placeholder {
|
|
color: @glass-color;
|
|
text-shadow: none !important;
|
|
}
|
|
&:placeholder {
|
|
color: @glass-color;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
&:focus, &:hover {
|
|
border-color: @glass-color;
|
|
}
|
|
}
|
|
.btn {
|
|
border: 1px solid none !important;
|
|
background: none !important;
|
|
outline: none !important;
|
|
text-shadow: none !important;
|
|
box-shadow: none !important;
|
|
|
|
color: @glass-color;
|
|
border-color: @glass-m-color;
|
|
|
|
text-transform: uppercase;
|
|
font-size: 13px;
|
|
|
|
&:hover, &:active{
|
|
border-color: @glass-color;
|
|
}
|
|
}
|
|
|
|
&.error {
|
|
.input-append .add-on i {
|
|
color: @glass-error-color;
|
|
}
|
|
|
|
input {
|
|
color: @glass-error-color;
|
|
border-color: @glass-error-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.thm-login-text {
|
|
color: @glass-m-color;
|
|
text-shadow: none !important;
|
|
|
|
.legend, .e-checkbox-icon, .g-ui-link, .social-button, .language-button {
|
|
color: @glass-m-color;
|
|
text-shadow: none !important;
|
|
}
|
|
}
|
|
}
|