alternate usercard

src/_variables.scss

@@ -27,14 +27,3 @@ $fallback--tooltipRadius: 5px;
 $fallback--avatarRadius: 4px;
 $fallback--avatarAltRadius: 10px;
 $fallback--attachmentRadius: 10px;
-
-$usercard-text-shadow-color: #666;
-$usercard-text-shadow: 0px 1px 5px rgba(0, 0, 0, .7),
-0 1px 0px $usercard-text-shadow-color,
-0 -1px 0px $usercard-text-shadow-color,
-1px 0 0px $usercard-text-shadow-color,
--1px 0 0px $usercard-text-shadow-color,
-1px -1px 0px $usercard-text-shadow-color,
--1px 1px 0px $usercard-text-shadow-color,
-1px 1px 0px $usercard-text-shadow-color,
--1px -1px 0px $usercard-text-shadow-color;

src/components/user_card_content/user_card_content.js

@@ -8,10 +8,18 @@ export default {
       const color = this.$store.state.config.colors.bg
       if (color) {
         const rgb = hex2rgb(color)
+        const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`
         console.log(rgb)
+        console.log([
+          `url(${this.user.cover_photo})`,
+          `linear-gradient(to bottom, ${tintColor}, ${tintColor})`
+        ].join(', '))
         return {
-          backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`,
-          backgroundImage: `url(${this.user.cover_photo})`
+          backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
+          backgroundImage: [
+            `linear-gradient(to bottom, ${tintColor}, ${tintColor})`,
+            `url(${this.user.cover_photo})`
+          ].join(', ')
         }
       }
     },

src/components/user_card_content/user_card_content.vue

@@ -116,7 +116,8 @@
 }
 
 .user-info {
-  color: white;
+  color: $fallback--lightFg;
+  color: var(--lightFg, $fallback--lightFg);
   padding: 0 16px;
 
   .container {
@@ -149,10 +150,9 @@
     }
   }
 
-  text-shadow: $usercard-text-shadow;
-
   .usersettings {
-    color: #fff;
+    color: $fallback--lightFg;
+    color: var(--lightFg, $fallback--lightFg);
     opacity: .8;
   }
 
@@ -166,13 +166,13 @@
   }
 
   .user-name{
-    color: white;
     text-overflow: ellipsis;
     overflow: hidden;
   }
 
   .user-screen-name {
-    color: white;
+    color: $fallback--lightFg;
+    color: var(--lightFg, $fallback--lightFg);
     display: inline-block;
     font-weight: light;
     font-size: 15px;
@@ -189,7 +189,6 @@
     }
 
     .following {
-      color: white;
       font-size: 14px;
       flex: 0 0 100%;
       margin: 0 0 .4em 0;
@@ -235,15 +234,17 @@
   padding: .5em 1.5em 0em 1.5em;
   text-align: center;
   justify-content: space-between;
-  text-shadow: $usercard-text-shadow;
-  color: #fff;
+  color: $fallback--lightFg;
+  color: var(--lightFg, $fallback--lightFg);
 
   &.clickable {
     .user-count {
       cursor: pointer;
 
       &:hover:not(.selected) {
-        background-color: rgba(0,0,0,.1);
+        transition: border-bottom 100ms;
+        border-bottom: 3px solid $fallback--link;
+        border-bottom: 3px solid var(--link, $fallback--link);
       }
     }
   }
@@ -255,7 +256,9 @@
   margin: 0 .5em;
 
   &.selected {
-    background-color: rgba(0,0,0,.35);
+    transition: none;
+    border-bottom: 5px solid $fallback--link;
+    border-bottom: 5px solid var(--link, $fallback--link);
     border-radius: $fallback--btnRadius;
     border-radius: var(--btnRadius, $fallback--btnRadius);
   }

src/services/style_setter/style_setter.js

@@ -75,7 +75,7 @@ const setColors = (col, commit) => {
   colors.border = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod)       // borders
   colors.faint = `rgba(${col.text.r}, ${col.text.g}, ${col.text.b}, .5)`
   colors.fg = rgb2hex(col.text.r, col.text.g, col.text.b)                   // text
-  colors.lightFg = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text
+  colors.lightFg = rgb2hex(col.text.r - mod * 5, col.text.g - mod * 5, col.text.b - mod * 5) // strong text
 
   colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)