Initial commit.

www/css/channel.css

@@ -0,0 +1,213 @@
+/*Canopy - The next generation of stoner streaming software
+Copyright (C) 2024  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/>.*/
+
+div#channel-flexbox{
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    min-height: 0;
+}
+
+div.panel-head-div{
+    height: 1.2em;
+    display: flex;
+}
+
+.panel-head-element{
+    margin: 0 0.2em 0 0.2em;
+}
+
+i.panel-head-element{
+    height: 1.2em;
+    cursor: pointer;
+}
+
+span.panel-head-spacer-span{
+    flex: 1;
+}
+
+div#media-panel-div{
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    position: relative;
+}
+
+#media-panel-head-div{
+    position: absolute;
+    height: 3em;
+    right: 0;
+    left: 0;
+    top: 0;
+}
+
+video#media-panel-video{
+    flex: 1;
+    min-height: 0;
+}
+
+#media-panel-sync-button{
+    height: 1.5em;
+}
+
+#media-panel-title-paragraph{
+    font-size: 1.2em;
+}
+
+div#chat-panel-div{
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height:100%;
+}
+
+div#chat-panel-main-div{
+    display: flex;
+    flex: 1;
+    height: 1%;
+}
+
+.drag-handle{
+    position: absolute;
+    cursor: ew-resize;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 0.4em; 
+}
+
+#chat-panel-multipanel-div{
+    height: 100%;
+}
+
+#chat-panel-buffer-div{
+    height: 100%;
+    flex: 1;
+    overflow: scroll;
+}
+
+#chat-panel-users-div{
+    position: relative;
+    height: 100%;
+    width: 30%;
+}
+
+#chat-area{
+    height: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+div#chat-panel-control-div{
+    height: 2em;
+    display: flex;
+    flex-direction: row;
+    margin: 0.5em;
+}
+
+i.chat-panel-control{
+    height: 1em;
+    margin: auto;
+    margin-left: 0.5em;
+    cursor: pointer;
+}
+
+#chat-panel-settings-icon{
+    margin-left: 1em;
+}
+
+#chat-panel-prompt{
+    margin-left: 0.5em;
+    width: 100%;
+}
+
+p#chat-panel-high-level-paragraph{
+    margin: auto;
+    margin-left: 0;
+}
+
+p.panel-head-element{
+    font-size: 0.9em;
+}
+
+#chat-panel-flair-select{
+    margin-left: 0.5em;
+}
+
+input#chat-panel-prompt{
+    flex: 1;
+}
+
+#chat-panel-send-button{
+    margin: auto;
+    margin-right: 1em;
+    margin-left: 0.5em;
+    height: 1.5em;
+}
+
+.chat-entry{
+    display: flex;
+}
+
+.chat-entry-username{
+    margin: 0.2em;
+}
+
+.chat-entry-body{
+    margin: 0.2em;
+}
+
+.chat-entry-high-level{
+    margin: 0.2em;
+    z-index: 2;
+    background-image: url("/img/sweet_leaf_simple.png");
+    background-size: 1.3em;
+    background-repeat: no-repeat;
+    background-position-x: center;
+    background-position-y: top;
+    width: 1.5em;
+    text-align: center;
+}
+
+.chat-entry-high-level-img{
+    position: absolute;
+    height: 1.7em;
+}
+
+.user-entry{
+    margin: 0.2em;
+    font-size: 1em;
+}
+
+#media-panel-aspect-lock-icon{
+    display: none;
+}
+
+#chat-panel-user-count{
+    white-space: nowrap;
+    user-select: none;
+    cursor:pointer;
+}
+
+#media-panel-show-chat-icon{
+    display: none;
+}
+
+#chat-panel-show-video-icon{
+    display: none;
+}