From 13a289ac74206ada74c329b721584b810ef1b9ef Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 18 Feb 2024 20:11:06 +0200 Subject: fixed oot selectors not working, added support for (webkit) scrollbars --- src/components/user_card/user_card.style.js | 40 +++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 src/components/user_card/user_card.style.js (limited to 'src/components/user_card/user_card.style.js') diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js new file mode 100644 index 00000000..1a8c179d --- /dev/null +++ b/src/components/user_card/user_card.style.js @@ -0,0 +1,40 @@ +export default { + name: 'UserCard', + selector: '.user-card', + validInnerComponents: [ + 'Text', + 'Link', + 'Icon', + 'Button', + 'ButtonUnstyled', + 'Input', + 'RichContent', + 'Alert' + ], + defaultRules: [ + { + directives: { + background: '--bg', + roundness: 3, + shadow: [{ + x: 1, + y: 1, + blur: 4, + spread: 0, + color: '#000000', + alpha: 0.6 + }], + '--profileTint': '$alpha(--background, 0.5)' + } + }, + { + parent: { + component: 'UserCard' + }, + component: 'RichContent', + directives: { + opacity: 0 + } + } + ] +} -- cgit v1.2.3-70-g09d2 From ab63ec1471964aaf8ffc3d65412b54b173fc5b9e Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 19 Feb 2024 00:25:28 +0200 Subject: make dynamic directives have a type --- src/components/user_card/user_card.style.js | 2 +- src/services/theme_data/theme_data_3.service.js | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) (limited to 'src/components/user_card/user_card.style.js') diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js index 1a8c179d..a6190f59 100644 --- a/src/components/user_card/user_card.style.js +++ b/src/components/user_card/user_card.style.js @@ -24,7 +24,7 @@ export default { color: '#000000', alpha: 0.6 }], - '--profileTint': '$alpha(--background, 0.5)' + '--profileTint': 'color | $alpha(--background, 0.5)' } }, { diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js index d916f97d..a73d4cb5 100644 --- a/src/services/theme_data/theme_data_3.service.js +++ b/src/services/theme_data/theme_data_3.service.js @@ -661,7 +661,13 @@ export const init = (extraRuleset, palette) => { } default: if (k.startsWith('--')) { - return k + ': ' + rgba2css(findColor(v, computed[selector].dynamicVars)) + const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme! + switch (type) { + case 'color': + return k + ': ' + rgba2css(findColor(value, computed[selector].dynamicVars)) + default: + return '' + } } return '' } -- cgit v1.2.3-70-g09d2 From 3f6b9fbf9cc59d5ae20f9bda7c8fdf9f55d5675e Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 28 Feb 2024 22:56:15 +0200 Subject: user cards looking nicer now --- src/components/tab_switcher/tab.style.js | 15 +++++------ src/components/user_card/user_card.scss | 41 +++++++++-------------------- src/components/user_card/user_card.style.js | 1 + src/components/user_card/user_card.vue | 6 ++--- src/services/theme_data/theme2_to_theme3.js | 1 + 5 files changed, 25 insertions(+), 39 deletions(-) (limited to 'src/components/user_card/user_card.style.js') diff --git a/src/components/tab_switcher/tab.style.js b/src/components/tab_switcher/tab.style.js index bf4a4ea5..eac8aaeb 100644 --- a/src/components/tab_switcher/tab.style.js +++ b/src/components/tab_switcher/tab.style.js @@ -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: [ @@ -25,23 +25,22 @@ export default { } }, { - state: ['hover', 'active'], + state: ['active'], directives: { - shadow: ['--defaultButtonShadow', '--defaultButtonBevel'], opacity: 0 } }, { - state: ['disabled'], + state: ['hover', 'active'], directives: { - background: '$blend(--inheritedBackground, 0.25, --parent)', - shadow: ['--defaultButtonBevel'] + shadow: ['--defaultButtonShadow', '--defaultButtonBevel'] } }, { - state: ['active'], + state: ['disabled'], directives: { - opacity: 0 + background: '$blend(--inheritedBackground, 0.25, --parent)', + shadow: ['--defaultButtonBevel'] } }, { diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index a1ac81a6..6dba3499 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -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); } } diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js index a6190f59..34eaa176 100644 --- a/src/components/user_card/user_card.style.js +++ b/src/components/user_card/user_card.style.js @@ -15,6 +15,7 @@ export default { { directives: { background: '--bg', + opacity: 0, roundness: 3, shadow: [{ x: 1, diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index e69836cc..a616f526 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -113,19 +113,19 @@