joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: fix text selection color in Firefox dark mode

Browse Source
This commit is contained in:
David Dal Busco
2024-09-14 11:56:34 +02:00
parent 207969a919
commit e7164da082
1 changed files with 73 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/app/globals.css
View File

@@ -3,95 +3,106 @@
@tailwind utilities; @tailwind utilities;
@layer base { @layer base {
:root { :root {
--background: 0 0% 100%; --background: 0 0% 100%;
--foreground: 0 0% 3.9%; --foreground: 0 0% 3.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 0 0% 3.9%; --card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%; --popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%; --popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%; --primary: 0 0% 9%;
--primary-foreground: 0 0% 98%; --primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%; --secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%; --secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%; --muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%; --muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%; --accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%; --accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%; --destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%; --border: 0 0% 89.8%;
--input: 0 0% 89.8%; --input: 0 0% 89.8%;
--ring: 0 0% 3.9%; --ring: 0 0% 3.9%;
--radius: 0.5rem; --radius: 0.5rem;
/* Custom properties */ /* Custom properties */
--navigation-height: 3.5rem; --navigation-height: 3.5rem;
--color-one: #ffbd7a; --color-one: #ffbd7a;
--color-two: #fe8bbb; --color-two: #fe8bbb;
--color-three: #9e7aff; --color-three: #9e7aff;
--surface: rgb(245, 245, 245); --surface: rgb(245, 245, 245);
/* /*
--color-one: #37ecba; --color-one: #37ecba;
--color-two: #72afd3; --color-two: #72afd3;
--color-three: #ff2e63; --color-three: #ff2e63;
*/ */
} }
[data-theme='dark'], .dark { [data-theme="dark"],
--background: 5 5 5; .dark {
--foreground: 0 0% 98%; --background: 5 5 5;
--foreground: 0 0% 98%;
--surface: rgb(23, 23, 23); --surface: rgb(23, 23, 23);
--card: 0 0% 3.9%; --card: 0 0% 3.9%;
--card-foreground: 0 0% 98%; --card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%; --popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%; --popover-foreground: 0 0% 98%;
--primary: 0 0% 98%; --primary: 0 0% 98%;
--primary-foreground: 0 0% 9%; --primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%; --secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%; --secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%; --muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%; --muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%; --accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%; --accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%; --destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%; --border: 0 0% 14.9%;
--input: 0 0% 14.9%; --input: 0 0% 14.9%;
--ring: 0 0% 83.1%; --ring: 0 0% 83.1%;
--color-one: #6aa8e2; --color-one: #6aa8e2;
} }
} }
@layer base { @layer base {
html { html {
@apply scroll-smooth; @apply scroll-smooth;
} }
* { * {
@apply border-border; @apply border-border;
} }
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
}
::selection {
color: hsl(var(--primary-foreground));
background: hsl(var(--primary));
}
::-moz-selection {
color: hsl(var(--primary-foreground));
background: hsl(var(--primary));
} }