File Manager

Editing File: /usr/local/cpanel/base/3rdparty/roundcube/skins/elastic/styles/dark.less

/**
 * 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 {
        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;
                }
            }
        }

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;
        }
    }
}

Back to Directory File Manager