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:41:37 +01:00
parent 577b9749dd
commit d4e98028b2
1 changed files with 98 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

328
discord98.css
View File

@ -1,285 +1,153 @@
/** /**
* @name Retro98 Discord Theme * @name Retro98 Minimalist Discord Theme (DRY)
* @description A retro Windows 98–inspired Discord theme leveraging 98.css. * @description A minimalist, retro Windows 98–inspired Discord theme leveraging 98.css.
* Uses vintage colors, “MS Sans Serif” fonts, and classic button and border styles. * Uses a pared‑down layout with vintage colors, “MS Sans Serif” typography,
* and classic borders/buttons.
* @author YourName * @author YourName
* @version 1.0.0 * @version 1.0.0
* @invite YOUR_INVITE_CODE
* @website https://your.website.example/
*/ */
/* Import 98.css for base retro styling */ /* Import 98.css for base retro styling */
@import url('https://unpkg.com/98.css'); @import url('https://unpkg.com/98.css');
/* ----------------------------------------------------------------------------- /* --------------------------------------------------------------------------
Global Variables & Base Styles Variables & Base Reset
----------------------------------------------------------------------------- --------------------------------------------------------------------------- */
These variables set our retro palette, fonts, and spacings.
----------------------------------------------------------------------------- */
:root { :root {
/* Fonts & Basic Spacing */ /* Fonts & Spacing */
--font: "MS Sans Serif", sans-serif; --font: "MS Sans Serif", sans-serif;
letter-spacing: normal; --pad: 8px; /* overall padding/margin */
font-weight: 400; --border-width: 1px; /* thinner borders for minimalism */
--label-font-weight: 500;
--corner-text: 'Retro98';
--pad: 16px;
--txt-pad: 10px;
--panel-roundness: 0px;
/* Background Colors */ /* Colors */
--bg-0: #c0c0c0; /* Main background: classic Windows 98 gray */ --bg-main: #c0c0c0; /* Main overall background (classic Win98 gray) */
--bg-1: #d4d0c8; /* Inner window background: typical window interior */ --bg-panel: #e0ffff; /* Content panels & modals: light cyan */
--bg-2: #e0ffff; /* Accent background: light cyan for content panels */ --bg-sidebar: #d3d3d3; /* Sidebars: light gray */
--bg-3: #d3d3d3; /* Alternative light gray for sidebars & scrollables */ --txt-color: #000; /* Dark text for high contrast */
--border-color: #fff; /* White borders */
/* State Modifiers */
--hover: rgba(0, 0, 0, 0.1); /* State / Interaction */
--active: rgba(0, 0, 0, 0.2); --hover-effect: rgba(0, 0, 0, 0.1);
--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);
} }
/* Apply our retro font and dark text to every element */
html, body, * { html, body, * {
margin: 0;
padding: 0;
font-family: var(--font) !important; font-family: var(--font) !important;
color: var(--txt-1) !important; color: var(--txt-color) !important;
background: var(--bg-0) !important; background: var(--bg-main) !important;
} }
/* ----------------------------------------------------------------------------- /* --------------------------------------------------------------------------
App & Layout Containers Shared Styles
----------------------------------------------------------------------------- */ --------------------------------------------------------------------------- */
/* Main Discord container */ /* Minimalist panel style (for content areas, modals, chat bubbles, etc.) */
#app-mount, .panel,
.appMount__51fd7, [class*="content"],
.app__160d8 { [class*="message"],
background-color: var(--bg-0) !important; .modal, [class*="modal"],
} .window, [class*="window"] {
background-color: var(--bg-panel) !important;
/* ----------------------------------------------------------------------------- border: var(--border-width) outset var(--border-color) !important;
Panels & Content Areas box-shadow: 1px 1px 0 #000 !important;
----------------------------------------------------------------------------- */
/* 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;
padding: var(--pad) !important; padding: var(--pad) !important;
margin: var(--pad) !important; margin: var(--pad) !important;
} }
/* Headers / Title Bars (top navigation, channel headers, etc.) */ /* Sidebar style */
[class*="header"], .sidebar, [class*="sidebar"] {
[class*="titlebar"], background-color: var(--bg-sidebar) !important;
[class*="topbar"] { border: var(--border-width) inset var(--border-color) !important;
background-color: var(--bg-2) !important; padding: var(--pad) !important;
border-bottom: var(--border-width) outset #fff !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; padding: calc(var(--pad) / 2) 10px !important;
margin-bottom: var(--pad) !important; margin: var(--pad) !important;
} }
/* Footers */ /* Buttons & Interactive Elements */
[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 */
button, [class*="button"] { button, [class*="button"] {
font-family: var(--font) !important; background: linear-gradient(to bottom, #f0ffff, var(--bg-sidebar)) !important;
background: linear-gradient(to bottom, #f0ffff, var(--bg-1)) !important; border: var(--border-width) outset var(--border-color) !important;
border: var(--border-width) 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;
margin: 2px !important; margin: 2px !important;
cursor: pointer; cursor: pointer;
color: var(--txt-1) !important; color: var(--txt-color) !important;
transition: border var(--border-transition); transition: border 0.2s ease;
} }
button:hover, [class*="button"]:hover { 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; box-shadow: none !important;
} }
/* ----------------------------------------------------------------------------- /* Scrollable Areas & Custom Scrollbars */
Modals, Windows & Dialogs .scroller, [class*="scroller"] {
----------------------------------------------------------------------------- */ background-color: var(--bg-sidebar) !important;
border: var(--border-width) solid var(--border-color) !important;
/* Floating modals and windows */ padding: 4px !important;
[class*="modal"], }
[class*="window"] { ::-webkit-scrollbar {
background-color: var(--bg-2) !important; width: 8px;
border: var(--border-width) solid #fff !important; }
box-shadow: 2px 2px 0 #000 !important; ::-webkit-scrollbar-track {
padding: var(--pad) !important; background: var(--bg-panel);
margin: var(--pad) auto !important; }
::-webkit-scrollbar-thumb {
background: var(--bg-sidebar);
border: var(--border-width) solid var(--border-color);
} }
/* ----------------------------------------------------------------------------- /* Form Elements (inputs, textareas, selects) */
Form Elements & Inputs
----------------------------------------------------------------------------- */
/* Text inputs, textareas, and select elements */
input, textarea, select { input, textarea, select {
font-family: var(--font) !important;
background-color: #fff !important; background-color: #fff !important;
border: var(--border-width) inset #fff !important; border: var(--border-width) inset var(--border-color) !important;
padding: 4px !important; padding: 4px !important;
margin: 2px !important; margin: 2px !important;
color: var(--txt-1) !important; color: var(--txt-color) !important;
} }
/* ----------------------------------------------------------------------------- /* Avatars & Icons */
Chat & Message Styling .avatar, [class*="avatar"] img {
----------------------------------------------------------------------------- */ border: var(--border-width) solid var(--border-color) !important;
/* 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;
box-shadow: 1px 1px 0 #000 !important; box-shadow: 1px 1px 0 #000 !important;
} }
/* ----------------------------------------------------------------------------- /* Tabs, Dropdowns, Menus & Tooltips */
Tabs, Menus & Tooltips .tab, [class*="tab"],
----------------------------------------------------------------------------- */ .dropdown, [class*="dropdown"],
.select, [class*="select"],
/* Tabbed elements (e.g. channel tabs, settings tabs) */ .tooltip, [class*="tooltip"] {
[class*="tab"] { background-color: var(--bg-panel) !important;
background-color: var(--bg-1) !important; border: var(--border-width) outset var(--border-color) !important;
border: var(--border-width) outset #fff !important;
padding: 4px 8px !important; padding: 4px 8px !important;
margin: 2px !important; margin: 2px !important;
} }
/* Dropdown menus and select lists */ /* --------------------------------------------------------------------------
[class*="dropdown"], Layout Container Overrides (Minimalist Adjustments)
[class*="select"] { --------------------------------------------------------------------------- */
background-color: var(--bg-2) !important;
border: var(--border-width) inset #fff !important; /* Main app container: remove extra padding/margin */
padding: 4px !important; #app-mount,
.appMount__51fd7,
.app__160d8 {
margin: 0 !important;
padding: 0 !important;
background-color: var(--bg-main) !important;
} }
/* Tooltips */ /* Force our retro styling on all elements */
[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 */
* { * {
font-family: var(--font) !important; font-family: var(--font) !important;
color: var(--txt-1) !important; color: var(--txt-color) !important;
} }
/* -----------------------------------------------------------------------------
End Retro98 Discord Theme
----------------------------------------------------------------------------- */