diff --git a/discord98.css b/discord98.css index 63062e6..de42135 100644 --- a/discord98.css +++ b/discord98.css @@ -1,36 +1,37 @@ /** * @name Retro Win98 Discord Theme - * @description A custom Discord skin inspired by Windows 98 (Chicago) using 98.css styles. + * @description A custom Discord skin inspired by Windows 98 (Chicago) using 98.css with refined colors, fonts, and buttons. * @author YourName - * @version 1.0.0 + * @version 1.1.0 */ /* Import the 98.css library for base retro styling */ @import url('https://unpkg.com/98.css'); -/* - General overrides for the entire UI - We force a retro font, colors, and borders across the board. -*/ +/* ----------------------------------------------------------------------------- + Global Styling +----------------------------------------------------------------------------- */ + +/* Apply retro font and dark text to all elements */ html, body, * { font-family: "MS Sans Serif", sans-serif !important; - color: #000 !important; + color: #000 !important; /* Dark black fonts for maximum contrast */ } -/* Set the overall background for Discord */ +/* Set the overall app background to a light cyan */ #app-mount, .appMount__51fd7, .app__160d8 { - background-color: #c0c0c0 !important; /* Windows 98 gray */ + background-color: #e0ffff !important; /* Light cyan */ } -/* --------------------------- */ -/* Content Areas & Panels */ -/* --------------------------- */ +/* ----------------------------------------------------------------------------- + Content Areas & Panels +----------------------------------------------------------------------------- */ -/* Main content panels (e.g., chat windows, channel contents) */ +/* Main content panels (e.g., chat windows, channel content) */ [class*="content"] { - background-color: #d4d0c8 !important; /* Classic window background */ + background-color: #e0ffff !important; /* Light cyan background */ border: 2px outset #fff !important; box-shadow: 2px 2px 0 #000 !important; padding: 10px !important; @@ -39,17 +40,17 @@ html, body, * { /* Sidebars (server list, member list, etc.) */ [class*="sidebar"] { - background-color: #c0c0c0 !important; + background-color: #d3d3d3 !important; /* Light gray background */ border: 2px inset #fff !important; padding: 10px !important; margin: 5px !important; } -/* Header / Title Bars (top navigation, channel headers) */ +/* Headers / Title Bars (top navigation, channel headers) */ [class*="header"], [class*="titlebar"], [class*="topbar"] { - background-color: #d4d0c8 !important; + background-color: #e0ffff !important; border-bottom: 2px outset #fff !important; padding: 5px 10px !important; margin-bottom: 5px !important; @@ -57,19 +58,19 @@ html, body, * { /* Footers */ [class*="footer"] { - background-color: #c0c0c0 !important; + background-color: #d3d3d3 !important; border-top: 2px outset #fff !important; padding: 5px !important; margin-top: 5px !important; } -/* --------------------------- */ -/* Scrollable Areas */ -/* --------------------------- */ +/* ----------------------------------------------------------------------------- + Scrollable Areas +----------------------------------------------------------------------------- */ /* General scrollable regions (e.g., message lists, channel lists) */ [class*="scroller"] { - background-color: #c0c0c0 !important; + background-color: #d3d3d3 !important; border: 1px solid #fff !important; padding: 5px !important; } @@ -79,21 +80,22 @@ html, body, * { width: 12px; } ::-webkit-scrollbar-track { - background: #e0e0e0; + background: #e0ffff; } ::-webkit-scrollbar-thumb { - background: #c0c0c0; + background: #d3d3d3; border: 2px solid #fff; } -/* --------------------------- */ -/* Buttons */ -/* --------------------------- */ +/* ----------------------------------------------------------------------------- + Buttons +----------------------------------------------------------------------------- */ -/* Override all buttons and button-like elements */ +/* Retro-styled buttons */ button, [class*="button"] { font-family: "MS Sans Serif", sans-serif !important; - background: linear-gradient(to bottom, #e0e0e0, #c0c0c0) !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; box-shadow: 1px 1px 0 #000 !important; padding: 4px 8px !important; @@ -102,29 +104,29 @@ button, [class*="button"] { color: #000 !important; } -/* On hover, simulate the pressed effect */ +/* Button hover: simulate a pressed effect */ button:hover, [class*="button"]:hover { border: 2px inset #fff !important; box-shadow: none !important; } -/* --------------------------- */ -/* Modals & Windows */ -/* --------------------------- */ +/* ----------------------------------------------------------------------------- + Modals & Windows +----------------------------------------------------------------------------- */ -/* Target modals, dialogs, and floating windows */ +/* Modals, dialogs, and floating windows */ [class*="modal"], [class*="window"] { - background-color: #d4d0c8 !important; + background-color: #e0ffff !important; border: 2px solid #fff !important; box-shadow: 2px 2px 0 #000 !important; padding: 10px !important; margin: 10px auto !important; } -/* --------------------------- */ -/* Inputs & Forms */ -/* --------------------------- */ +/* ----------------------------------------------------------------------------- + Inputs & Forms +----------------------------------------------------------------------------- */ /* Text inputs, textareas, and select boxes */ input, textarea, select { @@ -136,22 +138,22 @@ input, textarea, select { color: #000 !important; } -/* --------------------------- */ -/* Chat & Messages */ -/* --------------------------- */ +/* ----------------------------------------------------------------------------- + Chat & Messages +----------------------------------------------------------------------------- */ /* Chat bubbles and individual messages */ [class*="message"] { - background-color: #d4d0c8 !important; + background-color: #e0ffff !important; border: 2px outset #fff !important; box-shadow: 1px 1px 0 #000 !important; padding: 6px !important; margin: 4px !important; } -/* --------------------------- */ -/* Avatars & Icons */ -/* --------------------------- */ +/* ----------------------------------------------------------------------------- + Avatars & Icons +----------------------------------------------------------------------------- */ /* Avatars: enforce a retro border */ img.avatar, [class*="avatar"] img { @@ -159,43 +161,51 @@ img.avatar, [class*="avatar"] img { box-shadow: 1px 1px 0 #000 !important; } -/* --------------------------- */ -/* Tabs & Menus */ -/* --------------------------- */ +/* ----------------------------------------------------------------------------- + Tabs & Menus +----------------------------------------------------------------------------- */ /* Tabbed elements (channel tabs, settings tabs, etc.) */ [class*="tab"] { - background-color: #c0c0c0 !important; + background-color: #d3d3d3 !important; border: 2px outset #fff !important; padding: 4px 8px !important; margin: 2px !important; } +/* Dropdown menus and select lists */ +[class*="dropdown"], +[class*="select"] { + background-color: #e0ffff !important; + border: 2px inset #fff !important; + padding: 4px !important; +} + /* Tooltips */ [class*="tooltip"] { - background-color: #d4d0c8 !important; + background-color: #e0ffff !important; border: 2px solid #fff !important; box-shadow: 1px 1px 0 #000 !important; padding: 4px !important; } -/* --------------------------- */ -/* Additional UI Overrides */ -/* --------------------------- */ +/* ----------------------------------------------------------------------------- + Additional UI Overrides +----------------------------------------------------------------------------- */ -/* Example: Override common Discord window components */ +/* Channel and conversation windows */ [class*="channel"], [class*="conversation"] { - background-color: #d4d0c8 !important; + background-color: #e0ffff !important; border: 2px outset #fff !important; padding: 8px !important; margin: 5px !important; } -/* Example: Override dropdown menus */ +/* Dropdown menus (expanded) */ [class*="dropdown"], [class*="select"] { - background-color: #d4d0c8 !important; + background-color: #e0ffff !important; border: 2px inset #fff !important; padding: 4px !important; } @@ -204,9 +214,4 @@ img.avatar, [class*="avatar"] img { * { font-family: "MS Sans Serif", sans-serif !important; color: #000 !important; - /* Optionally reset margins/paddings if needed */ } - -/* --------------------------- */ -/* End Retro Styling */ -/* --------------------------- */