Update discord98.css
This commit is contained in:
parent
ca4679d7a2
commit
52faf3cec7
211
discord98.css
211
discord98.css
@ -1,49 +1,212 @@
|
||||
/* Import the retro Windows 98 CSS */
|
||||
/**
|
||||
* @name Retro Win98 Discord Theme
|
||||
* @description A custom Discord skin inspired by Windows 98 (Chicago) using 98.css styles.
|
||||
* @author YourName
|
||||
* @version 1.0.0
|
||||
*/
|
||||
|
||||
/* Import the 98.css library for base retro styling */
|
||||
@import url('https://unpkg.com/98.css');
|
||||
|
||||
/* Override any element whose class name includes "content" */
|
||||
[class*="content"] {
|
||||
/* Apply a retro font and background typical of a Windows 98 window */
|
||||
/*
|
||||
General overrides for the entire UI
|
||||
We force a retro font, colors, and borders across the board.
|
||||
*/
|
||||
html, body, * {
|
||||
font-family: "MS Sans Serif", sans-serif !important;
|
||||
background-color: #d4d0c8 !important; /* Classic Windows 98 window background */
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
/* Set the overall background for Discord */
|
||||
#app-mount,
|
||||
.appMount__51fd7,
|
||||
.app__160d8 {
|
||||
background-color: #c0c0c0 !important; /* Windows 98 gray */
|
||||
}
|
||||
|
||||
/* --------------------------- */
|
||||
/* Content Areas & Panels */
|
||||
/* --------------------------- */
|
||||
|
||||
/* Main content panels (e.g., chat windows, channel contents) */
|
||||
[class*="content"] {
|
||||
background-color: #d4d0c8 !important; /* Classic window background */
|
||||
border: 2px outset #fff !important;
|
||||
box-shadow: 2px 2px 0 #000 !important;
|
||||
padding: 8px !important;
|
||||
padding: 10px !important;
|
||||
margin: 5px !important;
|
||||
}
|
||||
|
||||
/* Override any element whose class name includes "scroller" */
|
||||
[class*="scroller"] {
|
||||
/* Customize scrollbars with a vintage look */
|
||||
scrollbar-face-color: #c0c0c0 !important;
|
||||
scrollbar-track-color: #e0e0e0 !important;
|
||||
scrollbar-arrow-color: #000 !important;
|
||||
scrollbar-shadow-color: #fff !important;
|
||||
}
|
||||
|
||||
/* Override any element whose class name includes "sidebar" */
|
||||
/* Sidebars (server list, member list, etc.) */
|
||||
[class*="sidebar"] {
|
||||
/* Give sidebars a retro background and inset border effect */
|
||||
background-color: #c0c0c0 !important;
|
||||
border: 2px inset #fff !important;
|
||||
font-family: "MS Sans Serif", sans-serif !important;
|
||||
padding: 10px !important;
|
||||
margin: 5px !important;
|
||||
}
|
||||
|
||||
/* Additional example: Override buttons to mimic vintage Windows controls */
|
||||
button,
|
||||
[class*="button"] {
|
||||
/* Header / Title Bars (top navigation, channel headers) */
|
||||
[class*="header"],
|
||||
[class*="titlebar"],
|
||||
[class*="topbar"] {
|
||||
background-color: #d4d0c8 !important;
|
||||
border-bottom: 2px outset #fff !important;
|
||||
padding: 5px 10px !important;
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
/* Footers */
|
||||
[class*="footer"] {
|
||||
background-color: #c0c0c0 !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: #c0c0c0 !important;
|
||||
border: 1px solid #fff !important;
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
||||
/* Custom scrollbar styling for WebKit browsers */
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
/* --------------------------- */
|
||||
/* Buttons */
|
||||
/* --------------------------- */
|
||||
|
||||
/* Override all buttons and button-like elements */
|
||||
button, [class*="button"] {
|
||||
font-family: "MS Sans Serif", sans-serif !important;
|
||||
background: linear-gradient(to bottom, #e0e0e0, #c0c0c0) !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;
|
||||
}
|
||||
|
||||
/* Example for modals or windows */
|
||||
[class*="modal"], [class*="window"] {
|
||||
/* On hover, simulate the pressed effect */
|
||||
button:hover, [class*="button"]:hover {
|
||||
border: 2px inset #fff !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* --------------------------- */
|
||||
/* Modals & Windows */
|
||||
/* --------------------------- */
|
||||
|
||||
/* Target modals, dialogs, and floating windows */
|
||||
[class*="modal"],
|
||||
[class*="window"] {
|
||||
background-color: #d4d0c8 !important;
|
||||
border: 2px solid #fff !important;
|
||||
box-shadow: 2px 2px 0 #000 !important;
|
||||
font-family: "MS Sans Serif", sans-serif !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: #d4d0c8 !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: #c0c0c0 !important;
|
||||
border: 2px outset #fff !important;
|
||||
padding: 4px 8px !important;
|
||||
margin: 2px !important;
|
||||
}
|
||||
|
||||
/* Tooltips */
|
||||
[class*="tooltip"] {
|
||||
background-color: #d4d0c8 !important;
|
||||
border: 2px solid #fff !important;
|
||||
box-shadow: 1px 1px 0 #000 !important;
|
||||
padding: 4px !important;
|
||||
}
|
||||
|
||||
/* --------------------------- */
|
||||
/* Additional UI Overrides */
|
||||
/* --------------------------- */
|
||||
|
||||
/* Example: Override common Discord window components */
|
||||
[class*="channel"],
|
||||
[class*="conversation"] {
|
||||
background-color: #d4d0c8 !important;
|
||||
border: 2px outset #fff !important;
|
||||
padding: 8px !important;
|
||||
margin: 5px !important;
|
||||
}
|
||||
|
||||
/* Example: Override dropdown menus */
|
||||
[class*="dropdown"],
|
||||
[class*="select"] {
|
||||
background-color: #d4d0c8 !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;
|
||||
/* Optionally reset margins/paddings if needed */
|
||||
}
|
||||
|
||||
/* --------------------------- */
|
||||
/* End Retro Styling */
|
||||
/* --------------------------- */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user