init

themes/duckquill/content/demo/demo.css

@@ -0,0 +1,43 @@
+#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;
+}
+
+:root[dir*="rtl"] #color-picker-container {
+	transform: translateX(calc(100% - 1rem));
+}
+
+:root[dir*="rtl"] #color-picker-container:hover {
+	transform: none;
+}
+
+#color-picker-container:hover {
+	transform: none;
+}
+
+#color-picker-container > small {
+	display: block;
+	margin-block-end: 0.5rem;
+	font-weight: bold;
+}
+
+#color-picker-container label {
+	margin-inline-end: 0.25rem;
+	color: var(--fg-muted-5);
+}
+
+#color-picker-light,
+#color-picker-dark {
+	margin-inline-end: 0.25rem;
+}