ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-07 17:05:32 +02:00
Code Issues Projects Releases Packages Wiki Activity

chore(bg): replace the bg for buttons with a subtle background color

Browse source
This commit is contained in:
Shintaro Jokagi 2025-03-16 18:17:40 +13:00
parent 03906ef819
commit 3f11a2d6b3
4 changed files with 9 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Button.astro
View file

@ -24,7 +24,7 @@ const {
: isAlert : isAlert
? 'bg-red-300 text-dark' ? 'bg-red-300 text-dark'
: !isBordered : !isBordered
? 'bg-[rgba(0,0,0,.05)]' ? 'bg-subtle'
: '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm', : '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm',
]} ]}
> >

10
src/components/Features.astro
View file

@ -235,20 +235,20 @@ const {
<style> <style>
.feature { .feature {
@apply w-full cursor-pointer select-none rounded-lg p-4 hover:bg-[rgba(0,0,0,.05)] dark:hover:bg-white/10; @apply w-full cursor-pointer select-none rounded-lg p-4 hover:bg-subtle;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
&[data-active='true'] { &[data-active='true'] {
@apply bg-[rgba(0,0,0,.05)] dark:bg-white/10; @apply bg-subtle;
} }
} }
.feature-tab { .feature-tab {
@apply rounded-lg px-4 py-2 text-lg font-medium hover:bg-[rgba(0,0,0,.05)] dark:hover:bg-white/10; @apply rounded-lg px-4 py-2 text-lg font-medium hover:bg-subtle;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
&[data-active='true'] { &[data-active='true'] {
@apply bg-[rgba(0,0,0,.05)] dark:bg-white/10; @apply bg-subtle;
} }
} }

2
src/layouts/Layout.astro
View file

@ -127,11 +127,13 @@ import MobileNavBar from '../components/MobileNavBar'
--zen-paper: #f2f0e3; --zen-paper: #f2f0e3;
--zen-dark: #2e2e2e; --zen-dark: #2e2e2e;
--zen-muted: rgba(0, 0, 0, 0.05); --zen-muted: rgba(0, 0, 0, 0.05);
--zen-subtle: rgba(0,0,0,0.05);
&[data-theme='dark'] { &[data-theme='dark'] {
--zen-paper: #1f1f1f; --zen-paper: #1f1f1f;
--zen-dark: #d1cfc0; --zen-dark: #d1cfc0;
--zen-muted: rgba(255, 255, 255, 0.05); --zen-muted: rgba(255, 255, 255, 0.05);
--zen-subtle: rgba(255,255,255,0.1);
} }
} }

1
tailwind.config.mjs
View file

@ -12,6 +12,7 @@ export default {
paper: 'var(--zen-paper)', paper: 'var(--zen-paper)',
coral: '#F76F53', coral: '#F76F53',
dark: 'var(--zen-dark)', dark: 'var(--zen-dark)',
subtle: 'var(--zen-subtle)',
muted: 'var(--zen-muted)', muted: 'var(--zen-muted)',
'zen-blue': '#6287f5', 'zen-blue': '#6287f5',
'zen-green': '#63f78b', 'zen-green': '#63f78b',