some more themes, fixes

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"
+    }
+  }
+}