tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First round of CSS fixes

Browse Source
This commit is contained in:
Tamius Han 2019-05-22 01:03:15 +02:00
parent 4c5569f039
commit add72e8398
11 changed files with 204 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/common/components/ActionAlt.vue
View File

@ -6,11 +6,12 @@
</div>
<div class="flex action-name">
<span class="icon" @click="removeAction()">🗙</span>
<span class="icon" @click="editAction()">🖉</span> {{action.name}}
<span class="icon red" @click="removeAction()">🗙</span> &nbsp; &nbsp;
<span class="icon" @click="editAction()">🖉</span> &nbsp; &nbsp;
{{action.name}}
</div>
</div>
<div class="flex flex-row">
<div class="flex flex-row command-details">
<div class="flex flex-column cmd-container">
<div class="flex bold">
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 {

2
src/options/App.vue
View File

@ -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') {

86
src/options/AutodetectionSettings.vue
View File

@ -17,7 +17,7 @@
<div class="indent">
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Frequency while playing:
</div>
<div class="flex flex-input">
@ -27,7 +27,7 @@
</div>
</div>
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Frequency while paused:
</div>
<div class="flex flex-input">
@ -37,7 +37,7 @@
</div>
</div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Error timeout:
</div>
<div class="flex flex-input">
@ -48,15 +48,9 @@
</div>
</div>
<div class="info">Setting values under 100 milliseconds will have no effect unless you also reduce the tickrate.
<a href="#"
@click="showAdvancedOptions = true"
>Show advanced options</a>
</div>
<div class="indent">
<div class="flex flex-row row-padding" v-if="showAdvancedOptions">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Tick rate:
</div>
<div class="flex flex-input">
@ -67,6 +61,12 @@
</div>
</div>
<div class="info">Setting values under 100 milliseconds will have no effect unless you also reduce the tickrate.
<a href="#"
@click="showAdvancedOptions = true"
>Show advanced options</a>
</div>
<div class="label">Fallback mode</div>
<div class="description">
Some streaming sites implement stuff (DRM) that prevents us from detecting aspect ratio using our favourite way.
@ -91,7 +91,7 @@
</div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Safety border thickness (in px)
</div>
<div class="flex flex-input">
@ -101,7 +101,7 @@
</div>
</div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Don't react if detected edge is less than this many pixels thick:
</div>
<div class="flex flex-input">
@ -118,7 +118,7 @@
</div>
<div class="indent">
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Letterbox misalignment threshold
</div>
<div class="flex flex-input">
@ -140,7 +140,7 @@
</div>
<div class="indent">
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Static sample columns:
</div>
<div class="flex flex-input">
@ -150,7 +150,7 @@
</div>
</div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Random sample columns:
</div>
<div class="flex flex-input">
@ -160,7 +160,7 @@
</div>
</div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Static rows:
</div>
<div class="flex flex-input">
@ -170,7 +170,7 @@
</div>
</div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Sample width:
</div>
<div class="flex flex-input">
@ -180,7 +180,7 @@
</div>
</div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Static rows:
</div>
<div class="flex flex-input">
@ -212,7 +212,7 @@
</div>
<div class="indent">
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Black level:
</div>
<div class="flex flex-input">
@ -222,7 +222,7 @@
</div>
</div>
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Threshold:
</div>
<div class="flex flex-input">
@ -232,7 +232,7 @@
</div>
</div>
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Gradient detection:
</div>
<div class="flex flex-input">
@ -240,7 +240,7 @@
</div>
</div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Image threshold
</div>
<div class="flex flex-input">
@ -250,7 +250,7 @@
</div>
</div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Gradient threshold:
</div>
<div class="flex flex-input">
@ -260,7 +260,7 @@
</div>
</div>
<div v-if="showAdvancedOptions" class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Gradient sample size:
</div>
<div class="flex flex-input">
@ -282,7 +282,7 @@
</div>
<div class="indent">
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Blackframe sample width:
</div>
<div class="flex flex-input">
@ -292,7 +292,7 @@
</div>
</div>
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Blackframe sample height:
</div>
<div class="flex flex-input">
@ -302,7 +302,7 @@
</div>
</div>
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Cumulative threshold:
</div>
<div class="flex flex-input">
@ -312,7 +312,7 @@
</div>
</div>
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Black pixel threshold:
</div>
<div class="flex flex-input">
@ -337,7 +337,7 @@
</div>
<div class="indent">
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Sample width:
</div>
<div class="flex flex-input">
@ -347,7 +347,7 @@
</div>
</div>
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Detection threshold (px):
</div>
<div class="flex flex-input">
@ -357,7 +357,7 @@
</div>
</div>
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Single side confirmation threshold:
</div>
<div class="flex flex-input">
@ -367,7 +367,7 @@
</div>
</div>
<div class="flex flex-row row-padding" v-if="showAdvancedOptions">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Logo threshold:
</div>
<div class="flex flex-input">
@ -377,7 +377,7 @@
</div>
</div>
<div class="flex flex-row row-padding" v-if="showAdvancedOptions">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Ignore middle area:
</div>
<div class="flex flex-input">
@ -387,7 +387,7 @@
</div>
</div>
<div class="flex flex-row row-padding" v-if="showAdvancedOptions">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Detect limit:
</div>
<div class="flex flex-input">
@ -408,7 +408,7 @@
</div>
<div class="indent">
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary ">
</div>
<div class="flex flex-input">
@ -418,7 +418,7 @@
</div>
</div>
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Ignore edge margin:
</div>
<div class="flex flex-input">
@ -428,7 +428,7 @@
</div>
</div>
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Image threshold:
</div>
<div class="flex flex-input">
@ -438,7 +438,7 @@
</div>
</div>
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Edge tolerance (px):
</div>
<div class="flex flex-input">
@ -456,7 +456,7 @@
</div>
<div class="indent">
<div class="flex flex-row row-padding">
<div class="flex label-secondary">
<div class="flex label-secondary form-label">
Aspect ratio change threshold.
</div>
<div class="flex flex-input">
@ -497,3 +497,11 @@ export default {
}
}
</script>
<style lang="scss" scoped>
.form-label {
width: 20rem;
text-align: right;
vertical-align: baseline;
}
</style>

