From f78a5158e160fce03b333ad0aea6b2e136d42f67 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 2 Oct 2018 21:43:58 +0300 Subject: something works without exploding and i'm tired already --- src/App.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'src/App.scss') diff --git a/src/App.scss b/src/App.scss index 056a235e..1119caf2 100644 --- a/src/App.scss +++ b/src/App.scss @@ -51,7 +51,7 @@ a { button { user-select: none; color: $fallback--fg; - color: var(--fg, $fallback--fg); + color: var(--btnText, $fallback--fg); background-color: $fallback--btn; background-color: var(--btn, $fallback--btn); border: none; @@ -254,7 +254,7 @@ nav { mask-position: center; mask-size: contain; background-color: $fallback--fg; - background-color: var(--fg, $fallback--fg); + background-color: var(--topBarText, $fallback--fg); position: absolute; top: 0; bottom: 0; @@ -330,8 +330,9 @@ main-router { padding: .6em .6em; text-align: left; line-height: 28px; + color: var(--panelText); background-color: $fallback--btn; - background-color: var(--btn, $fallback--btn); + background-color: var(--panel, $fallback--btn); align-items: baseline; .title { @@ -387,8 +388,9 @@ main-router { nav { z-index: 1000; + color: var(--topBarText); background-color: $fallback--btn; - background-color: var(--btn, $fallback--btn); + background-color: var(--topBar, $fallback--btn); color: $fallback--faint; color: var(--faint, $fallback--faint); box-shadow: 0px 0px 4px rgba(0,0,0,.6); -- cgit v1.2.3-70-g09d2 From 96804d42f0f6aa6af85295933af6fd267b19e473 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 7 Oct 2018 19:59:22 +0300 Subject: Some themeing is working!! --- src/App.scss | 56 +++++------ src/_variables.scss | 7 +- src/components/chat_panel/chat_panel.vue | 4 +- src/components/color_input/color_input.vue | 84 ++++++++++++++++ src/components/notifications/notifications.scss | 7 +- src/components/opacity_input/opacity_input.vue | 75 +++++++++++++++ .../post_status_form/post_status_form.vue | 12 +-- src/components/settings/settings.vue | 2 +- src/components/status/status.vue | 4 +- src/components/style_switcher/style_switcher.js | 107 ++++++++++++++++----- src/components/style_switcher/style_switcher.vue | 40 ++++---- src/components/tab_switcher/tab_switcher.scss | 8 +- src/components/timeline/timeline.vue | 10 +- .../user_card_content/user_card_content.vue | 16 +-- src/services/style_setter/style_setter.js | 28 +++--- 15 files changed, 343 insertions(+), 117 deletions(-) create mode 100644 src/components/color_input/color_input.vue create mode 100644 src/components/opacity_input/opacity_input.vue (limited to 'src/App.scss') diff --git a/src/App.scss b/src/App.scss index 1119caf2..c91b6a61 100644 --- a/src/App.scss +++ b/src/App.scss @@ -36,8 +36,8 @@ body { font-family: sans-serif; font-size: 14px; margin: 0; - color: $fallback--fg; - color: var(--fg, $fallback--fg); + color: $fallback--text; + color: var(--text, $fallback--text); max-width: 100vw; overflow-x: hidden; } @@ -50,10 +50,10 @@ a { button { user-select: none; - color: $fallback--fg; - color: var(--btnText, $fallback--fg); - background-color: $fallback--btn; - background-color: var(--btn, $fallback--btn); + color: $fallback--text; + color: var(--btnText, $fallback--text); + background-color: $fallback--fg; + background-color: var(--btn, $fallback--fg); border: none; border-radius: $fallback--btnRadius; border-radius: var(--btnRadius, $fallback--btnRadius); @@ -102,10 +102,10 @@ input, textarea, .select { border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-top: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 2px black inset; - background-color: $fallback--input; - background-color: var(--input, $fallback--input); - color: $fallback--lightFg; - color: var(--lightFg, $fallback--lightFg); + background-color: $fallback--fg; + background-color: var(--input, $fallback--fg); + color: $fallback--lightText; + color: var(--inputText, $fallback--lightText); font-family: sans-serif; font-size: 14px; padding: 8px 7px; @@ -122,8 +122,8 @@ input, textarea, .select { bottom: 0; right: 5px; height: 100%; - color: $fallback--fg; - color: var(--fg, $fallback--fg); + color: $fallback--text; + color: var(--text, $fallback--text); line-height: 29px; z-index: 0; pointer-events: none; @@ -136,8 +136,8 @@ input, textarea, .select { background: transparent; border: none; margin: 0; - color: $fallback--fg; - color: var(--fg, $fallback--fg); + color: $fallback--text; + color: var(--text, $fallback--text); padding: 4px 2em 3px 3px; width: 100%; z-index: 1; @@ -149,8 +149,8 @@ input, textarea, .select { &[type=checkbox] { display: none; &:checked + label::before { - color: $fallback--fg; - color: var(--fg, $fallback--fg); + color: $fallback--text; + color: var(--text, $fallback--text); } &:disabled, { @@ -172,8 +172,8 @@ input, textarea, .select { border-top: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 2px black inset; margin-right: .5em; - background-color: $fallback--input; - background-color: var(--input, $fallback--input); + background-color: $fallback--fg; + background-color: var(--input, $fallback--fg); vertical-align: top; text-align: center; line-height: 1.1em; @@ -187,8 +187,8 @@ input, textarea, .select { } option { - color: $fallback--fg; - color: var(--fg, $fallback--fg); + color: $fallback--text; + color: var(--text, $fallback--text); background-color: $fallback--bg; background-color: var(--bg, $fallback--bg); } @@ -279,9 +279,9 @@ nav { margin: auto; height: 50px; - a i { + a, a i { color: $fallback--link; - color: var(--link, $fallback--link); + color: var(--topBarLink, $fallback--link); } } } @@ -331,8 +331,8 @@ main-router { text-align: left; line-height: 28px; color: var(--panelText); - background-color: $fallback--btn; - background-color: var(--panel, $fallback--btn); + background-color: $fallback--fg; + background-color: var(--panel, $fallback--fg); align-items: baseline; .title { @@ -389,8 +389,8 @@ main-router { nav { z-index: 1000; color: var(--topBarText); - background-color: $fallback--btn; - background-color: var(--topBar, $fallback--btn); + background-color: $fallback--fg; + background-color: var(--topBar, $fallback--fg); color: $fallback--faint; color: var(--faint, $fallback--faint); box-shadow: 0px 0px 4px rgba(0,0,0,.6); @@ -518,8 +518,8 @@ nav { cursor: pointer; .selected { - color: $fallback--lightFg; - color: var(--lightFg, $fallback--lightFg); + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); } .text-format { diff --git a/src/_variables.scss b/src/_variables.scss index b5222a6a..0f73e929 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -3,14 +3,13 @@ $main-background: white; $darkened-background: whitesmoke; $fallback--bg: #121a24; -$fallback--btn: #182230; -$fallback--input: #182230; +$fallback--fg: #182230; $fallback--faint: rgba(185, 185, 186, .5); -$fallback--fg: #b9b9ba; +$fallback--text: #b9b9ba; $fallback--link: #d8a070; $fallback--icon: #666; $fallback--lightBg: rgb(21, 30, 42); -$fallback--lightFg: #b9b9ba; +$fallback--lightText: #b9b9ba; $fallback--border: #222; $fallback--cRed: #ff0000; $fallback--cBlue: #0095ff; diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue index 30070d3e..f174319a 100644 --- a/src/components/chat_panel/chat_panel.vue +++ b/src/components/chat_panel/chat_panel.vue @@ -55,8 +55,8 @@ .chat-heading { cursor: pointer; .icon-comment-empty { - color: $fallback--fg; - color: var(--fg, $fallback--fg); + color: $fallback--text; + color: var(--text, $fallback--text); } } diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue new file mode 100644 index 00000000..49d9bed7 --- /dev/null +++ b/src/components/color_input/color_input.vue @@ -0,0 +1,84 @@ + + + + + diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index a137ccd5..a98c2549 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -22,8 +22,8 @@ } .loadmore-error { - color: $fallback--fg; - color: var(--fg, $fallback--fg); + color: $fallback--text; + color: var(--text, $fallback--text); } .unseen { @@ -90,6 +90,9 @@ padding: 0.25em 0; color: $fallback--faint; color: var(--faint, $fallback--faint); + a { + color: var(--faintLink); + } } padding: 0; .media-body { diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue new file mode 100644 index 00000000..cfe6de21 --- /dev/null +++ b/src/components/opacity_input/opacity_input.vue @@ -0,0 +1,75 @@ + + + + + diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 42e9c65c..4514e79f 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -153,8 +153,8 @@ padding-bottom: 0; margin-left: $fallback--attachmentRadius; margin-left: var(--attachmentRadius, $fallback--attachmentRadius); - background-color: $fallback--btn; - background-color: var(--btn, $fallback--btn); + background-color: $fallback--fg; + background-color: var(--fg, $fallback--fg); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @@ -261,8 +261,8 @@ min-width: 75%; background: $fallback--bg; background: var(--bg, $fallback--bg); - color: $fallback--lightFg; - color: var(--lightFg, $fallback--lightFg); + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); } .autocomplete { @@ -291,8 +291,8 @@ } &.highlighted { - background-color: $fallback--btn; - background-color: var(--btn, $fallback--btn); + background-color: $fallback--fg; + background-color: var(--fg, $fallback--fg); } } } diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index eebb2cb7..990d1f0d 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -159,7 +159,7 @@ @import '../../_variables.scss'; .setting-item { - border-bottom: 2px solid var(--btn, $fallback--btn); + border-bottom: 2px solid var(--fg, $fallback--fg); margin: 1em 1em 1.4em; padding-bottom: 1.4em; diff --git a/src/components/status/status.vue b/src/components/status/status.vue index eb521280..57a007d9 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -284,8 +284,8 @@ margin-left: 0.2em; } a:hover i { - color: $fallback--fg; - color: var(--fg, $fallback--fg); + color: $fallback--text; + color: var(--text, $fallback--text); } } diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index a1c44be3..203ca18a 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -31,6 +31,7 @@ export default { panelColorLocal: undefined, panelTextColorLocal: undefined, + panelFaintColorLocal: undefined, panelOpacityLocal: undefined, topBarColorLocal: undefined, @@ -40,10 +41,17 @@ export default { alertOpacityLocal: undefined, - redColorLocal: '', - blueColorLocal: '', - greenColorLocal: '', - orangeColorLocal: '', + borderColorLocal: undefined, + borderOpacityLocal: undefined, + + faintColorLocal: undefined, + faintOpacityLocal: undefined, + faintLinkColorLocal: undefined, + + cRedColorLocal: '', + cBlueColorLocal: '', + cGreenColorLocal: '', + cOrangeColorLocal: '', btnRadiusLocal: '', inputRadiusLocal: '', @@ -74,16 +82,35 @@ export default { return { colors: { bg: this.bgColorLocal, - fg: this.fgColorLocal, text: this.textColorLocal, + link: this.linkColorLocal, + + fg: this.fgColorLocal, + fgText: this.fgTextColorLocal, + fgLink: this.fgLinkColorLocal, + panel: this.panelColorLocal, + panelText: this.panelTextColorLocal, + panelFaint: this.panelFaintColorLocal, + + input: this.inputColorLocal, + inputText: this.inputTextColorLocal, + topBar: this.topBarColorLocal, + topBarText: this.topBarTextColorLocal, + topBarLink: this.topBarLinkColorLocal, + btn: this.btnColorLocal, - link: this.linkColorLocal, - cRed: this.redColorLocal, - cBlue: this.blueColorLocal, - cGreen: this.greenColorLocal, - cOrange: this.orangeColorLocal + btnText: this.btnTextColorLocal, + + faint: this.faintColorLocal, + faintLink: this.faintLinkColorLocal, + border: this.borderColorLocal, + + cRed: this.cRedColorLocal, + cBlue: this.cBlueColorLocal, + cGreen: this.cGreenColorLocal, + cOrange: this.cOrangeColorLocal }, radii: { btnRadius: this.btnRadiusLocal, @@ -197,12 +224,12 @@ export default { }, clearV1 () { + this.bgOpacityLocal = undefined this.fgOpacityLocal = undefined this.fgTextColorLocal = undefined this.fgLinkColorLocal = undefined - this.panelColorLocal = undefined - this.topBarColorLocal = undefined + this.btnColorLocal = undefined this.btnTextColorLocal = undefined this.btnOpacityLocal = undefined @@ -216,7 +243,17 @@ export default { this.topBarColorLocal = undefined this.topBarTextColorLocal = undefined + this.topBarLinkColorLocal = undefined this.topBarOpacityLocal = undefined + + this.alertOpacityLocal = undefined + + this.borderColorLocal = undefined + this.borderOpacityLocal = undefined + + this.faintColorLocal = undefined + this.faintOpacityLocal = undefined + this.faintLinkColorLocal = undefined }, /** @@ -228,22 +265,42 @@ export default { const colors = input.colors || input const radii = input.radii || input - this.bgColorLocal = rgb2hex(colors.bg) - this.fgColorLocal = rgb2hex(colors.fg) - this.textColorLocal = rgb2hex(colors.text) - this.linkColorLocal = rgb2hex(colors.link) + if (version === 0) { + if (input.version) version = input.version + // Old v1 naming: fg is text, btn is foreground + if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') { + version = 1 + } + // New v2 naming: text is text, fg is foreground + if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') { + version = 2 + } + } + console.log('BENIS') + console.log(version) + // Stuff that differs between V1 and V2 if (version === 1) { - this.clearV1() + console.log(colors) + this.fgColorLocal = rgb2hex(colors.btn) + this.textColorLocal = rgb2hex(colors.fg) } - this.panelColorLocal = rgb2hex(colors.panel) - this.topBarColorLocal = rgb2hex(colors.topBar) - - this.redColorLocal = rgb2hex(colors.cRed) - this.blueColorLocal = rgb2hex(colors.cBlue) - this.greenColorLocal = rgb2hex(colors.cGreen) - this.orangeColorLocal = rgb2hex(colors.cOrange) + const keys = new Set(version !== 1 ? Object.keys(colors) : []) + if (version === 1) { + // V1 ignores the rest + this.clearV1() + keys + .add('bg') + .add('link') + .add('cRed') + .add('cBlue') + .add('cGreen') + .add('cOrange') + } + keys.forEach(key => { + this[key + 'ColorLocal'] = rgb2hex(colors[key]) + }) this.btnRadiusLocal = radii.btnRadius || 4 this.inputRadiusLocal = radii.inputRadius || 4 @@ -259,7 +316,7 @@ export default { if (this.selectedVersion === 1) { this.clearV1() this.bgColorLocal = this.selected[1] - this.btnColorLocal = this.selected[2] + this.fgColorLocal = this.selected[2] this.textColorLocal = this.selected[3] this.linkColorLocal = this.selected[4] this.redColorLocal = this.selected[5] diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index cf1fac92..7ddc2d1c 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -58,16 +58,16 @@
- - + +
- - + +
- - + +

