Merge pull request #27 from Rafostar/gui-improvements

Fullscreen GUI improvements
This commit is contained in:
Rafostar
2020-12-14 16:40:37 +01:00
committed by GitHub
3 changed files with 50 additions and 32 deletions

View File

@@ -31,7 +31,7 @@ class ClapperCustomButton extends Gtk.Button
if(this.isFullscreen === isFullscreen) if(this.isFullscreen === isFullscreen)
return; return;
this.margin_top = (isFullscreen) ? 6 : 4; this.margin_top = (isFullscreen) ? 5 : 4;
this.margin_start = (isFullscreen) ? 3 : 2; this.margin_start = (isFullscreen) ? 3 : 2;
this.margin_end = (isFullscreen) ? 3 : 2; this.margin_end = (isFullscreen) ? 3 : 2;
this.can_focus = isFullscreen; this.can_focus = isFullscreen;

View File

@@ -4,7 +4,7 @@ const Debug = imports.clapper_src.debug;
const Misc = imports.clapper_src.misc; const Misc = imports.clapper_src.misc;
const Revealers = imports.clapper_src.revealers; const Revealers = imports.clapper_src.revealers;
const CONTROLS_MARGIN = 3; const CONTROLS_MARGIN = 2;
const CONTROLS_SPACING = 0; const CONTROLS_SPACING = 0;
let { debug } = Debug; let { debug } = Debug;
@@ -297,7 +297,7 @@ class ClapperControls extends Gtk.Box
'media-playback-start-symbolic', 'media-playback-start-symbolic',
'media-playback-pause-symbolic' 'media-playback-pause-symbolic'
); );
this.togglePlayButton.add_css_class('playbackicon'); this.togglePlayButton.child.add_css_class('playbackicon');
this.togglePlayButton.connect( this.togglePlayButton.connect(
'clicked', this._onTogglePlayClicked.bind(this) 'clicked', this._onTogglePlayClicked.bind(this)
); );

View File

@@ -2,24 +2,29 @@
scale marks { scale marks {
color: currentColor; color: currentColor;
} }
.osd { radio {
margin-left: -2px;
}
.osd popover box {
text-shadow: none; text-shadow: none;
font-size: 22px; font-size: 21px;
font-weight: 500; font-weight: 500;
} }
.osd button {
min-width: 32px;
min-height: 32px;
-gtk-icon-shadow: none;
}
.osd radio {
margin-left: 0px;
margin-right: 4px;
border: 2px solid;
min-width: 17px;
min-height: 17px;
}
.osd .playercontrols { .osd .playercontrols {
-gtk-icon-size: 24px; -gtk-icon-size: 24px;
} }
.osd button {
min-width: 36px;
min-height: 36px;
}
.osd radio {
margin: 6px;
border: 2px solid;
min-width: 18px;
min-height: 18px;
}
.playbackicon { .playbackicon {
-gtk-icon-size: 20px; -gtk-icon-size: 20px;
} }
@@ -27,32 +32,43 @@ scale marks {
-gtk-icon-size: 28px; -gtk-icon-size: 28px;
} }
.labelbutton { .labelbutton {
margin-left: -4px;
margin-right: -4px;
margin-top: 1px; margin-top: 1px;
min-width: 8px;
font-family: 'Cantarell', sans-serif; font-family: 'Cantarell', sans-serif;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
font-weight: 600; font-weight: 600;
} }
.osd .labelbutton {
margin-top: 0px;
font-size: 23px;
text-shadow: none;
}
.reavealertop { .reavealertop {
min-height: 96px; min-height: 88px;
box-shadow: inset 0px 200px 10px -124px rgba(0,0,0,0.35); box-shadow: inset 0px 200px 10px -132px rgba(0,0,0,0.4);
font-family: 'Cantarell', sans-serif; font-family: 'Cantarell', sans-serif;
font-size: 30px; font-size: 28px;
font-weight: 500; font-weight: 500;
text-shadow: none;
background: transparent; background: transparent;
} }
.osdtime { .osdtime {
margin-top: 0px; margin-top: -2px;
font-size: 40px; margin-right: -4px;
min-width: 4px;
font-size: 38px;
font-weight: 700; font-weight: 700;
font-variant-numeric: tabular-nums;
} }
.osdendtime { .osdendtime {
margin-top: 42px; margin-top: 36px;
margin-right: -4px;
min-width: 4px;
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
} font-variant-numeric: tabular-nums;
.osd .labelbutton {
margin-top: 0px;
font-size: 24px;
} }
/* Position Scale */ /* Position Scale */
@@ -70,29 +86,31 @@ scale marks {
} }
.osd .positionscale trough highlight { .osd .positionscale trough highlight {
border-radius: 3px; border-radius: 3px;
min-height: 22px; min-height: 20px;
} }
.osd .positionscale.dragging trough highlight { .osd .positionscale.dragging trough highlight {
border-radius: 3px; border-radius: 3px;
min-height: 22px; min-height: 20px;
} }
/* Volume Scale */ /* Volume Scale */
.volumescale { .volumescale {
margin: -2px;
margin-left: -8px;
margin-right: -6px;
min-height: 180px; min-height: 180px;
} }
.osd .volumescale { .osd .volumescale {
margin: 6px; margin: 2px;
min-height: 280px; margin-left: -6px;
margin-right: -4px;
min-height: 260px;
} }
.volumescale marks label { .volumescale marks label {
margin-right: 4px; margin-right: 4px;
margin-top: -4px; margin-top: -4px;
margin-bottom: -6px; margin-bottom: -6px;
} }
.osd .volumescale marks label {
margin-bottom: -8px;
}
.osd .volumescale trough highlight { .osd .volumescale trough highlight {
min-width: 6px; min-width: 6px;
} }