89 lines
1.9 KiB
CSS
89 lines
1.9 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;
|
|
}
|
|
|
|
/* Video.js Popups (Playback-Rate Menü, Volume-Slider) über eigene Overlays legen */
|
|
.video-js {
|
|
position: relative; /* schafft eine stabile Basis */
|
|
}
|
|
|
|
.video-js .vjs-control-bar {
|
|
position: relative;
|
|
z-index: 60;
|
|
}
|
|
|
|
.video-js .vjs-menu-button-popup .vjs-menu {
|
|
z-index: 9999 !important;
|
|
}
|
|
|
|
.video-js .vjs-volume-panel .vjs-volume-control {
|
|
z-index: 9999 !important;
|
|
}
|
|
|
|
/* Zeiten im Mini-Player wieder einblenden */
|
|
.vjs-mini .video-js .vjs-current-time,
|
|
.vjs-mini .video-js .vjs-time-divider,
|
|
.vjs-mini .video-js .vjs-duration {
|
|
display: flex !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
/* Text sicher sichtbar */
|
|
.vjs-mini .video-js .vjs-current-time-display,
|
|
.vjs-mini .video-js .vjs-duration-display {
|
|
display: inline !important;
|
|
}
|
|
|
|
/* Kompaktere Zeit-Anzeige (Padding/Min-Width reduzieren) */
|
|
.video-js .vjs-time-control {
|
|
padding-left: .35em !important;
|
|
padding-right: .35em !important;
|
|
min-width: 0 !important;
|
|
width: auto !important;
|
|
}
|
|
|
|
/* Divider noch enger */
|
|
.video-js .vjs-time-divider {
|
|
padding-left: .15em !important;
|
|
padding-right: .15em !important;
|
|
}
|
|
.video-js .vjs-time-divider > div {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Optional: Ziffern stabil (weniger “springen”), etwas kleiner */
|
|
.video-js .vjs-current-time-display,
|
|
.video-js .vjs-duration-display {
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
color: #213547;
|
|
background-color: #ffffff;
|
|
}
|
|
a:hover {
|
|
color: #747bff;
|
|
}
|
|
button {
|
|
background-color: #f9f9f9;
|
|
}
|
|
}
|