Move buttons margins to CSS and tweak them a little

css/styles.css

@@ -9,7 +9,7 @@ radio {
 .osd list {
   background: none;
 }
-.osd list row {
+.osd list row image {
   -gtk-icon-shadow: none;
 }
 .gtk402 trough highlight {
@@ -75,9 +75,28 @@ radio {
   font-size: 21px;
   font-weight: 500;
 }
-.tvmode button {
+.playercontrols {
+  margin-bottom: -1px;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+.tvmode .playercontrols {
+  margin-left: 1px;
+  margin-right: 1px;
+}
+.playercontrols button {
+  margin: 3px;
+  margin-left: 1px;
+  margin-right: 1px;
+}
+.tvmode .playercontrols button {
   min-width: 32px;
   min-height: 32px;
+  margin: 4px;
+  margin-left: 3px;
+  margin-right: 3px;
+}
+.tvmode button image {
   -gtk-icon-shadow: none;
 }
 .tvmode radio {
@@ -88,7 +107,7 @@ radio {
   min-height: 17px;
 }
 
-.tvmode .playercontrols {
+.tvmode .playercontrols button image {
   -gtk-icon-size: 24px;
 }
 .adwicons .playbackicon {
@@ -97,18 +116,16 @@ radio {
 .adwicons.tvmode .playbackicon {
   -gtk-icon-size: 28px;
 }
-.labelbutton {
+.labelbuttonlabel {
   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;
 }
-.tvmode .labelbutton {
-  margin-top: 0px;
-  font-size: 23px;
+.tvmode .labelbuttonlabel {
+  font-size: 22px;
   text-shadow: none;
 }
 
@@ -146,11 +163,9 @@ radio {
 
 /* Position Scale */
 .positionscale {
-  margin-top: -2px;
-  margin-bottom: -2px;
-}
-.tvmode .positionscale {
-  margin-top: -1px;
+  margin: -2px;
+  margin-left: -4px;
+  margin-right: -4px;
 }
 .positionscale trough highlight {
   min-height: 4px;

src/buttons.js

@@ -1,5 +1,11 @@
 const { GObject, Gtk } = imports.gi;
 
+/* Negative values from CSS */
+const PopoverOffset = {
+  DEFAULT: -3,
+  TVMODE: -4,
+};
+
 var CustomButton = GObject.registerClass(
 class ClapperCustomButton extends Gtk.Button
 {
@@ -8,10 +14,8 @@ class ClapperCustomButton extends Gtk.Button
         opts = opts || {};
 
         const defaults = {
-            margin_top: 4,
-            margin_bottom: 4,
-            margin_start: 2,
-            margin_end: 2,
+            halign: Gtk.Align.CENTER,
+            valign: Gtk.Align.CENTER,
             can_focus: false,
         };
         Object.assign(opts, defaults);
@@ -27,9 +31,6 @@ class ClapperCustomButton extends Gtk.Button
         if(this.isFullscreen === isFullscreen)
             return;
 
-        this.margin_top = (isFullscreen) ? 5 : 4;
-        this.margin_start = (isFullscreen) ? 3 : 2;
-        this.margin_end = (isFullscreen) ? 3 : 2;
         this.can_focus = isFullscreen;
 
         /* Redraw icon after style class change */
@@ -79,10 +80,8 @@ class ClapperPopoverButtonBase extends Gtk.ToggleButton
     _init()
     {
         super._init({
-            margin_top: 4,
-            margin_bottom: 4,
-            margin_start: 2,
-            margin_end: 2,
+            halign: Gtk.Align.CENTER,
+            valign: Gtk.Align.CENTER,
             can_focus: false,
         });
 
@@ -97,7 +96,7 @@ class ClapperPopoverButtonBase extends Gtk.ToggleButton
         });
 
         this.popover.set_child(this.popoverBox);
-        this.popover.set_offset(0, -this.margin_top);
+        this.popover.set_offset(0, PopoverOffset.DEFAULT);
 
         if(this.isFullscreen)
             this.popover.add_css_class('osd');
@@ -111,9 +110,6 @@ class ClapperPopoverButtonBase extends Gtk.ToggleButton
         if(this.isFullscreen === isFullscreen)
             return;
 
-        this.margin_top = (isFullscreen) ? 5 : 4;
-        this.margin_start = (isFullscreen) ? 3 : 2;
-        this.margin_end = (isFullscreen) ? 3 : 2;
         this.can_focus = isFullscreen;
 
         /* Redraw icon after style class change */
@@ -122,7 +118,12 @@ class ClapperPopoverButtonBase extends Gtk.ToggleButton
 
         this.isFullscreen = isFullscreen;
 
-        this.popover.set_offset(0, -this.margin_top);
+        /* TODO: Fullscreen non-tv mode */
+        const offset = (isFullscreen)
+            ? PopoverOffset.TVMODE
+            : PopoverOffset.DEFAULT;
+
+        this.popover.set_offset(0, offset);
 
         const cssClass = 'osd';
         if(isFullscreen === this.popover.has_css_class(cssClass))
@@ -189,7 +190,7 @@ class ClapperLabelPopoverButton extends PopoverButtonBase
             label: text,
             single_line_mode: true,
         });
-        this.customLabel.add_css_class('labelbutton');
+        this.customLabel.add_css_class('labelbuttonlabel');
         this.set_child(this.customLabel);
     }
 

src/controls.js

@@ -4,9 +4,6 @@ const Debug = imports.src.debug;
 const Misc = imports.src.misc;
 const Revealers = imports.src.revealers;
 
-const CONTROLS_MARGIN = 2;
-const CONTROLS_SPACING = 0;
-
 const { debug } = Debug;
 const { settings } = Misc;
 
@@ -17,9 +14,6 @@ class ClapperControls extends Gtk.Box
     {
         super._init({
             orientation: Gtk.Orientation.HORIZONTAL,
-            margin_start: CONTROLS_MARGIN,
-            margin_end: CONTROLS_MARGIN,
-            spacing: CONTROLS_SPACING,
             valign: Gtk.Align.END,
             can_focus: false,
         });
@@ -439,7 +433,7 @@ class ClapperControls extends Gtk.Box
                     const scaleHeight = this.positionScale.parent.get_height();
 
                     this.chapterPopover.set_pointing_to(new Gdk.Rectangle({
-                        x: 2,
+                        x: -2,
                         y: -(controlsHeight - scaleHeight) / 2,
                         width: 2 * end,
                         height: 0,