165 lines
2.9 KiB
SCSS
165 lines
2.9 KiB
SCSS
img,
|
|
video {
|
|
display: block;
|
|
margin: 1rem auto;
|
|
box-shadow: var(--edge-highlight), var(--shadow);
|
|
border-radius: var(--rounded-corner);
|
|
background-color: var(--bg-muted-1);
|
|
max-width: 100%;
|
|
max-height: calc(100vh - 2rem);
|
|
|
|
&.full,
|
|
&[src*="#full"] {
|
|
width: 100%;
|
|
}
|
|
|
|
&.start,
|
|
&.end,
|
|
&[src*="#start"],
|
|
&[src*="#end"] {
|
|
width: calc(var(--content-width) / 3);
|
|
}
|
|
|
|
&.start,
|
|
&[src*="#start"] {
|
|
float: inline-start;
|
|
transform-origin: left;
|
|
margin-inline-end: 1rem;
|
|
|
|
:root[dir*="rtl"] & {
|
|
transform-origin: right;
|
|
}
|
|
}
|
|
|
|
&.end,
|
|
&[src*="#end"] {
|
|
float: inline-end;
|
|
transform-origin: right;
|
|
margin-inline-start: 1rem;
|
|
|
|
:root[dir*="rtl"] & {
|
|
transform-origin: left;
|
|
}
|
|
}
|
|
|
|
&.pixels,
|
|
&[src*="#pixels"] {
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
&.has-alpha,
|
|
&[src*="#has-alpha"] {
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
&.drop-shadow,
|
|
&[src*="#drop-shadow"] {
|
|
filter: var(--drop-shadow);
|
|
}
|
|
|
|
&.spoiler,
|
|
&[src*="#spoiler"] {
|
|
opacity: var(--dim-opacity);
|
|
clip-path: inset(0 0 0 0 round var(--rounded-corner));
|
|
filter: blur(1.5rem);
|
|
|
|
&:hover,
|
|
&:active {
|
|
opacity: 1;
|
|
clip-path: inset(
|
|
-0.75rem -0.75rem -0.75rem -0.75rem round var(--rounded-corner-small)
|
|
);
|
|
filter: none;
|
|
}
|
|
|
|
&.solid,
|
|
&[src*="#solid"] {
|
|
clip-path: none;
|
|
filter: brightness(0) contrast(0.5);
|
|
box-shadow: none;
|
|
|
|
&:hover,
|
|
&:active {
|
|
filter: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 720px) {
|
|
&.start,
|
|
&.end,
|
|
&[src*="#start"],
|
|
&[src*="#end"] {
|
|
float: none;
|
|
margin-inline-start: auto;
|
|
margin-inline-end: auto;
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
img {
|
|
transition:
|
|
box-shadow var(--transition),
|
|
border-radius var(--transition),
|
|
transform var(--transition-bezier);
|
|
|
|
&:not(.no-hover, [src*="#no-hover"], .emoji) {
|
|
cursor: zoom-in;
|
|
|
|
&:hover {
|
|
position: relative;
|
|
transform: var(--hover);
|
|
z-index: 1;
|
|
box-shadow: var(--edge-highlight), var(--shadow-raised);
|
|
border-radius: var(--rounded-corner-small);
|
|
}
|
|
|
|
&.start,
|
|
&.end,
|
|
&[src*="#start"],
|
|
&[src*="#end"] {
|
|
transition: transform var(--transition-bezier-longer);
|
|
|
|
&:hover {
|
|
transform: scale(2);
|
|
}
|
|
|
|
@media only screen and (max-width: 720px) {
|
|
transform-origin: center;
|
|
transition: transform var(--transition-bezier);
|
|
|
|
&:hover {
|
|
transform: var(--hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.has-alpha,
|
|
&[src*="#has-alpha"] {
|
|
&:hover {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
a img:not(.no-hover, [src*="#no-hover"]) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
video:fullscreen {
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
video:-webkit-full-screen {
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
picture {
|
|
display: inline-block;
|
|
}
|