worst/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

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
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/_variables.scss
View file

@ -27,14 +27,3 @@ $fallback--tooltipRadius: 5px;
$fallback--avatarRadius: 4px; $fallback--avatarRadius: 4px;
$fallback--avatarAltRadius: 10px; $fallback--avatarAltRadius: 10px;
$fallback--attachmentRadius: 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;

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 const color = this.$store.state.config.colors.bg
if (color) { if (color) {
const rgb = hex2rgb(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(rgb)
console.log([
`url(${this.user.cover_photo})`,
`linear-gradient(to bottom, ${tintColor}, ${tintColor})`
].join(', '))
return { return {
backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`, backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
backgroundImage: `url(${this.user.cover_photo})` 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 { .user-info {
color: white; color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg);
padding: 0 16px; padding: 0 16px;
.container { .container {
@ -149,10 +150,9 @@
} }
} }
text-shadow: $usercard-text-shadow;
.usersettings { .usersettings {
color: #fff; color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg);
opacity: .8; opacity: .8;
} }
@ -166,13 +166,13 @@
} }
.user-name{ .user-name{
color: white;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.user-screen-name { .user-screen-name {
color: white; color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg);
display: inline-block; display: inline-block;
font-weight: light; font-weight: light;
font-size: 15px; font-size: 15px;
@ -189,7 +189,6 @@
} }
.following { .following {
color: white;
font-size: 14px; font-size: 14px;
flex: 0 0 100%; flex: 0 0 100%;
margin: 0 0 .4em 0; margin: 0 0 .4em 0;
@ -235,15 +234,17 @@
padding: .5em 1.5em 0em 1.5em; padding: .5em 1.5em 0em 1.5em;
text-align: center; text-align: center;
justify-content: space-between; justify-content: space-between;
text-shadow: $usercard-text-shadow; color: $fallback--lightFg;
color: #fff; color: var(--lightFg, $fallback--lightFg);
&.clickable { &.clickable {
.user-count { .user-count {
cursor: pointer; cursor: pointer;
&:hover:not(.selected) { &: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; margin: 0 .5em;
&.selected { &.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: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius); border-radius: var(--btnRadius, $fallback--btnRadius);
} }

2
src/services/style_setter/style_setter.js
View file

@ -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.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.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.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) colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)