MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(style): [WIP] Sidebar Colors; Focus Outline

This commit is contained in:
ArneBo 2025-01-05 11:59:53 +01:00 committed by upsiflu
parent b26e85ff75
commit 92dcef488c
2 changed files with 7 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
front/src/style/colors.scss
View File

@ -305,7 +305,7 @@
--link-hover-color:var(--fw-gray-200);
--color: var(--fw-beige-100);
--background-color: var(--fw-gray-970);
--background-color: var(--fw-gray-960);
--border-color:var(--fw-gray-700);
--hover-color:var(--fw-beige-400);
@ -331,8 +331,8 @@
--link-exact-active-background-color:var(--fw-gray-800);
}
--link-active-border-color:var(--fw-gray-700);
--link-exact-active-background-color:var(--fw-gray-800);
--link-active-border-color:var(--fw-gray-800);
--link-exact-active-background-color:var(--fw-gray-700);
--link-exact-active-border-color:transparent;
--void-off-background-color: var(--fw-gray-800);
@ -524,8 +524,8 @@
// Fallback for focused elements without explicit focus-outline
:is(button, input, a):focus-visible {
outline: 3px solid var(--focus-ring-color);
outline-offset: 2px;
outline: 4px solid var(--focus-ring-color);
outline-offset: -4px;
}
// (3b) Applying colors to things with explicit Variant props

7
front/src/ui/components/Sidebar.vue
View File

@ -35,7 +35,8 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
</script>
<template>
<Layout aside default solid no-gap :class="[$style.sidebar, $style['sticky-content']]">
<Layout aside default solid no-gap :class="[$style.sidebar, $style['sticky-content']]" style="background-color: var(--fw-gray-950);">
<!-- TODO: Fit working sidebar background color -->
<Layout header flex no-gap style="justify-content:space-between; padding-right:8px;">
<Link
:to="{name: logoUrl}"
@ -193,10 +194,6 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
<style module lang="scss">
.sidebar {
@include dark-theme {
background-color: var(--fw-gray-950);
/* TODO: Fix */
}
.logo {
display: block;
width: 40px;