Tweak fullscreen menu appearance

clapper_src/controls.js

@@ -19,6 +19,8 @@ var Controls = GObject.registerClass({
             valign: Gtk.Align.END,
         });
 
+        let style;
+
         this._fullscreenMode = false;
         this.durationFormated = '00:00:00';
         this.buttonImages = [];
@@ -41,6 +43,9 @@ var Controls = GObject.registerClass({
             draw_value: true,
             hexpand: true,
         });
+        style = this.positionScale.get_style_context();
+        style.add_class('positionscale');
+
         this.positionScale.connect(
             'format-value', this._onPositionScaleFormatValue.bind(this)
         );
@@ -77,7 +82,7 @@ var Controls = GObject.registerClass({
             ],
             size: Gtk.IconSize.SMALL_TOOLBAR
         });
-        let style = this.volumeButton.get_style_context();
+        style = this.volumeButton.get_style_context();
         let styleStr = style.to_string(Gtk.StyleContextPrintFlags.SHOW_STYLE);
 
         if(!styleStr.includes('flat'))
@@ -229,7 +234,7 @@ var Controls = GObject.registerClass({
             }
             else if(child.constructor === Gtk.Scale) {
                 this.setDefaultWidgetBehaviour(child);
-                child.height_request = 200;
+                child.get_style_context().add_class('volumescale');
                 child.round_digits = 2;
                 this.volumeScale = child;
                 this.setVolumeMarks(true);

css/styles.css

@@ -1,49 +1,60 @@
-scale value {
-  font-weight: 500;
-  color: currentColor;
-}
-
+/* Defaults */
 scale marks {
   color: currentColor;
 }
-
-scale trough highlight {
-  min-width: 4px;
-  min-height: 4px;
-}
-
 .osd {
   font-size: 22px;
-  font-weight: 600;
+  font-weight: 500;
 }
-
-.osd scale value {
-  font-size: 24px;
-}
-
-.osd scale contents {
-  margin-left: 8px;
-  margin-right: 4px;
-}
-
 .osd button {
   margin: 2px;
   min-width: 36px;
   min-height: 36px;
 }
-
 .osd scale trough highlight {
   min-width: 6px;
   min-height: 6px;
 }
-
-.osd scale slider {
-  margin: -14px;
-}
-
 .osd radio {
   margin: 6px;
   border: 2px solid;
   min-width: 18px;
   min-height: 18px;
 }
+
+/* Position Scale */
+.positionscale value {
+  font-weight: 600;
+  color: currentColor;
+}
+.positionscale trough highlight {
+  min-height: 4px;
+}
+.osd .positionscale value {
+  font-size: 24px;
+}
+.positionscale contents {
+  margin-left: 4px;
+  margin-right: 2px;
+}
+.osd .positionscale contents {
+  margin-left: 12px;
+  margin-right: 6px;
+}
+.osd .positionscale trough slider {
+  color: transparent;
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+.osd .positionscale trough highlight {
+  min-height: 24px;
+}
+
+/* Volume Scale */
+.volumescale {
+  min-height: 180px;
+}
+.osd .volumescale {
+  min-height: 280px;
+}