aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/components/style_switcher/style_switcher.js3
-rw-r--r--src/components/style_switcher/style_switcher.scss6
-rw-r--r--src/components/style_switcher/style_switcher.vue2
-rw-r--r--static/styles.json4
-rw-r--r--static/themes/breezy-dark.json139
-rw-r--r--static/themes/breezy-light.json139
6 files changed, 289 insertions, 4 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index ccdb4c4f..d09185fa 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -497,10 +497,9 @@ export default {
this.textColorLocal = rgb2hex(colors.fg)
}
+ this.clearV1()
const keys = new Set(version !== 1 ? Object.keys(colors) : [])
if (version === 1 || version === 'l1') {
- // V1 ignores the rest
- this.clearV1()
keys
.add('bg')
.add('link')
diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss
index 4db1a295..c8c5d9dd 100644
--- a/src/components/style_switcher/style_switcher.scss
+++ b/src/components/style_switcher/style_switcher.scss
@@ -135,6 +135,12 @@
display: flex;
justify-content: center;
align-items: baseline;
+ flex-wrap: wrap;
+
+ .presets,
+ .import-export {
+ margin-bottom: .5em;
+ }
.import-export {
display: flex;
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 814a6f17..9de60f7b 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -2,7 +2,7 @@
<div class="style-switcher">
<div class="presets-container">
<div class="save-load">
- <div>
+ <div class="presets">
{{$t('settings.presets')}}
<label for="preset-switcher" class='select'>
<select id="preset-switcher" v-model="selected" class="preset-switcher">
diff --git a/static/styles.json b/static/styles.json
index 9204c717..b6bd6530 100644
--- a/static/styles.json
+++ b/static/styles.json
@@ -9,5 +9,7 @@
"redmond-xx": "./static/themes/redmond-xx.json",
"redmond-xx-se": "./static/themes/redmond-xx-se.json",
- "redmond-xxi": "./static/themes/redmond-xxi.json"
+ "redmond-xxi": "./static/themes/redmond-xxi.json",
+ "breezy-dark": "./static/themes/breezy-dark.json",
+ "breezy-light": "./static/themes/breezy-light.json"
}
diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json
new file mode 100644
index 00000000..6119bf88
--- /dev/null
+++ b/static/themes/breezy-dark.json
@@ -0,0 +1,139 @@
+{
+ "_pleroma_theme_version": 2,
+ "name": "Breezy Dark (beta)",
+ "theme": {
+ "shadows": {
+ "panel": [
+ {
+ "x": "1",
+ "y": "2",
+ "blur": "6",
+ "spread": 0,
+ "color": "#000000",
+ "alpha": 0.6
+ }
+ ],
+ "button": [
+ {
+ "x": 0,
+ "y": "0",
+ "blur": "0",
+ "spread": "1",
+ "color": "#ffffff",
+ "alpha": "0.15",
+ "inset": true
+ },
+ {
+ "x": "1",
+ "y": "1",
+ "blur": "1",
+ "spread": 0,
+ "color": "#000000",
+ "alpha": "0.3",
+ "inset": false
+ }
+ ],
+ "panelHeader": [
+ {
+ "x": 0,
+ "y": "40",
+ "blur": "40",
+ "spread": "-40",
+ "inset": true,
+ "color": "#ffffff",
+ "alpha": "0.1"
+ }
+ ],
+ "buttonHover": [
+ {
+ "x": 0,
+ "y": "0",
+ "blur": 0,
+ "spread": "1",
+ "color": "--link",
+ "alpha": "0.3",
+ "inset": true
+ },
+ {
+ "x": "1",
+ "y": "1",
+ "blur": "1",
+ "spread": 0,
+ "color": "#000000",
+ "alpha": "0.3",
+ "inset": false
+ }
+ ],
+ "buttonPressed": [
+ {
+ "x": 0,
+ "y": 0,
+ "blur": "0",
+ "spread": "50",
+ "color": "--faint",
+ "alpha": 1,
+ "inset": true
+ },
+ {
+ "x": 0,
+ "y": "0",
+ "blur": 0,
+ "spread": "1",
+ "color": "#ffffff",
+ "alpha": 0.2,
+ "inset": true
+ },
+ {
+ "x": "1",
+ "y": "1",
+ "blur": 0,
+ "spread": 0,
+ "color": "#000000",
+ "alpha": "0.3",
+ "inset": false
+ }
+ ],
+ "input": [
+ {
+ "x": 0,
+ "y": "0",
+ "blur": 0,
+ "spread": "1",
+ "color": "#FFFFFF",
+ "alpha": "0.2",
+ "inset": true
+ }
+ ]
+ },
+ "fonts": {},
+ "opacity": {
+ "input": "1",
+ "panel": "0"
+ },
+ "colors": {
+ "bg": "#31363b",
+ "text": "#eff0f1",
+ "link": "#3daee9",
+ "fg": "#31363b",
+ "panel": "#31363b",
+ "input": "#232629",
+ "topBarLink": "#eff0f1",
+ "btn": "#31363b",
+ "border": "#4c545b",
+ "cRed": "#da4453",
+ "cBlue": "#3daee9",
+ "cGreen": "#27ae60",
+ "cOrange": "#f67400"
+ },
+ "radii": {
+ "btn": "2",
+ "input": "2",
+ "checkbox": "1",
+ "panel": "2",
+ "avatar": "2",
+ "avatarAlt": "2",
+ "tooltip": "2",
+ "attachment": "2"
+ }
+ }
+}
diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json
new file mode 100644
index 00000000..becf704f
--- /dev/null
+++ b/static/themes/breezy-light.json
@@ -0,0 +1,139 @@
+{
+ "_pleroma_theme_version": 2,
+ "name": "Breezy Light (beta)",
+ "theme": {
+ "shadows": {
+ "panel": [
+ {
+ "x": "1",
+ "y": "2",
+ "blur": "6",
+ "spread": 0,
+ "color": "#000000",
+ "alpha": 0.6
+ }
+ ],
+ "button": [
+ {
+ "x": 0,
+ "y": "0",
+ "blur": "0",
+ "spread": "1",
+ "color": "#000000",
+ "alpha": "0.3",
+ "inset": true
+ },
+ {
+ "x": "1",
+ "y": "1",
+ "blur": "1",
+ "spread": 0,
+ "color": "#000000",
+ "alpha": "0.3",
+ "inset": false
+ }
+ ],
+ "panelHeader": [
+ {
+ "x": 0,
+ "y": "40",
+ "blur": "40",
+ "spread": "-40",
+ "inset": true,
+ "color": "#ffffff",
+ "alpha": "0.1"
+ }
+ ],
+ "buttonHover": [
+ {
+ "x": 0,
+ "y": "0",
+ "blur": 0,
+ "spread": "1",
+ "color": "--link",
+ "alpha": "0.3",
+ "inset": true
+ },
+ {
+ "x": "1",
+ "y": "1",
+ "blur": "1",
+ "spread": 0,
+ "color": "#000000",
+ "alpha": "0.3",
+ "inset": false
+ }
+ ],
+ "buttonPressed": [
+ {
+ "x": 0,
+ "y": 0,
+ "blur": "0",
+ "spread": "50",
+ "color": "--faint",
+ "alpha": 1,
+ "inset": true
+ },
+ {
+ "x": 0,
+ "y": "0",
+ "blur": 0,
+ "spread": "1",
+ "color": "#ffffff",
+ "alpha": 0.2,
+ "inset": true
+ },
+ {
+ "x": "1",
+ "y": "1",
+ "blur": 0,
+ "spread": 0,
+ "color": "#000000",
+ "alpha": "0.3",
+ "inset": false
+ }
+ ],
+ "input": [
+ {
+ "x": 0,
+ "y": "0",
+ "blur": 0,
+ "spread": "1",
+ "color": "#000000",
+ "alpha": "0.2",
+ "inset": true
+ }
+ ]
+ },
+ "fonts": {},
+ "opacity": {
+ "input": "1"
+ },
+ "colors": {
+ "bg": "#eff0f1",
+ "text": "#232627",
+ "link": "#2980b9",
+ "fg": "#bcc2c7",
+ "panel": "#475057",
+ "panelText": "#fcfcfc",
+ "input": "#fcfcfc",
+ "topBar": "#475057",
+ "topBarLink": "#eff0f1",
+ "btn": "#eff0f1",
+ "cRed": "#da4453",
+ "cBlue": "#2980b9",
+ "cGreen": "#27ae60",
+ "cOrange": "#f67400"
+ },
+ "radii": {
+ "btn": "2",
+ "input": "2",
+ "checkbox": "1",
+ "panel": "2",
+ "avatar": "2",
+ "avatarAlt": "2",
+ "tooltip": "2",
+ "attachment": "2"
+ }
+ }
+}