385 lines
7.1 KiB
CSS
385 lines
7.1 KiB
CSS
@import url("../../elastic/styles/styles.css");
|
|
|
|
:root {
|
|
--ink: #11212b;
|
|
--paper: #f1f1e9;
|
|
--acid: #c7ef4b;
|
|
--orange: #ff6b35;
|
|
--line: #b9c5bc;
|
|
--muted: #59706b;
|
|
--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(17 33 43 / 5%) 50%, transparent 50.5%), linear-gradient(rgb(17 33 43 / 4%) 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(241 241 233 / 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);
|
|
}
|
|
|
|
#logo,
|
|
#layout > .header,
|
|
#layout-sidebar .header,
|
|
#layout-list .header,
|
|
#layout-content .header {
|
|
border-color: var(--ink);
|
|
}
|
|
|
|
#logo {
|
|
max-height: 100px;
|
|
max-width: 100%;
|
|
font-family: var(--font-family-monospace);
|
|
font-weight: 500;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* Guard the login layout in case the parent Elastic stylesheet did not load
|
|
(e.g. it was not compiled/built), so credentials never render unstyled. */
|
|
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: 100px;
|
|
}
|
|
|
|
#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: #fbfbf6;
|
|
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;
|
|
}
|
|
|
|
.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: #fbfbf6;
|
|
}
|
|
|
|
#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(17 33 43 / 16%);
|
|
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: #ffe3d9;
|
|
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;
|
|
}
|
|
}
|