Alert opacity

@@ -79,38 +79,40 @@

Panel header

- + - + +

Top bar

- + - - + +

Inputs

- + - +

Buttons

- + - +

Borders

- - + +

Faint text

- - + + +
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index 374a19c5..578caec2 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -17,8 +17,8 @@ .tab, &::after, &::before { border-bottom: 1px solid; - border-bottom-color: $fallback--btn; - border-bottom-color: var(--btn, $fallback--btn); + border-bottom-color: $fallback--fg; + border-bottom-color: var(--fg, $fallback--fg); } .tab { @@ -28,8 +28,8 @@ &:not(.active) { border-bottom: 1px solid; - border-bottom-color: $fallback--btn; - border-bottom-color: var(--btn, $fallback--btn); + border-bottom-color: $fallback--fg; + border-bottom-color: var(--fg, $fallback--fg); z-index: 4; } diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 2dd4376a..77a9a2af 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -61,12 +61,12 @@ opacity: 0.8; background-color: transparent; color: $fallback--faint; - color: var(--faint, $fallback--faint); + color: var(--panelFaint, $fallback--faint); } .loadmore-error { - color: $fallback--fg; - color: var(--fg, $fallback--fg); + color: $fallback--text; + color: var(--text, $fallback--text); } } @@ -79,7 +79,7 @@ border-color: var(--border, $fallback--border); padding: 10px; z-index: 1; - background-color: $fallback--btn; - background-color: var(--btn, $fallback--btn); + background-color: $fallback--fg; + background-color: var(--fg, $fallback--fg); } diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 59358040..f1b54fad 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -138,8 +138,8 @@ } .user-info { - color: $fallback--lightFg; - color: var(--lightFg, $fallback--lightFg); + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); padding: 0 16px; .container { @@ -173,8 +173,8 @@ } .usersettings { - color: $fallback--lightFg; - color: var(--lightFg, $fallback--lightFg); + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); opacity: .8; } @@ -193,8 +193,8 @@ } .user-screen-name { - color: $fallback--lightFg; - color: var(--lightFg, $fallback--lightFg); + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); display: inline-block; font-weight: light; font-size: 15px; @@ -269,8 +269,8 @@ padding: .5em 1.5em 0em 1.5em; text-align: center; justify-content: space-between; - color: $fallback--lightFg; - color: var(--lightFg, $fallback--lightFg); + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); &.clickable { .user-count { diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index cfa41b11..cc408933 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -112,27 +112,33 @@ const generatePreset = (input) => { colors.text = col.text colors.lightText = colors.text + colors.link = col.link + colors.border = col.border || col.fg + colors.faint = col.faint || col.text colors.bg = col.bg colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb colors.fg = col.fg - colors.fgText = getTextColor(colors.fg, colors.text) + colors.fgText = col.fgText || getTextColor(colors.fg, colors.text) + colors.fgLink = col.fgLink || getTextColor(colors.fg, colors.link) colors.btn = col.btn || col.fg - colors.btnText = getTextColor(colors.btn, colors.text) + colors.btnText = col.btnText || getTextColor(colors.btn, colors.fgText) + + colors.input = col.input || col.fg + colors.inputText = col.inputText || getTextColor(colors.input, colors.fgText) colors.panel = col.panel || col.fg - colors.panelText = getTextColor(colors.panel, colors.text) + colors.panelText = col.panelText || getTextColor(colors.panel, colors.fgText) + colors.panelFaint = col.panelFaint || getTextColor(colors.panel, colors.faint) colors.topBar = col.topBar || col.fg - colors.topBarText = getTextColor(colors.topBar, colors.text) + colors.topBarText = col.topBarText || getTextColor(colors.topBar, colors.fgText) + colors.topBarLink = col.topBarLink || getTextColor(colors.topBar, colors.fgLink) - colors.input = col.input || Object.assign({ a: 0.5 }, col.btn) - colors.border = col.btn - colors.faint = col.faint || Object.assign({ a: 0.5 }, col.text) + colors.faintLink = col.faintLink || col.link - colors.link = col.link colors.icon = mixrgb(colors.bg, colors.text) colors.cBlue = col.cBlue @@ -153,7 +159,7 @@ const generatePreset = (input) => { colorRules: Object.entries(htmlColors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'), radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';'), theme: { - colors, + colors: htmlColors, radii } } @@ -165,7 +171,7 @@ const setPreset = (val, commit) => { .then((themes) => { const theme = themes[val] ? themes[val] : themes['pleroma-dark'] const bgRgb = hex2rgb(theme[1]) - const btnRgb = hex2rgb(theme[2]) + const fgRgb = hex2rgb(theme[2]) const textRgb = hex2rgb(theme[3]) const linkRgb = hex2rgb(theme[4]) @@ -176,7 +182,7 @@ const setPreset = (val, commit) => { const colors = { bg: bgRgb, - btn: btnRgb, + fg: fgRgb, text: textRgb, link: linkRgb, cRed: cRedRgb, -- cgit v1.2.3-70-g09d2 From 1723f427f59bb6bf62bb35de93c7226aef2e8727 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 13 Nov 2018 16:30:01 +0300 Subject: updates --- src/App.scss | 4 +- src/_variables.scss | 2 +- src/components/contrast_ratio/contrast_ratio.vue | 50 ++++++++--------------- src/components/notifications/notifications.scss | 8 ++-- src/components/opacity_input/opacity_input.vue | 10 ----- src/components/style_switcher/style_switcher.js | 24 ++++++++++- src/components/style_switcher/style_switcher.vue | 26 +++++++----- src/services/color_convert/color_convert.js | 16 ++++---- src/services/style_setter/style_setter.js | 6 ++- static/font/config.json | 26 ++++++++---- static/font/css/fontello-codes.css | 6 ++- static/font/css/fontello-embedded.css | 18 ++++---- static/font/css/fontello-ie7-codes.css | 6 ++- static/font/css/fontello-ie7.css | 6 ++- static/font/css/fontello.css | 20 +++++---- static/font/demo.html | 22 ++++++---- static/font/font/fontello.eot | Bin 15552 -> 16124 bytes static/font/font/fontello.svg | 8 +++- static/font/font/fontello.ttf | Bin 15384 -> 15956 bytes static/font/font/fontello.woff | Bin 9432 -> 9848 bytes static/font/font/fontello.woff2 | Bin 8020 -> 8372 bytes 21 files changed, 145 insertions(+), 113 deletions(-) (limited to 'src/App.scss') diff --git a/src/App.scss b/src/App.scss index c91b6a61..0a2ff5cc 100644 --- a/src/App.scss +++ b/src/App.scss @@ -479,8 +479,8 @@ nav { line-height: 28px; &.error { - background-color: $fallback--cAlertRed; - background-color: var(--cAlertRed, $fallback--cAlertRed); + background-color: $fallback--alertError; + background-color: var(--alertError, $fallback--alertError); } } diff --git a/src/_variables.scss b/src/_variables.scss index 0f73e929..d0d91efe 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -16,7 +16,7 @@ $fallback--cBlue: #0095ff; $fallback--cGreen: #0fa00f; $fallback--cOrange: orange; -$fallback--cAlertRed: rgba(211,16,20,.5); +$fallback--alertError: rgba(211,16,20,.5); $fallback--panelRadius: 10px; $fallback--checkBoxRadius: 2px; diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue index 6c4a59b6..a428e75f 100644 --- a/src/components/contrast_ratio/contrast_ratio.vue +++ b/src/components/contrast_ratio/contrast_ratio.vue @@ -1,41 +1,28 @@ - - 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 @@
-
+
-
Preview
+
+ {{$t('settings.style.preview.header')}} + + 99 + + + {{$t('settings.style.preview.error')}} + + + + + {{$t('settings.style.preview.header_faint')}} + +
( ͡° ͜ʖ ͡°)

Content

+
- A bunch of more content and - a nice lil' link + + + + {{$t('settings.style.preview.link')}} + + + +
- +
+ + + + {{$t('settings.style.preview.error')}} + + +
+
+ + + + + + + +
+ + + + {{$t('settings.style.preview.faint_link')}} + +
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 39f1b5bc..b69a09fd 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -58,10 +58,7 @@ .timeline { .loadmore-text { - opacity: 0.8; - background-color: transparent; - color: $fallback--faint; - color: var(--panelFaint, $fallback--faint); + opacity: 1; } } diff --git a/src/i18n/en.json b/src/i18n/en.json index c70c488c..0530b66d 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -170,6 +170,7 @@ "keep_shadows": "Keep shadows", "keep_opacity": "Keep opacity", "keep_roundness": "Keep roundness", + "keep_fonts": "Keep fonts", "save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme.", "reset": "Reset", "clear_all": "Clear all", @@ -250,6 +251,18 @@ "size": "Size (in px)", "weight": "Weight (boldness)", "custom": "Custom" + }, + "preview": { + "header": "Preview of header", + "error": "Example error", + "button": "Button", + "text": "A bunch of more content and {0}", + "input": "Just landed in L.A.", + "faint_link": "helpful manual", + "fine_print": "Read our {0} to learn nothing useful!", + "header_faint": "This is fine", + "checkbox": "I have skimmed over terms and conditions", + "link": "a nice lil' link" } } }, -- cgit v1.2.3-70-g09d2 From bb39b99d65bf897e073bc809ccc924f1b0ecc58b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 26 Nov 2018 20:12:59 +0300 Subject: fix panel link color, fix broken user profiles --- src/App.scss | 10 ++++++++++ src/components/style_switcher/style_switcher.js | 4 ++++ src/components/style_switcher/style_switcher.vue | 4 +++- src/components/user_card_content/user_card_content.vue | 5 ++--- src/services/style_setter/style_setter.js | 1 + 5 files changed, 20 insertions(+), 4 deletions(-) (limited to 'src/App.scss') diff --git a/src/App.scss b/src/App.scss index 8c9df0ba..15dec7ec 100644 --- a/src/App.scss +++ b/src/App.scss @@ -407,6 +407,11 @@ main-router { min-width: 1px; align-self: stretch; } + + a { + color: $fallback--link; + color: var(--panelLink, $fallback--link) + } } .panel-heading.stub { @@ -417,6 +422,11 @@ main-router { .panel-footer { border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); + + a { + color: $fallback--link; + color: var(--panelLink, $fallback--link) + } } .panel-body > p { diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index d833341f..0cceee4c 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -62,6 +62,7 @@ export default { panelColorLocal: undefined, panelTextColorLocal: undefined, + panelLinkColorLocal: undefined, panelFaintColorLocal: undefined, panelOpacityLocal: undefined, @@ -155,6 +156,7 @@ export default { panel: this.panelColorLocal, panelText: this.panelTextColorLocal, + panelLink: this.panelLinkColorLocal, panelFaint: this.panelFaintColorLocal, input: this.inputColorLocal, @@ -230,6 +232,7 @@ export default { const fgs = { text: hex2rgb(colors.text), panelText: hex2rgb(colors.panelText), + panelLink: hex2rgb(colors.panelLink), btnText: hex2rgb(colors.btnText), topBarText: hex2rgb(colors.topBarText), inputText: hex2rgb(colors.inputText), @@ -268,6 +271,7 @@ export default { tintText: getContrastRatio(alphaBlend(bgs.bg, 0.5, fgs.panelText), fgs.text), panelText: getContrastRatio(alphaBlend(bgs.panel, opacity.panel, fgs.panelText), fgs.panelText), + panelLink: getContrastRatio(alphaBlend(bgs.panel, opacity.panel, fgs.panelLink), fgs.panelLink), btnText: getContrastRatio(alphaBlend(bgs.btn, opacity.btn, fgs.btnText), fgs.btnText), diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 2a7756ed..157a8534 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -183,8 +183,10 @@

{{ $t('settings.style.advanced_colors.panel_header') }}

- + + +

{{ $t('settings.style.advanced_colors.top_bar') }}

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index bb1e314f..5529948e 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -105,10 +105,9 @@ {{user.followers_count}}
+

+

{{ user.description }}

-

-

{{ user.description }}

- diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index f2c9c13e..7c375206 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -172,6 +172,7 @@ const generateColors = (input) => { colors.panel = col.panel || Object.assign({}, col.fg) colors.panelText = col.panelText || getTextColor(colors.panel, colors.fgText) + colors.panelLink = col.panelLink || getTextColor(colors.panel, colors.fgLink) colors.panelFaint = col.panelFaint || getTextColor(colors.panel, colors.faint) colors.topBar = col.topBar || Object.assign({}, col.fg) -- cgit v1.2.3-70-g09d2 From c3f8b713a77adbac73678f3f1c7a9ab937ca5904 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 11 Dec 2018 16:37:03 +0300 Subject: fixed wrong height for selects --- src/App.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/App.scss') diff --git a/src/App.scss b/src/App.scss index 15dec7ec..5355d899 100644 --- a/src/App.scss +++ b/src/App.scss @@ -119,7 +119,7 @@ input, textarea, .select { box-sizing: border-box; display: inline-block; position: relative; - height: 29px; + height: 28px; line-height: 16px; hyphens: none; @@ -136,7 +136,7 @@ input, textarea, .select { height: 100%; color: $fallback--text; color: var(--text, $fallback--text); - line-height: 29px; + line-height: 28px; z-index: 0; pointer-events: none; } @@ -156,7 +156,7 @@ input, textarea, .select { font-size: 14px; width: 100%; z-index: 1; - height: 29px; + height: 28px; line-height: 16px; } -- cgit v1.2.3-70-g09d2