mirror of
https://github.com/Rafostar/clapper.git
synced 2025-08-29 23:32:04 +02:00
a9173bb481
GTK does weird glitches when scale slider inside popover is dragged to the very end. Avoid that by putting small margins on both sides. It also looks better when its shorter a little bit.
343 lines
6.2 KiB
CSS
343 lines
6.2 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 {
|
|
margin-left: 4px;
|
|
margin-right: 4px;
|
|
}
|
|
.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;
|
|
}
|