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
|
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: {
|
||||||
|
@ -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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -15,6 +15,7 @@ export default {
|
|||||||
{
|
{
|
||||||
directives: {
|
directives: {
|
||||||
background: '--bg',
|
background: '--bg',
|
||||||
|
opacity: 0,
|
||||||
roundness: 3,
|
roundness: 3,
|
||||||
shadow: [{
|
shadow: [{
|
||||||
x: 1,
|
x: 1,
|
||||||
|
@ -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>
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user