1124 lines
28 KiB
Plaintext
1124 lines
28 KiB
Plaintext
|
/**
|
||
|
|
* Roundcube webmail styles for the Elastic skin
|
||
|
|
*
|
||
|
|
* Copyright (c) The Roundcube Dev Team
|
||
|
|
*
|
||
|
|
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||
|
|
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||
|
|
* by keeping credits to the original authors in the README.md file.
|
||
|
|
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||
|
|
*/
|
||
|
|
|
||
|
|
@import (reference) "variables";
|
||
|
|
|
||
|
|
html.dark-mode {
|
||
|
|
scrollbar-color: @color-dark-scrollbar-thumb @color-dark-scrollbar-track;
|
||
|
|
|
||
|
|
&:not(.touch) {
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background-color: @color-dark-scrollbar-track;
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background-color: @color-dark-scrollbar-thumb;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
color: @color-dark-font;
|
||
|
|
background-color: @color-dark-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
#logo {
|
||
|
|
// FIXME: is there a better way to make the logo darker?
|
||
|
|
// `mix-blend-mode: soft-light` makes it slightly too dark
|
||
|
|
opacity: .8;
|
||
|
|
}
|
||
|
|
|
||
|
|
#layout-list,
|
||
|
|
#layout-content,
|
||
|
|
#layout-sidebar,
|
||
|
|
#layout > div > .header,
|
||
|
|
#layout > div > .footer,
|
||
|
|
.popup .listbox .footer,
|
||
|
|
.menu.pagenav.pagenav-list,
|
||
|
|
.menu.pagenav.pagenav-list + .navlist,
|
||
|
|
.menu.pagenav.pagenav-list.expanded + .navlist {
|
||
|
|
background-color: transparent;
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
#layout > div > .footer {
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
#layout > div > .header,
|
||
|
|
#layout > div > .footer {
|
||
|
|
color: unset;
|
||
|
|
|
||
|
|
a.button {
|
||
|
|
color: @color-dark-font;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#layout-menu {
|
||
|
|
background: unset;
|
||
|
|
border-right: 1px solid @color-dark-border;
|
||
|
|
|
||
|
|
.popover-header,
|
||
|
|
.special-buttons {
|
||
|
|
background: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: @screen-width-xs) {
|
||
|
|
border-left: 0;
|
||
|
|
|
||
|
|
.popover-header {
|
||
|
|
border-bottom: 1px solid @color-dark-border;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.special-buttons a:not(:focus) {
|
||
|
|
background: @color-dark-background;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.layout-phone #layout-menu {
|
||
|
|
background: @color-dark-popover-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
.searchbar {
|
||
|
|
background-color: transparent;
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
|
||
|
|
form:before,
|
||
|
|
a,
|
||
|
|
input {
|
||
|
|
color: unset;
|
||
|
|
}
|
||
|
|
|
||
|
|
a.selected {
|
||
|
|
color: @color-success;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#messagestack {
|
||
|
|
div {
|
||
|
|
color: @color-dark-font;
|
||
|
|
|
||
|
|
i.icon:before {
|
||
|
|
color: @color-dark-font;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui.alert.boxinformation,
|
||
|
|
#messagestack .alert-info {
|
||
|
|
background-color: @color-dark-message-information;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui.alert.boxerror,
|
||
|
|
#messagestack .alert-danger {
|
||
|
|
background-color: @color-dark-message-error;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui.alert.boxwarning,
|
||
|
|
#messagestack .alert-warning {
|
||
|
|
background-color: @color-dark-message-warning;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui.alert.boxconfirmation,
|
||
|
|
#messagestack .alert-success {
|
||
|
|
background-color: @color-dark-message-success;
|
||
|
|
}
|
||
|
|
|
||
|
|
#messagestack .loading {
|
||
|
|
background-color: @color-dark-message-loading;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui.alert.boxinformation,
|
||
|
|
.ui.alert.boxerror,
|
||
|
|
.ui.alert.boxwarning,
|
||
|
|
.ui.alert.boxconfirmation {
|
||
|
|
color: @color-dark-font;
|
||
|
|
i.icon:before {
|
||
|
|
color: @color-dark-font;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui.alert a:not(.btn) {
|
||
|
|
color: @color-dark-font;
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
.iframe-loader {
|
||
|
|
background-color: fadeout(@color-dark-background, 10%);
|
||
|
|
|
||
|
|
.spinner-border {
|
||
|
|
color: darken(@color-dark-font, 25%);
|
||
|
|
border-color: currentColor darken(@color-dark-font, 50%) currentColor currentColor;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#taskmenu a,
|
||
|
|
.menu.toolbar a {
|
||
|
|
color: @color-dark-font;
|
||
|
|
|
||
|
|
&.selected {
|
||
|
|
background-color: @color-dark-list-selected-background;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
pre,
|
||
|
|
.popover .menu li a[aria-haspopup]::after,
|
||
|
|
.menu.pagenav .pagenav-text,
|
||
|
|
.menu.pagenav a {
|
||
|
|
color: unset;
|
||
|
|
}
|
||
|
|
|
||
|
|
#taskmenu {
|
||
|
|
.action-buttons a {
|
||
|
|
color: @color-main;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
@media screen and (max-width: @screen-width-xs) {
|
||
|
|
border-color: @color-dark-list-border !important;
|
||
|
|
|
||
|
|
&.selected {
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (min-width: (@screen-width-xs + 1px)) and (max-width: @screen-width-medium) {
|
||
|
|
width: @layout-menu-width-sm - 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (min-width: (@screen-width-medium + 1px)) {
|
||
|
|
width: @layout-menu-width - 1px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.layout-small,
|
||
|
|
&.layout-phone {
|
||
|
|
.popover {
|
||
|
|
border-left: 1px solid @color-dark-border;
|
||
|
|
|
||
|
|
.menu .dropbutton a.dropdown {
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:not(.select-menu) .listing li:last-child {
|
||
|
|
border-color: @color-dark-list-border;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.popover-header {
|
||
|
|
background: @color-dark-popover-background;
|
||
|
|
border-bottom: 1px solid @color-dark-border;
|
||
|
|
color: unset;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popover-overlay {
|
||
|
|
background: @color-dark-dialog-overlay-background;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#taskmenu a:hover,
|
||
|
|
.popupmenu .listing li > a:not(.disabled):hover,
|
||
|
|
.header a.button.icon:not(.disabled):focus,
|
||
|
|
.header a.button.icon:not(.disabled):hover,
|
||
|
|
.menu.toolbar .dropbutton:not(.disabled):hover,
|
||
|
|
.menu a:not(.disabled):focus,
|
||
|
|
.menu a:not(.disabled):hover {
|
||
|
|
background-color: @color-dark-list-selected-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu.toolbar a.selected {
|
||
|
|
color: @color-success;
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu.toolbar .dropbutton a.dropdown:hover {
|
||
|
|
background-color: lighten(@color-dark-list-selected-background, 5%);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---------------------------------
|
||
|
|
// Lists
|
||
|
|
// ---------------------------------
|
||
|
|
|
||
|
|
.proplist li.with-sublist > a.dropdown,
|
||
|
|
.listing tbody td,
|
||
|
|
.listing tbody td a,
|
||
|
|
.listing li a {
|
||
|
|
color: @color-dark-font;
|
||
|
|
}
|
||
|
|
|
||
|
|
.listing li ul,
|
||
|
|
.listing tbody td,
|
||
|
|
.listing li {
|
||
|
|
border-color: @color-dark-list-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
.listing li.selected,
|
||
|
|
.listing li.selected > a,
|
||
|
|
.listing li.selected > div > a, // this is used e.g. by kolab_addressbook
|
||
|
|
.listing tr.selected td {
|
||
|
|
color: @color-dark-list-selected;
|
||
|
|
background-color: @color-dark-list-selected-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
.listing li.selected ul {
|
||
|
|
background-color: @color-dark-background;
|
||
|
|
|
||
|
|
div.treetoggle {
|
||
|
|
color: @color-dark-font;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.listing {
|
||
|
|
li.disabled,
|
||
|
|
tr.disabled td {
|
||
|
|
color: @color-dark-list-deleted;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.listing li.droptarget > a,
|
||
|
|
.listing tr.droptarget > td {
|
||
|
|
background-color: @color-dark-list-droptarget-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
.messagelist {
|
||
|
|
color: @color-dark-font;
|
||
|
|
|
||
|
|
tr:not(.flagged):not(.deleted) {
|
||
|
|
td.subject {
|
||
|
|
span.size,
|
||
|
|
span.date,
|
||
|
|
span.fromto {
|
||
|
|
color: @color-dark-hint;
|
||
|
|
}
|
||
|
|
|
||
|
|
span.msgicon.status {
|
||
|
|
color: @color-dark-font;
|
||
|
|
|
||
|
|
&.unread::before {
|
||
|
|
color: darken(@color-warning, 30%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
span.flag {
|
||
|
|
color: @color-dark-font;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.selected {
|
||
|
|
td.subject {
|
||
|
|
a,
|
||
|
|
span.msgicon.status {
|
||
|
|
color: @color-dark-list-selected;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
tr.flagged:not(.deleted) {
|
||
|
|
td,
|
||
|
|
span.attachment span {
|
||
|
|
color: @color-list-flagged;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
tr.deleted {
|
||
|
|
td span.flag,
|
||
|
|
td span.attachment span,
|
||
|
|
td.subject span.msgicon.status,
|
||
|
|
td.subject span.msgicon.status.unread:before,
|
||
|
|
td.subject span.subject a,
|
||
|
|
td.subject span.date,
|
||
|
|
td.subject span.fromto {
|
||
|
|
color: @color-dark-list-deleted;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
span.attachment span {
|
||
|
|
color: @color-dark-hint;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.folderlist li.mailbox .unreadcount {
|
||
|
|
background-color: @color-dark-list-badge-background;
|
||
|
|
color: @color-dark-list-badge;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attachmentslist {
|
||
|
|
background-color: @color-dark-list-selected-background;
|
||
|
|
border: 0;
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: @color-dark-font;
|
||
|
|
}
|
||
|
|
|
||
|
|
li {
|
||
|
|
.attachment-name {
|
||
|
|
color: @color-dark-font;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attachment-size {
|
||
|
|
color: @color-dark-hint;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// ---------------------------------
|
||
|
|
// Buttons & Forms
|
||
|
|
// ---------------------------------
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
color: @color-dark-font;
|
||
|
|
|
||
|
|
&:focus,
|
||
|
|
&:hover {
|
||
|
|
color: @color-dark-btn;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:disabled {
|
||
|
|
opacity: .5 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary {
|
||
|
|
background-color: @color-dark-btn-primary-background;
|
||
|
|
color: @color-dark-btn;
|
||
|
|
|
||
|
|
&:hover:not(:disabled) {
|
||
|
|
background-color: lighten(@color-dark-btn-primary-background, 5%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-secondary {
|
||
|
|
background-color: @color-dark-btn-secondary-background;
|
||
|
|
color: @color-dark-btn;
|
||
|
|
|
||
|
|
&:hover:not(:disabled) {
|
||
|
|
background-color: lighten(@color-dark-btn-secondary-background, 5%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-danger {
|
||
|
|
background-color: @color-dark-btn-danger-background;
|
||
|
|
color: @color-dark-btn;
|
||
|
|
|
||
|
|
&:hover:not(:disabled) {
|
||
|
|
background-color: lighten(@color-dark-btn-danger-background, 5%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.floating-action-buttons a.button {
|
||
|
|
box-shadow: none;
|
||
|
|
background: @color-dark-main;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-file-label,
|
||
|
|
.form-control {
|
||
|
|
background-color: @color-dark-input-background;
|
||
|
|
color: @color-dark-input;
|
||
|
|
|
||
|
|
&:not(.is-invalid) {
|
||
|
|
border-color: @color-dark-input-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
background-color: @color-dark-input-background-focus;
|
||
|
|
|
||
|
|
&:not(.is-invalid) {
|
||
|
|
color: @color-dark-input-focus !important;
|
||
|
|
border-color: @color-dark-input-border-focus;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-file-label::after {
|
||
|
|
color: @color-dark-input;
|
||
|
|
background-color: @color-dark-input-addon-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-select {
|
||
|
|
@color-arrow: escape(~"@{color-dark-input}");
|
||
|
|
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='@{color-arrow}' viewBox='0 0 4 5'%3e%3cpath d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-switch {
|
||
|
|
.custom-control-label::before {
|
||
|
|
background-color: @color-dark-checkbox;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-control-label::after {
|
||
|
|
background-color: @color-dark-font;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-control-input:disabled ~ .custom-control-label {
|
||
|
|
opacity: .4;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-control-input:checked {
|
||
|
|
& ~ .custom-control-label::before {
|
||
|
|
background-color: @color-dark-checkbox-checked;
|
||
|
|
}
|
||
|
|
|
||
|
|
& ~ .custom-control-label::after {
|
||
|
|
background-color: @color-dark-font;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
input:disabled,
|
||
|
|
select:disabled {
|
||
|
|
opacity: .5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.multi-input:not(.is-invalid) > .content {
|
||
|
|
border-color: @color-dark-input-border;
|
||
|
|
|
||
|
|
&.focused {
|
||
|
|
border-color: @color-dark-input-border-focus;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.input-group-text {
|
||
|
|
color: @color-dark-input;
|
||
|
|
background-color: @color-dark-input-addon-background;
|
||
|
|
border-color: @color-dark-input-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input-group a:focus {
|
||
|
|
border-color: @color-dark-input-border-focus;
|
||
|
|
box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-control-plaintext {
|
||
|
|
color: unset;
|
||
|
|
}
|
||
|
|
|
||
|
|
.recipient-input {
|
||
|
|
&.focus {
|
||
|
|
color: @color-dark-input-focus;
|
||
|
|
background-color: @color-dark-input-background-focus;
|
||
|
|
border-color: @color-dark-input-border-focus;
|
||
|
|
}
|
||
|
|
|
||
|
|
a.button.icon,
|
||
|
|
input {
|
||
|
|
color: @color-dark-input;
|
||
|
|
}
|
||
|
|
|
||
|
|
.recipient {
|
||
|
|
background-color: @color-dark-input-addon-background;
|
||
|
|
border-color: @color-dark-input-border;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.file-upload {
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
|
||
|
|
&:after {
|
||
|
|
mix-blend-mode: soft-light;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.droptarget {
|
||
|
|
&.active {
|
||
|
|
border-color: @color-dark-font;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.hover {
|
||
|
|
border-color: @color-dark-font;
|
||
|
|
background-color: @color-dark-list-selected-background;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.attachmentslist {
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.image-upload {
|
||
|
|
background-color: @color-dark-list-selected-background;
|
||
|
|
|
||
|
|
a.button {
|
||
|
|
background-color: fadeout(@color-dark-background, 75%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.formcontent.raweditor {
|
||
|
|
.CodeMirror {
|
||
|
|
color: @color-dark-input;
|
||
|
|
background-color: @color-dark-input-background;
|
||
|
|
border-color: @color-dark-input-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CodeMirror-focused {
|
||
|
|
background-color: @color-dark-input-background-focus;
|
||
|
|
border-color: @color-dark-input-border-focus;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.CodeMirror-selected,
|
||
|
|
.CodeMirror-line::selection,
|
||
|
|
.CodeMirror-line > span::selection,
|
||
|
|
.CodeMirror-line > span > span::selection {
|
||
|
|
background: @color-dark-list-selected-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CodeMirror-gutters {
|
||
|
|
background-color: darken(@color-dark-list-selected-background, 10%);
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CodeMirror-activeline-background {
|
||
|
|
background: @color-dark-list-selected-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
.skinselection .skinthumbnail {
|
||
|
|
border-color: @color-dark-input-border;
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---------------------------------
|
||
|
|
// HTML Editor (TinyMCE)
|
||
|
|
// ---------------------------------
|
||
|
|
|
||
|
|
.html-editor {
|
||
|
|
.editor-toolbar {
|
||
|
|
background-color: @color-dark-input-addon-background;
|
||
|
|
border-color: @color-dark-input-border;
|
||
|
|
|
||
|
|
.mce-i-html {
|
||
|
|
color: unset;
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
background-color: @color-dark-input-addon-background-focus;
|
||
|
|
border-color: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox {
|
||
|
|
&.tox-tinymce {
|
||
|
|
border-color: @color-dark-input-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-toolbar {
|
||
|
|
background-color: @color-dark-input-addon-background;
|
||
|
|
border-color: @color-dark-input-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-toolbar-overlord > div {
|
||
|
|
@color-overlord-border: escape(~"@{color-dark-input-border}");
|
||
|
|
background: url("data:image/svg+xml,%3Csvg height='33px' viewBox='0 0 40 33px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='32px' width='100' height='1' fill='@{color-overlord-border}'/%3E%3C/svg%3E") @color-dark-input-addon-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-pop.tox-pop--top {
|
||
|
|
&:before,
|
||
|
|
&:after {
|
||
|
|
border-bottom-color: @color-dark-popover-border;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-pop__dialog {
|
||
|
|
box-shadow: none;
|
||
|
|
border-color: @color-dark-popover-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-tbtn,
|
||
|
|
.tox-split-button,
|
||
|
|
.tox-swatches__picker-btn {
|
||
|
|
color: @color-dark-font;
|
||
|
|
|
||
|
|
svg {
|
||
|
|
fill: @color-dark-font !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
color: @color-dark-font;
|
||
|
|
background: @color-dark-input-addon-background-focus;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-tbtn--enabled {
|
||
|
|
background: @color-dark-input-addon-background-focus;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-button--naked {
|
||
|
|
&:focus:not(:disabled),
|
||
|
|
&.tox-button--icon:hover:not(:disabled) {
|
||
|
|
color: lighten(@color-dark-font, 5%);
|
||
|
|
background-color: @color-dark-input-addon-background-focus;
|
||
|
|
border-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:disabled {
|
||
|
|
background: transparent;
|
||
|
|
border: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-dialog__header .tox-button--naked:hover {
|
||
|
|
background: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-selectfield {
|
||
|
|
select {
|
||
|
|
background: transparent;
|
||
|
|
color: @color-dark-input;
|
||
|
|
}
|
||
|
|
|
||
|
|
svg {
|
||
|
|
fill: @color-dark-input;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-color-input span::before {
|
||
|
|
background-color: @color-dark-font;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-toolbar__group:not(:last-of-type) {
|
||
|
|
border-color: @color-dark-input-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-dialog,
|
||
|
|
.tox-dialog__header,
|
||
|
|
.tox-dialog__body,
|
||
|
|
.tox-dialog__footer,
|
||
|
|
.tox-dialog__title {
|
||
|
|
color: @color-dark-font;
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
background-color: @color-dark-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-textfield,
|
||
|
|
.tox-color-input > input,
|
||
|
|
.tox-label,
|
||
|
|
.tox-dialog__body-nav-item,
|
||
|
|
.tox-button--naked,
|
||
|
|
.tox-dialog__header .tox-button,
|
||
|
|
.tox-insert-table-picker__label {
|
||
|
|
color: @color-dark-font;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-dialog__footer .tox-button {
|
||
|
|
background-color: @color-dark-btn-primary-background;
|
||
|
|
color: @color-dark-btn;
|
||
|
|
|
||
|
|
&:disabled {
|
||
|
|
opacity: .5;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: @screen-width-xs) {
|
||
|
|
color: @color-dark-font !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus:not(:disabled) {
|
||
|
|
background-color: @color-dark-btn-primary-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover:not(:disabled) {
|
||
|
|
background-color: lighten(@color-dark-btn-primary-background, 5%);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.tox-button--secondary {
|
||
|
|
background-color: @color-dark-btn-secondary-background;
|
||
|
|
color: @color-dark-btn;
|
||
|
|
|
||
|
|
&:focus:not(:disabled) {
|
||
|
|
background-color: @color-dark-btn-secondary-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover:not(:disabled) {
|
||
|
|
background-color: lighten(@color-dark-btn-secondary-background, 5%);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-dialog__body-nav-item--active {
|
||
|
|
color: @color-main;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-dialog-wrap__backdrop {
|
||
|
|
background-color: @color-dark-dialog-overlay-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-menu {
|
||
|
|
background-color: @color-dark-popover-background;
|
||
|
|
border-color: @color-dark-popover-border;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-collection__item-caret svg {
|
||
|
|
fill: @color-dark-font;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-collection__item {
|
||
|
|
color: @color-dark-font;
|
||
|
|
|
||
|
|
&:not(:last-child) {
|
||
|
|
border-bottom: 1px solid @color-dark-list-border;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-collection--grid .tox-collection__item {
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-collection__item--active,
|
||
|
|
.tox-collection__item--active:not(.tox-collection__item--state-disabled) {
|
||
|
|
color: @color-dark-font;
|
||
|
|
background-color: @color-dark-list-selected-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tox-collection__item--enabled {
|
||
|
|
color: @color-dark-list-selected;
|
||
|
|
background-color: @color-dark-list-selected-background;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---------------------------------
|
||
|
|
// Mail preview
|
||
|
|
// ---------------------------------
|
||
|
|
|
||
|
|
.message-part,
|
||
|
|
.message-htmlpart {
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
|
||
|
|
blockquote {
|
||
|
|
background-color: @color-dark-background;
|
||
|
|
border-color: @color-dark-blockquote-0-border;
|
||
|
|
color: @color-dark-blockquote-0;
|
||
|
|
|
||
|
|
span.blockquote-link {
|
||
|
|
color: currentColor;
|
||
|
|
background: @color-dark-background;
|
||
|
|
border-color: currentColor;
|
||
|
|
}
|
||
|
|
|
||
|
|
blockquote {
|
||
|
|
color: @color-dark-blockquote-1;
|
||
|
|
border-color: @color-dark-blockquote-1-border;
|
||
|
|
|
||
|
|
blockquote {
|
||
|
|
color: @color-dark-blockquote-2;
|
||
|
|
border-color: @color-dark-blockquote-2-border;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.message-part {
|
||
|
|
span.sig {
|
||
|
|
color: @color-dark-hint;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.message-htmlpart {
|
||
|
|
background-color: white;
|
||
|
|
color: @color-font;
|
||
|
|
padding: 0;
|
||
|
|
margin-top: .5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
#message-header .header-headers .header-title {
|
||
|
|
color: @color-dark-font;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.message-partheaders {
|
||
|
|
background-color: @color-dark-list-selected-background;
|
||
|
|
border: 0;
|
||
|
|
|
||
|
|
table.headers-table {
|
||
|
|
color: @color-dark-font;
|
||
|
|
|
||
|
|
* {
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// this is when image thumbnails are enabled
|
||
|
|
p.image-attachment {
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
background-color: @color-dark-list-selected-background;
|
||
|
|
|
||
|
|
span {
|
||
|
|
color: @color-dark-hint;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// this is when image thumbnails are disabled
|
||
|
|
fieldset.image-attachment {
|
||
|
|
legend {
|
||
|
|
color: @color-dark-hint;
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Attachment preview
|
||
|
|
#messagepartframe {
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
// ----------------------------------
|
||
|
|
// jQuery-UI widgets' style overrides
|
||
|
|
// ----------------------------------
|
||
|
|
|
||
|
|
.ui-widget {
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui-widget-overlay {
|
||
|
|
background-color: @color-dark-dialog-overlay-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui-widget-header,
|
||
|
|
.ui-widget-content {
|
||
|
|
background-color: @color-dark-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui-dialog {
|
||
|
|
.ui-dialog-titlebar {
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui-dialog-title,
|
||
|
|
.ui-dialog-titlebar-close {
|
||
|
|
color: @color-dark-font;
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui-dialog-buttonpane {
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
|
||
|
|
.ui-dialog-buttonset {
|
||
|
|
a.btn-link {
|
||
|
|
color: @color-dark-font;
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: @screen-width-xs) {
|
||
|
|
button.btn-primary:not(.btn-danger),
|
||
|
|
button.btn-secondary {
|
||
|
|
color: @color-dark-font;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui-datepicker {
|
||
|
|
.ui-datepicker-header {
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
th {
|
||
|
|
color: @color-dark-hint;
|
||
|
|
font-size: 80%;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui-datepicker-prev,
|
||
|
|
.ui-datepicker-next,
|
||
|
|
.ui-state-default,
|
||
|
|
&.ui-widget-content .ui-state-default {
|
||
|
|
color: @color-dark-font;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui-state-highlight,
|
||
|
|
&.ui-widget-content .ui-state-highlight {
|
||
|
|
color: @color-main;
|
||
|
|
background-color: @color-dark-list-selected-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui-datepicker-days-cell-over a {
|
||
|
|
background-color: lighten(@color-dark-list-selected-background, 10%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui-menu {
|
||
|
|
background-color: @color-dark-popover-background;
|
||
|
|
border-color: @color-dark-popover-border;
|
||
|
|
box-shadow: none;
|
||
|
|
|
||
|
|
.ui-menu-item {
|
||
|
|
border-bottom: 1px solid @color-dark-list-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui-state-active {
|
||
|
|
background-color: @color-dark-list-selected-background !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.minicolors-panel {
|
||
|
|
box-shadow: none;
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
background: @color-dark-popover-background;
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---------------------------------
|
||
|
|
// Other components
|
||
|
|
// ---------------------------------
|
||
|
|
|
||
|
|
::placeholder,
|
||
|
|
::-webkit-input-placeholder, // Edge
|
||
|
|
.listing-info,
|
||
|
|
.listing span.secondary,
|
||
|
|
.file-upload .hint,
|
||
|
|
.contactlist span.email,
|
||
|
|
#login-footer,
|
||
|
|
#contacthead.readonly .source.row,
|
||
|
|
.formcontent .hint {
|
||
|
|
font-weight: normal;
|
||
|
|
color: @color-dark-hint;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popover {
|
||
|
|
background-color: @color-dark-popover-background;
|
||
|
|
border-color: @color-dark-popover-border;
|
||
|
|
box-shadow: none;
|
||
|
|
|
||
|
|
.menu li.separator {
|
||
|
|
background-color: transparent;
|
||
|
|
color: darken(@color-dark-font, 20%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu ul + li.separator {
|
||
|
|
border-top: 1px solid @color-dark-list-border;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.popover-body {
|
||
|
|
color: @color-dark-font;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bs-popover-auto[x-placement^="right"] > .arrow::after,
|
||
|
|
.bs-popover-right > .arrow::after {
|
||
|
|
border-right-color: @color-dark-popover-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bs-popover-auto[x-placement^="left"] > .arrow::after,
|
||
|
|
.bs-popover-left > .arrow::after {
|
||
|
|
border-left-color: @color-dark-popover-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bs-popover-auto[x-placement^="top"] > .arrow::after,
|
||
|
|
.bs-popover-top > .arrow::after {
|
||
|
|
border-top-color: @color-dark-popover-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bs-popover-auto[x-placement^="bottom"] > .arrow::after,
|
||
|
|
.bs-popover-bottom > .arrow::after {
|
||
|
|
border-bottom-color: @color-dark-popover-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-tabs {
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
|
||
|
|
.nav-link {
|
||
|
|
color: @color-dark-font;
|
||
|
|
border-color: transparent;
|
||
|
|
border-bottom-color: @color-dark-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-link:hover {
|
||
|
|
background: @color-dark-background;
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
color: @color-dark-font;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-link.active {
|
||
|
|
background: @color-dark-background;
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
border-bottom-color: transparent;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.table {
|
||
|
|
color: @color-dark-font;
|
||
|
|
|
||
|
|
td,
|
||
|
|
th,
|
||
|
|
thead th {
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-widget {
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
|
||
|
|
& > .footer {
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Options table is a table with first column for identifier/description
|
||
|
|
// and other columns for a state flag. E.g. ACL table
|
||
|
|
table.options-table {
|
||
|
|
tr:last-child td {
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr.selected td {
|
||
|
|
background-color: @color-dark-list-selected-background;
|
||
|
|
color: @color-dark-font;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#rcmdraglayer {
|
||
|
|
background-color: @color-dark-popover-background;
|
||
|
|
border: 1px solid @color-dark-popover-border;
|
||
|
|
box-shadow: none;
|
||
|
|
color: @color-dark-font;
|
||
|
|
}
|
||
|
|
|
||
|
|
.quota-widget {
|
||
|
|
color: unset;
|
||
|
|
|
||
|
|
.bar {
|
||
|
|
border-color: @color-dark-border;
|
||
|
|
background-color: @color-dark-border;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.quota-info {
|
||
|
|
.root {
|
||
|
|
color: @color-dark-hint;
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
img.contactphoto,
|
||
|
|
#contactpic {
|
||
|
|
background-color: @color-dark-list-selected-background !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pgpkeyimport {
|
||
|
|
div.key.revoked,
|
||
|
|
div.key.disabled {
|
||
|
|
color: @color-dark-list-deleted;
|
||
|
|
}
|
||
|
|
|
||
|
|
li.uid::before {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|