No OneTemporary
Actions

Size

29 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/skins/elastic/styles/dark.less b/skins/elastic/styles/dark.less
	index e67b96c0b..cbfa53a1f 100644
	--- a/skins/elastic/styles/dark.less
	+++ b/skins/elastic/styles/dark.less
	@@ -1,1113 +1,1120 @@
	/**
	* 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;
	scrollbar-width: thin;

	.popover-body,
	.popupmenu,
	+ .ui-dialog-content,
	.frame-content,
	.formcontent,
	.table-responsive,
	.table-responsive-sm,
	.scroller {
	// Firefox does not inherit scrollbar size from the html element
	scrollbar-width: thin;
	}

	&:not(.touch) {
	::-webkit-scrollbar {
	width: 6px;
	}

	::-webkit-scrollbar-track {
	background-color: @color-dark-border;
	}

	::-webkit-scrollbar-thumb {
	background-color: @color-dark-main;
	}
	}

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

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

	.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
	// ---------------------------------

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

	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 {
	scrollbar-width: thin;
	background-color: @color-dark-popover-background;
	border-color: @color-dark-popover-border;
	box-shadow: none;
	}

	.tox-collection__group {
	scrollbar-width: thin;
	}

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

	@media screen and (max-width: @screen-width-xs) {
	.ui-dialog-buttonset {
	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-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 {
	scrollbar-width: thin;
	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%);
	}
	}

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

File Metadata

Mime Type: text/x-diff
Expires: Sat, Nov 23, 10:42 AM (1 d, 15 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 80153
Default Alt Text: (29 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions