From d4e98028b220a7f3304152f934a96d01a971d763 Mon Sep 17 00:00:00 2001 From: u68467 Date: Thu, 13 Feb 2025 13:41:37 +0100 Subject: [PATCH] Update discord98.css --- discord98.css | 328 +++++++++++++++----------------------------------- 1 file changed, 98 insertions(+), 230 deletions(-) diff --git a/discord98.css b/discord98.css index 2b33d97..e776ea9 100644 --- a/discord98.css +++ b/discord98.css @@ -1,285 +1,153 @@ /** - * @name Retro98 Discord Theme - * @description A retro Windows 98–inspired Discord theme leveraging 98.css. - * Uses vintage colors, “MS Sans Serif” fonts, and classic button and border styles. + * @name Retro98 Minimalist Discord Theme (DRY) + * @description A minimalist, retro Windows 98–inspired Discord theme leveraging 98.css. + * Uses a pared‑down layout with vintage colors, “MS Sans Serif” typography, + * and classic borders/buttons. * @author YourName * @version 1.0.0 - * @invite YOUR_INVITE_CODE - * @website https://your.website.example/ */ /* Import 98.css for base retro styling */ @import url('https://unpkg.com/98.css'); -/* ----------------------------------------------------------------------------- - Global Variables & Base Styles - ----------------------------------------------------------------------------- - These variables set our retro palette, fonts, and spacings. ------------------------------------------------------------------------------ */ +/* -------------------------------------------------------------------------- + Variables & Base Reset +--------------------------------------------------------------------------- */ :root { - /* Fonts & Basic Spacing */ + /* Fonts & Spacing */ --font: "MS Sans Serif", sans-serif; - letter-spacing: normal; - font-weight: 400; - --label-font-weight: 500; - --corner-text: 'Retro98'; - --pad: 16px; - --txt-pad: 10px; - --panel-roundness: 0px; + --pad: 8px; /* overall padding/margin */ + --border-width: 1px; /* thinner borders for minimalism */ - /* Background Colors */ - --bg-0: #c0c0c0; /* Main background: classic Windows 98 gray */ - --bg-1: #d4d0c8; /* Inner window background: typical window interior */ - --bg-2: #e0ffff; /* Accent background: light cyan for content panels */ - --bg-3: #d3d3d3; /* Alternative light gray for sidebars & scrollables */ - - /* State Modifiers */ - --hover: rgba(0, 0, 0, 0.1); - --active: rgba(0, 0, 0, 0.2); - --selected: var(--active); - - /* Text Colors */ - --txt-dark: #000000; /* For dark text on colored backgrounds */ - --txt-link: #0000EE; /* Classic blue for links */ - --txt-0: #ffffff; /* White */ - --txt-1: #000000; /* Main text: black for high contrast */ - --txt-2: #333333; /* Secondary text */ - --txt-3: #666666; /* Muted text */ - - /* Accent Colors */ - --acc-0: #000080; /* Navy blue as main accent */ - --acc-1: #0000A0; /* Slightly brighter blue for hover */ - --acc-2: #000060; /* Darker blue for active state */ - - /* Borders */ - --border-width: 2px; - --border-color: var(--bg-3); - --border-hover-color: var(--acc-1); - --border-transition: 0.2s ease; - - /* Status Dot Colors (optional overrides) */ - --online-dot: #00A000; - --dnd-dot: #FF0000; - --idle-dot: #FFA500; - --streaming-dot: #800080; - - /* Mentions & Replies */ - --mention-txt: var(--acc-0); - --mention-bg: rgba(0, 0, 128, 0.1); - --mention-overlay: rgba(0, 0, 128, 0.1); - --mention-hover-overlay: rgba(0, 0, 128, 0.05); - --reply-overlay: var(--active); - --reply-hover-overlay: var(--hover); + /* Colors */ + --bg-main: #c0c0c0; /* Main overall background (classic Win98 gray) */ + --bg-panel: #e0ffff; /* Content panels & modals: light cyan */ + --bg-sidebar: #d3d3d3; /* Sidebars: light gray */ + --txt-color: #000; /* Dark text for high contrast */ + --border-color: #fff; /* White borders */ + + /* State / Interaction */ + --hover-effect: rgba(0, 0, 0, 0.1); } -/* Apply our retro font and dark text to every element */ html, body, * { + margin: 0; + padding: 0; font-family: var(--font) !important; - color: var(--txt-1) !important; - background: var(--bg-0) !important; + color: var(--txt-color) !important; + background: var(--bg-main) !important; } -/* ----------------------------------------------------------------------------- - App & Layout Containers ------------------------------------------------------------------------------ */ +/* -------------------------------------------------------------------------- + Shared Styles +--------------------------------------------------------------------------- */ -/* Main Discord container */ -#app-mount, -.appMount__51fd7, -.app__160d8 { - background-color: var(--bg-0) !important; -} - -/* ----------------------------------------------------------------------------- - Panels & Content Areas ------------------------------------------------------------------------------ */ - -/* General content panels (chat windows, channel views, etc.) */ -[class*="content"] { - background-color: var(--bg-2) !important; - border: var(--border-width) outset #fff !important; - box-shadow: 2px 2px 0 #000 !important; - padding: var(--txt-pad) !important; - margin: var(--pad) !important; -} - -/* Sidebars (server list, channels, member list, etc.) */ -[class*="sidebar"] { - background-color: var(--bg-1) !important; - border: var(--border-width) inset #fff !important; +/* Minimalist panel style (for content areas, modals, chat bubbles, etc.) */ +.panel, +[class*="content"], +[class*="message"], +.modal, [class*="modal"], +.window, [class*="window"] { + background-color: var(--bg-panel) !important; + border: var(--border-width) outset var(--border-color) !important; + box-shadow: 1px 1px 0 #000 !important; padding: var(--pad) !important; margin: var(--pad) !important; } -/* Headers / Title Bars (top navigation, channel headers, etc.) */ -[class*="header"], -[class*="titlebar"], -[class*="topbar"] { - background-color: var(--bg-2) !important; - border-bottom: var(--border-width) outset #fff !important; +/* Sidebar style */ +.sidebar, [class*="sidebar"] { + background-color: var(--bg-sidebar) !important; + border: var(--border-width) inset var(--border-color) !important; + padding: var(--pad) !important; + margin: var(--pad) !important; +} + +/* Headers / Titlebars / Footers (grouped together) */ +.header, [class*="header"], +.titlebar, [class*="titlebar"], +.topbar, [class*="topbar"], +.footer, [class*="footer"] { + background-color: var(--bg-panel) !important; + border: var(--border-width) outset var(--border-color) !important; padding: calc(var(--pad) / 2) 10px !important; - margin-bottom: var(--pad) !important; + margin: var(--pad) !important; } -/* Footers */ -[class*="footer"] { - background-color: var(--bg-1) !important; - border-top: var(--border-width) outset #fff !important; - padding: calc(var(--pad) / 2) !important; - margin-top: var(--pad) !important; -} - -/* ----------------------------------------------------------------------------- - Scrollable Regions & Scrollbars ------------------------------------------------------------------------------ */ - -/* General scrollable areas (e.g. message lists, channel lists) */ -[class*="scroller"] { - background-color: var(--bg-1) !important; - border: 1px solid #fff !important; - padding: 5px !important; -} - -/* Custom scrollbar styling for WebKit browsers */ -::-webkit-scrollbar { - width: 12px; -} -::-webkit-scrollbar-track { - background: var(--bg-2); -} -::-webkit-scrollbar-thumb { - background: var(--bg-1); - border: 2px solid #fff; -} - -/* ----------------------------------------------------------------------------- - Buttons & Interactive Elements ------------------------------------------------------------------------------ */ - -/* Retro-styled buttons and button-like elements */ +/* Buttons & Interactive Elements */ button, [class*="button"] { - font-family: var(--font) !important; - background: linear-gradient(to bottom, #f0ffff, var(--bg-1)) !important; - border: var(--border-width) outset #fff !important; + background: linear-gradient(to bottom, #f0ffff, var(--bg-sidebar)) !important; + border: var(--border-width) outset var(--border-color) !important; box-shadow: 1px 1px 0 #000 !important; padding: 4px 8px !important; margin: 2px !important; cursor: pointer; - color: var(--txt-1) !important; - transition: border var(--border-transition); + color: var(--txt-color) !important; + transition: border 0.2s ease; } - button:hover, [class*="button"]:hover { - border: var(--border-width) inset #fff !important; + border: var(--border-width) inset var(--border-color) !important; box-shadow: none !important; } -/* ----------------------------------------------------------------------------- - Modals, Windows & Dialogs ------------------------------------------------------------------------------ */ - -/* Floating modals and windows */ -[class*="modal"], -[class*="window"] { - background-color: var(--bg-2) !important; - border: var(--border-width) solid #fff !important; - box-shadow: 2px 2px 0 #000 !important; - padding: var(--pad) !important; - margin: var(--pad) auto !important; +/* Scrollable Areas & Custom Scrollbars */ +.scroller, [class*="scroller"] { + background-color: var(--bg-sidebar) !important; + border: var(--border-width) solid var(--border-color) !important; + padding: 4px !important; +} +::-webkit-scrollbar { + width: 8px; +} +::-webkit-scrollbar-track { + background: var(--bg-panel); +} +::-webkit-scrollbar-thumb { + background: var(--bg-sidebar); + border: var(--border-width) solid var(--border-color); } -/* ----------------------------------------------------------------------------- - Form Elements & Inputs ------------------------------------------------------------------------------ */ - -/* Text inputs, textareas, and select elements */ +/* Form Elements (inputs, textareas, selects) */ input, textarea, select { - font-family: var(--font) !important; background-color: #fff !important; - border: var(--border-width) inset #fff !important; + border: var(--border-width) inset var(--border-color) !important; padding: 4px !important; margin: 2px !important; - color: var(--txt-1) !important; + color: var(--txt-color) !important; } -/* ----------------------------------------------------------------------------- - Chat & Message Styling ------------------------------------------------------------------------------ */ - -/* Individual chat messages / message bubbles */ -[class*="message"] { - background-color: var(--bg-2) !important; - border: var(--border-width) outset #fff !important; - box-shadow: 1px 1px 0 #000 !important; - padding: 6px !important; - margin: 4px !important; -} - -/* ----------------------------------------------------------------------------- - Avatars & Icons ------------------------------------------------------------------------------ */ - -/* Avatar images and icons */ -img.avatar, [class*="avatar"] img { - border: var(--border-width) solid #fff !important; +/* Avatars & Icons */ +.avatar, [class*="avatar"] img { + border: var(--border-width) solid var(--border-color) !important; box-shadow: 1px 1px 0 #000 !important; } -/* ----------------------------------------------------------------------------- - Tabs, Menus & Tooltips ------------------------------------------------------------------------------ */ - -/* Tabbed elements (e.g. channel tabs, settings tabs) */ -[class*="tab"] { - background-color: var(--bg-1) !important; - border: var(--border-width) outset #fff !important; +/* Tabs, Dropdowns, Menus & Tooltips */ +.tab, [class*="tab"], +.dropdown, [class*="dropdown"], +.select, [class*="select"], +.tooltip, [class*="tooltip"] { + background-color: var(--bg-panel) !important; + border: var(--border-width) outset var(--border-color) !important; padding: 4px 8px !important; margin: 2px !important; } -/* Dropdown menus and select lists */ -[class*="dropdown"], -[class*="select"] { - background-color: var(--bg-2) !important; - border: var(--border-width) inset #fff !important; - padding: 4px !important; +/* -------------------------------------------------------------------------- + Layout Container Overrides (Minimalist Adjustments) +--------------------------------------------------------------------------- */ + +/* Main app container: remove extra padding/margin */ +#app-mount, +.appMount__51fd7, +.app__160d8 { + margin: 0 !important; + padding: 0 !important; + background-color: var(--bg-main) !important; } -/* Tooltips */ -[class*="tooltip"] { - background-color: var(--bg-2) !important; - border: var(--border-width) solid #fff !important; - box-shadow: 1px 1px 0 #000 !important; - padding: 4px !important; -} - -/* ----------------------------------------------------------------------------- - Additional UI Overrides ------------------------------------------------------------------------------ */ - -/* Channels, Conversations, etc. */ -[class*="channel"], -[class*="conversation"] { - background-color: var(--bg-2) !important; - border: var(--border-width) outset #fff !important; - padding: var(--pad) !important; - margin: var(--pad) !important; -} - -/* Expanded dropdowns */ -[class*="dropdown"], -[class*="select"] { - background-color: var(--bg-2) !important; - border: var(--border-width) inset #fff !important; - padding: 4px !important; -} - -/* Force retro look on every element */ +/* Force our retro styling on all elements */ * { font-family: var(--font) !important; - color: var(--txt-1) !important; + color: var(--txt-color) !important; } - -/* ----------------------------------------------------------------------------- - End Retro98 Discord Theme ------------------------------------------------------------------------------ */