u68467/publicfiles
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update discord98.css

Browse Source
This commit is contained in:
u68467 2025-02-13 13:21:47 +01:00
parent 52faf3cec7
commit 4ba2ad4d58
1 changed files with 67 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
discord98.css
View File

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