Add Eternity-larry-wasteland dark theme

README.md

@@ -84,6 +84,16 @@ $config['skin'] = 'eternity-classic';
 
 Both variants use their own Eternity Project logo and browser icon. They are intended for Roundcube 1.6 installations where the matching legacy base skin is available.
 
+### Eternity Larry Wasteland
+
+`eternity-larry-wasteland` is the dark Larry variant using the Wasteland palette from `docker-ep-blog-web-server/themes`: charcoal surfaces, parchment text, olive selected states, rust-orange accents, and the technical-grid background.
+
+It requires the Larry base skin, installed as described above, then activates with:
+
+```php
+$config['skin'] = 'eternity-larry-wasteland';
+```
+
 ## Docker Install
 
 ### Docker Compose (persistent)
@@ -194,6 +204,13 @@ eternity-larry/
 	images/            Eternity Project logo and browser icon
 	meta.json          Larry child-skin registration
 	styles.css         Larry import and Eternity legacy UI overrides
+eternity-larry-wasteland/
+	images/            Wasteland logo, browser icon, and preview watermark
+	includes/links.html  Larry shared asset links and browser icon
+	mail.css           Larry mail stylesheet import
+	meta.json          Larry Wasteland child-skin registration
+	styles.css         Wasteland palette and Larry UI overrides
+	watermark.html     Dark Wasteland preview background
 eternity-classic/
 	images/            Eternity Project logo and browser icon
 	common.css         Classic common UI import and Eternity overrides

eternity-larry-wasteland/images/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Eternity Project">
+  <rect width="64" height="64" fill="#161210"/>
+  <circle cx="32" cy="32" r="22" fill="none" stroke="#e7e2d3" stroke-width="3"/>
+  <circle cx="22" cy="22" r="4" fill="#e4632c"/>
+  <circle cx="41" cy="28" r="2.5" fill="#8fae3d"/>
+  <circle cx="27" cy="43" r="3" fill="#e4632c"/>
+  <line x1="22" y1="22" x2="41" y2="28" stroke="#e7e2d3" stroke-width="1.5"/>
+  <line x1="22" y1="22" x2="27" y2="43" stroke="#e7e2d3" stroke-width="1.5"/>
+</svg>

eternity-larry-wasteland/images/logo.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 60" role="img" aria-label="Eternity Project">
+  <circle cx="30" cy="30" r="22" fill="none" stroke="#e7e2d3" stroke-width="2"/>
+  <circle cx="21" cy="21" r="3" fill="#e4632c"/>
+  <circle cx="38" cy="26" r="2" fill="#8fae3d"/>
+  <circle cx="26" cy="40" r="2.5" fill="#e4632c"/>
+  <line x1="21" y1="21" x2="38" y2="26" stroke="#e7e2d3" stroke-width="1"/>
+  <line x1="21" y1="21" x2="26" y2="40" stroke="#e7e2d3" stroke-width="1"/>
+  <text x="66" y="30" font-family="'Space Grotesk','Helvetica Neue',sans-serif" font-size="24" font-weight="700" letter-spacing="1" fill="#e7e2d3">ETERNITY</text>
+  <text x="67" y="46" font-family="'DM Mono','Courier New',monospace" font-size="11" letter-spacing="2" fill="#a89a86">PROJECT / FI</text>
+</svg>

eternity-larry-wasteland/images/watermark.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 80" role="img" aria-label="Eternity Project">
+  <circle cx="40" cy="40" r="28" fill="none" stroke="#8fae3d" stroke-width="3"/>
+  <circle cx="28" cy="28" r="4" fill="#e4632c"/>
+  <circle cx="51" cy="35" r="3" fill="#8fae3d"/>
+  <circle cx="35" cy="54" r="3.5" fill="#e4632c"/>
+  <line x1="28" y1="28" x2="51" y2="35" stroke="#8fae3d" stroke-width="2"/>
+  <line x1="28" y1="28" x2="35" y2="54" stroke="#8fae3d" stroke-width="2"/>
+  <text x="84" y="38" font-family="'Space Grotesk','Helvetica Neue',sans-serif" font-size="27" font-weight="700" letter-spacing="1" fill="#8fae3d">ETERNITY</text>
+  <text x="85" y="57" font-family="'DM Mono','Courier New',monospace" font-size="11" letter-spacing="2" fill="#8fae3d">PROJECT / FI</text>
+</svg>

eternity-larry-wasteland/includes/links.html

@@ -0,0 +1,13 @@
+<meta name="viewport" content="" id="viewport" />
+<roundcube:object name="meta" />
+<roundcube:object name="links" />
+<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+<link rel="shortcut icon" type="image/svg+xml" href="/images/favicon.svg" />
+<link rel="stylesheet" type="text/css" href="/styles.css" />
+<roundcube:if condition="in_array(env:task, array('mail','addressbook','settings'))" />
+<link rel="stylesheet" type="text/css" href="/<roundcube:var name="env:task" />.css" />
+<roundcube:endif />
+<script src="/ui.js"></script>
+<roundcube:add_label name="errortitle" />
+<roundcube:add_label name="toggleadvancedoptions" />
+<roundcube:add_label name="options" />

eternity-larry-wasteland/mail.css

