Add Hot Dog Stand theme

public/index.html

@@ -64,6 +64,7 @@
             <option value="cinema">Cinema Queue</option>
           </optgroup>
           <optgroup label="Bad Ideas">
+            <option value="hotdog">Hot Dog Stand</option>
             <option value="spreadsheet">Bad Spreadsheet</option>
             <option value="myspace">MySpace Accident</option>
             <option value="sideways">Sideways Doomscroll</option>

public/styles.css

@@ -931,6 +931,97 @@ body[data-ui-theme="cinema"] #queue-panel { order: 3; max-height: 70vh; }
 body[data-ui-theme="cinema"] #queue .track.active { font-size: 1rem; padding: 0.65rem 0.75rem; }
 body[data-ui-theme="cinema"] #player-bar { border-top: 4px solid var(--accent); }
 
+body[data-ui-theme="hotdog"] {
+  --panel-bg: #ffff00;
+  --panel-border: #000000;
+  --text-color: #000000;
+  --heading-color: #ffff00;
+  --control-bg: #ffffff;
+  --control-border: #000000;
+  --control-color: #000000;
+  --hover-bg: #ff0000;
+  --active-bg: #ff0000;
+  --active-color: #ffffff;
+  --accent: #ff0000;
+  --warning: #000000;
+  background: #ff0000;
+  color: #000000;
+  font-family: "MS Sans Serif", "Arial", sans-serif;
+}
+
+body[data-ui-theme="hotdog"] #site-header h1,
+body[data-ui-theme="hotdog"] h3,
+body[data-ui-theme="hotdog"] .panel-tab.active {
+  background: #ff0000;
+  color: #ffff00;
+  padding: 0.1rem 0.25rem;
+}
+
+body[data-ui-theme="hotdog"] #channels-panel,
+body[data-ui-theme="hotdog"] #library-panel,
+body[data-ui-theme="hotdog"] #queue-panel,
+body[data-ui-theme="hotdog"] #player-bar,
+body[data-ui-theme="hotdog"] #login-panel,
+body[data-ui-theme="hotdog"] .panel-views,
+body[data-ui-theme="hotdog"] #toast-history,
+body[data-ui-theme="hotdog"] .context-menu {
+  border: 3px solid #000000;
+  border-radius: 0;
+  box-shadow: 5px 5px 0 #000000;
+}
+
+body[data-ui-theme="hotdog"] button,
+body[data-ui-theme="hotdog"] select,
+body[data-ui-theme="hotdog"] input,
+body[data-ui-theme="hotdog"] .panel-tab,
+body[data-ui-theme="hotdog"] .track-actions .track-menu-btn,
+body[data-ui-theme="hotdog"] .track-actions .track-play-btn,
+body[data-ui-theme="hotdog"] .track-actions .track-preview-btn {
+  border: 2px outset #ffffff;
+  border-radius: 0;
+  font-weight: 700;
+}
+
+body[data-ui-theme="hotdog"] button:active,
+body[data-ui-theme="hotdog"] .panel-tab.active {
+  border-style: inset;
+}
+
+body[data-ui-theme="hotdog"] .panel-tab,
+body[data-ui-theme="hotdog"] .track,
+body[data-ui-theme="hotdog"] .playlist-item,
+body[data-ui-theme="hotdog"] .context-menu-item,
+body[data-ui-theme="hotdog"] .channel-item {
+  border-radius: 0;
+}
+
+body[data-ui-theme="hotdog"] .track:hover,
+body[data-ui-theme="hotdog"] .context-menu-item:hover,
+body[data-ui-theme="hotdog"] .playlist-item:hover {
+  color: #ffff00;
+}
+
+body[data-ui-theme="hotdog"] #queue .track.active,
+body[data-ui-theme="hotdog"] .now-playing-bar,
+body[data-ui-theme="hotdog"] .mobile-tab.active,
+body[data-ui-theme="hotdog"] .toast {
+  border: 2px solid #000000;
+  text-transform: uppercase;
+}
+
+body[data-ui-theme="hotdog"] #progress-container,
+body[data-ui-theme="hotdog"] #buffer-bar .segment {
+  background: #ffffff;
+  border: 1px solid #000000;
+  border-radius: 0;
+}
+
+body[data-ui-theme="hotdog"] #progress-bar.playing.synced,
+body[data-ui-theme="hotdog"] #buffer-bar .segment.available,
+body[data-ui-theme="hotdog"] .track.cached .cache-indicator {
+  background: #ff0000;
+}
+
 html[data-ui-theme="spreadsheet"],
 html[data-ui-theme="myspace"],
 html[data-ui-theme="sideways"] {

public/themes.js

@@ -14,6 +14,7 @@
     "amber",
     "compact",
     "cinema",
+    "hotdog",
     "spreadsheet",
     "myspace",
     "sideways"