Merge pull request #27 from Rafostar/gui-improvements

Fullscreen GUI improvements

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;

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;
@@ -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)
         );

css/styles.css

@@ -2,24 +2,29 @@
 scale marks {
   color: currentColor;
 }
-.osd {
+radio {
+  margin-left: -2px;
+}
+.osd popover box {
   text-shadow: none;
-  font-size: 22px;
+  font-size: 21px;
   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 {
   -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 {
   -gtk-icon-size: 20px;
 }
@@ -27,32 +32,43 @@ scale marks {
   -gtk-icon-size: 28px;
 }
 .labelbutton {
+  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: 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;
+  text-shadow: none;
   background: transparent;
 }
 .osdtime {
-  margin-top: 0px;
-  font-size: 40px;
+  margin-top: -2px;
+  margin-right: -4px;
+  min-width: 4px;
+  font-size: 38px;
   font-weight: 700;
+  font-variant-numeric: tabular-nums;
 }
 .osdendtime {
-  margin-top: 42px;
+  margin-top: 36px;
+  margin-right: -4px;
+  min-width: 4px;
   font-size: 24px;
   font-weight: 600;
-}
-.osd .labelbutton {
-  margin-top: 0px;
-  font-size: 24px;
+  font-variant-numeric: tabular-nums;
 }
 
 /* Position Scale */
@@ -70,29 +86,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;
 }