It does what it says! Pretty much a skyrim inspired theme. I hope you enjoy!
SkyrimVibedUI
Gallery
3 images
Palette
9 colors · 6 settings
dark
- Primary
#d9dfe1 - Secondary
#9db2b8 - Background
#0d1011 - Text
#e8e6df - Danger
#c7705a - Success
#94b393 - Warning
#c9a860 - Speech
#b9d6df - Thoughts
#8d9493
Theme controls
- Accent color
- 196° · 12% · 86%
- Preferred mode
- dark
- Corner scale
- 0.2
- Glass surfaces
- Yes
- Type scale
- 1
- Character-aware colors
- No
Stylesheets
1 stylesheet
/* ============================================================================
SKYRIMVIBEDUI · Nordic Menu Overhaul
============================================================================ */
/* 0. FONTS (bundled in the pack; remote font URLs are stripped by Lumiverse) --- */
@font-face {
font-family: "Cinzel Sky";
src: url("./assets/cinzel-latin-wght-normal.woff2") format("woff2");
font-weight: 400 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Roboto Condensed Sky";
src: url("./assets/roboto-condensed-latin-wght-normal.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Roboto Condensed Sky";
src: url("./assets/roboto-condensed-latin-wght-italic.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
/* 1. PALETTE: one authoritative token block --------------------------------- */
:root,
html,
body,
#root,
[data-theme-mode] {
color-scheme: dark;
/* primary = pale steel-white (selection); accent = muted brass (equipped) */
--lumiverse-primary: #d9dfe1 !important;
--lumiverse-primary-hover: #ffffff !important;
--lumiverse-primary-light: rgba(217, 223, 225, .14) !important;
--lumiverse-primary-muted: #c4ccce !important; /* solid: read as icon/text colour */
--lumiverse-primary-text: #e4eaec !important; /* accent TEXT colour (readable on dark) */
--lumiverse-primary-contrast: #0b0d0e !important; /* text ON a filled primary */
--lumiverse-primary-fg: #0b0d0e !important;
--lumiverse-on-primary: #0b0d0e !important;
--lumiverse-primary-soft: rgba(217, 223, 225, .13) !important;
--lumiverse-primary-deep: #2a3032 !important;
--lumiverse-primary-deep-hover: #394042 !important;
--lumiverse-primary-deep-contrast: #eceae2 !important;
--lumiverse-primary-rgb: 217, 223, 225 !important;
--lumiverse-primary-005: rgba(217, 223, 225, .05) !important;
--lumiverse-primary-008: rgba(217, 223, 225, .08) !important;
--lumiverse-primary-010: rgba(217, 223, 225, .10) !important;
--lumiverse-primary-015: rgba(217, 223, 225, .15) !important;
--lumiverse-primary-020: rgba(217, 223, 225, .20) !important;
--lumiverse-primary-025: rgba(217, 223, 225, .25) !important;
--lumiverse-primary-030: rgba(217, 223, 225, .30) !important;
--lumiverse-primary-040: rgba(217, 223, 225, .40) !important;
--lumiverse-primary-050: rgba(217, 223, 225, .50) !important;
--lumiverse-primary-060: rgba(217, 223, 225, .60) !important;
--lumiverse-accent: #b89a5e !important;
--lumiverse-secondary: #9db2b8 !important;
--lumiverse-secondary-hover: #bdd0d5 !important;
--lumiverse-secondary-border: rgba(157, 178, 184, .4) !important;
/* soot-black surfaces */
--lumiverse-bg: #0d1011 !important;
--lumiverse-bg-opaque: #0d1011 !important;
--lumiverse-bg-elevated: #151a1c !important;
--lumiverse-bg-hover: #1e2528 !important;
--lumiverse-bg-dark: rgba(0, 0, 0, .30) !important;
--lumiverse-bg-darker: rgba(0, 0, 0, .48) !important;
--lumiverse-bg-deep: #080a0b !important;
--lumiverse-bg-deeper: #050607 !important;
--lumiverse-bg-panel: #111517 !important;
--lumiverse-bg-040: rgba(13, 16, 17, .40) !important;
--lumiverse-bg-050: rgba(13, 16, 17, .50) !important;
--lumiverse-bg-070: rgba(13, 16, 17, .70) !important;
--lumiverse-bg-elevated-040: rgba(21, 26, 28, .40) !important;
--lumiverse-bg-deep-080: rgba(8, 10, 11, .80) !important;
--lumiverse-scene-text-scrim: rgba(5, 7, 8, .62) !important;
--lumiverse-surface: #0d1011 !important;
--lumiverse-surface-raised: #151a1c !important;
--lumiverse-surface-hover: #1e2528 !important;
--lumiverse-surface-muted: #181d1f !important;
/* parchment-white text */
--lumiverse-text: #e8e6df !important;
--lumiverse-text-primary: #e8e6df !important;
--lumiverse-text-secondary: #c4c7c2 !important;
--lumiverse-text-muted: #b3b8b5 !important;
--lumiverse-text-dim: #8d9493 !important;
--lumiverse-text-hint: #707878 !important;
--lumiverse-icon: #dfe4e3 !important;
--lumiverse-icon-muted: #aab2b1 !important;
--lumiverse-icon-dim: #727c7b !important;
/* hairline steel rules */
--lumiverse-border: rgba(217, 223, 225, .22) !important;
--lumiverse-border-hover: rgba(235, 240, 241, .55) !important;
--lumiverse-border-light: rgba(217, 223, 225, .12) !important;
--lumiverse-border-neutral: rgba(217, 223, 225, .20) !important;
--lumiverse-border-neutral-hover: rgba(235, 240, 241, .40) !important;
--lumiverse-border-subtle: rgba(217, 223, 225, .09) !important;
--lumiverse-fill-light: rgba(217, 223, 225, .045) !important;
--lumiverse-fill-subtle: rgba(217, 223, 225, .04) !important;
--lumiverse-fill-subtle-hover: rgba(217, 223, 225, .08) !important;
--lumiverse-fill: rgba(217, 223, 225, .06) !important;
--lumiverse-fill-hover: rgba(217, 223, 225, .10) !important;
--lumiverse-fill-medium: rgba(217, 223, 225, .14) !important;
--lumiverse-fill-strong: rgba(217, 223, 225, .22) !important;
--lumiverse-fill-heavy: rgba(217, 223, 225, .34) !important;
--lumiverse-fill-deepest: rgba(217, 223, 225, .50) !important;
--lumiverse-input-bg: rgba(0, 0, 0, .42) !important;
/* glass / bubbles */
--lcs-glass-bg: rgba(14, 17, 18, .94) !important;
--lcs-glass-bg-hover: rgba(20, 24, 26, .97) !important;
--lcs-glass-border: rgba(217, 223, 225, .20) !important;
--lcs-glass-border-hover: rgba(235, 240, 241, .45) !important;
--lcs-glass-blur: 8px !important;
--lcs-glass-soft-blur: 4px !important;
--lcs-glass-strong-blur: 10px !important;
--lcs-glass-user-tint: rgba(184, 154, 94, .07) !important;
--lcs-glass-char-tint: rgba(150, 190, 205, .06) !important;
--lcs-bubble-bg: rgba(14, 17, 18, .94) !important;
--lcs-bubble-bg-hover: rgba(20, 24, 26, .97) !important;
--lcs-bubble-opacity: 1 !important;
/* angular geometry */
--lumiverse-radius-sm: 0px !important;
--lumiverse-radius: 1px !important;
--lumiverse-radius-md: 2px !important;
--lumiverse-radius-lg: 2px !important;
--lumiverse-radius-xl: 3px !important;
--lcs-radius: 2px !important;
--lcs-radius-sm: 1px !important;
--lcs-radius-xs: 0px !important;
--lumiverse-shadow: 0 2px 6px rgba(0, 0, 0, .45) !important;
--lumiverse-shadow-sm: 0 1px 4px rgba(0, 0, 0, .4) !important;
--lumiverse-shadow-md: 0 8px 22px rgba(0, 0, 0, .55) !important;
--lumiverse-shadow-lg: 0 18px 58px rgba(0, 0, 0, .68), 0 0 0 1px rgba(217, 223, 225, .10) !important;
--lumiverse-shadow-xl: 0 24px 70px rgba(0, 0, 0, .75) !important;
--lumiverse-highlight-inset: inset 0 1px 0 rgba(235, 240, 241, .06) !important;
--lumiverse-highlight-inset-md: inset 0 1px 0 rgba(235, 240, 241, .09) !important;
--lumiverse-highlight-inset-lg: inset 0 1px 0 rgba(235, 240, 241, .13) !important;
--lumiverse-card-bg: linear-gradient(155deg, #1b2124 0%, #121618 55%, #0b0d0e 100%) !important;
--lumiverse-card-bg-solid: #121618 !important;
--lumiverse-card-bg-top: #1b2124 !important;
--lumiverse-card-bg-bottom: #0b0d0e !important;
--lumiverse-card-image-bg: #0a0c0d !important;
--lumiverse-gradient-modal: linear-gradient(160deg, rgba(22, 27, 29, .985), rgba(8, 10, 11, .99)) !important;
--lumiverse-modal-backdrop: rgba(2, 3, 4, .80) !important;
--lumiverse-swatch-border: rgba(217, 223, 225, .24) !important;
--lumiverse-prose-italic: #c9bd9d !important;
--lumiverse-prose-bold: #f3eee2 !important;
--lumiverse-prose-dialogue: #b9d6df !important;
--lumiverse-prose-blockquote: #c9bfa8 !important;
--lumiverse-prose-link: #a9d0df !important;
--lumiverse-danger: #c7705a !important;
--lumiverse-danger-hover: #e0866f !important;
--lumiverse-danger-010: rgba(199, 112, 90, .10) !important;
--lumiverse-danger-015: rgba(199, 112, 90, .15) !important;
--lumiverse-danger-020: rgba(199, 112, 90, .20) !important;
--lumiverse-danger-030: rgba(199, 112, 90, .30) !important;
--lumiverse-danger-050: rgba(199, 112, 90, .50) !important;
--lumiverse-error: #c7705a !important;
--lumiverse-error-010: rgba(199, 112, 90, .10) !important;
--lumiverse-success: #94b393 !important;
--lumiverse-success-010: rgba(148, 179, 147, .10) !important;
--lumiverse-success-015: rgba(148, 179, 147, .15) !important;
--lumiverse-success-020: rgba(148, 179, 147, .20) !important;
--lumiverse-success-030: rgba(148, 179, 147, .30) !important;
--lumiverse-success-050: rgba(148, 179, 147, .50) !important;
--lumiverse-warning: #c9a860 !important;
--lumiverse-warning-015: rgba(201, 168, 96, .15) !important;
--lumiverse-warning-020: rgba(201, 168, 96, .20) !important;
--lumiverse-warning-030: rgba(201, 168, 96, .30) !important;
--lumiverse-info: #c4ccce !important;
--lumiverse-font-family: "Roboto Condensed Sky", "Roboto Condensed", "Futura Condensed", "Arial Narrow", "Segoe UI", sans-serif !important;
--lumiverse-font-mono: "Cascadia Code", Consolas, "Liberation Mono", monospace !important;
--lumiverse-mono: "Cascadia Code", Consolas, "Liberation Mono", monospace !important;
--lcs-scrollbar-thumb: rgba(217, 223, 225, .30) !important;
--lcs-scrollbar-thumb-hover: rgba(235, 240, 241, .55) !important;
}
/* theme-private tokens (not Lumiverse tokens, so no !important needed) */
:root {
--sky-ui: "Roboto Condensed Sky", "Roboto Condensed", "Futura Condensed", "Arial Narrow", sans-serif;
--sky-display: "Cinzel Sky", "Cinzel", "Trajan Pro", Georgia, serif;
--sky-steel: #d9dfe1;
--sky-white: #f4f6f5;
--sky-brass: #b89a5e;
--sky-rule: rgba(217, 223, 225, .22);
--sky-sweep: linear-gradient(90deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .03) 88%, transparent);
--sky-hairline: linear-gradient(90deg, transparent, rgba(217, 223, 225, .17) 50%, transparent);
}
/* 2. CANVAS, SCROLLBARS, FOCUS ---------------------------------------------- */
html, body, #root {
background-color: #0a0c0d;
color: var(--lumiverse-text, #e8e6df);
font-family: var(--lumiverse-font-family);
}
:root { accent-color: #d9dfe1; scrollbar-color: rgba(217, 223, 225, .30) transparent; }
::selection { background: rgba(217, 223, 225, .30); color: #ffffff; }
/* outline only: never touch border-radius on focus */
:focus-visible { outline: 1px solid rgba(244, 246, 245, .9); outline-offset: 2px; }
a { color: #a9d0df; text-decoration-color: rgba(169, 208, 223, .4); text-underline-offset: .16em; }
a:hover { color: #d0e8ee; text-decoration-color: currentColor; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: rgba(217, 223, 225, .30); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(235, 240, 241, .55); }
/* Preserve scene/wallpaper layers: only the canvas underneath is tinted. */
[data-component="ChatView"] { background-color: #0b0d0e; }
[data-component="ChatView"] [class*="_chatToolbar_"] {
background: linear-gradient(180deg, rgba(24, 29, 31, .96), rgba(11, 14, 15, .96));
box-shadow: inset 0 -1px 0 rgba(217, 223, 225, .16);
}
[data-component="DesktopPwaTitlebar"] {
background: linear-gradient(180deg, #1a2022, #0d1011);
color: #dfe5e3;
box-shadow: inset 0 -1px 0 rgba(217, 223, 225, .20);
}
[data-component="DesktopPwaTitlebar"] [class*="_title_"] { color: #e8e6df; font-family: var(--sky-display); letter-spacing: .14em; text-shadow: 0 1px 0 #000; }
/* 3. THE DRAWER: shell, rail, panel chrome ---------------------------------- */
/* Shell: soot panel + grain, steel hairline on the open edge, dragon watermark */
[data-lumiverse-surface="viewport-drawer"] {
background-color: #070809;
background-image: url(./assets/sky-grain.svg), linear-gradient(180deg, rgba(11, 13, 14, .975), rgba(5, 6, 7, .985));
background-size: 160px 160px, 100% 100%;
box-shadow: -1px 0 0 rgba(217, 223, 225, .22), -22px 0 54px rgba(0, 0, 0, .6);
}
/* .drawer is position:relative + isolation:isolate + overflow:clip, so a
z-index:-1 child paints above the shell background and below all content. */
[data-lumiverse-surface="viewport-drawer"]::after {
content: "";
position: absolute;
right: 20px;
bottom: 24px;
width: 150px;
height: 269px;
z-index: -1;
pointer-events: none;
background: url(./assets/dragonborn-sigil.webp) center / contain no-repeat;
opacity: .06;
}
/* --- rail: PAINT ONLY (no margin / padding / height / width changes) ---- */
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] {
background-color: #050607;
background-image:
url(./assets/sky-knot-band.svg),
url(./assets/sky-grain.svg),
linear-gradient(90deg, #030405, #090b0c 65%, #0c0f10);
background-repeat: repeat-x, repeat, no-repeat;
background-position: center 0, 0 0, 0 0;
background-size: auto 6px, 160px 160px, 100% 100%;
border-image: linear-gradient(180deg, rgba(217, 223, 225, 0), rgba(217, 223, 225, .5) 9%, rgba(217, 223, 225, .5) 91%, rgba(217, 223, 225, 0)) 1;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_tabListWrap_"]::before { background: linear-gradient(to bottom, #050607, transparent); }
[data-lumiverse-surface="viewport-drawer"] [class*="_tabListWrap_"]::after { background: linear-gradient(to top, #050607, transparent); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [class*="_tabBtn_"] {
color: #9da5a5;
border-radius: 0;
background: var(--sky-hairline) center bottom / 100% 1px no-repeat;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [class*="_tabBtn_"] > svg {
stroke-width: 1.3;
opacity: .92;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [class*="_tabLabel_"] {
font-family: var(--sky-ui);
font-size: calc(9px * var(--lumiverse-font-scale, 1));
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
color: inherit;
}
/* hover: soft white sweep from the left edge, like a SkyUI list highlight */
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [class*="_tabBtn_"]:hover {
color: #f4f6f5;
background: var(--sky-sweep), var(--sky-hairline) center bottom / 100% 1px no-repeat;
}
/* selected: stronger sweep, white bar on the edge, glowing icon, diamond pointer */
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [class*="_tabBtnActive_"] {
color: #ffffff;
border-radius: 0;
background:
url(./assets/sky-diamond.svg) right 4px center / 7px 7px no-repeat,
linear-gradient(90deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05) 85%, transparent),
var(--sky-hairline) center bottom / 100% 1px no-repeat;
box-shadow: inset 2px 0 0 #f4f6f5, inset 0 0 16px rgba(255, 255, 255, .06);
}
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [class*="_tabBtnActive_"] > svg { opacity: 1; }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [class*="_tabBtnActive_"] [class*="_tabLabel_"] {
color: #ffffff;
text-shadow: 0 0 8px rgba(255, 255, 255, .45);
}
[data-lumiverse-surface="viewport-drawer"] [class*="_tabDivider_"] {
background: linear-gradient(90deg, transparent, rgba(184, 154, 94, .65), transparent);
}
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebarBottom_"] {
border-top-color: transparent;
background: linear-gradient(90deg, transparent, rgba(217, 223, 225, .30), transparent) center top / 100% 1px no-repeat;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_tabBadge_"] {
border-radius: 0;
background: #0b0d0e;
border-color: #b89a5e;
color: #e3cf9f;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_tabBtnExtension_"]::after { background: #b89a5e; border-radius: 0; transform: translateX(-50%) rotate(45deg); }
/* flush drawer handle when the drawer is closed */
[class*="_drawerTab_"] {
background: linear-gradient(180deg, #151a1c, #0a0c0d);
border-color: rgba(217, 223, 225, .32);
border-radius: 0;
color: #b3b8b5;
}
[class*="_drawerTab_"]:hover { color: #ffffff; border-color: rgba(244, 246, 245, .7); }
/* --- panel title bar: Cinzel caps + hairline rule with a central ornament --- */
[data-lumiverse-surface="viewport-drawer"] [class*="_panelHeader_"] {
background:
url(./assets/sky-ornament-lg.svg) center bottom 0 / 180px 14px no-repeat,
linear-gradient(90deg, transparent, rgba(217, 223, 225, .55) 16%, rgba(217, 223, 225, .55) 84%, transparent) left bottom 6px / 100% 1px no-repeat,
linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0));
border-bottom-color: transparent;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_panelTitle_"] {
font-family: var(--sky-display);
font-size: calc(14px * var(--lumiverse-font-scale, 1));
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: #f1f3f1;
text-shadow: 0 0 12px rgba(255, 255, 255, .18), 0 1px 2px #000;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_guideButton_"],
[data-lumiverse-surface="viewport-drawer"] [class*="_headerActions_"] button { border-radius: 0; color: #c4c7c2; }
[data-lumiverse-surface="viewport-drawer"] [class*="_guideButton_"]:hover,
[data-lumiverse-surface="viewport-drawer"] [class*="_headerActions_"] button:hover { color: #ffffff; background: rgba(255, 255, 255, .10); }
[data-lumiverse-surface="viewport-drawer"] [class*="_folderTile_"] { border-radius: 0; background: linear-gradient(180deg, #171c1e, #0c0f10); border-color: var(--sky-rule); }
[data-lumiverse-surface="viewport-drawer"] [class*="_folderTile_"]:hover { border-color: rgba(244, 246, 245, .6); }
[data-lumiverse-surface="viewport-drawer"] [class*="_resizeHandle_"]:hover,
[data-lumiverse-surface="viewport-drawer"] [class*="_resizeHandle_"]:focus-visible { box-shadow: inset 2px 0 #f4f6f5; background: rgba(255, 255, 255, .08); }
/* 4. BROWSER CHROME: search, tabs, keys, menus, paging ---------------------- */
:is([data-lumiverse-surface="viewport-drawer"], [class*="_modal_"], [data-component="LandingPage"], [data-component="LorebookEditorWorkspace"], [data-component="LorebookHalfScreenEditor"]) :is([class*="_searchField_"], [class*="_searchBar_"]) {
border-radius: 0;
background: rgba(0, 0, 0, .45);
border-color: var(--sky-rule);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6);
}
:is([data-lumiverse-surface="viewport-drawer"], [class*="_modal_"], [data-component="LandingPage"], [data-component="LorebookEditorWorkspace"], [data-component="LorebookHalfScreenEditor"]) :is([class*="_searchField_"], [class*="_searchBar_"]):focus-within {
border-color: rgba(244, 246, 245, .7);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 0 0 1px rgba(244, 246, 245, .12);
}
[class*="_searchField_"], [class*="_searchBar_"], [class*="_iconButton_"] { border-radius: 0; }
[data-lumiverse-surface="viewport-drawer"] [class*="_searchIcon_"],
[data-component="LandingPageTabs"] [class*="_searchIcon_"] { color: #b89a5e; }
/* home toolbar keys (sort / hidden-items) */
[data-component="LandingPageTabs"] :is([class*="_iconButton_"], [class*="_hiddenManagerBtn_"]) {
background: linear-gradient(rgba(217,223,225,.5),rgba(217,223,225,.5)) left 3px top 3px / 5px 1px no-repeat, linear-gradient(rgba(217,223,225,.5),rgba(217,223,225,.5)) left 3px top 3px / 1px 5px no-repeat, linear-gradient(rgba(217,223,225,.5),rgba(217,223,225,.5)) right 3px top 3px / 5px 1px no-repeat, linear-gradient(rgba(217,223,225,.5),rgba(217,223,225,.5)) right 3px top 3px / 1px 5px no-repeat, linear-gradient(rgba(217,223,225,.5),rgba(217,223,225,.5)) left 3px bottom 3px / 5px 1px no-repeat, linear-gradient(rgba(217,223,225,.5),rgba(217,223,225,.5)) left 3px bottom 3px / 1px 5px no-repeat, linear-gradient(rgba(217,223,225,.5),rgba(217,223,225,.5)) right 3px bottom 3px / 5px 1px no-repeat, linear-gradient(rgba(217,223,225,.5),rgba(217,223,225,.5)) right 3px bottom 3px / 1px 5px no-repeat, rgba(0, 0, 0, .4);
border-color: var(--sky-rule);
border-radius: 0;
color: #cfd5d4;
}
[data-component="LandingPageTabs"] :is([class*="_iconButton_"], [class*="_hiddenManagerBtn_"]):hover {
background: linear-gradient(#f4f6f5,#f4f6f5) left 3px top 3px / 5px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) left 3px top 3px / 1px 5px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px top 3px / 5px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px top 3px / 1px 5px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) left 3px bottom 3px / 5px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) left 3px bottom 3px / 1px 5px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px bottom 3px / 5px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px bottom 3px / 1px 5px no-repeat, var(--sky-sweep);
border-color: rgba(244, 246, 245, .7);
color: #ffffff;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_filterTabs_"] {
background: rgba(0, 0, 0, .4);
border-color: var(--sky-rule);
border-radius: 0;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_filterTabs_"] [class*="_tabBtn_"],
[data-lumiverse-surface="viewport-drawer"] [class*="_filterTabs_"] [class*="_filterTab_"] { color: #9da5a5; border-radius: 0; }
[data-lumiverse-surface="viewport-drawer"] [class*="_filterTabs_"] [class*="_tabBtn_"]:hover,
[data-lumiverse-surface="viewport-drawer"] [class*="_filterTabs_"] [class*="_filterTab_"]:hover { background: var(--sky-sweep); color: #ffffff; }
[data-lumiverse-surface="viewport-drawer"] [class*="_filterTabs_"] [class*="_tabBtnActive_"],
[data-lumiverse-surface="viewport-drawer"] [class*="_filterTabs_"] [class*="_filterTabActive_"] {
background: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .05));
color: #ffffff;
box-shadow: inset 0 -2px 0 #b89a5e;
}
[data-lumiverse-surface="viewport-drawer"] :is([class*="_iconBtn_"], [class*="_trigger_"], [class*="_iconButton_"]) {
background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015));
border-color: var(--sky-rule);
border-radius: 0;
color: #b3b8b5;
}
[data-lumiverse-surface="viewport-drawer"] :is([class*="_iconBtn_"], [class*="_trigger_"], [class*="_iconButton_"]):hover {
background: var(--sky-sweep);
border-color: rgba(244, 246, 245, .6);
color: #ffffff;
}
[data-lumiverse-surface="viewport-drawer"] :is([class*="_iconBtnActive_"], [class*="_triggerActive_"]) {
background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06));
border-color: #b89a5e;
color: #ffffff;
}
/* drop-down menus, context menus, toasts (often portaled: not scoped) */
[class*="_dropdown_"],
[class*="_contextMenu_"],
[class*="_toast_"] {
background: linear-gradient(180deg, rgba(22, 27, 29, .985), rgba(9, 11, 12, .99));
border-color: rgba(217, 223, 225, .34);
border-radius: 0;
color: #e8e6df;
box-shadow: 0 0 0 1px #000, 0 16px 40px rgba(0, 0, 0, .7);
}
[class*="_dropdown_"] [class*="_item_"]:hover,
[class*="_dropdown_"] [class*="_option_"]:hover,
[class*="_dropdown_"] [class*="_tagItem_"]:hover,
[class*="_contextMenu_"] [class*="_item_"]:hover { background: var(--sky-sweep); color: #ffffff; }
[class*="_dropdown_"] :is([class*="_itemActive_"], [class*="_optionActive_"], [class*="_tagItemIncluded_"]),
[class*="_contextMenu_"] [class*="_itemActive_"] { background: linear-gradient(90deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .04)); color: #ffffff; }
[data-lumiverse-surface="viewport-drawer"] [class*="_folderHeader_"] {
background: url(./assets/sky-valknut.svg) right 10px center / 14px 14px no-repeat, linear-gradient(90deg, rgba(255, 255, 255, .09), transparent 80%);
box-shadow: inset 2px 0 0 #b89a5e;
border-radius: 0;
color: #e8e6df;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_folderName_"] { font-family: var(--sky-display); font-size: .86em; letter-spacing: .16em; text-transform: uppercase; }
[data-lumiverse-surface="viewport-drawer"] [class*="_pagination_"] {
background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .4));
box-shadow: inset 0 1px 0 rgba(217, 223, 225, .3);
border-top-color: transparent;
}
[class*="_pageBtnActive_"] { background: rgba(255, 255, 255, .18); border-color: #b89a5e; color: #ffffff; border-radius: 0; }
[class*="_perPageSelect_"] { background: rgba(0, 0, 0, .45); border-color: var(--sky-rule); color: #e8e6df; border-radius: 0; }
/* 5. CARDS, TILES, LISTS: three families, one reticle motif ------------------- */
/* Selection reticle = four corner brackets (visible on hover / selected). */
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:not([class*="_compact_"]):has([class*="_imageWrap_"]) {
border-radius: 1px;
border-color: rgba(217, 223, 225, .30);
box-shadow: 0 0 0 1px #000, 0 8px 20px rgba(0, 0, 0, .5);
}
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:not([class*="_compact_"]):has([class*="_imageWrap_"]):hover {
border-color: rgba(244, 246, 245, .75);
box-shadow: 0 0 0 1px #000, 0 0 24px rgba(255, 255, 255, .09), 0 8px 20px rgba(0, 0, 0, .5);
}
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:not([class*="_compact_"]):has([class*="_imageWrap_"])[class*="_selected_"] {
border-color: #b89a5e;
box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(184, 154, 94, .45), 0 8px 20px rgba(0, 0, 0, .5);
}
/* card ::before is free (verified) and the card is position:relative */
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:not([class*="_compact_"]):has([class*="_imageWrap_"])::before {
content: "";
position: absolute;
inset: 5px;
z-index: 3;
pointer-events: none;
opacity: 0;
transition: opacity .18s ease;
background: linear-gradient(#f4f6f5,#f4f6f5) left 3px top 3px / 11px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) left 3px top 3px / 1px 11px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px top 3px / 11px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px top 3px / 1px 11px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) left 3px bottom 3px / 11px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) left 3px bottom 3px / 1px 11px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px bottom 3px / 11px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px bottom 3px / 1px 11px no-repeat;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:not([class*="_compact_"]):has([class*="_imageWrap_"]):hover::before,
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:not([class*="_compact_"]):has([class*="_imageWrap_"]):focus-within::before { opacity: 1; }
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:not([class*="_compact_"]):has([class*="_imageWrap_"])[class*="_selected_"]::before {
opacity: 1;
background: url(./assets/sky-diamond.svg) center top 0 / 9px 9px no-repeat, linear-gradient(#b89a5e,#b89a5e) left 3px top 3px / 11px 1px no-repeat, linear-gradient(#b89a5e,#b89a5e) left 3px top 3px / 1px 11px no-repeat, linear-gradient(#b89a5e,#b89a5e) right 3px top 3px / 11px 1px no-repeat, linear-gradient(#b89a5e,#b89a5e) right 3px top 3px / 1px 11px no-repeat, linear-gradient(#b89a5e,#b89a5e) left 3px bottom 3px / 11px 1px no-repeat, linear-gradient(#b89a5e,#b89a5e) left 3px bottom 3px / 1px 11px no-repeat, linear-gradient(#b89a5e,#b89a5e) right 3px bottom 3px / 11px 1px no-repeat, linear-gradient(#b89a5e,#b89a5e) right 3px bottom 3px / 1px 11px no-repeat;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:not([class*="_compact_"]):has([class*="_imageWrap_"]) [class*="_name_"] {
font-family: var(--sky-ui);
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: #f1f1ea;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:not([class*="_compact_"]):has([class*="_imageWrap_"]) [class*="_creator_"] { color: #9aa2a1; letter-spacing: .03em; }
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:not([class*="_compact_"]):has([class*="_imageWrap_"]) :is([class*="_tag_"], [class*="_tagOverflow_"]) { border-radius: 0; letter-spacing: .04em; text-transform: uppercase; }
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:not([class*="_compact_"]):has([class*="_imageWrap_"]) :is([class*="_editBtn_"], [class*="_favBtn_"]) {
background: rgba(8, 10, 11, .82);
border: 1px solid rgba(217, 223, 225, .35);
border-radius: 0;
color: #d9dfe1;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:not([class*="_compact_"]):has([class*="_imageWrap_"]) :is([class*="_editBtn_"], [class*="_favBtn_"]):hover { border-color: #f4f6f5; color: #ffffff; background: rgba(40, 46, 49, .9); }
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:not([class*="_compact_"]):has([class*="_imageWrap_"]) [class*="_favBtnActive_"] { color: #e3cf9f; border-color: #b89a5e; }
/* persona tiles: inventory plates (brackets painted as background layers) */
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:has([class*="_avatarWrap_"]) {
background: linear-gradient(rgba(217,223,225,.0),rgba(217,223,225,.0)) left 3px top 3px / 9px 1px no-repeat, linear-gradient(rgba(217,223,225,.0),rgba(217,223,225,.0)) left 3px top 3px / 1px 9px no-repeat, linear-gradient(rgba(217,223,225,.0),rgba(217,223,225,.0)) right 3px top 3px / 9px 1px no-repeat, linear-gradient(rgba(217,223,225,.0),rgba(217,223,225,.0)) right 3px top 3px / 1px 9px no-repeat, linear-gradient(rgba(217,223,225,.0),rgba(217,223,225,.0)) left 3px bottom 3px / 9px 1px no-repeat, linear-gradient(rgba(217,223,225,.0),rgba(217,223,225,.0)) left 3px bottom 3px / 1px 9px no-repeat, linear-gradient(rgba(217,223,225,.0),rgba(217,223,225,.0)) right 3px bottom 3px / 9px 1px no-repeat, linear-gradient(rgba(217,223,225,.0),rgba(217,223,225,.0)) right 3px bottom 3px / 1px 9px no-repeat, linear-gradient(180deg, rgba(24, 29, 31, .92), rgba(9, 11, 12, .96));
border-color: var(--sky-rule);
border-radius: 0;
box-shadow: 0 0 0 1px #000;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:has([class*="_avatarWrap_"]):hover {
background: linear-gradient(#f4f6f5,#f4f6f5) left 3px top 3px / 9px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) left 3px top 3px / 1px 9px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px top 3px / 9px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px top 3px / 1px 9px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) left 3px bottom 3px / 9px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) left 3px bottom 3px / 1px 9px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px bottom 3px / 9px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px bottom 3px / 1px 9px no-repeat, linear-gradient(180deg, rgba(34, 40, 43, .95), rgba(12, 15, 16, .97));
border-color: rgba(244, 246, 245, .55);
}
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:has([class*="_avatarWrap_"])[class*="_cardSelected_"],
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:has([class*="_avatarWrap_"])[class*="_cardActive_"] {
background: url(./assets/sky-diamond.svg) center top 3px / 8px 8px no-repeat, linear-gradient(#b89a5e,#b89a5e) left 3px top 3px / 9px 1px no-repeat, linear-gradient(#b89a5e,#b89a5e) left 3px top 3px / 1px 9px no-repeat, linear-gradient(#b89a5e,#b89a5e) right 3px top 3px / 9px 1px no-repeat, linear-gradient(#b89a5e,#b89a5e) right 3px top 3px / 1px 9px no-repeat, linear-gradient(#b89a5e,#b89a5e) left 3px bottom 3px / 9px 1px no-repeat, linear-gradient(#b89a5e,#b89a5e) left 3px bottom 3px / 1px 9px no-repeat, linear-gradient(#b89a5e,#b89a5e) right 3px bottom 3px / 9px 1px no-repeat, linear-gradient(#b89a5e,#b89a5e) right 3px bottom 3px / 1px 9px no-repeat, linear-gradient(180deg, rgba(40, 36, 28, .9), rgba(12, 12, 10, .97));
border-color: #b89a5e;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:has([class*="_avatarWrap_"]) :is([class*="_avatarImg_"], [class*="_avatarFallback_"]) {
border-radius: 0;
box-shadow: 0 0 0 2px #080a0b, 0 0 0 3px rgba(217, 223, 225, .5);
}
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:has([class*="_avatarWrap_"]) [class*="_avatarFallback_"] { background: linear-gradient(135deg, #1b2124, #0c0f10); color: #d9dfe1; }
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:has([class*="_avatarWrap_"]) [class*="_name_"] { font-family: var(--sky-ui); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #f1f1ea; }
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:has([class*="_avatarWrap_"]) [class*="_badge_"] { border-radius: 0; color: #0b0d0e; box-shadow: 0 0 0 1px #000; }
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:has([class*="_avatarWrap_"]) [class*="_badgeActive_"] { background: #e3cf9f; }
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:has([class*="_avatarWrap_"]) [class*="_badgeDefault_"] { background: #b89a5e; }
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:has([class*="_avatarWrap_"]) [class*="_badgeConnected_"] { background: #9db2b8; }
[data-lumiverse-surface="viewport-drawer"] [class*="_batchCheck_"] { background: rgba(0, 0, 0, .6); border-color: rgba(217, 223, 225, .45); border-radius: 0; }
[data-lumiverse-surface="viewport-drawer"] [class*="_batchCheckSelected_"] { background: #b89a5e; border-color: #e3cf9f; }
/* pack cards: dark plates with a light cover */
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:has([class*="_cardCover_"]) {
background: linear-gradient(rgba(217,223,225,.0),rgba(217,223,225,.0)) left 3px top 3px / 9px 1px no-repeat, linear-gradient(rgba(217,223,225,.0),rgba(217,223,225,.0)) left 3px top 3px / 1px 9px no-repeat, linear-gradient(rgba(217,223,225,.0),rgba(217,223,225,.0)) right 3px top 3px / 9px 1px no-repeat, linear-gradient(rgba(217,223,225,.0),rgba(217,223,225,.0)) right 3px top 3px / 1px 9px no-repeat, linear-gradient(rgba(217,223,225,.0),rgba(217,223,225,.0)) left 3px bottom 3px / 9px 1px no-repeat, linear-gradient(rgba(217,223,225,.0),rgba(217,223,225,.0)) left 3px bottom 3px / 1px 9px no-repeat, linear-gradient(rgba(217,223,225,.0),rgba(217,223,225,.0)) right 3px bottom 3px / 9px 1px no-repeat, linear-gradient(rgba(217,223,225,.0),rgba(217,223,225,.0)) right 3px bottom 3px / 1px 9px no-repeat, linear-gradient(180deg, #171c1e, #0a0c0d);
border-color: var(--sky-rule);
border-radius: 0;
box-shadow: 0 0 0 1px #000;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:has([class*="_cardCover_"]):hover { background: linear-gradient(#f4f6f5,#f4f6f5) left 3px top 3px / 9px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) left 3px top 3px / 1px 9px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px top 3px / 9px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px top 3px / 1px 9px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) left 3px bottom 3px / 9px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) left 3px bottom 3px / 1px 9px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px bottom 3px / 9px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px bottom 3px / 1px 9px no-repeat, linear-gradient(180deg, #1d2427, #0c0f10); border-color: rgba(244, 246, 245, .6); }
[data-lumiverse-surface="viewport-drawer"] [class*="_card_"]:has([class*="_cardCover_"]) [class*="_cardBody_"] { background: linear-gradient(180deg, rgba(0, 0, 0, .0), rgba(0, 0, 0, .55)); }
[data-lumiverse-surface="viewport-drawer"] [class*="_cardName_"] { font-family: var(--sky-ui); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #f1f1ea; }
[data-lumiverse-surface="viewport-drawer"] [class*="_cardAuthor_"] { color: #9aa2a1; }
[data-lumiverse-surface="viewport-drawer"] :is([class*="_categoryBadge_"], [class*="_genderBadge_"]) { border-radius: 0; letter-spacing: .05em; text-transform: uppercase; }
[data-lumiverse-surface="viewport-drawer"] [class*="_lucidCard_"] { background: linear-gradient(180deg, #151a1c, #0a0c0d); border-color: var(--sky-rule); border-radius: 0; }
[data-lumiverse-surface="viewport-drawer"] [class*="_lucidCard_"][class*="_lucidCardSelected_"] { border-color: #b89a5e; box-shadow: 0 0 0 1px rgba(184, 154, 94, .5); }
[data-lumiverse-surface="viewport-drawer"] [class*="_lucidCategoryTab_"] { color: #9da5a5; }
[data-lumiverse-surface="viewport-drawer"] [class*="_lucidCategoryTabActive_"] { color: #ffffff; border-bottom-color: #b89a5e; }
[data-lumiverse-surface="viewport-drawer"] [class*="_dropZone_"] { border-color: rgba(217, 223, 225, .35); background: rgba(255, 255, 255, .03); color: #b3b8b5; }
[data-lumiverse-surface="viewport-drawer"] [class*="_dropZoneActive_"] { border-color: #f4f6f5; background: rgba(255, 255, 255, .09); }
/* list rows (character / persona list view): only real rows, never the grid's layout rows */
[data-lumiverse-surface="viewport-drawer"] [class*="_row_"]:has([class*="_avatar_"]):not(:has([class*="_card_"])) {
background: var(--sky-hairline) center bottom / 100% 1px no-repeat;
border-radius: 0;
border-color: transparent;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_row_"]:has([class*="_avatar_"]):not(:has([class*="_card_"])):hover { background: var(--sky-sweep), var(--sky-hairline) center bottom / 100% 1px no-repeat; }
[data-lumiverse-surface="viewport-drawer"] [class*="_row_"]:has([class*="_avatar_"]):is([class*="_selected_"], [class*="_rowSelected_"]) {
background: linear-gradient(90deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 85%, transparent), var(--sky-hairline) center bottom / 100% 1px no-repeat;
box-shadow: inset 2px 0 0 #f4f6f5;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_row_"] :is([class*="_avatar_"], [class*="_avatarImg_"]) { border-radius: 0; box-shadow: 0 0 0 1px rgba(217, 223, 225, .4); }
/* favourites / tags / bulk bars */
[data-lumiverse-surface="viewport-drawer"] [class*="_iconBadge_"] { background: rgba(184, 154, 94, .16); color: #e3cf9f; border-radius: 0; }
[data-lumiverse-surface="viewport-drawer"] [class*="_countBadge_"] { background: rgba(255, 255, 255, .10); color: #d9dfe1; border-radius: 0; }
[data-lumiverse-surface="viewport-drawer"] [class*="_avatarChip_"] { border-radius: 0; box-shadow: 0 0 0 1px rgba(217, 223, 225, .45); }
[data-lumiverse-surface="viewport-drawer"] [class*="_tagPill_"] { border-radius: 0; background: rgba(255, 255, 255, .07); color: #d9dfe1; border-color: var(--sky-rule); text-transform: uppercase; letter-spacing: .04em; }
[data-lumiverse-surface="viewport-drawer"] [class*="_tagPillExcluded_"] { background: rgba(199, 112, 90, .14); color: #e0866f; border-color: rgba(199, 112, 90, .5); text-decoration: line-through; }
[data-lumiverse-surface="viewport-drawer"] :is([class*="_bar_"], [class*="_bulkBar_"]) {
background: linear-gradient(180deg, rgba(40, 36, 28, .95), rgba(14, 13, 10, .97));
border-color: rgba(184, 154, 94, .55);
border-radius: 0;
box-shadow: 0 0 0 1px #000, 0 6px 16px rgba(0, 0, 0, .5);
}
/* 6. FORMS, BUTTONS, SWITCHES, SLIDERS ------------------------------------- */
:is([data-lumiverse-surface="viewport-drawer"], [class*="_modal_"], [data-component="LandingPage"], [data-component="LorebookEditorWorkspace"], [data-component="LorebookHalfScreenEditor"]) :is(input[class*="_input_"], select[class*="_select_"], [class*="_fieldInput_"], [class*="_fieldSelect_"],
[class*="_nameInput_"], [class*="_textInput_"], [class*="_targetInput_"], [class*="_tagInput_"]) {
background: rgba(0, 0, 0, .46);
border-color: var(--sky-rule);
border-radius: 0;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6);
}
/* textareas: ring only; never an opaque background, never text colour (overlay-safe) */
:is([data-lumiverse-surface="viewport-drawer"], [class*="_modal_"], [data-component="LandingPage"], [data-component="LorebookEditorWorkspace"], [data-component="LorebookHalfScreenEditor"]) textarea:is([class*="_textarea_"], [class*="_fieldTextarea_"]):not([class*="_textareaHighlighted_"]):not([class*="_textareaMirror_"]) {
border-color: var(--sky-rule);
border-radius: 0;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55);
}
:is([data-lumiverse-surface="viewport-drawer"], [class*="_modal_"], [data-component="LandingPage"], [data-component="LorebookEditorWorkspace"], [data-component="LorebookHalfScreenEditor"]) :is(input[class*="_input_"], select[class*="_select_"], [class*="_fieldInput_"], [class*="_fieldSelect_"], [class*="_nameInput_"],
textarea:is([class*="_textarea_"], [class*="_fieldTextarea_"]):not([class*="_textareaHighlighted_"])):focus {
border-color: rgba(244, 246, 245, .75);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55), 0 0 0 1px rgba(244, 246, 245, .15);
}
:is([data-lumiverse-surface="viewport-drawer"], [class*="_modal_"], [data-component="LandingPage"], [data-component="LorebookEditorWorkspace"], [data-component="LorebookHalfScreenEditor"]) :is([class*="_formLabel_"], [class*="_fieldLabel_"]) { font-family: var(--sky-ui); letter-spacing: .08em; text-transform: uppercase; color: #aeb5b4; }
:is([data-lumiverse-surface="viewport-drawer"], [class*="_modal_"], [data-component="LandingPage"], [data-component="LorebookEditorWorkspace"], [data-component="LorebookHalfScreenEditor"]) [class*="_scopeLabel_"],
:is([data-lumiverse-surface="viewport-drawer"], [class*="_modal_"], [data-component="LandingPage"], [data-component="LorebookEditorWorkspace"], [data-component="LorebookHalfScreenEditor"]) [class*="_sectionHeader_"] {
padding-bottom: 8px; /* the only spacing tweak: room for the ornamental rule under the label */
font-family: var(--sky-display);
letter-spacing: .18em;
text-transform: uppercase;
color: #e4eaec;
background:
url(./assets/sky-ornament-sm.svg) left 0 bottom 0 / 48px 8px no-repeat,
linear-gradient(90deg, rgba(217, 223, 225, .45), transparent 85%) left bottom 3px / 100% 1px no-repeat;
}
:is([data-lumiverse-surface="viewport-drawer"], [class*="_modal_"], [data-component="LandingPage"], [data-component="LorebookEditorWorkspace"], [data-component="LorebookHalfScreenEditor"]) [class*="_divider_"] { background: var(--sky-hairline); border-color: transparent; }
/* buttons: reticle-bracketed keys. order: base -> primary -> danger (later wins) */
:is([data-lumiverse-surface="viewport-drawer"], [class*="_modal_"], [data-component="LandingPage"], [data-component="LorebookEditorWorkspace"], [data-component="LorebookHalfScreenEditor"]) :is(button[class*="_btn_"], [class*="_secondaryBtn_"], [class*="_secondaryButton_"], [class*="_addBtn_"], [class*="_refreshBtn_"],
[class*="_toolbarBtn_"], [class*="_moveBtn_"], [class*="_tagsBtn_"], [class*="_cancelBtn_"], [class*="_selectionBtn_"],
[class*="_bulkActionBtn_"], [class*="_importBtn_"], [class*="_quickBtn_"], [class*="_presetBtn_"], [class*="_linkBtn_"]) {
font-family: var(--sky-ui);
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
background: linear-gradient(rgba(217,223,225,.55),rgba(217,223,225,.55)) left 3px top 3px / 6px 1px no-repeat, linear-gradient(rgba(217,223,225,.55),rgba(217,223,225,.55)) left 3px top 3px / 1px 6px no-repeat, linear-gradient(rgba(217,223,225,.55),rgba(217,223,225,.55)) right 3px top 3px / 6px 1px no-repeat, linear-gradient(rgba(217,223,225,.55),rgba(217,223,225,.55)) right 3px top 3px / 1px 6px no-repeat, linear-gradient(rgba(217,223,225,.55),rgba(217,223,225,.55)) left 3px bottom 3px / 6px 1px no-repeat, linear-gradient(rgba(217,223,225,.55),rgba(217,223,225,.55)) left 3px bottom 3px / 1px 6px no-repeat, linear-gradient(rgba(217,223,225,.55),rgba(217,223,225,.55)) right 3px bottom 3px / 6px 1px no-repeat, linear-gradient(rgba(217,223,225,.55),rgba(217,223,225,.55)) right 3px bottom 3px / 1px 6px no-repeat, linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015));
border-color: var(--sky-rule);
border-radius: 0;
color: #d9dfe1;
box-shadow: none;
}
:is([data-lumiverse-surface="viewport-drawer"], [class*="_modal_"], [data-component="LandingPage"], [data-component="LorebookEditorWorkspace"], [data-component="LorebookHalfScreenEditor"]) :is(button[class*="_btn_"], [class*="_secondaryBtn_"], [class*="_secondaryButton_"], [class*="_addBtn_"], [class*="_refreshBtn_"],
[class*="_toolbarBtn_"], [class*="_moveBtn_"], [class*="_tagsBtn_"], [class*="_cancelBtn_"], [class*="_selectionBtn_"],
[class*="_bulkActionBtn_"], [class*="_importBtn_"], [class*="_quickBtn_"], [class*="_presetBtn_"], [class*="_linkBtn_"]):hover:not(:disabled) {
background: linear-gradient(#f4f6f5,#f4f6f5) left 3px top 3px / 6px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) left 3px top 3px / 1px 6px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px top 3px / 6px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px top 3px / 1px 6px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) left 3px bottom 3px / 6px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) left 3px bottom 3px / 1px 6px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px bottom 3px / 6px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px bottom 3px / 1px 6px no-repeat, var(--sky-sweep);
border-color: rgba(244, 246, 245, .7);
color: #ffffff;
}
:is([data-lumiverse-surface="viewport-drawer"], [class*="_modal_"], [data-component="LandingPage"], [data-component="LorebookEditorWorkspace"], [data-component="LorebookHalfScreenEditor"]) button[class*="_btnGhost_"] { background: transparent; border-color: transparent; }
:is([data-lumiverse-surface="viewport-drawer"], [class*="_modal_"], [data-component="LandingPage"], [data-component="LorebookEditorWorkspace"], [data-component="LorebookHalfScreenEditor"]) [class*="_presetBtnActive_"] { background: linear-gradient(#b89a5e,#b89a5e) left 3px top 3px / 6px 1px no-repeat, linear-gradient(#b89a5e,#b89a5e) left 3px top 3px / 1px 6px no-repeat, linear-gradient(#b89a5e,#b89a5e) right 3px top 3px / 6px 1px no-repeat, linear-gradient(#b89a5e,#b89a5e) right 3px top 3px / 1px 6px no-repeat, linear-gradient(#b89a5e,#b89a5e) left 3px bottom 3px / 6px 1px no-repeat, linear-gradient(#b89a5e,#b89a5e) left 3px bottom 3px / 1px 6px no-repeat, linear-gradient(#b89a5e,#b89a5e) right 3px bottom 3px / 6px 1px no-repeat, linear-gradient(#b89a5e,#b89a5e) right 3px bottom 3px / 1px 6px no-repeat, linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .05)); border-color: #b89a5e; color: #ffffff; }
:is([data-lumiverse-surface="viewport-drawer"], [class*="_modal_"], [data-component="LandingPage"], [data-component="LorebookEditorWorkspace"], [data-component="LorebookHalfScreenEditor"]) :is(button[class*="_btnPrimary_"], [class*="_primaryBtn_"], [class*="_applyBtn_"], [class*="_createBtn_"], [class*="_confirmBtn_"]) {
font-family: var(--sky-ui);
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
background: linear-gradient(#e3cf9f,#e3cf9f) left 3px top 3px / 6px 1px no-repeat, linear-gradient(#e3cf9f,#e3cf9f) left 3px top 3px / 1px 6px no-repeat, linear-gradient(#e3cf9f,#e3cf9f) right 3px top 3px / 6px 1px no-repeat, linear-gradient(#e3cf9f,#e3cf9f) right 3px top 3px / 1px 6px no-repeat, linear-gradient(#e3cf9f,#e3cf9f) left 3px bottom 3px / 6px 1px no-repeat, linear-gradient(#e3cf9f,#e3cf9f) left 3px bottom 3px / 1px 6px no-repeat, linear-gradient(#e3cf9f,#e3cf9f) right 3px bottom 3px / 6px 1px no-repeat, linear-gradient(#e3cf9f,#e3cf9f) right 3px bottom 3px / 1px 6px no-repeat, linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .10));
border-color: rgba(244, 246, 245, .75);
border-radius: 0;
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
box-shadow: inset 0 0 14px rgba(255, 255, 255, .08);
}
:is([data-lumiverse-surface="viewport-drawer"], [class*="_modal_"], [data-component="LandingPage"], [data-component="LorebookEditorWorkspace"], [data-component="LorebookHalfScreenEditor"]) :is(button[class*="_btnPrimary_"], [class*="_primaryBtn_"], [class*="_applyBtn_"], [class*="_createBtn_"], [class*="_confirmBtn_"]):hover:not(:disabled) {
background: linear-gradient(#ffffff,#ffffff) left 3px top 3px / 6px 1px no-repeat, linear-gradient(#ffffff,#ffffff) left 3px top 3px / 1px 6px no-repeat, linear-gradient(#ffffff,#ffffff) right 3px top 3px / 6px 1px no-repeat, linear-gradient(#ffffff,#ffffff) right 3px top 3px / 1px 6px no-repeat, linear-gradient(#ffffff,#ffffff) left 3px bottom 3px / 6px 1px no-repeat, linear-gradient(#ffffff,#ffffff) left 3px bottom 3px / 1px 6px no-repeat, linear-gradient(#ffffff,#ffffff) right 3px bottom 3px / 6px 1px no-repeat, linear-gradient(#ffffff,#ffffff) right 3px bottom 3px / 1px 6px no-repeat, linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .16));
color: #ffffff;
}
:is([data-lumiverse-surface="viewport-drawer"], [class*="_modal_"], [data-component="LandingPage"], [data-component="LorebookEditorWorkspace"], [data-component="LorebookHalfScreenEditor"]) :is(button[class*="_btnDanger_"], [class*="_dangerBtn_"]) {
font-family: var(--sky-ui);
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
background: linear-gradient(rgba(224,134,111,.8),rgba(224,134,111,.8)) left 3px top 3px / 6px 1px no-repeat, linear-gradient(rgba(224,134,111,.8),rgba(224,134,111,.8)) left 3px top 3px / 1px 6px no-repeat, linear-gradient(rgba(224,134,111,.8),rgba(224,134,111,.8)) right 3px top 3px / 6px 1px no-repeat, linear-gradient(rgba(224,134,111,.8),rgba(224,134,111,.8)) right 3px top 3px / 1px 6px no-repeat, linear-gradient(rgba(224,134,111,.8),rgba(224,134,111,.8)) left 3px bottom 3px / 6px 1px no-repeat, linear-gradient(rgba(224,134,111,.8),rgba(224,134,111,.8)) left 3px bottom 3px / 1px 6px no-repeat, linear-gradient(rgba(224,134,111,.8),rgba(224,134,111,.8)) right 3px bottom 3px / 6px 1px no-repeat, linear-gradient(rgba(224,134,111,.8),rgba(224,134,111,.8)) right 3px bottom 3px / 1px 6px no-repeat, linear-gradient(180deg, rgba(199, 112, 90, .16), rgba(199, 112, 90, .04));
border-color: rgba(199, 112, 90, .6);
border-radius: 0;
color: #e8967e;
}
:is([data-lumiverse-surface="viewport-drawer"], [class*="_modal_"], [data-component="LandingPage"], [data-component="LorebookEditorWorkspace"], [data-component="LorebookHalfScreenEditor"]) :is(button[class*="_btnDanger_"], [class*="_dangerBtn_"]):hover:not(:disabled) { background: linear-gradient(#f0a590,#f0a590) left 3px top 3px / 6px 1px no-repeat, linear-gradient(#f0a590,#f0a590) left 3px top 3px / 1px 6px no-repeat, linear-gradient(#f0a590,#f0a590) right 3px top 3px / 6px 1px no-repeat, linear-gradient(#f0a590,#f0a590) right 3px top 3px / 1px 6px no-repeat, linear-gradient(#f0a590,#f0a590) left 3px bottom 3px / 6px 1px no-repeat, linear-gradient(#f0a590,#f0a590) left 3px bottom 3px / 1px 6px no-repeat, linear-gradient(#f0a590,#f0a590) right 3px bottom 3px / 6px 1px no-repeat, linear-gradient(#f0a590,#f0a590) right 3px bottom 3px / 1px 6px no-repeat, rgba(199, 112, 90, .24); color: #ffd0c4; border-color: #e0866f; }
/* switches: square rail, diamond knob */
[class*="_switchMd_"],
[class*="_switchSm_"] {
border-radius: 0;
background: rgba(0, 0, 0, .55);
box-shadow: inset 0 0 0 1px rgba(217, 223, 225, .38);
}
[class*="_switch_"]::after {
border-radius: 0;
background: #d9dfe1;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
[class*="_switchOn_"] { background: rgba(184, 154, 94, .30); box-shadow: inset 0 0 0 1px #b89a5e; }
[class*="_switchOn_"]::after { background: #f4f6f5; }
[class*="_toggleSwitch_"] { border-radius: 0; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(217, 223, 225, .38); }
[class*="_toggleSwitchOn_"] { background: rgba(184, 154, 94, .30); box-shadow: inset 0 0 0 1px #b89a5e; }
/* sliders: hairline rail, bright fill, diamond thumb */
[class*="_trackArea_"] [class*="_track_"] { height: 2px; border-radius: 0; background: rgba(217, 223, 225, .24); }
[class*="_trackArea_"] [class*="_fill_"] { border-radius: 0; opacity: 1; background: linear-gradient(90deg, rgba(217, 223, 225, .45), #f4f6f5); }
[class*="_trackArea_"] [class*="_thumb_"] {
width: 14px;
height: 14px;
border: 0;
border-radius: 0;
background: #f4f6f5;
box-shadow: none;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
[class*="_trackArea_"] [class*="_rangeThumb_"]:hover { background: #ffffff; }
/* native range inputs (the wallpaper sliders etc.): hairline track, diamond thumb */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
height: 18px;
}
input[type="range"]:not([style*="--progress"])::-webkit-slider-runnable-track { height: 2px; border-radius: 0; background: rgba(217, 223, 225, .30); }
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
margin-top: -6px;
border: 0;
border-radius: 0;
background: #f4f6f5;
box-shadow: none;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
input[type="range"]:hover::-webkit-slider-thumb { background: #ffffff; }
input[type="range"]::-moz-range-track { height: 2px; border-radius: 0; background: rgba(217, 223, 225, .30); }
input[type="range"]::-moz-range-progress { height: 2px; background: #f4f6f5; }
input[type="range"]::-moz-range-thumb {
width: 14px;
height: 14px;
border: 0;
border-radius: 0;
background: #f4f6f5;
box-shadow: none;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
input[type="range"]:hover::-moz-range-thumb { background: #ffffff; }
/* collapsible sections ("Display Settings") */
[data-lumiverse-surface="viewport-drawer"] [class*="_section_"] > [class*="_header_"] {
border-bottom-color: transparent;
background: linear-gradient(90deg, rgba(217, 223, 225, .35), transparent 85%) left bottom / 100% 1px no-repeat;
}
[data-lumiverse-surface="viewport-drawer"] [class*="_section_"] > [class*="_header_"] [class*="_icon_"] { border-radius: 0; background: rgba(184, 154, 94, .14); color: #e3cf9f; box-shadow: inset 0 0 0 1px rgba(184, 154, 94, .45); }
[data-lumiverse-surface="viewport-drawer"] [class*="_section_"] > [class*="_header_"] [class*="_title_"] { font-family: var(--sky-display); letter-spacing: .14em; text-transform: uppercase; font-size: .86em; }
[data-lumiverse-surface="viewport-drawer"] [class*="_info_"] { background: rgba(0, 0, 0, .28); border-radius: 0; }
[data-lumiverse-surface="viewport-drawer"] [class*="_preview_"] { border-radius: 0; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(217, 223, 225, .3); }
[data-lumiverse-surface="viewport-drawer"] [class*="_closeBtn_"] { border-radius: 0; }
/* 7. WINDOWS: modals + lorebook editors ------------------------------------- */
/* corners are painted as background layers, so no positioning is required */
[class*="_modal_"]:not([class*="_fullscreenModal_"]) {
background:
url(./assets/sky-corner-tl.svg) left 6px top 6px / 30px 30px no-repeat,
url(./assets/sky-corner-tr.svg) right 6px top 6px / 30px 30px no-repeat,
url(./assets/sky-corner-bl.svg) left 6px bottom 6px / 30px 30px no-repeat,
url(./assets/sky-corner-br.svg) right 6px bottom 6px / 30px 30px no-repeat,
url(./assets/sky-grain.svg) 0 0 / 160px 160px,
var(--lumiverse-gradient-modal);
border-color: rgba(217, 223, 225, .34);
border-radius: 1px;
color: #e8e6df;
box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(217, 223, 225, .10), 0 30px 80px rgba(0, 0, 0, .75);
}
[class*="_modal_"] [class*="_title_"] { font-family: var(--sky-display); letter-spacing: .16em; text-transform: uppercase; }
[data-component="LorebookEditorWorkspace"],
[data-component="LorebookHalfScreenEditor"] { background-color: #0b0d0e; color: #e8e6df; }
/* 8. HOME SCREEN ------------------------------------------------------------- */
/* title banner: Cinzel logotype, hairline rule + ornament (background layers) */
[data-component="LandingPageHeader"] {
background:
url(./assets/sky-ornament-lg.svg) center bottom 0 / 180px 14px no-repeat,
linear-gradient(90deg, transparent, rgba(217, 223, 225, .5) 12%, rgba(217, 223, 225, .5) 88%, transparent) left bottom 6px / 100% 1px no-repeat;
}
[data-component="LandingPageHeader"] [class*="_logoIcon_"] {
background: #080a0b url(./assets/dragonborn-sigil.webp) center / auto 82% no-repeat;
border-color: rgba(217, 223, 225, .45);
border-radius: 0;
box-shadow: 0 0 0 2px #000, 0 0 0 3px rgba(217, 223, 225, .18);
}
[data-component="LandingPageHeader"] [class*="_logoIcon_"] > * { opacity: 0; }
[data-component="LandingPageHeader"] [class*="_logoText_"] h1 {
font-family: var(--sky-display);
font-weight: 600;
letter-spacing: .34em;
text-transform: uppercase;
color: #f1f3f1;
text-shadow: 0 0 18px rgba(255, 255, 255, .20), 0 2px 3px #000;
}
[data-component="LandingPageHeader"] [class*="_taglineBtn_"] { font-family: var(--sky-ui); letter-spacing: .12em; text-transform: uppercase; color: #aab2b1; }
[data-component="LandingPageHeader"] [class*="_headerActions_"] button,
[data-component="LandingPageHeader"] [class*="_accountBtn_"] {
font-family: var(--sky-ui);
letter-spacing: .08em;
text-transform: uppercase;
background: linear-gradient(rgba(217,223,225,.5),rgba(217,223,225,.5)) left 3px top 3px / 5px 1px no-repeat, linear-gradient(rgba(217,223,225,.5),rgba(217,223,225,.5)) left 3px top 3px / 1px 5px no-repeat, linear-gradient(rgba(217,223,225,.5),rgba(217,223,225,.5)) right 3px top 3px / 5px 1px no-repeat, linear-gradient(rgba(217,223,225,.5),rgba(217,223,225,.5)) right 3px top 3px / 1px 5px no-repeat, linear-gradient(rgba(217,223,225,.5),rgba(217,223,225,.5)) left 3px bottom 3px / 5px 1px no-repeat, linear-gradient(rgba(217,223,225,.5),rgba(217,223,225,.5)) left 3px bottom 3px / 1px 5px no-repeat, linear-gradient(rgba(217,223,225,.5),rgba(217,223,225,.5)) right 3px bottom 3px / 5px 1px no-repeat, linear-gradient(rgba(217,223,225,.5),rgba(217,223,225,.5)) right 3px bottom 3px / 1px 5px no-repeat, rgba(0, 0, 0, .4);
border-color: var(--sky-rule);
border-radius: 0;
color: #cfd5d4;
}
[data-component="LandingPageHeader"] [class*="_headerActions_"] button:hover,
[data-component="LandingPageHeader"] [class*="_accountBtn_"]:hover { background: linear-gradient(#f4f6f5,#f4f6f5) left 3px top 3px / 5px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) left 3px top 3px / 1px 5px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px top 3px / 5px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px top 3px / 1px 5px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) left 3px bottom 3px / 5px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) left 3px bottom 3px / 1px 5px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px bottom 3px / 5px 1px no-repeat, linear-gradient(#f4f6f5,#f4f6f5) right 3px bottom 3px / 1px 5px no-repeat, var(--sky-sweep); border-color: rgba(244, 246, 245, .7); color: #ffffff; }
[data-component="LandingPageTabs"] :is(button, [role="tab"]) { border-radius: 0; }
[data-component="LandingPage"] [class*="_landingSearch_"] :is(input, [class*="_searchField_"]) { border-radius: 0; }
/* recent chats = SkyUI list entries; cards = plates with the selection reticle */
[data-component="LandingPage"] [class*="_listItem_"] {
background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .0) 60%), linear-gradient(180deg, rgba(20, 25, 27, .92), rgba(8, 10, 11, .94));
border-color: rgba(217, 223, 225, .22);
border-radius: 0;
box-shadow: 0 0 0 1px #000, 0 6px 16px rgba(0, 0, 0, .45);
}
[data-component="LandingPage"] [class*="_listItem_"]:hover {
background: linear-gradient(90deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .03) 70%), linear-gradient(180deg, rgba(24, 30, 32, .95), rgba(9, 11, 12, .96));
border-color: rgba(244, 246, 245, .6);
box-shadow: 0 0 0 1px #000, inset 2px 0 0 #f4f6f5, 0 6px 16px rgba(0, 0, 0, .45);
}
[data-component="LandingPage"] :is([class*="_listAvatar_"], [class*="_listAvatarFallback_"]) { border-radius: 0; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(217, 223, 225, .4); }
[data-component="LandingPage"] [class*="_listName_"] { font-family: var(--sky-ui); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #f1f1ea; }
[data-component="LandingPage"] :is([class*="_listTime_"], [class*="_listSubtitle_"], [class*="_listMeta_"]) { color: #98a09f; }
[data-component="LandingPage"] :is([class*="_listStatusPill_"], [class*="_chatCountBadge_"], [class*="_groupBadge_"]) {
border-radius: 0;
background: rgba(184, 154, 94, .12);
border-color: rgba(184, 154, 94, .6);
color: #e3cf9f;
letter-spacing: .06em;
text-transform: uppercase;
}
[data-component="LandingPage"] [class*="_card_"] {
border-color: rgba(217, 223, 225, .26);
border-radius: 1px;
box-shadow: 0 0 0 1px #000, 0 8px 20px rgba(0, 0, 0, .5);
}
[data-component="LandingPage"] [class*="_card_"]:hover { border-color: rgba(244, 246, 245, .7); }
[data-component="LandingPage"] [class*="_cardName_"] { font-family: var(--sky-ui); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #f1f1ea; }
[data-component="LandingPage"] [class*="_cardImageOverlay_"] { background: linear-gradient(to top, rgba(4, 5, 6, .96), rgba(4, 5, 6, 0) 62%); }
[data-component="LandingPage"] :is([class*="_primaryBtn_"]) { border-radius: 0; }
/* 9. CHAT: windows, prose, composer ------------------------------------------ */
/* data-component sits on the card itself; data-part flips to "streaming" mid-reply */
[data-component="BubbleMessage"] { --lcs-radius: 2px; border-radius: 2px; }
[data-component="BubbleMessage"]:not([data-part="user"]) {
background-color: #0f1213;
box-shadow: 0 0 0 1px rgba(217, 223, 225, .20), 0 8px 22px rgba(0, 0, 0, .45);
}
[data-component="BubbleMessage"][data-part="user"] {
background-color: #14130f;
box-shadow: 0 0 0 1px rgba(184, 154, 94, .30), 0 8px 22px rgba(0, 0, 0, .45);
}
[data-component="BubbleMessage"] [class*="_bubble_"] { border-radius: 2px; }
[data-component="BubbleMessage"] [class*="_header_"] {
background: linear-gradient(90deg, rgba(217, 223, 225, .28), transparent 85%) left bottom / 100% 1px no-repeat;
}
/* the card's own ::before is display:none by default and the card is positioned:
re-enable it as a faint four-corner frame (never intercepts clicks) */
[data-component="BubbleMessage"]::before {
content: "" !important;
display: block !important;
position: absolute;
inset: 4px;
z-index: 1;
pointer-events: none;
background: linear-gradient(rgba(217,223,225,.38),rgba(217,223,225,.38)) left 3px top 3px / 9px 1px no-repeat, linear-gradient(rgba(217,223,225,.38),rgba(217,223,225,.38)) left 3px top 3px / 1px 9px no-repeat, linear-gradient(rgba(217,223,225,.38),rgba(217,223,225,.38)) right 3px top 3px / 9px 1px no-repeat, linear-gradient(rgba(217,223,225,.38),rgba(217,223,225,.38)) right 3px top 3px / 1px 9px no-repeat, linear-gradient(rgba(217,223,225,.38),rgba(217,223,225,.38)) left 3px bottom 3px / 9px 1px no-repeat, linear-gradient(rgba(217,223,225,.38),rgba(217,223,225,.38)) left 3px bottom 3px / 1px 9px no-repeat, linear-gradient(rgba(217,223,225,.38),rgba(217,223,225,.38)) right 3px bottom 3px / 9px 1px no-repeat, linear-gradient(rgba(217,223,225,.38),rgba(217,223,225,.38)) right 3px bottom 3px / 1px 9px no-repeat;
}
[data-component="BubbleMessage"][data-part="user"]::before { background: linear-gradient(rgba(184,154,94,.5),rgba(184,154,94,.5)) left 3px top 3px / 9px 1px no-repeat, linear-gradient(rgba(184,154,94,.5),rgba(184,154,94,.5)) left 3px top 3px / 1px 9px no-repeat, linear-gradient(rgba(184,154,94,.5),rgba(184,154,94,.5)) right 3px top 3px / 9px 1px no-repeat, linear-gradient(rgba(184,154,94,.5),rgba(184,154,94,.5)) right 3px top 3px / 1px 9px no-repeat, linear-gradient(rgba(184,154,94,.5),rgba(184,154,94,.5)) left 3px bottom 3px / 9px 1px no-repeat, linear-gradient(rgba(184,154,94,.5),rgba(184,154,94,.5)) left 3px bottom 3px / 1px 9px no-repeat, linear-gradient(rgba(184,154,94,.5),rgba(184,154,94,.5)) right 3px bottom 3px / 9px 1px no-repeat, linear-gradient(rgba(184,154,94,.5),rgba(184,154,94,.5)) right 3px bottom 3px / 1px 9px no-repeat; }
[data-component="BubbleMessage"] [class*="_name_"],
[data-component="BubbleMessage"] [class*="_nameChar_"],
[data-component="BubbleMessage"] [class*="_nameUser_"] {
font-family: var(--sky-display);
letter-spacing: .08em;
color: #e8e6df !important;
-webkit-text-fill-color: #e8e6df !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, .8) !important;
}
[data-component="BubbleMessage"]:not([data-part="user"]) :is([class*="_name_"], [class*="_nameChar_"]) { color: #bfdbe4 !important; -webkit-text-fill-color: #bfdbe4 !important; }
[data-component="BubbleMessage"][data-part="user"] :is([class*="_name_"], [class*="_nameUser_"]) { color: #dcc791 !important; -webkit-text-fill-color: #dcc791 !important; }
[data-component="BubbleMessage"] [class*="_avatar_"] { box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(217, 223, 225, .4); }
[data-component="BubbleMessage"] [class*="_actionsPill_"] button { color: #d4ddd9; }
[data-component="BubbleMessage"] [class*="_actionsPill_"] button:hover { color: #ffffff; background: rgba(255, 255, 255, .12); }
[data-component="MessageContent"] { color: #e0e0d8; }
[data-component="MessageContent"] [class*="_prose_"] { color: #e0e0d8; line-height: 1.62; }
[data-component="MessageContent"] :is(strong, b) { color: #f3eee2; }
[data-component="MessageContent"] :is(em, i) { color: #c9bd9d; }
[data-component="MessageContent"] blockquote { color: #c9bfa8; border-inline-start-color: #8a7a58; background: rgba(184, 154, 94, .06); }
[data-component="MessageContent"] :not(pre) > code { color: #c4dbe0; background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px rgba(217, 223, 225, .15); }
[data-component="MessageContent"] pre { color: #d8e0dc; background: rgba(4, 6, 7, .75); box-shadow: inset 0 0 0 1px rgba(217, 223, 225, .17); }
[data-component="MessageContent"] hr { border: 0; height: 14px; background: url(./assets/sky-ornament-lg.svg) center / 180px 14px no-repeat, linear-gradient(90deg, transparent, rgba(217, 223, 225, .4), transparent) center / 100% 1px no-repeat; }
[data-component="MessageContent"] :is(table, th, td) { border-color: rgba(217, 223, 225, .17); }
[data-component="MessageContent"] th { color: #e6dfce; background: rgba(217, 223, 225, .09); }
/* composer: root is the pill; textarea/mirror colours are intentionally untouched */
[data-component="InputArea"] [class*="_inputWrapper_"] {
background: linear-gradient(180deg, rgba(24, 29, 31, .98), rgba(10, 12, 13, .98));
border-color: rgba(217, 223, 225, .28);
border-radius: 1px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 4px 14px rgba(0, 0, 0, .4);
}
[data-component="InputArea"] [class*="_inputWrapper_"]:focus-within { border-color: rgba(244, 246, 245, .7); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 0 0 1px rgba(244, 246, 245, .14); }
[data-component="InputArea"] [class*="_textarea_"]::placeholder { color: #879391; }
[data-component="InputArea"] [class*="_actionBtn_"] { color: #aebbb8; border-radius: 0; }
[data-component="InputArea"] [class*="_actionBtn_"]:hover { color: #ffffff; background: rgba(255, 255, 255, .10); }
[data-component="InputArea"] [class*="_sendBtn_"] {
color: #0b0d0e;
background: linear-gradient(180deg, #eef1f0, #b5bdbd);
border-color: #f4f6f5;
border-radius: 1px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 8px rgba(0, 0, 0, .4);
}
[data-component="InputArea"] [class*="_sendBtn_"]:hover:not(:disabled) { background: linear-gradient(180deg, #ffffff, #c9d0d0); box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 0 16px rgba(255, 255, 255, .22); }
[data-component="InputArea"] [class*="_sendBtn_"]:disabled { filter: saturate(.3); opacity: .45; }
/* 10. EXPANDED EDITOR: paint-only, overlay-safe ------------------------------ */
div[class*="_dialog_"]:has([class*="_highlightContainer_"]),
div[class*="_inlineDialog_"]:has([class*="_highlightContainer_"]) { background: #0b0d0e !important; color: #e8e6df !important; border-color: rgba(217, 223, 225, .3) !important; }
:is(div[class*="_dialog_"], div[class*="_inlineDialog_"]):has([class*="_highlightContainer_"]) [class*="_highlightPre_"]:not([class*="_highlightPlain_"]) { color: #e8e6df !important; }
:is(div[class*="_dialog_"], div[class*="_inlineDialog_"]):has([class*="_highlightContainer_"]) textarea[class*="_textareaHighlighted_"] {
color: transparent !important;
-webkit-text-fill-color: transparent !important;
background: transparent !important;
caret-color: #f4f6f5 !important;
}
:is(div[class*="_dialog_"], div[class*="_inlineDialog_"]):has([class*="_highlightContainer_"]) textarea[class*="_textarea_"]:not([class*="_textareaHighlighted_"]) {
color: #e8e6df !important;
-webkit-text-fill-color: #e8e6df !important;
background: transparent !important;
caret-color: #f4f6f5 !important;
}
[class*="_highlightPre_"] [class*="_hlBracket_"] { color: #a9d0df; }
[class*="_highlightPre_"] [class*="_hlMacroName_"] { color: #e3cf9f; }
[class*="_highlightPre_"] [class*="_hlSep_"] { color: #8d9493; }
[class*="_highlightPre_"] [class*="_hlXmlTag_"] { color: #94b393; }
[class*="_highlightPre_"] [class*="_hlMdDelim_"] { color: #707878; }
[class*="_highlightPre_"] [class*="_hlMdCode_"] { color: #c9a860; }
[class*="_highlightPre_"] [class*="_hlMdHeader_"] { color: #f3eee2; }
/* 10b. DIALOGUE MODE: avatar window + dialogue boxes -------------------------
A Skyrim-conversation layout built only from CSS (executable TSX is stripped
from imported .lumitheme files, so no components are replaced):
- The side PORTRAIT PANEL becomes a tall, free-standing avatar window: no
box, the portrait rises out of a fade (opaque at the top, dissolving
toward the bottom edge), with a Cinzel name plate overlapping the fade.
- While that window is open, the small avatars inside messages are hidden,
so the face lives in ONE place (separate from the chat window).
- AI messages become ornament-cornered dialogue boxes with a speaker name
plate; your messages become "dialogue choices" with a brass edge.
TUNE IT: edit these five values (they are plain CSS variables).
- --sky-portrait-w width of the avatar window (desktop >= 901px). The default
adapts to the free space beside an ~820px chat column
(210px..380px); set a fixed value like 380px to override.
- --sky-portrait-h minimum height of the portrait (80vh, max 900px)
- --sky-portrait-fade how far the fade climbs from the dissolving edge
- --sky-portrait-fade-dir "to top" = bottom dissolves, "to bottom" = top
- --sky-portrait-gallery "none" hides the gallery mosaic, "grid" shows it
Change the portrait side in Lumiverse's own settings (left / right / none).
To go back to the classic cards, delete this whole section. */
:root {
--sky-portrait-w: clamp(210px, calc((100vw - 840px) / 2 - 44px), 380px);
--sky-portrait-h: min(80vh, 900px);
--sky-portrait-fade: 56%;
--sky-portrait-fade-dir: to top;
--sky-portrait-gallery: none;
}
/* --- the avatar window ------------------------------------------------------- */
@media (min-width: 901px) {
[data-component="ChatView"] [class*="_portraitSideOpen_"] { width: calc(var(--lumiverse-btn-icon) + var(--sky-portrait-w)); }
[data-component="ChatView"] [class*="_panelOuter_"] > [class*="_panel_"] { width: min(var(--sky-portrait-w), 100%); }
}
/* no glass box: the window is a soft backlit stage with one hairline edge */
[data-component="ChatView"] [class*="_panelOuter_"] > [class*="_panel_"] {
height: 100%;
margin: 0;
padding: 28px 10px 16px;
gap: 0;
border: 0;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
background:
url(./assets/sky-ornament-lg.svg) center top 6px / 180px 14px no-repeat,
radial-gradient(ellipse 92% 62% at 50% 36%, rgba(217, 223, 225, .10), transparent 72%);
}
[data-component="ChatView"] [class*="_panelOuterLeft_"] > [class*="_panel_"] {
background:
url(./assets/sky-ornament-lg.svg) center top 6px / 180px 14px no-repeat,
linear-gradient(180deg, transparent, rgba(217, 223, 225, .42) 14%, rgba(217, 223, 225, .42) 86%, transparent) right top / 1px 100% no-repeat,
radial-gradient(ellipse 92% 62% at 50% 36%, rgba(217, 223, 225, .10), transparent 72%);
}
[data-component="ChatView"] [class*="_panelOuterRight_"] > [class*="_panel_"] {
background:
url(./assets/sky-ornament-lg.svg) center top 6px / 180px 14px no-repeat,
linear-gradient(180deg, transparent, rgba(217, 223, 225, .42) 14%, rgba(217, 223, 225, .42) 86%, transparent) left top / 1px 100% no-repeat,
radial-gradient(ellipse 92% 62% at 50% 36%, rgba(217, 223, 225, .10), transparent 72%);
}
[data-component="ChatView"] [class*="_panelOuter_"] [class*="_closeBtn_"] {
border-radius: 0;
background: rgba(0, 0, 0, .5);
border-color: rgba(217, 223, 225, .35);
color: #c4c7c2;
}
/* the portrait: full width, tall, edges and one end dissolve to transparent */
[data-component="ChatView"] [class*="_panelOuter_"] [class*="_frame_"] {
width: 100%;
min-height: var(--sky-portrait-h);
max-height: none;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
-webkit-mask-image:
linear-gradient(var(--sky-portrait-fade-dir), transparent 0%, rgba(0, 0, 0, .30) 12%, #000 var(--sky-portrait-fade)),
linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(var(--sky-portrait-fade-dir), transparent 0%, rgba(0, 0, 0, .30) 12%, #000 var(--sky-portrait-fade)),
linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
mask-composite: intersect;
}
[data-component="ChatView"] [class*="_panelOuter_"] [class*="_frame_"]:hover { transform: none; border-color: transparent; box-shadow: none; }
[data-component="ChatView"] [class*="_panelOuter_"] [class*="_frame_"]::after { background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, .07), transparent 70%); }
/* speaker plate: sits over the dissolved edge */
[data-component="ChatView"] [class*="_panelOuter_"] > [class*="_panel_"] > [class*="_name_"] {
position: relative;
z-index: 3;
margin-top: -2.6em;
padding-bottom: 22px;
font-family: var(--sky-display);
font-size: calc(17px * var(--lumiverse-font-scale, 1));
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: #f4f6f5;
text-shadow: 0 0 16px rgba(255, 255, 255, .22), 0 2px 4px #000;
background: url(./assets/sky-ornament-lg.svg) center bottom 2px / 180px 14px no-repeat;
}
[data-component="ChatView"] [class*="_panelOuter_"] [class*="_mosaic_"] { display: var(--sky-portrait-gallery, none); margin-top: 10px; }
[data-component="ChatView"] [class*="_panelOuter_"] [class*="_mosaicCell_"] { border-radius: 0; border-color: rgba(217, 223, 225, .3); }
[data-component="ChatView"] [class*="_portraitTab_"] {
border-radius: 0;
background: linear-gradient(180deg, #151a1c, #0a0c0d);
border-color: rgba(217, 223, 225, .34);
color: #b3b8b5;
}
[data-component="ChatView"] [class*="_portraitTab_"]:hover,
[data-component="ChatView"] [class*="_portraitTabActive_"] { color: #ffffff; border-color: rgba(244, 246, 245, .7); }
/* --- the face lives in the avatar window, not inside every message ---------- */
[data-component="ChatView"]:has([class*="_portraitSideOpen_"]) [data-component="BubbleMessage"] :is([class*="_avatar_"], [class*="_avatarBg_"]) { display: none; }
/* --- AI messages: ornament-cornered dialogue boxes --------------------------- */
[data-component="BubbleMessage"]:not([data-part="user"]) {
background-color: #0a0d0e;
background-image:
url(./assets/sky-corner-tl.svg), url(./assets/sky-corner-tr.svg), url(./assets/sky-corner-bl.svg), url(./assets/sky-corner-br.svg),
url(./assets/sky-grain.svg),
linear-gradient(180deg, rgba(21, 26, 28, .97), rgba(7, 9, 10, .98));
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
background-position: left 5px top 5px, right 5px top 5px, left 5px bottom 5px, right 5px bottom 5px, 0 0, 0 0;
background-size: 26px 26px, 26px 26px, 26px 26px, 26px 26px, 160px 160px, 100% 100%;
border-radius: 0;
box-shadow: 0 0 0 1px rgba(217, 223, 225, .30), 0 0 0 2px #000, 0 14px 34px rgba(0, 0, 0, .6);
}
[data-component="BubbleMessage"]::before { display: none !important; }
[data-component="BubbleMessage"] [class*="_bubble_"] { border-radius: 0; }
/* speaker name plate */
[data-component="BubbleMessage"] [class*="_header_"] {
padding-bottom: 12px;
background:
url(./assets/sky-ornament-sm.svg) left bottom / 48px 8px no-repeat,
linear-gradient(90deg, rgba(217, 223, 225, .42), transparent 82%) left bottom 3.5px / 100% 1px no-repeat;
}
[data-component="BubbleMessage"] [class*="_name_"],
[data-component="BubbleMessage"] [class*="_nameChar_"],
[data-component="BubbleMessage"] [class*="_nameUser_"] {
font-size: calc(14.5px * var(--lumiverse-font-scale, 1));
letter-spacing: .2em;
text-transform: uppercase;
}
[data-component="BubbleMessage"] [class*="_name_"]::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin: 0 .9em .14em 0;
background: currentColor;
transform: rotate(45deg);
}
[data-component="BubbleMessage"] [class*="_metaPill_"] {
background: none !important;
box-shadow: none !important;
color: #7f8786 !important;
letter-spacing: .08em;
text-transform: uppercase;
}
[data-component="BubbleMessage"] [class*="_content_"] { line-height: 1.7; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
/* --- your messages: a selected dialogue choice ------------------------------- */
[data-component="BubbleMessage"][data-part="user"] {
background-color: #0c0b08;
background-image:
linear-gradient(90deg, rgba(184, 154, 94, .20), rgba(10, 10, 8, 0) 78%),
url(./assets/sky-grain.svg),
linear-gradient(180deg, rgba(20, 18, 13, .94), rgba(8, 8, 6, .96));
background-repeat: no-repeat, repeat, no-repeat;
background-position: 0 0, 0 0, 0 0;
background-size: 100% 100%, 160px 160px, 100% 100%;
border-radius: 0;
box-shadow: 0 0 0 1px rgba(184, 154, 94, .34), 0 0 0 2px #000, inset 3px 0 0 #b89a5e, 0 10px 26px rgba(0, 0, 0, .5);
}
[data-component="BubbleMessage"][data-part="user"] [class*="_content_"] { color: #efe6cf; }
/* right-aligned (default) user messages: mirror the sweep, edge bar and name-plate rule */
[data-component="BubbleMessage"][data-part="user"]:not([class*="_userLeft_"]) {
background-image:
linear-gradient(270deg, rgba(184, 154, 94, .20), rgba(10, 10, 8, 0) 78%),
url(./assets/sky-grain.svg),
linear-gradient(180deg, rgba(20, 18, 13, .94), rgba(8, 8, 6, .96));
box-shadow: 0 0 0 1px rgba(184, 154, 94, .34), 0 0 0 2px #000, inset -3px 0 0 #b89a5e, 0 10px 26px rgba(0, 0, 0, .5);
}
[data-component="BubbleMessage"][data-part="user"]:not([class*="_userLeft_"]) [class*="_header_"] {
background:
url(./assets/sky-ornament-sm.svg) right bottom / 48px 8px no-repeat,
linear-gradient(270deg, rgba(184, 154, 94, .5), transparent 82%) left bottom 3.5px / 100% 1px no-repeat;
}
/* --- swipe controls: Skyrim arrows ------------------------------------------- */
[data-component="SwipeControls"] [class*="_btn_"] {
border-radius: 0;
background: rgba(0, 0, 0, .45);
border-color: rgba(217, 223, 225, .30);
color: #cfd5d4;
}
[data-component="SwipeControls"] [class*="_btn_"]:hover:not(:disabled) { color: #ffffff; border-color: rgba(244, 246, 245, .7); background: var(--sky-sweep); }
[data-component="SwipeControls"] [class*="_counter_"] { font-family: var(--sky-display); letter-spacing: .14em; color: #aab2b1; }
/* 12. SKYRIM ICONS: in-place glyph swap ------------------------------------
Every icon in Lumiverse is an inline SVG. Its drawing is hidden and the svg
box is repainted from an engraved mask (currentColor), so size, position and
hover/active colours are untouched and the rail alignment is unchanged.
Rail tabs are matched by data-tab-id (stable), everything else by the
rendered Lucide class (resolved from lucide-react 0.468 aliases).
Icons not listed here keep their default Lucide drawing. */
svg.lucide-arrow-down,
svg.lucide-arrow-up,
svg.lucide-arrow-up-down,
svg.lucide-book-open,
svg.lucide-bookmark,
svg.lucide-brain,
svg.lucide-check,
svg.lucide-chevron-down,
svg.lucide-chevron-left,
svg.lucide-chevron-right,
svg.lucide-chevron-up,
svg.lucide-circle-check-big,
svg.lucide-circle-help,
svg.lucide-circle-x,
svg.lucide-clock,
svg.lucide-copy,
svg.lucide-database,
svg.lucide-download,
svg.lucide-drama,
svg.lucide-ellipsis,
svg.lucide-ellipsis-vertical,
svg.lucide-external-link,
svg.lucide-eye,
svg.lucide-eye-off,
svg.lucide-feather,
svg.lucide-file-text,
svg.lucide-filter,
svg.lucide-folder,
svg.lucide-folder-open,
svg.lucide-git-branch,
svg.lucide-globe,
svg.lucide-grip-vertical,
svg.lucide-heart,
svg.lucide-history,
svg.lucide-image,
svg.lucide-info,
svg.lucide-key-round,
svg.lucide-layers,
svg.lucide-library,
svg.lucide-link,
svg.lucide-link2,
svg.lucide-lock,
svg.lucide-maximize2,
svg.lucide-menu,
svg.lucide-message-square,
svg.lucide-minimize2,
svg.lucide-package,
svg.lucide-palette,
svg.lucide-pen,
svg.lucide-pen-tool,
svg.lucide-pencil,
svg.lucide-plus,
svg.lucide-puzzle,
svg.lucide-refresh-cw,
svg.lucide-rotate-ccw,
svg.lucide-save,
svg.lucide-scroll-text,
svg.lucide-search,
svg.lucide-settings,
svg.lucide-settings2,
svg.lucide-smartphone,
svg.lucide-sparkles,
svg.lucide-square,
svg.lucide-square-check-big,
svg.lucide-square-pen,
svg.lucide-star,
svg.lucide-star[fill="currentColor"],
svg.lucide-tag,
svg.lucide-tags,
svg.lucide-trash,
svg.lucide-trash2,
svg.lucide-triangle-alert,
svg.lucide-upload,
svg.lucide-user,
svg.lucide-users,
svg.lucide-wallpaper,
svg.lucide-wand-sparkles,
svg.lucide-x,
svg.lucide-zap,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="profile"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="presets"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="loom"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="weaver"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="connections"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="browser"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="characters"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="personas"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="multiplayer"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="lorebook"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="cortex"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="databank"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="create"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="prompt"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="council"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="summary"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="worldinfo"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="imagegen"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="wallpaper"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="regex"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="branches"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="theme"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="spindle"] > svg,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id*=":tab:tapestry:"] svg {
background-color: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
svg.lucide-arrow-down > *,
svg.lucide-arrow-up > *,
svg.lucide-arrow-up-down > *,
svg.lucide-book-open > *,
svg.lucide-bookmark > *,
svg.lucide-brain > *,
svg.lucide-check > *,
svg.lucide-chevron-down > *,
svg.lucide-chevron-left > *,
svg.lucide-chevron-right > *,
svg.lucide-chevron-up > *,
svg.lucide-circle-check-big > *,
svg.lucide-circle-help > *,
svg.lucide-circle-x > *,
svg.lucide-clock > *,
svg.lucide-copy > *,
svg.lucide-database > *,
svg.lucide-download > *,
svg.lucide-drama > *,
svg.lucide-ellipsis > *,
svg.lucide-ellipsis-vertical > *,
svg.lucide-external-link > *,
svg.lucide-eye > *,
svg.lucide-eye-off > *,
svg.lucide-feather > *,
svg.lucide-file-text > *,
svg.lucide-filter > *,
svg.lucide-folder > *,
svg.lucide-folder-open > *,
svg.lucide-git-branch > *,
svg.lucide-globe > *,
svg.lucide-grip-vertical > *,
svg.lucide-heart > *,
svg.lucide-history > *,
svg.lucide-image > *,
svg.lucide-info > *,
svg.lucide-key-round > *,
svg.lucide-layers > *,
svg.lucide-library > *,
svg.lucide-link > *,
svg.lucide-link2 > *,
svg.lucide-lock > *,
svg.lucide-maximize2 > *,
svg.lucide-menu > *,
svg.lucide-message-square > *,
svg.lucide-minimize2 > *,
svg.lucide-package > *,
svg.lucide-palette > *,
svg.lucide-pen > *,
svg.lucide-pen-tool > *,
svg.lucide-pencil > *,
svg.lucide-plus > *,
svg.lucide-puzzle > *,
svg.lucide-refresh-cw > *,
svg.lucide-rotate-ccw > *,
svg.lucide-save > *,
svg.lucide-scroll-text > *,
svg.lucide-search > *,
svg.lucide-settings > *,
svg.lucide-settings2 > *,
svg.lucide-smartphone > *,
svg.lucide-sparkles > *,
svg.lucide-square > *,
svg.lucide-square-check-big > *,
svg.lucide-square-pen > *,
svg.lucide-star > *,
svg.lucide-star[fill="currentColor"] > *,
svg.lucide-tag > *,
svg.lucide-tags > *,
svg.lucide-trash > *,
svg.lucide-trash2 > *,
svg.lucide-triangle-alert > *,
svg.lucide-upload > *,
svg.lucide-user > *,
svg.lucide-users > *,
svg.lucide-wallpaper > *,
svg.lucide-wand-sparkles > *,
svg.lucide-x > *,
svg.lucide-zap > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="profile"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="presets"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="loom"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="weaver"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="connections"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="browser"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="characters"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="personas"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="multiplayer"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="lorebook"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="cortex"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="databank"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="create"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="prompt"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="council"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="summary"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="worldinfo"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="imagegen"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="wallpaper"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="regex"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="branches"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="theme"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="spindle"] > svg > *,
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id*=":tab:tapestry:"] svg > * { display: none; }
svg.lucide-arrow-down { -webkit-mask-image: url(./assets/ico-arrow-down.svg); mask-image: url(./assets/ico-arrow-down.svg); }
svg.lucide-arrow-up { -webkit-mask-image: url(./assets/ico-arrow-up.svg); mask-image: url(./assets/ico-arrow-up.svg); }
svg.lucide-arrow-up-down { -webkit-mask-image: url(./assets/ico-updown.svg); mask-image: url(./assets/ico-updown.svg); }
svg.lucide-book-open { -webkit-mask-image: url(./assets/ico-book.svg); mask-image: url(./assets/ico-book.svg); }
svg.lucide-bookmark { -webkit-mask-image: url(./assets/ico-bookmark.svg); mask-image: url(./assets/ico-bookmark.svg); }
svg.lucide-brain { -webkit-mask-image: url(./assets/ico-scroll.svg); mask-image: url(./assets/ico-scroll.svg); }
svg.lucide-check { -webkit-mask-image: url(./assets/ico-check.svg); mask-image: url(./assets/ico-check.svg); }
svg.lucide-chevron-down { -webkit-mask-image: url(./assets/ico-chev-down.svg); mask-image: url(./assets/ico-chev-down.svg); }
svg.lucide-chevron-left { -webkit-mask-image: url(./assets/ico-chev-left.svg); mask-image: url(./assets/ico-chev-left.svg); }
svg.lucide-chevron-right { -webkit-mask-image: url(./assets/ico-chev-right.svg); mask-image: url(./assets/ico-chev-right.svg); }
svg.lucide-chevron-up { -webkit-mask-image: url(./assets/ico-chev-up.svg); mask-image: url(./assets/ico-chev-up.svg); }
svg.lucide-circle-check-big { -webkit-mask-image: url(./assets/ico-circle-check.svg); mask-image: url(./assets/ico-circle-check.svg); }
svg.lucide-circle-help { -webkit-mask-image: url(./assets/ico-help.svg); mask-image: url(./assets/ico-help.svg); }
svg.lucide-circle-x { -webkit-mask-image: url(./assets/ico-circle-x.svg); mask-image: url(./assets/ico-circle-x.svg); }
svg.lucide-clock { -webkit-mask-image: url(./assets/ico-clock.svg); mask-image: url(./assets/ico-clock.svg); }
svg.lucide-copy { -webkit-mask-image: url(./assets/ico-copy.svg); mask-image: url(./assets/ico-copy.svg); }
svg.lucide-database { -webkit-mask-image: url(./assets/ico-tomes.svg); mask-image: url(./assets/ico-tomes.svg); }
svg.lucide-download { -webkit-mask-image: url(./assets/ico-download.svg); mask-image: url(./assets/ico-download.svg); }
svg.lucide-drama { -webkit-mask-image: url(./assets/ico-mask.svg); mask-image: url(./assets/ico-mask.svg); }
svg.lucide-ellipsis { -webkit-mask-image: url(./assets/ico-more-h.svg); mask-image: url(./assets/ico-more-h.svg); }
svg.lucide-ellipsis-vertical { -webkit-mask-image: url(./assets/ico-more-v.svg); mask-image: url(./assets/ico-more-v.svg); }
svg.lucide-external-link { -webkit-mask-image: url(./assets/ico-external.svg); mask-image: url(./assets/ico-external.svg); }
svg.lucide-eye { -webkit-mask-image: url(./assets/ico-eye.svg); mask-image: url(./assets/ico-eye.svg); }
svg.lucide-eye-off { -webkit-mask-image: url(./assets/ico-eye-off.svg); mask-image: url(./assets/ico-eye-off.svg); }
svg.lucide-feather { -webkit-mask-image: url(./assets/ico-quill.svg); mask-image: url(./assets/ico-quill.svg); }
svg.lucide-file-text { -webkit-mask-image: url(./assets/ico-parchment.svg); mask-image: url(./assets/ico-parchment.svg); }
svg.lucide-filter { -webkit-mask-image: url(./assets/ico-filter.svg); mask-image: url(./assets/ico-filter.svg); }
svg.lucide-folder { -webkit-mask-image: url(./assets/ico-folder.svg); mask-image: url(./assets/ico-folder.svg); }
svg.lucide-folder-open { -webkit-mask-image: url(./assets/ico-folder.svg); mask-image: url(./assets/ico-folder.svg); }
svg.lucide-git-branch { -webkit-mask-image: url(./assets/ico-tree.svg); mask-image: url(./assets/ico-tree.svg); }
svg.lucide-globe { -webkit-mask-image: url(./assets/ico-compass.svg); mask-image: url(./assets/ico-compass.svg); }
svg.lucide-grip-vertical { -webkit-mask-image: url(./assets/ico-grip.svg); mask-image: url(./assets/ico-grip.svg); }
svg.lucide-heart { -webkit-mask-image: url(./assets/ico-heart.svg); mask-image: url(./assets/ico-heart.svg); }
svg.lucide-history { -webkit-mask-image: url(./assets/ico-clock.svg); mask-image: url(./assets/ico-clock.svg); }
svg.lucide-image { -webkit-mask-image: url(./assets/ico-painting.svg); mask-image: url(./assets/ico-painting.svg); }
svg.lucide-info { -webkit-mask-image: url(./assets/ico-info.svg); mask-image: url(./assets/ico-info.svg); }
svg.lucide-key-round { -webkit-mask-image: url(./assets/ico-key.svg); mask-image: url(./assets/ico-key.svg); }
svg.lucide-layers { -webkit-mask-image: url(./assets/ico-layers.svg); mask-image: url(./assets/ico-layers.svg); }
svg.lucide-library { -webkit-mask-image: url(./assets/ico-tomes.svg); mask-image: url(./assets/ico-tomes.svg); }
svg.lucide-link { -webkit-mask-image: url(./assets/ico-links.svg); mask-image: url(./assets/ico-links.svg); }
svg.lucide-link2 { -webkit-mask-image: url(./assets/ico-links.svg); mask-image: url(./assets/ico-links.svg); }
svg.lucide-lock { -webkit-mask-image: url(./assets/ico-lock.svg); mask-image: url(./assets/ico-lock.svg); }
svg.lucide-maximize2 { -webkit-mask-image: url(./assets/ico-maximize.svg); mask-image: url(./assets/ico-maximize.svg); }
svg.lucide-menu { -webkit-mask-image: url(./assets/ico-menu.svg); mask-image: url(./assets/ico-menu.svg); }
svg.lucide-message-square { -webkit-mask-image: url(./assets/ico-message.svg); mask-image: url(./assets/ico-message.svg); }
svg.lucide-minimize2 { -webkit-mask-image: url(./assets/ico-minimize.svg); mask-image: url(./assets/ico-minimize.svg); }
svg.lucide-package { -webkit-mask-image: url(./assets/ico-chest.svg); mask-image: url(./assets/ico-chest.svg); }
svg.lucide-palette { -webkit-mask-image: url(./assets/ico-shield.svg); mask-image: url(./assets/ico-shield.svg); }
svg.lucide-pen { -webkit-mask-image: url(./assets/ico-pencil.svg); mask-image: url(./assets/ico-pencil.svg); }
svg.lucide-pen-tool { -webkit-mask-image: url(./assets/ico-hammer.svg); mask-image: url(./assets/ico-hammer.svg); }
svg.lucide-pencil { -webkit-mask-image: url(./assets/ico-pencil.svg); mask-image: url(./assets/ico-pencil.svg); }
svg.lucide-plus { -webkit-mask-image: url(./assets/ico-plus.svg); mask-image: url(./assets/ico-plus.svg); }
svg.lucide-puzzle { -webkit-mask-image: url(./assets/ico-amulet.svg); mask-image: url(./assets/ico-amulet.svg); }
svg.lucide-refresh-cw { -webkit-mask-image: url(./assets/ico-refresh.svg); mask-image: url(./assets/ico-refresh.svg); }
svg.lucide-rotate-ccw { -webkit-mask-image: url(./assets/ico-rotate.svg); mask-image: url(./assets/ico-rotate.svg); }
svg.lucide-save { -webkit-mask-image: url(./assets/ico-save.svg); mask-image: url(./assets/ico-save.svg); }
svg.lucide-scroll-text { -webkit-mask-image: url(./assets/ico-journal.svg); mask-image: url(./assets/ico-journal.svg); }
svg.lucide-search { -webkit-mask-image: url(./assets/ico-search.svg); mask-image: url(./assets/ico-search.svg); }
svg.lucide-settings { -webkit-mask-image: url(./assets/ico-cog.svg); mask-image: url(./assets/ico-cog.svg); }
svg.lucide-settings2 { -webkit-mask-image: url(./assets/ico-settings2.svg); mask-image: url(./assets/ico-settings2.svg); }
svg.lucide-smartphone { -webkit-mask-image: url(./assets/ico-phone.svg); mask-image: url(./assets/ico-phone.svg); }
svg.lucide-sparkles { -webkit-mask-image: url(./assets/ico-sparkles.svg); mask-image: url(./assets/ico-sparkles.svg); }
svg.lucide-square { -webkit-mask-image: url(./assets/ico-square.svg); mask-image: url(./assets/ico-square.svg); }
svg.lucide-square-check-big { -webkit-mask-image: url(./assets/ico-square-check.svg); mask-image: url(./assets/ico-square-check.svg); }
svg.lucide-square-pen { -webkit-mask-image: url(./assets/ico-pencil.svg); mask-image: url(./assets/ico-pencil.svg); }
svg.lucide-star { -webkit-mask-image: url(./assets/ico-star.svg); mask-image: url(./assets/ico-star.svg); }
svg.lucide-star[fill="currentColor"] { -webkit-mask-image: url(./assets/ico-star-fill.svg); mask-image: url(./assets/ico-star-fill.svg); }
svg.lucide-tag { -webkit-mask-image: url(./assets/ico-tag.svg); mask-image: url(./assets/ico-tag.svg); }
svg.lucide-tags { -webkit-mask-image: url(./assets/ico-tag.svg); mask-image: url(./assets/ico-tag.svg); }
svg.lucide-trash { -webkit-mask-image: url(./assets/ico-trash.svg); mask-image: url(./assets/ico-trash.svg); }
svg.lucide-trash2 { -webkit-mask-image: url(./assets/ico-trash.svg); mask-image: url(./assets/ico-trash.svg); }
svg.lucide-triangle-alert { -webkit-mask-image: url(./assets/ico-alert.svg); mask-image: url(./assets/ico-alert.svg); }
svg.lucide-upload { -webkit-mask-image: url(./assets/ico-upload.svg); mask-image: url(./assets/ico-upload.svg); }
svg.lucide-user { -webkit-mask-image: url(./assets/ico-user.svg); mask-image: url(./assets/ico-user.svg); }
svg.lucide-users { -webkit-mask-image: url(./assets/ico-busts.svg); mask-image: url(./assets/ico-busts.svg); }
svg.lucide-wallpaper { -webkit-mask-image: url(./assets/ico-mountains.svg); mask-image: url(./assets/ico-mountains.svg); }
svg.lucide-wand-sparkles { -webkit-mask-image: url(./assets/ico-flame.svg); mask-image: url(./assets/ico-flame.svg); }
svg.lucide-x { -webkit-mask-image: url(./assets/ico-x.svg); mask-image: url(./assets/ico-x.svg); }
svg.lucide-zap { -webkit-mask-image: url(./assets/ico-zap.svg); mask-image: url(./assets/ico-zap.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="profile"] > svg { -webkit-mask-image: url(./assets/ico-helm.svg); mask-image: url(./assets/ico-helm.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="presets"] > svg { -webkit-mask-image: url(./assets/ico-flame.svg); mask-image: url(./assets/ico-flame.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="loom"] > svg { -webkit-mask-image: url(./assets/ico-anvil.svg); mask-image: url(./assets/ico-anvil.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="weaver"] > svg { -webkit-mask-image: url(./assets/ico-quill.svg); mask-image: url(./assets/ico-quill.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="connections"] > svg { -webkit-mask-image: url(./assets/ico-links.svg); mask-image: url(./assets/ico-links.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="browser"] > svg { -webkit-mask-image: url(./assets/ico-chest.svg); mask-image: url(./assets/ico-chest.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="characters"] > svg { -webkit-mask-image: url(./assets/ico-busts.svg); mask-image: url(./assets/ico-busts.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="personas"] > svg { -webkit-mask-image: url(./assets/ico-mask.svg); mask-image: url(./assets/ico-mask.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="multiplayer"] > svg { -webkit-mask-image: url(./assets/ico-swords.svg); mask-image: url(./assets/ico-swords.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="lorebook"] > svg { -webkit-mask-image: url(./assets/ico-book.svg); mask-image: url(./assets/ico-book.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="cortex"] > svg { -webkit-mask-image: url(./assets/ico-scroll.svg); mask-image: url(./assets/ico-scroll.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="databank"] > svg { -webkit-mask-image: url(./assets/ico-tomes.svg); mask-image: url(./assets/ico-tomes.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="create"] > svg { -webkit-mask-image: url(./assets/ico-hammer.svg); mask-image: url(./assets/ico-hammer.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="prompt"] > svg { -webkit-mask-image: url(./assets/ico-parchment.svg); mask-image: url(./assets/ico-parchment.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="council"] > svg { -webkit-mask-image: url(./assets/ico-crown.svg); mask-image: url(./assets/ico-crown.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="summary"] > svg { -webkit-mask-image: url(./assets/ico-journal.svg); mask-image: url(./assets/ico-journal.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="worldinfo"] > svg { -webkit-mask-image: url(./assets/ico-compass.svg); mask-image: url(./assets/ico-compass.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="imagegen"] > svg { -webkit-mask-image: url(./assets/ico-painting.svg); mask-image: url(./assets/ico-painting.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="wallpaper"] > svg { -webkit-mask-image: url(./assets/ico-mountains.svg); mask-image: url(./assets/ico-mountains.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="regex"] > svg { -webkit-mask-image: url(./assets/ico-rune.svg); mask-image: url(./assets/ico-rune.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="branches"] > svg { -webkit-mask-image: url(./assets/ico-tree.svg); mask-image: url(./assets/ico-tree.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="theme"] > svg { -webkit-mask-image: url(./assets/ico-shield.svg); mask-image: url(./assets/ico-shield.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id="spindle"] > svg { -webkit-mask-image: url(./assets/ico-amulet.svg); mask-image: url(./assets/ico-amulet.svg); }
[data-lumiverse-surface="viewport-drawer"] [class*="_sidebar_"] [data-tab-id*=":tab:tapestry:"] svg { -webkit-mask-image: url(./assets/ico-weave.svg); mask-image: url(./assets/ico-weave.svg); }
/* 11. MOTION PREFERENCES ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* ========================================================================
13. DIALOGUE REFORGED — v7
Full message-system redesign, based on Lumiverse's observed DOM:
BubbleMessage > _card_ > _bubble_ > _header_ / _content_
Avatar is inside _headerLeft_ > _avatar_. Keep layout flow intact;
paint and local sizing only. The chat wallpaper remains user-owned.
======================================================================== */
:root {
--sky-dialogue-steel: rgba(184, 202, 207, .48);
--sky-dialogue-steel-soft: rgba(184, 202, 207, .18);
--sky-dialogue-brass: #b89a5e;
--sky-dialogue-ivory: #e8e2d3;
--sky-dialogue-blue: #b9d4dc;
}
/* Chat stage: never paint a full-screen wallpaper or opaque canvas. */
[data-component="ChatView"],
[data-component="ChatView"] [data-lumiverse-surface="chat-body"],
[data-component="ChatView"] [data-lumiverse-surface="chat-column"],
[data-component="ChatView"] [data-lumiverse-surface="chat-column-inner"] {
background-color: transparent !important;
}
[data-component="ChatView"] [class*="_chatToolbar_"] {
background: linear-gradient(180deg, rgba(12,16,18,.94), rgba(5,8,9,.88)) !important;
border: 1px solid rgba(184,202,207,.28) !important;
border-radius: 2px !important;
box-shadow: inset 0 1px rgba(255,255,255,.07), 0 5px 18px rgba(0,0,0,.32) !important;
}
/* Each message is a forged dialogue plaque, not a rounded web bubble. */
[data-component="BubbleMessage"] {
position: relative !important;
isolation: isolate;
overflow: visible !important;
border-radius: 2px !important;
margin-block: 16px !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
[data-component="BubbleMessage"] > [class*="_avatarBg_"] { display: none !important; }
[data-component="BubbleMessage"] > [class*="_bubble_"] {
position: relative !important;
overflow: visible !important;
min-width: 0;
padding: 17px 20px 19px !important;
border: 1px solid rgba(184,202,207,.42) !important;
border-radius: 2px !important;
background:
url(./assets/sky-corner-tl.svg) left 5px top 5px / 22px 22px no-repeat,
url(./assets/sky-corner-tr.svg) right 5px top 5px / 22px 22px no-repeat,
url(./assets/sky-corner-bl.svg) left 5px bottom 5px / 22px 22px no-repeat,
url(./assets/sky-corner-br.svg) right 5px bottom 5px / 22px 22px no-repeat,
url(./assets/sky-grain.svg) 0 0 / 180px 180px repeat,
linear-gradient(155deg, rgba(27,35,38,.97), rgba(8,12,14,.97) 68%, rgba(5,8,9,.98)) !important;
box-shadow: inset 0 1px rgba(255,255,255,.075), inset 0 0 0 3px rgba(0,0,0,.22), 0 10px 28px rgba(0,0,0,.38) !important;
}
[data-component="BubbleMessage"] > [class*="_bubble_"]::before {
content: "";
position: absolute;
z-index: 0;
pointer-events: none;
inset: -4px;
border: 1px solid rgba(0,0,0,.78);
box-shadow: 0 0 0 1px rgba(184,202,207,.12);
}
[data-component="BubbleMessage"] [class*="_header_"] {
position: relative !important;
z-index: 1;
display: flex;
align-items: center !important;
min-height: 58px;
padding: 0 0 12px !important;
margin: 0 0 13px !important;
border: 0 !important;
background:
url(./assets/sky-ornament-sm.svg) left bottom 1px / 64px 9px no-repeat,
linear-gradient(90deg, rgba(184,202,207,.48), rgba(184,202,207,.12) 55%, transparent) left bottom 4px / 100% 1px no-repeat !important;
}
[data-component="BubbleMessage"] [class*="_headerLeft_"] {
display: flex !important;
align-items: center !important;
gap: 13px !important;
min-width: 0;
}
/* Portrait: a framed character token with layered steel + brass keylines. */
[data-component="BubbleMessage"] [class*="_avatar_"] {
position: relative !important;
flex: 0 0 66px !important;
width: 66px !important;
height: 66px !important;
min-width: 66px !important;
border: 1px solid rgba(194,207,208,.72) !important;
border-radius: 1px !important;
padding: 3px !important;
overflow: visible !important;
background: linear-gradient(135deg,#66777a,#151c1f 42%,#070a0b) !important;
box-shadow: 0 0 0 1px #030506, 0 0 0 2px rgba(184,202,207,.25), inset 0 0 0 1px rgba(255,255,255,.12), 0 5px 14px rgba(0,0,0,.55) !important;
}
[data-component="BubbleMessage"] [class*="_avatar_"]::before {
content: "";
position: absolute;
inset: -5px;
pointer-events: none;
background:
linear-gradient(var(--sky-dialogue-brass),var(--sky-dialogue-brass)) left top / 11px 1px no-repeat,
linear-gradient(var(--sky-dialogue-brass),var(--sky-dialogue-brass)) left top / 1px 11px no-repeat,
linear-gradient(var(--sky-dialogue-brass),var(--sky-dialogue-brass)) right bottom / 11px 1px no-repeat,
linear-gradient(var(--sky-dialogue-brass),var(--sky-dialogue-brass)) right bottom / 1px 11px no-repeat;
opacity: .8;
}
[data-component="BubbleMessage"] [class*="_avatar_"] img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 0 !important;
filter: saturate(.88) contrast(1.06);
}
[data-component="BubbleMessage"] [class*="_metaWrap_"] {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px !important;
min-width: 0;
}
[data-component="BubbleMessage"] [class*="_name_"],
[data-component="BubbleMessage"] [class*="_nameChar_"],
[data-component="BubbleMessage"] [class*="_nameUser_"] {
font-family: var(--sky-display) !important;
font-size: 14px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
color: var(--sky-dialogue-blue) !important;
-webkit-text-fill-color: var(--sky-dialogue-blue) !important;
text-shadow: 0 1px 4px #000 !important;
}
[data-component="BubbleMessage"] [class*="_name_"]::before { content: none !important; }
[data-component="BubbleMessage"] [class*="_metaPill_"] {
display: inline-flex !important;
align-items: center;
min-height: 18px;
padding: 2px 8px !important;
border: 1px solid rgba(184,202,207,.24) !important;
border-radius: 12px !important;
background: rgba(0,0,0,.28) !important;
color: #aab5b4 !important;
font-family: var(--sky-ui) !important;
font-size: 9px !important;
letter-spacing: .12em !important;
text-transform: uppercase;
}
/* Character dialogue: cool steel, subtle blue speaker identity. */
[data-component="BubbleMessage"][data-part="character"] > [class*="_bubble_"] {
border-color: rgba(160,190,199,.48) !important;
background-color: rgba(8,13,15,.96) !important;
}
[data-component="BubbleMessage"][data-part="character"] [class*="_name_"] { color: #c1dce4 !important; -webkit-text-fill-color: #c1dce4 !important; }
[data-component="BubbleMessage"][data-part="character"] [class*="_avatar_"] { border-color: rgba(180,207,215,.82) !important; }
/* User dialogue: warm brass edge, parchment-tinted plate, same geometry. */
[data-component="BubbleMessage"][data-part="user"] > [class*="_bubble_"] {
border-color: rgba(184,154,94,.62) !important;
background:
url(./assets/sky-corner-tl.svg) left 5px top 5px / 20px 20px no-repeat,
url(./assets/sky-corner-tr.svg) right 5px top 5px / 20px 20px no-repeat,
url(./assets/sky-corner-bl.svg) left 5px bottom 5px / 20px 20px no-repeat,
url(./assets/sky-corner-br.svg) right 5px bottom 5px / 20px 20px no-repeat,
linear-gradient(90deg, rgba(184,154,94,.13), transparent 72%),
url(./assets/sky-grain.svg) 0 0 / 180px 180px repeat,
linear-gradient(155deg, rgba(30,26,18,.97), rgba(10,10,8,.98)) !important;
box-shadow: inset 3px 0 0 rgba(184,154,94,.78), inset 0 1px rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.4) !important;
}
[data-component="BubbleMessage"][data-part="user"] [class*="_name_"] { color: #e0c78e !important; -webkit-text-fill-color: #e0c78e !important; }
[data-component="BubbleMessage"][data-part="user"] [class*="_avatar_"] { border-color: rgba(205,177,112,.85) !important; }
[data-component="BubbleMessage"][data-part="user"] [class*="_header_"] {
background:
url(./assets/sky-ornament-sm.svg) left bottom / 64px 9px no-repeat,
linear-gradient(90deg, rgba(184,154,94,.52), rgba(184,154,94,.12) 58%, transparent) left bottom 4px / 100% 1px no-repeat !important;
}
/* Text: readable roleplay typography with controlled measure and rhythm. */
[data-component="MessageContent"] { position: relative; z-index: 1; color: #e5e2d9 !important; }
[data-component="MessageContent"] [class*="_prose_"] {
max-width: 100%;
color: #e5e2d9 !important;
font-family: var(--sky-ui) !important;
font-size: 13px !important;
line-height: 1.78 !important;
letter-spacing: .012em;
text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
[data-component="MessageContent"] [class*="_prose_"] p { margin: 0 0 12px !important; }
[data-component="MessageContent"] [class*="_prose_"] p:last-child { margin-bottom: 0 !important; }
[data-component="MessageContent"] [class*="_proseDialogue_"] { color: #d6c18f; }
[data-component="MessageContent"] strong, [data-component="MessageContent"] b { color: #f0eadc !important; }
[data-component="MessageContent"] em, [data-component="MessageContent"] i { color: #c9bd9d !important; }
[data-component="MessageContent"] blockquote {
margin: 14px 0 !important;
padding: 10px 14px !important;
border-inline-start: 2px solid #a88c56 !important;
background: rgba(184,154,94,.075) !important;
color: #d4c9ae !important;
}
[data-component="MessageContent"] hr {
height: 18px !important;
border: 0 !important;
margin: 22px 0 !important;
background: url(./assets/sky-ornament-lg.svg) center / 190px 15px no-repeat, linear-gradient(90deg,transparent,rgba(184,202,207,.32),transparent) center / 100% 1px no-repeat !important;
}
[data-component="MessageContent"] img {
max-width: min(100%, 760px) !important;
height: auto !important;
border: 1px solid rgba(184,202,207,.52) !important;
outline: 1px solid rgba(0,0,0,.85);
outline-offset: 3px;
box-shadow: 0 9px 24px rgba(0,0,0,.48) !important;
}
[data-component="MessageContent"] :not(pre) > code { color: #c7dce0 !important; background: rgba(0,0,0,.42) !important; }
[data-component="MessageContent"] pre { background: rgba(3,6,7,.82) !important; border: 1px solid rgba(184,202,207,.22) !important; }
/* Reasoning / thought indicator becomes a small rune-stamped disclosure. */
[data-component="BubbleMessage"] [data-reasoning-toggle="true"] {
min-height: 26px !important;
padding: 4px 10px !important;
border: 1px solid rgba(184,202,207,.27) !important;
border-radius: 2px !important;
background: linear-gradient(180deg,rgba(40,49,51,.9),rgba(12,16,17,.92)) !important;
color: #b9c6c5 !important;
font-family: var(--sky-ui) !important;
font-size: 10px !important;
letter-spacing: .08em !important;
text-transform: uppercase;
}
[data-component="BubbleMessage"] [data-reasoning-toggle="true"] svg { width: 13px !important; height: 13px !important; color: #c6a968 !important; }
/* Message action strip: discreet, square, engraved controls. */
[data-component="BubbleActions"] {
border: 1px solid rgba(184,202,207,.25) !important;
border-radius: 2px !important;
background: rgba(5,8,9,.94) !important;
box-shadow: 0 5px 16px rgba(0,0,0,.45) !important;
}
[data-component="BubbleActions"] button { border-radius: 1px !important; color: #aebcbd !important; }
[data-component="BubbleActions"] button:hover { background: rgba(184,202,207,.14) !important; color: #fff !important; }
[data-component="SwipeControls"] [class*="_btn_"] { border-radius: 1px !important; }
/* Composer: a low-profile command console / dialogue response plate. */
[data-component="InputArea"] {
border: 1px solid rgba(184,202,207,.32) !important;
border-radius: 2px !important;
background:
url(./assets/sky-corner-tl.svg) left 4px top 4px / 16px 16px no-repeat,
url(./assets/sky-corner-tr.svg) right 4px top 4px / 16px 16px no-repeat,
linear-gradient(180deg,rgba(18,24,26,.97),rgba(5,8,9,.98)) !important;
box-shadow: inset 0 1px rgba(255,255,255,.06), 0 -8px 26px rgba(0,0,0,.24) !important;
}
[data-component="InputArea"] [class*="_inputWrapper_"] {
border: 1px solid rgba(184,202,207,.28) !important;
border-radius: 1px !important;
background: rgba(0,0,0,.42) !important;
box-shadow: inset 0 2px 8px rgba(0,0,0,.48) !important;
}
[data-component="InputArea"] [class*="_textarea_"] { font-family: var(--sky-ui) !important; line-height: 1.55 !important; }
[data-component="InputArea"] [class*="_sendBtn_"] {
border: 1px solid rgba(225,211,172,.72) !important;
border-radius: 1px !important;
color: #17140d !important;
background: linear-gradient(180deg,#e1d1a8,#a98d55) !important;
box-shadow: inset 0 1px rgba(255,255,255,.45), 0 2px 7px rgba(0,0,0,.45) !important;
}
/* Responsive: reduce portrait ornament dimensions on narrow screens. */
@media (max-width: 700px) {
[data-component="BubbleMessage"] { margin-block: 11px !important; }
[data-component="BubbleMessage"] > [class*="_bubble_"] { padding: 13px 13px 15px !important; }
[data-component="BubbleMessage"] [class*="_avatar_"] { flex-basis: 48px !important; width: 48px !important; height: 48px !important; min-width: 48px !important; }
[data-component="BubbleMessage"] [class*="_headerLeft_"] { gap: 10px !important; }
[data-component="MessageContent"] [class*="_prose_"] { font-size: 12px !important; line-height: 1.68 !important; }
}