Files
blog/content/demo/demo.css

41 lines
904 B
CSS

#color-picker-container {
-webkit-backdrop-filter: var(--blur);
position: fixed;
transform: translateX(calc(-100% + 1rem));
z-index: 1;
backdrop-filter: var(--blur);
transition: var(--transition);
inset-block-end: 1rem;
inset-inline-start: 0;
box-shadow: var(--edge-highlight), var(--shadow-glass);
border-start-end-radius: var(--rounded-corner);
border-end-end-radius: var(--rounded-corner);
background-color: var(--glass-bg);
padding: 0.5rem;
}
#color-picker-container:hover {
transform: none;
}
#color-picker-container label {
margin-inline-end: 0.25rem;
color: var(--fg-muted-4);
font-weight: bold;
}
:root[dir*="rtl"] #color-picker-container {
transform: translateX(calc(100% - 1rem));
}
:root[dir*="rtl"] #color-picker-container:hover {
transform: none;
}
#color-picker-light,
#color-picker-dark,
#contrast-color-light,
#contrast-color-dark {
margin-inline-end: 0.25rem;
}