Put "start at" at the top of the modal

client/src/app/videos/+video-watch/modal/video-share.component.html

@@ -5,6 +5,14 @@
   </div>
 
   <div class="modal-body">
+
+    <div *ngIf="currentVideoTimestampString" class="start-at">
+      <my-peertube-checkbox
+        inputName="startAt" [(ngModel)]="startAtCheckbox"
+        i18n-labelText [labelText]="getStartCheckboxLabel()"
+      ></my-peertube-checkbox>
+    </div>
+
     <div class="form-group">
       <label i18n>URL</label>
       <div class="input-group input-group-sm">
@@ -39,13 +47,6 @@
     </div>
   </div>
 
-  <div *ngIf="currentVideoTimestampString" class="start-at">
-    <my-peertube-checkbox
-      inputName="startAt" [(ngModel)]="startAtCheckbox"
-      i18n-labelText [labelText]="getStartCheckboxLabel()"
-    ></my-peertube-checkbox>
-  </div>
-
   <div class="modal-footer inputs">
     <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span>
   </div>

client/src/sass/application.scss

@@ -1,9 +1,9 @@
-@import '_variables';
-@import '_mixins';
-
 $icon-font-path: '../../node_modules/@neos21/bootstrap3-glyphicons/assets/fonts/';
 @import '_bootstrap';
 
+@import '_variables';
+@import '_mixins';
+
 @import '_fonts';
 
 @import '~video.js/dist/video-js.css';
@@ -19,6 +19,17 @@ $assets-path: '../assets/';
 }
 
 body {
+  /*** theme ***/
+  // now beware node-sass requires interpolation
+  // for css custom properties #{$var}
+  --mainColor: #{$orange-color};
+  --mainHoverColor: #{$orange-hoover-color};
+  --mainBackgroundColor: #{$bg-color};
+  --mainForegroundColor: #{$fg-color};
+  --submenuColor: #{$sub-menu-color};
+  --inputColor: #{$input-color};
+  --inputPlaceholderColor: #{$input-placeholder-color};
+
   font-family: $main-fonts;
   font-weight: $font-regular;
   color: var(--mainForegroundColor);

client/src/sass/include/_mixins.scss

@@ -297,8 +297,8 @@
       height: 12px;
       opacity: 0;
       transform: rotate(45deg) scale(0);
-      border-right: 2px solid var(--mainForegroundColor);
-      border-bottom: 2px solid var(--mainForegroundColor);
+      border-right: 2px solid var(--mainBackgroundColor);
+      border-bottom: 2px solid var(--mainBackgroundColor);
     }
   }
 

client/src/sass/include/_variables.scss

@@ -46,23 +46,9 @@ $video-thumbnail-width: 200px;
 
 $theater-bottom-space: 85px;
 
-$input-color: $bg-color;
+$input-color: inherit;
 $input-placeholder-color: #898989;
 
-/*** theme ***/
-
-body {
-  // now beware node-sass requires interpolation
-  // for css custom properties #{$var}
-  --mainColor: #{$orange-color};
-  --mainHoverColor: #{$orange-hoover-color};
-  --mainBackgroundColor: #{$bg-color};
-  --mainForegroundColor: #{$fg-color};
-  --submenuColor: #{$sub-menu-color};
-  --inputColor: #{$input-color};
-  --inputPlaceholderColor: #{$input-placeholder-color};
-}
-
 /*** map theme ***/
 
 // pass variables into a sass map,