Merge remote-tracking branch 'origin/Testing'

src/ext/conf/ExtensionConf.js

@@ -685,7 +685,7 @@ var ExtensionConf = {
     }
   },{
     name: 'Enable automatic aspect ratio detection',
-    label: 'Enabled',
+    label: 'Enable',
     cmd: [{
       action: 'set-autoar-mode',
       arg: ExtensionMode.Enabled,

src/popup/panels/DefaultSettingsPanel.vue

@@ -8,7 +8,7 @@
       <div class="flex flex-row flex-wrap">
         <template v-for="action of siteActions">
           <ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-extension-mode'"
-                          class="button"
+                          class="flex flex-grow button"
                           :class="{'setting-selected': getCurrent('mode') === action.cmd[0].arg }"
                           :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
@@ -24,11 +24,10 @@
          class="w100"
     >
       <div class="label">Enable autodetection {{scope === 'site' ? 'for this site' : ''}}:</div>
-      <div class="warning"><small>Note: some sites implement restrictions that make autodetection a fair bit less reliable in Firefox and outright impossible in anything else.</small></div>
       <div class="flex flex-row flex-wrap">
         <template v-for="action of siteActions">
           <ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-autoar-mode'"
-                          class="flex button"
+                          class="flex flex-grow button"
                           :class="{'setting-selected': getCurrent('autoar') === action.cmd[0].arg}"
                           :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
@@ -36,6 +35,7 @@
           >
           </ShortcutButton>
         </template>
+      <div class="info"><small>Note: some sites implement restrictions that make autodetection a fair bit less reliable in Firefox and outright impossible in anything else.</small></div>
       </div>
     </div>
 
@@ -45,7 +45,7 @@
       <div class="flex flex-row flex-wrap">
         <template v-for="action of siteActions">
           <ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-stretch'"
-                          class="flex b3 button"
+                          class="flex b3 flex-grow button"
                           :class="{'setting-selected': getCurrent('stretch') === action.cmd[0].arg}"
                           :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
@@ -61,7 +61,7 @@
       <div class="flex flex-row flex-wrap">
         <template v-for="action of settings.active.actions">
           <ShortcutButton v-if="action.scopes[scope] && action.scopes[scope].show && action.cmd.length === 1 && action.cmd[0].action === 'set-alignment'"
-                          class="flex b3 button"
+                          class="flex b3 flex-grow button"
                           :class="{'setting-selected': getCurrent('videoAlignment') === action.cmd[0].arg}"
                           :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
@@ -77,7 +77,7 @@
       <div class="flex flex-row flex-wrap">
         <template v-for="action of settings.active.actions">
           <ShortcutButton v-if="action.scopes[scope] && action.scopes[scope].show && action.cmd.length > 1"
-                          class="flex b3 button"
+                          class="flex b3 flex-grow button"
                           :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"

src/popup/panels/VideoPanel.vue

@@ -5,7 +5,7 @@
       <div class="flex flex-row flex-wrap">
         <template v-for="action of settings.active.actions">
           <ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length === 1 && action.cmd[0].action === 'set-ar'"
-                          class="flex b3 button"
+                          class="flex b3 flex-grow button"
                           :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"
@@ -55,7 +55,7 @@
       <div class="flex flex-row flex-wrap">
         <template v-for="action of settings.active.actions">
           <ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length === 1 && action.cmd[0].action === 'set-stretch'"
-                          class="flex b3 button"
+                          class="flex b3 flex-grow button"
                           :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"

src/res/css/colors.scss

@@ -8,4 +8,6 @@ $input-background: #242424;
 $page-background: #101010;
 
 $background-primary: #101010;
-$background-selected: #944918;
+$background-selected: #944918;
+
+$info-color: #e9bea3;

src/res/css/common.scss

@@ -166,7 +166,7 @@ small {
 /* COLORS */
 
     
-.selected{
+.selected {
   color: #ffddaa !important;
   background-color: #433221 !important;
 }
@@ -213,11 +213,11 @@ small {
 }
 
 .button {
-  /* display: inline-block; */
+  /*display: inline-block;*/
   // padding-top: 8px;
   // padding-bottom: 3px;
-  // padding-left: 20px;
+  //padding-left: 5px;
-  // padding-right: 20px;
+  //padding-right: 5px;
   border: 1px solid #444;
   margin-top: 3px;
   margin-bottom: 3px;
@@ -227,7 +227,7 @@ small {
 
 .button:hover {
   color: #fff;
-  background-color: #433221;
+  background-color: $primary-color;
 }
 
 
@@ -249,6 +249,20 @@ small {
   padding-right: 10px;
 }
 
+.info {
+  color: $info-color;
+  padding-left: 35px;
+  float: right;
+}
+
+.info::before {
+  content: "ⓘ";
+  display: inline-block;
+  font-weight: bold;
+  margin-left: -35px;
+  padding-right: 10px;
+}
+
 .experimental::after {
   content: "Experimental";
   background-color: #ffde12;
@@ -260,5 +274,3 @@ small {
   padding-right: 5px;
   margin-left: 10px;
 }
-
-