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

Add active style to theme switcher buttons, style tweaks

Browse Source
This commit is contained in:
daudix
2024-08-29 22:49:42 +03:00
parent d09e2b158c
commit fcf8cdd680
9 changed files with 100 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
sass/_article-list.scss
View File

@ -91,7 +91,7 @@
}
&:hover {
outline-color: var(--fg-muted-4);
outline-color: var(--fg-muted-5);
}
h3 a {
@ -100,10 +100,10 @@
.tags a {
background-color: var(--fg-muted-1);
color: var(--fg-muted-4);
color: var(--fg-muted-5);
&:hover {
background-color: var(--fg-muted-4);
background-color: var(--fg-muted-5);
color: var(--fg-contrast);
}
}
@ -264,12 +264,12 @@
.draft-badge {
background-color: var(--fg-muted-1);
color: var(--fg-muted-4);
color: var(--fg-muted-5);
.icon {
-webkit-mask-image: var(--icon);
mask-image: var(--icon);
background-color: var(--fg-muted-4);
background-color: var(--fg-muted-5);
}
}

3
sass/_buttons.scss
View File

@ -16,7 +16,7 @@
border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1);
padding: 0.75rem 1rem;
color: var(--fg-color);
color: var(--fg-muted-5);
font-weight: bold;
font-size: 0.875rem;
line-height: 1;
@ -24,6 +24,7 @@
&:hover {
background-color: var(--fg-muted-2);
color: var(--fg-color);
text-decoration: none;
}

23
sass/_comments.scss
View File

@ -94,13 +94,14 @@
border-radius: 999px;
background-color: var(--fg-muted-1);
padding: 0.375rem 0.75rem;
color: var(--fg-color);
color: var(--fg-muted-5);
font-size: 0.875rem;
line-height: 1;
text-decoration: none;
&:hover {
background-color: var(--fg-muted-2);
background-color: var(--fg-muted-5);
color: var(--fg-contrast);
text-decoration: none;
}
@ -109,14 +110,17 @@
}
&.op {
box-shadow: none;
background-color: transparent;
background-color: var(--primary-color-alpha);
padding: 0.375rem 0.75rem 0.375rem 0.5rem;
color: var(--primary-color);
&:hover {
box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha);
background-color: var(--primary-color);
color: var(--contrast-color);
&::before {
background-color: var(--contrast-color);
}
}
&::before {
@ -127,6 +131,7 @@
vertical-align: -0.0625rem;
mask-image: var(--icon);
mask-size: cover;
transition: var(--transition);
margin-inline-end: 0.25rem;
background-color: var(--primary-color);
width: 0.75rem;
@ -145,8 +150,14 @@
all: unset;
display: inline-block;
vertical-align: middle;
transition: var(--transition);
width: 1.5em;
height: 1.5em;
&:hover {
transform: scale(2);
cursor: zoom-in;
}
}
time {

17
sass/_footer.scss
View File

@ -42,11 +42,20 @@
text-align: center;
text-decoration: none;
&.active {
background-color: var(--primary-color-alpha);
color: var(--primary-color);
&:hover {
background-color: var(--primary-color);
color: var(--contrast-color);
}
}
&:hover {
box-shadow: var(--edge-highlight);
background-color: var(--primary-color);
color: var(--contrast-color);
text-decoration: none;
background-color: var(--fg-muted-1);
color: var(--fg-muted-5);
}
&:active {
@ -79,7 +88,7 @@
background-color: var(--fg-muted-1);
.icon {
background-color: var(--primary-color);
background-color: var(--fg-muted-5);
}
}

29
sass/_nav.scss
View File

@ -128,6 +128,14 @@
color: var(--fg-muted-5);
font-weight: 800;
&:hover {
color: var(--fg-color);
.icon {
background-color: var(--fg-color);
}
}
&.active {
color: var(--primary-color);
@ -171,6 +179,11 @@
&:hover {
box-shadow: var(--edge-highlight);
background-color: var(--fg-muted-1);
color: var(--fg-muted-5);
.icon {
background-color: var(--fg-muted-5);
}
}
&:active {
@ -319,6 +332,22 @@
border-radius: 999px;
}
.active {
background-color: var(--primary-color-alpha);
.icon {
background-color: var(--primary-color);
}
&:hover {
background-color: var(--primary-color);
.icon {
background-color: var(--contrast-color);
}
}
}
#theme-system .icon,
.icon {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0C3.594 0 0 3.594 0 8s3.594 8 8 8 8-3.594 8-8-3.594-8-8-8m0 1.941c3.36 0 6.059 2.7 6.059 6.059s-2.7 6.059-6.059 6.059zm0 0'/%3E%3C/svg%3E");

2
sass/_tags.scss
View File

@ -22,7 +22,7 @@
border-radius: 999px;
background-color: var(--fg-muted-1);
padding: 0.375rem 0.75rem;
color: var(--fg-muted-4);
color: var(--fg-muted-5);
font-size: 0.875rem;
text-decoration: none;
white-space: nowrap;