diff --git a/README.md b/README.md index d4f980b..83a53f5 100644 --- a/README.md +++ b/README.md @@ -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. +## 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 Compose (persistent) diff --git a/eternity-wasteland/meta.json b/eternity-wasteland/meta.json new file mode 100644 index 0000000..b4b0380 --- /dev/null +++ b/eternity-wasteland/meta.json @@ -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" + } +} \ No newline at end of file diff --git a/eternity-wasteland/styles/styles.css b/eternity-wasteland/styles/styles.css new file mode 100644 index 0000000..30b09e1 --- /dev/null +++ b/eternity-wasteland/styles/styles.css @@ -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; + } +} \ No newline at end of file diff --git a/eternity-wasteland/watermark.html b/eternity-wasteland/watermark.html new file mode 100644 index 0000000..87205c2 --- /dev/null +++ b/eternity-wasteland/watermark.html @@ -0,0 +1,16 @@ + + + + + + + + + \ No newline at end of file