diff options
| -rw-r--r-- | src/App.scss | 13 | ||||
| -rw-r--r-- | src/components/color_input/color_input.vue | 35 | ||||
| -rw-r--r-- | src/components/opacity_input/opacity_input.vue | 42 | ||||
| -rw-r--r-- | src/components/shadow_control/shadow_control.vue | 52 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 274 |
5 files changed, 105 insertions, 311 deletions
diff --git a/src/App.scss b/src/App.scss index 1021b64b..970a5f74 100644 --- a/src/App.scss +++ b/src/App.scss @@ -64,6 +64,11 @@ button { font-size: 14px; font-family: sans-serif; + i[class*=icon-] { + color: $fallback--text; + color: var(--btnText, $fallback--text); + } + &::-moz-focus-inner { border: none; } @@ -145,6 +150,14 @@ input, textarea, .select { line-height: 16px; } + &[type=range] { + background: none; + border: none; + margin: 0; + box-shadow: none; + flex: 1; + } + &[type=radio], &[type=checkbox] { display: none; diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue index b756d265..34eec248 100644 --- a/src/components/color_input/color_input.vue +++ b/src/components/color_input/color_input.vue @@ -5,7 +5,7 @@ </label> <input v-if="typeof fallback !== 'undefined'" - class="opt" + class="opt exlcude-disabled" :id="name + '-o'" type="checkbox" :checked="present" @@ -45,40 +45,9 @@ export default { <style lang="scss"> .color-control { - display: flex; - align-items: baseline; - - &.disabled *:not(.opt-l){ - opacity: .5 - } - - .label { - flex: 2; - min-width: 7em; - } - - .opt-l { - align-self: center; - flex: 0; - &::before { - width: 14px; - height: 14px; - } - } - - .text-input { + input.text-input { max-width: 7em; flex: 1; } - - .color-input { - flex: 0; - padding: 1px; - cursor: pointer; - height: 29px; - min-width: 2em; - border: none; - align-self: stretch; - } } </style> diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue index e0567ec7..3926915b 100644 --- a/src/components/opacity_input/opacity_input.vue +++ b/src/components/opacity_input/opacity_input.vue @@ -5,7 +5,7 @@ </label> <input v-if="typeof fallback !== 'undefined'" - class="opt" + class="opt exclude-disabled" :id="name + '-o'" type="checkbox" :checked="present" @@ -36,43 +36,3 @@ export default { } } </script> - -<style lang="scss"> -.opacity-control { - display: flex; - align-items: baseline; - - &.disabled *:not(.opt-l) { - opacity: .5 - } - - .opt-l { - align-self: center; - &::before { - width: 14px; - height: 14px; - } - } - - .label { - flex: 2; - min-width: 7em; - } - - .input-range { - background: none; - border: none; - margin: 0; - height: auto; - box-shadow: none; - min-width: 7em; - flex: 1; - } - - .input-number { - margin: 0; - min-width: 4em; - flex: 0; - } -} -</style> diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue index b99df35a..cd774d32 100644 --- a/src/components/shadow_control/shadow_control.vue +++ b/src/components/shadow_control/shadow_control.vue @@ -39,7 +39,7 @@ </div> <div class="shadow-tweak"> - <div :disabled="usingFallback" class="id-control"> + <div :disabled="usingFallback" class="id-control style-control"> <label for="shadow-switcher" class="select"> <select v-model="selectedId" class="shadow-switcher" @@ -64,7 +64,7 @@ <i class="icon-plus"/> </button> </div> - <div :disabled="!present" class="inset-control"> + <div :disabled="!present" class="inset-control style-control"> <label for="inset" class="label"> {{$t('settings.style.shadows.inset')}} </label> @@ -77,7 +77,7 @@ type="checkbox"> <label class="checkbox-label" for="inset"></label> </div> - <div :disabled="!present" class="blur-control"> + <div :disabled="!present" class="blur-control style-control"> <label for="spread" class="label"> {{$t('settings.style.shadows.blur')}} </label> @@ -97,7 +97,7 @@ type="number" min="0"> </div> - <div :disabled="!present" class="spread-control"> + <div :disabled="!present" class="spread-control style-control"> <label for="spread" class="label"> {{$t('settings.style.shadows.spread')}} </label> @@ -137,6 +137,11 @@ flex-wrap: wrap; justify-content: center; + + .shadow-preview-container, + .shadow-tweak { + margin: 5px 6px 0 0; + } .shadow-preview-container { flex: 0; display: flex; @@ -210,39 +215,18 @@ } .shadow-tweak { - .label { - flex: 1; - min-width: 3em; - } + flex: 1; - .inset-control { - justify-content: flex-end; - label { - flex: 0 + .id-control { + align-items: stretch; + .select, .btn { + margin-right: 5px; } - } - - .blur-control, - .id-control, - .inset-control, - .spread-control { - display: flex; - align-items: baseline; - max-width: 100%; - - &[disabled=disabled] *{ - opacity: .5 - } - - .input-range { + .select { flex: 1; - align-self: center; - } - - .input-number { - width: 4em; - min-width: 4em; - flex: 0; + select { + align-self: initial; + } } } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index fd5d830a..5f0c2566 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -1,52 +1,53 @@ <template> - <div> - <div class="presets-container"> - <div> - {{$t('settings.presets')}} - <label for="style-switcher" class='select'> - <select id="style-switcher" v-model="selected" class="style-switcher"> - <option v-for="style in availableStyles" - :value="style" - :style="{ - backgroundColor: style[1], - color: style[3] - }"> - {{style[0]}} - </option> - </select> - <i class="icon-down-open"/> - </label> - </div> - <div class="import-export"> - <button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button> - <button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button> - <p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p> - </div> +<div class="style-switcher"> + <div class="presets-container"> + <div> + {{$t('settings.presets')}} + <label for="preset-switcher" class='select'> + <select id="preset-switcher" v-model="selected" class="preset-switcher"> + <option v-for="style in availableStyles" + :value="style" + :style="{ + backgroundColor: style[1], + color: style[3] + }"> + {{style[0]}} + </option> + </select> + <i class="icon-down-open"/> + </label> </div> + <div class="import-export"> + <button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button> + <button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button> + <p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p> + </div> + </div> - <div class="preview-container"> - <div class="panel dummy" :style="previewRules"> - <div class="panel-heading">Preview</div> - <div class="panel-body theme-preview-content"> - <div class="avatar"> - ( ͡° ͜ʖ ͡°) - </div> - <h4>Content</h4> - <br> - A bunch of more content and - <a style="color: var(--link)">a nice lil' link</a> - <i style="color: var(--cBlue)" class="icon-reply"/> - <i style="color: var(--cGreen)" class="icon-retweet"/> - <i style="color: var(--cRed)" class="icon-cancel"/> - <i style="color: var(--cOrange)" class="icon-star"/> - <br> - <button class="btn">Button</button> - </div> + <div class="preview-container"> + <div class="panel dummy" :style="previewRules"> + <div class="panel-heading">Preview</div> + <div class="panel-body theme-preview-content"> + <div class="avatar"> + ( ͡° ͜ʖ ͡°) + </div> + <h4>Content</h4> + <br> + A bunch of more content and + <a style="color: var(--link)">a nice lil' link</a> + <i style="color: var(--cBlue)" class="icon-reply"/> + <i style="color: var(--cGreen)" class="icon-retweet"/> + <i style="color: var(--cRed)" class="icon-cancel"/> + <i style="color: var(--cOrange)" class="icon-star"/> + <br> + <button class="btn">Button</button> </div> </div> + </div> - <p>{{$t('settings.theme_help')}}</p> - <tab-switcher> + <p>{{$t('settings.theme_help')}}</p> + <keep-alive> + <tab-switcher key="style-tweak"> <div :label="$t('settings.style.basic_colors._tab_label')" class="color-container"> <div class="color-item"> <h4>{{ $t('settings.style.basic_colors.main') }}</h4> @@ -171,31 +172,36 @@ </div> </div> <div :label="$t('settings.style.shadows._tab_label')" class="shadow-container"> - <div> - {{$t('settings.style.shadows.component')}} - <label for="shadow-switcher" class="shadow-selector select"> - <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher"> - <option v-for="shadow in shadowsAvailable" - :value="shadow"> - {{$t('settings.style.shadows.components.' + shadow)}} - </option> - </select> - <i class="icon-down-open"/> - </label> - <label for="override" class="label"> - {{$t('settings.style.shadows.override')}} - </label> - <input - v-model="currentShadowOverriden" - name="override" - id="override" - class="input-override" - type="checkbox"> - <label class="checkbox-label" for="override"></label> + <div class="shadow-selector"> + <div> + {{$t('settings.style.shadows.component')}} + <label for="shadow-switcher" class="select"> + <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher"> + <option v-for="shadow in shadowsAvailable" + :value="shadow"> + {{$t('settings.style.shadows.components.' + shadow)}} + </option> + </select> + <i class="icon-down-open"/> + </label> + </div> + <div class="override"> + <label for="override" class="label"> + {{$t('settings.style.shadows.override')}} + </label> + <input + v-model="currentShadowOverriden" + name="override" + id="override" + class="input-override" + type="checkbox"> + <label class="checkbox-label" for="override"></label> + </div> </div> <shadow-control v-if="currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/> </div> </tab-switcher> + </keep-alive> <div class="apply-container"> <button class="btn submit" @click="setCustomTheme">{{$t('general.apply')}}</button> @@ -205,142 +211,4 @@ <script src="./style_switcher.js"></script> -<style lang="scss"> -@import '../../_variables.scss'; -.style-switcher { - margin-right: 1em; -} - -.import-warning { - color: $fallback--cRed; - color: var(--cRed, $fallback--cRed); -} - -.apply-container, -.radius-container, -.color-container, -.presets-container { - display: flex; - - p { - margin-left: 1em - } -} - -.radius-container { - flex-direction: column; -} - -.color-container{ - flex-wrap: wrap; - justify-content: space-between; -} - -.presets-container { - justify-content: center; - .import-export { - display: flex; - - .btn { - margin-left: .5em; - } - } -} - -.preview-container { - border-top: 1px dashed; - border-bottom: 1px dashed; - border-color: $fallback--border; - border-color: var(--border, $fallback--border); - margin: 1em -1em 0; - padding: 1em; - background: var(--body-background-image); - background-size: cover; - background-position: 50% 50%; - - .btn { - margin-top: 1em; - min-height: 30px; - width: 10em; - } -} - -.apply-container { - justify-content: center; -} - -.radius-item, -.color-item { - min-width: 20em; - margin: 5px 6px 0 0; - display:flex; - flex-direction: column; - flex: 1 1 0; - - &.wide { - min-width: 60% - } - &:not(.wide):nth-child(2n+1) { - margin-right: 7px; - - } - - .color, .opacity { - display:flex; - align-items: baseline; - } - - h4 { - margin-top: 1em; - } -} - -.radius-item { - flex-basis: auto; -} - -.theme-radius-rn, -.theme-color-cl { - border: 0; - box-shadow: none; - background: transparent; - color: var(--faint, $fallback--faint); - align-self: stretch; -} - -.theme-color-cl, -.theme-radius-in, -.theme-color-in { - margin-left: 4px; -} - -.theme-radius-in { - min-width: 1em; -} - -.theme-radius-in { - max-width: 7em; - flex: 1; -} - -.theme-radius-lb{ - max-width: 50em; -} - -.theme-preview-content { - padding: 20px; -} - -.dummy { - .avatar { - background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); - color: black; - text-align: center; - height: 48px; - line-height: 48px; - width: 48px; - float: left; - margin-right: 1em; - } -} -</style> +<style src="./style_switcher.scss" lang="scss"></style> |