Style The Lounge as FlowerCore IRC

apps/irc/irc.yaml

@@ -62,7 +62,7 @@ data:
       port: 9000,
       reverseProxy: true,
       maxHistory: 2500,
-      theme: "default",
+      theme: "thelounge-theme-flowercore",
       prefetch: false,
       disableMediaPreview: true,
       fileUpload: {
@@ -84,6 +84,458 @@ data:
       leaveMessage: "BlueJay Web IRC"
     };
 ---
+# FlowerCore / Blue Jay theme package for The Lounge
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: thelounge-flowercore-theme
+  namespace: irc
+data:
+  package.json: |
+    {
+      "name": "thelounge-theme-flowercore",
+      "version": "1.0.0",
+      "description": "FlowerCore Blue Jay theme for The Lounge",
+      "main": "package.json",
+      "keywords": [
+        "thelounge",
+        "thelounge-theme"
+      ],
+      "thelounge": {
+        "type": "theme",
+        "name": "FlowerCore Blue Jay",
+        "css": "theme.css",
+        "files": [
+          "bluejay-logo.svg",
+          "bluejay-bg.svg"
+        ]
+      }
+    }
+  theme.css: |
+    :root {
+      --fc-bg: #0a1628;
+      --fc-surface: #111d33;
+      --fc-surface-2: #162844;
+      --fc-border: #1e3a5f;
+      --fc-accent: #2b8aff;
+      --fc-accent-soft: rgba(43, 138, 255, 0.22);
+      --fc-gold: #ffb300;
+      --fc-text: #e8edf5;
+      --fc-text-muted: #9db1c8;
+      --fc-success: #3db86a;
+      --fc-danger: #e84545;
+      --body-color: var(--fc-text);
+      --body-color-muted: var(--fc-text-muted);
+      --body-bg-color: var(--fc-bg);
+      --button-color: var(--fc-accent);
+      --button-text-color-hover: #ffffff;
+      --overlay-bg-color: rgba(5, 12, 22, 0.84);
+      --link-color: #8bc3ff;
+      --window-bg-color: var(--fc-surface);
+      --window-heading-color: #f5f8ff;
+      --date-marker-color: rgba(43, 138, 255, 0.45);
+      --unread-marker-color: rgba(255, 179, 0, 0.6);
+      --highlight-bg-color: rgba(43, 138, 255, 0.12);
+      --highlight-border-color: var(--fc-gold);
+      --upload-progressbar-color: var(--fc-gold);
+    }
+
+    body {
+      background:
+        radial-gradient(circle at top right, rgba(43, 138, 255, 0.22), transparent 30%),
+        linear-gradient(145deg, rgba(10, 22, 40, 0.98), rgba(12, 25, 46, 0.98)),
+        url("/packages/thelounge-theme-flowercore/bluejay-bg.svg");
+      color: var(--fc-text);
+      font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
+    }
+
+    a,
+    a:focus,
+    a:hover {
+      color: var(--link-color);
+    }
+
+    .window,
+    #confirm-dialog,
+    #context-menu,
+    .mentions-popup,
+    .textcomplete-menu {
+      background: rgba(17, 29, 51, 0.97);
+      border: 1px solid var(--fc-border);
+      box-shadow: 0 24px 60px rgba(3, 10, 18, 0.55);
+    }
+
+    #loading .window,
+    #confirm-dialog {
+      background:
+        linear-gradient(180deg, rgba(14, 30, 54, 0.98), rgba(17, 29, 51, 0.98)),
+        url("/packages/thelounge-theme-flowercore/bluejay-bg.svg");
+      border-color: rgba(43, 138, 255, 0.4);
+    }
+
+    #loading .logo,
+    #loading .logo-inverted,
+    #sidebar .logo,
+    #sidebar .logo-inverted {
+      display: none !important;
+    }
+
+    #loading-status-container,
+    #sidebar .logo-container {
+      position: relative;
+    }
+
+    #loading-status-container::before {
+      content: "";
+      display: block;
+      width: 96px;
+      height: 96px;
+      margin: 0 auto 16px;
+      background: url("/packages/thelounge-theme-flowercore/bluejay-logo.svg") center / contain no-repeat;
+      filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
+    }
+
+    #loading-page-message::before {
+      content: "FlowerCore IRC";
+      display: block;
+      margin-bottom: 10px;
+      color: #ffffff;
+      font-size: 30px;
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+
+    #loading-page-message::after {
+      content: "Blue Jay web chat for iamworkin.lan";
+      display: block;
+      margin-top: 10px;
+      color: var(--fc-text-muted);
+      font-size: 14px;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    #loading-page-message {
+      color: var(--fc-text);
+      font-size: 15px;
+      line-height: 1.7;
+      max-width: 30rem;
+      text-align: center;
+    }
+
+    #sidebar {
+      background:
+        linear-gradient(180deg, rgba(10, 22, 40, 0.98), rgba(17, 29, 51, 0.98)),
+        url("/packages/thelounge-theme-flowercore/bluejay-bg.svg");
+      border-right: 1px solid var(--fc-border);
+      color: #d5e3f5;
+    }
+
+    #sidebar .logo-container {
+      padding: 20px 14px 8px;
+    }
+
+    #sidebar .logo-container::before {
+      content: "";
+      display: block;
+      width: 72px;
+      height: 72px;
+      margin: 0 auto 10px;
+      background: url("/packages/thelounge-theme-flowercore/bluejay-logo.svg") center / contain no-repeat;
+      filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
+    }
+
+    #sidebar .logo-container::after {
+      content: "FlowerCore IRC";
+      display: block;
+      color: #ffffff;
+      font-size: 18px;
+      font-weight: 700;
+      letter-spacing: 0.06em;
+      text-align: center;
+      text-transform: uppercase;
+    }
+
+    #sidebar .network {
+      margin-bottom: 16px;
+    }
+
+    .channel-list-item,
+    #footer button {
+      border-radius: 10px;
+      transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
+    }
+
+    .channel-list-item:hover,
+    #footer button:hover {
+      background: rgba(43, 138, 255, 0.12);
+      color: #ffffff;
+    }
+
+    .channel-list-item.active,
+    #footer button.active {
+      background: linear-gradient(90deg, rgba(43, 138, 255, 0.24), rgba(22, 40, 68, 0.92));
+      box-shadow: inset 3px 0 0 var(--fc-gold);
+      color: #ffffff;
+    }
+
+    .channel-list-item[data-type="lobby"] {
+      color: #8bc3ff;
+    }
+
+    .channel-list-item .badge {
+      background: rgba(255, 255, 255, 0.08);
+      color: var(--fc-text-muted);
+    }
+
+    .channel-list-item .badge.highlight {
+      background: var(--fc-gold);
+      color: #08111e;
+      font-weight: 700;
+    }
+
+    #footer {
+      background: rgba(10, 22, 40, 0.92);
+      border-top: 1px solid var(--fc-border);
+    }
+
+    #viewport .lt,
+    #viewport .rt,
+    #chat button.close,
+    #chat button.menu,
+    #chat button.mentions,
+    #chat button.search,
+    #form #submit,
+    #form #upload,
+    .password-container .reveal-password span {
+      color: #8bc3ff;
+    }
+
+    #viewport .lt:hover,
+    #viewport .rt:hover,
+    #chat button.close:hover,
+    #chat button.menu:hover,
+    #chat button.mentions:hover,
+    #chat button.search:hover,
+    #form #submit:hover,
+    #form #upload:hover,
+    .password-container .reveal-password span:hover {
+      background: rgba(43, 138, 255, 0.16);
+      border-radius: 8px;
+      color: #ffffff;
+      opacity: 1;
+    }
+
+    #chat .header {
+      background: linear-gradient(135deg, #0e1e36, #1a3a6a, #2b8aff);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+      color: #ffffff;
+    }
+
+    .header .title,
+    .header .topic,
+    #chat .header button {
+      color: #ffffff;
+      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+    }
+
+    #chat .messages {
+      background:
+        linear-gradient(180deg, rgba(17, 29, 51, 0.98), rgba(11, 21, 39, 0.98)),
+        radial-gradient(circle at top right, rgba(43, 138, 255, 0.08), transparent 35%);
+    }
+
+    #chat .msg {
+      border-radius: 6px;
+      transition: background-color 0.2s ease;
+    }
+
+    #chat .msg:hover {
+      background: rgba(255, 255, 255, 0.03);
+    }
+
+    #chat .chat-view[data-type="channel"] .msg.highlight,
+    .mentions-popup .msg .content {
+      background: linear-gradient(90deg, rgba(43, 138, 255, 0.16), rgba(255, 179, 0, 0.1));
+      box-shadow: inset 3px 0 0 var(--fc-gold);
+    }
+
+    #chat .msg-statusmsg {
+      background: rgba(255, 179, 0, 0.18);
+      color: #ffe4a0;
+    }
+
+    #chat .userlist,
+    #form,
+    .mentions-popup,
+    .textcomplete-menu,
+    #context-menu {
+      background: rgba(17, 29, 51, 0.98);
+      border-color: var(--fc-border);
+    }
+
+    #chat .userlist .count,
+    #chat .user-mode:before {
+      background: rgba(8, 17, 30, 0.95);
+    }
+
+    .input,
+    #connect input,
+    #connect select,
+    #settings input,
+    #settings select,
+    #settings textarea,
+    #form #nick,
+    #chat .userlist .search,
+    form.message-search input,
+    .jump-to-input .input,
+    .password-container input {
+      background: rgba(8, 17, 30, 0.72);
+      border: 1px solid var(--fc-border);
+      border-radius: 10px;
+      color: var(--fc-text);
+    }
+
+    #form {
+      border-top: 1px solid var(--fc-border);
+      padding: 8px;
+    }
+
+    #form #nick {
+      color: #8bc3ff;
+      line-height: 28px;
+    }
+
+    #form #input {
+      margin: 0 8px;
+      min-height: 36px;
+      padding: 8px 10px;
+    }
+
+    ::placeholder,
+    .jump-to-input .input::placeholder,
+    form.message-search input::placeholder {
+      color: rgba(232, 237, 245, 0.45);
+    }
+
+    .jump-to-input:before,
+    #chat .count:before {
+      color: rgba(232, 237, 245, 0.45);
+    }
+
+    .btn {
+      background: linear-gradient(180deg, rgba(24, 62, 112, 0.28), rgba(14, 30, 54, 0.38));
+      border-color: var(--fc-accent);
+      border-radius: 999px;
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+      color: var(--fc-text);
+      letter-spacing: 0.12em;
+    }
+
+    .btn:hover,
+    .btn:focus,
+    .btn:disabled {
+      background: linear-gradient(180deg, #2b8aff, #1c6fe3);
+      color: #ffffff;
+    }
+
+    .btn:active,
+    .btn:focus,
+    .input:focus {
+      box-shadow: 0 0 0 3px rgba(43, 138, 255, 0.26);
+    }
+
+    #version-checker,
+    #settings .settings-sync-panel,
+    #connect .connect-sasl-external {
+      background: rgba(8, 17, 30, 0.78);
+      border: 1px solid var(--fc-border);
+      color: var(--fc-text);
+    }
+
+    #version-checker.loading {
+      border-left: 3px solid var(--fc-accent);
+      color: #9dd3ff;
+    }
+
+    #version-checker.up-to-date {
+      border-left: 3px solid var(--fc-success);
+      color: #87e9a9;
+    }
+
+    #version-checker.new-packages,
+    #version-checker.new-version {
+      border-left: 3px solid var(--fc-gold);
+      color: #ffe4a0;
+    }
+
+    #version-checker.error,
+    #settings .error,
+    #sign-in .error {
+      border-left: 3px solid var(--fc-danger);
+      color: #ffb3b3;
+    }
+
+    #upload-progressbar {
+      box-shadow: 0 0 14px rgba(255, 179, 0, 0.75);
+    }
+
+    ::-webkit-scrollbar:hover {
+      background-color: rgba(255, 255, 255, 0.04);
+    }
+
+    ::-webkit-scrollbar-thumb:vertical {
+      background: linear-gradient(180deg, rgba(43, 138, 255, 0.72), rgba(30, 58, 95, 0.95));
+    }
+
+    ::-webkit-scrollbar-thumb:vertical:active {
+      background: linear-gradient(180deg, rgba(255, 179, 0, 0.85), rgba(43, 138, 255, 0.9));
+    }
+
+    @media (max-width: 768px) {
+      #sidebar {
+        box-shadow: 0 0 28px rgba(0, 0, 0, 0.5);
+      }
+
+      #chat .header {
+        padding-right: 6px;
+      }
+    }
+  bluejay-logo.svg: |
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+      <ellipse cx="14" cy="18" rx="10" ry="9" fill="#3B7BC0"/>
+      <ellipse cx="12" cy="20" rx="6" ry="6" fill="#C8DFFF"/>
+      <path d="M10 14 C8 10, 16 8, 22 12 C24 14, 22 18, 18 18 C14 18, 10 16, 10 14Z" fill="#2B5A8A"/>
+      <path d="M12 12.5 L21 11" stroke="#fff" stroke-width="1.5" stroke-linecap="round" opacity="0.7"/>
+      <circle cx="22" cy="11" r="6" fill="#3B7BC0"/>
+      <path d="M20 6 L22 1 L24 3 L22 7Z" fill="#2B5A8A"/>
+      <path d="M21 5 L22.5 2 L23.5 4Z" fill="#5BA3FF"/>
+      <path d="M16 14 C18 16, 22 16, 26 14" stroke="#0d1520" stroke-width="1.8" fill="none" stroke-linecap="round"/>
+      <circle cx="24" cy="10" r="2" fill="#fff"/>
+      <circle cx="24.5" cy="9.5" r="1" fill="#0d1520"/>
+      <path d="M27 11 L31 11.5 L27 13Z" fill="#364b6b"/>
+      <path d="M4 16 L1 13 L3 17 L1 20 L5 18Z" fill="#2B5A8A"/>
+      <circle cx="10" cy="23" r="2" fill="#FFB300"/>
+      <circle cx="10" cy="23" r="1" fill="#FFCA40"/>
+    </svg>
+  bluejay-bg.svg: |
+    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
+      <defs>
+        <pattern id="hex" x="0" y="0" width="60" height="52" patternUnits="userSpaceOnUse">
+          <path d="M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z" fill="none" stroke="rgba(43,138,255,0.04)" stroke-width="0.5"/>
+        </pattern>
+      </defs>
+      <rect width="200" height="200" fill="url(#hex)"/>
+      <circle cx="30" cy="0" r="1" fill="rgba(255,179,0,0.06)"/>
+      <circle cx="90" cy="0" r="1" fill="rgba(255,179,0,0.06)"/>
+      <circle cx="150" cy="0" r="1" fill="rgba(255,179,0,0.06)"/>
+      <circle cx="0" cy="52" r="1" fill="rgba(43,138,255,0.06)"/>
+      <circle cx="60" cy="52" r="1" fill="rgba(43,138,255,0.06)"/>
+      <circle cx="120" cy="52" r="1" fill="rgba(43,138,255,0.06)"/>
+      <circle cx="180" cy="52" r="1" fill="rgba(43,138,255,0.06)"/>
+    </svg>
+---
 # UnrealIRCd configuration template (passwords replaced by placeholders)
 apiVersion: v1
 kind: ConfigMap
