more default shadows, replaced original shadows with generated ones. maybe gotta

update fallbacks...

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-top: 1px solid rgba(255, 255, 255, 0.2); */
-  border-bottom: 1px solid rgba(0, 0, 0, 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-bottom: 1px solid rgba(255, 255, 255, 0.2); */
-    border-top: 1px solid rgba(0, 0, 0, 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-bottom: 1px solid rgba(255, 255, 255, 0.2); */
-  border-top: 1px solid rgba(0, 0, 0, 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;

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;

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 {

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)",
+          "buttonHover": "Button (hover)",
-          "button_pressed": "Button (pressed)",
+          "buttonPressed": "Button (pressed)",
-          "button_pressed_hover": "Button (pressed+hover)",
+          "buttonPressedHover": "Button (pressed+hover)",
-          "input_box": "Input field"
+          "input": "Input field"
         }
       }
     }

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 || {})
   }