user cards looking nicer now

This commit is contained in:
Henry Jameson 2024-02-28 22:56:15 +02:00
parent 7575079da9
commit 3f6b9fbf9c
5 changed files with 26 additions and 40 deletions

View File

@ -3,7 +3,7 @@ export default {
selector: '.tab', // CSS selector/prefix selector: '.tab', // CSS selector/prefix
states: { states: {
active: '.active', active: '.active',
hover: ':hover:not(:disabled)', hover: ':hover:not(.disabled)',
disabled: '.disabled' disabled: '.disabled'
}, },
validInnerComponents: [ validInnerComponents: [
@ -24,11 +24,16 @@ export default {
shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel'] shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
} }
}, },
{
state: ['active'],
directives: {
opacity: 0
}
},
{ {
state: ['hover', 'active'], state: ['hover', 'active'],
directives: { directives: {
shadow: ['--defaultButtonShadow', '--defaultButtonBevel'], shadow: ['--defaultButtonShadow', '--defaultButtonBevel']
opacity: 0
} }
}, },
{ {
@ -38,12 +43,6 @@ export default {
shadow: ['--defaultButtonBevel'] shadow: ['--defaultButtonBevel']
} }
}, },
{
state: ['active'],
directives: {
opacity: 0
}
},
{ {
component: 'Text', component: 'Text',
parent: { parent: {

View File

@ -62,11 +62,6 @@
padding: 1em; padding: 1em;
margin: 0; margin: 0;
a {
color: $fallback--link;
color: var(--postLink, $fallback--link);
}
img { img {
object-fit: contain; object-fit: contain;
vertical-align: middle; vertical-align: middle;
@ -76,36 +71,31 @@
} }
&.-rounded-t { &.-rounded-t {
border-top-left-radius: $fallback--panelRadius; border-top-left-radius: var(--roundness);
border-top-left-radius: var(--panelRadius, $fallback--panelRadius); border-top-right-radius: var(--roundness);
border-top-right-radius: $fallback--panelRadius;
border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
--__roundnessTop: var(--panelRadius); --__roundnessTop: var(--roundness);
--__roundnessBottom: 0; --__roundnessBottom: 0;
} }
&.-rounded { &.-rounded {
border-radius: $fallback--panelRadius; border-radius: var(--roundness);
border-radius: var(--panelRadius, $fallback--panelRadius);
--__roundnessTop: var(--panelRadius); --__roundnessTop: var(--roundness);
--__roundnessBottom: var(--panelRadius); --__roundnessBottom: var(--roundness);
} }
&.-popover { &.-popover {
border-radius: $fallback--tooltipRadius; border-radius: var(--roundness);
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
--__roundnessTop: var(--tooltipRadius); --__roundnessTop: var(--roundness);
--__roundnessBottom: var(--tooltipRadius); --__roundnessBottom: var(--roundness);
} }
&.-bordered { &.-bordered {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: $fallback--border; border-color: var(--border);
border-color: var(--border, $fallback--border);
} }
} }
@ -176,8 +166,7 @@
padding: 0.5em 0; padding: 0.5em 0;
&:not(:hover) .icon { &:not(:hover) .icon {
color: $fallback--lightText; color: var(--lightText);
color: var(--lightText, $fallback--lightText);
} }
} }
@ -191,6 +180,7 @@
} }
.user-screen-name { .user-screen-name {
color: var(--text);
min-width: 1px; min-width: 1px;
flex: 0 1 auto; flex: 0 1 auto;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -202,16 +192,11 @@
flex: 0 0 auto; flex: 0 0 auto;
margin-left: 1em; margin-left: 1em;
font-size: 0.7em; font-size: 0.7em;
color: $fallback--text; color: var(--text);
color: var(--text, $fallback--text);
} }
.user-role { .user-role {
flex: none; flex: none;
color: $fallback--text;
color: var(--alertNeutralText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--alertNeutral, $fallback--fg);
} }
} }

View File

@ -15,6 +15,7 @@ export default {
{ {
directives: { directives: {
background: '--bg', background: '--bg',
opacity: 0,
roundness: 3, roundness: 3,
shadow: [{ shadow: [{
x: 1, x: 1,

View File

@ -113,19 +113,19 @@
<template v-if="!hideBio"> <template v-if="!hideBio">
<span <span
v-if="user.deactivated" v-if="user.deactivated"
class="alert user-role" class="alert neutral user-role"
> >
{{ $t('user_card.deactivated') }} {{ $t('user_card.deactivated') }}
</span> </span>
<span <span
v-if="!!visibleRole" v-if="!!visibleRole"
class="alert user-role" class="alert neutral user-role"
> >
{{ $t(`general.role.${visibleRole}`) }} {{ $t(`general.role.${visibleRole}`) }}
</span> </span>
<span <span
v-if="user.bot" v-if="user.bot"
class="alert user-role" class="alert neutral user-role"
> >
{{ $t('user_card.bot') }} {{ $t('user_card.bot') }}
</span> </span>

View File

@ -200,6 +200,7 @@ export const convertTheme2To3 = (data) => {
if (rule.component === 'Button') { if (rule.component === 'Button') {
newRules.push({ ...rule, component: 'ScrollbarElement' }) newRules.push({ ...rule, component: 'ScrollbarElement' })
newRules.push({ ...rule, component: 'Tab' }) newRules.push({ ...rule, component: 'Tab' })
newRules.push({ ...rule, component: 'Tab', state: ['active'], directives: { opacity: 0 } })
} }
}) })
return newRules return newRules