momomail-roundcube-theme/styles/dark.less

1124 lines
28 KiB
Plaintext
Raw Normal View History

2024-04-20 11:01:58 +00:00
/**
* 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;
}
}
}