Update discord98.css

discord98.css

@@ -1,76 +1,141 @@
 /**
- * @name Retro Win98 Discord Theme
+ * @name Retro98 Discord Theme
- * @description A custom Discord skin inspired by Windows 98 (Chicago) using 98.css with refined colors, fonts, and buttons.
+ * @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 */
+  /* Background Colors */
-html, body, * {
+  --bg-0: #c0c0c0;    /* Main background: classic Windows 98 gray */
-  font-family: "MS Sans Serif", sans-serif !important;
+  --bg-1: #d4d0c8;    /* Inner window background: typical window interior */
-  color: #000 !important; /* Dark black fonts for maximum contrast */
+  --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 */
+/* Apply our retro font and dark text to every element */
-#app-mount,
+html, body, * {
-.appMount__51fd7,
+  font-family: var(--font) !important;
-.app__160d8 {
+  color: var(--txt-1) !important;
-  background-color: #e0ffff !important; /* Light cyan */
+  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 */
+  background-color: var(--bg-2) !important;
-  border: 2px outset #fff !important;
+  border: var(--border-width) outset #fff !important;
   box-shadow: 2px 2px 0 #000 !important;
-  padding: 10px !important;
+  padding: var(--txt-pad) !important;
-  margin: 5px !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 */
+  background-color: var(--bg-1) !important;
-  border: 2px inset #fff !important;
+  border: var(--border-width) inset #fff !important;
-  padding: 10px !important;
+  padding: var(--pad) !important;
-  margin: 5px !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;
+  background-color: var(--bg-2) !important;
-  border-bottom: 2px outset #fff !important;
+  border-bottom: var(--border-width) outset #fff !important;
-  padding: 5px 10px !important;
+  padding: calc(var(--pad) / 2) 10px !important;
-  margin-bottom: 5px !important;
+  margin-bottom: var(--pad) !important;
 }
 
 /* Footers */
 [class*="footer"] {
-  background-color: #d3d3d3 !important;
+  background-color: var(--bg-1) !important;
-  border-top: 2px outset #fff !important;
+  border-top: var(--border-width) outset #fff !important;
-  padding: 5px !important;
+  padding: calc(var(--pad) / 2) !important;
-  margin-top: 5px !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;
+  font-family: var(--font) !important;
-  /* Gradient from a very light cyan to a soft light gray */
+  background: linear-gradient(to bottom, #f0ffff, var(--bg-1)) !important;
-  background: linear-gradient(to bottom, #f0ffff, #d3d3d3) !important;
+  border: var(--border-width) outset #fff !important;
-  border: 2px 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;
+  background-color: var(--bg-2) !important;
-  border: 2px solid #fff !important;
+  border: var(--border-width) solid #fff !important;
   box-shadow: 2px 2px 0 #000 !important;
-  padding: 10px !important;
+  padding: var(--pad) !important;
-  margin: 10px auto !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;
+  font-family: var(--font) !important;
-  background-color: #ffffff !important;
+  background-color: #fff !important;
-  border: 2px inset #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;
+  background-color: var(--bg-2) !important;
-  border: 2px outset #fff !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;
+  background-color: var(--bg-1) !important;
-  border: 2px outset #fff !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;
+  background-color: var(--bg-2) !important;
-  border: 2px inset #fff !important;
+  border: var(--border-width) inset #fff !important;
   padding: 4px !important;
 }
 
 /* Tooltips */
 [class*="tooltip"] {
-  background-color: #e0ffff !important;
+  background-color: var(--bg-2) !important;
-  border: 2px solid #fff !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;
+  background-color: var(--bg-2) !important;
-  border: 2px outset #fff !important;
+  border: var(--border-width) outset #fff !important;
-  padding: 8px !important;
+  padding: var(--pad) !important;
-  margin: 5px !important;
+  margin: var(--pad) !important;
 }
 
-/* Dropdown menus (expanded) */
+/* Expanded dropdowns */
 [class*="dropdown"],
 [class*="select"] {
-  background-color: #e0ffff !important;
+  background-color: var(--bg-2) !important;
-  border: 2px inset #fff !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;
+  font-family: var(--font) !important;
-  color: #000 !important;
+  color: var(--txt-1) !important;
 }
+
+/* -----------------------------------------------------------------------------
+   End Retro98 Discord Theme
+----------------------------------------------------------------------------- */