Started work on queue panel

www/css/panel/queue.css

@@ -0,0 +1,47 @@
+/*Canopy - The next generation of stoner streaming software
+Copyright (C) 2024-2025 Rainbownapkin and the TTN Community
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
+#queue{
+    position: relative;
+    display: grid;
+    grid-template-columns: auto 75%;
+}
+
+
+div.queue-marker{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    grid-column: 1;
+    z-index: 2;
+}
+
+span.queue-marker{
+    height: 1px;
+    min-width: 5px;
+    flex: 1;
+}
+
+div.queue-entry{
+    overflow: hidden;
+    margin: 1.5em 0.5em;
+    grid-column: 2;
+}
+
+#time-marker{
+    position: absolute;
+    height: 1px;
+    width: 100%;
+}

www/css/theme/movie-night.css

@@ -55,6 +55,8 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
     --userlist-color5:rgb(150, 64, 6);
     --userlist-color6:rgb(111, 61, 204);
 
+    --userlist-contrast-glow: 2px 2px 3px var(--bg0), 2px -2px 3px var(--bg0), -2px 2px 3px var(--bg0), -2px -2px 3px var(--bg0);
+
     --media-header-gradient: linear-gradient(180deg, var(--bg1-alt0) 0%, #FFFFFF00 76%);
 
     --background-panel-effect-pretty: blur(4px);
@@ -75,6 +77,8 @@ body{
     background-color: var(--bg0);
     font-family: var(--main-font);
     color: var(--accent0);
+    background-image: url('/img/background.png');
+    background-size: 5em;
 }
 
 a{
@@ -291,6 +295,15 @@ p.channel-guide-entry-item{
 #chat-area{
     background-color: var(--bg2);
 }
+#chat-panel-head-div{
+    background-color: var(--bg0);
+}
+
+#chat-panel-head-spacer-span, #chat-panel-users-div{
+    background-color: var(--bg0);
+    background-image: url("/img/background.png");
+    background-size: 2.3em
+}
 
 #chat-panel-prompt-autocomplete{
     color: var(--accent0-alt1);
@@ -308,37 +321,34 @@ p.channel-guide-entry-item{
 
 .userlist-color0{/*green0*/
      color: var(--userlist-color0);
-     text-shadow: none;
 }
 
 .userlist-color1{/*red0*/
      color: var(--userlist-color1);
-     text-shadow: none;
 }
 
 .userlist-color2{/*blue0*/
      color: var(--userlist-color2);
-     text-shadow: none;
 }
 
 .userlist-color3{/*tan0*/
      color: var(--userlist-color3);
-     text-shadow: none;
 }
 
 .userlist-color4{/*pink0*/
      color: var(--userlist-color4);
-     text-shadow: none;
 }
 
 .userlist-color5{/*orange*/
      color: var(--userlist-color5);
-     text-shadow: none;
 }
 
 .userlist-color6{/*violet*/
      color: var(--userlist-color6);
-     text-shadow: none;
+}
+
+[class*="userlist-color"].chat-panel-users{
+     text-shadow: var(--userlist-contrast-glow);
 }
 
 .high-level{
@@ -417,6 +427,10 @@ div.tooltip{
 }
 
 /* panel */
+.cpanel-body{
+    background-image: none;
+}
+
 .title-filler-span{
     background-color: var(--accent0);
 }
@@ -444,6 +458,26 @@ span.emote-list-trash-icon{
     border: 1px solid var(--accent0)
 }
 
+span.queue-marker{
+    background-color: var(--accent0);
+}
+
+#time-marker{
+    background-color: var(--danger0);
+}
+
+div.queue-entry{
+    margin: 0.2em;
+    padding: 0 0.7em;
+    border-radius: 1em;
+    background-color: var(--bg1);
+    border: 1px solid var(--accent1);
+}
+
+.queue-entry a{
+    color: var(--accent1);
+}
+
 /* altcha theming*/
 div.altcha{
     box-shadow: 4px 4px 1px var(--bg1-alt0) inset;