468 lines
9.7 KiB
CSS
468 lines
9.7 KiB
CSS
@import url("../../elastic/styles/styles.css");
|
|
@import url("../../elastic/styles/styles.min.css");
|
|
|
|
:root {
|
|
--ink: #11212b;
|
|
--paper: #f1f1e9;
|
|
--acid: #c7ef4b;
|
|
--orange: #ff6b35;
|
|
--line: #b9c5bc;
|
|
--muted: #59706b;
|
|
--panel: rgb(241 241 233 / 80%);
|
|
--field: #fbfbf6;
|
|
--backdrop: rgb(17 33 43 / 85%);
|
|
--flash-error: #ffe3d9;
|
|
--grid: 17 33 43;
|
|
--grid-a1: 5%;
|
|
--grid-a2: 4%;
|
|
--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[data-theme="dark"] {
|
|
--ink: #e7e2d3;
|
|
--paper: #161210;
|
|
--acid: #8fae3d;
|
|
--orange: #e4632c;
|
|
--line: #4a3f33;
|
|
--muted: #a89a86;
|
|
--panel: rgb(22 18 16 / 82%);
|
|
--field: #211b17;
|
|
--backdrop: rgb(8 6 5 / 90%);
|
|
--flash-error: #3a1c14;
|
|
--grid: 228 98 44;
|
|
--grid-a1: 7%;
|
|
--grid-a2: 5%;
|
|
}
|
|
|
|
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(var(--grid) / var(--grid-a1)) 50%, transparent 50.5%), linear-gradient(rgb(var(--grid) / var(--grid-a2)) 1px, transparent 1px);
|
|
background-size: 70px 70px, 7px 7px;
|
|
transition: background-color 200ms ease, color 200ms ease;
|
|
}
|
|
|
|
body > #layout,
|
|
#layout {
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
|
|
#layout::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
background: var(--panel);
|
|
}
|
|
|
|
html[data-theme="dark"] #layout::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -2;
|
|
pointer-events: none;
|
|
background-image: radial-gradient(circle at 12% 20%, rgb(143 174 61 / 12%), transparent 35%), radial-gradient(circle at 85% 75%, rgb(228 98 44 / 14%), transparent 40%);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
html[data-theme="dark"] #logo {
|
|
filter: brightness(0) saturate(100%) invert(93%) sepia(13%) saturate(389%) hue-rotate(356deg) brightness(103%) contrast(81%);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
#login-form {
|
|
position: relative;
|
|
top: 20vh;
|
|
width: 95%;
|
|
max-width: 320px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#messagelist-header,
|
|
#directorylist-header,
|
|
#taskmenu,
|
|
#taskmenu .action-buttons,
|
|
#layout-menu .menu,
|
|
.toolbar {
|
|
font-family: var(--font-family-monospace);
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
#taskmenu .action-buttons a,
|
|
#taskmenu a,
|
|
#layout-menu .menu a,
|
|
.toolbar a.button {
|
|
border-radius: 0;
|
|
}
|
|
|
|
#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 {
|
|
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);
|
|
}
|
|
|
|
/* Elastic gives these icon-only Inbox controls fixed Daylight colors. */
|
|
html[data-theme="dark"] #rcmbtn111,
|
|
html[data-theme="dark"] #rcmbtn112,
|
|
html[data-theme="dark"] #rcmbtn113,
|
|
html[data-theme="dark"] .searchbar .button.unread {
|
|
background: var(--field);
|
|
border-color: var(--line);
|
|
color: var(--ink) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] #listmenulink,
|
|
html[data-theme="dark"] #rcmbtn111::before,
|
|
html[data-theme="dark"] #rcmbtn112::before,
|
|
html[data-theme="dark"] #rcmbtn113::before,
|
|
html[data-theme="dark"] .searchbar .button.unread::before {
|
|
color: var(--ink) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] #rcmbtn111:hover,
|
|
html[data-theme="dark"] #rcmbtn112:hover,
|
|
html[data-theme="dark"] #rcmbtn113:hover,
|
|
html[data-theme="dark"] .searchbar .button.unread:hover,
|
|
html[data-theme="dark"] #listmenulink:hover {
|
|
background: var(--acid);
|
|
border-color: var(--acid);
|
|
color: var(--ink);
|
|
}
|
|
|
|
html[data-theme="dark"] #rcmbtn110,
|
|
html[data-theme="dark"] #messagelist-header .task-menu-button,
|
|
html[data-theme="dark"] #messagelist-header .toolbar-menu-button {
|
|
background: var(--field);
|
|
border-color: var(--line);
|
|
color: var(--ink) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] #rcmbtn110::before,
|
|
html[data-theme="dark"] #messagelist-header .task-menu-button::before,
|
|
html[data-theme="dark"] #messagelist-header .toolbar-menu-button::before {
|
|
color: var(--ink) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] #rcmbtn110:hover,
|
|
html[data-theme="dark"] #messagelist-header .task-menu-button:hover,
|
|
html[data-theme="dark"] #messagelist-header .toolbar-menu-button:hover {
|
|
background: var(--acid);
|
|
border-color: var(--acid);
|
|
}
|
|
|
|
html[data-theme="dark"] #mailboxlist .mailbox.selected > a {
|
|
background: var(--acid);
|
|
border-color: var(--acid);
|
|
color: var(--ink) !important;
|
|
}
|
|
|
|
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 .row,
|
|
#login-form .form-group {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
#login-form .input-group {
|
|
width: 100%;
|
|
}
|
|
|
|
#login-form .input-group > .form-control,
|
|
#login-form .input-group-text,
|
|
#login-form .input-group .icon {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
body.task-login #login-form .form-control,
|
|
body.task-login #login-form .input-group-text,
|
|
body.task-login #login-form .input-group .icon {
|
|
background-color: var(--field) !important;
|
|
border-color: var(--ink);
|
|
color: var(--ink) !important;
|
|
}
|
|
|
|
body.task-login #login-form .form-control::placeholder {
|
|
color: var(--muted);
|
|
opacity: 1;
|
|
}
|
|
|
|
.theme-toggle {
|
|
margin-top: 1rem;
|
|
padding: 0.5rem 0.75rem;
|
|
background: transparent;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.theme-toggle:hover,
|
|
.theme-toggle[aria-pressed="true"] {
|
|
background: var(--acid);
|
|
color: var(--ink);
|
|
}
|
|
|
|
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,
|
|
.box,
|
|
.card,
|
|
#compose-headers,
|
|
#compose-content,
|
|
#message-content,
|
|
#mailview-left,
|
|
#mailview-right,
|
|
#message-header,
|
|
.message-header,
|
|
#layout-sidebar .pagenav,
|
|
#layout-list .pagenav,
|
|
#layout-sidebar .footer,
|
|
#layout-list .footer {
|
|
border-color: var(--ink);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
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,
|
|
.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);
|
|
}
|
|
|
|
.records-table tbody tr.selected td,
|
|
#messagelist tbody tr.selected td,
|
|
#directorylist .treelist li.selected > a {
|
|
background: var(--ink);
|
|
color: var(--paper);
|
|
}
|
|
|
|
.popover,
|
|
.menu,
|
|
.ui-autocomplete,
|
|
.dropdown-menu,
|
|
#rcmKSearchpane {
|
|
border: 1px solid var(--ink);
|
|
border-radius: 0;
|
|
box-shadow: 4px 4px 0 var(--backdrop);
|
|
background: var(--paper);
|
|
}
|
|
|
|
.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);
|
|
} |