/* * Diabolic theme for WizardChat, after the DiabolicUI addon. * * Served at /diabolic/diabolic.css from a volume (see docker-compose.yml), * so editing this file only needs a page reload, no rebuild. * * WizardChat is built with readable class names ("File_export__hash", see * ../diabolic-theme.patch). Components are targeted by the stable part, * e.g. [class*="Composer_inputRow__"]. If an upstream update renames an * export, its rule here stops matching: find the new name in the page's * classes with the browser's inspector. * * Everything below is scoped to the theme: WizardChat puts its theme class * on . The images are DiabolicUI's textures (and the art of the searx * diabolic theme), in img/. */ /* ---------- Fonts ---------- */ /* Subset to Latin (see unicode-range); other scripts use the system fonts. */ @font-face { font-family: "Exocet"; src: url("fonts/exocet-medium.woff2") format("woff2"); font-weight: 500 900; font-display: swap; unicode-range: U+0000-024F, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Exocet"; src: url("fonts/exocet-light.woff2") format("woff2"); font-weight: 100 400; font-display: swap; unicode-range: U+0000-024F, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Noto Sans"; src: url("fonts/notosans-regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0000-024F, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Noto Sans"; src: url("fonts/notosans-bold.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; unicode-range: U+0000-024F, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Noto Sans"; src: url("fonts/notosans-italic.woff2") format("woff2"); font-weight: normal; font-style: italic; font-display: swap; unicode-range: U+0000-024F, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Colours ---------- */ /* WizardChat's theme tokens for Diabolic read these variables (the build has the same values as fallbacks). They sit on :root, not in the theme scope, because the theme picker previews them under any theme. */ :root { --dia-bg-primary: #0d0a09; --dia-bg-secondary: #16110f; --dia-bg-tertiary: #221915; --dia-bg-input: #0a0807; --dia-bg-hover: rgba(216, 179, 106, 0.06); --dia-bg-active: rgba(212, 32, 44, 0.18); --dia-accent: #d4202c; --dia-accent-rgb: 212, 32, 44; --dia-accent-hover: #a3111b; --dia-text-primary: #d9cfc1; --dia-text-muted: #9c8a6e; --dia-text-secondary: #7a6c5c; /* The item tooltips' box lines (itemtooltips.lua BOX_BORDER_COLOR): every separator in the app is drawn in it */ --dia-border: #615238; --dia-msg-mine-bg: #3a1412; --dia-msg-other-bg: #221915; --dia-msg-mention-pill: #d8b36a; --dia-msg-mention-pill-rgb: 216, 179, 106; --dia-error: #e04b4b; --dia-danger: #a3111b; --dia-success: #59c959; --dia-bg-accent-glow-1: rgba(163, 17, 27, 0.1); --dia-bg-accent-glow-2: rgba(216, 179, 106, 0.04); --dia-radius-sm: 2px; --dia-radius-md: 4px; --dia-radius-lg: 10px; --dia-font-body: "Noto Sans", "Roboto", sans-serif; /* Used by this file only */ --dia-gold: #d8b36a; --dia-gold-bright: #f0d59a; --dia-bronze: #6b5236; --dia-heading: "Exocet", "Noto Serif", serif; --dia-item-title: #f9ad50; /* The micro menu buttons' size, relative to the game's 61x55 */ --dia-menu-scale: 0.8; } html[class*="themes_diabolicTheme__"] { /* ---------- Basics ---------- */ /* Titles in Exocet, gold, like the addon's frame headers */ & :is(h1, h2, h3) { font-family: var(--dia-heading); font-weight: 500; letter-spacing: 0.04em; color: var(--dia-gold); text-shadow: 0 1px 2px rgb(0 0 0 / 80%); } /* Links read better in gold than in the blood-red accent */ & a { color: var(--dia-gold); } & a:hover { color: var(--dia-gold-bright); } & * { scrollbar-color: var(--dia-bronze) transparent; } & ::-webkit-scrollbar-thumb { background: var(--dia-bronze); } & ::-webkit-scrollbar-thumb:hover { background: var(--dia-gold); } & ::selection { background-color: var(--dia-accent); color: var(--dia-gold-bright); } /* ---------- Tooltip frames ---------- */ /* The in-game tooltip (settings/tooltips.lua): the DiabolicUI_Tooltip_Small edge at edgeSize 32 over black at 95%. tooltip-edge.png is that edge as a 3x3 border-image; its line runs 4 to 8px in, so the border is 8px to hold all of it (content with a background, like the emoji picker's sticky headers, would otherwise cover its inner edge), and a box-shadow (cast from the outer edge) would float outside it: none, as in game. */ & :is( [class*="Tooltip_tooltipPortal__"], [class*="ContextMenu_menu__"], [class*="ContextMenu_menuSubmenu__"], [class*="AutocompleteDropdown_dropdown__"], [class*="EmojiPicker_pickerWrap__"], [class*="ComposerMediaPicker_wrapper__"], [class*="GifPicker_popover__"], [class*="StickerPicker_popover__"], [class*="UserProfilePopup_popup__"], [class*="Timeline_msgActions__"], [class*="Dialog_panel__"], [class*="WelcomePage_container__"], [class*="RoomListPanel_roomListPanel__"], [class*="MembersSidebar_membersSidebar__"], [class*="MembersSidebar_membersSidebarOpen__"], [class*="ThreadPanel_threadPanel__"], [class*="ThreadListPanel_threadListPanel__"] ) { border: 8px solid transparent; border-image: url("img/tooltip-edge.png") 32 / 32px stretch; border-radius: 0; background-color: rgb(0 0 0 / 95%); background-clip: padding-box; box-shadow: none; } /* Hover tooltips */ & [class*="Tooltip_tooltipPortal__"] { padding: 2px 6px; color: #fafafa; font-size: 0.8rem; text-shadow: 0 1px 1px #000; } & [class*="Tooltip_arrow__"] { display: none; } /* Dialogs and the settings window keep the theme's panel colours */ & [class*="Dialog_panel__"] { background-color: var(--dia-bg-secondary); } & [class*="Dialog_panelPrimary__"] { background-color: var(--dia-bg-primary); } /* ---------- Context menus ---------- */ /* DiabolicUI styles the game's right-click menus (DropDownList) as its tooltips: the frame above. Items as in the dropdown lists: the hovered one on a blood-red gradient in gold, icons in gold, danger items red, separators the tooltip's bronze line. */ & :is([class*="ContextMenu_menuItem__"], [class*="ContextMenu_menuItemDanger__"]) { &:hover, &[class*="ContextMenu_menuItemActive__"] { background: linear-gradient(90deg, rgb(110 10 16 / 85%), rgb(110 10 16 / 25%)); color: var(--dia-gold-bright); } &:focus-visible { outline: 1px solid rgb(216 179 106 / 55%); outline-offset: -1px; } } /* The menu itself takes focus for keyboard navigation: no browser ring around the frame (the focused item has its own outline) */ & :is([class*="ContextMenu_menu__"], [class*="ContextMenu_menuSubmenu__"]):focus { outline: none; } & [class*="ContextMenu_menuItemIcon__"] { color: var(--dia-gold); opacity: 0.9; } & [class*="ContextMenu_menuItemDanger__"] { color: #ff6b6b; & [class*="ContextMenu_menuItemIcon__"] { color: inherit; } &:hover, &[class*="ContextMenu_menuItemDangerActive__"] { background: linear-gradient(90deg, rgb(163 17 27 / 90%), rgb(163 17 27 / 30%)); color: #ffd0d0; } } /* Keyboard navigation suppresses the pointer's highlight: only the item the keys are on stays lit */ & [class*="ContextMenu_menuItemDisabled__"]:hover, & [data-suppress-hover="true"] [class*="ContextMenu_menuItem__"]:hover:not([class*="ContextMenu_menuItemActive__"], [class*="ContextMenu_menuItemDangerActive__"]) { background: transparent; color: var(--dia-text-primary); } & [data-suppress-hover="true"] [class*="ContextMenu_menuItemDanger__"]:hover:not([class*="ContextMenu_menuItemDangerActive__"]) { background: transparent; color: #ff6b6b; } & [class*="ContextMenu_menuItemCarat__"] { color: var(--dia-gold); } & [class*="ContextMenu_menuDivider__"] { margin: 4px 8px; } /* ---------- Title banners ---------- */ /* The item tooltip's title (DiabolicUI 1.6.3 itemtooltips.lua): the Tooltip_Header border over near-black, with a glow behind the title. */ & :is( [class*="Dialog_header__"], [class*="Settings_panelTitle__"], [class*="RoomHeader_header__"], [class*="RoomListPanel_roomHeader__"], [class*="MembersSidebar_membersSidebarHeader__"], [class*="ThreadPanel_threadPanelHeader__"], [class*="ThreadListPanel_threadListHeader__"], [class*="ComposerMediaPicker_header__"], [class*="StickerPicker_header__"] ) { border: 3px solid transparent; border-image: url("img/header-edge.png") 32 / 16px stretch; border-radius: 0; background: url("img/title-glow.webp") center / min(100%, 28rem) 100% no-repeat, rgb(20 14 6); background-clip: padding-box; } & [class*="Dialog_header__"] { margin: 4px 4px 0; } & [class*="Settings_panelTitle__"] { padding: 4px 16px; margin-right: 24px; text-align: center; } /* Headers with the title on the left: the glow behind it */ & :is( [class*="RoomHeader_header__"], [class*="ThreadPanel_threadPanelHeader__"], [class*="ThreadListPanel_threadListHeader__"] ) { background: url("img/title-glow.webp") left -2rem center / 24rem 100% no-repeat, rgb(20 14 6); background-clip: padding-box; } /* ---------- Side panels: rooms, members, threads ---------- */ /* Laid out like the Diablo III item tooltip: the frame, the title banner on top, the content in a box of 1px BOX_BORDER_COLOR lines, and the user bar in the footer box (FOOTER_COLOR). A closed members panel keeps no frame (MembersSidebar_membersSidebarClosed is not framed); the thread panels are only there while open. */ & :is( [class*="RoomListPanel_roomListPanel__"], [class*="MembersSidebar_membersSidebar__"], [class*="MembersSidebar_membersSidebarOpen__"], [class*="ThreadPanel_threadPanel__"], [class*="ThreadListPanel_threadListPanel__"] ) { padding: 0; gap: 3px; } & :is( [class*="RoomListPanel_roomHeader__"], [class*="MembersSidebar_membersSidebarHeader__"], [class*="ThreadPanel_threadPanelHeader__"], [class*="ThreadListPanel_threadListHeader__"] ) { padding: 6px 8px 6px 12px; } & :is( [class*="RoomListPanel_roomList__"], [class*="MembersSidebar_membersList__"], [class*="ThreadListPanel_threadListBody__"], [class*="ThreadPanel_threadReplyList__"] ) { border: 1px solid var(--dia-border); } /* Threads: the thread's first message in its own bronze box, like the item tooltip's content box, gold header buttons, thread rows lit like rooms, and the item title's colour for senders */ & [class*="ThreadPanel_threadRootWrap__"] { border: 1px solid var(--dia-border); background-color: rgb(20 14 6 / 60%); } & :is( [class*="ThreadPanel_threadPanelClose__"], [class*="ThreadPanel_threadPanelBack__"], [class*="ThreadListPanel_threadListClose__"] ) { border-radius: 0; color: var(--dia-gold); &:hover { background-color: transparent; color: var(--dia-gold-bright); } } & [class*="ThreadListPanel_threadListItem__"] { &:hover { background-color: rgb(32 18 10 / 60%); box-shadow: inset 0 0 0 1px rgb(216 179 106 / 25%); } } & :is([class*="ThreadPanel_threadRootSender__"], [class*="ThreadListPanel_threadItemSender__"]) { color: var(--dia-item-title); } & [class*="ThreadListPanel_threadItemReplyCount__"] { color: var(--dia-gold); } & [class*="ThreadListPanel_toolbarBtnActive__"] { border-color: rgb(216 179 106 / 55%); border-radius: 0; background-color: rgb(110 10 16 / 35%); color: var(--dia-gold-bright); } & [class*="UserPanel_userPanel__"] { border: 1px solid var(--dia-border); background-color: rgb(26 26 26); } /* Rooms: the warm tint and gold edge of hovered messages; the open one lit */ & [class*="ChatListItem_roomItem__"] { border-radius: 0; } & [class*="ChatListItem_roomItem__"]:hover { background-color: rgb(32 18 10 / 60%); box-shadow: inset 0 0 0 1px rgb(216 179 106 / 25%); } & [class*="ChatListItem_roomItemActive__"] { background-color: rgb(110 10 16 / 35%); box-shadow: inset 0 0 0 1px rgb(216 179 106 / 45%), inset 0 0 14px rgb(212 32 44 / 20%); color: var(--dia-gold-bright); } /* ---------- Login ---------- */ & [class*="WelcomePage_container__"] { position: relative; } /* The angel and the demon perch on the card's top corners, as on the searx front page */ & [class*="WelcomePage_container__"]::before { content: ""; position: absolute; top: calc(-7rem + 0.6rem); left: -1.2rem; right: -1.2rem; height: 7rem; background: url("img/angel.webp") left bottom / auto 80% no-repeat, url("img/demon.webp") right bottom / auto 100% no-repeat; filter: brightness(1.5) drop-shadow(0 0 10px rgb(255 170 90 / 35%)) drop-shadow(0 4px 6px #000); pointer-events: none; } & [class*="WelcomePage_page__"] { padding-top: 8rem; } /* ---------- Buttons ---------- */ /* DiabolicUI's button bar as a 9-slice: the ornate caps (56px of the 336x66 texture) keep their shape and only the bar stretches. Ghost buttons stay plain. */ & :is( [class*="Button_primary_"], [class*="Button_secondary_"], [class*="Button_danger_"], [class*="Button_success_"], [class*="GifPicker_consentBtn__"], [class*="ExploreModal_joinBtn__"], [class*="ExploreModal_pageBtn__"] ) { border-style: solid; border-color: transparent; border-width: 0; border-image: url("img/button.webp") 16 56 fill / 10px 34px stretch; border-radius: 0; background-color: transparent; padding-left: 34px; padding-right: 34px; min-height: 38px; color: var(--dia-gold); font-family: var(--dia-heading); letter-spacing: 0.04em; text-shadow: 0 1px 2px #000; &:hover:not(:disabled) { border-image-source: url("img/button-hover.webp"); background-color: transparent; color: var(--dia-gold-bright); opacity: 1; } &:active:not(:disabled) { transform: translateY(1px); } } & [class*="Button_danger_"] { color: #ff6b6b; &:hover:not(:disabled) { color: #ff9090; } } & [class*="Button_success_"] { color: #59c959; } /* The framed buttons are wider than upstream's: let rows of them wrap */ & [class*="ClientLayout_welcomeActions__"] { flex-wrap: wrap; justify-content: center; } /* ---------- Dropdowns ---------- */ /* DiabolicUI's target frame (select-frame*.webp, 318x57) as a 9-slice at 0.6x, over its backdrop, with a gold arrow (as in searx). */ & select { box-sizing: border-box; min-width: 10rem; height: 2.6rem; padding: 0 1.2rem 0 0.25rem; border-style: solid; border-color: transparent; border-width: 11px 34px 13px; border-radius: 0; border-image: url("img/select-frame.webp") 19 56 22 / 11px 34px 13px stretch; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon fill='%23d8b36a' points='128,192 256,320 384,192'/%3E%3C/svg%3E") right center / 0.9rem no-repeat, url("img/select-backdrop.png") 27px 11px / calc(100% - 54px) calc(100% - 24px) no-repeat; background-origin: padding-box, border-box; background-clip: padding-box, border-box; background-color: transparent; color: var(--dia-gold); line-height: 1; appearance: none; outline: none; &:hover, &:focus { border-image-source: url("img/select-frame-highlight.webp"); color: var(--dia-gold-bright); } } & select option { background-color: #16110f; color: var(--dia-text-primary); } /* The profile popup's role picker is an invisible select laid over the role tag: keep it exactly the tag's size */ & select[class*="UserProfilePopup_roleSelectHidden__"] { min-width: 0; height: auto; padding: 0; border: 0; } /* The open list, as in the searx diabolic theme. Browsers with customizable selects (appearance: base-select, Chromium) get a DiabolicUI panel: the minimap edit-mode frame around the marble backdrop, options in the theme's colours, the hovered one on a blood-red gradient, the chosen one in gold, and DiabolicUI's slider thumb as the scrollbar. Other browsers (Firefox) keep their native list with the option colours above. */ @supports (appearance: base-select) { & select, & select::picker(select) { appearance: base-select; } /* base-select adds its own arrow; the frame already has a gold one */ & select::picker-icon { display: none; } & select::picker(select) { box-sizing: border-box; min-width: anchor-size(width); margin-top: 0.2rem; padding: 0.3rem 0; /* The frame's outer 5px are transparent and its inner band a dark shadow: push it 5px out and run the marble under the whole border, so there is no gap between the gold line and the backdrop */ border: 10px solid transparent; border-image: url("img/frame-edge.png") 64 / 16px / 5px round; background: linear-gradient(rgb(22 17 15 / 70%), rgb(22 17 15 / 70%)), #1b1412 url("img/marble.jpg") repeat; background-clip: border-box; box-shadow: 0 8px 20px rgb(0 0 0 / 80%); } /* The list's scrollbar: the slider thumb (its bevelled edge a 9-slice, the body stretched, the grips centred) on a dark track. No scrollbar-color here, or the browser would ignore these rules. */ & select::picker(select)::-webkit-scrollbar { width: 14px; } & select::picker(select)::-webkit-scrollbar-track { background: rgb(0 0 0 / 55%); border-left: 1px solid #3a2c20; } & select::picker(select)::-webkit-scrollbar-thumb { min-height: 24px; border: 3px solid transparent; border-image: url("img/scroll-thumb-frame.png") 4 / 3px stretch; background: url("img/scroll-thumb-grips.png") center / 8px auto no-repeat, url("img/scroll-thumb-body.png") center / 100% 100% no-repeat; background-origin: padding-box; background-clip: padding-box; } & select::picker(select)::-webkit-scrollbar-thumb:hover { border-image-source: url("img/scroll-thumb-frame-highlight.png"); background-image: url("img/scroll-thumb-grips-highlight.png"), url("img/scroll-thumb-body-highlight.png"); } & select::picker(select)::-webkit-scrollbar-button { display: none; } & select option { padding: 0.4rem 0.9rem; background: transparent; color: var(--dia-text-primary); font-size: 0.9rem; } & select option:hover, & select option:focus-visible { background: linear-gradient(90deg, rgb(110 10 16 / 85%), rgb(110 10 16 / 25%)); color: var(--dia-gold-bright); outline: none; } & select option:checked { color: var(--dia-gold); font-weight: bold; } & select option::checkmark { color: var(--dia-accent); } } /* ---------- Text fields ---------- */ /* A small tooltip frame over black. The frames' lines sit inside the border, so focus glows inward from them. */ & :is( [class*="Input_inputBase__"], [class*="EmojiPicker_searchInput__"], [class*="GifPicker_searchInput__"], [class*="NativeStickerPicker_searchInput__"], [class*="ExploreModal_searchInput__"] ) { border: 5px solid transparent; border-image: url("img/tooltip-edge.png") 32 / 24px stretch; border-radius: 0; background-color: #0a0807; background-clip: padding-box; &:focus { border-color: transparent; box-shadow: inset 0 0 0 1px rgb(216 179 106 / 55%), inset 0 0 10px rgb(212 32 44 / 30%); } } /* The composer: the gold edit-mode minimap frame, as the searx search box. The frame isn't symmetric: drawn at 16px, its band runs 6 to 9px in at the top and bottom but 2 to 5px in at the sides. The border matches, so the focus glow (inset, from the padding edge) starts right at the band. */ & [class*="Composer_inputRow__"] { border: solid transparent; border-width: 9px 5px; border-image: url("img/frame-edge.png") 64 / 16px round; border-radius: 0; background-color: #0a0807; background-clip: padding-box; &:focus-within { border-color: transparent; box-shadow: inset 0 0 12px rgb(212 32 44 / 35%); } } /* The angel and the demon of DiabolicUI's action bars, standing on the window's bottom edge at the ends of the composer, as they sit at the ends of the bar in game. Only on wide windows, where the chat column keeps room for them with the members list open. */ & [class*="Composer_composerWrap__"]::before, & [class*="Composer_composerWrap__"]::after { content: ""; position: absolute; bottom: 0; height: 72px; pointer-events: none; filter: brightness(1.5) drop-shadow(0 0 8px rgb(255 170 90 / 30%)) drop-shadow(0 3px 5px #000); display: none; } & [class*="Composer_composerWrap__"]::before { left: 4px; width: 115px; background: url("img/angel.webp") left bottom / contain no-repeat; } & [class*="Composer_composerWrap__"]::after { right: 4px; width: 94px; background: url("img/demon.webp") right bottom / contain no-repeat; } @media (min-width: 1400px) { & [class*="Composer_composerWrap__"] { padding-left: 120px; padding-right: 100px; } & [class*="Composer_composerWrap__"]::before, & [class*="Composer_composerWrap__"]::after { display: block; } } /* ---------- Chat buttons ---------- */ /* DiabolicUI's chat frame buttons (DiabolicUI_ChatButtons_36x36_*): Bottom for jumping to the latest messages, Up turned to the right for sending, each with its Highlight and Disabled textures. The button art is the middle 36px of a 64px texture, so the texture is drawn at 64/36 of the button, centred; the icons it replaces are hidden. */ & :is([class*="Timeline_scrollToBottomBtn__"], [class*="Composer_sendBtn__"]) { border-radius: 0; background: url("img/chat-bottom.webp") center / calc(100% * 64 / 36) no-repeat; box-shadow: none; transform: none; & > * { visibility: hidden; } } & [class*="Timeline_scrollToBottomBtn__"]:hover { background-image: url("img/chat-bottom-highlight.webp"); } & [class*="Composer_sendBtn__"] { background-image: url("img/chat-send.webp"); &:hover:not(:disabled) { background-image: url("img/chat-send-highlight.webp"); transform: none; } &:disabled { background-image: url("img/chat-send-disabled.webp"); opacity: 1; } } /* ---------- Profile popup ---------- */ /* Framed as a tooltip (above), laid out like the item tooltip: a square portrait in the addon's ring, the name in the item title's colour and Exocet. */ & [class*="UserProfilePopup_coverWrap__"] { border-bottom: 1px solid var(--dia-border); } /* A little wider for the framed buttons, which wrap when two don't fit */ & [class*="UserProfilePopup_popup__"] { width: 300px; } & [class*="UserProfilePopup_modActions__"] { flex-wrap: wrap; } & :is([class*="UserProfilePopup_coverEdit__"], [class*="UserProfilePopup_avatarEdit__"]) { border-radius: 0; } /* Room for the portrait ring, whose visible edge sits about 4px outside the picture: 4px on the left lines that edge up with the name */ & [class*="UserProfilePopup_avatarWrap__"] { border-radius: 0; background-color: transparent; padding: 12px 12px 12px 4px; } & [class*="UserProfilePopup_displayName__"] { color: var(--dia-item-title); font-family: var(--dia-heading); font-weight: 500; letter-spacing: 0.03em; text-shadow: 0 1px 2px #000; } & [class*="UserProfilePopup_userId__"] { color: var(--dia-text-muted); } & [class*="UserProfilePopup_infoIcon__"] { color: var(--dia-gold); } /* Roles: square tags in the tooltip bronze, keeping their colour */ & [class*="UserProfilePopup_roleBadge__"] { border: 1px solid var(--dia-border); border-radius: 0; } /* ---------- Explore ---------- */ /* The window is framed as a tooltip (Dialog_panel). Its header carries the title glow, the directories are tabs in a bronze box, and each room is a small item tooltip: its picture boxed like an item icon, its name in the item title's colour. */ & [class*="ExploreModal_dialog__"] { border-radius: 0; } & [class*="ExploreModal_header__"] { background: url("img/title-glow.webp") left -2rem top / 24rem 56px no-repeat, rgb(20 14 6); } & [class*="ExploreModal_headerTitle__"] { color: var(--dia-gold); font-family: var(--dia-heading); font-weight: 500; letter-spacing: 0.04em; text-shadow: 0 1px 2px #000; } & [class*="ExploreModal_headerTitleIcon__"] { color: var(--dia-gold); } & [class*="ExploreModal_pillGroup__"] { border-radius: 0; background-color: rgb(0 0 0 / 60%); } & :is([class*="ExploreModal_pill__"], [class*="ExploreModal_pillOtherWrapper__"]) { border-radius: 0; } & [class*="ExploreModal_pill__"] { color: var(--dia-gold); &:hover { background-color: rgb(32 18 10 / 60%); color: var(--dia-gold-bright); } } & :is([class*="ExploreModal_pillActive__"], [class*="ExploreModal_pillOtherWrapperActive__"]) { &, &:hover { background-color: rgb(110 10 16 / 60%); box-shadow: inset 0 0 0 1px rgb(216 179 106 / 55%); color: var(--dia-gold-bright); } } & [class*="ExploreModal_searchInput__"] { height: auto; min-height: 36px; } & :is([class*="ExploreModal_sectionTitle__"], [class*="ExploreModal_emptyTitle__"]) { color: var(--dia-gold); font-family: var(--dia-heading); font-weight: 500; letter-spacing: 0.04em; } & [class*="ExploreModal_roomCard__"] { border: 6px solid transparent; border-image: url("img/tooltip-edge.png") 32 / 24px stretch; border-radius: 0; background-color: rgb(0 0 0 / 95%); background-clip: padding-box; &:hover { border-color: transparent; background-color: rgb(20 12 8 / 95%); box-shadow: inset 0 0 0 1px rgb(216 179 106 / 40%), inset 0 0 18px rgb(216 179 106 / 10%); } } & [class*="ExploreModal_skeletonCard__"] { border-radius: 0; border-color: var(--dia-border); background-color: rgb(0 0 0 / 60%); } & [class*="ExploreModal_cardAvatar__"] { border-radius: 0; outline: 1px solid rgb(97 82 56); outline-offset: 1px; box-shadow: inset 0 0 8px rgb(0 0 0 / 80%); color: var(--dia-gold-bright); font-family: var(--dia-heading); text-shadow: 0 1px 2px #000; } & [class*="ExploreModal_cardName__"] { color: var(--dia-item-title); } & [class*="ExploreModal_cardTypeBadge__"] { border: 1px solid var(--dia-border); border-radius: 0; background-color: rgb(0 0 0 / 60%); color: var(--dia-gold); } & [class*="ExploreModal_joinedBadge__"] { border-radius: 0; } /* The framed buttons, a little smaller on the cards */ & [class*="ExploreModal_joinBtn__"] { min-height: 30px; font-size: 0.72rem; } /* ---------- Emoji, sticker and GIF pickers ---------- */ /* Framed as tooltips (above), the tab bar as a title banner. The category buttons are DiabolicUI's action button slots (DiabolicUI_Button_36x36_*: Backdrop, Border, BorderHighlight on hover, Checked for the open category), 64px textures around a 36px button, so drawn at 64/36 of the button, centred. */ & [class*="ComposerMediaPicker_header__"] { margin: 0 0 2px; } & :is([class*="ComposerMediaPicker_tab__"], [class*="GifPicker_tabSub__"]) { border-radius: 0; color: var(--dia-gold); font-family: var(--dia-heading); letter-spacing: 0.04em; text-shadow: 0 1px 2px #000; &:hover { background-color: transparent; color: var(--dia-gold-bright); } } & :is([class*="ComposerMediaPicker_tabActive__"], [class*="GifPicker_tabSubActive__"]) { color: var(--dia-gold-bright); border-bottom-color: var(--dia-accent); } & [class*="GifPicker_tabSubActive__"] { background-color: rgb(110 10 16 / 35%); box-shadow: inset 0 0 0 1px rgb(216 179 106 / 45%); } & :is( [class*="EmojiPicker_sectionHeader__"], [class*="NativeStickerPicker_packLabel__"], [class*="GifPicker_sectionLabel__"] ) { background-color: rgb(0 0 0 / 95%); border-bottom: 1px solid var(--dia-border); color: var(--dia-gold); font-family: var(--dia-heading); font-weight: 500; text-transform: none; letter-spacing: 0.04em; /* Clear of the frame's line, which scaled screens can round onto the first pixel inside the border */ margin-inline: 1px; } & :is([class*="EmojiPicker_navBtn__"], [class*="NativeStickerPicker_navBtn__"]) { border-radius: 0; background: url("img/slot-border.webp") center / calc(100% * 64 / 36) no-repeat, url("img/slot-backdrop.webp") center / calc(100% * 64 / 36) no-repeat; &:hover { background-image: url("img/slot-border-highlight.webp"), url("img/slot-backdrop.webp"); } } & :is([class*="EmojiPicker_navBtnActive__"], [class*="NativeStickerPicker_navBtnActive__"]) { background-image: url("img/slot-checked.webp"), url("img/slot-backdrop.webp"); &:hover { background-image: url("img/slot-checked-highlight.webp"), url("img/slot-backdrop.webp"); } } & :is([class*="EmojiPicker_navSidebar__"], [class*="NativeStickerPicker_navSidebar__"]) { gap: 4px; } & [class*="GifPicker_consentTitle__"] { color: var(--dia-gold); font-family: var(--dia-heading); font-weight: 500; letter-spacing: 0.04em; } & [class*="NativeStickerPicker_emptyLink__"] { color: var(--dia-gold); &:hover { color: var(--dia-gold-bright); } } /* Emoji, stickers and GIFs: the warm tint and gold edge of hovered messages. An outline, as the pictures would cover an inset shadow. */ & :is( [class*="EmojiPicker_emojiItem__"], [class*="NativeStickerPicker_item__"], [class*="GifPicker_gifItem__"] ) { border-radius: 0; &:hover { background-color: rgb(32 18 10 / 60%); outline: 1px solid rgb(216 179 106 / 55%); outline-offset: -1px; opacity: 1; } } /* ---------- Settings window ---------- */ /* The window is framed as a tooltip (Dialog_panel, above), its page titles are banners. The side menu is DiabolicUI's game menu: the DiabolicUI_UIButton_300x51 buttons (Normal, Highlight on hover, Pushed for the open page, cropped like button.webp) with their header font in the Title colour, white when lit (settings/ui.lua menubutton). */ & [class*="Settings_nav__"] { background-color: transparent; gap: 4px; } & [class*="Settings_navLabel__"] { color: var(--dia-gold); font-family: var(--dia-heading); font-weight: 500; letter-spacing: 0.06em; } @media (min-width: 769px) { /* Wider than upstream: Exocet is wide, and the caps take 34px a side */ & [class*="Settings_nav__"] { width: 250px; } /* Icon and label from the left, a label too long ending in "...", so the icon is never pushed under a cap */ & [class*="Settings_navItem__"] { min-height: 38px; padding: 4px 30px 4px 34px; justify-content: flex-start; gap: 8px; border-style: solid; border-color: transparent; border-width: 0; border-image: url("img/button.webp") 16 56 fill / 10px 34px stretch; border-radius: 0; background-color: transparent; color: #ffea89; font-family: var(--dia-heading); font-size: 0.8rem; letter-spacing: 0.02em; white-space: nowrap; text-shadow: 0 1px 2px #000; &:hover { border-image-source: url("img/button-hover.webp"); background-color: transparent; color: #fafafa; } & > svg { flex-shrink: 0; } } & [class*="Settings_navLabelText__"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; } & [class*="Settings_navItemActive__"] { &, &:hover { border-image-source: url("img/button-pushed.webp"); background-color: transparent; color: #fafafa; } } } /* The close button: DiabolicUI's chat Minimize button (DiabolicUI_ChatButtons_36x36_Minimize, Highlight on hover), drawn like the other chat buttons: its art is the middle 36px of a 64px texture; the icon it replaces is hidden. */ & :is([class*="Settings_closeBtn__"], [class*="ExploreModal_closeBtn__"]) { border-radius: 0; background: url("img/chat-minimize.webp") center / calc(100% * 64 / 36) no-repeat; &:hover { background: url("img/chat-minimize-highlight.webp") center / calc(100% * 64 / 36) no-repeat; } &:active { transform: translateY(1px); } & > * { visibility: hidden; } } /* Toggles as DiabolicUI sliders: a dark track boxed in the tooltip bronze, lit blood red when on, with the chat slider's thumb as the knob (DiabolicUI_Slider_22x36_*): ThumbDisabled when off, Thumb when on, ThumbHighlight on hover. The thumb keeps its 22x36 shape, so the knob is narrower than upstream's and slides further. */ & [class*="Toggle_trackBase__"] { border-radius: 0; background-color: #0a0807; border-color: var(--dia-border); box-shadow: inset 0 1px 3px #000; } & [class*="Toggle_trackChecked__"] { background-color: rgb(110 10 16 / 70%); border-color: rgb(216 179 106 / 55%); box-shadow: inset 0 0 8px rgb(212 32 44 / 55%); } & [class*="Toggle_thumbBase__"] { top: -1px; left: 1px; height: calc(100% + 2px); width: auto; aspect-ratio: 22 / 36; border-radius: 0; background: url("img/slider-thumb-disabled.webp") center / calc(100% * 64 / 22) calc(100% * 64 / 36) no-repeat; box-shadow: none; } & :is([class*="Toggle_thumbCheckedSizes_sm__"], [class*="Toggle_thumbCheckedSizes_md__"]) { background-image: url("img/slider-thumb.webp"); } & [class*="Toggle_trackBase__"]:hover [class*="Toggle_thumbBase__"] { background-image: url("img/slider-thumb-highlight.webp"); } & [class*="Toggle_thumbCheckedSizes_sm__"] { transform: translateX(calc(36px - 2px - 20px * 22 / 36 - 2px)); } & [class*="Toggle_thumbCheckedSizes_md__"] { transform: translateX(calc(44px - 2px - 24px * 22 / 36 - 2px)); } /* Choice cards (message layout, theme): small tooltip frames, the chosen one lit like the open room */ & [class*="Appearance_pickerBtn__"] { border: 4px solid transparent; border-image: url("img/tooltip-edge.png") 32 / 16px stretch; border-radius: 0; background-color: rgb(0 0 0 / 95%); background-clip: padding-box; &:hover { background-color: rgb(32 18 10 / 80%); box-shadow: inset 0 0 0 1px rgb(216 179 106 / 25%); } } & [class*="Appearance_pickerBtnActive__"] { &, &:hover { background-color: rgb(110 10 16 / 35%); box-shadow: inset 0 0 0 1px rgb(216 179 106 / 55%), inset 0 0 14px rgb(212 32 44 / 25%); } } & [class*="Appearance_pickerLabelActive__"] { color: var(--dia-gold-bright); } /* ---------- Messages ---------- */ & [class*="Timeline_msgHoverRegion__"] { border-radius: 0; } /* Hovered messages: a warm tint and a soft gold glow inside, like the searx results */ & [class*="Timeline_msgHoverRegion__"]:hover, & :is([class*="Timeline_msgRow__"], [class*="Timeline_msgRowGrouped__"]):hover [class*="Timeline_msgHoverRegion__"] { background-color: rgb(32 18 10 / 60%); box-shadow: inset 0 0 0 1px rgb(216 179 106 / 35%), inset 0 0 18px rgb(216 179 106 / 10%); } & [class*="Timeline_msgSender__"] { color: var(--dia-item-title); } /* Classic layout: each bubble is a small tooltip */ & :is([class*="Timeline_msgContentClassic__"], [class*="Timeline_msgContentClassicGrouped__"]) { border: 4px solid transparent; border-image: url("img/tooltip-edge.png") 32 / 16px stretch; border-radius: 0; background-clip: padding-box; } /* ---------- Portraits ---------- */ /* DiabolicUI's party/target portrait (DiabolicUI_Target_80x80_Portrait*): the ring texture is drawn at 72px around a 40px portrait (settings/unitframes.lua), so 1.8x the avatar. Drawn at 1.76x (38% past each side, mostly transparent) so the ring's inner edge covers the avatar's edge by a pixel. On mouseover, as in game (unitframes/units/focus.lua): the highlight border with the glow over it. */ /* Square like the portrait's opening, corners eased to stay inside the ring */ & :is([class*="Avatar_avatar__"], [class*="Avatar_avatarImg__"]) { border-radius: 14%; } /* Letter avatars: their colour over the portrait's stone backdrop */ & [class*="Avatar_avatar__"] { background-image: url("img/portrait-backdrop.webp"); background-position: center; background-size: 180%; background-blend-mode: overlay; color: var(--dia-gold-bright); font-family: var(--dia-heading); text-shadow: 0 1px 2px #000; } & :is([class*="Avatar_avatarWrap__"], [class*="Avatar_avatarWrapFill__"])::after, & [class*="ChatListItem_chatAvatar__"]:has(> [class*="ChatListItem_chatAvatarImg__"])::after { content: ""; position: absolute; inset: -38%; background: url("img/portrait-border.webp") center / 100% 100% no-repeat; pointer-events: none; } & :is([class*="Avatar_avatarWrap__"], [class*="Avatar_avatarWrapFill__"]):hover::after, & [class*="ChatListItem_roomItem__"]:hover [class*="Avatar_avatarWrap__"]::after, & [class*="ChatListItem_roomItem__"]:hover [class*="ChatListItem_chatAvatar__"]:has(> [class*="ChatListItem_chatAvatarImg__"])::after { background-image: url("img/portrait-glow.webp"), url("img/portrait-borderhighlight.webp"); background-size: 100% 100%; } /* Rooms: square portraits, like the addon's. Room pictures are drawn without the Avatar component, so they get the ring above. */ & :is([class*="ChatListItem_chatAvatar__"], [class*="ChatListItem_chatAvatarImg__"]) { border-radius: 0; overflow: visible; } & [class*="ChatListItem_chatAvatar__"] :is([class*="Avatar_avatar__"], [class*="Avatar_avatarImg__"]) { border-radius: 0; } /* Presence dots sit on the ring, above it */ & [class*="Avatar_presenceDotBase__"] { z-index: 1; border-color: #0d0a09; } /* ---------- Spaces bar ---------- */ /* DiabolicUI's micro menu (actionbars/elements/menu.lua): 61x55 buttons whose 128x128 texture sits at (-34, 37) from their top left, drawn at --dia-menu-scale. The Pushed texture (red inside, icon 2px lower at full alpha) marks the open home or space, as it marks the open window in game. */ & :is([class*="SpacesList_spacesScrollArea__"], [class*="SpacesList_spacesStickyBottom__"]) { gap: 8px; padding-top: 4px; padding-bottom: 4px; } & :is([class*="SpacesList_spaceBarBtn__"], [class*="SpacesList_spaceBtnDragOverlay__"]) { width: calc(61px * var(--dia-menu-scale)); height: calc(55px * var(--dia-menu-scale)); border-radius: 0; background-color: transparent; box-shadow: none; isolation: isolate; color: #c9c9c9; &:hover { border-radius: 0; background-color: transparent; color: #fafafa; } &::before { content: ""; position: absolute; left: calc(-34px * var(--dia-menu-scale)); top: calc(-37px * var(--dia-menu-scale)); width: calc(128px * var(--dia-menu-scale)); height: calc(128px * var(--dia-menu-scale)); z-index: -1; background: url("img/menu-button-normal.webp") center / 100% 100% no-repeat; pointer-events: none; } /* Icons at 80% like the game's */ & > svg { opacity: 0.8; transition: opacity 0.1s ease; } &:hover > svg { opacity: 1; } } & :is([class*="SpacesList_spaceBarBtnActive__"], [class*="SpacesList_spaceBtnActive__"]) { &::before { background-image: url("img/menu-button-pushed.webp"); } & > svg { opacity: 1; transform: translateY(2px); color: #fafafa; } } /* A space's picture fills the button's recessed panel instead of a portrait ring, grey like the menu's icons, in colour on hover and when open */ & [class*="SpacesList_spaceAvatarWrap__"] { position: absolute; top: calc(7px * var(--dia-menu-scale)); right: calc(11px * var(--dia-menu-scale)); bottom: calc(12px * var(--dia-menu-scale)); left: calc(10px * var(--dia-menu-scale)); width: auto; height: auto; border-radius: 0; overflow: hidden; filter: grayscale(1) brightness(0.85); opacity: 0.8; transition: filter 0.1s ease, opacity 0.1s ease; & :is([class*="Avatar_avatar__"], [class*="Avatar_avatarImg__"]) { border-radius: 0; } & [class*="Avatar_avatarWrapFill__"]::after { display: none; } } & [class*="SpacesList_spaceBarBtn__"]:hover [class*="SpacesList_spaceAvatarWrap__"], & :is([class*="SpacesList_spaceBarBtnActive__"], [class*="SpacesList_spaceBtnActive__"]) [class*="SpacesList_spaceAvatarWrap__"] { filter: none; opacity: 1; } & :is([class*="SpacesList_spaceBarBtnActive__"], [class*="SpacesList_spaceBtnActive__"]) [class*="SpacesList_spaceAvatarWrap__"] { transform: translateY(2px); } }