<select> styling (abeit somewhat not pretty code-wise), default colors for
default schemes.
This commit is contained in:
Henry Jameson
parent
529643d35a
commit
65f82cf294
22 changed files with 193 additions and 130 deletions
40
src/App.scss
40
src/App.scss
|
|
@ -77,8 +77,12 @@ button{
|
|||
}
|
||||
}
|
||||
|
||||
label.select {
|
||||
padding: 0;
|
||||
|
||||
input, textarea, select {
|
||||
}
|
||||
|
||||
input, textarea, .select {
|
||||
border: none;
|
||||
border-radius: $fallback--btnRadius;
|
||||
border-radius: var(--btnRadius, $fallback--btnRadius);
|
||||
|
|
@ -93,11 +97,35 @@ input, textarea, select {
|
|||
font-size: 14px;
|
||||
padding: 8px 7px 4px;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
// TODO: Restyle <select> in a decent way. Needs different markup
|
||||
// -webkit-appearance:none;
|
||||
// -moz-appearance:none;
|
||||
// appearance:none;
|
||||
.icon-down-open {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 5px;
|
||||
height: 100%;
|
||||
color: $fallback--fg;
|
||||
color: var(--fg, $fallback--fg);
|
||||
line-height: 29px;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin: 0;
|
||||
color: $fallback--fg;
|
||||
color: var(--fg, $fallback--fg);
|
||||
padding: 4px 3ch 3px 3px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&[type=radio],
|
||||
&[type=checkbox] {
|
||||
|
|
@ -185,7 +213,7 @@ nav {
|
|||
height: 50px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-size: auto 80%;
|
||||
|
||||
a i {
|
||||
color: $fallback--link;
|
||||
|
|
|
|||
|
|
@ -41,6 +41,11 @@
|
|||
flex: 0 0 auto;
|
||||
max-height: 300px;
|
||||
max-width: 100%;
|
||||
line-height: 0;
|
||||
|
||||
video {
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.attachment {
|
||||
|
|
|
|||
|
|
@ -103,8 +103,8 @@
|
|||
|
||||
.attachment {
|
||||
position: relative;
|
||||
border: $fallback--border;
|
||||
border: var(--border, $fallback--border);
|
||||
border: 1px solid $fallback--border;
|
||||
border: 1px solid var(--border, $fallback--border);
|
||||
margin: 0.5em 0.8em 0.2em 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,53 +10,55 @@
|
|||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
.still-image {
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
|
||||
&:hover canvas {
|
||||
display: none;
|
||||
}
|
||||
&:hover canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
&.animated {
|
||||
&:hover::before,
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&.animated {
|
||||
&:hover::before,
|
||||
img {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
visibility: visible
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: 'gif';
|
||||
position: absolute;
|
||||
line-height: 10px;
|
||||
font-size: 10px;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
background: rgba(127,127,127,.5);
|
||||
color: #FFF;
|
||||
display: block;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
z-index: 2;
|
||||
}
|
||||
&:hover img {
|
||||
visibility: visible
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&::before {
|
||||
content: 'gif';
|
||||
position: absolute;
|
||||
line-height: 10px;
|
||||
font-size: 10px;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
background: rgba(127,127,127,.5);
|
||||
color: #FFF;
|
||||
display: block;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export default {
|
|||
availableStyles: [],
|
||||
selected: this.$store.state.config.theme,
|
||||
bgColorLocal: '',
|
||||
fgColorLocal: '',
|
||||
btnColorLocal: '',
|
||||
textColorLocal: '',
|
||||
linkColorLocal: '',
|
||||
redColorLocal: '#ff0000',
|
||||
|
|
@ -26,7 +26,7 @@ export default {
|
|||
},
|
||||
mounted () {
|
||||
this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors.bg)
|
||||
this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors.lightBg)
|
||||
this.btnColorLocal = rgbstr2hex(this.$store.state.config.colors.lightBg)
|
||||
this.textColorLocal = rgbstr2hex(this.$store.state.config.colors.fg)
|
||||
this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors.link)
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
setCustomTheme () {
|
||||
if (!this.bgColorLocal && !this.fgColorLocal && !this.linkColorLocal) {
|
||||
if (!this.bgColorLocal && !this.btnColorLocal && !this.linkColorLocal) {
|
||||
// reset to picked themes
|
||||
}
|
||||
const rgb = (hex) => {
|
||||
|
|
@ -49,7 +49,7 @@ export default {
|
|||
} : null
|
||||
}
|
||||
const bgRgb = rgb(this.bgColorLocal)
|
||||
const fgRgb = rgb(this.fgColorLocal)
|
||||
const btnRgb = rgb(this.btnColorLocal)
|
||||
const textRgb = rgb(this.textColorLocal)
|
||||
const linkRgb = rgb(this.linkColorLocal)
|
||||
|
||||
|
|
@ -58,11 +58,11 @@ export default {
|
|||
const greenRgb = rgb(this.greenColorLocal)
|
||||
const orangeRgb = rgb(this.orangeColorLocal)
|
||||
|
||||
if (bgRgb && fgRgb && linkRgb) {
|
||||
if (bgRgb && btnRgb && linkRgb) {
|
||||
this.$store.dispatch('setOption', {
|
||||
name: 'customTheme',
|
||||
value: {
|
||||
fg: fgRgb,
|
||||
fg: btnRgb,
|
||||
bg: bgRgb,
|
||||
text: textRgb,
|
||||
link: linkRgb,
|
||||
|
|
@ -77,12 +77,12 @@ export default {
|
|||
watch: {
|
||||
selected () {
|
||||
this.bgColorLocal = this.selected[1]
|
||||
this.fgColorLocal = this.selected[2]
|
||||
this.btnColorLocal = this.selected[2]
|
||||
this.textColorLocal = this.selected[3]
|
||||
this.linkColorLocal = this.selected[4]
|
||||
this.redColorLocal = this.selected[5]
|
||||
this.blueColorLocal = this.selected[6]
|
||||
this.greenColorLocal = this.selected[7]
|
||||
this.greenColorLocal = this.selected[6]
|
||||
this.blueColorLocal = this.selected[7]
|
||||
this.orangeColorLocal = this.selected[8]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>{{$t('settings.presets')}}</p>
|
||||
<select v-model="selected" class="style-switcher">
|
||||
<option v-for="style in availableStyles" :value="style">{{style[0]}}</option>
|
||||
</select>
|
||||
<p>{{$t('settings.theme_help')}}</p>
|
||||
<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[0]}}</option>
|
||||
</select>
|
||||
<i class="icon-down-open"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="color-container">
|
||||
<p>{{$t('settings.theme_help')}}</p>
|
||||
<div class="color-item">
|
||||
<label for="bgcolor" class="theme-color-lb">{{$t('settings.background')}}</label>
|
||||
<input id="bgcolor" class="theme-color-cl" type="color" v-model="bgColorLocal">
|
||||
|
|
@ -13,8 +17,8 @@
|
|||
</div>
|
||||
<div class="color-item">
|
||||
<label for="fgcolor" class="theme-color-lb">{{$t('settings.foreground')}}</label>
|
||||
<input id="fgcolor" class="theme-color-cl" type="color" v-model="fgColorLocal">
|
||||
<input id="fgcolor-t" class="theme-color-in" type="text" v-model="fgColorLocal">
|
||||
<input id="fgcolor" class="theme-color-cl" type="color" v-model="btnColorLocal">
|
||||
<input id="fgcolor-t" class="theme-color-in" type="text" v-model="btnColorLocal">
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<label for="textcolor" class="theme-color-lb">{{$t('settings.text')}}</label>
|
||||
|
|
@ -26,8 +30,6 @@
|
|||
<input id="linkcolor" class="theme-color-cl" type="color" v-model="linkColorLocal">
|
||||
<input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal">
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-container additional colors">
|
||||
<div class="color-item">
|
||||
<label for="redcolor" class="theme-color-lb">{{$t('settings.cRed')}}</label>
|
||||
<input id="redcolor" class="theme-color-cl" type="color" v-model="redColorLocal">
|
||||
|
|
@ -51,14 +53,20 @@
|
|||
</div>
|
||||
<div>
|
||||
<div class="panel">
|
||||
<div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div>
|
||||
<div class="panel-heading" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Preview</div>
|
||||
<div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
|
||||
<h4>Content</h4>
|
||||
<br>
|
||||
A bunch of more content and
|
||||
<a :style="{ 'color': linkColorLocal }">a nice lil' link</a>
|
||||
<i :style="{ 'color': blueColorLocal }" class="icon-reply"/>
|
||||
<i :style="{ 'color': greenColorLocal }" class="icon-retweet"/>
|
||||
<i :style="{ 'color': redColorLocal }" class="icon-cancel"/>
|
||||
<i :style="{ 'color': orangeColorLocal }" class="icon-star"/>
|
||||
<br>
|
||||
<button class="btn" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Button</button>
|
||||
<br>
|
||||
<div class="finder-error" :style="{ 'background-color': redColorLocal }">And a scary alert</div>
|
||||
<button class="btn" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ const de = {
|
|||
settings: 'Einstellungen',
|
||||
theme: 'Farbschema',
|
||||
presets: 'Voreinstellungen',
|
||||
theme_help: 'Benutze HTML Farbcodes (#aabbcc) um dein Farbschema anzupassen.',
|
||||
theme_help: 'Benutze HTML Farbcodes (#rrggbb) um dein Farbschema anzupassen.',
|
||||
background: 'Hintergrund',
|
||||
foreground: 'Vordergrund',
|
||||
text: 'Text',
|
||||
|
|
@ -238,7 +238,7 @@ const en = {
|
|||
settings: 'Settings',
|
||||
theme: 'Theme',
|
||||
presets: 'Presets',
|
||||
theme_help: 'Use hex color codes (#aabbcc) to customize your color theme.',
|
||||
theme_help: 'Use hex color codes (#rrggbb) to customize your color theme.',
|
||||
background: 'Background',
|
||||
foreground: 'Foreground',
|
||||
text: 'Text',
|
||||
|
|
@ -812,7 +812,7 @@ const oc = {
|
|||
settings: 'Paramètres',
|
||||
theme: 'Tèma',
|
||||
presets: 'Pre-enregistrats',
|
||||
theme_help: 'Emplegatz los còdis de color hex (#aabbcc) per personalizar vòstre tèma de color.',
|
||||
theme_help: 'Emplegatz los còdis de color hex (#rrggbb) per personalizar vòstre tèma de color.',
|
||||
background: 'Rèire plan',
|
||||
foreground: 'Endavant',
|
||||
text: 'Tèxte',
|
||||
|
|
@ -998,7 +998,7 @@ const es = {
|
|||
settings: 'Ajustes',
|
||||
theme: 'Tema',
|
||||
presets: 'Por defecto',
|
||||
theme_help: 'Use códigos de color hexadecimales (#aabbcc) para personalizar su tema de colores.',
|
||||
theme_help: 'Use códigos de color hexadecimales (#rrggbb) para personalizar su tema de colores.',
|
||||
background: 'Segundo plano',
|
||||
foreground: 'Primer plano',
|
||||
text: 'Texto',
|
||||
|
|
@ -1098,7 +1098,7 @@ const pt = {
|
|||
settings: 'Configurações',
|
||||
theme: 'Tema',
|
||||
presets: 'Predefinições',
|
||||
theme_help: 'Use cores em código hexadecimal (#aabbcc) para personalizar seu esquema de cores.',
|
||||
theme_help: 'Use cores em código hexadecimal (#rrggbb) para personalizar seu esquema de cores.',
|
||||
background: 'Plano de Fundo',
|
||||
foreground: 'Primeiro Plano',
|
||||
text: 'Texto',
|
||||
|
|
@ -1198,7 +1198,7 @@ const ru = {
|
|||
settings: 'Настройки',
|
||||
theme: 'Тема',
|
||||
presets: 'Пресеты',
|
||||
theme_help: 'Используйте шестнадцатеричные коды цветов (#aabbcc) для настройки темы.',
|
||||
theme_help: 'Используйте шестнадцатеричные коды цветов (#rrggbb) для настройки темы.',
|
||||
background: 'Фон',
|
||||
foreground: 'Передний план',
|
||||
text: 'Текст',
|
||||
|
|
|
|||
|
|
@ -108,8 +108,8 @@ const setPreset = (val, commit) => {
|
|||
const linkRgb = hex2rgb(theme[4])
|
||||
|
||||
const cRedRgb = hex2rgb(theme[5] || '#FF0000')
|
||||
const cBlueRgb = hex2rgb(theme[6] || '#0000FF')
|
||||
const cGreenRgb = hex2rgb(theme[7] || '#00FF00')
|
||||
const cGreenRgb = hex2rgb(theme[6] || '#00FF00')
|
||||
const cBlueRgb = hex2rgb(theme[7] || '#0000FF')
|
||||
const cOrangeRgb = hex2rgb(theme[8] || '#E3FF00')
|
||||
|
||||
const col = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue