Page Menu
Home
Phorge
Search
Configure Global Search
Log In
Files
F120838845
dark.less
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Authored By
Unknown
Size
28 KB
Referenced Files
None
Subscribers
None
dark.less
View Options
/**
* 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
;
textarea,
select,
.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
:
6
px
;
}
::
-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
:
1
px
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
:
1
px
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
:
1
px
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
.
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
.75
rem
center
/
8
px
10
px
;
}
.
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
.2
rem
@
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
{
scrollbar-width
:
thin
;
background-color
:
@
color
-
dark-popover-background
;
border-color
:
@
color
-
dark-popover-border
;
box-shadow
:
none
;
}
.
tox-dialog__body-nav
,
.
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
:
1
px
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
:
.5
rem
;
}
#
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
{
scrollbar-width
:
thin
;
background-color
:
@
color
-
dark-popover-background
;
border-color
:
@
color
-
dark-popover-border
;
box-shadow
:
none
;
.ui-menu-item
{
border-bottom
:
1
px
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
:
1
px
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
:
1
px
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
Details
Attached
Mime Type
text/plain
Expires
Fri, Apr 24, 2:05 PM (1 w, 15 h ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
18829545
Default Alt Text
dark.less (28 KB)
Attached To
Mode
R113 roundcubemail
Attached
Detach File
Event Timeline