From add72e8398df886233eb20183f642eb9176bc541 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Wed, 22 May 2019 01:03:15 +0200 Subject: [PATCH] First round of CSS fixes --- src/common/components/ActionAlt.vue | 30 +++++- src/options/App.vue | 2 + src/options/AutodetectionSettings.vue | 86 +++++++++-------- .../controls-settings/AddEditActionPopup.vue | 64 +++++++++---- .../controls-settings/ControlsSettings.vue | 2 - .../command-builder/CommandAddEdit.vue | 18 +++- src/popup/panels/DefaultSettingsPanel.vue | 6 -- src/popup/panels/VideoPanel.vue | 2 +- src/popup/popup.html | 1 + src/res/css/colors.scss | 6 +- src/res/css/common.scss | 95 ++++++++++++------- 11 files changed, 204 insertions(+), 108 deletions(-) diff --git a/src/common/components/ActionAlt.vue b/src/common/components/ActionAlt.vue index f1c1c0e..87074dd 100644 --- a/src/common/components/ActionAlt.vue +++ b/src/common/components/ActionAlt.vue @@ -6,11 +6,12 @@
- 🗙 - 🖉 {{action.name}} + 🗙     + 🖉     + {{action.name}}
-
+
Command: @@ -152,6 +153,20 @@ export default { cursor: pointer; } +.action .command-details { + height: 0px; + max-height: 0px; + transition: max-height 0.5s ease; + overflow: hidden; + transition: height 0.5s ease; +} + +.action:hover .command-details { + height: auto; + max-height: 200px; + transition: max-height 0.5s ease; +} + .action-name-cmd-container { padding: 1rem; } @@ -159,7 +174,14 @@ export default { .action-name { font-size: 1.5rem; font-weight: 300; - color: $primary-color; + color: $text-normal; +} +.action-name:hover { + color: lighten($primary-color, 20%); +} + +.red { + color: $primary-color !important; } .cmd-container { diff --git a/src/options/App.vue b/src/options/App.vue index 2b79a48..937d1f7 100644 --- a/src/options/App.vue +++ b/src/options/App.vue @@ -168,6 +168,8 @@ export default { this.selectedTabTitle = 'Advanced autodetection settings'; } else if (newTab === 'controls') { this.selectedTabTitle = 'Actions'; + } else if (newTab === 'txtconf') { + this.selectedTabTitle = 'Super advanced settings'; } else if (newTab === 'about') { this.selectedTabTitle = 'About'; } else if (newTab === 'donate') { diff --git a/src/options/AutodetectionSettings.vue b/src/options/AutodetectionSettings.vue index 6353673..5e8606d 100644 --- a/src/options/AutodetectionSettings.vue +++ b/src/options/AutodetectionSettings.vue @@ -17,7 +17,7 @@
-
+
Frequency while playing:
@@ -27,7 +27,7 @@
-
+
Frequency while paused:
@@ -37,7 +37,7 @@
-
+
Error timeout:
@@ -48,15 +48,9 @@
-
Setting values under 100 milliseconds will have no effect unless you also reduce the tickrate. - Show advanced options -
-
-
+
Tick rate:
@@ -67,6 +61,12 @@
+
Setting values under 100 milliseconds will have no effect unless you also reduce the tickrate. + Show advanced options +
+
Fallback mode
Some streaming sites implement stuff (DRM) that prevents us from detecting aspect ratio using our favourite way. @@ -91,7 +91,7 @@
-
+
Safety border thickness (in px)
@@ -101,7 +101,7 @@
-
+
Don't react if detected edge is less than this many pixels thick:
@@ -118,7 +118,7 @@
-
+
Letterbox misalignment threshold
@@ -140,7 +140,7 @@
-
+
Static sample columns:
@@ -150,7 +150,7 @@
-
+
Random sample columns:
@@ -160,7 +160,7 @@
-
+
Static rows:
@@ -170,7 +170,7 @@
-
+
Sample width:
@@ -180,7 +180,7 @@
-
+
Static rows:
@@ -212,7 +212,7 @@
-
+
Black level:
@@ -222,7 +222,7 @@
-
+
Threshold:
@@ -232,7 +232,7 @@
-
+
Gradient detection:
@@ -240,7 +240,7 @@
-
+
Image threshold
@@ -250,7 +250,7 @@
-
+
Gradient threshold:
@@ -260,7 +260,7 @@
-
+
Gradient sample size:
@@ -282,7 +282,7 @@
-
+
Blackframe sample width:
@@ -292,7 +292,7 @@
-
+
Blackframe sample height:
@@ -302,7 +302,7 @@
-
+
Cumulative threshold:
@@ -312,7 +312,7 @@
-
+
Black pixel threshold:
@@ -337,7 +337,7 @@
-
+
Sample width:
@@ -347,7 +347,7 @@
-
+
Detection threshold (px):
@@ -357,7 +357,7 @@
-
+
Single side confirmation threshold:
@@ -367,7 +367,7 @@
-
+
Logo threshold:
@@ -377,7 +377,7 @@
-
+
Ignore middle area:
@@ -387,7 +387,7 @@
-
+
Detect limit:
@@ -408,7 +408,7 @@
-
+
@@ -418,7 +418,7 @@
-
+
Ignore edge margin:
@@ -428,7 +428,7 @@
-
+
Image threshold:
@@ -438,7 +438,7 @@
-
+
Edge tolerance (px):
@@ -456,7 +456,7 @@
-
+
Aspect ratio change threshold.
@@ -497,3 +497,11 @@ export default { } } + + diff --git a/src/options/controls-settings/AddEditActionPopup.vue b/src/options/controls-settings/AddEditActionPopup.vue index beef4be..4e8ebf6 100644 --- a/src/options/controls-settings/AddEditActionPopup.vue +++ b/src/options/controls-settings/AddEditActionPopup.vue @@ -7,22 +7,24 @@ {{actionIndex < 0 ? 'Add new action' : 'Edit action'}}
- - - - +
+ + + + +
-
+
@@ -54,12 +56,12 @@
-
+
Show this action in the following tabs:
- -
Stretch actions
diff --git a/src/options/controls-settings/command-builder/CommandAddEdit.vue b/src/options/controls-settings/command-builder/CommandAddEdit.vue index c1c8a93..febcee9 100644 --- a/src/options/controls-settings/command-builder/CommandAddEdit.vue +++ b/src/options/controls-settings/command-builder/CommandAddEdit.vue @@ -66,7 +66,7 @@
-
+
@@ -140,4 +140,18 @@ export default { } } } - \ No newline at end of file + + + diff --git a/src/popup/panels/DefaultSettingsPanel.vue b/src/popup/panels/DefaultSettingsPanel.vue index 337a254..838c821 100644 --- a/src/popup/panels/DefaultSettingsPanel.vue +++ b/src/popup/panels/DefaultSettingsPanel.vue @@ -172,10 +172,4 @@ export default { diff --git a/src/popup/panels/VideoPanel.vue b/src/popup/panels/VideoPanel.vue index 2dd64e7..c302ee2 100644 --- a/src/popup/panels/VideoPanel.vue +++ b/src/popup/panels/VideoPanel.vue @@ -16,7 +16,7 @@
-
Zooming and panning
+
Zooming and panning
<% } %> diff --git a/src/res/css/colors.scss b/src/res/css/colors.scss index 7253c3c..4328a3a 100644 --- a/src/res/css/colors.scss +++ b/src/res/css/colors.scss @@ -9,6 +9,8 @@ $input-border: #4e3527; $page-background: #101010; $background-primary: #101010; -$background-selected: #944918; +$selected-color: #f5cbaf; +$background-selected: #412d20; -$info-color: #e9bea3; \ No newline at end of file + +$info-color: #bda9f3; \ No newline at end of file diff --git a/src/res/css/common.scss b/src/res/css/common.scss index 8870bef..56580ed 100644 --- a/src/res/css/common.scss +++ b/src/res/css/common.scss @@ -1,6 +1,8 @@ @import "colors.scss"; @import "/res/css/font/overpass.css"; @import "/res/css/font/overpass-mono.css"; +@import "/res/css/flex.css"; +// @import "form.scss"; body { background-color: $background-primary; @@ -83,6 +85,13 @@ body { padding-bottom: 0.69rem; } +a, a:visited { + color: $primary-color; +} +a:hover { + color: lighten($primary-color, 10%); +} + /* INPUT FORMATTING */ input[type="number"], input[type="text"], input { @@ -164,13 +173,45 @@ small { +.invalid-input { + border: 1px solid #720 !important; + background-color: #410 !important; +} -/* COLORS */ +.button { + /*display: inline-block;*/ + // padding-top: 8px; + // padding-bottom: 3px; + //padding-left: 5px; + //padding-right: 5px; + border: 1px solid rgb(39, 39, 39); + margin-top: 3px; + margin-bottom: 3px; + color: $text-dim; + text-align: center; +} -.selected { - color: #ffddaa !important; - background-color: #433221 !important; +.selected, .setting-selected { + color: $selected-color; + background-color: $background-selected; +} + +.selected-tab { + color: $selected-color; +} + +.setting-selected { + border: 1px solid shade($selected-color, 25%); +} + +.button:hover { + color: lighten($selected-color, 10%); + background-color: lighten($background-selected, 10%); +} + +.button { + cursor: pointer !important; } .disabled { @@ -207,31 +248,6 @@ small { } -/* BUTTONS AND INPUTS */ - -.invalid-input { - border: 1px solid #720 !important; - background-color: #410 !important; -} - -.button { - /*display: inline-block;*/ - // padding-top: 8px; - // padding-bottom: 3px; - //padding-left: 5px; - //padding-right: 5px; - border: 1px solid #444; - margin-top: 3px; - margin-bottom: 3px; - color: #dbb; - text-align: center; -} - -.button:hover { - color: #fff; - background-color: $primary-color; -} - /** misc **/ @@ -266,13 +282,28 @@ small { } .experimental::after { - content: "Experimental"; - background-color: #ffde12; - color: #1f1f1f; + // content: "Experimental"; + content: "â’º"; + color: #ffde12; + // background-color: #1f1f1f; display: inline-block; font-size: .75em; font-variant: small-caps; padding-left: 5px; padding-right: 5px; margin-left: 10px; + margin-top: -4px; +} +.experimental:hover::after { + content: "â’º Experimental"; + // content: ""; + color: #ffde12; + // background-color: #1f1f1f; + display: inline-block; + font-size: .75em; + font-variant: small-caps; + padding-left: 5px; + padding-right: 5px; + margin-left: 10px; + margin-top: -4px; }