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

Allow setting spoiler style via shortcode, move glass shadow to a CSS variable

Browse Source
This commit is contained in:
daudix
2024-09-16 01:36:47 +03:00
parent 1ea78723a9
commit f570d1dd74
12 changed files with 70 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
sass/_iframe.scss
View File

@ -11,4 +11,14 @@ iframe {
&.vimeo-embed {
aspect-ratio: 16 / 9;
}
&:fullscreen {
box-shadow: none;
border-radius: 0;
}
&:-webkit-full-screen {
box-shadow: none;
border-radius: 0;
}
}

37
sass/_media.scss
View File

@ -72,6 +72,33 @@ video {
border-radius: 0;
background-color: transparent;
}
&.spoiler,
&[src*="#spoiler"] {
opacity: var(--dim-opacity);
clip-path: inset(0% 0% 0% 0% round var(--rounded-corner));
filter: blur(1rem);
&:hover,
&:active {
opacity: 1;
clip-path: inset(-1rem -1rem -1rem -1rem round 0);
filter: none;
}
&.solid,
&[src*="#solid"] {
clip-path: none;
filter: brightness(0%) contrast(50%);
box-shadow: none;
&:hover,
&:active {
filter: none;
}
}
}
}
img {
@ -117,3 +144,13 @@ img {
a img:not(.no-hover, .full-bleed, [src*="#no-hover"], [src*="#full-bleed"]) {
cursor: pointer;
}
video:fullscreen {
box-shadow: none;
border-radius: 0;
}
video:-webkit-full-screen {
box-shadow: none;
border-radius: 0;
}

8
sass/_nav.scss
View File

@ -5,7 +5,7 @@
z-index: 999;
backdrop-filter: var(--blur);
margin: 1rem auto;
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: 1.625rem;
background-color: var(--nav-bg);
max-width: 90%;
@ -29,7 +29,7 @@
transition: var(--transition);
box-shadow:
var(--edge-highlight),
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
var(--shadow-glass);
border-radius: 999px;
background-color: var(--nav-bg);
padding: 0.375rem 0.75rem;
@ -210,7 +210,7 @@
backdrop-filter: var(--blur);
box-shadow:
var(--edge-highlight),
0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
var(--shadow-glass);
border-radius: calc(var(--rounded-corner) + 0.25rem);
background-color: var(--nav-bg);
padding: 0.25rem;
@ -338,7 +338,7 @@
top: calc(100% + 0.5rem);
left: 0;
backdrop-filter: var(--blur);
box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: calc(var(--rounded-corner) + 0.5rem);
background-color: var(--nav-bg);
width: 100%;

2
sass/_post-nav.scss
View File

@ -48,7 +48,7 @@
}
.nav-arrow {
margin-block-end: 1rem;
margin-block-end: 0.5rem;
color: var(--fg-muted-5);
font-weight: normal;
line-height: 1;

26
sass/_spoiler.scss
View File

@ -20,29 +20,3 @@ span.spoiler {
}
}
}
img.spoiler,
img[src*="#spoiler"] {
opacity: var(--dim-opacity);
clip-path: inset(0% 0% 0% 0% round var(--rounded-corner));
filter: blur(1rem);
&:hover,
&:active {
opacity: 1;
clip-path: inset(-1rem -1rem -1rem -1rem round 0);
filter: none;
}
&.solid,
&[src*="#solid"] {
clip-path: none;
filter: brightness(0%) contrast(50%);
box-shadow: none;
&:hover,
&:active {
filter: none;
}
}
}

1
sass/_variables.scss
View File

@ -116,6 +116,7 @@
// SHADOWS
--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
--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);
--shadow-glass: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
--shadow: 0 0 0 0.0625rem rgb(0 0 0 / 0.03), 0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 0.07), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.03);
// STATES