@@ -699,6 +1151,23 @@ spec:
       labels:
         app: thelounge
     spec:
+      initContainers:
+        - name: install-flowercore-theme
+          image: ghcr.io/thelounge/thelounge:4.4.3
+          command:
+            - sh
+            - -lc
+            - |
+              set -eu
+              THELOUNGE_HOME=/var/opt/thelounge thelounge install file:/flowercore-theme
+          volumeMounts:
+            - name: thelounge-config
+              mountPath: /var/opt/thelounge/config.js
+              subPath: config.js
+            - name: thelounge-packages
+              mountPath: /var/opt/thelounge/packages
+            - name: thelounge-flowercore-theme
+              mountPath: /flowercore-theme
       containers:
         - name: thelounge
           image: ghcr.io/thelounge/thelounge:4.4.3
@@ -728,10 +1197,17 @@ spec:
             - name: thelounge-config
               mountPath: /var/opt/thelounge/config.js
               subPath: config.js
+            - name: thelounge-packages
+              mountPath: /var/opt/thelounge/packages
       volumes:
         - name: thelounge-config
           configMap:
             name: thelounge-config
+        - name: thelounge-packages
+          emptyDir: {}
+        - name: thelounge-flowercore-theme
+          configMap:
+            name: thelounge-flowercore-theme
 ---
 # UnrealIRCd Service
 apiVersion: v1