cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: modal overlay

Browse source
This commit is contained in:
Cory Dransfeldt 2024-10-03 05:13:22 -07:00
parent 73eee35ece
commit 192fcbfcf9
No known key found for this signature in database
2 changed files with 9 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/assets/styles/components/modal.css
View file

@ -2,7 +2,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
inset: 0; inset: 0;
background: color-mix(in srgb, var(--gray-dark), transparent 10%); background: var(--modal-overlay-background);
position: fixed; position: fixed;
z-index: 3; z-index: 3;

8
src/assets/styles/defaults/vars.css
View file

@ -173,6 +173,11 @@
--box-shadow-text-toggle: inset 0 -120px 60px -60px var(--background-color); --box-shadow-text-toggle: inset 0 -120px 60px -60px var(--background-color);
--text-shadow-default: rgba(0, 0, 0, 0.7) 0px 0px 10px; --text-shadow-default: rgba(0, 0, 0, 0.7) 0px 0px 10px;
/* modals */
--modal-overlay-background-light: #ffffffbf;
--modal-overlay-background-dark: #000000bf;
--modal-overlay-background: var(--modal-overlay-background-light);
/* input accent color */ /* input accent color */
accent-color: var(--accent-color); accent-color: var(--accent-color);
} }
@ -188,6 +193,7 @@
--gray-light: var(--gray-300); --gray-light: var(--gray-300);
--gray-lighter: var(--gray-200); --gray-lighter: var(--gray-200);
--gray-dark: var(--gray-800); --gray-dark: var(--gray-800);
--modal-overlay-background: var(--modal-overlay-background-light);
--brand-github: var(--brand-github-light); --brand-github: var(--brand-github-light);
--article: var(--article-light); --article: var(--article-light);
--about: var(--about-light); --about: var(--about-light);
@ -219,6 +225,7 @@
--gray-light: var(--gray-600); --gray-light: var(--gray-600);
--gray-lighter: var(--gray-700); --gray-lighter: var(--gray-700);
--gray-dark: var(--gray-300); --gray-dark: var(--gray-300);
--modal-overlay-background: var(--modal-overlay-background-dark);
--brand-github: var(--brand-github-dark); --brand-github: var(--brand-github-dark);
--article: var(--article-dark); --article: var(--article-dark);
--about: var(--about-dark); --about: var(--about-dark);
@ -250,6 +257,7 @@
--gray-light: var(--gray-600); --gray-light: var(--gray-600);
--gray-lighter: var(--gray-700); --gray-lighter: var(--gray-700);
--gray-dark: var(--gray-300); --gray-dark: var(--gray-300);
--modal-overlay-background: var(--modal-overlay-background-dark);
--brand-github: var(--brand-github-dark); --brand-github: var(--brand-github-dark);
--article: var(--article-dark); --article: var(--article-dark);
--about: var(--about-dark); --about: var(--about-dark);