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

Make --color-opacity variable "private", tweak switch style

Browse Source
This commit is contained in:
daudix
2024-09-02 01:53:02 +03:00
parent 2c110393c3
commit b6b2639373
8 changed files with 44 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
sass/_footer.scss
View File

@ -43,6 +43,7 @@
text-decoration: none;
&.active {
box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha);
color: var(--primary-color);

2
sass/_general.scss
View File

@ -33,7 +33,7 @@ body {
display: grid; // Put footer at the bottom for short pages, such as the 404
grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer
margin: 0;
background: var(--bg-color), var(--primary-color);
background-color: var(--bg-color);
min-height: 100vh;
color: var(--fg-color);
line-height: 1.6;

10
sass/_input.scss
View File

@ -87,12 +87,12 @@ input[type="checkbox"] {
}
&.switch {
vertical-align: -0.625rem;
vertical-align: -0.375rem;
box-shadow: var(--edge-highlight);
border: none;
border-radius: 999px;
width: 3rem;
height: 2rem;
width: 2.5rem;
height: 1.5rem;
&::before {
-webkit-mask-image: none;
@ -106,8 +106,8 @@ input[type="checkbox"] {
box-shadow: var(--shadow);
border-radius: 50%;
background-color: white;
width: 1.5rem;
height: 1.5rem;
width: 1rem;
height: 1rem;
}
&:checked {

5
sass/_variables.scss
View File

@ -17,7 +17,7 @@
@include theme-variables using ($theme) {
@if $theme =="dark" {
// COLORS
--bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
--bg-color: color-mix(in srgb, var(--primary-color) 10%, black);
--fg-color: rgb(255 255 255);
--fg-muted-1: rgb(255 255 255 / 0.05);
--fg-muted-2: rgb(255 255 255 / 0.1);
@ -37,7 +37,7 @@
@else {
// COLORS
--bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
--bg-color: color-mix(in srgb, var(--primary-color) 20%, white);
--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));
@ -63,6 +63,7 @@
// VARIABLES
--active: scale(0.9);
--blur: saturate(180%) blur(0.75rem);
--color-opacity: 0.1;
--container-width: 720px;
--disabled: 0.6;
--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);