64
src/options/controls-settings/AddEditActionPopup.vue
View File

@ -7,22 +7,24 @@
{{actionIndex < 0 ? 'Add new action' : 'Edit action'}}
</div>
<CommandChain class="w100"
:command="action.cmd"
@new-command="addNewCommand()"
@edit="editCommand"
@delete="deleteCommand"
>
</CommandChain>
<CommandAddEdit class="w100"
v-if="addEditCommand"
:action="currentCmd"
@set-command="updateCommand"
@close-popup="addEditCommand=false"
>
</CommandAddEdit>
<div class="command-chain-border">
<CommandChain class="w100"
:command="action.cmd"
@new-command="addNewCommand()"
@edit="editCommand"
@delete="deleteCommand"
>
</CommandChain>
<CommandAddEdit class="w100 cae-margin"
v-if="addEditCommand"
:action="currentCmd"
@set-command="updateCommand"
@close-popup="addEditCommand=false"
>
</CommandAddEdit>
</div>
<div class="flex flex-column">
<div class="flex flex-column section-pad">
<div class="flex flex-row">
<div class="flex label-secondary form-label">
<span class="w100">
@ -54,12 +56,12 @@
</div>
<div class="flex flex-row">
<div class="flex flex-row section-pad">
<b>Show this action in the following tabs:</b>
</div>
<template v-if="action && action.cmd[0] && action.cmd[0].action !== 'set-ar'">
<div>Extension settings (global)</div>
<div class="tab-title">Extension settings (global)</div>
<ScopeSettings :scopeOptions="globalScopeOptions"
@show="updateScopes('global', 'show', $event)"
@set-label="updateScopes('global', 'label', $event)"
@ -68,7 +70,7 @@
</template>
<template v-if="action && action.cmd[0] && action.cmd[0].action !== 'set-ar'">
<div>Site settings (site)</div>
<div class="tab-title">Site settings (site)</div>
<ScopeSettings :scopeOptions="siteScopeOptions"
@show="updateScopes('site', 'show', $event)"
@set-label="updateScopes('site', 'label', $event)"
@ -76,7 +78,7 @@
/>
</template>
<div>Video settings (page)</div>
<div class="tab-title">Video settings (page)</div>
<ScopeSettings :scopeOptions="pageScopeOptions"
@show="updateScopes('page', 'show', $event)"
@set-label="updateScopes('page', 'label', $event)"
@ -246,6 +248,11 @@ export default {
</script>
<style lang="scss" scoped>
@import '../../res/css/colors';
.cae-margin {
margin-top: 20px;
}
.full-screen {
background-color: rgba(0,0,0,0.5);
@ -276,10 +283,17 @@ export default {
.form-label {
width: 16rem;
text-align: right;
text-align: left;
// text-align: right;
vertical-align: baseline;
}
.tab-title {
font-size: 1.2em;
color: lighten($primary-color, 25%);
padding-top: 20px;
padding-bottom: 10px;
}
.hint {
opacity: 50% !important;
@ -303,5 +317,15 @@ export default {
height: 1.7em;
}
.command-chain-border {
border: 1px dotted lighten($selected-color, 10%);
padding: 10px;
padding-top: 20px;
padding-bottom: 20px;
}
.section-pad {
padding-top: 35px;
}
</style>

2
src/options/controls-settings/ControlsSettings.vue
View File

@ -37,8 +37,6 @@
>
</ActionAlt>
</template>
<div class="action-item-category-header">
Stretch actions
</div>

18
src/options/controls-settings/command-builder/CommandAddEdit.vue
View File

@ -66,7 +66,7 @@
</div>
<div class="window-footer">
<div class="flex flex-row flex-end close-save-button-margin">
<div class="button"
@click="$emit('close-popup')"
>
@ -140,4 +140,18 @@ export default {
}
}
}
</script>
</script>
<style>
.form-label {
width: 15rem;
text-align: left;
/* text-align: right; */
vertical-align: baseline;
}
.close-save-button-margin {
padding-top: 25px;
}
</style>

6
src/popup/panels/DefaultSettingsPanel.vue
View File

@ -172,10 +172,4 @@ export default {
</script>
<style>
.button-selected {
background-color: "#fff"
}
.setting-selected {
background-color: #ffa;
}
</style>

2
src/popup/panels/VideoPanel.vue
View File

@ -16,7 +16,7 @@
</div>
<div v-if="true" class="w100">
<div class="label">Zooming and panning</div>
<div class="label experimental">Zooming and panning</div>
<div class="row w100"
>
<!--

1
src/popup/popup.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="popup.css">
<% if (NODE_ENV === 'development') { %>
<!-- Load some resources only in development environment -->
<% } %>

6
src/res/css/colors.scss
View File

@ -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;
$info-color: #bda9f3;

95
src/res/css/common.scss
View File

@ -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;
}