From ef12074559bcab6bea021d6dfbbbfe2e6be7e6e1 Mon Sep 17 00:00:00 2001 From: Rafostar <40623528+Rafostar@users.noreply.github.com> Date: Mon, 14 Dec 2020 11:30:19 +0100 Subject: [PATCH 1/5] Tweak fullscreen GUI theme Notable changes: * Smaller media title font (fits more characters on screen) * Constant top timer numbers size (time no longer moves left/right when hour changes) * Reduced top shadow overlay height * Smaller buttons on bottom controls panel (their icon size remains the same) * Reduced bottom panel and progress bar height * Few additional margins and font sizes tweaks --- css/styles.css | 55 ++++++++++++++++++++++++++++++++------------------ 1 file changed, 35 insertions(+), 20 deletions(-) diff --git a/css/styles.css b/css/styles.css index 264d8be4..be8bad13 100644 --- a/css/styles.css +++ b/css/styles.css @@ -2,23 +2,29 @@ scale marks { color: currentColor; } +radio { + margin-left: -2px; +} +/* FIXME: FOR POPUPS ONLY */ .osd { text-shadow: none; - font-size: 22px; + font-size: 21px; font-weight: 500; } .osd .playercontrols { -gtk-icon-size: 24px; } .osd button { - min-width: 36px; - min-height: 36px; + min-width: 32px; + min-height: 32px; + -gtk-icon-shadow: none; } .osd radio { - margin: 6px; + margin-left: 0px; + margin-right: 4px; border: 2px solid; - min-width: 18px; - min-height: 18px; + min-width: 17px; + min-height: 17px; } .playbackicon { -gtk-icon-size: 20px; @@ -27,32 +33,39 @@ scale marks { -gtk-icon-size: 28px; } .labelbutton { + margin-left: -4px; + margin-right: -4px; margin-top: 1px; font-family: 'Cantarell', sans-serif; font-variant-numeric: tabular-nums; font-weight: 600; } .reavealertop { - min-height: 96px; - box-shadow: inset 0px 200px 10px -124px rgba(0,0,0,0.35); + min-height: 88px; + box-shadow: inset 0px 200px 10px -132px rgba(0,0,0,0.4); font-family: 'Cantarell', sans-serif; - font-size: 30px; + font-size: 28px; font-weight: 500; background: transparent; } .osdtime { - margin-top: 0px; - font-size: 40px; + margin-top: -2px; + margin-right: -4px; + font-size: 38px; font-weight: 700; + font-variant-numeric: tabular-nums; } .osdendtime { - margin-top: 42px; + margin-top: 36px; + margin-right: -4px; font-size: 24px; font-weight: 600; + font-variant-numeric: tabular-nums; } .osd .labelbutton { margin-top: 0px; - font-size: 24px; + font-size: 23px; + text-shadow: none; } /* Position Scale */ @@ -70,29 +83,31 @@ scale marks { } .osd .positionscale trough highlight { border-radius: 3px; - min-height: 22px; + min-height: 20px; } .osd .positionscale.dragging trough highlight { border-radius: 3px; - min-height: 22px; + min-height: 20px; } /* Volume Scale */ .volumescale { + margin: -2px; + margin-left: -8px; + margin-right: -6px; min-height: 180px; } .osd .volumescale { - margin: 6px; - min-height: 280px; + margin: 2px; + margin-left: -6px; + margin-right: -4px; + min-height: 260px; } .volumescale marks label { margin-right: 4px; margin-top: -4px; margin-bottom: -6px; } -.osd .volumescale marks label { - margin-bottom: -8px; -} .osd .volumescale trough highlight { min-width: 6px; } From 67389ee2954ef6a2402775de9dea0e9d0862fd75 Mon Sep 17 00:00:00 2001 From: Rafostar <40623528+Rafostar@users.noreply.github.com> Date: Mon, 14 Dec 2020 12:10:02 +0100 Subject: [PATCH 2/5] Fix for negative sizes and separate popovers override --- css/styles.css | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/css/styles.css b/css/styles.css index be8bad13..870ccda1 100644 --- a/css/styles.css +++ b/css/styles.css @@ -5,15 +5,11 @@ scale marks { radio { margin-left: -2px; } -/* FIXME: FOR POPUPS ONLY */ -.osd { +.osd popover box { text-shadow: none; font-size: 21px; font-weight: 500; } -.osd .playercontrols { - -gtk-icon-size: 24px; -} .osd button { min-width: 32px; min-height: 32px; @@ -26,6 +22,9 @@ radio { min-width: 17px; min-height: 17px; } +.osd .playercontrols { + -gtk-icon-size: 24px; +} .playbackicon { -gtk-icon-size: 20px; } @@ -36,21 +35,29 @@ radio { margin-left: -4px; margin-right: -4px; margin-top: 1px; + min-width: 8px; font-family: 'Cantarell', sans-serif; font-variant-numeric: tabular-nums; font-weight: 600; } +.osd .labelbutton { + margin-top: 0px; + font-size: 23px; + text-shadow: none; +} .reavealertop { min-height: 88px; box-shadow: inset 0px 200px 10px -132px rgba(0,0,0,0.4); font-family: 'Cantarell', sans-serif; font-size: 28px; font-weight: 500; + text-shadow: none; background: transparent; } .osdtime { margin-top: -2px; margin-right: -4px; + min-width: 4px; font-size: 38px; font-weight: 700; font-variant-numeric: tabular-nums; @@ -58,15 +65,11 @@ radio { .osdendtime { margin-top: 36px; margin-right: -4px; + min-width: 4px; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; } -.osd .labelbutton { - margin-top: 0px; - font-size: 23px; - text-shadow: none; -} /* Position Scale */ .positionscale trough highlight { From 3936e58ed68484bc839e3482418935cbf93ab6a6 Mon Sep 17 00:00:00 2001 From: Rafostar <40623528+Rafostar@users.noreply.github.com> Date: Mon, 14 Dec 2020 15:43:48 +0100 Subject: [PATCH 3/5] Reduce fullscreen button top margin a little --- clapper_src/buttons.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/clapper_src/buttons.js b/clapper_src/buttons.js index 07c6cf66..e62f8a18 100644 --- a/clapper_src/buttons.js +++ b/clapper_src/buttons.js @@ -31,7 +31,7 @@ class ClapperCustomButton extends Gtk.Button if(this.isFullscreen === isFullscreen) return; - this.margin_top = (isFullscreen) ? 6 : 4; + this.margin_top = (isFullscreen) ? 5 : 4; this.margin_start = (isFullscreen) ? 3 : 2; this.margin_end = (isFullscreen) ? 3 : 2; this.can_focus = isFullscreen; From bfc318ae708fbb51b7d0be95d1b9f2caa29c72fd Mon Sep 17 00:00:00 2001 From: Rafostar <40623528+Rafostar@users.noreply.github.com> Date: Mon, 14 Dec 2020 15:46:07 +0100 Subject: [PATCH 4/5] Reduce controls start/end margin --- clapper_src/controls.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/clapper_src/controls.js b/clapper_src/controls.js index 94fadbd5..5df8ce1a 100644 --- a/clapper_src/controls.js +++ b/clapper_src/controls.js @@ -4,7 +4,7 @@ const Debug = imports.clapper_src.debug; const Misc = imports.clapper_src.misc; const Revealers = imports.clapper_src.revealers; -const CONTROLS_MARGIN = 3; +const CONTROLS_MARGIN = 2; const CONTROLS_SPACING = 0; let { debug } = Debug; From 39e4e54ad87ca400aa6e20e34d6541c1640c1a8c Mon Sep 17 00:00:00 2001 From: Rafostar <40623528+Rafostar@users.noreply.github.com> Date: Mon, 14 Dec 2020 15:46:40 +0100 Subject: [PATCH 5/5] Apply icon size to icon and not whole button --- clapper_src/controls.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/clapper_src/controls.js b/clapper_src/controls.js index 5df8ce1a..3ec777ef 100644 --- a/clapper_src/controls.js +++ b/clapper_src/controls.js @@ -297,7 +297,7 @@ class ClapperControls extends Gtk.Box 'media-playback-start-symbolic', 'media-playback-pause-symbolic' ); - this.togglePlayButton.add_css_class('playbackicon'); + this.togglePlayButton.child.add_css_class('playbackicon'); this.togglePlayButton.connect( 'clicked', this._onTogglePlayClicked.bind(this) );