hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update CSS and configuration for theme opacity and color management

Browse Source
This commit is contained in:
daudix
2024-09-01 20:06:34 +03:00
parent db499a9363
commit 607567248c
6 changed files with 178 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
sass/_variables.scss
View File

@ -26,53 +26,47 @@
--fg-muted-5: rgb(255 255 255 / 0.6);
--fg-contrast: rgb(0 0 0 / 0.8);
--nav-bg: rgb(25 25 25 / 0.7);
--blue-bg: rgb(153 193 241 / 0.1);
--blue-fg: rgb(153 193 241);
--brown-bg: rgb(205 171 143 / 0.1);
--brown-fg: rgb(205 171 143);
--green-bg: rgb(143 240 164 / 0.1);
--green-fg: rgb(143 240 164);
--purple-bg: rgb(220 138 221 / 0.1);
--purple-fg: rgb(220 138 221);
--red-bg: rgb(226 97 81 / 0.1);
--red-fg: rgb(246 97 81);
--yellow-bg: rgb(248 228 92 / 0.1);
--yellow-fg: rgb(248 228 92);
color-scheme: dark;
}
@else {
// COLORS
--primary-color-alpha: rgb(from var(--primary-color) r g b / 0.1);
--bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
--blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity));
--blue-fg: rgb(53 132 228);
--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
--brown-fg: rgb(99 69 44);
--fg-color: rgb(0 0 0 / 0.8);
--fg-contrast: rgb(255 255 255);
--fg-muted-1: rgb(0 0 0 / 0.05);
--fg-muted-2: rgb(0 0 0 / 0.1);
--fg-muted-3: rgb(0 0 0 / 0.2);
--fg-muted-4: rgb(0 0 0 / 0.5);
--fg-muted-5: rgb(0 0 0 / 0.6);
--fg-contrast: rgb(255 255 255);
--nav-bg: rgb(242 242 242 / 0.7);
--blue-bg: rgb(53 132 228 / 0.1);
--blue-fg: rgb(53 132 228);
--brown-bg: rgb(99 69 44 / 0.1);
--brown-fg: rgb(99 69 44);
--green-bg: rgb(38 162 105 / 0.1);
--green-bg: rgb(from var(--green-fg) r g b / var(--color-opacity));
--green-fg: rgb(38 162 105);
--purple-bg: rgb(145 65 172 / 0.1);
--nav-bg: rgb(242 242 242 / 0.7);
--primary-color-alpha: rgb(from var(--primary-color) r g b / var(--color-opacity));
--purple-bg: rgb(from var(--purple-fg) r g b / var(--color-opacity));
--purple-fg: rgb(145 65 172);
--red-bg: rgb(224 27 36 / 0.1);
--red-bg: rgb(from var(--red-fg) r g b / var(--color-opacity));
--red-fg: rgb(224 27 36);
--yellow-bg: rgb(156 110 3 / 0.1);
--yellow-bg: rgb(from var(--yellow-fg) r g b / var(--color-opacity));
--yellow-fg: rgb(156 110 3);
// VARIABLES
--disabled: 0.6;
--hover: scale(1.1);
--active: scale(0.9);
--blur: saturate(180%) blur(0.75rem);
--container-width: 720px;
--disabled: 0.6;
--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
--hover: scale(1.1);
--rounded-corner-small: 0.5rem;
--rounded-corner: 0.75rem;
--shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 0.06), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14), 0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);