mirror of
https://git.pleroma.social/sjw/pleroma-fe.git
synced 2024-12-23 06:05:44 +01:00
user cards looking nicer now
This commit is contained in:
parent
7575079da9
commit
3f6b9fbf9c
@ -3,7 +3,7 @@ export default {
|
||||
selector: '.tab', // CSS selector/prefix
|
||||
states: {
|
||||
active: '.active',
|
||||
hover: ':hover:not(:disabled)',
|
||||
hover: ':hover:not(.disabled)',
|
||||
disabled: '.disabled'
|
||||
},
|
||||
validInnerComponents: [
|
||||
@ -24,11 +24,16 @@ export default {
|
||||
shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['active'],
|
||||
directives: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['hover', 'active'],
|
||||
directives: {
|
||||
shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
|
||||
opacity: 0
|
||||
shadow: ['--defaultButtonShadow', '--defaultButtonBevel']
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -38,12 +43,6 @@ export default {
|
||||
shadow: ['--defaultButtonBevel']
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['active'],
|
||||
directives: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Text',
|
||||
parent: {
|
||||
|
@ -62,11 +62,6 @@
|
||||
padding: 1em;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
color: $fallback--link;
|
||||
color: var(--postLink, $fallback--link);
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
vertical-align: middle;
|
||||
@ -76,36 +71,31 @@
|
||||
}
|
||||
|
||||
&.-rounded-t {
|
||||
border-top-left-radius: $fallback--panelRadius;
|
||||
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
border-top-right-radius: $fallback--panelRadius;
|
||||
border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
border-top-left-radius: var(--roundness);
|
||||
border-top-right-radius: var(--roundness);
|
||||
|
||||
--__roundnessTop: var(--panelRadius);
|
||||
--__roundnessTop: var(--roundness);
|
||||
--__roundnessBottom: 0;
|
||||
}
|
||||
|
||||
&.-rounded {
|
||||
border-radius: $fallback--panelRadius;
|
||||
border-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
border-radius: var(--roundness);
|
||||
|
||||
--__roundnessTop: var(--panelRadius);
|
||||
--__roundnessBottom: var(--panelRadius);
|
||||
--__roundnessTop: var(--roundness);
|
||||
--__roundnessBottom: var(--roundness);
|
||||
}
|
||||
|
||||
&.-popover {
|
||||
border-radius: $fallback--tooltipRadius;
|
||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||
border-radius: var(--roundness);
|
||||
|
||||
--__roundnessTop: var(--tooltipRadius);
|
||||
--__roundnessBottom: var(--tooltipRadius);
|
||||
--__roundnessTop: var(--roundness);
|
||||
--__roundnessBottom: var(--roundness);
|
||||
}
|
||||
|
||||
&.-bordered {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $fallback--border;
|
||||
border-color: var(--border, $fallback--border);
|
||||
border-color: var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
@ -176,8 +166,7 @@
|
||||
padding: 0.5em 0;
|
||||
|
||||
&:not(:hover) .icon {
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
color: var(--lightText);
|
||||
}
|
||||
}
|
||||
|
||||
@ -191,6 +180,7 @@
|
||||
}
|
||||
|
||||
.user-screen-name {
|
||||
color: var(--text);
|
||||
min-width: 1px;
|
||||
flex: 0 1 auto;
|
||||
text-overflow: ellipsis;
|
||||
@ -202,16 +192,11 @@
|
||||
flex: 0 0 auto;
|
||||
margin-left: 1em;
|
||||
font-size: 0.7em;
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.user-role {
|
||||
flex: none;
|
||||
color: $fallback--text;
|
||||
color: var(--alertNeutralText, $fallback--text);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--alertNeutral, $fallback--fg);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -15,6 +15,7 @@ export default {
|
||||
{
|
||||
directives: {
|
||||
background: '--bg',
|
||||
opacity: 0,
|
||||
roundness: 3,
|
||||
shadow: [{
|
||||
x: 1,
|
||||
|
@ -113,19 +113,19 @@
|
||||
<template v-if="!hideBio">
|
||||
<span
|
||||
v-if="user.deactivated"
|
||||
class="alert user-role"
|
||||
class="alert neutral user-role"
|
||||
>
|
||||
{{ $t('user_card.deactivated') }}
|
||||
</span>
|
||||
<span
|
||||
v-if="!!visibleRole"
|
||||
class="alert user-role"
|
||||
class="alert neutral user-role"
|
||||
>
|
||||
{{ $t(`general.role.${visibleRole}`) }}
|
||||
</span>
|
||||
<span
|
||||
v-if="user.bot"
|
||||
class="alert user-role"
|
||||
class="alert neutral user-role"
|
||||
>
|
||||
{{ $t('user_card.bot') }}
|
||||
</span>
|
||||
|
@ -200,6 +200,7 @@ export const convertTheme2To3 = (data) => {
|
||||
if (rule.component === 'Button') {
|
||||
newRules.push({ ...rule, component: 'ScrollbarElement' })
|
||||
newRules.push({ ...rule, component: 'Tab' })
|
||||
newRules.push({ ...rule, component: 'Tab', state: ['active'], directives: { opacity: 0 } })
|
||||
}
|
||||
})
|
||||
return newRules
|
||||
|
Loading…
Reference in New Issue
Block a user