Files
clapper/css/styles.css
Rafostar ca168f34ed controls: Use isFullscreen and isMobile from main widget
The "controls.isMobile" was used incorrectly here as it holds value if
controls are in mobile mode, not if running on mobile screen.
Use those values from clapper main widget instead. This fixes incorrect
chapter popover placement on mobile screens.

Also handle fine-tune in CSS as this code path is hit multiple times
when starting/stopping slider drag.
2021-09-05 11:30:46 +02:00

339 lines
6.1 KiB
CSS

/* Defaults */
scale marks {
color: currentColor;
}
radio {
margin-left: -2px;
}
scrolledwindow scrollbar.vertical slider {
min-height: 16px;
}
/* Adwaita is missing osd ListBox */
.clapperplaylist row {
border-radius: 5px;
}
.clapperplaylist row {
color: @theme_fg_color;
}
.clapperplaylist row button {
margin: 0px;
padding: 0px;
min-width: 28px;
min-height: 28px;
}
.fullscreen.tvmode .clapperplaylist row button {
min-width: 36px;
min-height: 36px;
margin-left: 2px;
margin-right: 2px;
}
.osd .clapperplaylist {
background: none;
}
.osd .clapperplaylist row image {
-gtk-icon-shadow: none;
}
.osdheaderbar {
background: transparent;
}
.osdheaderbar button {
border: transparent;
}
.linkseparator {
background: rgba(24,24,24,0.72);
min-width: 1px;
}
.linkedleft image {
margin-left: 2px;
}
.linkedright image {
margin-right: 2px;
}
/* Flat popovers */
popover arrow,
popover contents {
border-color: transparent;
box-shadow: none;
}
.popoverseparator separator {
background-color: @insensitive_fg_color;
}
/* Rounded corners */
.adwrounded.csd {
border-radius: 8px;
}
.adwrounded.fullscreen,
.adwrounded.maximized,
.adwrounded.tiled,
.adwrounded.tiled-top,
.adwrounded.tiled-left,
.adwrounded.tiled-right,
.adwrounded.tiled-bottom {
border-radius: 0px;
}
.roundedcorners {
border-radius: 8px;
}
/* Reduce sliders size */
scale trough slider {
min-height: 18px;
min-width: 18px;
}
.fullscreen.tvmode scale trough slider {
min-height: 20px;
min-width: 20px;
}
.videowidget {
min-width: 320px;
min-height: 180px;
}
.fullscreen.tvmode popover box {
text-shadow: none;
font-size: 21px;
font-weight: 500;
}
.adwicons .clappercontrols {
margin-bottom: -1px;
}
.clappercontrols {
margin-left: 2px;
margin-right: 2px;
}
.clappercontrolsbutton {
margin: 3px;
margin-left: 1px;
margin-right: 1px;
}
.fullscreen.tvmode .clappercontrolsbutton {
min-width: 32px;
min-height: 32px;
margin: 5px;
margin-left: 3px;
margin-right: 3px;
}
.clappercontrolsbutton.text-button {
padding-left: 4px;
padding-right: 4px;
}
.fullscreen.tvmode button image {
-gtk-icon-shadow: none;
}
.fullscreen.tvmode radio {
margin-left: 0px;
margin-right: 4px;
border: 2px solid;
min-width: 17px;
min-height: 17px;
}
/* Also affects popover buttons */
.fullscreen.tvmode .clappercontrols button image {
-gtk-icon-size: 24px;
}
.adwicons .playbackicon {
-gtk-icon-size: 20px;
}
.adwicons.fullscreen.tvmode .playbackicon {
-gtk-icon-size: 28px;
}
.clappercontrolsbutton.text-button label {
font-family: 'Cantarell', sans-serif;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.fullscreen.tvmode .clappercontrolsbutton.text-button label {
font-size: 22px;
text-shadow: none;
}
/* Top Revealer */
.fullscreen.tvmode .revealertopgrid {
font-family: 'Cantarell', sans-serif;
}
.fullscreen.tvmode .tvtitle {
font-size: 28px;
font-weight: 500;
text-shadow: none;
}
.fullscreen.tvmode .tvtime {
margin-top: -2px;
margin-bottom: -2px;
min-height: 4px;
font-size: 38px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.fullscreen.tvmode .tvendtime {
margin-top: -4px;
margin-bottom: 2px;
min-height: 6px;
font-size: 24px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* Position Scale */
.positionscale {
margin: -2px;
margin-left: -4px;
margin-right: -4px;
}
.positionscale trough highlight {
min-height: 6px;
}
.fullscreen.tvmode .positionscale {
padding-left: 12px;
padding-right: 12px;
}
.fullscreen.tvmode .positionscale.fine-tune {
padding-left: 12px;
padding-right: 12px;
}
.fullscreen.tvmode .positionscale trough slider {
color: transparent;
background: transparent;
border-color: transparent;
box-shadow: none;
outline: none;
}
.positionscale mark indicator {
min-height: 6px;
}
.positionscale.fine-tune mark indicator {
min-height: 6px;
}
.fullscreen.tvmode .positionscale mark indicator {
min-height: 7px;
min-width: 2px;
}
.fullscreen.tvmode .positionscale.fine-tune mark indicator {
min-height: 7px;
min-width: 2px;
}
.positionscale marks.top {
margin-top: -6px;
margin-bottom: 4px;
}
.positionscale marks.bottom {
margin-top: 4px;
margin-bottom: -6px;
}
.fullscreen.tvmode .positionscale marks.top {
margin-bottom: 2px;
}
.fullscreen.tvmode .positionscale marks.bottom {
margin-top: 2px;
}
.fullscreen.tvmode .positionscale trough highlight {
border-radius: 3px;
min-height: 20px;
}
.fullscreen.tvmode .positionscale.fine-tune trough highlight {
border-radius: 3px;
min-height: 20px;
}
/* Volume Scale */
.volumescale {
margin: -2px;
margin-left: -8px;
margin-right: -6px;
min-height: 180px;
}
.fullscreen.tvmode .volumescale {
margin: 2px;
margin-left: -6px;
margin-right: -4px;
min-height: 260px;
}
.volumescale marks label {
margin-right: 4px;
margin-top: -4px;
margin-bottom: -6px;
}
.volumescale trough highlight {
min-width: 4px;
}
.fullscreen.tvmode .volumescale trough highlight {
min-width: 6px;
}
.overamp trough highlight {
background: @error_color;
}
/* Elapsed Popover */
.elapsedpopover {
min-width: 326px;
}
.fullscreen.tvmode .elapsedpopover {
min-width: 448px;
}
.elapsedpopover contents {
padding-bottom: 0px;
}
.speedscale trough highlight {
min-height: 4px;
}
.fullscreen.tvmode .speedscale trough highlight {
min-height: 6px;
}
.narrowbutton {
min-width: 8px;
}
@keyframes halfrotation {
to { transform: rotate(0.5turn); }
}
.halfrotate {
animation-name: halfrotation;
animation-duration: 200ms;
animation-delay: 280ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
/* Chapters */
.chapterlabel {
min-width: 32px;
}
.fullscreen.tvmode .chapterlabel {
min-width: 40px;
text-shadow: none;
font-size: 22px;
font-weight: 600;
}
/* Open URI Dialog */
.uridialogbox {
margin: 10px;
}
/* Tweaks */
.nobackground {
background: none;
}
.noborder {
border: none;
}
.controlsbox {
background: @theme_bg_color;
}
.gpufriendly {
box-shadow: -8px -8px transparent, 8px 8px transparent;
}
.fullscreen.gpufriendlyfs {
box-shadow: none;
}
/* Error BG */
.blackbackground {
background: black;
}