From 577b9749dd58e5a85c07fdf7a0ac0833f5bce180 Mon Sep 17 00:00:00 2001 From: u68467 Date: Thu, 13 Feb 2025 13:38:12 +0100 Subject: [PATCH] Update discord98.css --- discord98.css | 238 ++++++++++++++++++++++++++++++++------------------ 1 file changed, 153 insertions(+), 85 deletions(-) diff --git a/discord98.css b/discord98.css index de42135..2b33d97 100644 --- a/discord98.css +++ b/discord98.css @@ -1,76 +1,141 @@ /** - * @name Retro Win98 Discord Theme - * @description A custom Discord skin inspired by Windows 98 (Chicago) using 98.css with refined colors, fonts, and buttons. + * @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. * @author YourName - * @version 1.1.0 + * @version 1.0.0 + * @invite YOUR_INVITE_CODE + * @website https://your.website.example/ */ -/* Import the 98.css library for base retro styling */ +/* Import 98.css for base retro styling */ @import url('https://unpkg.com/98.css'); /* ----------------------------------------------------------------------------- - Global Styling + Global Variables & Base Styles + ----------------------------------------------------------------------------- + These variables set our retro palette, fonts, and spacings. ----------------------------------------------------------------------------- */ +:root { + /* Fonts & Basic 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; -/* Apply retro font and dark text to all elements */ -html, body, * { - font-family: "MS Sans Serif", sans-serif !important; - color: #000 !important; /* Dark black fonts for maximum contrast */ + /* 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); } -/* Set the overall app background to a light cyan */ -#app-mount, -.appMount__51fd7, -.app__160d8 { - background-color: #e0ffff !important; /* Light cyan */ +/* Apply our retro font and dark text to every element */ +html, body, * { + font-family: var(--font) !important; + color: var(--txt-1) !important; + background: var(--bg-0) !important; } /* ----------------------------------------------------------------------------- - Content Areas & Panels + App & Layout Containers ----------------------------------------------------------------------------- */ -/* Main content panels (e.g., chat windows, channel content) */ +/* 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: #e0ffff !important; /* Light cyan background */ - border: 2px outset #fff !important; + background-color: var(--bg-2) !important; + border: var(--border-width) outset #fff !important; box-shadow: 2px 2px 0 #000 !important; - padding: 10px !important; - margin: 5px !important; + padding: var(--txt-pad) !important; + margin: var(--pad) !important; } -/* Sidebars (server list, member list, etc.) */ +/* Sidebars (server list, channels, member list, etc.) */ [class*="sidebar"] { - background-color: #d3d3d3 !important; /* Light gray background */ - border: 2px inset #fff !important; - padding: 10px !important; - margin: 5px !important; + background-color: var(--bg-1) !important; + border: var(--border-width) inset #fff !important; + padding: var(--pad) !important; + margin: var(--pad) !important; } -/* Headers / Title Bars (top navigation, channel headers) */ +/* Headers / Title Bars (top navigation, channel headers, etc.) */ [class*="header"], [class*="titlebar"], [class*="topbar"] { - background-color: #e0ffff !important; - border-bottom: 2px outset #fff !important; - padding: 5px 10px !important; - margin-bottom: 5px !important; + background-color: var(--bg-2) !important; + border-bottom: var(--border-width) outset #fff !important; + padding: calc(var(--pad) / 2) 10px !important; + margin-bottom: var(--pad) !important; } /* Footers */ [class*="footer"] { - background-color: #d3d3d3 !important; - border-top: 2px outset #fff !important; - padding: 5px !important; - margin-top: 5px !important; + 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 Areas + Scrollable Regions & Scrollbars ----------------------------------------------------------------------------- */ -/* General scrollable regions (e.g., message lists, channel lists) */ +/* General scrollable areas (e.g. message lists, channel lists) */ [class*="scroller"] { - background-color: #d3d3d3 !important; + background-color: var(--bg-1) !important; border: 1px solid #fff !important; padding: 5px !important; } @@ -80,72 +145,71 @@ html, body, * { width: 12px; } ::-webkit-scrollbar-track { - background: #e0ffff; + background: var(--bg-2); } ::-webkit-scrollbar-thumb { - background: #d3d3d3; + background: var(--bg-1); border: 2px solid #fff; } /* ----------------------------------------------------------------------------- - Buttons + Buttons & Interactive Elements ----------------------------------------------------------------------------- */ -/* Retro-styled buttons */ +/* Retro-styled buttons and button-like elements */ button, [class*="button"] { - font-family: "MS Sans Serif", sans-serif !important; - /* Gradient from a very light cyan to a soft light gray */ - background: linear-gradient(to bottom, #f0ffff, #d3d3d3) !important; - border: 2px outset #fff !important; + font-family: var(--font) !important; + background: linear-gradient(to bottom, #f0ffff, var(--bg-1)) !important; + border: var(--border-width) outset #fff !important; box-shadow: 1px 1px 0 #000 !important; padding: 4px 8px !important; margin: 2px !important; cursor: pointer; - color: #000 !important; + color: var(--txt-1) !important; + transition: border var(--border-transition); } -/* Button hover: simulate a pressed effect */ button:hover, [class*="button"]:hover { - border: 2px inset #fff !important; + border: var(--border-width) inset #fff !important; box-shadow: none !important; } /* ----------------------------------------------------------------------------- - Modals & Windows + Modals, Windows & Dialogs ----------------------------------------------------------------------------- */ -/* Modals, dialogs, and floating windows */ +/* Floating modals and windows */ [class*="modal"], [class*="window"] { - background-color: #e0ffff !important; - border: 2px solid #fff !important; + background-color: var(--bg-2) !important; + border: var(--border-width) solid #fff !important; box-shadow: 2px 2px 0 #000 !important; - padding: 10px !important; - margin: 10px auto !important; + padding: var(--pad) !important; + margin: var(--pad) auto !important; } /* ----------------------------------------------------------------------------- - Inputs & Forms + Form Elements & Inputs ----------------------------------------------------------------------------- */ -/* Text inputs, textareas, and select boxes */ +/* Text inputs, textareas, and select elements */ input, textarea, select { - font-family: "MS Sans Serif", sans-serif !important; - background-color: #ffffff !important; - border: 2px inset #fff !important; + font-family: var(--font) !important; + background-color: #fff !important; + border: var(--border-width) inset #fff !important; padding: 4px !important; margin: 2px !important; - color: #000 !important; + color: var(--txt-1) !important; } /* ----------------------------------------------------------------------------- - Chat & Messages + Chat & Message Styling ----------------------------------------------------------------------------- */ -/* Chat bubbles and individual messages */ +/* Individual chat messages / message bubbles */ [class*="message"] { - background-color: #e0ffff !important; - border: 2px outset #fff !important; + 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; @@ -155,20 +219,20 @@ input, textarea, select { Avatars & Icons ----------------------------------------------------------------------------- */ -/* Avatars: enforce a retro border */ +/* Avatar images and icons */ img.avatar, [class*="avatar"] img { - border: 2px solid #fff !important; + border: var(--border-width) solid #fff !important; box-shadow: 1px 1px 0 #000 !important; } /* ----------------------------------------------------------------------------- - Tabs & Menus + Tabs, Menus & Tooltips ----------------------------------------------------------------------------- */ -/* Tabbed elements (channel tabs, settings tabs, etc.) */ +/* Tabbed elements (e.g. channel tabs, settings tabs) */ [class*="tab"] { - background-color: #d3d3d3 !important; - border: 2px outset #fff !important; + background-color: var(--bg-1) !important; + border: var(--border-width) outset #fff !important; padding: 4px 8px !important; margin: 2px !important; } @@ -176,15 +240,15 @@ img.avatar, [class*="avatar"] img { /* Dropdown menus and select lists */ [class*="dropdown"], [class*="select"] { - background-color: #e0ffff !important; - border: 2px inset #fff !important; + background-color: var(--bg-2) !important; + border: var(--border-width) inset #fff !important; padding: 4px !important; } /* Tooltips */ [class*="tooltip"] { - background-color: #e0ffff !important; - border: 2px solid #fff !important; + background-color: var(--bg-2) !important; + border: var(--border-width) solid #fff !important; box-shadow: 1px 1px 0 #000 !important; padding: 4px !important; } @@ -193,25 +257,29 @@ img.avatar, [class*="avatar"] img { Additional UI Overrides ----------------------------------------------------------------------------- */ -/* Channel and conversation windows */ +/* Channels, Conversations, etc. */ [class*="channel"], [class*="conversation"] { - background-color: #e0ffff !important; - border: 2px outset #fff !important; - padding: 8px !important; - margin: 5px !important; + background-color: var(--bg-2) !important; + border: var(--border-width) outset #fff !important; + padding: var(--pad) !important; + margin: var(--pad) !important; } -/* Dropdown menus (expanded) */ +/* Expanded dropdowns */ [class*="dropdown"], [class*="select"] { - background-color: #e0ffff !important; - border: 2px inset #fff !important; + background-color: var(--bg-2) !important; + border: var(--border-width) inset #fff !important; padding: 4px !important; } -/* Force the retro look on nearly every element */ +/* Force retro look on every element */ * { - font-family: "MS Sans Serif", sans-serif !important; - color: #000 !important; + font-family: var(--font) !important; + color: var(--txt-1) !important; } + +/* ----------------------------------------------------------------------------- + End Retro98 Discord Theme +----------------------------------------------------------------------------- */