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); --link-hover-color:var(--fw-gray-200);
--color: var(--fw-beige-100); --color: var(--fw-beige-100);
--background-color: var(--fw-gray-970); --background-color: var(--fw-gray-960);
--border-color:var(--fw-gray-700); --border-color:var(--fw-gray-700);
--hover-color:var(--fw-beige-400); --hover-color:var(--fw-beige-400);
@ -331,8 +331,8 @@
--link-exact-active-background-color:var(--fw-gray-800); --link-exact-active-background-color:var(--fw-gray-800);
} }
--link-active-border-color:var(--fw-gray-700); --link-active-border-color:var(--fw-gray-800);
--link-exact-active-background-color:var(--fw-gray-800); --link-exact-active-background-color:var(--fw-gray-700);
--link-exact-active-border-color:transparent; --link-exact-active-border-color:transparent;
--void-off-background-color: var(--fw-gray-800); --void-off-background-color: var(--fw-gray-800);
@ -524,8 +524,8 @@
// Fallback for focused elements without explicit focus-outline // Fallback for focused elements without explicit focus-outline
:is(button, input, a):focus-visible { :is(button, input, a):focus-visible {
outline: 3px solid var(--focus-ring-color); outline: 4px solid var(--focus-ring-color);
outline-offset: 2px; outline-offset: -4px;
} }
// (3b) Applying colors to things with explicit Variant props // (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> </script>
<template> <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;"> <Layout header flex no-gap style="justify-content:space-between; padding-right:8px;">
<Link <Link
:to="{name: logoUrl}" :to="{name: logoUrl}"
@ -193,10 +194,6 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
<style module lang="scss"> <style module lang="scss">
.sidebar { .sidebar {
@include dark-theme {
background-color: var(--fw-gray-950);
/* TODO: Fix */
}
.logo { .logo {
display: block; display: block;
width: 40px; width: 40px;