Add dark wasteland teheme
This commit is contained in:
@@ -34,6 +34,16 @@ The skin has no build step and no PHP dependencies. Its font stacks use `Space G
|
|||||||
|
|
||||||
4. Clear the browser cache, then load Roundcube. The login view, mailbox list, compose view, menus, controls, and status messages should all use the new palette.
|
4. Clear the browser cache, then load Roundcube. The login view, mailbox list, compose view, menus, controls, and status messages should all use the new palette.
|
||||||
|
|
||||||
|
## Eternity Wasteland
|
||||||
|
|
||||||
|
`eternity-wasteland` is the dark, warm-industrial Eternity variant. It uses the Wasteland palette: charcoal surfaces, parchment text, olive actions, rust-orange signals, and an orange technical grid.
|
||||||
|
|
||||||
|
Install it with the same procedure above, copying `eternity-wasteland` instead of `eternity`, then configure:
|
||||||
|
|
||||||
|
```php
|
||||||
|
$config['skin'] = 'eternity-wasteland';
|
||||||
|
```
|
||||||
|
|
||||||
## Docker Install
|
## Docker Install
|
||||||
|
|
||||||
### Docker Compose (persistent)
|
### Docker Compose (persistent)
|
||||||
|
|||||||
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"name": "Eternity Wasteland",
|
||||||
|
"author": "Eternity Project",
|
||||||
|
"license": "GNU Affero General Public License",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"extends": "elastic",
|
||||||
|
"localization": false,
|
||||||
|
"config": {
|
||||||
|
"product_name": "eternityproject.fi"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title></title>
|
||||||
|
<style type="text/css">
|
||||||
|
html, body { height: 100%; overflow: hidden; }
|
||||||
|
body {
|
||||||
|
background-color: #161210;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user