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