154 lines
4.7 KiB
CSS
154 lines
4.7 KiB
CSS
/**
|
||
* @name Retro98 Minimalist Discord Theme (DRY)
|
||
* @description A minimalist, retro Windows 98–inspired Discord theme leveraging 98.css.
|
||
* Uses a pared‑down layout with vintage colors, “MS Sans Serif” typography,
|
||
* and classic borders/buttons.
|
||
* @author YourName
|
||
* @version 1.0.0
|
||
*/
|
||
|
||
/* Import 98.css for base retro styling */
|
||
@import url('https://unpkg.com/98.css');
|
||
|
||
/* --------------------------------------------------------------------------
|
||
Variables & Base Reset
|
||
--------------------------------------------------------------------------- */
|
||
:root {
|
||
/* Fonts & Spacing */
|
||
--font: "MS Sans Serif", sans-serif;
|
||
--pad: 8px; /* overall padding/margin */
|
||
--border-width: 1px; /* thinner borders for minimalism */
|
||
|
||
/* Colors */
|
||
--bg-main: #c0c0c0; /* Main overall background (classic Win98 gray) */
|
||
--bg-panel: #e0ffff; /* Content panels & modals: light cyan */
|
||
--bg-sidebar: #d3d3d3; /* Sidebars: light gray */
|
||
--txt-color: #000; /* Dark text for high contrast */
|
||
--border-color: #fff; /* White borders */
|
||
|
||
/* State / Interaction */
|
||
--hover-effect: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
html, body, * {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: var(--font) !important;
|
||
color: var(--txt-color) !important;
|
||
background: var(--bg-main) !important;
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
Shared Styles
|
||
--------------------------------------------------------------------------- */
|
||
|
||
/* Minimalist panel style (for content areas, modals, chat bubbles, etc.) */
|
||
.panel,
|
||
[class*="content"],
|
||
[class*="message"],
|
||
.modal, [class*="modal"],
|
||
.window, [class*="window"] {
|
||
background-color: var(--bg-panel) !important;
|
||
border: var(--border-width) outset var(--border-color) !important;
|
||
box-shadow: 1px 1px 0 #000 !important;
|
||
padding: var(--pad) !important;
|
||
margin: var(--pad) !important;
|
||
}
|
||
|
||
/* Sidebar style */
|
||
.sidebar, [class*="sidebar"] {
|
||
background-color: var(--bg-sidebar) !important;
|
||
border: var(--border-width) inset var(--border-color) !important;
|
||
padding: var(--pad) !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;
|
||
margin: var(--pad) !important;
|
||
}
|
||
|
||
/* Buttons & Interactive Elements */
|
||
button, [class*="button"] {
|
||
background: linear-gradient(to bottom, #f0ffff, var(--bg-sidebar)) !important;
|
||
border: var(--border-width) outset var(--border-color) !important;
|
||
box-shadow: 1px 1px 0 #000 !important;
|
||
padding: 4px 8px !important;
|
||
margin: 2px !important;
|
||
cursor: pointer;
|
||
color: var(--txt-color) !important;
|
||
transition: border 0.2s ease;
|
||
}
|
||
button:hover, [class*="button"]:hover {
|
||
border: var(--border-width) inset var(--border-color) !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* Scrollable Areas & Custom Scrollbars */
|
||
.scroller, [class*="scroller"] {
|
||
background-color: var(--bg-sidebar) !important;
|
||
border: var(--border-width) solid var(--border-color) !important;
|
||
padding: 4px !important;
|
||
}
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
::-webkit-scrollbar-track {
|
||
background: var(--bg-panel);
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
background: var(--bg-sidebar);
|
||
border: var(--border-width) solid var(--border-color);
|
||
}
|
||
|
||
/* Form Elements (inputs, textareas, selects) */
|
||
input, textarea, select {
|
||
background-color: #fff !important;
|
||
border: var(--border-width) inset var(--border-color) !important;
|
||
padding: 4px !important;
|
||
margin: 2px !important;
|
||
color: var(--txt-color) !important;
|
||
}
|
||
|
||
/* Avatars & Icons */
|
||
.avatar, [class*="avatar"] img {
|
||
border: var(--border-width) solid var(--border-color) !important;
|
||
box-shadow: 1px 1px 0 #000 !important;
|
||
}
|
||
|
||
/* Tabs, Dropdowns, Menus & Tooltips */
|
||
.tab, [class*="tab"],
|
||
.dropdown, [class*="dropdown"],
|
||
.select, [class*="select"],
|
||
.tooltip, [class*="tooltip"] {
|
||
background-color: var(--bg-panel) !important;
|
||
border: var(--border-width) outset var(--border-color) !important;
|
||
padding: 4px 8px !important;
|
||
margin: 2px !important;
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
Layout Container Overrides (Minimalist Adjustments)
|
||
--------------------------------------------------------------------------- */
|
||
|
||
/* Main app container: remove extra padding/margin */
|
||
#app-mount,
|
||
.appMount__51fd7,
|
||
.app__160d8 {
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
background-color: var(--bg-main) !important;
|
||
}
|
||
|
||
/* Force our retro styling on all elements */
|
||
* {
|
||
font-family: var(--font) !important;
|
||
color: var(--txt-color) !important;
|
||
}
|