[Frontend] Styling for controls

Fixes #1324
CSS, markup, new glyphs for
brightness and contrast

platform/commonUI/general/res/sass/_glyphs.scss

@@ -74,6 +74,8 @@ $glyph-icon-thumbs-strip: '\e1033';
 $glyph-icon-two-parts-both: '\e1034';
 $glyph-icon-two-parts-one-only: '\e1035';
 $glyph-icon-x-in-circle: '\e1036';
+$glyph-icon-brightness: '\e1038';
+$glyph-icon-contrast: '\e1039';
 $glyph-icon-activity: '\e1100';
 $glyph-icon-activity-mode: '\e1101';
 $glyph-icon-autoflow-tabular: '\e1102';
@@ -173,6 +175,8 @@ $glyph-icon-box-with-dashed-lines: '\e1129';
 .icon-two-parts-both {  @include glyph($glyph-icon-two-parts-both); }
 .icon-two-parts-one-only {  @include glyph($glyph-icon-two-parts-one-only); }
 .icon-x-in-circle {  @include glyph($glyph-icon-x-in-circle); }
+.icon-brightness {  @include glyph($glyph-icon-brightness); }
+.icon-contrast {  @include glyph($glyph-icon-contrast); }
 .icon-activity {  @include glyph($glyph-icon-activity); }
 .icon-activity-mode {  @include glyph($glyph-icon-activity-mode); }
 .icon-autoflow-tabular {  @include glyph($glyph-icon-autoflow-tabular); }

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -122,13 +122,20 @@
     // Default position is upper right
     $p: $interiorMargin;
     position: absolute;
-    top: $p;
-    right: $p;
+    top: $p; right: $p; bottom: auto; left: $p;
+    text-align: right;
     z-index: 5;
 }
 
 .s-local-controls {
     font-size: 0.7rem;
+    &.s-wrapper-transluc {
+        // Semi-opaque wrapper to visually distinguish a control
+        // from the background
+        background: rgba($colorBodyFg, 0.2);
+        box-sizing: border-box;
+        border-radius: $controlCr;
+    }
 }
 
 /******************************************************** CUSTOM CHECKBOXES */

platform/commonUI/general/res/sass/features/_imagery.scss

@@ -134,6 +134,29 @@
 	}
 }
 
+/*************************************** LOCAL CONTROLS */
+.l-local-controls {
+    max-width: 200px;
+    width: 35%;
+    input[type="range"] {
+        display: block;
+        width: 100%;
+        &:not(:first-child) {
+            margin-top: $interiorMarginLg;
+        }
+
+        &:before {
+            margin-right: $interiorMarginSm;
+        }
+    }
+
+    &.s-wrapper-transluc {
+        display: inline-block;
+        left: auto;
+        padding: $interiorMargin $interiorMarginLg;
+    }
+}
+
 /*************************************** WHEN IN FRAME */
 .frame .t-imagery {
 	.l-image-main-wrapper {