From 96804d42f0f6aa6af85295933af6fd267b19e473 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 7 Oct 2018 19:59:22 +0300
Subject: Some themeing is working!!

---
 src/components/user_card_content/user_card_content.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

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 {
-- 
cgit v1.2.3-70-g09d2


From 621ab806e63e42e0495fa174fd64f8eaeeb46b91 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Nov 2018 21:23:07 +0300
Subject: more default shadows, replaced original shadows with generated ones.
 maybe gotta update fallbacks...

---
 src/App.scss                                       | 17 +++--
 src/components/status/status.vue                   |  1 +
 .../user_card_content/user_card_content.vue        |  1 +
 src/i18n/en.json                                   | 13 ++--
 src/services/style_setter/style_setter.js          | 76 ++++++++++++++++++++++
 5 files changed, 98 insertions(+), 10 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/App.scss b/src/App.scss
index 30020722..a41140ef 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -58,9 +58,10 @@ button {
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
   cursor: pointer;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  /* border-top: 1px solid rgba(255, 255, 255, 0.2); */
+  /* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
   box-shadow: 0px 0px 2px black;
+  box-shadow: var(--buttonShadow);
   font-size: 14px;
   font-family: sans-serif;
 
@@ -75,11 +76,12 @@ button {
 
   &:hover {
     box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
+    box-shadow: var(--buttonHoverShadow);
   }
 
   &:active {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-    border-top: 1px solid rgba(0, 0, 0, 0.2);
+    /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
+    /* border-top: 1px solid rgba(0, 0, 0, 0.2); */
   }
 
   &:disabled {
@@ -104,9 +106,10 @@ input, textarea, .select {
   border: none;
   border-radius: $fallback--inputRadius;
   border-radius: var(--inputRadius, $fallback--inputRadius);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-  border-top: 1px solid rgba(0, 0, 0, 0.2);
+  /* 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;
+  box-shadow: var(--inputShadow);
   background-color: $fallback--fg;
   background-color: var(--input, $fallback--fg);
   color: $fallback--lightText;
@@ -184,6 +187,7 @@ 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;
+      box-shadow: var(--inputShadow);
       margin-right: .5em;
       background-color: $fallback--fg;
       background-color: var(--input, $fallback--fg);
@@ -365,6 +369,7 @@ main-router {
   background-color: $fallback--fg;
   background-color: var(--panel, $fallback--fg);
   align-items: baseline;
+  box-shadow: var(--panelHeaderShadow);
 
   .title {
     flex: 1 0 auto;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 57a007d9..c4a268d0 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -146,6 +146,7 @@
   border-radius: $fallback--tooltipRadius;
   border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--popupShadow);
   margin-top: 0.25em;
   margin-left: 0.5em;
   z-index: 50;
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index f1b54fad..a2bb99a1 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -155,6 +155,7 @@
       width: 56px;
       height: 56px;
       box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
+      box-shadow: var(--avatarShadow);
       object-fit: cover;
 
       &.animated::before {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 18b47ba7..3fcc6da2 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -212,11 +212,16 @@
         "inset": "Inset",
         "components": {
           "panel": "Panel",
+          "panelHeader": "Panel header",
+          "topBar": "Top bar",
+          "avatar": "User avatar (in post display)",
+          "avatarStatus": "User avatar (in profile view)",
+          "popup": "Popups and tooltips",
           "button": "Button",
-          "button_hover": "Button (hover)",
-          "button_pressed": "Button (pressed)",
-          "button_pressed_hover": "Button (pressed+hover)",
-          "input_box": "Input field"
+          "buttonHover": "Button (hover)",
+          "buttonPressed": "Button (pressed)",
+          "buttonPressedHover": "Button (pressed+hover)",
+          "input": "Input field"
         }
       }
     }
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 57bd2841..8142da8b 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -258,6 +258,40 @@ const generateRadii = (input) => {
 }
 
 const generateShadows = (input) => {
+  const buttonInsetFakeBorders = [{
+    x: 0,
+    y: 101,
+    blur: 0,
+    spread: -100,
+    color: '#FFFFFF',
+    alpha: 0.2,
+    inset: true
+  }, {
+    x: 0,
+    y: -101,
+    blur: 0,
+    spread: -100,
+    color: '#000000',
+    alpha: 0.2,
+    inset: true
+  }]
+  const inputInsetFakeBorders = [{
+    x: 0,
+    y: 101,
+    blur: 0,
+    spread: -100,
+    color: '#000000',
+    alpha: 0.2,
+    inset: true
+  }, {
+    x: 0,
+    y: -101,
+    blur: 0,
+    spread: -100,
+    color: '#FFFFFF',
+    alpha: 0.3,
+    inset: true
+  }]
   const shadows = {
     panel: [{
       x: 1,
@@ -267,6 +301,48 @@ const generateShadows = (input) => {
       color: '#000000',
       alpha: 0.6
     }],
+    popup: [{
+      x: 2,
+      y: 2,
+      blur: 3,
+      spread: 0,
+      color: '#000000',
+      alpha: 0.5
+    }],
+    avatar: [{
+      x: 0,
+      y: 1,
+      blur: 8,
+      spread: 0,
+      color: '#000000',
+      alpha: 0.7
+    }],
+    panelHeader: [],
+    button: [{
+      x: 0,
+      y: 0,
+      blur: 2,
+      spread: 0,
+      color: '#000000',
+      alpha: 1
+    }, ...buttonInsetFakeBorders],
+    buttonHover: [{
+      x: 0,
+      y: 0,
+      blur: 4,
+      spread: 0,
+      color: '--faint',
+      alpha: 1
+    }, ...buttonInsetFakeBorders],
+    input: [{
+      x: 0,
+      y: 0,
+      blur: 2,
+      inset: true,
+      spread: 0,
+      color: '#000000',
+      alpha: 1
+    }, ...inputInsetFakeBorders],
     ...(input.shadows || {})
   }
 
-- 
cgit v1.2.3-70-g09d2


From d2f3b6d2442a04e6bcb244d0644c8c0dd6caa8fe Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 23 Nov 2018 01:45:08 +0300
Subject: more styles, temporarily in one file, fix for panel header box-shadow
 affecting the user-card one

---
 .../user_card_content/user_card_content.vue        |   1 +
 static/styles.json                                 | 572 ++++++++++++++++++++-
 2 files changed, 571 insertions(+), 2 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index a2bb99a1..14eb4023 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -124,6 +124,7 @@
   .panel-heading {
     padding: 0.6em 0em;
     text-align: center;
+    box-shadow: none;
   }
 }
 
diff --git a/static/styles.json b/static/styles.json
index 4585dff0..d9e1ea8c 100644
--- a/static/styles.json
+++ b/static/styles.json
@@ -244,8 +244,8 @@
             "color": "--input",
             "alpha": "1",
             "inset": true
-        }
-      ]
+          }
+        ]
       },
       "opacity": {
         "input": "1"
@@ -278,5 +278,573 @@
         "attachment": "0"
       }
     }
+  },
+  "redmond-xx-se": {
+    "_pleroma_theme_version": 2,
+    "name": "Redmond XX SE",
+    "theme": {
+      "shadows": {
+        "panel": [
+          {
+            "x": "-1",
+            "y": "-1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#000000",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "1",
+            "y": "1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#dfdfdf",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "-2",
+            "y": "-2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#848484",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "2",
+            "y": "2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#FFFFFF",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "0",
+            "y": "0",
+            "blur": "0",
+            "spread": "3",
+            "color": "--bg",
+            "alpha": "1",
+            "inset": true
+          }
+        ],
+        "button": [
+          {
+            "x": "-1",
+            "y": "-1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#000000",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "1",
+            "y": "1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#FFFFFF",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "-2",
+            "y": "-2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#848484",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "2",
+            "y": "2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#dfdfdf",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "0",
+            "y": "0",
+            "blur": "0",
+            "spread": "3",
+            "color": "--bg",
+            "alpha": "1",
+            "inset": true
+          }
+        ],
+        "buttonHover": [
+          {
+            "x": "-1",
+            "y": "-1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#000000",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "1",
+            "y": "1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#FFFFFF",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "-2",
+            "y": "-2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#848484",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "2",
+            "y": "2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#dfdfdf",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "0",
+            "y": "0",
+            "blur": "0",
+            "spread": "3",
+            "color": "--bg",
+            "alpha": "1",
+            "inset": true
+          }
+        ],
+        "buttonPressed": [
+          {
+            "x": "1",
+            "y": "1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#000000",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "-1",
+            "y": "-1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#FFFFFF",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "2",
+            "y": "2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#848484",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "-2",
+            "y": "-2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#dfdfdf",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "0",
+            "y": "0",
+            "blur": "0",
+            "spread": "3",
+            "color": "--bg",
+            "alpha": "1",
+            "inset": true
+          }
+        ],
+        "input": [
+          {
+            "x": "-1",
+            "y": "-1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#FFFFFF",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "1",
+            "y": "1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#848484",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "-2",
+            "y": "-2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#dfdfdf",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "2",
+            "y": "2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#000000",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "0",
+            "y": "0",
+            "blur": "0",
+            "spread": "3",
+            "color": "--input",
+            "alpha": "1",
+            "inset": true
+          }
+        ],
+        "panelHeader": [
+          {
+            "x": "-2200",
+            "y": 0,
+            "blur": "200",
+            "spread": "-2000",
+            "inset": true,
+            "color": "#1084d0",
+            "alpha": 1
+          }
+        ]
+      },
+      "opacity": {
+        "input": "1"
+      },
+      "colors": {
+        "bg": "#c0c0c0",
+        "text": "#000000",
+        "link": "#0000ff",
+        "fg": "#c0c0c0",
+        "panel": "#000080",
+        "input": "#ffffff",
+        "topBar": "#000080",
+        "topBarLink": "#ffffff",
+        "btn": "#c0c0c0",
+        "faint": "#3f3f3f",
+        "faintLink": "#404080",
+        "border": "#808080",
+        "cRed": "#FF0000",
+        "cBlue": "#008080",
+        "cGreen": "#00FF00",
+        "cOrange": "#808000"
+      },
+      "radii": {
+        "btn": "0",
+        "input": "0",
+        "panel": "0",
+        "avatar": "0",
+        "avatarAlt": "0",
+        "tooltip": "0",
+        "attachment": "0"
+      }
+    }
+  },
+  "redmond-xxi": {
+    "_pleroma_theme_version": 2,
+    "name": "Redmond XXI",
+    "theme": {
+      "shadows": {
+        "panel": [
+          {
+            "x": "-1",
+            "y": "-1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#000000",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "1",
+            "y": "1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#dfdfdf",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "-2",
+            "y": "-2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#848484",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "2",
+            "y": "2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#FFFFFF",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "0",
+            "y": "0",
+            "blur": "0",
+            "spread": "3",
+            "color": "--bg",
+            "alpha": "1",
+            "inset": true
+          }
+        ],
+        "button": [
+          {
+            "x": "-1",
+            "y": "-1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#000000",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "1",
+            "y": "1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#FFFFFF",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "-2",
+            "y": "-2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#848484",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "2",
+            "y": "2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#dfdfdf",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "0",
+            "y": "0",
+            "blur": "0",
+            "spread": "3",
+            "color": "--bg",
+            "alpha": "1",
+            "inset": true
+          }
+        ],
+        "buttonHover": [
+          {
+            "x": "-1",
+            "y": "-1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#000000",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "1",
+            "y": "1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#FFFFFF",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "-2",
+            "y": "-2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#848484",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "2",
+            "y": "2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#dfdfdf",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "0",
+            "y": "0",
+            "blur": "0",
+            "spread": "3",
+            "color": "--bg",
+            "alpha": "1",
+            "inset": true
+          }
+        ],
+        "buttonPressed": [
+          {
+            "x": "1",
+            "y": "1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#000000",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "-1",
+            "y": "-1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#FFFFFF",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "2",
+            "y": "2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#848484",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "-2",
+            "y": "-2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#dfdfdf",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "0",
+            "y": "0",
+            "blur": "0",
+            "spread": "3",
+            "color": "--bg",
+            "alpha": "1",
+            "inset": true
+          }
+        ],
+        "input": [
+          {
+            "x": "-1",
+            "y": "-1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#FFFFFF",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "1",
+            "y": "1",
+            "blur": "0",
+            "spread": 0,
+            "color": "#848484",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "-2",
+            "y": "-2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#dfdfdf",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "2",
+            "y": "2",
+            "blur": "0",
+            "spread": 0,
+            "color": "#000000",
+            "alpha": "1",
+            "inset": true
+          },
+          {
+            "x": "0",
+            "y": "0",
+            "blur": "0",
+            "spread": "3",
+            "color": "--input",
+            "alpha": "1",
+            "inset": true
+          }
+        ],
+        "panelHeader": [
+          {
+            "x": "-2200",
+            "y": 0,
+            "blur": "200",
+            "spread": "-2000",
+            "inset": true,
+            "color": "#a5cef7",
+            "alpha": 1
+          }
+        ]
+      },
+      "opacity": {
+        "input": "1"
+      },
+      "colors": {
+        "bg": "#d6d6ce",
+        "text": "#000000",
+        "link": "#0000ff",
+        "fg": "#d6d6ce",
+        "panel": "#042967",
+        "input": "#ffffff",
+        "topBar": "#042967",
+        "topBarLink": "#ffffff",
+        "btn": "#d6d6ce",
+        "faint": "#3f3f3f",
+        "faintLink": "#404080",
+        "border": "#808080",
+        "cRed": "#FF0000",
+        "cBlue": "#008080",
+        "cGreen": "#00FF00",
+        "cOrange": "#808000"
+      },
+      "radii": {
+        "btn": "0",
+        "input": "0",
+        "panel": "0",
+        "avatar": "0",
+        "avatarAlt": "0",
+        "tooltip": "0",
+        "attachment": "0"
+      }
+    }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 698ebf70037c3231b96f417ad1afeaad1da47d55 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 25 Nov 2018 17:24:58 +0300
Subject: fixed indentation

---
 .../user_card_content/user_card_content.vue        | 122 ++++++++++-----------
 1 file changed, 61 insertions(+), 61 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 14eb4023..22f77ffc 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -41,74 +41,74 @@
         </div>
       </div>
       <div v-if="isOtherUser" class="user-interactions">
-          <div class="follow" v-if="loggedIn">
-            <span v-if="user.following">
-              <!--Following them!-->
-              <button @click="unfollowUser" class="pressed">
-                {{ $t('user_card.following') }}
-              </button>
-            </span>
-            <span v-if="!user.following">
-              <button @click="followUser">
-                {{ $t('user_card.follow') }}
-              </button>
-            </span>
-          </div>
-          <div class='mute' v-if='isOtherUser'>
-            <span v-if='user.muted'>
-              <button @click="toggleMute" class="pressed">
-                {{ $t('user_card.muted') }}
-              </button>
-            </span>
-            <span v-if='!user.muted'>
-              <button @click="toggleMute">
-                {{ $t('user_card.mute') }}
-              </button>
-            </span>
-          </div>
-          <div class="remote-follow" v-if='!loggedIn && user.is_local'>
-            <form method="POST" :action='subscribeUrl'>
-              <input type="hidden" name="nickname" :value="user.screen_name">
-              <input type="hidden" name="profile" value="">
-              <button click="submit" class="remote-button">
-                {{ $t('user_card.remote_follow') }}
-              </button>
-            </form>
-          </div>
-          <div class='block' v-if='isOtherUser && loggedIn'>
-            <span v-if='user.statusnet_blocking'>
-              <button @click="unblockUser" class="pressed">
-                {{ $t('user_card.blocked') }}
-              </button>
-            </span>
-            <span v-if='!user.statusnet_blocking'>
-              <button @click="blockUser">
-                {{ $t('user_card.block') }}
-              </button>
-            </span>
-          </div>
+        <div class="follow" v-if="loggedIn">
+          <span v-if="user.following">
+            <!--Following them!-->
+            <button @click="unfollowUser" class="pressed">
+              {{ $t('user_card.following') }}
+            </button>
+          </span>
+          <span v-if="!user.following">
+            <button @click="followUser">
+              {{ $t('user_card.follow') }}
+            </button>
+          </span>
         </div>
-      </div>
-    </div>
-    <div class="panel-body profile-panel-body">
-      <div class="user-counts" :class="{clickable: switcher}">
-        <div class="user-count" v-on:click.prevent="setProfileView('statuses')" :class="{selected: selected === 'statuses'}">
-          <h5>{{ $t('user_card.statuses') }}</h5>
-          <span>{{user.statuses_count}} <br></span>
+        <div class='mute' v-if='isOtherUser'>
+          <span v-if='user.muted'>
+            <button @click="toggleMute" class="pressed">
+              {{ $t('user_card.muted') }}
+            </button>
+          </span>
+          <span v-if='!user.muted'>
+            <button @click="toggleMute">
+              {{ $t('user_card.mute') }}
+            </button>
+          </span>
         </div>
-        <div class="user-count" v-on:click.prevent="setProfileView('friends')" :class="{selected: selected === 'friends'}">
-          <h5>{{ $t('user_card.followees') }}</h5>
-          <span>{{user.friends_count}}</span>
+        <div class="remote-follow" v-if='!loggedIn && user.is_local'>
+          <form method="POST" :action='subscribeUrl'>
+            <input type="hidden" name="nickname" :value="user.screen_name">
+            <input type="hidden" name="profile" value="">
+            <button click="submit" class="remote-button">
+              {{ $t('user_card.remote_follow') }}
+            </button>
+          </form>
         </div>
-        <div class="user-count" v-on:click.prevent="setProfileView('followers')" :class="{selected: selected === 'followers'}">
-          <h5>{{ $t('user_card.followers') }}</h5>
-          <span>{{user.followers_count}}</span>
+        <div class='block' v-if='isOtherUser && loggedIn'>
+          <span v-if='user.statusnet_blocking'>
+            <button @click="unblockUser" class="pressed">
+              {{ $t('user_card.blocked') }}
+            </button>
+          </span>
+          <span v-if='!user.statusnet_blocking'>
+            <button @click="blockUser">
+              {{ $t('user_card.block') }}
+            </button>
+          </span>
         </div>
       </div>
-      <p v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p>
-      <p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p>
     </div>
   </div>
+  <div class="panel-body profile-panel-body">
+    <div class="user-counts" :class="{clickable: switcher}">
+      <div class="user-count" v-on:click.prevent="setProfileView('statuses')" :class="{selected: selected === 'statuses'}">
+        <h5>{{ $t('user_card.statuses') }}</h5>
+        <span>{{user.statuses_count}} <br></span>
+      </div>
+      <div class="user-count" v-on:click.prevent="setProfileView('friends')" :class="{selected: selected === 'friends'}">
+        <h5>{{ $t('user_card.followees') }}</h5>
+        <span>{{user.friends_count}}</span>
+      </div>
+      <div class="user-count" v-on:click.prevent="setProfileView('followers')" :class="{selected: selected === 'followers'}">
+        <h5>{{ $t('user_card.followers') }}</h5>
+        <span>{{user.followers_count}}</span>
+      </div>
+    </div>
+    <p v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p>
+    <p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p>
+  </div>
+</div>
 </template>
 
 <script src="./user_card_content.js"></script>
-- 
cgit v1.2.3-70-g09d2


From 2f1070deb63af7f351fb3e33e44394160c689be4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 25 Nov 2018 17:42:41 +0300
Subject: collateral fixes

---
 src/components/status/status.vue                       |  1 +
 src/components/user_card_content/user_card_content.vue | 12 +++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index c4a268d0..710f2027 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -533,6 +533,7 @@ a.unmute {
   .status-el:last-child {
     border-bottom-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;;
     border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+    border-bottom: none;
   }
 }
 
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 22f77ffc..9830f283 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -120,6 +120,7 @@
   background-size: cover;
   border-radius: $fallback--panelRadius;
   border-radius: var(--panelRadius, $fallback--panelRadius);
+  overflow: hidden;
 
   .panel-heading {
     padding: 0.6em 0em;
@@ -147,7 +148,6 @@
     padding: 16px 10px 6px 10px;
     display: flex;
     max-height: 56px;
-    overflow: hidden;
 
     .avatar {
       border-radius: $fallback--avatarRadius;
@@ -187,6 +187,16 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     flex: 1 1 0;
+    // This is so that text doesn't get overlapped by avatar's shadow if it has
+    // big one
+    z-index: 1;
+
+    img {
+      width: 26px;
+      height: 26px;
+      vertical-align: middle;
+      object-fit: contain
+    }
   }
 
   .user-name{
-- 
cgit v1.2.3-70-g09d2


From bb39b99d65bf897e073bc809ccc924f1b0ecc58b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
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/components/user_card_content/user_card_content.vue')

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 @@
           <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
           <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
           <OpacityInput name="panelOpacity" v-model="panelOpacityLocal" :fallback="previewTheme.opacity.panel || 1"/>
-          <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.links')"/>
+          <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.text')"/>
           <ContrastRatio :contrast="previewContrast.panelText" large="1"/>
+          <ColorInput name="panelLinkColor" v-model="panelLinkColorLocal" :fallback="previewTheme.colors.panelLink" :label="$t('settings.links')"/>
+          <ContrastRatio :contrast="previewContrast.panelLink" large="1"/>
         </div>
         <div class="color-item">
           <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
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 @@
         <span v-if="!hideUserStatsLocal">{{user.followers_count}}</span>
       </div>
     </div>
+    <p v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p>
+    <p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p>
   </div>
-  <p v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p>
-  <p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p>
-</div>
 </div>
 </template>
 
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 406df4399b630268c1028664f3b818571d6f8e4f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 30 Nov 2018 16:39:07 +0300
Subject: avatars shadows, also allows drop-shadow use

---
 src/components/notification/notification.js        |  3 ++-
 src/components/notification/notification.vue       |  2 +-
 src/components/notifications/notifications.scss    |  6 +++++
 src/components/status/status.js                    |  3 ++-
 src/components/status/status.vue                   | 13 +++++++++-
 src/components/style_switcher/style_switcher.vue   | 12 ++++++++++
 .../user_card_content/user_card_content.js         |  3 ++-
 .../user_card_content/user_card_content.vue        |  7 +++++-
 src/i18n/en.json                                   |  7 ++++++
 src/modules/interface.js                           |  6 +++++
 src/services/style_setter/style_setter.js          | 28 ++++++++++++++++++++--
 11 files changed, 82 insertions(+), 8 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index c786f2cc..4dea63bb 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -6,7 +6,8 @@ import { highlightClass, highlightStyle } from '../../services/user_highlighter/
 const Notification = {
   data () {
     return {
-      userExpanded: false
+      userExpanded: false,
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
   props: [
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 72c1ca69..f98afbe0 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -2,7 +2,7 @@
   <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
   <div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]"v-else>
     <a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
-      <StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/>
+      <StillImage class='avatar-compact' :class="{'better-shadow': betterShadow}" :src="notification.action.user.profile_image_url_original"/>
     </a>
     <div class='notification-right'>
       <div class="usercard notification-usercard" v-if="userExpanded">
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 87c89f6a..d17ae25d 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -49,11 +49,17 @@
   .avatar-compact {
     width: 32px;
     height: 32px;
+    box-shadow: var(--avatarStatusShadow);
     border-radius: $fallback--avatarAltRadius;
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
     overflow: hidden;
     line-height: 0;
 
+    &.better-shadow {
+      box-shadow: none;
+      filter: drop-shadow(var(--avatarStatusShadowFilter))
+    }
+
     &.animated::before {
       display: none;
     }
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 10716583..725bc3f8 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -33,7 +33,8 @@ const Status = {
       showingTall: false,
       expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
         ? !this.$store.state.instance.collapseMessageWithSubject
-        : !this.$store.state.config.collapseMessageWithSubject
+        : !this.$store.state.config.collapseMessageWithSubject,
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
   computed: {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 4541c560..26be335c 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -21,7 +21,7 @@
       <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status">
         <div v-if="!noHeading" class="media-left">
           <a :href="status.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
-            <StillImage class='avatar' :class="{'avatar-compact': compact}"  :src="status.user.profile_image_url_original"/>
+            <StillImage class='avatar' :class="{'avatar-compact': compact, 'better-shadow': betterShadow}"  :src="status.user.profile_image_url_original"/>
           </a>
         </div>
         <div class="status-body">
@@ -464,8 +464,14 @@
 .status .avatar-compact {
   width: 32px;
   height: 32px;
+  box-shadow: var(--avatarStatusShadow);
   border-radius: $fallback--avatarAltRadius;
   border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+
+  &.better-shadow {
+    box-shadow: none;
+    filter: drop-shadow(var(--avatarStatusShadowFilter))
+  }
 }
 
 .avatar {
@@ -477,6 +483,11 @@
   overflow: hidden;
   position: relative;
 
+  &.better-shadow {
+    box-shadow: none;
+    filter: drop-shadow(var(--avatarStatusShadowFilter))
+  }
+
   img {
     width: 100%;
     height: 100%;
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index fa173b98..66fe0f6b 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -278,6 +278,18 @@
           <button class="btn" @click="clearShadows">{{$t('settings.style.switcher.clear_all')}}</button>
         </div>
         <shadow-control :ready="!!currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
+        <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
+          <i18n path="settings.style.shadows.filter_hint.always_drop_shadow" tag="p">
+            <code>filter: drop-shadow()</code>
+          </i18n>
+          <i18n path="settings.style.shadows.filter_hint.text" tag="p">
+            <code>drop-shadow</code>
+            <code>spread-radius</code>
+            <code>inset</code>
+          </i18n>
+          <p>{{$t('settings.style.shadows.filter_hint.inset_ignored')}}</p>
+          <p>{{$t('settings.style.shadows.filter_hint.spread_zero')}}</p>
+        </div>
       </div>
       <div :label="$t('settings.style.fonts._tab_label')" class="fonts-container">
         <div class="tab-header">
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 254d1666..97cd4983 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -7,7 +7,8 @@ export default {
     return {
       hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined'
         ? this.$store.state.instance.hideUserStats
-        : this.$store.state.config.hideUserStats
+        : this.$store.state.config.hideUserStats,
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
   computed: {
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 5529948e..cca418ff 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -10,7 +10,7 @@
       </a>
       <div class='container'>
         <router-link :to="{ name: 'user-profile', params: { id: user.id } }">
-          <StillImage class="avatar" :src="user.profile_image_url_original"/>
+          <StillImage class="avatar" :class='{ "better-shadow": betterShadow }' :src="user.profile_image_url_original"/>
         </router-link>
         <div class="name-and-screen-name">
           <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
@@ -159,6 +159,11 @@
       box-shadow: var(--avatarShadow);
       object-fit: cover;
 
+      &.better-shadow {
+        box-shadow: none;
+        filter: drop-shadow(var(--avatarStatusShadowFilter))
+      }
+
       &.animated::before {
         display: none;
       }
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 8847b11e..7f5a2a4f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -236,6 +236,13 @@
         "spread": "Spread",
         "inset": "Inset",
         "hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.",
+        "filter_hint": {
+          "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
+          "text": "Please note that {0} does not support {1} parameter and {2} keyword.",
+          "spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
+          "inset_ignored": "Inset shadows using will be ignored",
+          "inset_substituted": "Inset shadows will be substituted with {1} equivalent"
+        },
         "components": {
           "panel": "Panel",
           "panelHeader": "Panel header",
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 07489685..132fb08d 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -4,6 +4,12 @@ const defaultState = {
   settings: {
     currentSaveStateNotice: null,
     noticeClearTimeout: null
+  },
+  browserSupport: {
+    cssFilter: window.CSS && window.CSS.supports && (
+      window.CSS.supports('filter', 'drop-shadow(0 0)') ||
+        window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
+    )
   }
 }
 
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 7c375206..cff81c40 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -110,6 +110,24 @@ const getCssShadow = (input) => {
   ]).join(' ')).join(', ')
 }
 
+const getCssShadowFilter = (input) => {
+  if (input.length === 0) {
+    return 'none'
+  }
+
+  return input
+  // drop-shadow doesn't support inset or spread
+    .filter((shad) => console.log(shad) || !shad.inset && Number(shad.spread) === 0)
+    .map((shad) => [
+      shad.x,
+      shad.y,
+      // drop-shadow's blur is twice as strong compared to box-shadow
+      shad.blur / 2
+    ].map(_ => _ + 'px').concat([
+      getCssColor(shad.color, shad.alpha)
+    ]).join(' ')).join(', ')
+}
+
 const getCssColor = (input, a) => {
   let rgb = {}
   if (typeof input === 'object') {
@@ -384,7 +402,12 @@ const generateShadows = (input) => {
 
   return {
     rules: {
-      shadows: Object.entries(shadows).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';')
+      shadows: Object
+        .entries(shadows)
+      // TODO for v2.1: if shadow doesn't have non-inset shadows with spread > 0 - optionally
+      // convert all non-inset shadows into filter: drop-shadow() to boost performance
+        .map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}; --${k}ShadowFilter: ${getCssShadowFilter(v)}`)
+        .join(';')
     },
     theme: {
       shadows
@@ -467,5 +490,6 @@ export {
   generateFonts,
   generatePreset,
   composePreset,
-  getCssShadow
+  getCssShadow,
+  getCssShadowFilter
 }
-- 
cgit v1.2.3-70-g09d2


From bee738c815f287c4605eafd52c5565cdb07d5721 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 2 Dec 2018 08:47:55 +0300
Subject: making inset shadows work on avatars again

---
 src/components/notifications/notifications.scss    |  4 +--
 src/components/status/status.vue                   |  8 +++---
 src/components/style_switcher/style_switcher.vue   |  7 +++--
 .../user_card_content/user_card_content.vue        |  4 +--
 src/i18n/en.json                                   |  6 ++--
 src/services/style_setter/style_setter.js          | 32 ++++++++++++++--------
 6 files changed, 36 insertions(+), 25 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index d17ae25d..a6468e01 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -56,8 +56,8 @@
     line-height: 0;
 
     &.better-shadow {
-      box-shadow: none;
-      filter: drop-shadow(var(--avatarStatusShadowFilter))
+      box-shadow: var(--avatarStatusShadowInset);
+      filter: var(--avatarStatusShadowFilter)
     }
 
     &.animated::before {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 6597d56b..428383e3 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -469,8 +469,8 @@
   border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
 
   &.better-shadow {
-    box-shadow: none;
-    filter: drop-shadow(var(--avatarStatusShadowFilter))
+    box-shadow: var(--avatarStatusShadowInset);
+    filter: var(--avatarStatusShadowFilter)
   }
 }
 
@@ -484,8 +484,8 @@
   position: relative;
 
   &.better-shadow {
-    box-shadow: none;
-    filter: drop-shadow(var(--avatarStatusShadowFilter))
+    box-shadow: var(--avatarStatusShadowInset);
+    filter: var(--avatarStatusShadowFilter)
   }
 
   img {
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 66fe0f6b..c0a7da69 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -282,12 +282,15 @@
           <i18n path="settings.style.shadows.filter_hint.always_drop_shadow" tag="p">
             <code>filter: drop-shadow()</code>
           </i18n>
-          <i18n path="settings.style.shadows.filter_hint.text" tag="p">
+          <p>{{$t('settings.style.shadows.filter_hint.avatar_inset')}}</p>
+          <i18n path="settings.style.shadows.filter_hint.drop_shadow_syntax" tag="p">
             <code>drop-shadow</code>
             <code>spread-radius</code>
             <code>inset</code>
           </i18n>
-          <p>{{$t('settings.style.shadows.filter_hint.inset_ignored')}}</p>
+          <i18n path="settings.style.shadows.filter_hint.inset_classic" tag="p">
+            <code>box-shadow</code>
+          </i18n>
           <p>{{$t('settings.style.shadows.filter_hint.spread_zero')}}</p>
         </div>
       </div>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index cca418ff..e8b0ebf9 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -160,8 +160,8 @@
       object-fit: cover;
 
       &.better-shadow {
-        box-shadow: none;
-        filter: drop-shadow(var(--avatarStatusShadowFilter))
+        box-shadow: var(--avatarShadowInset);
+        filter: var(--avatarShadowFilter)
       }
 
       &.animated::before {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 7f5a2a4f..39da04d8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -238,10 +238,10 @@
         "hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.",
         "filter_hint": {
           "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
-          "text": "Please note that {0} does not support {1} parameter and {2} keyword.",
+          "drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
+          "avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
           "spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
-          "inset_ignored": "Inset shadows using will be ignored",
-          "inset_substituted": "Inset shadows will be substituted with {1} equivalent"
+          "inset_classic": "Inset shadows will be using {0}"
         },
         "components": {
           "panel": "Panel",
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index cff81c40..44a36c88 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -94,20 +94,22 @@ const setColors = (input, commit) => {
   commit('setOption', { name: 'colors', value: theme.colors })
 }
 
-const getCssShadow = (input) => {
+const getCssShadow = (input, usesDropShadow) => {
   if (input.length === 0) {
     return 'none'
   }
 
-  return input.map((shad) => [
-    shad.x,
-    shad.y,
-    shad.blur,
-    shad.spread
-  ].map(_ => _ + 'px').concat([
-    getCssColor(shad.color, shad.alpha),
-    shad.inset ? 'inset' : ''
-  ]).join(' ')).join(', ')
+  return input
+    .filter(_ => usesDropShadow ? _.inset : _)
+    .map((shad) => [
+      shad.x,
+      shad.y,
+      shad.blur,
+      shad.spread
+    ].map(_ => _ + 'px').concat([
+      getCssColor(shad.color, shad.alpha),
+      shad.inset ? 'inset' : ''
+    ]).join(' ')).join(', ')
 }
 
 const getCssShadowFilter = (input) => {
@@ -125,7 +127,9 @@ const getCssShadowFilter = (input) => {
       shad.blur / 2
     ].map(_ => _ + 'px').concat([
       getCssColor(shad.color, shad.alpha)
-    ]).join(' ')).join(', ')
+    ]).join(' '))
+    .map(_ => `drop-shadow(${_})`)
+    .join(' ')
 }
 
 const getCssColor = (input, a) => {
@@ -406,7 +410,11 @@ const generateShadows = (input) => {
         .entries(shadows)
       // TODO for v2.1: if shadow doesn't have non-inset shadows with spread > 0 - optionally
       // convert all non-inset shadows into filter: drop-shadow() to boost performance
-        .map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}; --${k}ShadowFilter: ${getCssShadowFilter(v)}`)
+        .map(([k, v]) => [
+          `--${k}Shadow: ${getCssShadow(v)}`,
+          `--${k}ShadowFilter: ${getCssShadowFilter(v)}`,
+          `--${k}ShadowInset: ${getCssShadow(v, true)}`
+        ].join(';'))
         .join(';')
     },
     theme: {
-- 
cgit v1.2.3-70-g09d2


From 33b962b13e34978c51500f7c72fef6bebc8ea37d Mon Sep 17 00:00:00 2001
From: ValD <maghtpol@gmail.com>
Date: Wed, 12 Dec 2018 23:56:12 +0530
Subject: removed counters from left panel

---
 src/components/user_card_content/user_card_content.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 4f171a56..a6075e4b 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -90,7 +90,7 @@
       </div>
     </div>
   </div>
-  <div class="panel-body profile-panel-body">
+  <div class="panel-body profile-panel-body" v-if="switcher">
     <div v-if="!hideUserStatsLocal || switcher" class="user-counts" :class="{clickable: switcher}">
       <div class="user-count" v-on:click.prevent="setProfileView('statuses')" :class="{selected: selected === 'statuses'}">
         <h5>{{ $t('user_card.statuses') }}</h5>
-- 
cgit v1.2.3-70-g09d2


From e3848f6efb7742c2c227db88fd3493802f6a17dd Mon Sep 17 00:00:00 2001
From: ValD <maghtpol@gmail.com>
Date: Tue, 11 Dec 2018 02:21:24 +0530
Subject: activate panel on user screen click

---
 src/components/user_card_content/user_card_content.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 4f171a56..1841e212 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -15,7 +15,7 @@
         <div class="name-and-screen-name">
           <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
           <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
-          <router-link class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
+          <router-link @click.native="activatePanel('timeline')" class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
             <span>@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
             <span v-if="!hideUserStatsLocal" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
           </router-link>
-- 
cgit v1.2.3-70-g09d2


From 481c5ecba8bacf73c86dc17b3dcde1bda9543d64 Mon Sep 17 00:00:00 2001
From: ValD <maghtpol@gmail.com>
Date: Tue, 11 Dec 2018 19:25:12 +0530
Subject: addressed PR comments

---
 src/components/user_card_content/user_card_content.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 1841e212..4dbb362a 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -9,7 +9,7 @@
         <i class="icon-link-ext usersettings"></i>
       </a>
       <div class='container'>
-        <router-link :to="{ name: 'user-profile', params: { id: user.id } }">
+        <router-link @click.native="activatePanel('timeline')" :to="{ name: 'user-profile', params: { id: user.id } }">
           <StillImage class="avatar" :class='{ "better-shadow": betterShadow }' :src="user.profile_image_url_original"/>
         </router-link>
         <div class="name-and-screen-name">
-- 
cgit v1.2.3-70-g09d2


From ce6d75331b080d1c5aa9b352bf602e98aebedf9f Mon Sep 17 00:00:00 2001
From: ValD <maghtpol@gmail.com>
Date: Thu, 13 Dec 2018 00:56:04 +0530
Subject: added check for activatePanel is function or not

---
 src/components/user_card_content/user_card_content.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 4dbb362a..a543ee3a 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -2,20 +2,20 @@
 <div id="heading" class="profile-panel-background" :style="headingStyle">
   <div class="panel-heading text-center">
     <div class='user-info'>
-      <router-link @click.native="activatePanel('timeline')" to='/user-settings' style="float: right; margin-top:16px;" v-if="!isOtherUser">
+      <router-link @click.native="activatePanel && activatePanel('timeline')" to='/user-settings' style="float: right; margin-top:16px;" v-if="!isOtherUser">
         <i class="icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i>
       </router-link>
       <a :href="user.statusnet_profile_url" target="_blank" class="floater" v-if="isOtherUser">
         <i class="icon-link-ext usersettings"></i>
       </a>
       <div class='container'>
-        <router-link @click.native="activatePanel('timeline')" :to="{ name: 'user-profile', params: { id: user.id } }">
+        <router-link @click.native="activatePanel && activatePanel('timeline')" :to="{ name: 'user-profile', params: { id: user.id } }">
           <StillImage class="avatar" :class='{ "better-shadow": betterShadow }' :src="user.profile_image_url_original"/>
         </router-link>
         <div class="name-and-screen-name">
           <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
           <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
-          <router-link @click.native="activatePanel('timeline')" class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
+          <router-link @click.native="activatePanel && activatePanel('timeline')" class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
             <span>@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
             <span v-if="!hideUserStatsLocal" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
           </router-link>
-- 
cgit v1.2.3-70-g09d2