Add dark wasteland teheme
This commit is contained in:
@@ -0,0 +1,432 @@
|
||||
/* The official roundcube/roundcubemail Docker image ships Elastic pre-minified
|
||||
as styles.min.css (no plain styles.css); source/dev installs may have only
|
||||
the unminified file. A missing @import just yields an empty sheet, so
|
||||
importing both here is a harmless way to support either layout. */
|
||||
@import url("../../elastic/styles/styles.css");
|
||||
@import url("../../elastic/styles/styles.min.css");
|
||||
|
||||
:root {
|
||||
--ink: #e7e2d3;
|
||||
--paper: #161210;
|
||||
--acid: #8fae3d;
|
||||
--orange: #e4632c;
|
||||
--line: #4a3f33;
|
||||
--muted: #a89a86;
|
||||
--field: #211b17;
|
||||
--flash-error: #3a1c14;
|
||||
--body-font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
|
||||
--header-font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
|
||||
--font-family-monospace: "DM Mono", "Courier New", monospace;
|
||||
--primary: var(--ink);
|
||||
--primary-text: var(--paper);
|
||||
--secondary: var(--acid);
|
||||
--secondary-text: var(--ink);
|
||||
--body-bg: var(--paper);
|
||||
--content-bg: var(--paper);
|
||||
--layout-bg: var(--paper);
|
||||
--main-action-color: var(--ink);
|
||||
--main-action-text-color: var(--paper);
|
||||
--link-color: var(--ink);
|
||||
--input-focus-border-color: var(--ink);
|
||||
--input-focus-box-shadow: 0 0 0 3px var(--acid);
|
||||
--border-radius: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#layout,
|
||||
#layout-content,
|
||||
#layout-list,
|
||||
#layout-sidebar,
|
||||
#layout-menu {
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--body-font-family);
|
||||
background-image: linear-gradient(90deg, transparent 49.5%, rgb(228 98 44 / 7%) 50%, transparent 50.5%), linear-gradient(rgb(228 98 44 / 5%) 1px, transparent 1px);
|
||||
background-size: 70px 70px, 7px 7px;
|
||||
}
|
||||
|
||||
body > #layout,
|
||||
#layout {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#layout::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background: rgb(22 18 16 / 82%);
|
||||
}
|
||||
|
||||
body a,
|
||||
body .link,
|
||||
#taskmenu a,
|
||||
#taskmenu a:visited {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
body a:hover,
|
||||
body .link:hover,
|
||||
#taskmenu a:hover,
|
||||
#taskmenu a.selected {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
#layout > .header,
|
||||
#layout-sidebar .header,
|
||||
#layout-list .header,
|
||||
#layout-content .header {
|
||||
border-color: var(--ink);
|
||||
}
|
||||
|
||||
#logo {
|
||||
max-height: 60px;
|
||||
max-width: 260px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
body.task-login #layout {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body.task-login #layout-content {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body.task-login #logo {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 16vh;
|
||||
max-height: 60px;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
#login-form {
|
||||
position: relative;
|
||||
top: 20vh;
|
||||
width: 95%;
|
||||
max-width: 320px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#messagelist-header,
|
||||
#directorylist-header {
|
||||
font-family: var(--font-family-monospace);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
#taskmenu,
|
||||
#taskmenu .action-buttons,
|
||||
#layout-menu .menu,
|
||||
.toolbar {
|
||||
font-family: var(--font-family-monospace);
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
#taskmenu .action-buttons a,
|
||||
#taskmenu a,
|
||||
#layout-menu .menu a,
|
||||
.toolbar a.button {
|
||||
border-radius: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#taskmenu .action-buttons a.selected,
|
||||
#taskmenu .action-buttons a:hover,
|
||||
#taskmenu a.selected,
|
||||
#layout-menu .menu a.selected,
|
||||
#layout-menu .menu a:hover {
|
||||
background: var(--acid);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.button,
|
||||
.btn,
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
button,
|
||||
.formbuttons .button {
|
||||
border: 1px solid var(--ink);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
font-family: var(--font-family-monospace);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.button:hover,
|
||||
.btn:hover,
|
||||
input[type="button"]:hover,
|
||||
input[type="submit"]:hover,
|
||||
button:hover,
|
||||
.formbuttons .button:hover {
|
||||
border-color: var(--ink);
|
||||
background: var(--acid);
|
||||
color: var(--ink);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.button.secondary,
|
||||
.btn-secondary,
|
||||
.button.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.button.secondary:hover,
|
||||
.btn-secondary:hover,
|
||||
.button.btn-secondary:hover {
|
||||
background: var(--orange);
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="search"],
|
||||
textarea,
|
||||
select,
|
||||
.custom-select,
|
||||
.form-control {
|
||||
border: 1px solid var(--ink);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background-color: var(--field);
|
||||
color: var(--ink);
|
||||
font-family: var(--body-font-family);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus,
|
||||
.custom-select:focus,
|
||||
.form-control:focus {
|
||||
border-color: var(--ink);
|
||||
outline: 3px solid var(--acid);
|
||||
outline-offset: 1px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-group > label,
|
||||
.form-label,
|
||||
.propform label,
|
||||
#login-form label {
|
||||
color: var(--ink);
|
||||
font-family: var(--font-family-monospace);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.7px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#login-form,
|
||||
#login-footer,
|
||||
#login-content,
|
||||
#login-box {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#login-form .form-group,
|
||||
#login-box {
|
||||
border-color: var(--ink);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#login-form .row,
|
||||
#login-form .form-group {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#login-form .input-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#login-form .input-group .icon,
|
||||
#login-form .input-group-prepend,
|
||||
#login-form .input-group-append {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#login-form .input-group > .form-control,
|
||||
#login-form .input-group-text,
|
||||
#login-form .input-group .icon {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
#login-form .input-group-text,
|
||||
#login-form .input-group .icon {
|
||||
background-color: var(--field);
|
||||
border-color: var(--ink);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
#login-form input.form-control {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.task-login #messagestack {
|
||||
top: auto;
|
||||
bottom: 1rem;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
transform: translateX(-50%);
|
||||
width: 90%;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.listing,
|
||||
.records-table,
|
||||
.table,
|
||||
#messagelist,
|
||||
#directorylist,
|
||||
#contacts-table {
|
||||
border-color: var(--ink);
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
.records-table thead td,
|
||||
.records-table thead th,
|
||||
#messagelist thead td,
|
||||
#directorylist .treelist li a {
|
||||
border-color: var(--ink);
|
||||
color: var(--muted);
|
||||
font-family: var(--font-family-monospace);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.records-table tbody tr td,
|
||||
#messagelist tbody tr td,
|
||||
#directorylist .treelist li a {
|
||||
border-color: var(--line);
|
||||
}
|
||||
|
||||
.records-table tbody tr:hover td,
|
||||
#messagelist tbody tr:hover td,
|
||||
#directorylist .treelist li a:hover {
|
||||
background: var(--acid);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.records-table tbody tr.selected td,
|
||||
#messagelist tbody tr.selected td,
|
||||
#directorylist .treelist li.selected > a {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
}
|
||||
|
||||
.records-table tbody tr.selected .unread,
|
||||
#messagelist tbody tr.selected .unread {
|
||||
color: var(--paper);
|
||||
}
|
||||
|
||||
.box,
|
||||
.card,
|
||||
#compose-headers,
|
||||
#compose-content,
|
||||
#message-content,
|
||||
#mailview-left,
|
||||
#mailview-right {
|
||||
border-color: var(--ink);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
#message-header,
|
||||
.message-header,
|
||||
#compose-headers {
|
||||
border-color: var(--ink);
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
#compose-headers .form-control,
|
||||
#compose-headers input,
|
||||
#compose-headers textarea {
|
||||
background: var(--field);
|
||||
}
|
||||
|
||||
#layout-sidebar .pagenav,
|
||||
#layout-list .pagenav,
|
||||
#layout-sidebar .footer,
|
||||
#layout-list .footer {
|
||||
border-color: var(--ink);
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
.popover,
|
||||
.menu,
|
||||
.ui-autocomplete,
|
||||
.dropdown-menu,
|
||||
#rcmKSearchpane {
|
||||
border: 1px solid var(--ink);
|
||||
border-radius: 0;
|
||||
box-shadow: 4px 4px 0 rgb(8 6 5 / 60%);
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
.popover .menu li a:hover,
|
||||
.menu li a:hover,
|
||||
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
|
||||
.dropdown-item:hover {
|
||||
background: var(--acid);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.alert,
|
||||
#messagestack > div,
|
||||
#messagestack > .alert {
|
||||
border: 1px solid var(--ink);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
font-family: var(--font-family-monospace);
|
||||
}
|
||||
|
||||
.alert-success,
|
||||
#messagestack .success {
|
||||
background: var(--acid);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.alert-danger,
|
||||
.alert-error,
|
||||
#messagestack .error {
|
||||
border-color: var(--orange);
|
||||
background: var(--flash-error);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.quota-widget .value,
|
||||
.progress-bar {
|
||||
background: var(--orange);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#taskmenu .action-buttons a,
|
||||
#taskmenu a,
|
||||
#layout-menu .menu a {
|
||||
min-width: 2.75rem;
|
||||
}
|
||||
|
||||
.records-table tbody tr td,
|
||||
#messagelist tbody tr td {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user