From 1687d7de2e35afb7d8f31671e8d73b797d717bb1 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Sun, 15 Jan 2017 19:27:23 +0100 Subject: [PATCH 1/9] Add some half-transparent border under main content. --- src/App.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/App.scss b/src/App.scss index 377c6297..85757bce 100644 --- a/src/App.scss +++ b/src/App.scss @@ -111,6 +111,9 @@ main-router { #content { margin: auto; max-width: 920px; + border-radius: 1em; + padding-bottom: 1em; + background-color: rgba(0,0,0,0.1); } .media-left { From b65a29aa0752a6369d8b84cc1a83a3e6ddf98e79 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 16 Jan 2017 17:44:26 +0100 Subject: [PATCH 2/9] Dynamic style setting. --- index.html | 1 - src/main.js | 4 ++ src/services/style_setter/style_setter.js | 45 +++++++++++++++++++++++ static/css/solarized-light.css | 5 --- 4 files changed, 49 insertions(+), 6 deletions(-) create mode 100644 src/services/style_setter/style_setter.js diff --git a/index.html b/index.html index 30156774..ec831c41 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,6 @@ Pleroma -
diff --git a/src/main.js b/src/main.js index 048706d5..ce81ed4d 100644 --- a/src/main.js +++ b/src/main.js @@ -15,6 +15,8 @@ import apiModule from './modules/api.js' import VueTimeago from 'vue-timeago' +import StyleSetter from './services/style_setter/style_setter.js' + Vue.use(Vuex) Vue.use(VueRouter) Vue.use(VueTimeago, { @@ -58,3 +60,5 @@ new Vue({ template: '', components: { App } }) + +StyleSetter.setStyle('/static/css/solarized-light.css') diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js new file mode 100644 index 00000000..b8c978b4 --- /dev/null +++ b/src/services/style_setter/style_setter.js @@ -0,0 +1,45 @@ +const setStyle = (href) => { + /*** + What's going on here? + I want to make it easy for admins to style this application. To have + a good set of default themes, I chose the system from base16 + (https://chriskempson.github.io/base16/) to style all elements. They + all have the base00..0F classes. So the only thing an admin needs to + do to style Pleroma is to change these colors in that one css file. + Some default things (body text color, link color) need to be set dy- + namically, so this is done here by waiting for the stylesheet to be + loaded and then creating an element with the respective classes. + + It is a bit weird, but should make life for admins somewhat easier. + ***/ + const head = document.head + const body = document.body + body.style.display = 'none' + const cssEl = document.createElement('link') + cssEl.setAttribute('rel', 'stylesheet') + cssEl.setAttribute('href', href) + head.appendChild(cssEl) + + const setDynamic = () => { + const baseEl = document.createElement('div') + baseEl.setAttribute('class', 'base05') + const base05Color = window.getComputedStyle(baseEl).getPropertyValue('color') + baseEl.setAttribute('class', 'base08') + const base08Color = window.getComputedStyle(baseEl).getPropertyValue('color') + const styleEl = document.createElement('style') + head.appendChild(styleEl) + const styleSheet = styleEl.sheet + + styleSheet.insertRule(`a { color: ${base08Color}`, 'index-max') + styleSheet.insertRule(`body { color: ${base05Color}`, 'index-max') + styleSheet.insertRule(`.base05-border { color: ${base05Color}`, 'index-max') + body.style.display = 'initial' + } + cssEl.addEventListener('load', setDynamic) +} + +const StyleSetter = { + setStyle +} + +export default StyleSetter diff --git a/static/css/solarized-light.css b/static/css/solarized-light.css index 14f4d572..7164cb04 100644 --- a/static/css/solarized-light.css +++ b/static/css/solarized-light.css @@ -31,8 +31,3 @@ .base0D { color: #268bd2; } .base0E { color: #6c71c4; } .base0F { color: #d33682; } - -.base05-border { color: #586e75; } - -a { color: #dc322f; } /* base08 */ -body { color: #586e75; } /* base05 */ From afd90b84d0257f158bba5e9fbcc233f807bc15f6 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 16 Jan 2017 17:46:22 +0100 Subject: [PATCH 3/9] User card background css fix. --- src/components/user_card_content/user_card_content.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index fb121e3c..9a21f404 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -1,6 +1,6 @@