@skewedaspect/sleekspace-ui 0.5.1 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Card/SkCard.vue.d.ts +13 -1
- package/dist/components/ColorPicker/SkColorPicker.vue.d.ts +29 -0
- package/dist/components/ColorPicker/index.d.ts +2 -0
- package/dist/components/ColorPicker/types.d.ts +4 -0
- package/dist/components/ContextMenu/SkContextMenu.vue.d.ts +25 -0
- package/dist/components/ContextMenu/SkContextMenuCheckboxItem.vue.d.ts +28 -0
- package/dist/components/ContextMenu/SkContextMenuItem.vue.d.ts +26 -0
- package/dist/components/ContextMenu/SkContextMenuLabel.vue.d.ts +17 -0
- package/dist/components/ContextMenu/SkContextMenuRadioGroup.vue.d.ts +26 -0
- package/dist/components/ContextMenu/SkContextMenuRadioItem.vue.d.ts +23 -0
- package/dist/components/ContextMenu/SkContextMenuSeparator.vue.d.ts +2 -0
- package/dist/components/ContextMenu/SkContextMenuSubmenu.vue.d.ts +24 -0
- package/dist/components/ContextMenu/index.d.ts +9 -0
- package/dist/components/ContextMenu/types.d.ts +2 -0
- package/dist/components/Dropdown/SkDropdown.vue.d.ts +1 -1
- package/dist/components/Dropdown/SkDropdownCheckboxItem.vue.d.ts +28 -0
- package/dist/components/Dropdown/SkDropdownMenuLabel.vue.d.ts +17 -0
- package/dist/components/Dropdown/SkDropdownRadioGroup.vue.d.ts +26 -0
- package/dist/components/Dropdown/SkDropdownRadioItem.vue.d.ts +23 -0
- package/dist/components/Dropdown/index.d.ts +4 -0
- package/dist/components/Panel/SkPanel.vue.d.ts +15 -1
- package/dist/components/Panel/types.d.ts +1 -0
- package/dist/components/Popover/SkPopover.vue.d.ts +1 -1
- package/dist/components/ScrollArea/SkScrollArea.vue.d.ts +31 -0
- package/dist/components/ScrollArea/index.d.ts +2 -0
- package/dist/components/ScrollArea/types.d.ts +4 -0
- package/dist/components/Select/SkSelect.vue.d.ts +61 -0
- package/dist/components/Select/SkSelectItem.vue.d.ts +134 -0
- package/dist/components/Select/SkSelectSeparator.vue.d.ts +2 -0
- package/dist/components/Select/index.d.ts +4 -0
- package/dist/components/Select/types.d.ts +3 -0
- package/dist/components/Sidebar/SkSidebar.vue.d.ts +8 -1
- package/dist/components/Sidebar/types.d.ts +1 -0
- package/dist/components/Skeleton/SkSkeleton.vue.d.ts +2 -2
- package/dist/components/Splitter/SkSplitter.vue.d.ts +29 -0
- package/dist/components/Splitter/SkSplitterHandle.vue.d.ts +7 -0
- package/dist/components/Splitter/SkSplitterPanel.vue.d.ts +30 -0
- package/dist/components/Splitter/index.d.ts +4 -0
- package/dist/components/Splitter/types.d.ts +3 -0
- package/dist/components/Toolbar/SkToolbar.vue.d.ts +31 -0
- package/dist/components/Toolbar/SkToolbarButton.vue.d.ts +22 -0
- package/dist/components/Toolbar/SkToolbarSeparator.vue.d.ts +2 -0
- package/dist/components/Toolbar/SkToolbarToggleGroup.vue.d.ts +31 -0
- package/dist/components/Toolbar/SkToolbarToggleItem.vue.d.ts +23 -0
- package/dist/components/Toolbar/index.d.ts +6 -0
- package/dist/components/Toolbar/types.d.ts +5 -0
- package/dist/components/Tooltip/SkTooltip.vue.d.ts +1 -1
- package/dist/components/TreeView/SkTreeItem.vue.d.ts +39 -0
- package/dist/components/TreeView/SkTreeView.vue.d.ts +31 -0
- package/dist/components/TreeView/index.d.ts +3 -0
- package/dist/components/TreeView/types.d.ts +3 -0
- package/dist/index.d.ts +61 -0
- package/dist/sleekspace-ui.css +1644 -65
- package/dist/sleekspace-ui.es.js +17444 -6063
- package/dist/sleekspace-ui.umd.js +17426 -6045
- package/package.json +2 -1
- package/src/components/Card/SkCard.vue +17 -1
- package/src/components/ColorPicker/SkColorPicker.vue +355 -0
- package/src/components/ColorPicker/index.ts +6 -0
- package/src/components/ColorPicker/types.ts +11 -0
- package/src/components/ContextMenu/SkContextMenu.vue +83 -0
- package/src/components/ContextMenu/SkContextMenuCheckboxItem.vue +72 -0
- package/src/components/ContextMenu/SkContextMenuItem.vue +49 -0
- package/src/components/ContextMenu/SkContextMenuLabel.vue +17 -0
- package/src/components/ContextMenu/SkContextMenuRadioGroup.vue +36 -0
- package/src/components/ContextMenu/SkContextMenuRadioItem.vue +53 -0
- package/src/components/ContextMenu/SkContextMenuSeparator.vue +21 -0
- package/src/components/ContextMenu/SkContextMenuSubmenu.vue +94 -0
- package/src/components/ContextMenu/index.ts +15 -0
- package/src/components/ContextMenu/types.ts +9 -0
- package/src/components/Dropdown/SkDropdown.vue +1 -1
- package/src/components/Dropdown/SkDropdownCheckboxItem.vue +72 -0
- package/src/components/Dropdown/SkDropdownMenuItem.vue +1 -1
- package/src/components/Dropdown/SkDropdownMenuLabel.vue +17 -0
- package/src/components/Dropdown/SkDropdownRadioGroup.vue +36 -0
- package/src/components/Dropdown/SkDropdownRadioItem.vue +53 -0
- package/src/components/Dropdown/SkDropdownSubmenu.vue +2 -2
- package/src/components/Dropdown/index.ts +4 -0
- package/src/components/Panel/SkPanel.vue +29 -4
- package/src/components/Panel/types.ts +3 -0
- package/src/components/ScrollArea/SkScrollArea.vue +87 -0
- package/src/components/ScrollArea/index.ts +8 -0
- package/src/components/ScrollArea/types.ts +11 -0
- package/src/components/Select/SkSelect.vue +210 -0
- package/src/components/Select/SkSelectItem.vue +112 -0
- package/src/components/Select/SkSelectSeparator.vue +40 -0
- package/src/components/Select/index.ts +10 -0
- package/src/components/Select/types.ts +10 -0
- package/src/components/Sidebar/SkSidebar.vue +39 -2
- package/src/components/Sidebar/types.ts +2 -0
- package/src/components/Splitter/SkSplitter.vue +65 -0
- package/src/components/Splitter/SkSplitterHandle.vue +40 -0
- package/src/components/Splitter/SkSplitterPanel.vue +45 -0
- package/src/components/Splitter/index.ts +10 -0
- package/src/components/Splitter/types.ts +10 -0
- package/src/components/Toolbar/SkToolbar.vue +69 -0
- package/src/components/Toolbar/SkToolbarButton.vue +36 -0
- package/src/components/Toolbar/SkToolbarSeparator.vue +15 -0
- package/src/components/Toolbar/SkToolbarToggleGroup.vue +49 -0
- package/src/components/Toolbar/SkToolbarToggleItem.vue +37 -0
- package/src/components/Toolbar/index.ts +12 -0
- package/src/components/Toolbar/types.ts +12 -0
- package/src/components/TreeView/SkTreeItem.vue +84 -0
- package/src/components/TreeView/SkTreeView.vue +120 -0
- package/src/components/TreeView/index.ts +9 -0
- package/src/components/TreeView/types.ts +10 -0
- package/src/global.d.ts +22 -0
- package/src/index.ts +110 -0
- package/src/styles/components/_card.scss +45 -9
- package/src/styles/components/_color-picker.scss +552 -0
- package/src/styles/components/_index.scss +6 -0
- package/src/styles/components/_listbox.scss +1 -0
- package/src/styles/components/_menu.scss +52 -3
- package/src/styles/components/_panel.scss +119 -13
- package/src/styles/components/_scroll-area.scss +120 -0
- package/src/styles/components/_select.scss +439 -0
- package/src/styles/components/_sidebar.scss +83 -4
- package/src/styles/components/_splitter.scss +136 -0
- package/src/styles/components/_toolbar.scss +296 -0
- package/src/styles/components/_tree-view.scss +187 -0
- package/web-types.json +1244 -197
package/dist/sleekspace-ui.css
CHANGED
|
@@ -4162,10 +4162,24 @@
|
|
|
4162
4162
|
padding: 0;
|
|
4163
4163
|
}
|
|
4164
4164
|
.sk-panel.sk-card .sk-card-header {
|
|
4165
|
+
--sk-card-header-cut-tl: calc(var(--sk-panel-cut-tl) - 2px);
|
|
4166
|
+
--sk-card-header-cut-tr: calc(var(--sk-panel-cut-tr) - 2px);
|
|
4165
4167
|
padding: var(--sk-card-header-padding-vertical) var(--sk-card-padding);
|
|
4166
4168
|
background-color: oklch(from currentColor l c h/0.2);
|
|
4167
4169
|
margin: 2px;
|
|
4168
4170
|
}
|
|
4171
|
+
@supports (corner-shape: bevel) {
|
|
4172
|
+
.sk-panel.sk-card .sk-card-header {
|
|
4173
|
+
border-top-left-radius: max(0px, var(--sk-card-header-cut-tl));
|
|
4174
|
+
border-top-right-radius: max(0px, var(--sk-card-header-cut-tr));
|
|
4175
|
+
corner-shape: bevel;
|
|
4176
|
+
}
|
|
4177
|
+
}
|
|
4178
|
+
@supports not (corner-shape: bevel) {
|
|
4179
|
+
.sk-panel.sk-card .sk-card-header {
|
|
4180
|
+
clip-path: polygon(max(0px, var(--sk-card-header-cut-tl)) 0, calc(100% - max(0px, var(--sk-card-header-cut-tr))) 0, 100% max(0px, var(--sk-card-header-cut-tr)), 100% 100%, 0 100%, 0 max(0px, var(--sk-card-header-cut-tl)));
|
|
4181
|
+
}
|
|
4182
|
+
}
|
|
4169
4183
|
.sk-panel.sk-card .sk-card-title {
|
|
4170
4184
|
margin: 0;
|
|
4171
4185
|
font-size: 1.25rem;
|
|
@@ -4194,29 +4208,14 @@
|
|
|
4194
4208
|
}
|
|
4195
4209
|
@supports (corner-shape: bevel) {
|
|
4196
4210
|
.sk-panel.sk-card .sk-card-footer {
|
|
4197
|
-
border:
|
|
4198
|
-
border-
|
|
4199
|
-
border-top-right-radius: 0;
|
|
4200
|
-
border-bottom-right-radius: var(--sk-panel-cut-size);
|
|
4201
|
-
border-bottom-left-radius: 0;
|
|
4211
|
+
border-bottom-right-radius: var(--sk-panel-cut-br);
|
|
4212
|
+
border-bottom-left-radius: var(--sk-panel-cut-bl);
|
|
4202
4213
|
corner-shape: bevel;
|
|
4203
4214
|
}
|
|
4204
4215
|
}
|
|
4205
4216
|
@supports not (corner-shape: bevel) {
|
|
4206
4217
|
.sk-panel.sk-card .sk-card-footer {
|
|
4207
|
-
|
|
4208
|
-
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--sk-panel-cut-size)), calc(100% - var(--sk-panel-cut-size)) 100%, 0% 100%);
|
|
4209
|
-
}
|
|
4210
|
-
.sk-panel.sk-card .sk-card-footer::before {
|
|
4211
|
-
content: "";
|
|
4212
|
-
position: absolute;
|
|
4213
|
-
top: 0;
|
|
4214
|
-
left: 0;
|
|
4215
|
-
right: 0;
|
|
4216
|
-
bottom: 0;
|
|
4217
|
-
background-color: tranparent;
|
|
4218
|
-
z-index: -1;
|
|
4219
|
-
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--sk-panel-cut-size)), calc(100% - var(--sk-panel-cut-size)) 100%, 0% 100%, 0% 0%, 0 0, 0 calc(100% - 0), calc(100% - var(--sk-panel-cut-size) - 0) calc(100% - 0), calc(100% - 0) calc(100% - var(--sk-panel-cut-size) - 0), calc(100% - 0) 0, 0 0);
|
|
4218
|
+
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sk-panel-cut-br)), calc(100% - var(--sk-panel-cut-br)) 100%, var(--sk-panel-cut-bl) 100%, 0 calc(100% - var(--sk-panel-cut-bl)));
|
|
4220
4219
|
}
|
|
4221
4220
|
}
|
|
4222
4221
|
.sk-panel.sk-card .sk-card-footer {
|
|
@@ -4512,6 +4511,509 @@
|
|
|
4512
4511
|
opacity: 0;
|
|
4513
4512
|
}
|
|
4514
4513
|
}
|
|
4514
|
+
.sk-color-picker {
|
|
4515
|
+
--sk-color-picker-color-base: var(--sk-neutral-base);
|
|
4516
|
+
--sk-color-picker-fg: var(--sk-neutral-text);
|
|
4517
|
+
position: relative;
|
|
4518
|
+
display: inline-flex;
|
|
4519
|
+
width: 100%;
|
|
4520
|
+
}
|
|
4521
|
+
.sk-color-picker.sk-sm {
|
|
4522
|
+
--sk-color-picker-cut: 0.4rem;
|
|
4523
|
+
}
|
|
4524
|
+
.sk-color-picker.sk-md {
|
|
4525
|
+
--sk-color-picker-cut: 0.5rem;
|
|
4526
|
+
}
|
|
4527
|
+
.sk-color-picker.sk-lg {
|
|
4528
|
+
--sk-color-picker-cut: 0.6rem;
|
|
4529
|
+
}
|
|
4530
|
+
.sk-color-picker.sk-xl {
|
|
4531
|
+
--sk-color-picker-cut: 0.7rem;
|
|
4532
|
+
}
|
|
4533
|
+
.sk-color-picker.sk-neutral {
|
|
4534
|
+
--sk-color-picker-color-base: var(--sk-neutral-base);
|
|
4535
|
+
--sk-color-picker-fg: var(--sk-neutral-text);
|
|
4536
|
+
}
|
|
4537
|
+
.sk-color-picker.sk-primary {
|
|
4538
|
+
--sk-color-picker-color-base: var(--sk-primary-base);
|
|
4539
|
+
--sk-color-picker-fg: var(--sk-primary-text);
|
|
4540
|
+
}
|
|
4541
|
+
.sk-color-picker.sk-accent {
|
|
4542
|
+
--sk-color-picker-color-base: var(--sk-accent-base);
|
|
4543
|
+
--sk-color-picker-fg: var(--sk-accent-text);
|
|
4544
|
+
}
|
|
4545
|
+
.sk-color-picker.sk-info {
|
|
4546
|
+
--sk-color-picker-color-base: var(--sk-info-base);
|
|
4547
|
+
--sk-color-picker-fg: var(--sk-info-text);
|
|
4548
|
+
}
|
|
4549
|
+
.sk-color-picker.sk-success {
|
|
4550
|
+
--sk-color-picker-color-base: var(--sk-success-base);
|
|
4551
|
+
--sk-color-picker-fg: var(--sk-success-text);
|
|
4552
|
+
}
|
|
4553
|
+
.sk-color-picker.sk-warning {
|
|
4554
|
+
--sk-color-picker-color-base: var(--sk-warning-base);
|
|
4555
|
+
--sk-color-picker-fg: var(--sk-warning-text);
|
|
4556
|
+
}
|
|
4557
|
+
.sk-color-picker.sk-danger {
|
|
4558
|
+
--sk-color-picker-color-base: var(--sk-danger-base);
|
|
4559
|
+
--sk-color-picker-fg: var(--sk-danger-text);
|
|
4560
|
+
}
|
|
4561
|
+
.sk-color-picker.sk-neon-blue {
|
|
4562
|
+
--sk-color-picker-color-base: var(--sk-neon-blue-base);
|
|
4563
|
+
--sk-color-picker-fg: var(--sk-neon-blue-text);
|
|
4564
|
+
}
|
|
4565
|
+
.sk-color-picker.sk-neon-purple {
|
|
4566
|
+
--sk-color-picker-color-base: var(--sk-neon-purple-base);
|
|
4567
|
+
--sk-color-picker-fg: var(--sk-neon-purple-text);
|
|
4568
|
+
}
|
|
4569
|
+
.sk-color-picker.sk-neon-orange {
|
|
4570
|
+
--sk-color-picker-color-base: var(--sk-neon-orange-base);
|
|
4571
|
+
--sk-color-picker-fg: var(--sk-neon-orange-text);
|
|
4572
|
+
}
|
|
4573
|
+
.sk-color-picker.sk-neon-green {
|
|
4574
|
+
--sk-color-picker-color-base: var(--sk-neon-green-base);
|
|
4575
|
+
--sk-color-picker-fg: var(--sk-neon-green-text);
|
|
4576
|
+
}
|
|
4577
|
+
.sk-color-picker.sk-neon-mint {
|
|
4578
|
+
--sk-color-picker-color-base: var(--sk-neon-mint-base);
|
|
4579
|
+
--sk-color-picker-fg: var(--sk-neon-mint-text);
|
|
4580
|
+
}
|
|
4581
|
+
.sk-color-picker.sk-neon-pink {
|
|
4582
|
+
--sk-color-picker-color-base: var(--sk-neon-pink-base);
|
|
4583
|
+
--sk-color-picker-fg: var(--sk-neon-pink-text);
|
|
4584
|
+
}
|
|
4585
|
+
.sk-color-picker.sk-yellow {
|
|
4586
|
+
--sk-color-picker-color-base: var(--sk-yellow-base);
|
|
4587
|
+
--sk-color-picker-fg: var(--sk-yellow-text);
|
|
4588
|
+
}
|
|
4589
|
+
.sk-color-picker.sk-red {
|
|
4590
|
+
--sk-color-picker-color-base: var(--sk-red-base);
|
|
4591
|
+
--sk-color-picker-fg: var(--sk-red-text);
|
|
4592
|
+
}
|
|
4593
|
+
.sk-color-picker-anchor {
|
|
4594
|
+
display: flex;
|
|
4595
|
+
align-items: center;
|
|
4596
|
+
width: 100%;
|
|
4597
|
+
position: relative;
|
|
4598
|
+
gap: var(--sk-space-xs);
|
|
4599
|
+
}
|
|
4600
|
+
@supports (corner-shape: bevel) {
|
|
4601
|
+
.sk-color-picker-anchor {
|
|
4602
|
+
border: var(--sk-border-width-thin) solid var(--sk-color-picker-color-base);
|
|
4603
|
+
border-top-left-radius: 0;
|
|
4604
|
+
border-top-right-radius: var(--sk-color-picker-cut);
|
|
4605
|
+
border-bottom-right-radius: 0;
|
|
4606
|
+
border-bottom-left-radius: 0;
|
|
4607
|
+
corner-shape: bevel;
|
|
4608
|
+
}
|
|
4609
|
+
}
|
|
4610
|
+
@supports not (corner-shape: bevel) {
|
|
4611
|
+
.sk-color-picker-anchor {
|
|
4612
|
+
border: none;
|
|
4613
|
+
clip-path: polygon(0% 0%, calc(100% - var(--sk-color-picker-cut)) 0%, 100% var(--sk-color-picker-cut), 100% 100%, 0% 100%);
|
|
4614
|
+
}
|
|
4615
|
+
.sk-color-picker-anchor::before {
|
|
4616
|
+
content: "";
|
|
4617
|
+
position: absolute;
|
|
4618
|
+
top: 0;
|
|
4619
|
+
left: 0;
|
|
4620
|
+
right: 0;
|
|
4621
|
+
bottom: 0;
|
|
4622
|
+
background-color: var(--sk-color-picker-color-base);
|
|
4623
|
+
z-index: -1;
|
|
4624
|
+
clip-path: polygon(0% 0%, calc(100% - var(--sk-color-picker-cut)) 0%, 100% var(--sk-color-picker-cut), 100% 100%, 0% 100%, 0% 0%, var(--sk-border-width-thin) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(var(--sk-color-picker-cut) + var(--sk-border-width-thin)), calc(100% - var(--sk-color-picker-cut) - var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) var(--sk-border-width-thin));
|
|
4625
|
+
}
|
|
4626
|
+
}
|
|
4627
|
+
.sk-color-picker-anchor {
|
|
4628
|
+
background: color-mix(in oklch, color-mix(in oklch, var(--sk-color-picker-color-base) 75%, transparent 25%), #000 65%);
|
|
4629
|
+
cursor: pointer;
|
|
4630
|
+
transition-property: background, border-color;
|
|
4631
|
+
transition-duration: var(--sk-transition-duration-base);
|
|
4632
|
+
}
|
|
4633
|
+
.sk-color-picker-anchor:focus-within {
|
|
4634
|
+
border-color: color-mix(in oklch, var(--sk-color-picker-color-base), white 35%);
|
|
4635
|
+
background: color-mix(in oklch, color-mix(in oklch, var(--sk-color-picker-color-base) 75%, transparent 25%), #000 25%);
|
|
4636
|
+
}
|
|
4637
|
+
.sk-color-picker:not(.sk-disabled) .sk-color-picker-anchor:hover {
|
|
4638
|
+
border-color: color-mix(in oklch, var(--sk-color-picker-color-base), white 20%);
|
|
4639
|
+
}
|
|
4640
|
+
.sk-color-picker.sk-disabled .sk-color-picker-anchor {
|
|
4641
|
+
opacity: 0.5;
|
|
4642
|
+
cursor: not-allowed;
|
|
4643
|
+
pointer-events: none;
|
|
4644
|
+
}
|
|
4645
|
+
.sk-color-picker-swatch {
|
|
4646
|
+
flex-shrink: 0;
|
|
4647
|
+
}
|
|
4648
|
+
@supports (corner-shape: bevel) {
|
|
4649
|
+
.sk-color-picker-swatch {
|
|
4650
|
+
border: var(--sk-border-width-thin) solid color-mix(in oklch, var(--sk-color-picker-color-base), white 30%);
|
|
4651
|
+
border-top-left-radius: 0;
|
|
4652
|
+
border-top-right-radius: 0.375rem;
|
|
4653
|
+
border-bottom-right-radius: 0;
|
|
4654
|
+
border-bottom-left-radius: 0;
|
|
4655
|
+
corner-shape: bevel;
|
|
4656
|
+
}
|
|
4657
|
+
}
|
|
4658
|
+
@supports not (corner-shape: bevel) {
|
|
4659
|
+
.sk-color-picker-swatch {
|
|
4660
|
+
border: none;
|
|
4661
|
+
clip-path: polygon(0% 0%, calc(100% - 0.375rem) 0%, 100% 0.375rem, 100% 100%, 0% 100%);
|
|
4662
|
+
}
|
|
4663
|
+
.sk-color-picker-swatch::before {
|
|
4664
|
+
content: "";
|
|
4665
|
+
position: absolute;
|
|
4666
|
+
top: 0;
|
|
4667
|
+
left: 0;
|
|
4668
|
+
right: 0;
|
|
4669
|
+
bottom: 0;
|
|
4670
|
+
background-color: color-mix(in oklch, var(--sk-color-picker-color-base), white 30%);
|
|
4671
|
+
z-index: -1;
|
|
4672
|
+
clip-path: polygon(0% 0%, calc(100% - 0.375rem) 0%, 100% 0.375rem, 100% 100%, 0% 100%, 0% 0%, var(--sk-border-width-thin) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(0.375rem + var(--sk-border-width-thin)), calc(100% - 0.375rem - var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) var(--sk-border-width-thin));
|
|
4673
|
+
}
|
|
4674
|
+
}
|
|
4675
|
+
.sk-color-picker.sk-sm .sk-color-picker-swatch {
|
|
4676
|
+
width: 1.25rem;
|
|
4677
|
+
height: 1.25rem;
|
|
4678
|
+
margin-left: var(--sk-space-sm);
|
|
4679
|
+
}
|
|
4680
|
+
.sk-color-picker.sk-md .sk-color-picker-swatch {
|
|
4681
|
+
width: 1.5rem;
|
|
4682
|
+
height: 1.5rem;
|
|
4683
|
+
margin-left: var(--sk-space-md);
|
|
4684
|
+
}
|
|
4685
|
+
.sk-color-picker.sk-lg .sk-color-picker-swatch {
|
|
4686
|
+
width: 1.75rem;
|
|
4687
|
+
height: 1.75rem;
|
|
4688
|
+
margin-left: var(--sk-space-md);
|
|
4689
|
+
}
|
|
4690
|
+
.sk-color-picker.sk-xl .sk-color-picker-swatch {
|
|
4691
|
+
width: 2rem;
|
|
4692
|
+
height: 2rem;
|
|
4693
|
+
margin-left: var(--sk-space-md);
|
|
4694
|
+
}
|
|
4695
|
+
.sk-color-picker-input {
|
|
4696
|
+
flex: 1;
|
|
4697
|
+
min-width: 0;
|
|
4698
|
+
background: transparent;
|
|
4699
|
+
border: none;
|
|
4700
|
+
color: var(--sk-color-picker-fg);
|
|
4701
|
+
font-family: var(--sk-font-family-mono, var(--sk-font-family-base));
|
|
4702
|
+
outline: none;
|
|
4703
|
+
display: flex;
|
|
4704
|
+
align-items: center;
|
|
4705
|
+
overflow: hidden;
|
|
4706
|
+
text-overflow: ellipsis;
|
|
4707
|
+
white-space: nowrap;
|
|
4708
|
+
}
|
|
4709
|
+
.sk-color-picker.sk-sm .sk-color-picker-input {
|
|
4710
|
+
height: 2rem;
|
|
4711
|
+
padding: 0 var(--sk-space-xs);
|
|
4712
|
+
font-size: 0.8125rem;
|
|
4713
|
+
}
|
|
4714
|
+
.sk-color-picker.sk-md .sk-color-picker-input {
|
|
4715
|
+
height: 2.5rem;
|
|
4716
|
+
padding: 0 var(--sk-space-sm);
|
|
4717
|
+
font-size: 0.875rem;
|
|
4718
|
+
}
|
|
4719
|
+
.sk-color-picker.sk-lg .sk-color-picker-input {
|
|
4720
|
+
height: 3rem;
|
|
4721
|
+
padding: 0 var(--sk-space-sm);
|
|
4722
|
+
font-size: 1rem;
|
|
4723
|
+
}
|
|
4724
|
+
.sk-color-picker.sk-xl .sk-color-picker-input {
|
|
4725
|
+
height: 3.5rem;
|
|
4726
|
+
padding: 0 var(--sk-space-sm);
|
|
4727
|
+
font-size: 1.125rem;
|
|
4728
|
+
}
|
|
4729
|
+
.sk-color-picker-trigger {
|
|
4730
|
+
display: flex;
|
|
4731
|
+
align-items: center;
|
|
4732
|
+
justify-content: center;
|
|
4733
|
+
padding: 0 var(--sk-space-sm);
|
|
4734
|
+
color: var(--sk-color-picker-fg);
|
|
4735
|
+
cursor: pointer;
|
|
4736
|
+
flex-shrink: 0;
|
|
4737
|
+
background: none;
|
|
4738
|
+
border: none;
|
|
4739
|
+
}
|
|
4740
|
+
.sk-color-picker-trigger:hover:not(:disabled) {
|
|
4741
|
+
opacity: 0.8;
|
|
4742
|
+
}
|
|
4743
|
+
.sk-color-picker-trigger:disabled {
|
|
4744
|
+
cursor: not-allowed;
|
|
4745
|
+
}
|
|
4746
|
+
.sk-color-picker-panel {
|
|
4747
|
+
--sk-panel-color-base: var(--sk-neutral-base);
|
|
4748
|
+
--sk-panel-fg: var(--sk-neutral-text);
|
|
4749
|
+
display: flex;
|
|
4750
|
+
flex-direction: column;
|
|
4751
|
+
gap: var(--sk-space-sm);
|
|
4752
|
+
padding: var(--sk-space-md);
|
|
4753
|
+
z-index: 1000;
|
|
4754
|
+
width: 17rem;
|
|
4755
|
+
}
|
|
4756
|
+
@supports (corner-shape: bevel) {
|
|
4757
|
+
.sk-color-picker-panel {
|
|
4758
|
+
border: var(--sk-border-width-thin) solid var(--sk-panel-color-base);
|
|
4759
|
+
border-top-left-radius: 0.625rem;
|
|
4760
|
+
border-top-right-radius: 0;
|
|
4761
|
+
border-bottom-right-radius: 0;
|
|
4762
|
+
border-bottom-left-radius: 0;
|
|
4763
|
+
corner-shape: bevel;
|
|
4764
|
+
}
|
|
4765
|
+
}
|
|
4766
|
+
@supports not (corner-shape: bevel) {
|
|
4767
|
+
.sk-color-picker-panel {
|
|
4768
|
+
border: none;
|
|
4769
|
+
clip-path: polygon(0.625rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0.625rem);
|
|
4770
|
+
}
|
|
4771
|
+
.sk-color-picker-panel::before {
|
|
4772
|
+
content: "";
|
|
4773
|
+
position: absolute;
|
|
4774
|
+
top: 0;
|
|
4775
|
+
left: 0;
|
|
4776
|
+
right: 0;
|
|
4777
|
+
bottom: 0;
|
|
4778
|
+
background-color: var(--sk-panel-color-base);
|
|
4779
|
+
z-index: -1;
|
|
4780
|
+
clip-path: polygon(0.625rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0.625rem, 0.625rem 0%, calc(0.625rem + var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(0.625rem + var(--sk-border-width-thin)), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) var(--sk-border-width-thin), calc(0.625rem + var(--sk-border-width-thin)) var(--sk-border-width-thin));
|
|
4781
|
+
}
|
|
4782
|
+
}
|
|
4783
|
+
.sk-color-picker-panel {
|
|
4784
|
+
background: color-mix(in oklch, color-mix(in oklch, var(--sk-panel-color-base) 95%, transparent 5%), #000 46.25%);
|
|
4785
|
+
color: var(--sk-panel-fg);
|
|
4786
|
+
box-shadow: var(--sk-shadow-lg);
|
|
4787
|
+
}
|
|
4788
|
+
.sk-color-picker-panel.sk-neutral {
|
|
4789
|
+
--sk-panel-color-base: var(--sk-neutral-base);
|
|
4790
|
+
--sk-panel-fg: var(--sk-neutral-text);
|
|
4791
|
+
}
|
|
4792
|
+
.sk-color-picker-panel.sk-primary {
|
|
4793
|
+
--sk-panel-color-base: var(--sk-primary-base);
|
|
4794
|
+
--sk-panel-fg: var(--sk-primary-text);
|
|
4795
|
+
}
|
|
4796
|
+
.sk-color-picker-panel.sk-accent {
|
|
4797
|
+
--sk-panel-color-base: var(--sk-accent-base);
|
|
4798
|
+
--sk-panel-fg: var(--sk-accent-text);
|
|
4799
|
+
}
|
|
4800
|
+
.sk-color-picker-panel.sk-info {
|
|
4801
|
+
--sk-panel-color-base: var(--sk-info-base);
|
|
4802
|
+
--sk-panel-fg: var(--sk-info-text);
|
|
4803
|
+
}
|
|
4804
|
+
.sk-color-picker-panel.sk-success {
|
|
4805
|
+
--sk-panel-color-base: var(--sk-success-base);
|
|
4806
|
+
--sk-panel-fg: var(--sk-success-text);
|
|
4807
|
+
}
|
|
4808
|
+
.sk-color-picker-panel.sk-warning {
|
|
4809
|
+
--sk-panel-color-base: var(--sk-warning-base);
|
|
4810
|
+
--sk-panel-fg: var(--sk-warning-text);
|
|
4811
|
+
}
|
|
4812
|
+
.sk-color-picker-panel.sk-danger {
|
|
4813
|
+
--sk-panel-color-base: var(--sk-danger-base);
|
|
4814
|
+
--sk-panel-fg: var(--sk-danger-text);
|
|
4815
|
+
}
|
|
4816
|
+
.sk-color-picker-panel.sk-neon-blue {
|
|
4817
|
+
--sk-panel-color-base: var(--sk-neon-blue-base);
|
|
4818
|
+
--sk-panel-fg: var(--sk-neon-blue-text);
|
|
4819
|
+
}
|
|
4820
|
+
.sk-color-picker-panel.sk-neon-purple {
|
|
4821
|
+
--sk-panel-color-base: var(--sk-neon-purple-base);
|
|
4822
|
+
--sk-panel-fg: var(--sk-neon-purple-text);
|
|
4823
|
+
}
|
|
4824
|
+
.sk-color-picker-panel.sk-neon-orange {
|
|
4825
|
+
--sk-panel-color-base: var(--sk-neon-orange-base);
|
|
4826
|
+
--sk-panel-fg: var(--sk-neon-orange-text);
|
|
4827
|
+
}
|
|
4828
|
+
.sk-color-picker-panel.sk-neon-green {
|
|
4829
|
+
--sk-panel-color-base: var(--sk-neon-green-base);
|
|
4830
|
+
--sk-panel-fg: var(--sk-neon-green-text);
|
|
4831
|
+
}
|
|
4832
|
+
.sk-color-picker-panel.sk-neon-mint {
|
|
4833
|
+
--sk-panel-color-base: var(--sk-neon-mint-base);
|
|
4834
|
+
--sk-panel-fg: var(--sk-neon-mint-text);
|
|
4835
|
+
}
|
|
4836
|
+
.sk-color-picker-panel.sk-neon-pink {
|
|
4837
|
+
--sk-panel-color-base: var(--sk-neon-pink-base);
|
|
4838
|
+
--sk-panel-fg: var(--sk-neon-pink-text);
|
|
4839
|
+
}
|
|
4840
|
+
.sk-color-picker-panel.sk-yellow {
|
|
4841
|
+
--sk-panel-color-base: var(--sk-yellow-base);
|
|
4842
|
+
--sk-panel-fg: var(--sk-yellow-text);
|
|
4843
|
+
}
|
|
4844
|
+
.sk-color-picker-panel.sk-red {
|
|
4845
|
+
--sk-panel-color-base: var(--sk-red-base);
|
|
4846
|
+
--sk-panel-fg: var(--sk-red-text);
|
|
4847
|
+
}
|
|
4848
|
+
.sk-color-picker-controls {
|
|
4849
|
+
display: flex;
|
|
4850
|
+
align-items: center;
|
|
4851
|
+
gap: var(--sk-space-sm);
|
|
4852
|
+
}
|
|
4853
|
+
.sk-color-picker-eyedropper {
|
|
4854
|
+
flex-shrink: 0;
|
|
4855
|
+
display: flex;
|
|
4856
|
+
align-items: center;
|
|
4857
|
+
justify-content: center;
|
|
4858
|
+
width: 2rem;
|
|
4859
|
+
height: 2rem;
|
|
4860
|
+
padding: 0;
|
|
4861
|
+
background: color-mix(in oklch, var(--sk-panel-color-base), #000 70%);
|
|
4862
|
+
color: var(--sk-panel-fg);
|
|
4863
|
+
border: var(--sk-border-width-thin) solid color-mix(in oklch, var(--sk-panel-color-base), transparent 50%);
|
|
4864
|
+
cursor: pointer;
|
|
4865
|
+
border-radius: 2px;
|
|
4866
|
+
transition: background var(--sk-transition-duration-base);
|
|
4867
|
+
}
|
|
4868
|
+
.sk-color-picker-eyedropper:hover:not(:disabled) {
|
|
4869
|
+
background: color-mix(in oklch, var(--sk-panel-color-base), #000 50%);
|
|
4870
|
+
}
|
|
4871
|
+
.sk-color-picker-sliders {
|
|
4872
|
+
flex: 1;
|
|
4873
|
+
display: flex;
|
|
4874
|
+
flex-direction: column;
|
|
4875
|
+
gap: var(--sk-space-xs);
|
|
4876
|
+
}
|
|
4877
|
+
.sk-color-picker-inputs {
|
|
4878
|
+
display: flex;
|
|
4879
|
+
flex-direction: column;
|
|
4880
|
+
gap: var(--sk-space-xs);
|
|
4881
|
+
}
|
|
4882
|
+
.sk-color-picker-format-buttons {
|
|
4883
|
+
display: flex;
|
|
4884
|
+
gap: 2px;
|
|
4885
|
+
}
|
|
4886
|
+
.sk-color-picker-format-btn {
|
|
4887
|
+
flex: 1;
|
|
4888
|
+
padding: var(--sk-space-3xs) var(--sk-space-xs);
|
|
4889
|
+
font-size: 0.6875rem;
|
|
4890
|
+
font-weight: 600;
|
|
4891
|
+
text-transform: uppercase;
|
|
4892
|
+
letter-spacing: 0.05em;
|
|
4893
|
+
cursor: pointer;
|
|
4894
|
+
border: var(--sk-border-width-thin) solid transparent;
|
|
4895
|
+
background: color-mix(in oklch, var(--sk-panel-color-base), #000 75%);
|
|
4896
|
+
color: color-mix(in oklch, var(--sk-panel-fg), transparent 40%);
|
|
4897
|
+
transition-property: background, color, border-color;
|
|
4898
|
+
transition-duration: var(--sk-transition-duration-base);
|
|
4899
|
+
}
|
|
4900
|
+
.sk-color-picker-format-btn:hover {
|
|
4901
|
+
background: color-mix(in oklch, var(--sk-panel-color-base), #000 60%);
|
|
4902
|
+
color: var(--sk-panel-fg);
|
|
4903
|
+
}
|
|
4904
|
+
.sk-color-picker-format-btn.sk-active {
|
|
4905
|
+
background: color-mix(in oklch, var(--sk-panel-color-base), #000 50%);
|
|
4906
|
+
color: var(--sk-panel-fg);
|
|
4907
|
+
border-color: var(--sk-panel-color-base);
|
|
4908
|
+
}
|
|
4909
|
+
@supports (corner-shape: bevel) {
|
|
4910
|
+
.sk-color-picker-format-btn:first-child {
|
|
4911
|
+
border: var(--sk-border-width-thin) solid transparent;
|
|
4912
|
+
border-top-left-radius: 0.25rem;
|
|
4913
|
+
border-top-right-radius: 0;
|
|
4914
|
+
border-bottom-right-radius: 0;
|
|
4915
|
+
border-bottom-left-radius: 0;
|
|
4916
|
+
corner-shape: bevel;
|
|
4917
|
+
}
|
|
4918
|
+
}
|
|
4919
|
+
@supports not (corner-shape: bevel) {
|
|
4920
|
+
.sk-color-picker-format-btn:first-child {
|
|
4921
|
+
border: none;
|
|
4922
|
+
clip-path: polygon(0.25rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0.25rem);
|
|
4923
|
+
}
|
|
4924
|
+
.sk-color-picker-format-btn:first-child::before {
|
|
4925
|
+
content: "";
|
|
4926
|
+
position: absolute;
|
|
4927
|
+
top: 0;
|
|
4928
|
+
left: 0;
|
|
4929
|
+
right: 0;
|
|
4930
|
+
bottom: 0;
|
|
4931
|
+
background-color: transparent;
|
|
4932
|
+
z-index: -1;
|
|
4933
|
+
clip-path: polygon(0.25rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0.25rem, 0.25rem 0%, calc(0.25rem + var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(0.25rem + var(--sk-border-width-thin)), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) var(--sk-border-width-thin), calc(0.25rem + var(--sk-border-width-thin)) var(--sk-border-width-thin));
|
|
4934
|
+
}
|
|
4935
|
+
}
|
|
4936
|
+
@supports (corner-shape: bevel) {
|
|
4937
|
+
.sk-color-picker-format-btn:last-child {
|
|
4938
|
+
border: var(--sk-border-width-thin) solid transparent;
|
|
4939
|
+
border-top-left-radius: 0;
|
|
4940
|
+
border-top-right-radius: 0;
|
|
4941
|
+
border-bottom-right-radius: 0.25rem;
|
|
4942
|
+
border-bottom-left-radius: 0;
|
|
4943
|
+
corner-shape: bevel;
|
|
4944
|
+
}
|
|
4945
|
+
}
|
|
4946
|
+
@supports not (corner-shape: bevel) {
|
|
4947
|
+
.sk-color-picker-format-btn:last-child {
|
|
4948
|
+
border: none;
|
|
4949
|
+
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 0.25rem), calc(100% - 0.25rem) 100%, 0% 100%);
|
|
4950
|
+
}
|
|
4951
|
+
.sk-color-picker-format-btn:last-child::before {
|
|
4952
|
+
content: "";
|
|
4953
|
+
position: absolute;
|
|
4954
|
+
top: 0;
|
|
4955
|
+
left: 0;
|
|
4956
|
+
right: 0;
|
|
4957
|
+
bottom: 0;
|
|
4958
|
+
background-color: transparent;
|
|
4959
|
+
z-index: -1;
|
|
4960
|
+
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 0.25rem), calc(100% - 0.25rem) 100%, 0% 100%, 0% 0%, var(--sk-border-width-thin) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - 0.25rem - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - 0.25rem - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) var(--sk-border-width-thin));
|
|
4961
|
+
}
|
|
4962
|
+
}
|
|
4963
|
+
@supports (corner-shape: bevel) {
|
|
4964
|
+
.sk-color-picker-format-btn:first-child.sk-active {
|
|
4965
|
+
border: var(--sk-border-width-thin) solid var(--sk-panel-color-base);
|
|
4966
|
+
border-top-left-radius: 0.25rem;
|
|
4967
|
+
border-top-right-radius: 0;
|
|
4968
|
+
border-bottom-right-radius: 0;
|
|
4969
|
+
border-bottom-left-radius: 0;
|
|
4970
|
+
corner-shape: bevel;
|
|
4971
|
+
}
|
|
4972
|
+
}
|
|
4973
|
+
@supports not (corner-shape: bevel) {
|
|
4974
|
+
.sk-color-picker-format-btn:first-child.sk-active {
|
|
4975
|
+
border: none;
|
|
4976
|
+
clip-path: polygon(0.25rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0.25rem);
|
|
4977
|
+
}
|
|
4978
|
+
.sk-color-picker-format-btn:first-child.sk-active::before {
|
|
4979
|
+
content: "";
|
|
4980
|
+
position: absolute;
|
|
4981
|
+
top: 0;
|
|
4982
|
+
left: 0;
|
|
4983
|
+
right: 0;
|
|
4984
|
+
bottom: 0;
|
|
4985
|
+
background-color: var(--sk-panel-color-base);
|
|
4986
|
+
z-index: -1;
|
|
4987
|
+
clip-path: polygon(0.25rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0.25rem, 0.25rem 0%, calc(0.25rem + var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(0.25rem + var(--sk-border-width-thin)), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) var(--sk-border-width-thin), calc(0.25rem + var(--sk-border-width-thin)) var(--sk-border-width-thin));
|
|
4988
|
+
}
|
|
4989
|
+
}
|
|
4990
|
+
@supports (corner-shape: bevel) {
|
|
4991
|
+
.sk-color-picker-format-btn:last-child.sk-active {
|
|
4992
|
+
border: var(--sk-border-width-thin) solid var(--sk-panel-color-base);
|
|
4993
|
+
border-top-left-radius: 0;
|
|
4994
|
+
border-top-right-radius: 0;
|
|
4995
|
+
border-bottom-right-radius: 0.25rem;
|
|
4996
|
+
border-bottom-left-radius: 0;
|
|
4997
|
+
corner-shape: bevel;
|
|
4998
|
+
}
|
|
4999
|
+
}
|
|
5000
|
+
@supports not (corner-shape: bevel) {
|
|
5001
|
+
.sk-color-picker-format-btn:last-child.sk-active {
|
|
5002
|
+
border: none;
|
|
5003
|
+
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 0.25rem), calc(100% - 0.25rem) 100%, 0% 100%);
|
|
5004
|
+
}
|
|
5005
|
+
.sk-color-picker-format-btn:last-child.sk-active::before {
|
|
5006
|
+
content: "";
|
|
5007
|
+
position: absolute;
|
|
5008
|
+
top: 0;
|
|
5009
|
+
left: 0;
|
|
5010
|
+
right: 0;
|
|
5011
|
+
bottom: 0;
|
|
5012
|
+
background-color: var(--sk-panel-color-base);
|
|
5013
|
+
z-index: -1;
|
|
5014
|
+
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 0.25rem), calc(100% - 0.25rem) 100%, 0% 100%, 0% 0%, var(--sk-border-width-thin) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - 0.25rem - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - 0.25rem - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) var(--sk-border-width-thin));
|
|
5015
|
+
}
|
|
5016
|
+
}
|
|
4515
5017
|
.sk-divider {
|
|
4516
5018
|
--sk-divider-border-width: var(--sk-border-width-thin);
|
|
4517
5019
|
--sk-divider-spacing-vertical: var(--sk-space-md);
|
|
@@ -4895,6 +5397,7 @@
|
|
|
4895
5397
|
--sk-listbox-fg: var(--sk-neutral-text);
|
|
4896
5398
|
position: relative;
|
|
4897
5399
|
display: inline-flex;
|
|
5400
|
+
width: 100%;
|
|
4898
5401
|
}
|
|
4899
5402
|
.sk-listbox.sk-sm {
|
|
4900
5403
|
--sk-listbox-cut: 0.4rem;
|
|
@@ -5234,7 +5737,7 @@
|
|
|
5234
5737
|
margin: var(--sk-space-xs) 0;
|
|
5235
5738
|
background: color-mix(in oklch, var(--sk-menu-color-base), transparent 70%);
|
|
5236
5739
|
}
|
|
5237
|
-
.sk-
|
|
5740
|
+
.sk-menu-content {
|
|
5238
5741
|
--sk-menu-color-base: var(--sk-neutral-base);
|
|
5239
5742
|
--sk-menu-fg: var(--sk-neutral-text);
|
|
5240
5743
|
min-width: 12rem;
|
|
@@ -5242,7 +5745,7 @@
|
|
|
5242
5745
|
z-index: 1000;
|
|
5243
5746
|
}
|
|
5244
5747
|
@supports (corner-shape: bevel) {
|
|
5245
|
-
.sk-
|
|
5748
|
+
.sk-menu-content {
|
|
5246
5749
|
border: var(--sk-border-width-thin) solid var(--sk-menu-color-base);
|
|
5247
5750
|
border-top-left-radius: 0.625rem;
|
|
5248
5751
|
border-top-right-radius: 0;
|
|
@@ -5252,11 +5755,11 @@
|
|
|
5252
5755
|
}
|
|
5253
5756
|
}
|
|
5254
5757
|
@supports not (corner-shape: bevel) {
|
|
5255
|
-
.sk-
|
|
5758
|
+
.sk-menu-content {
|
|
5256
5759
|
border: none;
|
|
5257
5760
|
clip-path: polygon(0.625rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0.625rem);
|
|
5258
5761
|
}
|
|
5259
|
-
.sk-
|
|
5762
|
+
.sk-menu-content::before {
|
|
5260
5763
|
content: "";
|
|
5261
5764
|
position: absolute;
|
|
5262
5765
|
top: 0;
|
|
@@ -5268,72 +5771,72 @@
|
|
|
5268
5771
|
clip-path: polygon(0.625rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0.625rem, 0.625rem 0%, calc(0.625rem + var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(0.625rem + var(--sk-border-width-thin)), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) var(--sk-border-width-thin), calc(0.625rem + var(--sk-border-width-thin)) var(--sk-border-width-thin));
|
|
5269
5772
|
}
|
|
5270
5773
|
}
|
|
5271
|
-
.sk-
|
|
5774
|
+
.sk-menu-content {
|
|
5272
5775
|
background: color-mix(in oklch, color-mix(in oklch, var(--sk-menu-color-base) 95%, transparent 5%), #000 46.25%);
|
|
5273
5776
|
color: var(--sk-menu-fg);
|
|
5274
5777
|
box-shadow: var(--sk-shadow-lg);
|
|
5275
5778
|
}
|
|
5276
|
-
.sk-
|
|
5779
|
+
.sk-menu-content.sk-neutral {
|
|
5277
5780
|
--sk-menu-color-base: var(--sk-neutral-base);
|
|
5278
5781
|
--sk-menu-fg: var(--sk-neutral-text);
|
|
5279
5782
|
}
|
|
5280
|
-
.sk-
|
|
5783
|
+
.sk-menu-content.sk-primary {
|
|
5281
5784
|
--sk-menu-color-base: var(--sk-primary-base);
|
|
5282
5785
|
--sk-menu-fg: var(--sk-primary-text);
|
|
5283
5786
|
}
|
|
5284
|
-
.sk-
|
|
5787
|
+
.sk-menu-content.sk-accent {
|
|
5285
5788
|
--sk-menu-color-base: var(--sk-accent-base);
|
|
5286
5789
|
--sk-menu-fg: var(--sk-accent-text);
|
|
5287
5790
|
}
|
|
5288
|
-
.sk-
|
|
5791
|
+
.sk-menu-content.sk-info {
|
|
5289
5792
|
--sk-menu-color-base: var(--sk-info-base);
|
|
5290
5793
|
--sk-menu-fg: var(--sk-info-text);
|
|
5291
5794
|
}
|
|
5292
|
-
.sk-
|
|
5795
|
+
.sk-menu-content.sk-success {
|
|
5293
5796
|
--sk-menu-color-base: var(--sk-success-base);
|
|
5294
5797
|
--sk-menu-fg: var(--sk-success-text);
|
|
5295
5798
|
}
|
|
5296
|
-
.sk-
|
|
5799
|
+
.sk-menu-content.sk-warning {
|
|
5297
5800
|
--sk-menu-color-base: var(--sk-warning-base);
|
|
5298
5801
|
--sk-menu-fg: var(--sk-warning-text);
|
|
5299
5802
|
}
|
|
5300
|
-
.sk-
|
|
5803
|
+
.sk-menu-content.sk-danger {
|
|
5301
5804
|
--sk-menu-color-base: var(--sk-danger-base);
|
|
5302
5805
|
--sk-menu-fg: var(--sk-danger-text);
|
|
5303
5806
|
}
|
|
5304
|
-
.sk-
|
|
5807
|
+
.sk-menu-content.sk-neon-blue {
|
|
5305
5808
|
--sk-menu-color-base: var(--sk-neon-blue-base);
|
|
5306
5809
|
--sk-menu-fg: var(--sk-neon-blue-text);
|
|
5307
5810
|
}
|
|
5308
|
-
.sk-
|
|
5811
|
+
.sk-menu-content.sk-neon-purple {
|
|
5309
5812
|
--sk-menu-color-base: var(--sk-neon-purple-base);
|
|
5310
5813
|
--sk-menu-fg: var(--sk-neon-purple-text);
|
|
5311
5814
|
}
|
|
5312
|
-
.sk-
|
|
5815
|
+
.sk-menu-content.sk-neon-orange {
|
|
5313
5816
|
--sk-menu-color-base: var(--sk-neon-orange-base);
|
|
5314
5817
|
--sk-menu-fg: var(--sk-neon-orange-text);
|
|
5315
5818
|
}
|
|
5316
|
-
.sk-
|
|
5819
|
+
.sk-menu-content.sk-neon-green {
|
|
5317
5820
|
--sk-menu-color-base: var(--sk-neon-green-base);
|
|
5318
5821
|
--sk-menu-fg: var(--sk-neon-green-text);
|
|
5319
5822
|
}
|
|
5320
|
-
.sk-
|
|
5823
|
+
.sk-menu-content.sk-neon-mint {
|
|
5321
5824
|
--sk-menu-color-base: var(--sk-neon-mint-base);
|
|
5322
5825
|
--sk-menu-fg: var(--sk-neon-mint-text);
|
|
5323
5826
|
}
|
|
5324
|
-
.sk-
|
|
5827
|
+
.sk-menu-content.sk-neon-pink {
|
|
5325
5828
|
--sk-menu-color-base: var(--sk-neon-pink-base);
|
|
5326
5829
|
--sk-menu-fg: var(--sk-neon-pink-text);
|
|
5327
5830
|
}
|
|
5328
|
-
.sk-
|
|
5831
|
+
.sk-menu-content.sk-yellow {
|
|
5329
5832
|
--sk-menu-color-base: var(--sk-yellow-base);
|
|
5330
5833
|
--sk-menu-fg: var(--sk-yellow-text);
|
|
5331
5834
|
}
|
|
5332
|
-
.sk-
|
|
5835
|
+
.sk-menu-content.sk-red {
|
|
5333
5836
|
--sk-menu-color-base: var(--sk-red-base);
|
|
5334
5837
|
--sk-menu-fg: var(--sk-red-text);
|
|
5335
5838
|
}
|
|
5336
|
-
.sk-
|
|
5839
|
+
.sk-menu-item {
|
|
5337
5840
|
display: flex;
|
|
5338
5841
|
align-items: center;
|
|
5339
5842
|
justify-content: space-between;
|
|
@@ -5346,7 +5849,7 @@
|
|
|
5346
5849
|
user-select: none;
|
|
5347
5850
|
}
|
|
5348
5851
|
@supports (corner-shape: bevel) {
|
|
5349
|
-
.sk-
|
|
5852
|
+
.sk-menu-item {
|
|
5350
5853
|
border: var(--sk-border-width-thin) solid transparent;
|
|
5351
5854
|
border-top-left-radius: 0.5rem;
|
|
5352
5855
|
border-top-right-radius: 0;
|
|
@@ -5356,11 +5859,11 @@
|
|
|
5356
5859
|
}
|
|
5357
5860
|
}
|
|
5358
5861
|
@supports not (corner-shape: bevel) {
|
|
5359
|
-
.sk-
|
|
5862
|
+
.sk-menu-item {
|
|
5360
5863
|
border: none;
|
|
5361
5864
|
clip-path: polygon(0.5rem 0%, 100% 0%, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0% 100%, 0% 0.5rem);
|
|
5362
5865
|
}
|
|
5363
|
-
.sk-
|
|
5866
|
+
.sk-menu-item::before {
|
|
5364
5867
|
content: "";
|
|
5365
5868
|
position: absolute;
|
|
5366
5869
|
top: 0;
|
|
@@ -5372,29 +5875,60 @@
|
|
|
5372
5875
|
clip-path: polygon(0.5rem 0%, 100% 0%, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0% 100%, 0% 0.5rem, 0.5rem 0%, calc(0.5rem + var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(0.5rem + var(--sk-border-width-thin)), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - 0.5rem - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - 0.5rem - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) var(--sk-border-width-thin), calc(0.5rem + var(--sk-border-width-thin)) var(--sk-border-width-thin));
|
|
5373
5876
|
}
|
|
5374
5877
|
}
|
|
5375
|
-
.sk-
|
|
5878
|
+
.sk-menu-item {
|
|
5376
5879
|
transition-property: background, color;
|
|
5377
5880
|
transition-duration: var(--sk-transition-duration-base);
|
|
5378
5881
|
}
|
|
5379
|
-
.sk-
|
|
5882
|
+
.sk-menu-item:hover:not([data-disabled]) {
|
|
5380
5883
|
background: color-mix(in oklch, color-mix(in oklch, var(--sk-menu-color-base), black 30%), transparent 10%);
|
|
5381
5884
|
color: var(--sk-menu-fg);
|
|
5382
5885
|
transition-duration: var(--sk-transition-duration-fast);
|
|
5383
5886
|
}
|
|
5384
|
-
.sk-
|
|
5887
|
+
.sk-menu-item:focus, .sk-menu-item[data-highlighted] {
|
|
5385
5888
|
background: color-mix(in oklch, color-mix(in oklch, var(--sk-menu-color-base), black 30%), transparent 10%);
|
|
5386
5889
|
color: var(--sk-menu-fg);
|
|
5387
5890
|
outline: none;
|
|
5388
5891
|
}
|
|
5389
|
-
.sk-
|
|
5892
|
+
.sk-menu-item[data-disabled] {
|
|
5390
5893
|
opacity: 0.5;
|
|
5391
5894
|
cursor: not-allowed;
|
|
5392
5895
|
}
|
|
5393
|
-
.sk-
|
|
5896
|
+
.sk-menu-separator {
|
|
5394
5897
|
height: 1px;
|
|
5395
5898
|
margin: var(--sk-space-xs) 0;
|
|
5396
5899
|
background: color-mix(in oklch, var(--sk-menu-color-base), transparent 70%);
|
|
5397
5900
|
}
|
|
5901
|
+
.sk-menu-checkbox-item,
|
|
5902
|
+
.sk-menu-radio-item {
|
|
5903
|
+
position: relative;
|
|
5904
|
+
padding-left: calc(var(--sk-space-md) + 1.25rem);
|
|
5905
|
+
}
|
|
5906
|
+
.sk-menu-item-indicator {
|
|
5907
|
+
position: absolute;
|
|
5908
|
+
left: var(--sk-space-sm);
|
|
5909
|
+
top: 50%;
|
|
5910
|
+
transform: translateY(-50%);
|
|
5911
|
+
display: flex;
|
|
5912
|
+
align-items: center;
|
|
5913
|
+
justify-content: center;
|
|
5914
|
+
width: 1rem;
|
|
5915
|
+
height: 1rem;
|
|
5916
|
+
}
|
|
5917
|
+
.sk-menu-radio-dot {
|
|
5918
|
+
width: 0.5rem;
|
|
5919
|
+
height: 0.5rem;
|
|
5920
|
+
border-radius: 50%;
|
|
5921
|
+
background: currentColor;
|
|
5922
|
+
}
|
|
5923
|
+
.sk-menu-label {
|
|
5924
|
+
padding: var(--sk-space-xs) var(--sk-space-md);
|
|
5925
|
+
font-size: 0.75rem;
|
|
5926
|
+
font-weight: 600;
|
|
5927
|
+
text-transform: uppercase;
|
|
5928
|
+
letter-spacing: 0.05em;
|
|
5929
|
+
color: color-mix(in oklch, var(--sk-menu-fg), transparent 40%);
|
|
5930
|
+
user-select: none;
|
|
5931
|
+
}
|
|
5398
5932
|
.sk-submenu-caret {
|
|
5399
5933
|
width: 0.875rem;
|
|
5400
5934
|
height: 0.875rem;
|
|
@@ -6706,6 +7240,10 @@
|
|
|
6706
7240
|
--sk-panel-min-height: 4rem;
|
|
6707
7241
|
--sk-panel-radius-factor: var(--sk-border-radius-factor);
|
|
6708
7242
|
--sk-panel-cut-size: calc(var(--sk-panel-min-height) / var(--sk-panel-radius-factor));
|
|
7243
|
+
--sk-panel-cut-tl: 0px;
|
|
7244
|
+
--sk-panel-cut-tr: 0px;
|
|
7245
|
+
--sk-panel-cut-br: 0px;
|
|
7246
|
+
--sk-panel-cut-bl: 0px;
|
|
6709
7247
|
--sk-panel-border-width: var(--sk-border-width-thin);
|
|
6710
7248
|
--sk-panel-border-color: currentColor;
|
|
6711
7249
|
--sk-panel-glow-size: 12px;
|
|
@@ -6735,20 +7273,32 @@
|
|
|
6735
7273
|
.sk-panel ul li::marker {
|
|
6736
7274
|
color: var(--sk-kind-color, var(--sk-panel-color-base));
|
|
6737
7275
|
}
|
|
7276
|
+
.sk-panel.sk-cut-top-left {
|
|
7277
|
+
--sk-panel-cut-tl: var(--sk-panel-cut-size);
|
|
7278
|
+
}
|
|
7279
|
+
.sk-panel.sk-cut-top-right {
|
|
7280
|
+
--sk-panel-cut-tr: var(--sk-panel-cut-size);
|
|
7281
|
+
}
|
|
7282
|
+
.sk-panel.sk-cut-bottom-right {
|
|
7283
|
+
--sk-panel-cut-br: var(--sk-panel-cut-size);
|
|
7284
|
+
}
|
|
7285
|
+
.sk-panel.sk-cut-bottom-left {
|
|
7286
|
+
--sk-panel-cut-bl: var(--sk-panel-cut-size);
|
|
7287
|
+
}
|
|
6738
7288
|
@supports (corner-shape: bevel) {
|
|
6739
7289
|
.sk-panel {
|
|
6740
7290
|
border: var(--sk-panel-border-width) solid var(--sk-panel-border-color);
|
|
6741
|
-
border-top-left-radius:
|
|
6742
|
-
border-top-right-radius:
|
|
6743
|
-
border-bottom-right-radius: var(--sk-panel-cut-
|
|
6744
|
-
border-bottom-left-radius:
|
|
7291
|
+
border-top-left-radius: var(--sk-panel-cut-tl);
|
|
7292
|
+
border-top-right-radius: var(--sk-panel-cut-tr);
|
|
7293
|
+
border-bottom-right-radius: var(--sk-panel-cut-br);
|
|
7294
|
+
border-bottom-left-radius: var(--sk-panel-cut-bl);
|
|
6745
7295
|
corner-shape: bevel;
|
|
6746
7296
|
}
|
|
6747
7297
|
}
|
|
6748
7298
|
@supports not (corner-shape: bevel) {
|
|
6749
7299
|
.sk-panel {
|
|
6750
7300
|
border: none;
|
|
6751
|
-
clip-path: polygon(0% 0
|
|
7301
|
+
clip-path: polygon(var(--sk-panel-cut-tl) 0, calc(100% - var(--sk-panel-cut-tr)) 0, 100% var(--sk-panel-cut-tr), 100% calc(100% - var(--sk-panel-cut-br)), calc(100% - var(--sk-panel-cut-br)) 100%, var(--sk-panel-cut-bl) 100%, 0 calc(100% - var(--sk-panel-cut-bl)), 0 var(--sk-panel-cut-tl));
|
|
6752
7302
|
}
|
|
6753
7303
|
.sk-panel::before {
|
|
6754
7304
|
content: "";
|
|
@@ -6759,7 +7309,7 @@
|
|
|
6759
7309
|
bottom: 0;
|
|
6760
7310
|
background-color: var(--sk-panel-border-color);
|
|
6761
7311
|
z-index: -1;
|
|
6762
|
-
clip-path: polygon(0% 0
|
|
7312
|
+
clip-path: polygon(var(--sk-panel-cut-tl) 0, calc(100% - var(--sk-panel-cut-tr)) 0, 100% var(--sk-panel-cut-tr), 100% calc(100% - var(--sk-panel-cut-br)), calc(100% - var(--sk-panel-cut-br)) 100%, var(--sk-panel-cut-bl) 100%, 0 calc(100% - var(--sk-panel-cut-bl)), 0 var(--sk-panel-cut-tl), var(--sk-panel-cut-tl) 0, calc(var(--sk-panel-cut-tl) + var(--sk-panel-border-width)) var(--sk-panel-border-width), var(--sk-panel-border-width) calc(var(--sk-panel-cut-tl) + var(--sk-panel-border-width)), var(--sk-panel-border-width) calc(100% - var(--sk-panel-cut-bl) - var(--sk-panel-border-width)), calc(var(--sk-panel-cut-bl) + var(--sk-panel-border-width)) calc(100% - var(--sk-panel-border-width)), calc(100% - var(--sk-panel-cut-br) - var(--sk-panel-border-width)) calc(100% - var(--sk-panel-border-width)), calc(100% - var(--sk-panel-border-width)) calc(100% - var(--sk-panel-cut-br) - var(--sk-panel-border-width)), calc(100% - var(--sk-panel-border-width)) calc(var(--sk-panel-cut-tr) + var(--sk-panel-border-width)), calc(100% - var(--sk-panel-cut-tr) - var(--sk-panel-border-width)) var(--sk-panel-border-width), calc(var(--sk-panel-cut-tl) + var(--sk-panel-border-width)) var(--sk-panel-border-width));
|
|
6763
7313
|
}
|
|
6764
7314
|
}
|
|
6765
7315
|
.sk-panel::after {
|
|
@@ -6769,11 +7319,28 @@
|
|
|
6769
7319
|
height: 2px;
|
|
6770
7320
|
background: var(--sk-panel-border-base);
|
|
6771
7321
|
border-radius: 1px;
|
|
7322
|
+
transform-origin: center;
|
|
7323
|
+
pointer-events: none;
|
|
7324
|
+
}
|
|
7325
|
+
.sk-panel.sk-decoration-bottom-right::after {
|
|
6772
7326
|
right: var(--sk-panel-decoration-offset);
|
|
6773
7327
|
bottom: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
|
|
6774
7328
|
transform: rotate(135deg);
|
|
6775
|
-
|
|
6776
|
-
|
|
7329
|
+
}
|
|
7330
|
+
.sk-panel.sk-decoration-top-left::after {
|
|
7331
|
+
left: var(--sk-panel-decoration-offset);
|
|
7332
|
+
top: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
|
|
7333
|
+
transform: rotate(135deg);
|
|
7334
|
+
}
|
|
7335
|
+
.sk-panel.sk-decoration-top-right::after {
|
|
7336
|
+
right: var(--sk-panel-decoration-offset);
|
|
7337
|
+
top: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
|
|
7338
|
+
transform: rotate(45deg);
|
|
7339
|
+
}
|
|
7340
|
+
.sk-panel.sk-decoration-bottom-left::after {
|
|
7341
|
+
left: var(--sk-panel-decoration-offset);
|
|
7342
|
+
bottom: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
|
|
7343
|
+
transform: rotate(45deg);
|
|
6777
7344
|
}
|
|
6778
7345
|
.sk-panel.sk-xs {
|
|
6779
7346
|
--sk-panel-cut-size: calc(var(--sk-panel-min-height) * 0.5 / var(--sk-panel-radius-factor));
|
|
@@ -6792,7 +7359,6 @@
|
|
|
6792
7359
|
}
|
|
6793
7360
|
.sk-panel.sk-no-border {
|
|
6794
7361
|
--sk-panel-border-width: 0;
|
|
6795
|
-
--sk-panel-cut-size: 0;
|
|
6796
7362
|
box-shadow: none;
|
|
6797
7363
|
}
|
|
6798
7364
|
.sk-panel.sk-no-border::after {
|
|
@@ -6805,7 +7371,7 @@
|
|
|
6805
7371
|
}
|
|
6806
7372
|
.sk-panel .sk-panel-scroll-content {
|
|
6807
7373
|
padding: var(--sk-panel-padding);
|
|
6808
|
-
margin-bottom: calc(var(--sk-panel-cut-
|
|
7374
|
+
margin-bottom: calc(max(var(--sk-panel-cut-br), var(--sk-panel-cut-bl)) + var(--sk-panel-decoration-offset));
|
|
6809
7375
|
overflow-y: auto;
|
|
6810
7376
|
overflow-x: hidden;
|
|
6811
7377
|
flex: 1;
|
|
@@ -7534,12 +8100,444 @@
|
|
|
7534
8100
|
clip-path: polygon(calc(var(--sk-radio-cut) * 0.4) 0%, calc(100% - calc(var(--sk-radio-cut) * 0.4)) 0%, 100% calc(var(--sk-radio-cut) * 0.4), 100% calc(100% - calc(var(--sk-radio-cut) * 0.4)), calc(100% - calc(var(--sk-radio-cut) * 0.4)) 100%, calc(var(--sk-radio-cut) * 0.4) 100%, 0% calc(100% - calc(var(--sk-radio-cut) * 0.4)), 0% calc(var(--sk-radio-cut) * 0.4), calc(var(--sk-radio-cut) * 0.4) 0%, calc(calc(var(--sk-radio-cut) * 0.4) + 1px) 1px, 1px calc(calc(var(--sk-radio-cut) * 0.4) + 1px), 1px calc(100% - calc(var(--sk-radio-cut) * 0.4) - 1px), calc(calc(var(--sk-radio-cut) * 0.4) + 1px) calc(100% - 1px), calc(100% - calc(var(--sk-radio-cut) * 0.4) - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - calc(var(--sk-radio-cut) * 0.4) - 1px), calc(100% - 1px) calc(calc(var(--sk-radio-cut) * 0.4) + 1px), calc(100% - calc(var(--sk-radio-cut) * 0.4) - 1px) 1px, calc(calc(var(--sk-radio-cut) * 0.4) + 1px) 1px);
|
|
7535
8101
|
}
|
|
7536
8102
|
}
|
|
7537
|
-
.sk-radio-label {
|
|
7538
|
-
user-select: none;
|
|
8103
|
+
.sk-radio-label {
|
|
8104
|
+
user-select: none;
|
|
8105
|
+
}
|
|
8106
|
+
.sk-scroll-area {
|
|
8107
|
+
--sk-scroll-area-color-base: var(--sk-neutral-base);
|
|
8108
|
+
--sk-scroll-area-thumb-color: var(--sk-scroll-area-color-base);
|
|
8109
|
+
--sk-scroll-area-track-color: oklch(from var(--sk-neutral-base) l c h / 0.08);
|
|
8110
|
+
--sk-scroll-area-size: 0.5rem;
|
|
8111
|
+
position: relative;
|
|
8112
|
+
overflow: hidden;
|
|
8113
|
+
}
|
|
8114
|
+
.sk-scroll-area.sk-neutral {
|
|
8115
|
+
--sk-scroll-area-color-base: var(--sk-neutral-base);
|
|
8116
|
+
}
|
|
8117
|
+
.sk-scroll-area.sk-primary {
|
|
8118
|
+
--sk-scroll-area-color-base: var(--sk-primary-base);
|
|
8119
|
+
}
|
|
8120
|
+
.sk-scroll-area.sk-accent {
|
|
8121
|
+
--sk-scroll-area-color-base: var(--sk-accent-base);
|
|
8122
|
+
}
|
|
8123
|
+
.sk-scroll-area.sk-info {
|
|
8124
|
+
--sk-scroll-area-color-base: var(--sk-info-base);
|
|
8125
|
+
}
|
|
8126
|
+
.sk-scroll-area.sk-success {
|
|
8127
|
+
--sk-scroll-area-color-base: var(--sk-success-base);
|
|
8128
|
+
}
|
|
8129
|
+
.sk-scroll-area.sk-warning {
|
|
8130
|
+
--sk-scroll-area-color-base: var(--sk-warning-base);
|
|
8131
|
+
}
|
|
8132
|
+
.sk-scroll-area.sk-danger {
|
|
8133
|
+
--sk-scroll-area-color-base: var(--sk-danger-base);
|
|
8134
|
+
}
|
|
8135
|
+
.sk-scroll-area-viewport {
|
|
8136
|
+
width: 100%;
|
|
8137
|
+
height: 100%;
|
|
8138
|
+
border-radius: inherit;
|
|
8139
|
+
}
|
|
8140
|
+
.sk-scroll-area-viewport > div {
|
|
8141
|
+
display: block !important;
|
|
8142
|
+
}
|
|
8143
|
+
.sk-scroll-area-scrollbar {
|
|
8144
|
+
display: flex;
|
|
8145
|
+
touch-action: none;
|
|
8146
|
+
user-select: none;
|
|
8147
|
+
padding: 2px;
|
|
8148
|
+
background: var(--sk-scroll-area-track-color);
|
|
8149
|
+
transition: background var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
|
|
8150
|
+
}
|
|
8151
|
+
.sk-scroll-area-scrollbar:hover {
|
|
8152
|
+
background: oklch(from var(--sk-neutral-base) l c h/0.15);
|
|
8153
|
+
}
|
|
8154
|
+
.sk-scroll-area-scrollbar[data-orientation=vertical] {
|
|
8155
|
+
width: var(--sk-scroll-area-size);
|
|
8156
|
+
}
|
|
8157
|
+
.sk-scroll-area-scrollbar[data-orientation=horizontal] {
|
|
8158
|
+
flex-direction: column;
|
|
8159
|
+
height: var(--sk-scroll-area-size);
|
|
8160
|
+
}
|
|
8161
|
+
.sk-scroll-area-thumb {
|
|
8162
|
+
position: relative;
|
|
8163
|
+
flex: 1;
|
|
8164
|
+
border-radius: var(--sk-scroll-area-size);
|
|
8165
|
+
background: oklch(from var(--sk-scroll-area-thumb-color) l c h/0.4);
|
|
8166
|
+
transition: background var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
|
|
8167
|
+
}
|
|
8168
|
+
.sk-scroll-area-thumb:hover {
|
|
8169
|
+
background: oklch(from var(--sk-scroll-area-thumb-color) l c h/0.6);
|
|
8170
|
+
}
|
|
8171
|
+
.sk-scroll-area-thumb:active {
|
|
8172
|
+
background: oklch(from var(--sk-scroll-area-thumb-color) l c h/0.8);
|
|
8173
|
+
}
|
|
8174
|
+
.sk-scroll-area-corner {
|
|
8175
|
+
background: var(--sk-scroll-area-track-color);
|
|
8176
|
+
}
|
|
8177
|
+
.sk-select {
|
|
8178
|
+
--sk-select-color-base: var(--sk-neutral-base);
|
|
8179
|
+
--sk-select-fg: var(--sk-neutral-text);
|
|
8180
|
+
position: relative;
|
|
8181
|
+
display: inline-flex;
|
|
8182
|
+
width: 100%;
|
|
8183
|
+
}
|
|
8184
|
+
.sk-select.sk-sm {
|
|
8185
|
+
--sk-select-cut: 0.4rem;
|
|
8186
|
+
}
|
|
8187
|
+
.sk-select.sk-md {
|
|
8188
|
+
--sk-select-cut: 0.5rem;
|
|
8189
|
+
}
|
|
8190
|
+
.sk-select.sk-lg {
|
|
8191
|
+
--sk-select-cut: 0.6rem;
|
|
8192
|
+
}
|
|
8193
|
+
.sk-select.sk-xl {
|
|
8194
|
+
--sk-select-cut: 0.7rem;
|
|
8195
|
+
}
|
|
8196
|
+
.sk-select.sk-neutral {
|
|
8197
|
+
--sk-select-color-base: var(--sk-neutral-base);
|
|
8198
|
+
--sk-select-fg: var(--sk-neutral-text);
|
|
8199
|
+
}
|
|
8200
|
+
.sk-select.sk-primary {
|
|
8201
|
+
--sk-select-color-base: var(--sk-primary-base);
|
|
8202
|
+
--sk-select-fg: var(--sk-primary-text);
|
|
8203
|
+
}
|
|
8204
|
+
.sk-select.sk-accent {
|
|
8205
|
+
--sk-select-color-base: var(--sk-accent-base);
|
|
8206
|
+
--sk-select-fg: var(--sk-accent-text);
|
|
8207
|
+
}
|
|
8208
|
+
.sk-select.sk-info {
|
|
8209
|
+
--sk-select-color-base: var(--sk-info-base);
|
|
8210
|
+
--sk-select-fg: var(--sk-info-text);
|
|
8211
|
+
}
|
|
8212
|
+
.sk-select.sk-success {
|
|
8213
|
+
--sk-select-color-base: var(--sk-success-base);
|
|
8214
|
+
--sk-select-fg: var(--sk-success-text);
|
|
8215
|
+
}
|
|
8216
|
+
.sk-select.sk-warning {
|
|
8217
|
+
--sk-select-color-base: var(--sk-warning-base);
|
|
8218
|
+
--sk-select-fg: var(--sk-warning-text);
|
|
8219
|
+
}
|
|
8220
|
+
.sk-select.sk-danger {
|
|
8221
|
+
--sk-select-color-base: var(--sk-danger-base);
|
|
8222
|
+
--sk-select-fg: var(--sk-danger-text);
|
|
8223
|
+
}
|
|
8224
|
+
.sk-select.sk-neon-blue {
|
|
8225
|
+
--sk-select-color-base: var(--sk-neon-blue-base);
|
|
8226
|
+
--sk-select-fg: var(--sk-neon-blue-text);
|
|
8227
|
+
}
|
|
8228
|
+
.sk-select.sk-neon-purple {
|
|
8229
|
+
--sk-select-color-base: var(--sk-neon-purple-base);
|
|
8230
|
+
--sk-select-fg: var(--sk-neon-purple-text);
|
|
8231
|
+
}
|
|
8232
|
+
.sk-select.sk-neon-orange {
|
|
8233
|
+
--sk-select-color-base: var(--sk-neon-orange-base);
|
|
8234
|
+
--sk-select-fg: var(--sk-neon-orange-text);
|
|
8235
|
+
}
|
|
8236
|
+
.sk-select.sk-neon-green {
|
|
8237
|
+
--sk-select-color-base: var(--sk-neon-green-base);
|
|
8238
|
+
--sk-select-fg: var(--sk-neon-green-text);
|
|
8239
|
+
}
|
|
8240
|
+
.sk-select.sk-neon-mint {
|
|
8241
|
+
--sk-select-color-base: var(--sk-neon-mint-base);
|
|
8242
|
+
--sk-select-fg: var(--sk-neon-mint-text);
|
|
8243
|
+
}
|
|
8244
|
+
.sk-select.sk-neon-pink {
|
|
8245
|
+
--sk-select-color-base: var(--sk-neon-pink-base);
|
|
8246
|
+
--sk-select-fg: var(--sk-neon-pink-text);
|
|
8247
|
+
}
|
|
8248
|
+
.sk-select.sk-yellow {
|
|
8249
|
+
--sk-select-color-base: var(--sk-yellow-base);
|
|
8250
|
+
--sk-select-fg: var(--sk-yellow-text);
|
|
8251
|
+
}
|
|
8252
|
+
.sk-select.sk-red {
|
|
8253
|
+
--sk-select-color-base: var(--sk-red-base);
|
|
8254
|
+
--sk-select-fg: var(--sk-red-text);
|
|
8255
|
+
}
|
|
8256
|
+
.sk-select-trigger {
|
|
8257
|
+
display: flex;
|
|
8258
|
+
align-items: center;
|
|
8259
|
+
gap: var(--sk-space-sm);
|
|
8260
|
+
width: 100%;
|
|
8261
|
+
font-family: var(--sk-font-family-base);
|
|
8262
|
+
font-size: inherit;
|
|
8263
|
+
text-align: left;
|
|
8264
|
+
}
|
|
8265
|
+
@supports (corner-shape: bevel) {
|
|
8266
|
+
.sk-select-trigger {
|
|
8267
|
+
border: var(--sk-border-width-thin) solid var(--sk-select-color-base);
|
|
8268
|
+
border-top-left-radius: 0;
|
|
8269
|
+
border-top-right-radius: var(--sk-select-cut);
|
|
8270
|
+
border-bottom-right-radius: 0;
|
|
8271
|
+
border-bottom-left-radius: 0;
|
|
8272
|
+
corner-shape: bevel;
|
|
8273
|
+
}
|
|
8274
|
+
}
|
|
8275
|
+
@supports not (corner-shape: bevel) {
|
|
8276
|
+
.sk-select-trigger {
|
|
8277
|
+
border: none;
|
|
8278
|
+
clip-path: polygon(0% 0%, calc(100% - var(--sk-select-cut)) 0%, 100% var(--sk-select-cut), 100% 100%, 0% 100%);
|
|
8279
|
+
}
|
|
8280
|
+
.sk-select-trigger::before {
|
|
8281
|
+
content: "";
|
|
8282
|
+
position: absolute;
|
|
8283
|
+
top: 0;
|
|
8284
|
+
left: 0;
|
|
8285
|
+
right: 0;
|
|
8286
|
+
bottom: 0;
|
|
8287
|
+
background-color: var(--sk-select-color-base);
|
|
8288
|
+
z-index: -1;
|
|
8289
|
+
clip-path: polygon(0% 0%, calc(100% - var(--sk-select-cut)) 0%, 100% var(--sk-select-cut), 100% 100%, 0% 100%, 0% 0%, var(--sk-border-width-thin) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(var(--sk-select-cut) + var(--sk-border-width-thin)), calc(100% - var(--sk-select-cut) - var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) var(--sk-border-width-thin));
|
|
8290
|
+
}
|
|
8291
|
+
}
|
|
8292
|
+
.sk-select-trigger {
|
|
8293
|
+
background: color-mix(in oklch, color-mix(in oklch, var(--sk-select-color-base) 75%, transparent 25%), #000 65%);
|
|
8294
|
+
color: var(--sk-select-fg);
|
|
8295
|
+
cursor: pointer;
|
|
8296
|
+
outline: none;
|
|
8297
|
+
transition-property: background, border-color;
|
|
8298
|
+
transition-duration: var(--sk-transition-duration-base);
|
|
8299
|
+
}
|
|
8300
|
+
.sk-select.sk-sm .sk-select-trigger {
|
|
8301
|
+
height: 2rem;
|
|
8302
|
+
padding: 0 var(--sk-space-sm);
|
|
8303
|
+
font-size: 0.875rem;
|
|
8304
|
+
}
|
|
8305
|
+
.sk-select.sk-md .sk-select-trigger {
|
|
8306
|
+
height: 2.5rem;
|
|
8307
|
+
padding: 0 var(--sk-space-md);
|
|
8308
|
+
font-size: 1rem;
|
|
8309
|
+
}
|
|
8310
|
+
.sk-select.sk-lg .sk-select-trigger {
|
|
8311
|
+
height: 3rem;
|
|
8312
|
+
padding: 0 var(--sk-space-md);
|
|
8313
|
+
font-size: 1.125rem;
|
|
8314
|
+
}
|
|
8315
|
+
.sk-select.sk-xl .sk-select-trigger {
|
|
8316
|
+
height: 3.5rem;
|
|
8317
|
+
padding: 0 var(--sk-space-md);
|
|
8318
|
+
font-size: 1.25rem;
|
|
8319
|
+
}
|
|
8320
|
+
.sk-select-trigger:focus-visible {
|
|
8321
|
+
border-color: color-mix(in oklch, var(--sk-select-color-base), white 35%);
|
|
8322
|
+
background: color-mix(in oklch, color-mix(in oklch, var(--sk-select-color-base) 75%, transparent 25%), #000 25%);
|
|
8323
|
+
}
|
|
8324
|
+
.sk-select-trigger:hover:not(:disabled) {
|
|
8325
|
+
border-color: color-mix(in oklch, var(--sk-select-color-base), white 20%);
|
|
8326
|
+
}
|
|
8327
|
+
.sk-select-trigger:disabled {
|
|
8328
|
+
opacity: 0.5;
|
|
8329
|
+
cursor: not-allowed;
|
|
8330
|
+
}
|
|
8331
|
+
.sk-select-trigger > span {
|
|
8332
|
+
flex: 1;
|
|
8333
|
+
color: white;
|
|
8334
|
+
overflow: hidden;
|
|
8335
|
+
text-overflow: ellipsis;
|
|
8336
|
+
white-space: nowrap;
|
|
8337
|
+
}
|
|
8338
|
+
.sk-select-trigger > span[data-placeholder] {
|
|
8339
|
+
color: color-mix(in oklch, var(--sk-select-fg), transparent 50%);
|
|
8340
|
+
}
|
|
8341
|
+
.sk-select-trigger > svg {
|
|
8342
|
+
flex-shrink: 0;
|
|
8343
|
+
opacity: 0.8;
|
|
8344
|
+
}
|
|
8345
|
+
.sk-select-content {
|
|
8346
|
+
--sk-menu-color-base: var(--sk-neutral-base);
|
|
8347
|
+
--sk-menu-fg: var(--sk-neutral-text);
|
|
8348
|
+
position: relative;
|
|
8349
|
+
min-width: var(--reka-select-trigger-width);
|
|
8350
|
+
max-height: 20rem;
|
|
8351
|
+
overflow: auto;
|
|
8352
|
+
padding: var(--sk-space-xs);
|
|
8353
|
+
z-index: 1000;
|
|
8354
|
+
}
|
|
8355
|
+
@supports (corner-shape: bevel) {
|
|
8356
|
+
.sk-select-content {
|
|
8357
|
+
border: var(--sk-border-width-thin) solid var(--sk-menu-color-base);
|
|
8358
|
+
border-top-left-radius: 0.625rem;
|
|
8359
|
+
border-top-right-radius: 0;
|
|
8360
|
+
border-bottom-right-radius: 0;
|
|
8361
|
+
border-bottom-left-radius: 0;
|
|
8362
|
+
corner-shape: bevel;
|
|
8363
|
+
}
|
|
8364
|
+
}
|
|
8365
|
+
@supports not (corner-shape: bevel) {
|
|
8366
|
+
.sk-select-content {
|
|
8367
|
+
border: none;
|
|
8368
|
+
clip-path: polygon(0.625rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0.625rem);
|
|
8369
|
+
}
|
|
8370
|
+
.sk-select-content::before {
|
|
8371
|
+
content: "";
|
|
8372
|
+
position: absolute;
|
|
8373
|
+
top: 0;
|
|
8374
|
+
left: 0;
|
|
8375
|
+
right: 0;
|
|
8376
|
+
bottom: 0;
|
|
8377
|
+
background-color: var(--sk-menu-color-base);
|
|
8378
|
+
z-index: -1;
|
|
8379
|
+
clip-path: polygon(0.625rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0.625rem, 0.625rem 0%, calc(0.625rem + var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(0.625rem + var(--sk-border-width-thin)), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) var(--sk-border-width-thin), calc(0.625rem + var(--sk-border-width-thin)) var(--sk-border-width-thin));
|
|
8380
|
+
}
|
|
8381
|
+
}
|
|
8382
|
+
.sk-select-content {
|
|
8383
|
+
background: color-mix(in oklch, color-mix(in oklch, var(--sk-menu-color-base) 95%, transparent 5%), #000 46.25%);
|
|
8384
|
+
color: var(--sk-menu-fg);
|
|
8385
|
+
box-shadow: var(--sk-shadow-lg);
|
|
8386
|
+
}
|
|
8387
|
+
.sk-select-content.sk-neutral {
|
|
8388
|
+
--sk-menu-color-base: var(--sk-neutral-base);
|
|
8389
|
+
--sk-menu-fg: var(--sk-neutral-text);
|
|
8390
|
+
}
|
|
8391
|
+
.sk-select-content.sk-primary {
|
|
8392
|
+
--sk-menu-color-base: var(--sk-primary-base);
|
|
8393
|
+
--sk-menu-fg: var(--sk-primary-text);
|
|
8394
|
+
}
|
|
8395
|
+
.sk-select-content.sk-accent {
|
|
8396
|
+
--sk-menu-color-base: var(--sk-accent-base);
|
|
8397
|
+
--sk-menu-fg: var(--sk-accent-text);
|
|
8398
|
+
}
|
|
8399
|
+
.sk-select-content.sk-info {
|
|
8400
|
+
--sk-menu-color-base: var(--sk-info-base);
|
|
8401
|
+
--sk-menu-fg: var(--sk-info-text);
|
|
8402
|
+
}
|
|
8403
|
+
.sk-select-content.sk-success {
|
|
8404
|
+
--sk-menu-color-base: var(--sk-success-base);
|
|
8405
|
+
--sk-menu-fg: var(--sk-success-text);
|
|
8406
|
+
}
|
|
8407
|
+
.sk-select-content.sk-warning {
|
|
8408
|
+
--sk-menu-color-base: var(--sk-warning-base);
|
|
8409
|
+
--sk-menu-fg: var(--sk-warning-text);
|
|
8410
|
+
}
|
|
8411
|
+
.sk-select-content.sk-danger {
|
|
8412
|
+
--sk-menu-color-base: var(--sk-danger-base);
|
|
8413
|
+
--sk-menu-fg: var(--sk-danger-text);
|
|
8414
|
+
}
|
|
8415
|
+
.sk-select-content.sk-neon-blue {
|
|
8416
|
+
--sk-menu-color-base: var(--sk-neon-blue-base);
|
|
8417
|
+
--sk-menu-fg: var(--sk-neon-blue-text);
|
|
8418
|
+
}
|
|
8419
|
+
.sk-select-content.sk-neon-purple {
|
|
8420
|
+
--sk-menu-color-base: var(--sk-neon-purple-base);
|
|
8421
|
+
--sk-menu-fg: var(--sk-neon-purple-text);
|
|
8422
|
+
}
|
|
8423
|
+
.sk-select-content.sk-neon-orange {
|
|
8424
|
+
--sk-menu-color-base: var(--sk-neon-orange-base);
|
|
8425
|
+
--sk-menu-fg: var(--sk-neon-orange-text);
|
|
8426
|
+
}
|
|
8427
|
+
.sk-select-content.sk-neon-green {
|
|
8428
|
+
--sk-menu-color-base: var(--sk-neon-green-base);
|
|
8429
|
+
--sk-menu-fg: var(--sk-neon-green-text);
|
|
8430
|
+
}
|
|
8431
|
+
.sk-select-content.sk-neon-mint {
|
|
8432
|
+
--sk-menu-color-base: var(--sk-neon-mint-base);
|
|
8433
|
+
--sk-menu-fg: var(--sk-neon-mint-text);
|
|
8434
|
+
}
|
|
8435
|
+
.sk-select-content.sk-neon-pink {
|
|
8436
|
+
--sk-menu-color-base: var(--sk-neon-pink-base);
|
|
8437
|
+
--sk-menu-fg: var(--sk-neon-pink-text);
|
|
8438
|
+
}
|
|
8439
|
+
.sk-select-content.sk-yellow {
|
|
8440
|
+
--sk-menu-color-base: var(--sk-yellow-base);
|
|
8441
|
+
--sk-menu-fg: var(--sk-yellow-text);
|
|
8442
|
+
}
|
|
8443
|
+
.sk-select-content.sk-red {
|
|
8444
|
+
--sk-menu-color-base: var(--sk-red-base);
|
|
8445
|
+
--sk-menu-fg: var(--sk-red-text);
|
|
8446
|
+
}
|
|
8447
|
+
.sk-select-item {
|
|
8448
|
+
display: flex;
|
|
8449
|
+
align-items: center;
|
|
8450
|
+
justify-content: space-between;
|
|
8451
|
+
gap: var(--sk-space-md);
|
|
8452
|
+
padding: var(--sk-space-xs) var(--sk-space-md);
|
|
8453
|
+
cursor: pointer;
|
|
8454
|
+
color: color-mix(in oklch, var(--sk-menu-fg), black 15%);
|
|
8455
|
+
font-size: 0.875rem;
|
|
8456
|
+
outline: none;
|
|
8457
|
+
user-select: none;
|
|
8458
|
+
}
|
|
8459
|
+
@supports (corner-shape: bevel) {
|
|
8460
|
+
.sk-select-item {
|
|
8461
|
+
border: var(--sk-border-width-thin) solid transparent;
|
|
8462
|
+
border-top-left-radius: 0.5rem;
|
|
8463
|
+
border-top-right-radius: 0;
|
|
8464
|
+
border-bottom-right-radius: 0.5rem;
|
|
8465
|
+
border-bottom-left-radius: 0;
|
|
8466
|
+
corner-shape: bevel;
|
|
8467
|
+
}
|
|
8468
|
+
}
|
|
8469
|
+
@supports not (corner-shape: bevel) {
|
|
8470
|
+
.sk-select-item {
|
|
8471
|
+
border: none;
|
|
8472
|
+
clip-path: polygon(0.5rem 0%, 100% 0%, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0% 100%, 0% 0.5rem);
|
|
8473
|
+
}
|
|
8474
|
+
.sk-select-item::before {
|
|
8475
|
+
content: "";
|
|
8476
|
+
position: absolute;
|
|
8477
|
+
top: 0;
|
|
8478
|
+
left: 0;
|
|
8479
|
+
right: 0;
|
|
8480
|
+
bottom: 0;
|
|
8481
|
+
background-color: transparent;
|
|
8482
|
+
z-index: -1;
|
|
8483
|
+
clip-path: polygon(0.5rem 0%, 100% 0%, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0% 100%, 0% 0.5rem, 0.5rem 0%, calc(0.5rem + var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(0.5rem + var(--sk-border-width-thin)), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - 0.5rem - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - 0.5rem - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) var(--sk-border-width-thin), calc(0.5rem + var(--sk-border-width-thin)) var(--sk-border-width-thin));
|
|
8484
|
+
}
|
|
8485
|
+
}
|
|
8486
|
+
.sk-select-item:hover:not([data-disabled]) {
|
|
8487
|
+
background: color-mix(in oklch, color-mix(in oklch, var(--sk-menu-color-base), black 30%), transparent 10%);
|
|
8488
|
+
color: var(--sk-menu-fg);
|
|
8489
|
+
}
|
|
8490
|
+
.sk-select-item[data-highlighted] {
|
|
8491
|
+
background: color-mix(in oklch, color-mix(in oklch, var(--sk-menu-color-base), black 30%), transparent 10%);
|
|
8492
|
+
color: var(--sk-menu-fg);
|
|
8493
|
+
outline: none;
|
|
8494
|
+
}
|
|
8495
|
+
.sk-select-item[data-disabled] {
|
|
8496
|
+
opacity: 0.5;
|
|
8497
|
+
cursor: not-allowed;
|
|
8498
|
+
}
|
|
8499
|
+
.sk-select-item-indicator {
|
|
8500
|
+
display: flex;
|
|
8501
|
+
align-items: center;
|
|
8502
|
+
justify-content: center;
|
|
8503
|
+
flex-shrink: 0;
|
|
8504
|
+
}
|
|
8505
|
+
.sk-select-separator {
|
|
8506
|
+
height: 1px;
|
|
8507
|
+
margin: var(--sk-space-xs) 0;
|
|
8508
|
+
background: color-mix(in oklch, var(--sk-menu-color-base), transparent 70%);
|
|
7539
8509
|
}
|
|
7540
8510
|
.sk-sidebar {
|
|
7541
8511
|
width: var(--sk-sidebar-width, 180px);
|
|
7542
8512
|
flex-shrink: 0;
|
|
8513
|
+
--sk-sidebar-color-base: var(--sk-neutral-base);
|
|
8514
|
+
--sk-sidebar-item-bg: color-mix(
|
|
8515
|
+
in oklch,
|
|
8516
|
+
color-mix(in oklch, var(--sk-sidebar-color-base) 75%, transparent 25%),
|
|
8517
|
+
#000 46.25%
|
|
8518
|
+
);
|
|
8519
|
+
--sk-sidebar-item-hover-bg: color-mix(in oklch, var(--sk-sidebar-item-bg) 85%, white 15%);
|
|
8520
|
+
--sk-sidebar-item-hover-text: color-mix(in oklch, var(--sk-sidebar-color-base), white 30%);
|
|
8521
|
+
--sk-sidebar-item-active-text: color-mix(in oklch, var(--sk-sidebar-color-base), white 50%);
|
|
8522
|
+
--sk-sidebar-item-active-bg: var(--sk-sidebar-item-bg);
|
|
8523
|
+
}
|
|
8524
|
+
.sk-sidebar.sk-primary {
|
|
8525
|
+
--sk-sidebar-color-base: var(--sk-primary-base);
|
|
8526
|
+
}
|
|
8527
|
+
.sk-sidebar.sk-accent {
|
|
8528
|
+
--sk-sidebar-color-base: var(--sk-accent-base);
|
|
8529
|
+
}
|
|
8530
|
+
.sk-sidebar.sk-info {
|
|
8531
|
+
--sk-sidebar-color-base: var(--sk-info-base);
|
|
8532
|
+
}
|
|
8533
|
+
.sk-sidebar.sk-success {
|
|
8534
|
+
--sk-sidebar-color-base: var(--sk-success-base);
|
|
8535
|
+
}
|
|
8536
|
+
.sk-sidebar.sk-warning {
|
|
8537
|
+
--sk-sidebar-color-base: var(--sk-warning-base);
|
|
8538
|
+
}
|
|
8539
|
+
.sk-sidebar.sk-danger {
|
|
8540
|
+
--sk-sidebar-color-base: var(--sk-danger-base);
|
|
7543
8541
|
}
|
|
7544
8542
|
.sk-sidebar .sk-sidebar-nav {
|
|
7545
8543
|
display: flex;
|
|
@@ -7560,6 +8558,7 @@
|
|
|
7560
8558
|
margin: 0.5rem 0 0.5rem 0;
|
|
7561
8559
|
}
|
|
7562
8560
|
.sk-sidebar-item {
|
|
8561
|
+
position: relative;
|
|
7563
8562
|
color: var(--sk-neutral-text);
|
|
7564
8563
|
text-decoration: none;
|
|
7565
8564
|
padding: 0.5rem 0.75rem;
|
|
@@ -7569,16 +8568,32 @@
|
|
|
7569
8568
|
display: block;
|
|
7570
8569
|
}
|
|
7571
8570
|
.sk-sidebar-item:hover {
|
|
7572
|
-
background:
|
|
7573
|
-
color: var(--sk-
|
|
8571
|
+
background: var(--sk-sidebar-item-hover-bg);
|
|
8572
|
+
color: var(--sk-sidebar-item-hover-text);
|
|
7574
8573
|
clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
|
|
7575
8574
|
}
|
|
7576
8575
|
.sk-sidebar-item.sk-active, .sk-sidebar-item.router-link-active {
|
|
7577
|
-
background:
|
|
7578
|
-
color: var(--sk-
|
|
8576
|
+
background: var(--sk-sidebar-item-active-bg);
|
|
8577
|
+
color: var(--sk-sidebar-item-active-text);
|
|
7579
8578
|
font-weight: 600;
|
|
7580
8579
|
clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
|
|
7581
8580
|
}
|
|
8581
|
+
.sk-sidebar-item.sk-active::before, .sk-sidebar-item.router-link-active::before {
|
|
8582
|
+
content: "";
|
|
8583
|
+
position: absolute;
|
|
8584
|
+
inset: 0;
|
|
8585
|
+
background: var(--sk-sidebar-color-base);
|
|
8586
|
+
clip-path: polygon(0% 100%, 0px 10px, 10px 0px, 11.41px 1.41px, 2px 10.83px, 2px 100%);
|
|
8587
|
+
}
|
|
8588
|
+
.sk-sidebar-right .sk-sidebar-item:hover {
|
|
8589
|
+
clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 10px, 100% 100%, 10px 100%, 0% calc(100% - 10px));
|
|
8590
|
+
}
|
|
8591
|
+
.sk-sidebar-right .sk-sidebar-item.sk-active, .sk-sidebar-right .sk-sidebar-item.router-link-active {
|
|
8592
|
+
clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 10px, 100% 100%, 10px 100%, 0% calc(100% - 10px));
|
|
8593
|
+
}
|
|
8594
|
+
.sk-sidebar-right .sk-sidebar-item.sk-active::before, .sk-sidebar-right .sk-sidebar-item.router-link-active::before {
|
|
8595
|
+
clip-path: polygon(100% 100%, 100% 10px, calc(100% - 10px) 0px, calc(100% - 11.41px) 1.41px, calc(100% - 2px) 10.83px, calc(100% - 2px) 100%);
|
|
8596
|
+
}
|
|
7582
8597
|
.sk-skeleton {
|
|
7583
8598
|
--sk-skeleton-base: oklch(from var(--sk-neutral-base) l c h / 0.12);
|
|
7584
8599
|
--sk-skeleton-highlight: oklch(from var(--sk-neutral-base) calc(l * 1.3) c h / 0.25);
|
|
@@ -8104,6 +9119,93 @@
|
|
|
8104
9119
|
opacity: 0.3;
|
|
8105
9120
|
}
|
|
8106
9121
|
}
|
|
9122
|
+
.sk-splitter {
|
|
9123
|
+
--sk-splitter-color-base: var(--sk-neutral-base);
|
|
9124
|
+
--sk-splitter-handle-color: var(--sk-splitter-color-base);
|
|
9125
|
+
--sk-splitter-handle-size: 4px;
|
|
9126
|
+
--sk-splitter-handle-gap: 0.5rem;
|
|
9127
|
+
display: flex;
|
|
9128
|
+
width: 100%;
|
|
9129
|
+
height: 100%;
|
|
9130
|
+
}
|
|
9131
|
+
.sk-splitter.sk-horizontal {
|
|
9132
|
+
flex-direction: row;
|
|
9133
|
+
}
|
|
9134
|
+
.sk-splitter.sk-vertical {
|
|
9135
|
+
flex-direction: column;
|
|
9136
|
+
}
|
|
9137
|
+
.sk-splitter.sk-neutral {
|
|
9138
|
+
--sk-splitter-color-base: var(--sk-neutral-base);
|
|
9139
|
+
}
|
|
9140
|
+
.sk-splitter.sk-primary {
|
|
9141
|
+
--sk-splitter-color-base: var(--sk-primary-base);
|
|
9142
|
+
}
|
|
9143
|
+
.sk-splitter.sk-accent {
|
|
9144
|
+
--sk-splitter-color-base: var(--sk-accent-base);
|
|
9145
|
+
}
|
|
9146
|
+
.sk-splitter.sk-info {
|
|
9147
|
+
--sk-splitter-color-base: var(--sk-info-base);
|
|
9148
|
+
}
|
|
9149
|
+
.sk-splitter.sk-success {
|
|
9150
|
+
--sk-splitter-color-base: var(--sk-success-base);
|
|
9151
|
+
}
|
|
9152
|
+
.sk-splitter.sk-warning {
|
|
9153
|
+
--sk-splitter-color-base: var(--sk-warning-base);
|
|
9154
|
+
}
|
|
9155
|
+
.sk-splitter.sk-danger {
|
|
9156
|
+
--sk-splitter-color-base: var(--sk-danger-base);
|
|
9157
|
+
}
|
|
9158
|
+
.sk-splitter-panel {
|
|
9159
|
+
overflow: auto;
|
|
9160
|
+
}
|
|
9161
|
+
.sk-splitter-handle {
|
|
9162
|
+
position: relative;
|
|
9163
|
+
display: flex;
|
|
9164
|
+
align-items: center;
|
|
9165
|
+
justify-content: center;
|
|
9166
|
+
background: oklch(from var(--sk-splitter-handle-color) l c h/0.1);
|
|
9167
|
+
transition: background var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
|
|
9168
|
+
}
|
|
9169
|
+
.sk-horizontal > .sk-splitter-handle {
|
|
9170
|
+
width: var(--sk-splitter-handle-size);
|
|
9171
|
+
cursor: col-resize;
|
|
9172
|
+
}
|
|
9173
|
+
.sk-vertical > .sk-splitter-handle {
|
|
9174
|
+
height: var(--sk-splitter-handle-size);
|
|
9175
|
+
cursor: row-resize;
|
|
9176
|
+
}
|
|
9177
|
+
.sk-splitter-handle:hover:not([data-disabled]) {
|
|
9178
|
+
background: oklch(from var(--sk-splitter-handle-color) l c h/0.25);
|
|
9179
|
+
}
|
|
9180
|
+
.sk-splitter-handle:active:not([data-disabled]) {
|
|
9181
|
+
background: oklch(from var(--sk-splitter-handle-color) l c h/0.4);
|
|
9182
|
+
}
|
|
9183
|
+
.sk-splitter-handle:focus-visible {
|
|
9184
|
+
outline: var(--sk-border-width-base) solid var(--sk-splitter-handle-color);
|
|
9185
|
+
outline-offset: -2px;
|
|
9186
|
+
}
|
|
9187
|
+
.sk-splitter-handle[data-disabled] {
|
|
9188
|
+
opacity: 0.5;
|
|
9189
|
+
cursor: not-allowed;
|
|
9190
|
+
}
|
|
9191
|
+
.sk-splitter-handle-grip {
|
|
9192
|
+
display: flex;
|
|
9193
|
+
gap: 2px;
|
|
9194
|
+
opacity: 0.5;
|
|
9195
|
+
transition: opacity var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
|
|
9196
|
+
}
|
|
9197
|
+
.sk-splitter-handle:hover .sk-splitter-handle-grip {
|
|
9198
|
+
opacity: 0.8;
|
|
9199
|
+
}
|
|
9200
|
+
.sk-horizontal > .sk-splitter-handle .sk-splitter-handle-grip {
|
|
9201
|
+
flex-direction: column;
|
|
9202
|
+
}
|
|
9203
|
+
.sk-splitter-handle-dot {
|
|
9204
|
+
width: 3px;
|
|
9205
|
+
height: 3px;
|
|
9206
|
+
border-radius: 50%;
|
|
9207
|
+
background: var(--sk-splitter-handle-color);
|
|
9208
|
+
}
|
|
8107
9209
|
.sk-switch-wrapper {
|
|
8108
9210
|
--sk-switch-track-width: 36px;
|
|
8109
9211
|
--sk-switch-track-height: 20px;
|
|
@@ -12177,6 +13279,247 @@
|
|
|
12177
13279
|
transform: translateX(calc(100% + var(--sk-space-md)));
|
|
12178
13280
|
}
|
|
12179
13281
|
}
|
|
13282
|
+
.sk-toolbar {
|
|
13283
|
+
--sk-toolbar-color-base: var(--sk-neutral-base);
|
|
13284
|
+
--sk-toolbar-fg: var(--sk-neutral-text);
|
|
13285
|
+
--sk-toolbar-hover: var(--sk-neutral-hover);
|
|
13286
|
+
--sk-toolbar-active: var(--sk-neutral-active);
|
|
13287
|
+
--sk-toolbar-cut-size: calc(2.5rem / var(--sk-border-radius-factor));
|
|
13288
|
+
--sk-toolbar-border-width: var(--sk-border-width-thin);
|
|
13289
|
+
--sk-toolbar-border-color: oklch(from var(--sk-toolbar-color-base) l c h / 0.2);
|
|
13290
|
+
--sk-toolbar-cut-tl: 0px;
|
|
13291
|
+
--sk-toolbar-cut-tr: 0px;
|
|
13292
|
+
--sk-toolbar-cut-br: 0px;
|
|
13293
|
+
--sk-toolbar-cut-bl: 0px;
|
|
13294
|
+
display: flex;
|
|
13295
|
+
align-items: center;
|
|
13296
|
+
gap: var(--sk-space-xs);
|
|
13297
|
+
padding: var(--sk-space-xs);
|
|
13298
|
+
background: oklch(from var(--sk-toolbar-color-base) l c h/0.08);
|
|
13299
|
+
position: relative;
|
|
13300
|
+
}
|
|
13301
|
+
.sk-toolbar.sk-vertical {
|
|
13302
|
+
flex-direction: column;
|
|
13303
|
+
}
|
|
13304
|
+
.sk-toolbar.sk-cut-top-left {
|
|
13305
|
+
--sk-toolbar-cut-tl: var(--sk-toolbar-cut-size);
|
|
13306
|
+
}
|
|
13307
|
+
.sk-toolbar.sk-cut-top-right {
|
|
13308
|
+
--sk-toolbar-cut-tr: var(--sk-toolbar-cut-size);
|
|
13309
|
+
}
|
|
13310
|
+
.sk-toolbar.sk-cut-bottom-right {
|
|
13311
|
+
--sk-toolbar-cut-br: var(--sk-toolbar-cut-size);
|
|
13312
|
+
}
|
|
13313
|
+
.sk-toolbar.sk-cut-bottom-left {
|
|
13314
|
+
--sk-toolbar-cut-bl: var(--sk-toolbar-cut-size);
|
|
13315
|
+
}
|
|
13316
|
+
@supports (corner-shape: bevel) {
|
|
13317
|
+
.sk-toolbar {
|
|
13318
|
+
border: var(--sk-toolbar-border-width) solid var(--sk-toolbar-border-color);
|
|
13319
|
+
border-top-left-radius: var(--sk-toolbar-cut-tl);
|
|
13320
|
+
border-top-right-radius: var(--sk-toolbar-cut-tr);
|
|
13321
|
+
border-bottom-right-radius: var(--sk-toolbar-cut-br);
|
|
13322
|
+
border-bottom-left-radius: var(--sk-toolbar-cut-bl);
|
|
13323
|
+
corner-shape: bevel;
|
|
13324
|
+
}
|
|
13325
|
+
}
|
|
13326
|
+
@supports not (corner-shape: bevel) {
|
|
13327
|
+
.sk-toolbar {
|
|
13328
|
+
border: none;
|
|
13329
|
+
clip-path: polygon(var(--sk-toolbar-cut-tl) 0, calc(100% - var(--sk-toolbar-cut-tr)) 0, 100% var(--sk-toolbar-cut-tr), 100% calc(100% - var(--sk-toolbar-cut-br)), calc(100% - var(--sk-toolbar-cut-br)) 100%, var(--sk-toolbar-cut-bl) 100%, 0 calc(100% - var(--sk-toolbar-cut-bl)), 0 var(--sk-toolbar-cut-tl));
|
|
13330
|
+
}
|
|
13331
|
+
.sk-toolbar::before {
|
|
13332
|
+
content: "";
|
|
13333
|
+
position: absolute;
|
|
13334
|
+
top: 0;
|
|
13335
|
+
left: 0;
|
|
13336
|
+
right: 0;
|
|
13337
|
+
bottom: 0;
|
|
13338
|
+
background-color: var(--sk-toolbar-border-color);
|
|
13339
|
+
z-index: -1;
|
|
13340
|
+
clip-path: polygon(var(--sk-toolbar-cut-tl) 0, calc(100% - var(--sk-toolbar-cut-tr)) 0, 100% var(--sk-toolbar-cut-tr), 100% calc(100% - var(--sk-toolbar-cut-br)), calc(100% - var(--sk-toolbar-cut-br)) 100%, var(--sk-toolbar-cut-bl) 100%, 0 calc(100% - var(--sk-toolbar-cut-bl)), 0 var(--sk-toolbar-cut-tl), var(--sk-toolbar-cut-tl) 0, calc(var(--sk-toolbar-cut-tl) + var(--sk-toolbar-border-width)) var(--sk-toolbar-border-width), var(--sk-toolbar-border-width) calc(var(--sk-toolbar-cut-tl) + var(--sk-toolbar-border-width)), var(--sk-toolbar-border-width) calc(100% - var(--sk-toolbar-cut-bl) - var(--sk-toolbar-border-width)), calc(var(--sk-toolbar-cut-bl) + var(--sk-toolbar-border-width)) calc(100% - var(--sk-toolbar-border-width)), calc(100% - var(--sk-toolbar-cut-br) - var(--sk-toolbar-border-width)) calc(100% - var(--sk-toolbar-border-width)), calc(100% - var(--sk-toolbar-border-width)) calc(100% - var(--sk-toolbar-cut-br) - var(--sk-toolbar-border-width)), calc(100% - var(--sk-toolbar-border-width)) calc(var(--sk-toolbar-cut-tr) + var(--sk-toolbar-border-width)), calc(100% - var(--sk-toolbar-cut-tr) - var(--sk-toolbar-border-width)) var(--sk-toolbar-border-width), calc(var(--sk-toolbar-cut-tl) + var(--sk-toolbar-border-width)) var(--sk-toolbar-border-width));
|
|
13341
|
+
}
|
|
13342
|
+
}
|
|
13343
|
+
.sk-toolbar.sk-neutral {
|
|
13344
|
+
--sk-toolbar-color-base: var(--sk-neutral-base);
|
|
13345
|
+
--sk-toolbar-fg: var(--sk-neutral-text);
|
|
13346
|
+
--sk-toolbar-hover: var(--sk-neutral-hover);
|
|
13347
|
+
--sk-toolbar-active: var(--sk-neutral-active);
|
|
13348
|
+
}
|
|
13349
|
+
.sk-toolbar.sk-primary {
|
|
13350
|
+
--sk-toolbar-color-base: var(--sk-primary-base);
|
|
13351
|
+
--sk-toolbar-fg: var(--sk-primary-text);
|
|
13352
|
+
--sk-toolbar-hover: var(--sk-primary-hover);
|
|
13353
|
+
--sk-toolbar-active: var(--sk-primary-active);
|
|
13354
|
+
}
|
|
13355
|
+
.sk-toolbar.sk-accent {
|
|
13356
|
+
--sk-toolbar-color-base: var(--sk-accent-base);
|
|
13357
|
+
--sk-toolbar-fg: var(--sk-accent-text);
|
|
13358
|
+
--sk-toolbar-hover: var(--sk-accent-hover);
|
|
13359
|
+
--sk-toolbar-active: var(--sk-accent-active);
|
|
13360
|
+
}
|
|
13361
|
+
.sk-toolbar.sk-info {
|
|
13362
|
+
--sk-toolbar-color-base: var(--sk-info-base);
|
|
13363
|
+
--sk-toolbar-fg: var(--sk-info-text);
|
|
13364
|
+
--sk-toolbar-hover: var(--sk-info-hover);
|
|
13365
|
+
--sk-toolbar-active: var(--sk-info-active);
|
|
13366
|
+
}
|
|
13367
|
+
.sk-toolbar.sk-success {
|
|
13368
|
+
--sk-toolbar-color-base: var(--sk-success-base);
|
|
13369
|
+
--sk-toolbar-fg: var(--sk-success-text);
|
|
13370
|
+
--sk-toolbar-hover: var(--sk-success-hover);
|
|
13371
|
+
--sk-toolbar-active: var(--sk-success-active);
|
|
13372
|
+
}
|
|
13373
|
+
.sk-toolbar.sk-warning {
|
|
13374
|
+
--sk-toolbar-color-base: var(--sk-warning-base);
|
|
13375
|
+
--sk-toolbar-fg: var(--sk-warning-text);
|
|
13376
|
+
--sk-toolbar-hover: var(--sk-warning-hover);
|
|
13377
|
+
--sk-toolbar-active: var(--sk-warning-active);
|
|
13378
|
+
}
|
|
13379
|
+
.sk-toolbar.sk-danger {
|
|
13380
|
+
--sk-toolbar-color-base: var(--sk-danger-base);
|
|
13381
|
+
--sk-toolbar-fg: var(--sk-danger-text);
|
|
13382
|
+
--sk-toolbar-hover: var(--sk-danger-hover);
|
|
13383
|
+
--sk-toolbar-active: var(--sk-danger-active);
|
|
13384
|
+
}
|
|
13385
|
+
.sk-toolbar-button {
|
|
13386
|
+
display: flex;
|
|
13387
|
+
align-items: center;
|
|
13388
|
+
justify-content: center;
|
|
13389
|
+
gap: var(--sk-space-xs);
|
|
13390
|
+
padding: var(--sk-space-xs) var(--sk-space-sm);
|
|
13391
|
+
border: none;
|
|
13392
|
+
background: transparent;
|
|
13393
|
+
color: var(--sk-toolbar-fg);
|
|
13394
|
+
cursor: pointer;
|
|
13395
|
+
font-size: var(--sk-font-size-sm);
|
|
13396
|
+
line-height: 1;
|
|
13397
|
+
}
|
|
13398
|
+
@supports (corner-shape: bevel) {
|
|
13399
|
+
.sk-toolbar-button {
|
|
13400
|
+
border: 0px solid transparent;
|
|
13401
|
+
border-top-left-radius: 10px;
|
|
13402
|
+
border-top-right-radius: 0;
|
|
13403
|
+
border-bottom-right-radius: 10px;
|
|
13404
|
+
border-bottom-left-radius: 0;
|
|
13405
|
+
corner-shape: bevel;
|
|
13406
|
+
}
|
|
13407
|
+
}
|
|
13408
|
+
@supports not (corner-shape: bevel) {
|
|
13409
|
+
.sk-toolbar-button {
|
|
13410
|
+
border: none;
|
|
13411
|
+
clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
|
|
13412
|
+
}
|
|
13413
|
+
.sk-toolbar-button::before {
|
|
13414
|
+
content: "";
|
|
13415
|
+
position: absolute;
|
|
13416
|
+
top: 0;
|
|
13417
|
+
left: 0;
|
|
13418
|
+
right: 0;
|
|
13419
|
+
bottom: 0;
|
|
13420
|
+
background-color: transparent;
|
|
13421
|
+
z-index: -1;
|
|
13422
|
+
clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px, 10px 0%, calc(10px + 0px) 0px, 0px calc(10px + 0px), 0px calc(100% - 0px), calc(100% - 10px - 0px) calc(100% - 0px), calc(100% - 0px) calc(100% - 10px - 0px), calc(100% - 0px) 0px, calc(10px + 0px) 0px);
|
|
13423
|
+
}
|
|
13424
|
+
}
|
|
13425
|
+
.sk-toolbar-button {
|
|
13426
|
+
transition: background var(--sk-transition-duration-fast) var(--sk-transition-timing-default), color var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
|
|
13427
|
+
}
|
|
13428
|
+
.sk-toolbar-button:hover:not(:disabled) {
|
|
13429
|
+
background: oklch(from var(--sk-toolbar-color-base) l c h/0.15);
|
|
13430
|
+
}
|
|
13431
|
+
.sk-toolbar-button:active:not(:disabled) {
|
|
13432
|
+
background: oklch(from var(--sk-toolbar-color-base) l c h/0.25);
|
|
13433
|
+
}
|
|
13434
|
+
.sk-toolbar-button:focus-visible {
|
|
13435
|
+
outline: var(--sk-border-width-base) solid var(--sk-toolbar-color-base);
|
|
13436
|
+
outline-offset: 2px;
|
|
13437
|
+
}
|
|
13438
|
+
.sk-toolbar-button:disabled {
|
|
13439
|
+
opacity: 0.5;
|
|
13440
|
+
cursor: not-allowed;
|
|
13441
|
+
}
|
|
13442
|
+
.sk-toolbar-toggle-group {
|
|
13443
|
+
display: flex;
|
|
13444
|
+
align-items: center;
|
|
13445
|
+
gap: 1px;
|
|
13446
|
+
}
|
|
13447
|
+
.sk-toolbar-toggle-item {
|
|
13448
|
+
display: flex;
|
|
13449
|
+
align-items: center;
|
|
13450
|
+
justify-content: center;
|
|
13451
|
+
padding: var(--sk-space-xs) var(--sk-space-sm);
|
|
13452
|
+
border: none;
|
|
13453
|
+
background: transparent;
|
|
13454
|
+
color: var(--sk-toolbar-fg);
|
|
13455
|
+
cursor: pointer;
|
|
13456
|
+
font-size: var(--sk-font-size-sm);
|
|
13457
|
+
line-height: 1;
|
|
13458
|
+
}
|
|
13459
|
+
@supports (corner-shape: bevel) {
|
|
13460
|
+
.sk-toolbar-toggle-item {
|
|
13461
|
+
border: 0px solid transparent;
|
|
13462
|
+
border-top-left-radius: 10px;
|
|
13463
|
+
border-top-right-radius: 0;
|
|
13464
|
+
border-bottom-right-radius: 10px;
|
|
13465
|
+
border-bottom-left-radius: 0;
|
|
13466
|
+
corner-shape: bevel;
|
|
13467
|
+
}
|
|
13468
|
+
}
|
|
13469
|
+
@supports not (corner-shape: bevel) {
|
|
13470
|
+
.sk-toolbar-toggle-item {
|
|
13471
|
+
border: none;
|
|
13472
|
+
clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
|
|
13473
|
+
}
|
|
13474
|
+
.sk-toolbar-toggle-item::before {
|
|
13475
|
+
content: "";
|
|
13476
|
+
position: absolute;
|
|
13477
|
+
top: 0;
|
|
13478
|
+
left: 0;
|
|
13479
|
+
right: 0;
|
|
13480
|
+
bottom: 0;
|
|
13481
|
+
background-color: transparent;
|
|
13482
|
+
z-index: -1;
|
|
13483
|
+
clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px, 10px 0%, calc(10px + 0px) 0px, 0px calc(10px + 0px), 0px calc(100% - 0px), calc(100% - 10px - 0px) calc(100% - 0px), calc(100% - 0px) calc(100% - 10px - 0px), calc(100% - 0px) 0px, calc(10px + 0px) 0px);
|
|
13484
|
+
}
|
|
13485
|
+
}
|
|
13486
|
+
.sk-toolbar-toggle-item {
|
|
13487
|
+
transition: background var(--sk-transition-duration-fast) var(--sk-transition-timing-default), color var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
|
|
13488
|
+
}
|
|
13489
|
+
.sk-toolbar-toggle-item:hover:not(:disabled) {
|
|
13490
|
+
background: oklch(from var(--sk-toolbar-color-base) l c h/0.15);
|
|
13491
|
+
}
|
|
13492
|
+
.sk-toolbar-toggle-item:active:not(:disabled) {
|
|
13493
|
+
background: oklch(from var(--sk-toolbar-color-base) l c h/0.25);
|
|
13494
|
+
}
|
|
13495
|
+
.sk-toolbar-toggle-item[data-state=on] {
|
|
13496
|
+
background: oklch(from var(--sk-toolbar-color-base) l c h/0.25);
|
|
13497
|
+
color: var(--sk-toolbar-color-base);
|
|
13498
|
+
}
|
|
13499
|
+
.sk-toolbar-toggle-item[data-state=on]:hover:not(:disabled) {
|
|
13500
|
+
background: oklch(from var(--sk-toolbar-color-base) l c h/0.35);
|
|
13501
|
+
}
|
|
13502
|
+
.sk-toolbar-toggle-item:focus-visible {
|
|
13503
|
+
outline: var(--sk-border-width-base) solid var(--sk-toolbar-color-base);
|
|
13504
|
+
outline-offset: 2px;
|
|
13505
|
+
}
|
|
13506
|
+
.sk-toolbar-toggle-item:disabled {
|
|
13507
|
+
opacity: 0.5;
|
|
13508
|
+
cursor: not-allowed;
|
|
13509
|
+
}
|
|
13510
|
+
.sk-toolbar-separator {
|
|
13511
|
+
background: oklch(from var(--sk-toolbar-color-base) l c h/0.2);
|
|
13512
|
+
}
|
|
13513
|
+
.sk-toolbar.sk-horizontal > .sk-toolbar-separator {
|
|
13514
|
+
width: 1px;
|
|
13515
|
+
align-self: stretch;
|
|
13516
|
+
margin: var(--sk-space-xs) var(--sk-space-xxs);
|
|
13517
|
+
}
|
|
13518
|
+
.sk-toolbar.sk-vertical > .sk-toolbar-separator {
|
|
13519
|
+
height: 1px;
|
|
13520
|
+
align-self: stretch;
|
|
13521
|
+
margin: var(--sk-space-xxs) var(--sk-space-xs);
|
|
13522
|
+
}
|
|
12180
13523
|
.sk-tooltip-content {
|
|
12181
13524
|
--sk-tooltip-color-base: var(--sk-neutral-base);
|
|
12182
13525
|
--sk-tooltip-border-color: transparent;
|
|
@@ -12322,6 +13665,121 @@
|
|
|
12322
13665
|
transform: scale(0.95);
|
|
12323
13666
|
}
|
|
12324
13667
|
}
|
|
13668
|
+
.sk-tree-view {
|
|
13669
|
+
--sk-tree-color-base: var(--sk-neutral-base);
|
|
13670
|
+
--sk-tree-fg: var(--sk-neutral-text);
|
|
13671
|
+
--sk-tree-indent: 1.25rem;
|
|
13672
|
+
list-style: none;
|
|
13673
|
+
padding: 0;
|
|
13674
|
+
margin: 0;
|
|
13675
|
+
}
|
|
13676
|
+
.sk-tree-view.sk-neutral {
|
|
13677
|
+
--sk-tree-color-base: var(--sk-neutral-base);
|
|
13678
|
+
--sk-tree-fg: var(--sk-neutral-text);
|
|
13679
|
+
}
|
|
13680
|
+
.sk-tree-view.sk-primary {
|
|
13681
|
+
--sk-tree-color-base: var(--sk-primary-base);
|
|
13682
|
+
--sk-tree-fg: var(--sk-primary-text);
|
|
13683
|
+
}
|
|
13684
|
+
.sk-tree-view.sk-accent {
|
|
13685
|
+
--sk-tree-color-base: var(--sk-accent-base);
|
|
13686
|
+
--sk-tree-fg: var(--sk-accent-text);
|
|
13687
|
+
}
|
|
13688
|
+
.sk-tree-view.sk-info {
|
|
13689
|
+
--sk-tree-color-base: var(--sk-info-base);
|
|
13690
|
+
--sk-tree-fg: var(--sk-info-text);
|
|
13691
|
+
}
|
|
13692
|
+
.sk-tree-view.sk-success {
|
|
13693
|
+
--sk-tree-color-base: var(--sk-success-base);
|
|
13694
|
+
--sk-tree-fg: var(--sk-success-text);
|
|
13695
|
+
}
|
|
13696
|
+
.sk-tree-view.sk-warning {
|
|
13697
|
+
--sk-tree-color-base: var(--sk-warning-base);
|
|
13698
|
+
--sk-tree-fg: var(--sk-warning-text);
|
|
13699
|
+
}
|
|
13700
|
+
.sk-tree-view.sk-danger {
|
|
13701
|
+
--sk-tree-color-base: var(--sk-danger-base);
|
|
13702
|
+
--sk-tree-fg: var(--sk-danger-text);
|
|
13703
|
+
}
|
|
13704
|
+
.sk-tree-item {
|
|
13705
|
+
display: flex;
|
|
13706
|
+
align-items: center;
|
|
13707
|
+
gap: var(--sk-space-xs);
|
|
13708
|
+
padding: var(--sk-space-3xs) var(--sk-space-md) var(--sk-space-3xs) var(--sk-space-xs);
|
|
13709
|
+
color: var(--sk-tree-fg);
|
|
13710
|
+
cursor: pointer;
|
|
13711
|
+
user-select: none;
|
|
13712
|
+
position: relative;
|
|
13713
|
+
font-size: var(--sk-font-size-sm);
|
|
13714
|
+
line-height: 1.5;
|
|
13715
|
+
outline: none;
|
|
13716
|
+
transition: background var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
|
|
13717
|
+
}
|
|
13718
|
+
.sk-tree-item:hover:not([data-disabled]) {
|
|
13719
|
+
background: oklch(from var(--sk-tree-color-base) l c h/0.1);
|
|
13720
|
+
clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
|
|
13721
|
+
}
|
|
13722
|
+
.sk-tree-item:active:not([data-disabled]) {
|
|
13723
|
+
background: oklch(from var(--sk-tree-color-base) l c h/0.15);
|
|
13724
|
+
}
|
|
13725
|
+
.sk-tree-item[data-selected] {
|
|
13726
|
+
background: oklch(from var(--sk-tree-color-base) l c h/0.2);
|
|
13727
|
+
clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
|
|
13728
|
+
}
|
|
13729
|
+
.sk-tree-item[data-selected]::before {
|
|
13730
|
+
content: "";
|
|
13731
|
+
position: absolute;
|
|
13732
|
+
inset: 0;
|
|
13733
|
+
background: var(--sk-tree-color-base);
|
|
13734
|
+
clip-path: polygon(0% 100%, 0px 10px, 10px 0px, 11.41px 1.41px, 2px 10.83px, 2px 100%);
|
|
13735
|
+
}
|
|
13736
|
+
.sk-tree-item[data-selected]:hover:not([data-disabled]) {
|
|
13737
|
+
background: oklch(from var(--sk-tree-color-base) l c h/0.25);
|
|
13738
|
+
}
|
|
13739
|
+
.sk-tree-item:focus-visible {
|
|
13740
|
+
outline: var(--sk-border-width-base) solid var(--sk-tree-color-base);
|
|
13741
|
+
outline-offset: -1px;
|
|
13742
|
+
}
|
|
13743
|
+
.sk-tree-item[data-disabled] {
|
|
13744
|
+
opacity: 0.5;
|
|
13745
|
+
cursor: not-allowed;
|
|
13746
|
+
}
|
|
13747
|
+
.sk-tree-item-chevron {
|
|
13748
|
+
display: flex;
|
|
13749
|
+
align-items: center;
|
|
13750
|
+
justify-content: center;
|
|
13751
|
+
width: 1rem;
|
|
13752
|
+
height: 1rem;
|
|
13753
|
+
flex-shrink: 0;
|
|
13754
|
+
color: oklch(from var(--sk-tree-fg) l c h/0.5);
|
|
13755
|
+
transition: transform var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
|
|
13756
|
+
}
|
|
13757
|
+
.sk-tree-item-chevron.sk-expanded {
|
|
13758
|
+
transform: rotate(90deg);
|
|
13759
|
+
}
|
|
13760
|
+
.sk-tree-item-chevron-spacer {
|
|
13761
|
+
width: 1rem;
|
|
13762
|
+
flex-shrink: 0;
|
|
13763
|
+
}
|
|
13764
|
+
.sk-tree-item-leading {
|
|
13765
|
+
display: flex;
|
|
13766
|
+
align-items: center;
|
|
13767
|
+
flex-shrink: 0;
|
|
13768
|
+
}
|
|
13769
|
+
.sk-tree-item-content {
|
|
13770
|
+
flex: 1;
|
|
13771
|
+
min-width: 0;
|
|
13772
|
+
overflow: hidden;
|
|
13773
|
+
text-overflow: ellipsis;
|
|
13774
|
+
white-space: nowrap;
|
|
13775
|
+
}
|
|
13776
|
+
.sk-tree-item-trailing {
|
|
13777
|
+
display: flex;
|
|
13778
|
+
align-items: center;
|
|
13779
|
+
flex-shrink: 0;
|
|
13780
|
+
margin-left: auto;
|
|
13781
|
+
gap: var(--sk-space-3xs);
|
|
13782
|
+
}
|
|
12325
13783
|
}
|
|
12326
13784
|
code,
|
|
12327
13785
|
kbd {
|
|
@@ -12858,6 +14316,127 @@ kbd.sk-neutral {
|
|
|
12858
14316
|
padding-bottom: 0.5rem;
|
|
12859
14317
|
}
|
|
12860
14318
|
|
|
12861
|
-
@layer reset, tokens, base, components, utilities;.sk-panel[data-v-
|
|
12862
|
-
display: var(--
|
|
14319
|
+
@layer reset, tokens, base, components, utilities;.sk-panel[data-v-07c1642c]::after {
|
|
14320
|
+
display: var(--v42b18398);
|
|
14321
|
+
}.vuelor-picker-root{--vuelor-primary-color: #0d99ff;--vuelor-surface-color: #ffffff;--vuelor-border-color: #e6e6e6;--vuelor-inner-shadow-color: #0000001a;--vuelor-input-bg-color: #f5f5f5;--vuelor-button-hover-bg-color: #0000000d;--vuelor-disabled-opacity: .5;--shadow-vuelor-card: 0 .125rem .3125rem 0 #00000026, 0 .625rem 1rem 0 #0000001f, 0 0 .03125rem 0 #0000001f;--shadow-vuelor-thumb: 0 0 .03125rem rgba(0, 0, 0, .18), 0 .1875rem .5rem rgba(0, 0, 0, .1), 0 .0625rem .1875rem rgba(0, 0, 0, .1);--shadow-vuelor-inner: inset 0 0 0 .0625rem var(--vuelor-inner-shadow-color);width:15rem;background-color:var(--vuelor-surface-color);border-radius:.8125rem;padding:1rem;display:flex;flex-direction:column;gap:.5rem;box-shadow:var(--shadow-vuelor-card)}.vuelor-picker-eye-dropper{padding:.25rem;border-radius:.3125rem}.vuelor-picker-eye-dropper:hover:not(:disabled){background-color:var(--vuelor-button-hover-bg-color)}.vuelor-picker-eye-dropper:disabled{opacity:var(--vuelor-disabled-opacity);background-color:transparent;cursor:not-allowed}.vuelor-picker-eye-dropper:focus-within{outline-width:.0625rem;outline-style:solid;outline-color:var(--vuelor-primary-color)}.vuelor-picker-shared-thumb{display:block;width:1rem;height:1rem;border-radius:9999rem;border-width:.25rem;border-style:solid;border-color:var(--vuelor-surface-color);box-shadow:var(--shadow-vuelor-thumb)}.vuelor-picker-shared-thumb:focus{outline-width:.0625rem;outline-style:solid;outline-color:var(--vuelor-primary-color)}.vuelor-picker-canvas-root{position:relative;touch-action:none}.vuelor-picker-canvas-root[data-disabled]{pointer-events:none;opacity:var(--vuelor-disabled-opacity)}.vuelor-picker-canvas-area{border-radius:.3125rem;outline-width:.0625rem;outline-style:solid;outline-offset:-.0625rem;outline-color:var(--vuelor-inner-shadow-color)}.vuelor-picker-slider-root{position:relative;height:1rem;width:100%;display:flex;align-items:center;-webkit-user-select:none;user-select:none;touch-action:none}.vuelor-picker-slider-root[data-orientation=vertical]{height:auto;width:1rem;flex-direction:column}.vuelor-picker-slider-root[data-disabled]{pointer-events:none;opacity:var(--vuelor-disabled-opacity)}.vuelor-picker-slider-track{position:relative;height:1rem;width:100%;flex-grow:1;border-radius:9999rem;box-shadow:var(--shadow-vuelor-inner)}.vuelor-picker-slider-track[data-orientation=vertical]{height:100%;width:1rem}.vuelor-picker-input-group{width:100%;display:flex;gap:.0625rem;border-radius:.3125rem;outline-style:solid;outline-width:0;outline-color:var(--vuelor-border-color)}.vuelor-picker-input-group:hover:not([data-disabled]){outline-width:.0625rem}.vuelor-picker-input-group:focus-within{outline-width:.0625rem;outline-color:var(--vuelor-primary-color)}.vuelor-picker-input-group[data-disabled]{pointer-events:none;opacity:var(--vuelor-disabled-opacity)}.vuelor-picker-input-item{display:flex;flex:1 1 0%;align-items:center;padding-left:.25rem;padding-right:.25rem;gap:.25rem;background-color:var(--vuelor-input-bg-color)}.vuelor-picker-input-item[data-before],.vuelor-picker-input-item[data-alpha-input]{flex-grow:0}.vuelor-picker-input-item:first-child{border-top-left-radius:.3125rem;border-bottom-left-radius:.3125rem}.vuelor-picker-input-item:last-child{border-top-right-radius:.3125rem;border-bottom-right-radius:.3125rem}.vuelor-picker-input-label{-webkit-user-select:none;user-select:none;color:#000;font-size:.6875rem;opacity:.4;display:none}.vuelor-picker-input-label[data-alpha-label],.vuelor-picker-input-label:not([data-alpha-label]){display:block}.vuelor-picker-input-field{width:100%;height:1.5rem;min-width:1.25rem;font-size:.6875rem;background:transparent;border:none}.vuelor-picker-input-field:focus{outline:none}.vuelor-picker-swatch-base{position:relative;flex-grow:0;height:1rem;width:1rem;border-radius:20%;overflow:hidden}.vuelor-picker-swatch-basedisabled{opacity:var(--vuelor-disabled-opacity)}.vuelor-picker-swatch-base:focus-within{outline-width:.0625rem;outline-style:solid;outline-color:var(--vuelor-primary-color)}.vuelor-picker-swatch-alpha{position:absolute;top:0;right:0;height:100%;width:50%}
|
|
14322
|
+
.vuelor-picker-root[data-v-adc9cbb2] {
|
|
14323
|
+
width: 100%;
|
|
14324
|
+
background: transparent;
|
|
14325
|
+
border-radius: 0;
|
|
14326
|
+
padding: 0;
|
|
14327
|
+
box-shadow: none;
|
|
14328
|
+
}.sk-color-picker-panel {
|
|
14329
|
+
width: 17rem;
|
|
14330
|
+
}
|
|
14331
|
+
.sk-color-picker-panel .vuelor-picker-canvas-root {
|
|
14332
|
+
width: 100% !important;
|
|
14333
|
+
height: auto !important;
|
|
14334
|
+
}
|
|
14335
|
+
.sk-color-picker-panel .vuelor-picker-canvas-area {
|
|
14336
|
+
width: 100% !important;
|
|
14337
|
+
height: 10rem !important;
|
|
14338
|
+
border-radius: 0;
|
|
14339
|
+
outline: none;
|
|
14340
|
+
}
|
|
14341
|
+
@supports (corner-shape: bevel) {
|
|
14342
|
+
.sk-color-picker-panel .vuelor-picker-canvas-area {
|
|
14343
|
+
border: var(--sk-border-width-thin) solid color-mix(in oklch, var(--sk-panel-color-base), transparent 50%);
|
|
14344
|
+
border-top-left-radius: 0.375rem;
|
|
14345
|
+
border-top-right-radius: 0;
|
|
14346
|
+
border-bottom-right-radius: 0;
|
|
14347
|
+
border-bottom-left-radius: 0;
|
|
14348
|
+
corner-shape: bevel;
|
|
14349
|
+
}
|
|
14350
|
+
}
|
|
14351
|
+
@supports not (corner-shape: bevel) {
|
|
14352
|
+
.sk-color-picker-panel .vuelor-picker-canvas-area {
|
|
14353
|
+
border: none;
|
|
14354
|
+
clip-path: polygon(0.375rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0.375rem);
|
|
14355
|
+
}
|
|
14356
|
+
.sk-color-picker-panel .vuelor-picker-canvas-area::before {
|
|
14357
|
+
content: "";
|
|
14358
|
+
position: absolute;
|
|
14359
|
+
top: 0;
|
|
14360
|
+
left: 0;
|
|
14361
|
+
right: 0;
|
|
14362
|
+
bottom: 0;
|
|
14363
|
+
background-color: color-mix(in oklch, var(--sk-panel-color-base), transparent 50%);
|
|
14364
|
+
z-index: -1;
|
|
14365
|
+
clip-path: polygon(0.375rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0.375rem, 0.375rem 0%, calc(0.375rem + var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(0.375rem + var(--sk-border-width-thin)), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) var(--sk-border-width-thin), calc(0.375rem + var(--sk-border-width-thin)) var(--sk-border-width-thin));
|
|
14366
|
+
}
|
|
14367
|
+
}
|
|
14368
|
+
.sk-color-picker-panel .vuelor-picker-shared-thumb {
|
|
14369
|
+
border-radius: 2px;
|
|
14370
|
+
border-width: 2px;
|
|
14371
|
+
border-color: white;
|
|
14372
|
+
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.3);
|
|
14373
|
+
}
|
|
14374
|
+
.sk-color-picker-panel .vuelor-picker-slider-root {
|
|
14375
|
+
height: 0.875rem;
|
|
14376
|
+
}
|
|
14377
|
+
.sk-color-picker-panel .vuelor-picker-slider-track {
|
|
14378
|
+
height: 0.5rem;
|
|
14379
|
+
border-radius: 2px;
|
|
14380
|
+
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--sk-panel-color-base), transparent 60%);
|
|
14381
|
+
}
|
|
14382
|
+
.sk-color-picker-panel .vuelor-picker-input-group {
|
|
14383
|
+
border-radius: 0;
|
|
14384
|
+
outline: none;
|
|
14385
|
+
gap: 2px;
|
|
14386
|
+
}
|
|
14387
|
+
@supports (corner-shape: bevel) {
|
|
14388
|
+
.sk-color-picker-panel .vuelor-picker-input-group {
|
|
14389
|
+
border: var(--sk-border-width-thin) solid color-mix(in oklch, var(--sk-panel-color-base), transparent 50%);
|
|
14390
|
+
border-top-left-radius: 0;
|
|
14391
|
+
border-top-right-radius: 0.25rem;
|
|
14392
|
+
border-bottom-right-radius: 0;
|
|
14393
|
+
border-bottom-left-radius: 0;
|
|
14394
|
+
corner-shape: bevel;
|
|
14395
|
+
}
|
|
14396
|
+
}
|
|
14397
|
+
@supports not (corner-shape: bevel) {
|
|
14398
|
+
.sk-color-picker-panel .vuelor-picker-input-group {
|
|
14399
|
+
border: none;
|
|
14400
|
+
clip-path: polygon(0% 0%, calc(100% - 0.25rem) 0%, 100% 0.25rem, 100% 100%, 0% 100%);
|
|
14401
|
+
}
|
|
14402
|
+
.sk-color-picker-panel .vuelor-picker-input-group::before {
|
|
14403
|
+
content: "";
|
|
14404
|
+
position: absolute;
|
|
14405
|
+
top: 0;
|
|
14406
|
+
left: 0;
|
|
14407
|
+
right: 0;
|
|
14408
|
+
bottom: 0;
|
|
14409
|
+
background-color: color-mix(in oklch, var(--sk-panel-color-base), transparent 50%);
|
|
14410
|
+
z-index: -1;
|
|
14411
|
+
clip-path: polygon(0% 0%, calc(100% - 0.25rem) 0%, 100% 0.25rem, 100% 100%, 0% 100%, 0% 0%, var(--sk-border-width-thin) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(0.25rem + var(--sk-border-width-thin)), calc(100% - 0.25rem - var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) var(--sk-border-width-thin));
|
|
14412
|
+
}
|
|
14413
|
+
}
|
|
14414
|
+
.sk-color-picker-panel .vuelor-picker-input-group:focus-within {
|
|
14415
|
+
border-color: var(--sk-panel-color-base);
|
|
14416
|
+
}
|
|
14417
|
+
.sk-color-picker-panel .vuelor-picker-input-item {
|
|
14418
|
+
background: color-mix(in oklch, var(--sk-panel-color-base), #000 80%);
|
|
14419
|
+
border-radius: 0;
|
|
14420
|
+
padding: 0 var(--sk-space-xs);
|
|
14421
|
+
}
|
|
14422
|
+
.sk-color-picker-panel .vuelor-picker-input-item:first-child, .sk-color-picker-panel .vuelor-picker-input-item:last-child {
|
|
14423
|
+
border-radius: 0;
|
|
14424
|
+
}
|
|
14425
|
+
.sk-color-picker-panel .vuelor-picker-input-item:last-child {
|
|
14426
|
+
min-width: 3rem;
|
|
14427
|
+
}
|
|
14428
|
+
.sk-color-picker-panel .vuelor-picker-input-label {
|
|
14429
|
+
color: var(--sk-panel-fg);
|
|
14430
|
+
opacity: 0.5;
|
|
14431
|
+
font-size: 0.625rem;
|
|
14432
|
+
text-transform: uppercase;
|
|
14433
|
+
}
|
|
14434
|
+
.sk-color-picker-panel .vuelor-picker-input-field {
|
|
14435
|
+
color: var(--sk-panel-fg);
|
|
14436
|
+
font-family: var(--sk-font-family-mono, var(--sk-font-family-base));
|
|
14437
|
+
font-size: 0.75rem;
|
|
14438
|
+
height: 1.75rem;
|
|
14439
|
+
}
|
|
14440
|
+
.sk-color-picker-panel .vuelor-picker-swatch-base {
|
|
14441
|
+
border-radius: 2px;
|
|
12863
14442
|
}
|