publicfiles/discord98.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');

/* 
  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;
  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: 10px !important;
  margin: 5px !important;
}

/* Sidebars (server list, member list, etc.) */
[class*="sidebar"] {
  background-color: #c0c0c0 !important;
  border: 2px inset #fff !important;
  padding: 10px !important;
  margin: 5px !important;
}

/* 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;
}

/* 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;
  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     */
/* --------------------------- */