alternate usercard
This commit is contained in:
parent
4c3d62da04
commit
dc33c0aaac
4 changed files with 25 additions and 25 deletions
|
@ -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;
|
||||
|
|
|
@ -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(', ')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
Loading…
Reference in a new issue