mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 13:48:38 +00:00
A lot of general stylings.
This commit is contained in:
parent
5d1db70180
commit
47606397a9
137
main.css
137
main.css
@ -12,12 +12,36 @@
|
||||
--discord-grey-8: #5e6064;
|
||||
--discord-text: hsl( 210 calc(1 * 9.1%) 87.1% /1);
|
||||
|
||||
--darktheme-blue: rgb(33 69 114);
|
||||
--darktheme-green: rgb(36 88 49);
|
||||
--darktheme-brown: rgb(96 58 25);
|
||||
--darktheme-yellow: rgb(84 70 9);
|
||||
--darktheme-red: rgb(161, 45, 45);
|
||||
--darktheme-blue: rgb(33, 69, 114);
|
||||
--darktheme-green: rgb(36, 88, 49);
|
||||
--darktheme-lightgreen: rgb(92, 169, 48);
|
||||
--darktheme-brown: rgb(96, 58, 25);
|
||||
--darktheme-yellow: rgb(84, 70, 9);
|
||||
|
||||
/* Discord Greys */
|
||||
/* Director v2 - General colors */
|
||||
/* Links */
|
||||
--a-dark-link: rgb(145 197 115);
|
||||
--a-dark-visited: rgb(145 197 115);
|
||||
--a-dark-hover: rgb(142 219 98);
|
||||
--a-dark-focus: rgb(142 219 98);
|
||||
--a-dark-active: rgb(145 197 115);
|
||||
|
||||
--a-link: rgb(88 171 41);
|
||||
--a-visited: rgb(88 171 41);
|
||||
--a-hover: rgb(142 219 98);
|
||||
--a-focus: rgb(142 219 98);
|
||||
--a-active: rgb(88 171 41);
|
||||
|
||||
/* Box colors */
|
||||
--director-box: rgb(165 119 18);
|
||||
--codirector-box: rgb(67 122 213);
|
||||
|
||||
--director-dark-box: rgb(165 119 18);
|
||||
--codirector-dark-box: rgb(129 127 127);
|
||||
|
||||
|
||||
/* Original colors */
|
||||
--background-color: #141926;
|
||||
--dark-background-color: #02050c;
|
||||
--container-color: #373737;
|
||||
@ -189,32 +213,41 @@ th {
|
||||
direction: rtl;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
-webkit-app-region: no-drag;
|
||||
text-decoration: none;
|
||||
}
|
||||
.darktheme a:link {
|
||||
color: #B9DFF9;
|
||||
color: var(--a-dark-link);
|
||||
}
|
||||
.darktheme a:visited {
|
||||
text-decoration: none;
|
||||
color: #99BFD9;
|
||||
color: var(--a-dark-visited);
|
||||
}
|
||||
.darktheme a:hover {
|
||||
color: var(--a-dark-hover);
|
||||
}
|
||||
.darktheme a:focus {
|
||||
color: var(--a-dark-focus);
|
||||
}
|
||||
.darktheme a:active {
|
||||
color: #B9DFF9;
|
||||
color: var(--a-dark-active);
|
||||
}
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
color: #2ca8ff;
|
||||
color: var(--a-link);
|
||||
}
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: #2ca8ff;
|
||||
color: var(--a-e);
|
||||
}
|
||||
.darktheme a:hover, a:hover {
|
||||
color: #82cbff;
|
||||
a:hover {
|
||||
color: var(--a-hover);
|
||||
}
|
||||
a:focus {
|
||||
color: var(--a-focus);
|
||||
}
|
||||
a:active {
|
||||
color: #2ca8ff;
|
||||
color: var(--a-active);
|
||||
}
|
||||
|
||||
input {
|
||||
@ -297,10 +330,6 @@ button.hint {
|
||||
background-color: #673100 !important;
|
||||
}
|
||||
|
||||
.directorBlue {
|
||||
background-color: #5c7785 !important;
|
||||
}
|
||||
|
||||
button {
|
||||
-webkit-app-region: no-drag;
|
||||
padding: 7px 10px 6px 6px;
|
||||
@ -693,19 +722,20 @@ body.darktheme .credits>a:visited {
|
||||
}
|
||||
|
||||
.darktheme .advancedAudioSettings .settingsLabel, .darktheme .advancedVideoSettings .settingsLabel {
|
||||
background-color: var(--discord-grey-7);
|
||||
border: 1px solid var(--discord-grey-1);
|
||||
box-shadow: 1px 1px 3px var(--discord-grey-1);
|
||||
}
|
||||
|
||||
.advancedAudioSettings .settingsLabel, .advancedVideoSettings .settingsLabel {
|
||||
background-color: #bbb;
|
||||
background-color: var(--darktheme-lightgreen);
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
border: 1px solid #999;
|
||||
box-shadow: 1px 1px 3px #999;
|
||||
margin: 5px -2px 0px;
|
||||
border: 1px solid #000;
|
||||
color: white;
|
||||
box-shadow: 1px 1px 3px rgba(0,0,0,1);
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.advancedVideoSettings div:nth-child(2) {
|
||||
@ -831,29 +861,20 @@ hr {
|
||||
margin: 0 5px;
|
||||
padding:0;
|
||||
width: 100%;
|
||||
height: 148px;
|
||||
max-width: 260px;
|
||||
height: 148px;
|
||||
max-width: 263px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.directorsgrid .vidcon {
|
||||
display: inline-block;
|
||||
width: 269.7px !important;
|
||||
width: 273px !important;
|
||||
background: #7E7E7E;
|
||||
color: #000;
|
||||
vertical-align: top;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.directorBox {
|
||||
background-color: #606383 !important;
|
||||
display: var(--show-codirectors) !important;
|
||||
}
|
||||
|
||||
.directorBlue {
|
||||
background-color: #5c7785 !important;
|
||||
display: var(--show-codirectors) !important;
|
||||
}
|
||||
|
||||
.directorsgrid .vidcon>.las {
|
||||
color: black;
|
||||
@ -1703,7 +1724,7 @@ input[type=range]::-webkit-slider-runnable-track {
|
||||
height: 8.4px;
|
||||
cursor: pointer;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
background: #5ca930;
|
||||
background-color: var(--darktheme-lightgreen);
|
||||
border-radius: 1.3px;
|
||||
border: 0.2px solid #010101;
|
||||
}
|
||||
@ -1719,7 +1740,7 @@ input[type=range]::-webkit-slider-thumb {
|
||||
margin-top: -8px;
|
||||
}
|
||||
input[type=range]:focus::-webkit-slider-runnable-track {
|
||||
background: #57a32a;
|
||||
background-color: var(--darktheme-lightgreen);
|
||||
}
|
||||
input[type=range]::-moz-range-track {
|
||||
width: 100%;
|
||||
@ -1749,13 +1770,13 @@ input[type=range]::-ms-track {
|
||||
color: transparent;
|
||||
}
|
||||
input[type=range]::-ms-fill-lower {
|
||||
background: #2a6495;
|
||||
background-color: var(--darktheme-lightgreen);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 2.6px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
}
|
||||
input[type=range]::-ms-fill-upper {
|
||||
background: #3071a9;
|
||||
background-color: var(--darktheme-lightgreen);
|
||||
border: 0.2px solid #010101;
|
||||
border-radius: 2.6px;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
@ -1770,10 +1791,10 @@ input[type=range]::-ms-thumb {
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=range]:focus::-ms-fill-lower {
|
||||
background: #3071a9;
|
||||
background-color: var(--darktheme-lightgreen);
|
||||
}
|
||||
input[type=range]:focus::-ms-fill-upper {
|
||||
background: #367ebd;
|
||||
background-color: var(--darktheme-lightgreen);
|
||||
}
|
||||
|
||||
|
||||
@ -2991,10 +3012,6 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me
|
||||
margin: 0 0 0 18px;
|
||||
}
|
||||
|
||||
.popup-message a {
|
||||
|
||||
}
|
||||
|
||||
.context-menu--active {
|
||||
display: block !important;
|
||||
}
|
||||
@ -3835,6 +3852,8 @@ div#roomnotes2 {
|
||||
}
|
||||
|
||||
.controlsGrid .hideDropMenu{
|
||||
border: 1px solid #ffffff;
|
||||
background-color: #bbbbbb;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -5178,7 +5197,8 @@ body.darktheme #headphonesDiv3{
|
||||
background-color: var(--discord-grey-7);
|
||||
}
|
||||
body.darktheme select{
|
||||
background-color: var(--discord-grey-7);
|
||||
background-color: var(--discord-grey-5);
|
||||
border: 1px solid var(--discord-grey-8);
|
||||
color: var(--discord-text);
|
||||
}
|
||||
/* body.darktheme .white {
|
||||
@ -5311,4 +5331,23 @@ body.darktheme .invite_setting_group_links a {
|
||||
box-shadow: inset 0px 0px 1px #b90000;
|
||||
outline: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.directorBoxColor {
|
||||
border: 2px solid var(--director-box);
|
||||
box-shadow: 0px 0px 15px var(--director-box);
|
||||
display: var(--show-codirectors) !important;
|
||||
}
|
||||
|
||||
.darktheme .codirectorBoxColor {
|
||||
border: 2px solid var(--codirector-dark-box);
|
||||
box-shadow: 0px 0px 15px var(--codirector-dark-box);
|
||||
display: var(--show-codirectors) !important;
|
||||
}
|
||||
|
||||
.codirectorBoxColor {
|
||||
border: 2px solid var(--codirector-box);
|
||||
box-shadow: 0px 0px 15px var(--codirector-box);
|
||||
display: var(--show-codirectors) !important;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user