diff --git a/src/components/ColorPicker.svelte b/src/components/ColorPicker.svelte index 3f95412..32531d3 100644 --- a/src/components/ColorPicker.svelte +++ b/src/components/ColorPicker.svelte @@ -259,6 +259,9 @@ let gamut = $derived(whatsTheGamutDamnit($picker_value))
+ -
- - - - + + + + -
- - - + + +
@@ -622,7 +620,7 @@ let user_gradient = $derived(gensyntax[$gradient_type]( display: grid; border-radius: var(--radius-3); box-shadow: var(--shadow-3); - overflow: hidden; + overflow: clip; } @media (prefers-color-scheme: light) { @@ -743,7 +741,7 @@ let user_gradient = $derived(gensyntax[$gradient_type]( display: grid; place-content: center; inline-size: 100cqi; - overflow: hidden; + overflow: clip; position: relative; } @@ -997,6 +995,161 @@ let user_gradient = $derived(gensyntax[$gradient_type]( cursor: not-allowed; } + /* ----------------------------------------------- + * Customizable Select (base-select) Styles + * ----------------------------------------------- */ + @supports (appearance: base-select) { + :global(select) { + appearance: base-select; + } + + /* Style the button that activates the picker */ + :global(select > button) { + all: unset; + display: flex; + align-items: center; + gap: 0.5ch; + cursor: pointer; + white-space: nowrap; + } + + /* Style the selected content display */ + :global(select selectedcontent) { + display: inline; + white-space: nowrap; + } + + /* Hide the picker icon */ + :global(select::picker-icon) { + display: none; + } + + /* Action button selects: fit to parent and hide content so parent icon shows */ + :global(.global-actions > select), + :global(.layer-actions > select), + :global(.stop-actions > select) { + position: absolute; + inset: 0; + inline-size: 100%; + block-size: 100%; + opacity: 0; + } + + /* Selects inside buttons should have no padding */ + :global(button > select) { + padding: 0; + } + + :global(select::picker(select)) { + appearance: base-select; + --_picker-bg-light: #fff; + --_picker-bg-dark: var(--surface-3); + --_picker-bg: var(--_picker-bg-light); + + background: var(--_picker-bg); + border: 1px solid var(--surface-4); + border-radius: var(--radius-2); + box-shadow: var(--shadow-6); + padding: var(--size-1); + margin-block-start: var(--size-1); + + /* Transitions */ + opacity: 0; + transform: translateY(-8px) scale(0.96); + transition: + opacity 150ms var(--ease-3), + transform 150ms var(--ease-3), + overlay 150ms var(--ease-3) allow-discrete, + display 150ms var(--ease-3) allow-discrete; + } + + :global(select:open::picker(select)) { + opacity: 1; + transform: translateY(0) scale(1); + } + + @starting-style { + :global(select:open::picker(select)) { + opacity: 0; + transform: translateY(-8px) scale(0.96); + } + } + + /* Hide disabled options in base-select mode */ + :global(select option[disabled]) { + display: none; + } + + :global(select option) { + display: flex; + align-items: center; + gap: var(--size-3); + padding: var(--size-2) var(--size-2); + border-radius: var(--radius-2); + cursor: pointer; + transition: + background-color 100ms var(--ease-2), + color 100ms var(--ease-2); + } + + /* Style icons inside options */ + :global(select option > svg) { + inline-size: 1.25em; + block-size: 1.25em; + flex-shrink: 0; + } + + :global(select option:not(:last-child)) { + margin-block-end: 1px; + } + + :global(select option:hover) { + background-color: var(--surface-2); + } + + :global(select option:checked), + :global(select option:focus) { + background-color: var(--link); + color: white; + } + + /* Position checkmark on inline-end */ + :global(select option::checkmark) { + order: 2; + margin-inline-start: auto; + padding-inline-start: var(--size-2); + } + + :global(select optgroup) { + padding-block: var(--size-1); + } + + :global(select optgroup:last-of-type) { + padding-block-end: 0; + } + + :global(select optgroup:not(:first-of-type)) { + border-block-start: 1px solid var(--surface-3); + margin-block-start: var(--size-1); + padding-block-start: var(--size-2); + } + + @media (prefers-color-scheme: dark) { + :global(select::picker(select)) { + --_picker-bg: var(--_picker-bg-dark); + border-color: var(--surface-4); + } + + :global(select option:hover) { + background-color: var(--surface-4); + } + + :global(select optgroup:not(:first-of-type)) { + border-block-start-color: var(--surface-4); + } + } + } + :global(.sr-only) { inline-size: 0; block-size: 0; @@ -1062,7 +1215,7 @@ let user_gradient = $derived(gensyntax[$gradient_type]( .global-actions { position: relative; inline-size: var(--size-7); - overflow: hidden; + overflow: clip; border-radius: var(--radius-round); padding-inline: 0; aspect-ratio: 1; @@ -1078,11 +1231,8 @@ let user_gradient = $derived(gensyntax[$gradient_type]( --_bg: transparent; } - .global-actions:not(:active,:focus) select { - opacity: 0; - } - .global-actions > select { position: absolute; + inset: 0; } diff --git a/src/components/GradientColorSpace.svelte b/src/components/GradientColorSpace.svelte index 9e49480..15cebc8 100644 --- a/src/components/GradientColorSpace.svelte +++ b/src/components/GradientColorSpace.svelte @@ -16,7 +16,10 @@ Color Space - $gradient_space = e.currentTarget.value}> + diff --git a/src/components/GradientStops.svelte b/src/components/GradientStops.svelte index cbe8124..a7e716e 100644 --- a/src/components/GradientStops.svelte +++ b/src/components/GradientStops.svelte @@ -330,13 +330,11 @@
beginDrag(e, i)} role="button" aria-label="Drag to reorder" tabindex="0">
@@ -438,6 +436,10 @@ aspect-ratio: 1; border: none; box-shadow: 0 0 0 var(--_highlight-size) var(--_highlight); + background-image: url(https://api.iconify.design/mdi:dots-vertical.svg?color=%23adb5bd); + background-position: center; + background-repeat: no-repeat; + background-size: 75%; } /* Drag handle to initiate reordering */ @@ -477,7 +479,7 @@ --icon-arrow-down: url(https://api.iconify.design/mdi:dots-vertical.svg?color=%23adb5bd); --icon-arrow-up: url(https://api.iconify.design/mdi:dots-vertical.svg?color=%23adb5bd); position: absolute; - inset-inline-end: -1.1ch; + inset: 0; } .chip { diff --git a/src/components/HueInterpolation.svelte b/src/components/HueInterpolation.svelte index 8ca067f..f7a7455 100644 --- a/src/components/HueInterpolation.svelte +++ b/src/components/HueInterpolation.svelte @@ -11,7 +11,10 @@ Hue Path - $gradient_interpolation = e.currentTarget.value}> + diff --git a/src/components/LayersPanel.svelte b/src/components/LayersPanel.svelte index c6a1fe2..f111af3 100644 --- a/src/components/LayersPanel.svelte +++ b/src/components/LayersPanel.svelte @@ -58,14 +58,12 @@
@@ -193,19 +191,23 @@ .layer-actions { position: relative; inline-size: var(--size-5); - overflow: hidden; + overflow: clip; border-radius: var(--radius-round); padding-inline: 0; aspect-ratio: 1; border: none; box-shadow: 0 0 0 var(--_highlight-size) var(--_highlight); + background-image: url(https://api.iconify.design/mdi:dots-vertical.svg?color=%23adb5bd); + background-position: center; + background-repeat: no-repeat; + background-size: 75%; } .layer-actions > select { --icon-arrow-down: url(https://api.iconify.design/mdi:dots-vertical.svg?color=%23adb5bd); --icon-arrow-up: url(https://api.iconify.design/mdi:dots-vertical.svg?color=%23adb5bd); position: absolute; - inset-inline-end: -1.1ch; + inset: 0; } .end-of-layers { diff --git a/src/components/LinearAngle.svelte b/src/components/LinearAngle.svelte index f01257f..ab1428a 100644 --- a/src/components/LinearAngle.svelte +++ b/src/components/LinearAngle.svelte @@ -31,7 +31,10 @@
- $linear_named_angle = e.currentTarget.value}> + {#each linear_directions as dir} diff --git a/src/components/RadialPosition.svelte b/src/components/RadialPosition.svelte index e2995e3..106618d 100644 --- a/src/components/RadialPosition.svelte +++ b/src/components/RadialPosition.svelte @@ -28,7 +28,10 @@
- $radial_named_position = e.currentTarget.value}> + {#each gradient_positions as pos} diff --git a/src/components/RadialSize.svelte b/src/components/RadialSize.svelte index 2c06eee..78a062a 100644 --- a/src/components/RadialSize.svelte +++ b/src/components/RadialSize.svelte @@ -63,7 +63,10 @@
- $radial_size = e.currentTarget.value}> + {#if !optionExists($radial_size)} {/if} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 7cdae76..f34f6fa 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -21,7 +21,7 @@ @media (min-width: 1024px) { :global(html) { - overflow: hidden; + overflow: clip; } }