91 lines
2.5 KiB
CSS
91 lines
2.5 KiB
CSS
.visual-display {
|
|
--visual-display__size: min(2.4rem, 100%);
|
|
position: relative;
|
|
width: var(--visual-display__size);
|
|
max-width: 100%;
|
|
border: 0.1rem solid rgba(var(--color-foreground), 0.2);
|
|
aspect-ratio: 1/1;
|
|
}
|
|
|
|
.visual-display.empty {
|
|
border-style: dashed;
|
|
}
|
|
|
|
.visual-display--presentation-swatch {
|
|
--visual-display__size: min(2.4rem, 100%);
|
|
|
|
border-radius: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.visual-display-parent .visual-display--presentation-swatch {
|
|
outline-offset: 0.2rem;
|
|
}
|
|
|
|
/* Hover, active, and focus states */
|
|
:is(
|
|
.visual-display-parent:hover .visual-display--presentation-swatch,
|
|
.visual-display-parent.active .visual-display--presentation-swatch,
|
|
.visual-display-parent:has(:focus-visible) .visual-display--presentation-swatch
|
|
) {
|
|
outline-style: solid;
|
|
}
|
|
|
|
/* Active state */
|
|
.visual-display-parent.active .visual-display--presentation-swatch {
|
|
outline-width: 0.2rem;
|
|
outline-color: rgb(var(--color-foreground), 1);
|
|
}
|
|
|
|
/* Hover state */
|
|
.visual-display-parent:hover .visual-display--presentation-swatch {
|
|
outline-width: 0.2rem;
|
|
outline-color: rgb(var(--color-foreground), 0.4);
|
|
}
|
|
|
|
/* Focus state */
|
|
.visual-display-parent:has(:focus-visible) .visual-display--presentation-swatch {
|
|
outline-width: 0.2rem;
|
|
outline-color: rgb(var(--color-foreground), 0.4);
|
|
box-shadow: 0 0 0 0.6rem rgb(var(--color-background)), 0 0 0 0.8rem rgba(var(--color-foreground), 0.5),
|
|
0 0 1.2rem 0.4rem rgba(var(--color-foreground), 0.3);
|
|
}
|
|
|
|
/* Focus state for older browsers */
|
|
@supports not selector(:has(a, b)) {
|
|
.visual-display-parent:focus-within .visual-display--presentation-swatch {
|
|
outline-offset: 0.2rem;
|
|
outline: 0.2rem solid rgb(var(--color-foreground), 0.4);
|
|
box-shadow: 0 0 0 0.6rem rgb(var(--color-background)), 0 0 0 0.8rem rgba(var(--color-foreground), 0.5),
|
|
0 0 1.2rem 0.4rem rgba(var(--color-foreground), 0.3);
|
|
}
|
|
}
|
|
|
|
.visual-display-parent.disabled {
|
|
opacity: 0.4;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Used to display the disabled dash */
|
|
.visual-display-parent.disabled .visual-display::after {
|
|
display: block;
|
|
content: '';
|
|
|
|
/* 1.414 is not a magic number, it's the square root of 2, or the length of the diagonal */
|
|
width: calc(var(--visual-display__size) * 1.414);
|
|
border-bottom: 0.1rem solid rgb(var(--color-background-contrast));
|
|
transform: rotate(-45deg);
|
|
transform-origin: left;
|
|
}
|
|
|
|
.visual-display .visual-display__child {
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
forced-color-adjust: none;
|
|
}
|
|
|
|
.visual-display--presentation-swatch .visual-display__image {
|
|
object-fit: cover;
|
|
}
|