436 lines
16 KiB
CSS
436 lines
16 KiB
CSS
|
/*
|
||
|
|
* ╔══════════════════════════════════════════════════════════════╗
|
||
|
|
* ║ ECHO6 — Open WebUI Theme (Togglable) v2 ║
|
||
|
|
* ║ Cyberpunk terminal aesthetic ║
|
||
|
|
* ║ Cyan #28C0E8 · Yellow #F0D848 · JetBrains Mono ║
|
||
|
|
* ╚══════════════════════════════════════════════════════════════╝
|
||
|
|
*
|
||
|
|
* Activates when <html> has class "echo6" — toggled by the
|
||
|
|
* companion script echo6-theme-toggle.js
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* ── Import JetBrains Mono ────────────────────────────────────── */
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
|
||
|
|
|
||
|
|
/* ── Palette Variables ────────────────────────────────────────── */
|
||
|
|
.echo6 {
|
||
|
|
--e6-cyan: #28C0E8;
|
||
|
|
--e6-cyan-dim: #1a8aa8;
|
||
|
|
--e6-cyan-glow: #28c0e815;
|
||
|
|
--e6-yellow: #F0D848;
|
||
|
|
--e6-yellow-dim: #c4b03a;
|
||
|
|
--e6-yellow-glow: #f0d84820;
|
||
|
|
--e6-bg-primary: #0a0e14;
|
||
|
|
--e6-bg-secondary: #0d1117;
|
||
|
|
--e6-bg-tertiary: #131920;
|
||
|
|
--e6-bg-elevated: #181f28;
|
||
|
|
--e6-text-primary: #c8d0d8;
|
||
|
|
--e6-text-secondary: #4a5568;
|
||
|
|
--e6-text-bright: #e2e8f0;
|
||
|
|
--e6-border: #1a2332;
|
||
|
|
--e6-border-subtle: #141c26;
|
||
|
|
--e6-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ══════════════════════════════════════════════════════════════
|
||
|
|
GLOBAL
|
||
|
|
══════════════════════════════════════════════════════════════ */
|
||
|
|
|
||
|
|
.echo6 body {
|
||
|
|
background-color: var(--e6-bg-primary) !important;
|
||
|
|
color: var(--e6-text-primary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Font — target text elements, not * (breaks icon fonts) */
|
||
|
|
.echo6 body,
|
||
|
|
.echo6 p,
|
||
|
|
.echo6 span,
|
||
|
|
.echo6 div,
|
||
|
|
.echo6 a,
|
||
|
|
.echo6 button,
|
||
|
|
.echo6 input,
|
||
|
|
.echo6 textarea,
|
||
|
|
.echo6 select,
|
||
|
|
.echo6 label,
|
||
|
|
.echo6 h1, .echo6 h2, .echo6 h3, .echo6 h4, .echo6 h5, .echo6 h6,
|
||
|
|
.echo6 li,
|
||
|
|
.echo6 td, .echo6 th,
|
||
|
|
.echo6 pre, .echo6 code {
|
||
|
|
font-family: var(--e6-font-mono) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ══════════════════════════════════════════════════════════════
|
||
|
|
SIDEBAR — clean, no glow pills
|
||
|
|
══════════════════════════════════════════════════════════════ */
|
||
|
|
|
||
|
|
/* Sidebar background */
|
||
|
|
.echo6 #sidebar,
|
||
|
|
.echo6 [class*="sidebar"],
|
||
|
|
.echo6 aside,
|
||
|
|
.echo6 nav {
|
||
|
|
background-color: var(--e6-bg-secondary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* All sidebar text — muted by default */
|
||
|
|
.echo6 #sidebar *,
|
||
|
|
.echo6 aside * {
|
||
|
|
color: var(--e6-text-secondary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Kill all existing backgrounds/glows on sidebar items */
|
||
|
|
.echo6 #sidebar a,
|
||
|
|
.echo6 #sidebar button,
|
||
|
|
.echo6 aside a,
|
||
|
|
.echo6 aside button {
|
||
|
|
background-color: transparent !important;
|
||
|
|
background: transparent !important;
|
||
|
|
border-radius: 0 !important;
|
||
|
|
border: none !important;
|
||
|
|
box-shadow: none !important;
|
||
|
|
transition: color 0.12s ease !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Sidebar hover — just brighten the text */
|
||
|
|
.echo6 #sidebar a:hover,
|
||
|
|
.echo6 #sidebar a:hover *,
|
||
|
|
.echo6 #sidebar button:hover,
|
||
|
|
.echo6 #sidebar button:hover *,
|
||
|
|
.echo6 aside a:hover,
|
||
|
|
.echo6 aside a:hover * {
|
||
|
|
color: var(--e6-cyan) !important;
|
||
|
|
background-color: transparent !important;
|
||
|
|
background: transparent !important;
|
||
|
|
box-shadow: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Active/selected chat — no background, just brighter text */
|
||
|
|
.echo6 #sidebar [class*="bg-"],
|
||
|
|
.echo6 #sidebar [aria-selected="true"] {
|
||
|
|
background-color: transparent !important;
|
||
|
|
background: transparent !important;
|
||
|
|
box-shadow: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 #sidebar [class*="bg-"] *,
|
||
|
|
.echo6 #sidebar [aria-selected="true"] * {
|
||
|
|
color: var(--e6-text-bright) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Section headers (Chats, Folders, Today, Yesterday) */
|
||
|
|
.echo6 #sidebar .text-xs,
|
||
|
|
.echo6 aside .text-xs {
|
||
|
|
color: var(--e6-text-secondary) !important;
|
||
|
|
letter-spacing: 0.08em !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ══════════════════════════════════════════════════════════════
|
||
|
|
MAIN CONTENT AREA — aggressively override all backgrounds
|
||
|
|
══════════════════════════════════════════════════════════════ */
|
||
|
|
|
||
|
|
.echo6 main,
|
||
|
|
.echo6 div[class*="bg-white"],
|
||
|
|
.echo6 div[class*="bg-gray"] {
|
||
|
|
background-color: var(--e6-bg-primary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Target OWUI's main wrapper and content divs */
|
||
|
|
.echo6 #app > div,
|
||
|
|
.echo6 #app > div > div,
|
||
|
|
.echo6 [class*="h-screen"],
|
||
|
|
.echo6 [class*="h-full"],
|
||
|
|
.echo6 [class*="min-h-screen"] {
|
||
|
|
background-color: var(--e6-bg-primary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Model name display (center of page) */
|
||
|
|
.echo6 [class*="text-3xl"],
|
||
|
|
.echo6 [class*="text-2xl"] {
|
||
|
|
color: var(--e6-text-bright) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Suggested prompts ────────────────────────────────────────── */
|
||
|
|
/* Target the suggestion container buttons specifically */
|
||
|
|
.echo6 [class*="suggestion"],
|
||
|
|
.echo6 [class*="Suggestion"],
|
||
|
|
.echo6 button[class*="cursor-pointer"][class*="flex"][class*="rounded-xl"],
|
||
|
|
.echo6 button[class*="cursor-pointer"][class*="flex"][class*="rounded-lg"],
|
||
|
|
.echo6 [class*="bg-gray"][class*="cursor-pointer"][class*="rounded"] {
|
||
|
|
background-color: var(--e6-bg-tertiary) !important;
|
||
|
|
background: var(--e6-bg-tertiary) !important;
|
||
|
|
border: 1px solid var(--e6-border) !important;
|
||
|
|
color: var(--e6-text-primary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 [class*="suggestion"]:hover,
|
||
|
|
.echo6 [class*="Suggestion"]:hover,
|
||
|
|
.echo6 button[class*="cursor-pointer"][class*="flex"][class*="rounded-xl"]:hover,
|
||
|
|
.echo6 button[class*="cursor-pointer"][class*="flex"][class*="rounded-lg"]:hover,
|
||
|
|
.echo6 [class*="bg-gray"][class*="cursor-pointer"][class*="rounded"]:hover {
|
||
|
|
border-color: var(--e6-cyan) !important;
|
||
|
|
background-color: var(--e6-bg-elevated) !important;
|
||
|
|
background: var(--e6-bg-elevated) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ══════════════════════════════════════════════════════════════
|
||
|
|
INPUT AREA
|
||
|
|
══════════════════════════════════════════════════════════════ */
|
||
|
|
|
||
|
|
.echo6 textarea,
|
||
|
|
.echo6 #chat-textarea,
|
||
|
|
.echo6 [contenteditable] {
|
||
|
|
background-color: var(--e6-bg-tertiary) !important;
|
||
|
|
border-color: var(--e6-border) !important;
|
||
|
|
color: var(--e6-text-bright) !important;
|
||
|
|
caret-color: var(--e6-cyan) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 textarea:focus,
|
||
|
|
.echo6 #chat-textarea:focus,
|
||
|
|
.echo6 [contenteditable]:focus {
|
||
|
|
border-color: var(--e6-cyan) !important;
|
||
|
|
box-shadow: 0 0 0 1px var(--e6-cyan-glow) !important;
|
||
|
|
outline: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Input wrapper bar */
|
||
|
|
.echo6 [class*="bottom-0"],
|
||
|
|
.echo6 [class*="sticky"][class*="bottom"] {
|
||
|
|
background-color: var(--e6-bg-primary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Action icons in input row */
|
||
|
|
.echo6 textarea ~ div button,
|
||
|
|
.echo6 [class*="input"] button {
|
||
|
|
color: var(--e6-text-secondary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 textarea ~ div button:hover,
|
||
|
|
.echo6 [class*="input"] button:hover {
|
||
|
|
color: var(--e6-cyan) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ══════════════════════════════════════════════════════════════
|
||
|
|
MESSAGE BUBBLES
|
||
|
|
══════════════════════════════════════════════════════════════ */
|
||
|
|
|
||
|
|
.echo6 [data-role="user"] > div {
|
||
|
|
background-color: var(--e6-bg-elevated) !important;
|
||
|
|
border: 1px solid var(--e6-border) !important;
|
||
|
|
border-radius: 8px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 [data-role="assistant"] > div {
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 [data-role] * {
|
||
|
|
color: var(--e6-text-primary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ══════════════════════════════════════════════════════════════
|
||
|
|
TOP BAR / HEADER
|
||
|
|
══════════════════════════════════════════════════════════════ */
|
||
|
|
|
||
|
|
.echo6 header,
|
||
|
|
.echo6 [class*="top-0"][class*="sticky"],
|
||
|
|
.echo6 [class*="top-0"][class*="fixed"] {
|
||
|
|
background-color: var(--e6-bg-secondary) !important;
|
||
|
|
border-bottom: 1px solid var(--e6-border-subtle) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 header button,
|
||
|
|
.echo6 header a,
|
||
|
|
.echo6 header span {
|
||
|
|
color: var(--e6-text-primary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 header [class*="text-xs"],
|
||
|
|
.echo6 header [class*="text-gray"] {
|
||
|
|
color: var(--e6-text-secondary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ══════════════════════════════════════════════════════════════
|
||
|
|
CODE BLOCKS
|
||
|
|
══════════════════════════════════════════════════════════════ */
|
||
|
|
|
||
|
|
.echo6 pre {
|
||
|
|
background-color: var(--e6-bg-secondary) !important;
|
||
|
|
border: 1px solid var(--e6-border) !important;
|
||
|
|
border-radius: 6px !important;
|
||
|
|
color: var(--e6-text-primary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 pre code {
|
||
|
|
background-color: transparent !important;
|
||
|
|
border: none !important;
|
||
|
|
color: inherit !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 :not(pre) > code {
|
||
|
|
background-color: var(--e6-bg-elevated) !important;
|
||
|
|
color: var(--e6-yellow) !important;
|
||
|
|
padding: 0.15em 0.4em !important;
|
||
|
|
border-radius: 3px !important;
|
||
|
|
font-size: 0.9em !important;
|
||
|
|
border: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ══════════════════════════════════════════════════════════════
|
||
|
|
BUTTONS
|
||
|
|
══════════════════════════════════════════════════════════════ */
|
||
|
|
|
||
|
|
.echo6 button[type="submit"],
|
||
|
|
.echo6 button[class*="primary"] {
|
||
|
|
background-color: var(--e6-cyan) !important;
|
||
|
|
color: var(--e6-bg-primary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 button[type="submit"]:hover,
|
||
|
|
.echo6 button[class*="primary"]:hover {
|
||
|
|
background-color: var(--e6-cyan-dim) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ══════════════════════════════════════════════════════════════
|
||
|
|
DROPDOWNS / MENUS / MODALS
|
||
|
|
══════════════════════════════════════════════════════════════ */
|
||
|
|
|
||
|
|
.echo6 [role="dialog"],
|
||
|
|
.echo6 [role="menu"],
|
||
|
|
.echo6 [role="listbox"],
|
||
|
|
.echo6 [class*="dropdown"],
|
||
|
|
.echo6 [class*="modal"],
|
||
|
|
.echo6 [class*="popover"] {
|
||
|
|
background-color: var(--e6-bg-tertiary) !important;
|
||
|
|
border: 1px solid var(--e6-border) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 [role="option"]:hover,
|
||
|
|
.echo6 [role="menuitem"]:hover {
|
||
|
|
background-color: var(--e6-bg-elevated) !important;
|
||
|
|
color: var(--e6-cyan) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 select {
|
||
|
|
background-color: var(--e6-bg-tertiary) !important;
|
||
|
|
border-color: var(--e6-border) !important;
|
||
|
|
color: var(--e6-text-primary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ══════════════════════════════════════════════════════════════
|
||
|
|
SCROLLBAR
|
||
|
|
══════════════════════════════════════════════════════════════ */
|
||
|
|
|
||
|
|
.echo6 ::-webkit-scrollbar {
|
||
|
|
width: 5px !important;
|
||
|
|
height: 5px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 ::-webkit-scrollbar-track {
|
||
|
|
background: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 ::-webkit-scrollbar-thumb {
|
||
|
|
background: var(--e6-border) !important;
|
||
|
|
border-radius: 3px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 ::-webkit-scrollbar-thumb:hover {
|
||
|
|
background: var(--e6-cyan-dim) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ══════════════════════════════════════════════════════════════
|
||
|
|
LINKS
|
||
|
|
══════════════════════════════════════════════════════════════ */
|
||
|
|
|
||
|
|
.echo6 a:not(#sidebar a):not(aside a):not(nav a):not(#echo6-toggle) {
|
||
|
|
color: var(--e6-cyan) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 a:not(#sidebar a):not(aside a):not(nav a):not(#echo6-toggle):hover {
|
||
|
|
color: var(--e6-yellow) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ══════════════════════════════════════════════════════════════
|
||
|
|
MISC
|
||
|
|
══════════════════════════════════════════════════════════════ */
|
||
|
|
|
||
|
|
.echo6 ::selection {
|
||
|
|
background-color: var(--e6-cyan) !important;
|
||
|
|
color: var(--e6-bg-primary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 ::placeholder {
|
||
|
|
color: var(--e6-text-secondary) !important;
|
||
|
|
opacity: 0.7 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 [class*="badge"],
|
||
|
|
.echo6 [class*="tag"],
|
||
|
|
.echo6 [class*="chip"] {
|
||
|
|
background-color: var(--e6-yellow-glow) !important;
|
||
|
|
color: var(--e6-yellow) !important;
|
||
|
|
border: 1px solid var(--e6-yellow-dim) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 [class*="spinner"],
|
||
|
|
.echo6 [class*="loading"] {
|
||
|
|
border-color: var(--e6-border) !important;
|
||
|
|
border-top-color: var(--e6-cyan) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 input[type="checkbox"]:checked + * {
|
||
|
|
background-color: var(--e6-cyan) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6 [role="tooltip"] {
|
||
|
|
background-color: var(--e6-bg-elevated) !important;
|
||
|
|
color: var(--e6-text-primary) !important;
|
||
|
|
border: 1px solid var(--e6-border) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ══════════════════════════════════════════════════════════════
|
||
|
|
TOGGLE BUTTON (injected by echo6-theme-toggle.js)
|
||
|
|
══════════════════════════════════════════════════════════════ */
|
||
|
|
|
||
|
|
#echo6-toggle {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 16px;
|
||
|
|
right: 16px;
|
||
|
|
z-index: 99999;
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
border-radius: 6px;
|
||
|
|
border: 1px solid #1e2a36;
|
||
|
|
background-color: #0f1419;
|
||
|
|
color: #6e7a88;
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 700;
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
opacity: 0.4;
|
||
|
|
user-select: none;
|
||
|
|
line-height: 1;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#echo6-toggle:hover {
|
||
|
|
opacity: 1;
|
||
|
|
border-color: #28C0E8;
|
||
|
|
color: #28C0E8;
|
||
|
|
box-shadow: 0 0 12px #28c0e840;
|
||
|
|
}
|
||
|
|
|
||
|
|
#echo6-toggle.active {
|
||
|
|
opacity: 0.7;
|
||
|
|
background-color: #28C0E8;
|
||
|
|
color: #0a0e14;
|
||
|
|
border-color: #28C0E8;
|
||
|
|
}
|
||
|
|
|
||
|
|
#echo6-toggle.active:hover {
|
||
|
|
opacity: 1;
|
||
|
|
box-shadow: 0 0 16px #28c0e860;
|
||
|
|
}
|