82 lines
2.0 KiB
CSS
82 lines
2.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
|
|
color-scheme: light dark;
|
|
color: rgba(255, 255, 255, 0.87);
|
|
background-color: #242424;
|
|
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* MiniPlayer - Controlbar sichtbar, dicker, kontrastreich */
|
|
.vjs-mini .video-js .vjs-control-bar{
|
|
z-index: 40; /* über Overlays */
|
|
background: rgba(0,0,0,.65);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
/* Progressbar deutlich höher */
|
|
.vjs-mini .video-js .vjs-progress-control .vjs-progress-holder{
|
|
height: 10px;
|
|
border-radius: 9999px;
|
|
background: rgba(255,255,255,.25);
|
|
}
|
|
.vjs-mini .video-js .vjs-play-progress{
|
|
border-radius: 9999px;
|
|
background: rgba(99,102,241,.95);
|
|
}
|
|
.vjs-mini .video-js .vjs-load-progress{
|
|
border-radius: 9999px;
|
|
background: rgba(255,255,255,.25);
|
|
}
|
|
|
|
/* Expanded Player: komplette Controlbar nur kurz nach Aktivität sichtbar */
|
|
.vjs-controls-on-activity .video-js .vjs-control-bar{
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
pointer-events: none;
|
|
transition: opacity 120ms ease, transform 120ms ease;
|
|
}
|
|
|
|
.vjs-controls-on-activity.vjs-controls-active .video-js .vjs-control-bar,
|
|
.vjs-controls-on-activity:focus-within .video-js .vjs-control-bar{
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Expanded Player: unsere Info-Overlays wie Controlbar ein-/ausblenden */
|
|
.vjs-controls-on-activity .player-ui{
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
pointer-events: none;
|
|
transition: opacity 120ms ease, transform 120ms ease;
|
|
}
|
|
|
|
.vjs-controls-on-activity.vjs-controls-active .player-ui,
|
|
.vjs-controls-on-activity:focus-within .player-ui{
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
color: #213547;
|
|
background-color: #ffffff;
|
|
}
|
|
a:hover {
|
|
color: #747bff;
|
|
}
|
|
button {
|
|
background-color: #f9f9f9;
|
|
}
|
|
}
|