@@ -0,0 +1,45 @@
+@import "../larry/mail.css";
+
+#mailboxcontainer,
+#folderlist-content,
+#folderlist-footer,
+#messagelistcontainer,
+#messagelistheader,
+#messagelistfooter,
+#mailview-left,
+#mailview-right {
+	background: var(--field);
+	border-color: var(--line);
+	color: var(--ink);
+}
+
+#messagelistheader,
+#messagelistfooter {
+	background: var(--field) !important;
+	border-color: var(--line) !important;
+}
+
+#messagelistheader a,
+#messagelistfooter a,
+#folderlist-footer a {
+	color: var(--ink);
+}
+
+#messagelistheader a:hover,
+#messagelistfooter a:hover,
+#folderlist-footer a:hover {
+	background: var(--acid);
+	color: var(--paper);
+}
+
+#mailboxmenulink.listbutton.groupactions {
+	background: var(--field);
+	border-color: var(--line);
+	color: var(--ink);
+}
+
+#mailboxmenulink.listbutton.groupactions:hover {
+	background: var(--acid);
+	border-color: var(--acid);
+	color: var(--paper);
+}

eternity-larry-wasteland/meta.json

@@ -0,0 +1,13 @@
+{
+  "name": "Eternity Larry Wasteland",
+  "author": "Eternity Project",
+  "license": "GNU Affero General Public License",
+  "version": "1.0.0",
+  "extends": "larry",
+  "localization": false,
+  "config": {
+    "product_name": "eternityproject.fi",
+    "skin_logo": "skins/eternity-larry-wasteland/images/logo.svg",
+    "skin_favicon": "skins/eternity-larry-wasteland/images/favicon.svg"
+  }
+}

eternity-larry-wasteland/styles.css

@@ -0,0 +1,160 @@
+@import "../larry/styles.css";
+
+:root {
+  --ink: #e7e2d3;
+  --paper: #161210;
+  --acid: #8fae3d;
+  --orange: #e4632c;
+  --line: #4a3f33;
+  --muted: #a89a86;
+  --field: #211b17;
+}
+
+html,
+body,
+#mainscreen,
+#layout,
+#main-menu,
+#taskbar,
+#mailboxlist,
+#messagelist,
+#messageframe {
+  background: var(--paper);
+  color: var(--ink);
+}
+
+body {
+  font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
+  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::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  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%);
+}
+
+a,
+#taskbar a,
+#mailboxlist li a,
+#messagelist tr td {
+  color: var(--ink);
+}
+
+a:hover,
+#taskbar a:hover,
+#mailboxlist li a:hover {
+  color: var(--orange);
+}
+
+#taskbar,
+#mailboxlist,
+#messagelist,
+#messagelist-header,
+#mailboxlist-header,
+.box,
+.boxcontent,
+.popupmenu,
+.menu,
+.toolbar {
+  border-color: var(--line);
+  box-shadow: none;
+}
+
+#taskbar a.selected,
+#taskbar a:hover,
+#mailboxlist li.selected > a,
+#mailboxlist li a:hover,
+#messagelist tr:hover td {
+  background: var(--acid);
+  color: var(--paper);
+}
+
+#messagelist tr.selected td {
+  background: var(--ink);
+  color: var(--paper);
+}
+
+input[type="text"],
+input[type="password"],
+textarea,
+select {
+  border: 1px solid var(--line);
+  border-radius: 0;
+  box-shadow: none;
+  background: var(--field);
+  color: var(--ink);
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: 3px solid var(--acid);
+  outline-offset: 1px;
+}
+
+input[type="submit"],
+input[type="button"],
+button,
+.button,
+.toolbar .button {
+  border: 1px solid var(--ink);
+  border-radius: 0;
+  box-shadow: none;
+  background: var(--ink);
+  color: var(--paper);
+  font-family: "DM Mono", "Courier New", monospace;
+}
+
+input[type="submit"]:hover,
+input[type="button"]:hover,
+button:hover,
+.button:hover,
+.toolbar .button:hover {
+  background: var(--acid);
+  color: var(--paper);
+}
+
+#login-form,
+#login-form .box-inner,
+#login-form .boxcontent {
+  border-color: var(--line);
+  border-radius: 0;
+  box-shadow: none;
+  background: var(--paper);
+}
+
+#login-form #logo {
+  max-width: 260px;
+  height: auto;
+}
+
+#toplogo {
+  display: block;
+  width: 180px;
+  max-width: calc(100% - 40px);
+  height: auto;
+  max-height: 36px;
+  margin: 8px 12px;
+}
+
+#topnav {
+  background: var(--paper);
+  border-bottom: 1px solid var(--line);
+}
+
+#taskbar a.button-selected,
+#taskbar a.button-selected:hover {
+  background: var(--acid);
+  border-color: var(--acid);
+  color: var(--paper);
+}
+
+#taskbar a.button-selected::before,
+#taskbar a.button-selected:hover::before {
+  color: var(--paper);
+}

eternity-larry-wasteland/watermark.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title></title>
+<style type="text/css">
+html, body { height: 100%; margin: 0; 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;
+}
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background: url(images/watermark.svg) center no-repeat;
+  background-size: min(48vw, 300px) auto;
+  opacity: 0.52;
+}
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  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%);
+}
+</style>
+</head>
+<body></body>
+</html>

eternity-larry/styles.css

@@ -132,3 +132,20 @@ button:hover,
   max-height: 36px;
   margin: 8px 12px;
 }
+
+#topnav {
+  background: var(--paper);
+  border-bottom: 1px solid var(--ink);
+}
+
+#taskbar a.button-selected,
+#taskbar a.button-selected:hover {
+  background: var(--acid);
+  border-color: var(--acid);
+  color: var(--ink);
+}
+
+#taskbar a.button-selected::before,
+#taskbar a.button-selected:hover::before {
+  color: var(--ink);
+}