Draft: rough-ish draft of proposed color theme changes (#2067)

* color experimentation and troubleshooting

* create color scheme, assign colors, more ant overrides

* fun selection color

* Prettified Code!

* Correctly import opensans

* Prettified Code!

* Organize+standardize colors/names and update the app to use them

* Prettified Code!

* Use css var references instead of resolving value of vars in css files

* Prettified Code!

Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
Co-authored-by: gabek <gabek@users.noreply.github.com>
This commit is contained in:
gingervitis
2022-08-29 23:17:12 -07:00
committed by GitHub
parent a0a28fa572
commit d5fa81f76e
32 changed files with 817 additions and 325 deletions

View File

@@ -1,20 +1,23 @@
/* Change all text and icon colors in the player. */
.vjs-owncast.video-js {
color: var(--theme-text-secondary);
color: var(--theme-color-components-text-on-light);
}
.vjs-owncast .vjs-big-play-button {
z-index: 10;
color: var(--theme-text-secondary);
font-size: 15rem !important;
color: var(--theme-color-action);
font-size: 8rem !important;
border-color: transparent !important;
border-radius: var(--theme-rounded-corners) !important;
background-color: transparent !important;
text-shadow: 2px 3px 4px #0000005f;
-webkit-text-stroke: 2px white;
text-stroke: 2px white;
:hover {
transition: all 0.2s ease-in-out;
font-size: 20rem;
font-size: 10rem;
text-shadow: 2px 5px 4px #00000093;
}
}
@@ -22,16 +25,16 @@
.vjs-owncast .vjs-loading-spinner {
z-index: 10;
display: block;
color: var(--theme-text-secondary);
color: var(--theme-color-components-text-on-light);
}
.vjs-owncast .vjs-control-bar {
color: var(--theme-text-secondary);
background-color: var(--theme-background-primary) !important;
color: var(--theme-color-components-text-on-light);
background-color: var(--theme-color-background-main) !important;
}
.vjs-owncast .vjs-control {
color: var(--theme-text-secondary);
color: var(--theme-color-components-text-on-light);
}
.vjs-airplay .vjs-icon-placeholder::before {