mirror of
https://github.com/Rafostar/clapper.git
synced 2025-08-29 23:32:04 +02:00
73e7f1e2a0
This adds Kodi-like semi-transparent overlay with current media title, hour and estimated time when video will end. The overlay is visible only on fullscreen mode.
92 lines
1.5 KiB
CSS
92 lines
1.5 KiB
CSS
/* Defaults */
|
|
scale marks {
|
|
color: currentColor;
|
|
}
|
|
.osd {
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
}
|
|
.osd button {
|
|
margin: 2px;
|
|
min-width: 36px;
|
|
min-height: 36px;
|
|
}
|
|
.osd scale trough highlight {
|
|
min-width: 6px;
|
|
min-height: 6px;
|
|
}
|
|
.osd radio {
|
|
margin: 6px;
|
|
border: 2px solid;
|
|
min-width: 18px;
|
|
min-height: 18px;
|
|
}
|
|
.videobox {
|
|
background: black;
|
|
}
|
|
.reavealertop {
|
|
min-height: 100px;
|
|
box-shadow: inset 0px 200px 10px -124px rgba(0,0,0,0.4);
|
|
font-size: 32px;
|
|
font-weight: 500;
|
|
background: transparent;
|
|
}
|
|
.osdtime {
|
|
margin-top: 0px;
|
|
font-size: 40px;
|
|
font-weight: 700;
|
|
}
|
|
.osdendtime {
|
|
margin-top: 42px;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Position Scale */
|
|
.positionscale value {
|
|
font-weight: 600;
|
|
color: currentColor;
|
|
}
|
|
.positionscale trough highlight {
|
|
min-height: 4px;
|
|
}
|
|
.osd .positionscale value {
|
|
font-size: 24px;
|
|
}
|
|
.positionscale contents {
|
|
margin-left: 4px;
|
|
margin-right: 2px;
|
|
}
|
|
.osd .positionscale contents {
|
|
margin-left: 8px;
|
|
margin-right: 2px;
|
|
}
|
|
.osd .positionscale trough slider {
|
|
color: transparent;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
.osd .positionscale trough highlight {
|
|
min-height: 22px;
|
|
}
|
|
|
|
/* Volume Scale */
|
|
.volumescale {
|
|
margin-left: 4px;
|
|
min-height: 180px;
|
|
}
|
|
.osd .volumescale {
|
|
margin: 6px;
|
|
margin-left: 10px;
|
|
min-height: 280px;
|
|
}
|
|
.volumescale marks label {
|
|
margin-right: 4px;
|
|
margin-top: -4px;
|
|
margin-bottom: -6px;
|
|
}
|
|
.osd .volumescale marks label {
|
|
margin-bottom: -8px;
|
|
}
|