therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

alternate usercard

Browse source
This commit is contained in:
Henry Jameson 2018-05-12 16:07:18 +03:00
parent 4c3d62da04
commit dc33c0aaac
4 changed files with 25 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/user_card_content/user_card_content.js
View file

@ -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(', ')
}
}
},

25
src/components/user_card_content/user_card_content.vue
View file

@ -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);
}