527 lines
12 KiB
CSS
527 lines
12 KiB
CSS
/*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/>.*/
|
|
|
|
/* Theme Variables */
|
|
:root{
|
|
--main-font: "open-sans", system-ui;
|
|
--bg0: rgb(158, 158, 158);
|
|
--bg0-alpha0: rgba(158, 158, 158, 0.4);
|
|
--bg0-alpha1: rgba(158, 158, 158, 0.75);
|
|
--bg1: rgb(70, 70, 70);
|
|
--bg2: rgb(220, 220, 220);
|
|
--bg1-alt0: rgb(30, 30, 30);
|
|
--bg2-alt0: rgb(200, 200, 200);
|
|
--bg2-alt1: rgb(180, 180, 180);
|
|
|
|
--accent0: rgb(47, 47, 47);
|
|
--accent0-alt0: rgb(34, 34, 34);
|
|
--accent0-alt1: rgb(70, 70, 70);
|
|
--accent1: rgb(245, 245, 245);
|
|
--accent1-alt0: rgb(185, 185, 185);
|
|
--accent2: var(--accent0-alt0);
|
|
|
|
--focus0: rgb(51, 153, 51);
|
|
--focus0-alt0: rgb(229, 255, 229);
|
|
--focus0-alt1: rgb(12, 85, 12);
|
|
--focus-glow0: 2px 2px 3px var(--focus0), -2px 2px 3px var(--focus0), 2px -2px 3px var(--focus0), -2px -2px 3px var(--focus0);
|
|
--focus-glow0-inset: 2px 2px 3px var(--focus0) inset, -2px 2px 3px var(--focus0) inset, 2px -2px 3px var(--focus0) inset, -2px -2px 3px var(--focus0) inset;
|
|
--focus-glow0-alt0: 2px 2px 3px var(--focus0-alt0), -2px 2px 3px var(--focus0-alt0), 2px -2px 3px var(--focus0-alt0), -2px -2px 3px var(--focus0-alt0);
|
|
--focus-glow0-alt0-inset: 2px 2px 3px var(--focus0-alt0) inset, -2px 2px 3px var(--focus0-alt0) inset, 2px -2px 3px var(--focus0-alt0) inset, -2px -2px 3px var(--focus0-alt0) inset;
|
|
|
|
--danger0: firebrick;
|
|
--danger0-alt0: rgb(121, 11, 11);
|
|
--danger0-alt1: rgb(255, 105, 105);
|
|
--danger-glow0: 2px 2px 3px var(--danger0), -2px 2px 3px var(--danger0), 2px -2px 3px var(--danger0), -2px -2px 3px var(--danger0);
|
|
--danger-glow0-alt1: 2px 2px 3px var(--danger0-alt1), -2px 2px 3px var(--danger0-alt1), 2px -2px 3px var(--danger0-alt1), -2px -2px 3px var(--danger0-alt1);
|
|
|
|
--timer-glow: -2px 1px 3px var(--danger0-alt1), 2px -1px 3px var(--danger0-alt1);
|
|
|
|
--userlist-color0:rgb(63, 121, 71);
|
|
--userlist-color1:rgb(143, 46, 26);
|
|
--userlist-color2:rgb(51, 101, 161);
|
|
--userlist-color3:rgb(110, 94, 13);
|
|
--userlist-color4:rgb(129, 43, 43);
|
|
--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);
|
|
--background-panel-effect-fast: none;
|
|
|
|
/* altcha theming */
|
|
--altcha-border-width: 1px;
|
|
--altcha-border-radius: 1em;
|
|
--altcha-color-base: var(--bg1);
|
|
--altcha-color-border: var(--accent1);
|
|
--altcha-color-text: var(--accent1);
|
|
--altcha-color-error-text: var(--danger0);
|
|
--altcha-max-width: 260px;
|
|
}
|
|
|
|
/* global */
|
|
body{
|
|
background-color: var(--bg0);
|
|
font-family: var(--main-font);
|
|
color: var(--accent0);
|
|
background-image: url('/img/background.png');
|
|
background-size: 5em;
|
|
}
|
|
|
|
a{
|
|
text-decoration: none;
|
|
color: var(--accent0);
|
|
}
|
|
|
|
/* NOT! -Wayne */
|
|
a:hover, i:hover:not(button i), .interactive:hover{
|
|
color: var(--focus0-alt0);
|
|
text-shadow: var(--focus-glow0);
|
|
}
|
|
|
|
a:active, i:active:not(button i), .interactive:active{
|
|
color: var(--focus0-alt1);
|
|
text-shadow: var(--focus-glow0-alt0);
|
|
}
|
|
|
|
button i{
|
|
margin: 0.05em;
|
|
text-wrap: nowrap;
|
|
}
|
|
|
|
select{
|
|
background-color: var(--bg2);
|
|
border-radius: 0.5em;
|
|
border: none;
|
|
}
|
|
|
|
button{
|
|
background-color: var(--bg0);
|
|
color: var(--accent0);
|
|
border: none;
|
|
border-radius: 0.5em;
|
|
}
|
|
|
|
button:hover{
|
|
color: var(--focus0-alt1);
|
|
background-color: var(--focus0-alt0);
|
|
box-shadow: var(--focus-glow0);
|
|
}
|
|
|
|
button:active{
|
|
color: var(--focus0-alt0);
|
|
background-color: var(--focus0-alt1);
|
|
box-shadow: var(--focus-glow0-alt0);
|
|
}
|
|
|
|
input:focus, textarea:focus{
|
|
outline: none;
|
|
box-shadow: var(--focus-glow0);
|
|
}
|
|
|
|
input:checked{
|
|
accent-color: var(--focus0-alt0);
|
|
box-shadow: var(--focus-glow0);
|
|
}
|
|
|
|
input:not([type='checkbox']):not(.navbar-item), textarea {
|
|
border-radius: 1em;
|
|
border: none;
|
|
padding: 0.1em 0.5em;
|
|
}
|
|
|
|
textarea{
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.positive{
|
|
color: var(--focus0-alt0);
|
|
text-shadow: var(--focus-glow0);
|
|
}
|
|
|
|
.danger-button{
|
|
background-color: var(--danger0);
|
|
color: var(--accent1);
|
|
}
|
|
|
|
.danger-button:hover{
|
|
background-color: var(--danger0-alt1);
|
|
color: var(--danger0-alt0);
|
|
box-shadow: var(--danger-glow0);
|
|
}
|
|
|
|
.danger-button:active{
|
|
background-color: var(--danger0-alt0);
|
|
color: var(--accent0-alt0);
|
|
box-shadow: var(--danger-glow0-alt1);
|
|
}
|
|
|
|
.danger-link, .danger-text{
|
|
color: var(--danger0);
|
|
}
|
|
|
|
.danger-link:hover{
|
|
color: var(--danger0-alt1);
|
|
text-shadow: var(--danger-glow0);
|
|
}
|
|
|
|
.danger-link:active{
|
|
color: var(--danger0-alt0);
|
|
text-shadow: var(--danger-glow0-alt1);
|
|
}
|
|
|
|
.positive-button{
|
|
background-color: var(--focus0);
|
|
color: white;
|
|
}
|
|
|
|
.positive-button:hover{
|
|
color: var(--focus0-alt1);
|
|
background-color: var(--focus0-alt0);
|
|
}
|
|
|
|
.positive-button:active{
|
|
color: var(--focus0-alt0);
|
|
background-color: var(--focus0-alt1);
|
|
}
|
|
|
|
.dynamic-container{
|
|
background-color: var(--bg1);
|
|
color: var(--accent1);
|
|
}
|
|
|
|
.nested-dynamic-container{
|
|
border: 1px var(--accent1) solid;
|
|
background-color: var(--bg0);
|
|
color: var(--accent0);
|
|
}
|
|
|
|
.dynamic-container, .nested-dynamic-container{
|
|
box-shadow: 3px 3px 1px var(--bg1-alt0) inset;
|
|
border-radius: 1em;
|
|
}
|
|
|
|
.dynamic-container a{
|
|
color: var(--accent1);
|
|
}
|
|
|
|
|
|
tr{
|
|
box-shadow: var(--accent1) 0px 1em 1px -2em, var(--accent1) 0px -1em 1px -1em;
|
|
}
|
|
|
|
td.not-first-col{
|
|
box-shadow: var(--accent1) 1em 0px 1px -2em, var(--accent1) -1em 0px 1px -1em;
|
|
}
|
|
|
|
a.admin-list-entry-item{
|
|
color: var(--accent1);
|
|
}
|
|
|
|
div.control-prompt{
|
|
border-radius: 1em;
|
|
background-color: white;
|
|
}
|
|
|
|
div.control-prompt:focus-within{
|
|
box-shadow: var(--focus-glow0);
|
|
}
|
|
|
|
input.control-prompt, input.control-prompt:focus{
|
|
border: none;
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
|
|
.seperator{
|
|
background-color: var(--accent0);
|
|
}
|
|
|
|
/* navbar */
|
|
#navbar{
|
|
background-color: var(--bg1);
|
|
}
|
|
|
|
.navbar-item{
|
|
color: var(--accent1);
|
|
border: hidden;
|
|
}
|
|
|
|
.navbar-item input{
|
|
background-color: var(--bg1-alt0);
|
|
}
|
|
|
|
/* index */
|
|
.channel-guide-entry{
|
|
background-color: var(--bg1);
|
|
color: var(--accent1);
|
|
}
|
|
|
|
div.channel-guide-entry{
|
|
border-radius: 0.3em;
|
|
box-shadow: 0.2em 0.2em 0.1em var(--bg1-alt0) inset;
|
|
}
|
|
|
|
span.channel-guide-entry-item{
|
|
background-color: var(--bg1-alt0);
|
|
box-shadow: 0.2em 0.2em 0.1em black inset;
|
|
border-radius: 0.3em;
|
|
margin: 0 0.1em 0 0.1em;
|
|
}
|
|
|
|
|
|
p.channel-guide-entry-item{
|
|
background-color: var(--bg1-alt0);
|
|
}
|
|
|
|
/* channel */
|
|
#media-panel-div{
|
|
background-color: black;
|
|
}
|
|
|
|
#chat-panel-buffer-div{
|
|
background-color: var(--bg2);
|
|
}
|
|
|
|
#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);
|
|
text-shadow: var(--focus-glow0-alt0);
|
|
}
|
|
|
|
.chat-entry{
|
|
background-color: var(--bg2);
|
|
border-bottom: 1px solid var(--bg2-alt1);
|
|
}
|
|
|
|
.serverwhisper{
|
|
color: var(--accent0-alt1)
|
|
}
|
|
|
|
.userlist-color0{/*green0*/
|
|
color: var(--userlist-color0);
|
|
}
|
|
|
|
.userlist-color1{/*red0*/
|
|
color: var(--userlist-color1);
|
|
}
|
|
|
|
.userlist-color2{/*blue0*/
|
|
color: var(--userlist-color2);
|
|
}
|
|
|
|
.userlist-color3{/*tan0*/
|
|
color: var(--userlist-color3);
|
|
}
|
|
|
|
.userlist-color4{/*pink0*/
|
|
color: var(--userlist-color4);
|
|
}
|
|
|
|
.userlist-color5{/*orange*/
|
|
color: var(--userlist-color5);
|
|
}
|
|
|
|
.userlist-color6{/*violet*/
|
|
color: var(--userlist-color6);
|
|
}
|
|
|
|
[class*="userlist-color"].chat-panel-users{
|
|
text-shadow: var(--userlist-contrast-glow);
|
|
}
|
|
|
|
.high-level{
|
|
text-shadow: 1px 1px 1px white, -1px -1px 1px white, 1px 1px 1px white, -1px 1px 1px white, 1px -1px 1px white;
|
|
}
|
|
|
|
#media-panel-head-div{
|
|
background: rgb(2,0,36);
|
|
background: var(--media-header-gradient);
|
|
color: var(--accent1-alt0);
|
|
}
|
|
|
|
select.panel-head-element{
|
|
height: 1.2em;
|
|
margin: auto;
|
|
}
|
|
|
|
#cpanel-active-div{
|
|
background-color: var(--bg0-alpha1);
|
|
backdrop-filter: var(--background-panel-effect-fast);
|
|
}
|
|
|
|
.cpanel-div{
|
|
background-color: var(--bg0);
|
|
}
|
|
|
|
|
|
.cpanel-header-div{
|
|
border-bottom: solid 1px var(--accent0);
|
|
}
|
|
|
|
.announcement-title{
|
|
background-color: var(--danger0-alt0);
|
|
color: var(--accent1);
|
|
}
|
|
|
|
.chat-link{
|
|
color: var(--focus0);
|
|
user-select: all;
|
|
}
|
|
|
|
.chat-dead-link{
|
|
text-decoration: line-through;
|
|
text-decoration-color: var(--danger0-alt0);
|
|
}
|
|
|
|
/* popup */
|
|
|
|
.popup-backer{
|
|
background-color: var(--bg0-alpha1);
|
|
backdrop-filter: var(--background-panel-effect-fast);
|
|
}
|
|
|
|
.popup-div{
|
|
background-color: var(--bg1);
|
|
color: var(--accent1);
|
|
box-shadow: 3px 3px 1px var(--bg1-alt0) inset;
|
|
border-radius: 1em;
|
|
}
|
|
|
|
#delete-account-popup-title, #delete-channel-popup-title{
|
|
color: var(--danger0);
|
|
}
|
|
|
|
.popup-div a{
|
|
color: var(--accent1);
|
|
}
|
|
|
|
/* tooltip */
|
|
div.tooltip{
|
|
background-color: var(--bg1);
|
|
color: var(--accent1);
|
|
border: 1px solid var(--accent1);
|
|
box-shadow: 4px 4px 1px var(--bg1-alt0) inset;
|
|
border-radius: 1em;
|
|
}
|
|
|
|
/* panel containers */
|
|
.cpanel-body{
|
|
background-image: none;
|
|
}
|
|
|
|
.title-filler-span{
|
|
background-color: var(--accent0);
|
|
}
|
|
|
|
/* panels */
|
|
/* emote panel */
|
|
span.emote-panel-list-emote{
|
|
border: 1px solid var(--accent0);
|
|
}
|
|
|
|
span.emote-panel-list-emote:hover, span.emote-list-trash-icon:hover{
|
|
color: var(--focus0-alt0);
|
|
border: 1px solid var(--focus0-alt0);
|
|
text-shadow: var(--focus-glow0);
|
|
box-shadow: var(--focus-glow0), var(--focus-glow0-inset);
|
|
}
|
|
|
|
span.emote-panel-list-emote:active, span.emote-list-trash-icon:active{
|
|
color: var(--focus0-alt1);
|
|
text-shadow: var(--focus-glow0-alt0);
|
|
border: 1px solid var(--focus0-alt1);
|
|
box-shadow: var(--focus-glow0-alt0), var(--focus-glow0-alt0-inset);
|
|
}
|
|
|
|
span.emote-list-trash-icon{
|
|
background-color: var(--bg2);
|
|
border: 1px solid var(--accent0)
|
|
}
|
|
|
|
/* queue panel */
|
|
#queue-controls{
|
|
background-color: var(--bg0-alpha1);
|
|
}
|
|
|
|
span.queue-marker{
|
|
background-color: var(--accent0);
|
|
}
|
|
|
|
#time-marker{
|
|
background-color: var(--danger0);
|
|
box-shadow: var(--timer-glow);
|
|
}
|
|
|
|
|
|
|
|
div.queue-entry{
|
|
margin: 0.2em;
|
|
padding: 0 0.7em;
|
|
border-radius: 0.3em;
|
|
background-color: var(--bg1);
|
|
border: 1px solid var(--accent1);
|
|
}
|
|
|
|
.queue-entry p{
|
|
color: var(--accent1);
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.media-tooltip{
|
|
font-family: monospace;
|
|
}
|
|
|
|
#queue-control-buttons button:not(:hover, .danger-button, .positive-button){
|
|
background-color: var(--bg2-alt1);
|
|
}
|
|
|
|
div.started-before-today{
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
border-top: 1px dashed var(--accent1);
|
|
}
|
|
|
|
div.ends-after-today{
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-bottom: 1px dashed var(--accent1);
|
|
}
|
|
|
|
/* altcha theming*/
|
|
div.altcha{
|
|
box-shadow: 4px 4px 1px var(--bg1-alt0) inset;
|
|
}
|
|
|
|
altcha-widget a{
|
|
color: var(--accent1);
|
|
} |