218 lines
6.4 KiB
CSS
218 lines
6.4 KiB
CSS
/**
|
|
* @name Retro Win98 Discord Theme
|
|
* @description A custom Discord skin inspired by Windows 98 (Chicago) using 98.css with refined colors, fonts, and buttons.
|
|
* @author YourName
|
|
* @version 1.1.0
|
|
*/
|
|
|
|
/* Import the 98.css library for base retro styling */
|
|
@import url('https://unpkg.com/98.css');
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Global Styling
|
|
----------------------------------------------------------------------------- */
|
|
|
|
/* 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 */
|
|
}
|
|
|
|
/* Set the overall app background to a light cyan */
|
|
#app-mount,
|
|
.appMount__51fd7,
|
|
.app__160d8 {
|
|
background-color: #e0ffff !important; /* Light cyan */
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Content Areas & Panels
|
|
----------------------------------------------------------------------------- */
|
|
|
|
/* Main content panels (e.g., chat windows, channel content) */
|
|
[class*="content"] {
|
|
background-color: #e0ffff !important; /* Light cyan background */
|
|
border: 2px outset #fff !important;
|
|
box-shadow: 2px 2px 0 #000 !important;
|
|
padding: 10px !important;
|
|
margin: 5px !important;
|
|
}
|
|
|
|
/* Sidebars (server list, member list, etc.) */
|
|
[class*="sidebar"] {
|
|
background-color: #d3d3d3 !important; /* Light gray background */
|
|
border: 2px inset #fff !important;
|
|
padding: 10px !important;
|
|
margin: 5px !important;
|
|
}
|
|
|
|
/* Headers / Title Bars (top navigation, channel headers) */
|
|
[class*="header"],
|
|
[class*="titlebar"],
|
|
[class*="topbar"] {
|
|
background-color: #e0ffff !important;
|
|
border-bottom: 2px outset #fff !important;
|
|
padding: 5px 10px !important;
|
|
margin-bottom: 5px !important;
|
|
}
|
|
|
|
/* Footers */
|
|
[class*="footer"] {
|
|
background-color: #d3d3d3 !important;
|
|
border-top: 2px outset #fff !important;
|
|
padding: 5px !important;
|
|
margin-top: 5px !important;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Scrollable Areas
|
|
----------------------------------------------------------------------------- */
|
|
|
|
/* General scrollable regions (e.g., message lists, channel lists) */
|
|
[class*="scroller"] {
|
|
background-color: #d3d3d3 !important;
|
|
border: 1px solid #fff !important;
|
|
padding: 5px !important;
|
|
}
|
|
|
|
/* Custom scrollbar styling for WebKit browsers */
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #e0ffff;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #d3d3d3;
|
|
border: 2px solid #fff;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Buttons
|
|
----------------------------------------------------------------------------- */
|
|
|
|
/* Retro-styled buttons */
|
|
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;
|
|
box-shadow: 1px 1px 0 #000 !important;
|
|
padding: 4px 8px !important;
|
|
margin: 2px !important;
|
|
cursor: pointer;
|
|
color: #000 !important;
|
|
}
|
|
|
|
/* Button hover: simulate a pressed effect */
|
|
button:hover, [class*="button"]:hover {
|
|
border: 2px inset #fff !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Modals & Windows
|
|
----------------------------------------------------------------------------- */
|
|
|
|
/* Modals, dialogs, and floating windows */
|
|
[class*="modal"],
|
|
[class*="window"] {
|
|
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
|
|
----------------------------------------------------------------------------- */
|
|
|
|
/* Text inputs, textareas, and select boxes */
|
|
input, textarea, select {
|
|
font-family: "MS Sans Serif", sans-serif !important;
|
|
background-color: #ffffff !important;
|
|
border: 2px inset #fff !important;
|
|
padding: 4px !important;
|
|
margin: 2px !important;
|
|
color: #000 !important;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Chat & Messages
|
|
----------------------------------------------------------------------------- */
|
|
|
|
/* Chat bubbles and individual messages */
|
|
[class*="message"] {
|
|
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: enforce a retro border */
|
|
img.avatar, [class*="avatar"] img {
|
|
border: 2px solid #fff !important;
|
|
box-shadow: 1px 1px 0 #000 !important;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Tabs & Menus
|
|
----------------------------------------------------------------------------- */
|
|
|
|
/* Tabbed elements (channel tabs, settings tabs, etc.) */
|
|
[class*="tab"] {
|
|
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: #e0ffff !important;
|
|
border: 2px solid #fff !important;
|
|
box-shadow: 1px 1px 0 #000 !important;
|
|
padding: 4px !important;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Additional UI Overrides
|
|
----------------------------------------------------------------------------- */
|
|
|
|
/* Channel and conversation windows */
|
|
[class*="channel"],
|
|
[class*="conversation"] {
|
|
background-color: #e0ffff !important;
|
|
border: 2px outset #fff !important;
|
|
padding: 8px !important;
|
|
margin: 5px !important;
|
|
}
|
|
|
|
/* Dropdown menus (expanded) */
|
|
[class*="dropdown"],
|
|
[class*="select"] {
|
|
background-color: #e0ffff !important;
|
|
border: 2px inset #fff !important;
|
|
padding: 4px !important;
|
|
}
|
|
|
|
/* Force the retro look on nearly every element */
|
|
* {
|
|
font-family: "MS Sans Serif", sans-serif !important;
|
|
color: #000 !important;
|
|
}
|