@skewedaspect/sleekspace-ui 0.7.1 → 0.8.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/sleekspace-ui.css +984 -291
- package/dist/sleekspace-ui.es.js +31559 -29868
- package/dist/sleekspace-ui.umd.js +32210 -30438
- package/dist/{components → src/components}/Accordion/SkAccordion.vue.d.ts +1 -1
- package/dist/{components → src/components}/Accordion/types.d.ts +1 -1
- package/dist/{components → src/components}/Alert/SkAlert.vue.d.ts +1 -1
- package/dist/{components → src/components}/Alert/types.d.ts +1 -1
- package/dist/{components → src/components}/Avatar/SkAvatar.vue.d.ts +1 -1
- package/dist/{components → src/components}/Avatar/types.d.ts +1 -1
- package/dist/{components → src/components}/Breadcrumbs/SkBreadcrumbs.vue.d.ts +2 -2
- package/dist/{components → src/components}/Breadcrumbs/types.d.ts +1 -1
- package/dist/{components → src/components}/Button/SkButton.vue.d.ts +9 -1
- package/dist/{components → src/components}/Button/types.d.ts +1 -1
- package/dist/{components → src/components}/Card/SkCard.vue.d.ts +1 -1
- package/dist/src/components/Card/types.d.ts +2 -0
- package/dist/{components → src/components}/Checkbox/SkCheckbox.vue.d.ts +1 -1
- package/dist/{components → src/components}/Checkbox/types.d.ts +1 -1
- package/dist/{components → src/components}/Collapsible/SkCollapsible.vue.d.ts +1 -1
- package/dist/src/components/Collapsible/types.d.ts +2 -0
- package/dist/{components → src/components}/ColorPicker/SkColorPicker.vue.d.ts +1 -1
- package/dist/{components → src/components}/ColorPicker/types.d.ts +1 -1
- package/dist/{components → src/components}/ContextMenu/SkContextMenu.vue.d.ts +1 -1
- package/dist/src/components/ContextMenu/types.d.ts +2 -0
- package/dist/{components → src/components}/Divider/SkDivider.vue.d.ts +1 -1
- package/dist/{components → src/components}/Dropdown/SkDropdown.vue.d.ts +1 -1
- package/dist/{components → src/components}/Dropdown/types.d.ts +1 -1
- package/dist/{components → src/components}/Input/SkInput.vue.d.ts +1 -1
- package/dist/{components → src/components}/Input/types.d.ts +1 -1
- package/dist/{components → src/components}/Listbox/SkListbox.vue.d.ts +1 -1
- package/dist/{components → src/components}/Listbox/types.d.ts +1 -1
- package/dist/{components → src/components}/Modal/SkModal.vue.d.ts +1 -1
- package/dist/{components → src/components}/Modal/types.d.ts +1 -1
- package/dist/{components → src/components}/NavBar/SkNavBar.vue.d.ts +2 -1
- package/dist/src/components/NavBar/context.d.ts +3 -0
- package/dist/{components → src/components}/NavBar/types.d.ts +1 -1
- package/dist/{components → src/components}/NumberInput/SkNumberInput.vue.d.ts +1 -1
- package/dist/{components → src/components}/NumberInput/types.d.ts +1 -1
- package/dist/src/components/Page/SkPage.vue.d.ts +161 -0
- package/dist/src/components/Page/SkPageSidebarToggle.vue.d.ts +41 -0
- package/dist/src/components/Page/index.d.ts +3 -0
- package/dist/src/components/Page/types.d.ts +39 -0
- package/dist/{components → src/components}/Pagination/SkPagination.vue.d.ts +3 -3
- package/dist/{components → src/components}/Pagination/types.d.ts +1 -1
- package/dist/{components → src/components}/Panel/SkPanel.vue.d.ts +1 -1
- package/dist/{components → src/components}/Panel/types.d.ts +1 -1
- package/dist/{components → src/components}/Popover/SkPopover.vue.d.ts +1 -1
- package/dist/{components → src/components}/Progress/SkProgress.vue.d.ts +1 -1
- package/dist/{components → src/components}/Progress/types.d.ts +1 -1
- package/dist/{components → src/components}/Radio/SkRadio.vue.d.ts +1 -1
- package/dist/{components → src/components}/Radio/types.d.ts +1 -1
- package/dist/{components → src/components}/ScrollArea/SkScrollArea.vue.d.ts +9 -0
- package/dist/{components → src/components}/ScrollArea/types.d.ts +1 -1
- package/dist/{components → src/components}/Select/SkSelect.vue.d.ts +1 -1
- package/dist/{components → src/components}/Select/SkSelectItem.vue.d.ts +6 -18
- package/dist/{components → src/components}/Select/types.d.ts +1 -1
- package/dist/{components → src/components}/Sidebar/SkSidebar.vue.d.ts +10 -2
- package/dist/{components → src/components}/Sidebar/types.d.ts +1 -1
- package/dist/{components → src/components}/Slider/SkSlider.vue.d.ts +1 -1
- package/dist/{components → src/components}/Slider/types.d.ts +1 -1
- package/dist/{components → src/components}/Spinner/SkSpinner.vue.d.ts +1 -1
- package/dist/{components → src/components}/Spinner/types.d.ts +1 -1
- package/dist/{components → src/components}/Splitter/types.d.ts +1 -1
- package/dist/{components → src/components}/Switch/SkSwitch.vue.d.ts +1 -1
- package/dist/{components → src/components}/Switch/types.d.ts +1 -1
- package/dist/{components → src/components}/Table/SkTable.vue.d.ts +1 -1
- package/dist/{components → src/components}/Table/types.d.ts +1 -1
- package/dist/{components → src/components}/Tabs/SkTab.vue.d.ts +1 -1
- package/dist/{components → src/components}/Tabs/SkTabs.vue.d.ts +2 -2
- package/dist/{components → src/components}/Tag/SkTag.vue.d.ts +1 -1
- package/dist/{components → src/components}/TagsInput/SkTagsInput.vue.d.ts +1 -1
- package/dist/{components → src/components}/TagsInput/types.d.ts +1 -1
- package/dist/{components → src/components}/Textarea/SkTextarea.vue.d.ts +1 -1
- package/dist/{components → src/components}/Textarea/types.d.ts +1 -1
- package/dist/{components → src/components}/Toolbar/types.d.ts +1 -1
- package/dist/{components → src/components}/Tooltip/SkTooltip.vue.d.ts +1 -1
- package/dist/{components → src/components}/Tooltip/types.d.ts +1 -1
- package/dist/{components → src/components}/TreeView/SkTreeView.vue.d.ts +5 -5
- package/dist/{components → src/components}/TreeView/types.d.ts +1 -1
- package/dist/src/composables/useFocusTrap.d.ts +17 -0
- package/dist/src/composables/usePageDrawer.d.ts +35 -0
- package/dist/src/composables/usePortalContext.test.d.ts +1 -0
- package/dist/{index.d.ts → src/index.d.ts} +2 -0
- package/dist/src/styles/mixins/fluidSize.test.d.ts +1 -0
- package/dist/tokens.css +60 -0
- package/llms-full.txt +6349 -0
- package/llms.txt +46 -0
- package/package.json +16 -11
- package/src/components/Button/SkButton.vue +25 -13
- package/src/components/NavBar/SkNavBar.vue +12 -1
- package/src/components/NavBar/context.ts +16 -0
- package/src/components/Page/SkPage.vue +460 -72
- package/src/components/Page/SkPageSidebarToggle.vue +148 -0
- package/src/components/Page/index.ts +1 -0
- package/src/components/Page/types.ts +30 -5
- package/src/components/ScrollArea/SkScrollArea.vue +12 -0
- package/src/components/Select/SkSelectItem.vue +2 -2
- package/src/components/Sidebar/SkSidebar.vue +10 -0
- package/src/components/TreeView/SkTreeView.vue +6 -6
- package/src/composables/useFocusTrap.test.ts +184 -0
- package/src/composables/useFocusTrap.ts +141 -0
- package/src/composables/usePageDrawer.ts +96 -0
- package/src/global.d.ts +1 -0
- package/src/index.ts +5 -0
- package/src/styles/components/_accordion.scss +15 -0
- package/src/styles/components/_alert.scss +1 -0
- package/src/styles/components/_avatar.scss +1 -0
- package/src/styles/components/_breadcrumbs.scss +7 -0
- package/src/styles/components/_button.scss +291 -214
- package/src/styles/components/_checkbox.scss +9 -1
- package/src/styles/components/_collapsible.scss +15 -0
- package/src/styles/components/_color-picker.scss +4 -1
- package/src/styles/components/_input.scss +1 -0
- package/src/styles/components/_listbox.scss +8 -2
- package/src/styles/components/_menu.scss +9 -2
- package/src/styles/components/_modal.scss +18 -2
- package/src/styles/components/_navbar.scss +22 -6
- package/src/styles/components/_number-input.scss +1 -0
- package/src/styles/components/_page.scss +220 -12
- package/src/styles/components/_pagination.scss +10 -1
- package/src/styles/components/_panel.scss +8 -3
- package/src/styles/components/_popover.scss +15 -2
- package/src/styles/components/_progress.scss +14 -0
- package/src/styles/components/_radio.scss +8 -1
- package/src/styles/components/_scroll-area.scss +56 -0
- package/src/styles/components/_select.scss +3 -1
- package/src/styles/components/_sidebar.scss +78 -38
- package/src/styles/components/_skeleton.scss +18 -0
- package/src/styles/components/_slider.scss +1 -0
- package/src/styles/components/_spinner.scss +15 -0
- package/src/styles/components/_switch.scss +5 -0
- package/src/styles/components/_table.scss +1 -0
- package/src/styles/components/_tabs.scss +6 -0
- package/src/styles/components/_tag.scss +2 -0
- package/src/styles/components/_tags-input.scss +1 -0
- package/src/styles/components/_textarea.scss +1 -0
- package/src/styles/components/_toast.scss +16 -1
- package/src/styles/components/_toolbar.scss +2 -0
- package/src/styles/components/_tooltip.scss +14 -1
- package/src/styles/components/_tree-view.scss +6 -1
- package/src/styles/mixins/_index.scss +1 -0
- package/src/styles/mixins/_responsive.scss +184 -0
- package/src/styles/mixins/fluidSize.test.ts +149 -0
- package/src/styles/tokens/_foundation-breakpoints.scss +26 -0
- package/src/styles/tokens/_foundation-z-index.scss +38 -0
- package/src/styles/tokens/index.scss +2 -0
- package/web-types.json +194 -14
- package/dist/components/Card/types.d.ts +0 -2
- package/dist/components/Collapsible/types.d.ts +0 -2
- package/dist/components/ContextMenu/types.d.ts +0 -2
- package/dist/components/Page/SkPage.vue.d.ts +0 -64
- package/dist/components/Page/index.d.ts +0 -2
- package/dist/components/Page/types.d.ts +0 -16
- package/dist/{components → src/components}/Accordion/SkAccordionItem.vue.d.ts +0 -0
- package/dist/{components → src/components}/Accordion/index.d.ts +0 -0
- package/dist/{components → src/components}/Avatar/index.d.ts +0 -0
- package/dist/{components → src/components}/Breadcrumbs/SkBreadcrumbItem.vue.d.ts +0 -0
- package/dist/{components → src/components}/Breadcrumbs/SkBreadcrumbSeparator.vue.d.ts +0 -0
- package/dist/{components → src/components}/Breadcrumbs/index.d.ts +0 -0
- package/dist/{components → src/components}/Checkbox/index.d.ts +0 -0
- package/dist/{components → src/components}/Collapsible/index.d.ts +0 -0
- package/dist/{components → src/components}/ColorPicker/index.d.ts +0 -0
- package/dist/{components → src/components}/ContextMenu/SkContextMenuCheckboxItem.vue.d.ts +0 -0
- package/dist/{components → src/components}/ContextMenu/SkContextMenuItem.vue.d.ts +0 -0
- package/dist/{components → src/components}/ContextMenu/SkContextMenuLabel.vue.d.ts +0 -0
- package/dist/{components → src/components}/ContextMenu/SkContextMenuRadioGroup.vue.d.ts +0 -0
- package/dist/{components → src/components}/ContextMenu/SkContextMenuRadioItem.vue.d.ts +0 -0
- package/dist/{components → src/components}/ContextMenu/SkContextMenuSeparator.vue.d.ts +0 -0
- package/dist/{components → src/components}/ContextMenu/SkContextMenuSubmenu.vue.d.ts +0 -0
- package/dist/{components → src/components}/ContextMenu/index.d.ts +0 -0
- package/dist/{components → src/components}/Divider/types.d.ts +0 -0
- package/dist/{components → src/components}/Dropdown/SkDropdownCheckboxItem.vue.d.ts +0 -0
- package/dist/{components → src/components}/Dropdown/SkDropdownMenuItem.vue.d.ts +0 -0
- package/dist/{components → src/components}/Dropdown/SkDropdownMenuLabel.vue.d.ts +0 -0
- package/dist/{components → src/components}/Dropdown/SkDropdownMenuSeparator.vue.d.ts +0 -0
- package/dist/{components → src/components}/Dropdown/SkDropdownRadioGroup.vue.d.ts +0 -0
- package/dist/{components → src/components}/Dropdown/SkDropdownRadioItem.vue.d.ts +0 -0
- package/dist/{components → src/components}/Dropdown/SkDropdownSubmenu.vue.d.ts +0 -0
- package/dist/{components → src/components}/Dropdown/index.d.ts +0 -0
- package/dist/{components → src/components}/Field/SkField.vue.d.ts +0 -0
- package/dist/{components → src/components}/Field/index.d.ts +0 -0
- package/dist/{components → src/components}/Field/types.d.ts +0 -0
- package/dist/{components → src/components}/Group/SkGroup.vue.d.ts +0 -0
- package/dist/{components → src/components}/Group/types.d.ts +0 -0
- package/dist/{components → src/components}/Input/index.d.ts +0 -0
- package/dist/{components → src/components}/Listbox/SkListboxItem.vue.d.ts +0 -0
- package/dist/{components → src/components}/Listbox/SkListboxSeparator.vue.d.ts +0 -0
- package/dist/{components → src/components}/Listbox/index.d.ts +0 -0
- package/dist/{components → src/components}/Modal/index.d.ts +0 -0
- package/dist/{components → src/components}/NavBar/index.d.ts +0 -0
- package/dist/{components → src/components}/NumberInput/index.d.ts +0 -0
- package/dist/{components → src/components}/Pagination/SkPaginationItem.vue.d.ts +0 -0
- package/dist/{components → src/components}/Pagination/index.d.ts +0 -0
- package/dist/{components → src/components}/Popover/index.d.ts +0 -0
- package/dist/{components → src/components}/Popover/types.d.ts +0 -0
- package/dist/{components → src/components}/Progress/index.d.ts +0 -0
- package/dist/{components → src/components}/Radio/SkRadioGroup.vue.d.ts +0 -0
- package/dist/{components → src/components}/Radio/index.d.ts +0 -0
- package/dist/{components → src/components}/ScrollArea/index.d.ts +0 -0
- package/dist/{components → src/components}/Select/SkSelectSeparator.vue.d.ts +0 -0
- package/dist/{components → src/components}/Select/index.d.ts +0 -0
- package/dist/{components → src/components}/Sidebar/SkSidebarItem.vue.d.ts +0 -0
- package/dist/{components → src/components}/Sidebar/SkSidebarSection.vue.d.ts +0 -0
- package/dist/{components → src/components}/Skeleton/SkSkeleton.vue.d.ts +2 -2
- /package/dist/{components → src/components}/Skeleton/index.d.ts +0 -0
- /package/dist/{components → src/components}/Skeleton/types.d.ts +0 -0
- /package/dist/{components → src/components}/Slider/index.d.ts +0 -0
- /package/dist/{components → src/components}/Spinner/index.d.ts +0 -0
- /package/dist/{components → src/components}/Splitter/SkSplitter.vue.d.ts +0 -0
- /package/dist/{components → src/components}/Splitter/SkSplitterHandle.vue.d.ts +0 -0
- /package/dist/{components → src/components}/Splitter/SkSplitterPanel.vue.d.ts +0 -0
- /package/dist/{components → src/components}/Splitter/index.d.ts +0 -0
- /package/dist/{components → src/components}/Switch/index.d.ts +0 -0
- /package/dist/{components → src/components}/Table/index.d.ts +0 -0
- /package/dist/{components → src/components}/Tabs/SkTabList.vue.d.ts +0 -0
- /package/dist/{components → src/components}/Tabs/SkTabPanel.vue.d.ts +0 -0
- /package/dist/{components → src/components}/Tabs/SkTabPanels.vue.d.ts +0 -0
- /package/dist/{components → src/components}/Tabs/types.d.ts +0 -0
- /package/dist/{components → src/components}/Tag/types.d.ts +0 -0
- /package/dist/{components → src/components}/TagsInput/index.d.ts +0 -0
- /package/dist/{components → src/components}/Textarea/index.d.ts +0 -0
- /package/dist/{components → src/components}/Theme/SkTheme.vue.d.ts +0 -0
- /package/dist/{components → src/components}/Theme/types.d.ts +0 -0
- /package/dist/{components → src/components}/Theme/useTheme.d.ts +0 -0
- /package/dist/{components → src/components}/Toast/SkToast.vue.d.ts +0 -0
- /package/dist/{components → src/components}/Toast/SkToastProvider.vue.d.ts +0 -0
- /package/dist/{components → src/components}/Toast/index.d.ts +0 -0
- /package/dist/{components → src/components}/Toast/types.d.ts +0 -0
- /package/dist/{components → src/components}/Toast/useToast.d.ts +0 -0
- /package/dist/{components → src/components}/Toolbar/SkToolbar.vue.d.ts +0 -0
- /package/dist/{components → src/components}/Toolbar/SkToolbarButton.vue.d.ts +0 -0
- /package/dist/{components → src/components}/Toolbar/SkToolbarSeparator.vue.d.ts +0 -0
- /package/dist/{components → src/components}/Toolbar/SkToolbarToggleGroup.vue.d.ts +0 -0
- /package/dist/{components → src/components}/Toolbar/SkToolbarToggleItem.vue.d.ts +0 -0
- /package/dist/{components → src/components}/Toolbar/index.d.ts +0 -0
- /package/dist/{components → src/components}/Tooltip/SkTooltipProvider.vue.d.ts +0 -0
- /package/dist/{components → src/components}/Tooltip/index.d.ts +0 -0
- /package/dist/{components → src/components}/TreeView/SkTreeItem.vue.d.ts +0 -0
- /package/dist/{components → src/components}/TreeView/index.d.ts +0 -0
- /package/dist/{composables → src/composables}/useCustomColors.d.ts +0 -0
- /package/dist/{composables → src/composables}/useCustomColors.test.d.ts +0 -0
- /package/dist/{composables/usePortalContext.test.d.ts → src/composables/useFocusTrap.test.d.ts} +0 -0
- /package/dist/{composables → src/composables}/usePortalContext.d.ts +0 -0
- /package/dist/{types.d.ts → src/types.d.ts} +0 -0
package/dist/sleekspace-ui.css
CHANGED
|
@@ -444,6 +444,66 @@
|
|
|
444
444
|
--sk-scrollbar-thumb-min-size: 40px;
|
|
445
445
|
}
|
|
446
446
|
|
|
447
|
+
/**
|
|
448
|
+
* Foundation Tokens - Breakpoints
|
|
449
|
+
*
|
|
450
|
+
* Single-source breakpoint scale shared between @media (viewport) and
|
|
451
|
+
* @container (component) queries. CSS custom properties are exposed for
|
|
452
|
+
* consumer visibility and JS access; SCSS-level values live in
|
|
453
|
+
* mixins/_responsive.scss and drive the media-up/container-up mixins.
|
|
454
|
+
*
|
|
455
|
+
* Scale rationale:
|
|
456
|
+
* sm ( 640px) - phones held landscape / narrow tablets
|
|
457
|
+
* md (1024px) - tablets / small laptop -- persistent sidebar threshold
|
|
458
|
+
* lg (1280px) - standard laptop / desktop
|
|
459
|
+
* xl (1536px) - large desktop / ultrawide
|
|
460
|
+
*/
|
|
461
|
+
:root {
|
|
462
|
+
/* ===================================================================
|
|
463
|
+
* Viewport Breakpoints
|
|
464
|
+
* =================================================================== */
|
|
465
|
+
--sk-bp-sm: 640px;
|
|
466
|
+
--sk-bp-md: 1024px;
|
|
467
|
+
--sk-bp-lg: 1280px;
|
|
468
|
+
--sk-bp-xl: 1536px;
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
/**
|
|
472
|
+
* Foundation Tokens - Z-Index Stacking Scale
|
|
473
|
+
*
|
|
474
|
+
* One scale every SleekSpace component layers against so portaled content stacks in a
|
|
475
|
+
* predictable, documented order. Custom consumer layers can slot in between tokens by
|
|
476
|
+
* picking a number within the reserved gap.
|
|
477
|
+
*
|
|
478
|
+
* Reading order (bottom to top):
|
|
479
|
+
* sticky 100 - App-shell chrome that sits above the flow (sticky navbar / footer)
|
|
480
|
+
* drawer-scrim 900 - Dim + blur layer behind an open drawer
|
|
481
|
+
* drawer 901 - SkPage sidebar / aside drawer
|
|
482
|
+
* modal-scrim 1000 - Dim layer behind an open modal
|
|
483
|
+
* modal 1001 - SkModal content -- must be above drawer so modals launched from
|
|
484
|
+
* inside a drawer render on top
|
|
485
|
+
* popover 1100 - SkPopover (floating anchored surface)
|
|
486
|
+
* dropdown 1100 - SkDropdown + SkListbox menus (same layer as popover; a menu opened
|
|
487
|
+
* inside a modal renders above the modal)
|
|
488
|
+
* tooltip 1200 - SkTooltip -- higher than menus so a tooltip on a menu item stays
|
|
489
|
+
* visible
|
|
490
|
+
* toast 1300 - Ephemeral top-of-stack notifications
|
|
491
|
+
*/
|
|
492
|
+
:root {
|
|
493
|
+
/* ===================================================================
|
|
494
|
+
* Layering Scale
|
|
495
|
+
* =================================================================== */
|
|
496
|
+
--sk-z-sticky: 100;
|
|
497
|
+
--sk-z-drawer-scrim: 900;
|
|
498
|
+
--sk-z-drawer: 901;
|
|
499
|
+
--sk-z-modal-scrim: 1000;
|
|
500
|
+
--sk-z-modal: 1001;
|
|
501
|
+
--sk-z-popover: 1100;
|
|
502
|
+
--sk-z-dropdown: 1100;
|
|
503
|
+
--sk-z-tooltip: 1200;
|
|
504
|
+
--sk-z-toast: 1300;
|
|
505
|
+
}
|
|
506
|
+
|
|
447
507
|
/* ===================================================================
|
|
448
508
|
* Semantic Tokens
|
|
449
509
|
* Contextual meanings that reference foundation tokens
|
|
@@ -1480,6 +1540,7 @@
|
|
|
1480
1540
|
var(--sk-accordion-color-base),
|
|
1481
1541
|
transparent 85%
|
|
1482
1542
|
);
|
|
1543
|
+
position: relative;
|
|
1483
1544
|
overflow: hidden;
|
|
1484
1545
|
width: 100%;
|
|
1485
1546
|
}
|
|
@@ -1600,6 +1661,12 @@
|
|
|
1600
1661
|
opacity: 0;
|
|
1601
1662
|
}
|
|
1602
1663
|
}
|
|
1664
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1665
|
+
.sk-accordion-content[data-state=open],
|
|
1666
|
+
.sk-accordion-content[data-state=closed] {
|
|
1667
|
+
animation: none;
|
|
1668
|
+
}
|
|
1669
|
+
}
|
|
1603
1670
|
.sk-alert {
|
|
1604
1671
|
--sk-alert-padding: 0.75rem;
|
|
1605
1672
|
--sk-alert-gap: 0.75rem;
|
|
@@ -1623,6 +1690,7 @@
|
|
|
1623
1690
|
oklch(from var(--sk-alert-color-base) l c h / var(--sk-alert-glow-opacity));
|
|
1624
1691
|
}
|
|
1625
1692
|
.sk-alert {
|
|
1693
|
+
position: relative;
|
|
1626
1694
|
display: flex;
|
|
1627
1695
|
align-items: flex-start;
|
|
1628
1696
|
gap: var(--sk-alert-gap);
|
|
@@ -1882,6 +1950,7 @@
|
|
|
1882
1950
|
--sk-avatar-fg: var(--sk-neutral-text);
|
|
1883
1951
|
--sk-avatar-size: 2.5rem;
|
|
1884
1952
|
--sk-avatar-bevel: calc(var(--sk-avatar-size) * 0.25);
|
|
1953
|
+
position: relative;
|
|
1885
1954
|
display: inline-flex;
|
|
1886
1955
|
align-items: center;
|
|
1887
1956
|
justify-content: center;
|
|
@@ -2040,6 +2109,11 @@
|
|
|
2040
2109
|
font-family: inherit;
|
|
2041
2110
|
cursor: pointer;
|
|
2042
2111
|
}
|
|
2112
|
+
@media (pointer: coarse) {
|
|
2113
|
+
.sk-breadcrumb-item .sk-breadcrumb-link {
|
|
2114
|
+
min-height: 44px;
|
|
2115
|
+
}
|
|
2116
|
+
}
|
|
2043
2117
|
.sk-breadcrumb-item .sk-breadcrumb-link:hover:not([aria-current]) {
|
|
2044
2118
|
color: var(--sk-breadcrumbs-color-base);
|
|
2045
2119
|
text-decoration: underline;
|
|
@@ -2113,250 +2187,90 @@
|
|
|
2113
2187
|
--sk-button-bg-active: color-mix(in oklch, var(--sk-button-bg) 85%, black 15%);
|
|
2114
2188
|
--sk-button-border-base: var(--sk-button-color-base);
|
|
2115
2189
|
--sk-button-border-hover: color-mix(in oklch, var(--sk-button-color-base), white 12.68%);
|
|
2190
|
+
--sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-md));
|
|
2191
|
+
--sk-button-current-padding-x: var(--sk-button-padding-base);
|
|
2192
|
+
--sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-md));
|
|
2193
|
+
--sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
|
|
2116
2194
|
}
|
|
2117
2195
|
.sk-button {
|
|
2118
2196
|
position: relative;
|
|
2119
2197
|
display: inline-flex;
|
|
2120
2198
|
align-items: center;
|
|
2121
2199
|
justify-content: center;
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2200
|
+
flex-shrink: 0;
|
|
2201
|
+
background: transparent;
|
|
2202
|
+
border: none;
|
|
2203
|
+
padding: 0;
|
|
2126
2204
|
text-decoration: none;
|
|
2127
|
-
|
|
2128
|
-
|
|
2205
|
+
appearance: none;
|
|
2206
|
+
font-family: inherit;
|
|
2129
2207
|
cursor: pointer;
|
|
2130
2208
|
user-select: none;
|
|
2131
2209
|
touch-action: manipulation;
|
|
2132
|
-
flex-shrink: 0;
|
|
2133
2210
|
}
|
|
2134
2211
|
.sk-button ul li::marker {
|
|
2135
2212
|
color: var(--sk-kind-color, var(--sk-button-color-base));
|
|
2136
2213
|
}
|
|
2137
|
-
@
|
|
2138
|
-
.sk-button {
|
|
2139
|
-
|
|
2140
|
-
border-top-left-radius: calc(var(--sk-button-height-base) / var(--sk-button-radius-factor));
|
|
2141
|
-
border-top-right-radius: 0;
|
|
2142
|
-
border-bottom-right-radius: calc(var(--sk-button-height-base) / var(--sk-button-radius-factor));
|
|
2143
|
-
border-bottom-left-radius: 0;
|
|
2144
|
-
corner-shape: bevel;
|
|
2145
|
-
}
|
|
2146
|
-
}
|
|
2147
|
-
@supports not (corner-shape: bevel) {
|
|
2148
|
-
.sk-button {
|
|
2149
|
-
border: none;
|
|
2150
|
-
clip-path: polygon(calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)) 0%, 100% 0%, 100% calc(100% - calc(var(--sk-button-height-base) / var(--sk-button-radius-factor))), calc(100% - calc(var(--sk-button-height-base) / var(--sk-button-radius-factor))) 100%, 0% 100%, 0% calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)));
|
|
2151
|
-
}
|
|
2152
|
-
.sk-button::before {
|
|
2153
|
-
content: "";
|
|
2154
|
-
position: absolute;
|
|
2155
|
-
top: 0;
|
|
2156
|
-
left: 0;
|
|
2157
|
-
right: 0;
|
|
2158
|
-
bottom: 0;
|
|
2159
|
-
background-color: var(--sk-button-border-color);
|
|
2160
|
-
z-index: -1;
|
|
2161
|
-
clip-path: polygon(calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)) 0%, 100% 0%, 100% calc(100% - calc(var(--sk-button-height-base) / var(--sk-button-radius-factor))), calc(100% - calc(var(--sk-button-height-base) / var(--sk-button-radius-factor))) 100%, 0% 100%, 0% calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)), calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)) 0%, calc(calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)) + var(--sk-button-border-width)) var(--sk-button-border-width), var(--sk-button-border-width) calc(calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)) + var(--sk-button-border-width)), var(--sk-button-border-width) calc(100% - var(--sk-button-border-width)), calc(100% - calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)) - var(--sk-button-border-width)) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) calc(100% - calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)) - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) var(--sk-button-border-width), calc(calc(var(--sk-button-height-base) / var(--sk-button-radius-factor)) + var(--sk-button-border-width)) var(--sk-button-border-width));
|
|
2214
|
+
@media (pointer: coarse) {
|
|
2215
|
+
.sk-button:not(.sk-dense) {
|
|
2216
|
+
min-height: 44px;
|
|
2162
2217
|
}
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
|
-
.sk-button {
|
|
2166
|
-
box-shadow: var(--sk-button-glow-shadow);
|
|
2218
|
+
.sk-button:not(.sk-dense).sk-icon-only {
|
|
2219
|
+
min-width: 44px;
|
|
2167
2220
|
}
|
|
2168
2221
|
}
|
|
2169
|
-
.sk-button {
|
|
2170
|
-
transition: color var(--sk-button-transition-duration) var(--sk-button-transition-easing), background-color var(--sk-button-transition-duration) var(--sk-button-transition-easing), border-color var(--sk-button-transition-duration) var(--sk-button-transition-easing), box-shadow var(--sk-button-transition-duration) var(--sk-button-transition-easing);
|
|
2171
|
-
appearance: none;
|
|
2172
|
-
font-family: inherit;
|
|
2173
|
-
}
|
|
2174
2222
|
.sk-button.sk-xs {
|
|
2175
|
-
--sk-button-
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-xs));
|
|
2180
|
-
}
|
|
2181
|
-
@supports (corner-shape: bevel) {
|
|
2182
|
-
.sk-button.sk-xs {
|
|
2183
|
-
border: var(--sk-button-border-width) solid var(--sk-button-border-color);
|
|
2184
|
-
border-top-left-radius: var(--sk-button-cut-size);
|
|
2185
|
-
border-top-right-radius: 0;
|
|
2186
|
-
border-bottom-right-radius: var(--sk-button-cut-size);
|
|
2187
|
-
border-bottom-left-radius: 0;
|
|
2188
|
-
corner-shape: bevel;
|
|
2189
|
-
}
|
|
2190
|
-
}
|
|
2191
|
-
@supports not (corner-shape: bevel) {
|
|
2192
|
-
.sk-button.sk-xs {
|
|
2193
|
-
border: none;
|
|
2194
|
-
clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size));
|
|
2195
|
-
}
|
|
2196
|
-
.sk-button.sk-xs::before {
|
|
2197
|
-
content: "";
|
|
2198
|
-
position: absolute;
|
|
2199
|
-
top: 0;
|
|
2200
|
-
left: 0;
|
|
2201
|
-
right: 0;
|
|
2202
|
-
bottom: 0;
|
|
2203
|
-
background-color: var(--sk-button-border-color);
|
|
2204
|
-
z-index: -1;
|
|
2205
|
-
clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size), var(--sk-button-cut-size) 0%, calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width), var(--sk-button-border-width) calc(var(--sk-button-cut-size) + var(--sk-button-border-width)), var(--sk-button-border-width) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) var(--sk-button-border-width), calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width));
|
|
2206
|
-
}
|
|
2223
|
+
--sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-xs));
|
|
2224
|
+
--sk-button-current-padding-x: var(--sk-button-padding-xs);
|
|
2225
|
+
--sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-xs));
|
|
2226
|
+
--sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
|
|
2207
2227
|
}
|
|
2208
2228
|
.sk-button.sk-sm {
|
|
2209
|
-
--sk-button-
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-sm));
|
|
2214
|
-
}
|
|
2215
|
-
@supports (corner-shape: bevel) {
|
|
2216
|
-
.sk-button.sk-sm {
|
|
2217
|
-
border: var(--sk-button-border-width) solid var(--sk-button-border-color);
|
|
2218
|
-
border-top-left-radius: var(--sk-button-cut-size);
|
|
2219
|
-
border-top-right-radius: 0;
|
|
2220
|
-
border-bottom-right-radius: var(--sk-button-cut-size);
|
|
2221
|
-
border-bottom-left-radius: 0;
|
|
2222
|
-
corner-shape: bevel;
|
|
2223
|
-
}
|
|
2224
|
-
}
|
|
2225
|
-
@supports not (corner-shape: bevel) {
|
|
2226
|
-
.sk-button.sk-sm {
|
|
2227
|
-
border: none;
|
|
2228
|
-
clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size));
|
|
2229
|
-
}
|
|
2230
|
-
.sk-button.sk-sm::before {
|
|
2231
|
-
content: "";
|
|
2232
|
-
position: absolute;
|
|
2233
|
-
top: 0;
|
|
2234
|
-
left: 0;
|
|
2235
|
-
right: 0;
|
|
2236
|
-
bottom: 0;
|
|
2237
|
-
background-color: var(--sk-button-border-color);
|
|
2238
|
-
z-index: -1;
|
|
2239
|
-
clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size), var(--sk-button-cut-size) 0%, calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width), var(--sk-button-border-width) calc(var(--sk-button-cut-size) + var(--sk-button-border-width)), var(--sk-button-border-width) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) var(--sk-button-border-width), calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width));
|
|
2240
|
-
}
|
|
2229
|
+
--sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-sm));
|
|
2230
|
+
--sk-button-current-padding-x: var(--sk-button-padding-base);
|
|
2231
|
+
--sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-sm));
|
|
2232
|
+
--sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
|
|
2241
2233
|
}
|
|
2242
2234
|
.sk-button.sk-md {
|
|
2243
|
-
--sk-button-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-md));
|
|
2248
|
-
}
|
|
2249
|
-
@supports (corner-shape: bevel) {
|
|
2250
|
-
.sk-button.sk-md {
|
|
2251
|
-
border: var(--sk-button-border-width) solid var(--sk-button-border-color);
|
|
2252
|
-
border-top-left-radius: var(--sk-button-cut-size);
|
|
2253
|
-
border-top-right-radius: 0;
|
|
2254
|
-
border-bottom-right-radius: var(--sk-button-cut-size);
|
|
2255
|
-
border-bottom-left-radius: 0;
|
|
2256
|
-
corner-shape: bevel;
|
|
2257
|
-
}
|
|
2258
|
-
}
|
|
2259
|
-
@supports not (corner-shape: bevel) {
|
|
2260
|
-
.sk-button.sk-md {
|
|
2261
|
-
border: none;
|
|
2262
|
-
clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size));
|
|
2263
|
-
}
|
|
2264
|
-
.sk-button.sk-md::before {
|
|
2265
|
-
content: "";
|
|
2266
|
-
position: absolute;
|
|
2267
|
-
top: 0;
|
|
2268
|
-
left: 0;
|
|
2269
|
-
right: 0;
|
|
2270
|
-
bottom: 0;
|
|
2271
|
-
background-color: var(--sk-button-border-color);
|
|
2272
|
-
z-index: -1;
|
|
2273
|
-
clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size), var(--sk-button-cut-size) 0%, calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width), var(--sk-button-border-width) calc(var(--sk-button-cut-size) + var(--sk-button-border-width)), var(--sk-button-border-width) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) var(--sk-button-border-width), calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width));
|
|
2274
|
-
}
|
|
2235
|
+
--sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-md));
|
|
2236
|
+
--sk-button-current-padding-x: var(--sk-button-padding-base);
|
|
2237
|
+
--sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-md));
|
|
2238
|
+
--sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
|
|
2275
2239
|
}
|
|
2276
2240
|
.sk-button.sk-lg {
|
|
2277
|
-
--sk-button-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-lg));
|
|
2282
|
-
}
|
|
2283
|
-
@supports (corner-shape: bevel) {
|
|
2284
|
-
.sk-button.sk-lg {
|
|
2285
|
-
border: var(--sk-button-border-width) solid var(--sk-button-border-color);
|
|
2286
|
-
border-top-left-radius: var(--sk-button-cut-size);
|
|
2287
|
-
border-top-right-radius: 0;
|
|
2288
|
-
border-bottom-right-radius: var(--sk-button-cut-size);
|
|
2289
|
-
border-bottom-left-radius: 0;
|
|
2290
|
-
corner-shape: bevel;
|
|
2291
|
-
}
|
|
2292
|
-
}
|
|
2293
|
-
@supports not (corner-shape: bevel) {
|
|
2294
|
-
.sk-button.sk-lg {
|
|
2295
|
-
border: none;
|
|
2296
|
-
clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size));
|
|
2297
|
-
}
|
|
2298
|
-
.sk-button.sk-lg::before {
|
|
2299
|
-
content: "";
|
|
2300
|
-
position: absolute;
|
|
2301
|
-
top: 0;
|
|
2302
|
-
left: 0;
|
|
2303
|
-
right: 0;
|
|
2304
|
-
bottom: 0;
|
|
2305
|
-
background-color: var(--sk-button-border-color);
|
|
2306
|
-
z-index: -1;
|
|
2307
|
-
clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size), var(--sk-button-cut-size) 0%, calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width), var(--sk-button-border-width) calc(var(--sk-button-cut-size) + var(--sk-button-border-width)), var(--sk-button-border-width) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) var(--sk-button-border-width), calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width));
|
|
2308
|
-
}
|
|
2241
|
+
--sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-lg));
|
|
2242
|
+
--sk-button-current-padding-x: var(--sk-button-padding-base);
|
|
2243
|
+
--sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-lg));
|
|
2244
|
+
--sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
|
|
2309
2245
|
}
|
|
2310
2246
|
.sk-button.sk-xl {
|
|
2311
|
-
--sk-button-
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-xl));
|
|
2316
|
-
}
|
|
2317
|
-
@supports (corner-shape: bevel) {
|
|
2318
|
-
.sk-button.sk-xl {
|
|
2319
|
-
border: var(--sk-button-border-width) solid var(--sk-button-border-color);
|
|
2320
|
-
border-top-left-radius: var(--sk-button-cut-size);
|
|
2321
|
-
border-top-right-radius: 0;
|
|
2322
|
-
border-bottom-right-radius: var(--sk-button-cut-size);
|
|
2323
|
-
border-bottom-left-radius: 0;
|
|
2324
|
-
corner-shape: bevel;
|
|
2325
|
-
}
|
|
2326
|
-
}
|
|
2327
|
-
@supports not (corner-shape: bevel) {
|
|
2328
|
-
.sk-button.sk-xl {
|
|
2329
|
-
border: none;
|
|
2330
|
-
clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size));
|
|
2331
|
-
}
|
|
2332
|
-
.sk-button.sk-xl::before {
|
|
2333
|
-
content: "";
|
|
2334
|
-
position: absolute;
|
|
2335
|
-
top: 0;
|
|
2336
|
-
left: 0;
|
|
2337
|
-
right: 0;
|
|
2338
|
-
bottom: 0;
|
|
2339
|
-
background-color: var(--sk-button-border-color);
|
|
2340
|
-
z-index: -1;
|
|
2341
|
-
clip-path: polygon(var(--sk-button-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-cut-size)), calc(100% - var(--sk-button-cut-size)) 100%, 0% 100%, 0% var(--sk-button-cut-size), var(--sk-button-cut-size) 0%, calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width), var(--sk-button-border-width) calc(var(--sk-button-cut-size) + var(--sk-button-border-width)), var(--sk-button-border-width) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) calc(100% - var(--sk-button-cut-size) - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) var(--sk-button-border-width), calc(var(--sk-button-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width));
|
|
2342
|
-
}
|
|
2247
|
+
--sk-button-current-height: calc(var(--sk-button-height-base) * var(--sk-button-scale-xl));
|
|
2248
|
+
--sk-button-current-padding-x: var(--sk-button-padding-xl);
|
|
2249
|
+
--sk-button-current-font-size: calc(var(--sk-button-font-size-base) * var(--sk-button-font-scale-xl));
|
|
2250
|
+
--sk-button-current-cut-size: calc(var(--sk-button-current-height) / var(--sk-button-radius-factor));
|
|
2343
2251
|
}
|
|
2344
2252
|
.sk-button.sk-outline.sk-neutral {
|
|
2345
2253
|
--sk-button-color-base: var(--sk-neutral-base);
|
|
2346
2254
|
--sk-button-text: var(--sk-neutral-text);
|
|
2347
2255
|
--sk-kind-color: var(--sk-neutral-base);
|
|
2348
2256
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2257
|
+
}
|
|
2258
|
+
.sk-button.sk-outline.sk-neutral .sk-button-chrome {
|
|
2349
2259
|
background-color: var(--sk-button-outline-bg);
|
|
2350
2260
|
color: var(--sk-button-color-base);
|
|
2351
2261
|
}
|
|
2352
2262
|
.sk-button.sk-outline.sk-neutral:hover:not(:disabled) {
|
|
2353
2263
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2354
2264
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2265
|
+
}
|
|
2266
|
+
.sk-button.sk-outline.sk-neutral:hover:not(:disabled) .sk-button-chrome {
|
|
2355
2267
|
background-color: var(--sk-button-bg);
|
|
2356
2268
|
}
|
|
2357
2269
|
.sk-button.sk-outline.sk-neutral:active:not(:disabled) {
|
|
2358
2270
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2359
2271
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2272
|
+
}
|
|
2273
|
+
.sk-button.sk-outline.sk-neutral:active:not(:disabled) .sk-button-chrome {
|
|
2360
2274
|
background-color: var(--sk-button-bg-hover);
|
|
2361
2275
|
color: var(--sk-button-text);
|
|
2362
2276
|
}
|
|
@@ -2365,17 +2279,23 @@
|
|
|
2365
2279
|
--sk-button-text: var(--sk-primary-text);
|
|
2366
2280
|
--sk-kind-color: var(--sk-primary-base);
|
|
2367
2281
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2282
|
+
}
|
|
2283
|
+
.sk-button.sk-outline.sk-primary .sk-button-chrome {
|
|
2368
2284
|
background-color: var(--sk-button-outline-bg);
|
|
2369
2285
|
color: var(--sk-button-color-base);
|
|
2370
2286
|
}
|
|
2371
2287
|
.sk-button.sk-outline.sk-primary:hover:not(:disabled) {
|
|
2372
2288
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2373
2289
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2290
|
+
}
|
|
2291
|
+
.sk-button.sk-outline.sk-primary:hover:not(:disabled) .sk-button-chrome {
|
|
2374
2292
|
background-color: var(--sk-button-bg);
|
|
2375
2293
|
}
|
|
2376
2294
|
.sk-button.sk-outline.sk-primary:active:not(:disabled) {
|
|
2377
2295
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2378
2296
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2297
|
+
}
|
|
2298
|
+
.sk-button.sk-outline.sk-primary:active:not(:disabled) .sk-button-chrome {
|
|
2379
2299
|
background-color: var(--sk-button-bg-hover);
|
|
2380
2300
|
color: var(--sk-button-text);
|
|
2381
2301
|
}
|
|
@@ -2384,17 +2304,23 @@
|
|
|
2384
2304
|
--sk-button-text: var(--sk-accent-text);
|
|
2385
2305
|
--sk-kind-color: var(--sk-accent-base);
|
|
2386
2306
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2307
|
+
}
|
|
2308
|
+
.sk-button.sk-outline.sk-accent .sk-button-chrome {
|
|
2387
2309
|
background-color: var(--sk-button-outline-bg);
|
|
2388
2310
|
color: var(--sk-button-color-base);
|
|
2389
2311
|
}
|
|
2390
2312
|
.sk-button.sk-outline.sk-accent:hover:not(:disabled) {
|
|
2391
2313
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2392
2314
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2315
|
+
}
|
|
2316
|
+
.sk-button.sk-outline.sk-accent:hover:not(:disabled) .sk-button-chrome {
|
|
2393
2317
|
background-color: var(--sk-button-bg);
|
|
2394
2318
|
}
|
|
2395
2319
|
.sk-button.sk-outline.sk-accent:active:not(:disabled) {
|
|
2396
2320
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2397
2321
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2322
|
+
}
|
|
2323
|
+
.sk-button.sk-outline.sk-accent:active:not(:disabled) .sk-button-chrome {
|
|
2398
2324
|
background-color: var(--sk-button-bg-hover);
|
|
2399
2325
|
color: var(--sk-button-text);
|
|
2400
2326
|
}
|
|
@@ -2403,17 +2329,23 @@
|
|
|
2403
2329
|
--sk-button-text: var(--sk-info-text);
|
|
2404
2330
|
--sk-kind-color: var(--sk-info-base);
|
|
2405
2331
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2332
|
+
}
|
|
2333
|
+
.sk-button.sk-outline.sk-info .sk-button-chrome {
|
|
2406
2334
|
background-color: var(--sk-button-outline-bg);
|
|
2407
2335
|
color: var(--sk-button-color-base);
|
|
2408
2336
|
}
|
|
2409
2337
|
.sk-button.sk-outline.sk-info:hover:not(:disabled) {
|
|
2410
2338
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2411
2339
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2340
|
+
}
|
|
2341
|
+
.sk-button.sk-outline.sk-info:hover:not(:disabled) .sk-button-chrome {
|
|
2412
2342
|
background-color: var(--sk-button-bg);
|
|
2413
2343
|
}
|
|
2414
2344
|
.sk-button.sk-outline.sk-info:active:not(:disabled) {
|
|
2415
2345
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2416
2346
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2347
|
+
}
|
|
2348
|
+
.sk-button.sk-outline.sk-info:active:not(:disabled) .sk-button-chrome {
|
|
2417
2349
|
background-color: var(--sk-button-bg-hover);
|
|
2418
2350
|
color: var(--sk-button-text);
|
|
2419
2351
|
}
|
|
@@ -2422,17 +2354,23 @@
|
|
|
2422
2354
|
--sk-button-text: var(--sk-success-text);
|
|
2423
2355
|
--sk-kind-color: var(--sk-success-base);
|
|
2424
2356
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2357
|
+
}
|
|
2358
|
+
.sk-button.sk-outline.sk-success .sk-button-chrome {
|
|
2425
2359
|
background-color: var(--sk-button-outline-bg);
|
|
2426
2360
|
color: var(--sk-button-color-base);
|
|
2427
2361
|
}
|
|
2428
2362
|
.sk-button.sk-outline.sk-success:hover:not(:disabled) {
|
|
2429
2363
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2430
2364
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2365
|
+
}
|
|
2366
|
+
.sk-button.sk-outline.sk-success:hover:not(:disabled) .sk-button-chrome {
|
|
2431
2367
|
background-color: var(--sk-button-bg);
|
|
2432
2368
|
}
|
|
2433
2369
|
.sk-button.sk-outline.sk-success:active:not(:disabled) {
|
|
2434
2370
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2435
2371
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2372
|
+
}
|
|
2373
|
+
.sk-button.sk-outline.sk-success:active:not(:disabled) .sk-button-chrome {
|
|
2436
2374
|
background-color: var(--sk-button-bg-hover);
|
|
2437
2375
|
color: var(--sk-button-text);
|
|
2438
2376
|
}
|
|
@@ -2441,17 +2379,23 @@
|
|
|
2441
2379
|
--sk-button-text: var(--sk-warning-text);
|
|
2442
2380
|
--sk-kind-color: var(--sk-warning-base);
|
|
2443
2381
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2382
|
+
}
|
|
2383
|
+
.sk-button.sk-outline.sk-warning .sk-button-chrome {
|
|
2444
2384
|
background-color: var(--sk-button-outline-bg);
|
|
2445
2385
|
color: var(--sk-button-color-base);
|
|
2446
2386
|
}
|
|
2447
2387
|
.sk-button.sk-outline.sk-warning:hover:not(:disabled) {
|
|
2448
2388
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2449
2389
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2390
|
+
}
|
|
2391
|
+
.sk-button.sk-outline.sk-warning:hover:not(:disabled) .sk-button-chrome {
|
|
2450
2392
|
background-color: var(--sk-button-bg);
|
|
2451
2393
|
}
|
|
2452
2394
|
.sk-button.sk-outline.sk-warning:active:not(:disabled) {
|
|
2453
2395
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2454
2396
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2397
|
+
}
|
|
2398
|
+
.sk-button.sk-outline.sk-warning:active:not(:disabled) .sk-button-chrome {
|
|
2455
2399
|
background-color: var(--sk-button-bg-hover);
|
|
2456
2400
|
color: var(--sk-button-text);
|
|
2457
2401
|
}
|
|
@@ -2460,17 +2404,23 @@
|
|
|
2460
2404
|
--sk-button-text: var(--sk-danger-text);
|
|
2461
2405
|
--sk-kind-color: var(--sk-danger-base);
|
|
2462
2406
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2407
|
+
}
|
|
2408
|
+
.sk-button.sk-outline.sk-danger .sk-button-chrome {
|
|
2463
2409
|
background-color: var(--sk-button-outline-bg);
|
|
2464
2410
|
color: var(--sk-button-color-base);
|
|
2465
2411
|
}
|
|
2466
2412
|
.sk-button.sk-outline.sk-danger:hover:not(:disabled) {
|
|
2467
2413
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2468
2414
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2415
|
+
}
|
|
2416
|
+
.sk-button.sk-outline.sk-danger:hover:not(:disabled) .sk-button-chrome {
|
|
2469
2417
|
background-color: var(--sk-button-bg);
|
|
2470
2418
|
}
|
|
2471
2419
|
.sk-button.sk-outline.sk-danger:active:not(:disabled) {
|
|
2472
2420
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2473
2421
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2422
|
+
}
|
|
2423
|
+
.sk-button.sk-outline.sk-danger:active:not(:disabled) .sk-button-chrome {
|
|
2474
2424
|
background-color: var(--sk-button-bg-hover);
|
|
2475
2425
|
color: var(--sk-button-text);
|
|
2476
2426
|
}
|
|
@@ -2479,17 +2429,23 @@
|
|
|
2479
2429
|
--sk-button-text: var(--sk-boulder-text);
|
|
2480
2430
|
--sk-kind-color: var(--sk-boulder-base);
|
|
2481
2431
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2432
|
+
}
|
|
2433
|
+
.sk-button.sk-outline.sk-boulder .sk-button-chrome {
|
|
2482
2434
|
background-color: var(--sk-button-outline-bg);
|
|
2483
2435
|
color: var(--sk-button-color-base);
|
|
2484
2436
|
}
|
|
2485
2437
|
.sk-button.sk-outline.sk-boulder:hover:not(:disabled) {
|
|
2486
2438
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2487
2439
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2440
|
+
}
|
|
2441
|
+
.sk-button.sk-outline.sk-boulder:hover:not(:disabled) .sk-button-chrome {
|
|
2488
2442
|
background-color: var(--sk-button-bg);
|
|
2489
2443
|
}
|
|
2490
2444
|
.sk-button.sk-outline.sk-boulder:active:not(:disabled) {
|
|
2491
2445
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2492
2446
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2447
|
+
}
|
|
2448
|
+
.sk-button.sk-outline.sk-boulder:active:not(:disabled) .sk-button-chrome {
|
|
2493
2449
|
background-color: var(--sk-button-bg-hover);
|
|
2494
2450
|
color: var(--sk-button-text);
|
|
2495
2451
|
}
|
|
@@ -2498,17 +2454,23 @@
|
|
|
2498
2454
|
--sk-button-text: var(--sk-neon-blue-text);
|
|
2499
2455
|
--sk-kind-color: var(--sk-neon-blue-base);
|
|
2500
2456
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2457
|
+
}
|
|
2458
|
+
.sk-button.sk-outline.sk-neon-blue .sk-button-chrome {
|
|
2501
2459
|
background-color: var(--sk-button-outline-bg);
|
|
2502
2460
|
color: var(--sk-button-color-base);
|
|
2503
2461
|
}
|
|
2504
2462
|
.sk-button.sk-outline.sk-neon-blue:hover:not(:disabled) {
|
|
2505
2463
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2506
2464
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2465
|
+
}
|
|
2466
|
+
.sk-button.sk-outline.sk-neon-blue:hover:not(:disabled) .sk-button-chrome {
|
|
2507
2467
|
background-color: var(--sk-button-bg);
|
|
2508
2468
|
}
|
|
2509
2469
|
.sk-button.sk-outline.sk-neon-blue:active:not(:disabled) {
|
|
2510
2470
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2511
2471
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2472
|
+
}
|
|
2473
|
+
.sk-button.sk-outline.sk-neon-blue:active:not(:disabled) .sk-button-chrome {
|
|
2512
2474
|
background-color: var(--sk-button-bg-hover);
|
|
2513
2475
|
color: var(--sk-button-text);
|
|
2514
2476
|
}
|
|
@@ -2517,17 +2479,23 @@
|
|
|
2517
2479
|
--sk-button-text: var(--sk-light-blue-text);
|
|
2518
2480
|
--sk-kind-color: var(--sk-light-blue-base);
|
|
2519
2481
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2482
|
+
}
|
|
2483
|
+
.sk-button.sk-outline.sk-light-blue .sk-button-chrome {
|
|
2520
2484
|
background-color: var(--sk-button-outline-bg);
|
|
2521
2485
|
color: var(--sk-button-color-base);
|
|
2522
2486
|
}
|
|
2523
2487
|
.sk-button.sk-outline.sk-light-blue:hover:not(:disabled) {
|
|
2524
2488
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2525
2489
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2490
|
+
}
|
|
2491
|
+
.sk-button.sk-outline.sk-light-blue:hover:not(:disabled) .sk-button-chrome {
|
|
2526
2492
|
background-color: var(--sk-button-bg);
|
|
2527
2493
|
}
|
|
2528
2494
|
.sk-button.sk-outline.sk-light-blue:active:not(:disabled) {
|
|
2529
2495
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2530
2496
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2497
|
+
}
|
|
2498
|
+
.sk-button.sk-outline.sk-light-blue:active:not(:disabled) .sk-button-chrome {
|
|
2531
2499
|
background-color: var(--sk-button-bg-hover);
|
|
2532
2500
|
color: var(--sk-button-text);
|
|
2533
2501
|
}
|
|
@@ -2536,17 +2504,23 @@
|
|
|
2536
2504
|
--sk-button-text: var(--sk-neon-orange-text);
|
|
2537
2505
|
--sk-kind-color: var(--sk-neon-orange-base);
|
|
2538
2506
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2507
|
+
}
|
|
2508
|
+
.sk-button.sk-outline.sk-neon-orange .sk-button-chrome {
|
|
2539
2509
|
background-color: var(--sk-button-outline-bg);
|
|
2540
2510
|
color: var(--sk-button-color-base);
|
|
2541
2511
|
}
|
|
2542
2512
|
.sk-button.sk-outline.sk-neon-orange:hover:not(:disabled) {
|
|
2543
2513
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2544
2514
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2515
|
+
}
|
|
2516
|
+
.sk-button.sk-outline.sk-neon-orange:hover:not(:disabled) .sk-button-chrome {
|
|
2545
2517
|
background-color: var(--sk-button-bg);
|
|
2546
2518
|
}
|
|
2547
2519
|
.sk-button.sk-outline.sk-neon-orange:active:not(:disabled) {
|
|
2548
2520
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2549
2521
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2522
|
+
}
|
|
2523
|
+
.sk-button.sk-outline.sk-neon-orange:active:not(:disabled) .sk-button-chrome {
|
|
2550
2524
|
background-color: var(--sk-button-bg-hover);
|
|
2551
2525
|
color: var(--sk-button-text);
|
|
2552
2526
|
}
|
|
@@ -2555,17 +2529,23 @@
|
|
|
2555
2529
|
--sk-button-text: var(--sk-neon-purple-text);
|
|
2556
2530
|
--sk-kind-color: var(--sk-neon-purple-base);
|
|
2557
2531
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2532
|
+
}
|
|
2533
|
+
.sk-button.sk-outline.sk-neon-purple .sk-button-chrome {
|
|
2558
2534
|
background-color: var(--sk-button-outline-bg);
|
|
2559
2535
|
color: var(--sk-button-color-base);
|
|
2560
2536
|
}
|
|
2561
2537
|
.sk-button.sk-outline.sk-neon-purple:hover:not(:disabled) {
|
|
2562
2538
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2563
2539
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2540
|
+
}
|
|
2541
|
+
.sk-button.sk-outline.sk-neon-purple:hover:not(:disabled) .sk-button-chrome {
|
|
2564
2542
|
background-color: var(--sk-button-bg);
|
|
2565
2543
|
}
|
|
2566
2544
|
.sk-button.sk-outline.sk-neon-purple:active:not(:disabled) {
|
|
2567
2545
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2568
2546
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2547
|
+
}
|
|
2548
|
+
.sk-button.sk-outline.sk-neon-purple:active:not(:disabled) .sk-button-chrome {
|
|
2569
2549
|
background-color: var(--sk-button-bg-hover);
|
|
2570
2550
|
color: var(--sk-button-text);
|
|
2571
2551
|
}
|
|
@@ -2574,17 +2554,23 @@
|
|
|
2574
2554
|
--sk-button-text: var(--sk-neon-green-text);
|
|
2575
2555
|
--sk-kind-color: var(--sk-neon-green-base);
|
|
2576
2556
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2557
|
+
}
|
|
2558
|
+
.sk-button.sk-outline.sk-neon-green .sk-button-chrome {
|
|
2577
2559
|
background-color: var(--sk-button-outline-bg);
|
|
2578
2560
|
color: var(--sk-button-color-base);
|
|
2579
2561
|
}
|
|
2580
2562
|
.sk-button.sk-outline.sk-neon-green:hover:not(:disabled) {
|
|
2581
2563
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2582
2564
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2565
|
+
}
|
|
2566
|
+
.sk-button.sk-outline.sk-neon-green:hover:not(:disabled) .sk-button-chrome {
|
|
2583
2567
|
background-color: var(--sk-button-bg);
|
|
2584
2568
|
}
|
|
2585
2569
|
.sk-button.sk-outline.sk-neon-green:active:not(:disabled) {
|
|
2586
2570
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2587
2571
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2572
|
+
}
|
|
2573
|
+
.sk-button.sk-outline.sk-neon-green:active:not(:disabled) .sk-button-chrome {
|
|
2588
2574
|
background-color: var(--sk-button-bg-hover);
|
|
2589
2575
|
color: var(--sk-button-text);
|
|
2590
2576
|
}
|
|
@@ -2593,17 +2579,23 @@
|
|
|
2593
2579
|
--sk-button-text: var(--sk-neon-mint-text);
|
|
2594
2580
|
--sk-kind-color: var(--sk-neon-mint-base);
|
|
2595
2581
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2582
|
+
}
|
|
2583
|
+
.sk-button.sk-outline.sk-neon-mint .sk-button-chrome {
|
|
2596
2584
|
background-color: var(--sk-button-outline-bg);
|
|
2597
2585
|
color: var(--sk-button-color-base);
|
|
2598
2586
|
}
|
|
2599
2587
|
.sk-button.sk-outline.sk-neon-mint:hover:not(:disabled) {
|
|
2600
2588
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2601
2589
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2590
|
+
}
|
|
2591
|
+
.sk-button.sk-outline.sk-neon-mint:hover:not(:disabled) .sk-button-chrome {
|
|
2602
2592
|
background-color: var(--sk-button-bg);
|
|
2603
2593
|
}
|
|
2604
2594
|
.sk-button.sk-outline.sk-neon-mint:active:not(:disabled) {
|
|
2605
2595
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2606
2596
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2597
|
+
}
|
|
2598
|
+
.sk-button.sk-outline.sk-neon-mint:active:not(:disabled) .sk-button-chrome {
|
|
2607
2599
|
background-color: var(--sk-button-bg-hover);
|
|
2608
2600
|
color: var(--sk-button-text);
|
|
2609
2601
|
}
|
|
@@ -2612,17 +2604,23 @@
|
|
|
2612
2604
|
--sk-button-text: var(--sk-neon-pink-text);
|
|
2613
2605
|
--sk-kind-color: var(--sk-neon-pink-base);
|
|
2614
2606
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2607
|
+
}
|
|
2608
|
+
.sk-button.sk-outline.sk-neon-pink .sk-button-chrome {
|
|
2615
2609
|
background-color: var(--sk-button-outline-bg);
|
|
2616
2610
|
color: var(--sk-button-color-base);
|
|
2617
2611
|
}
|
|
2618
2612
|
.sk-button.sk-outline.sk-neon-pink:hover:not(:disabled) {
|
|
2619
2613
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2620
2614
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2615
|
+
}
|
|
2616
|
+
.sk-button.sk-outline.sk-neon-pink:hover:not(:disabled) .sk-button-chrome {
|
|
2621
2617
|
background-color: var(--sk-button-bg);
|
|
2622
2618
|
}
|
|
2623
2619
|
.sk-button.sk-outline.sk-neon-pink:active:not(:disabled) {
|
|
2624
2620
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2625
2621
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2622
|
+
}
|
|
2623
|
+
.sk-button.sk-outline.sk-neon-pink:active:not(:disabled) .sk-button-chrome {
|
|
2626
2624
|
background-color: var(--sk-button-bg-hover);
|
|
2627
2625
|
color: var(--sk-button-text);
|
|
2628
2626
|
}
|
|
@@ -2631,17 +2629,23 @@
|
|
|
2631
2629
|
--sk-button-text: var(--sk-yellow-text);
|
|
2632
2630
|
--sk-kind-color: var(--sk-yellow-base);
|
|
2633
2631
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2632
|
+
}
|
|
2633
|
+
.sk-button.sk-outline.sk-yellow .sk-button-chrome {
|
|
2634
2634
|
background-color: var(--sk-button-outline-bg);
|
|
2635
2635
|
color: var(--sk-button-color-base);
|
|
2636
2636
|
}
|
|
2637
2637
|
.sk-button.sk-outline.sk-yellow:hover:not(:disabled) {
|
|
2638
2638
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2639
2639
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2640
|
+
}
|
|
2641
|
+
.sk-button.sk-outline.sk-yellow:hover:not(:disabled) .sk-button-chrome {
|
|
2640
2642
|
background-color: var(--sk-button-bg);
|
|
2641
2643
|
}
|
|
2642
2644
|
.sk-button.sk-outline.sk-yellow:active:not(:disabled) {
|
|
2643
2645
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2644
2646
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2647
|
+
}
|
|
2648
|
+
.sk-button.sk-outline.sk-yellow:active:not(:disabled) .sk-button-chrome {
|
|
2645
2649
|
background-color: var(--sk-button-bg-hover);
|
|
2646
2650
|
color: var(--sk-button-text);
|
|
2647
2651
|
}
|
|
@@ -2650,22 +2654,30 @@
|
|
|
2650
2654
|
--sk-button-text: var(--sk-red-text);
|
|
2651
2655
|
--sk-kind-color: var(--sk-red-base);
|
|
2652
2656
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2657
|
+
}
|
|
2658
|
+
.sk-button.sk-outline.sk-red .sk-button-chrome {
|
|
2653
2659
|
background-color: var(--sk-button-outline-bg);
|
|
2654
2660
|
color: var(--sk-button-color-base);
|
|
2655
2661
|
}
|
|
2656
2662
|
.sk-button.sk-outline.sk-red:hover:not(:disabled) {
|
|
2657
2663
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2658
2664
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2665
|
+
}
|
|
2666
|
+
.sk-button.sk-outline.sk-red:hover:not(:disabled) .sk-button-chrome {
|
|
2659
2667
|
background-color: var(--sk-button-bg);
|
|
2660
2668
|
}
|
|
2661
2669
|
.sk-button.sk-outline.sk-red:active:not(:disabled) {
|
|
2662
2670
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2663
2671
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2672
|
+
}
|
|
2673
|
+
.sk-button.sk-outline.sk-red:active:not(:disabled) .sk-button-chrome {
|
|
2664
2674
|
background-color: var(--sk-button-bg-hover);
|
|
2665
2675
|
color: var(--sk-button-text);
|
|
2666
2676
|
}
|
|
2667
2677
|
.sk-button.sk-outline.sk-neutral {
|
|
2668
2678
|
--sk-button-border-color: color-mix(in oklch, var(--sk-button-border-base), white 25%);
|
|
2679
|
+
}
|
|
2680
|
+
.sk-button.sk-outline.sk-neutral .sk-button-chrome {
|
|
2669
2681
|
color: color-mix(in oklch, var(--sk-button-color-base), white 50%);
|
|
2670
2682
|
}
|
|
2671
2683
|
.sk-button.sk-solid.sk-neutral {
|
|
@@ -2673,17 +2685,23 @@
|
|
|
2673
2685
|
--sk-button-text: var(--sk-neutral-text);
|
|
2674
2686
|
--sk-kind-color: var(--sk-neutral-base);
|
|
2675
2687
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2688
|
+
}
|
|
2689
|
+
.sk-button.sk-solid.sk-neutral .sk-button-chrome {
|
|
2676
2690
|
background-color: var(--sk-button-bg);
|
|
2677
2691
|
color: var(--sk-button-text);
|
|
2678
2692
|
}
|
|
2679
2693
|
.sk-button.sk-solid.sk-neutral:hover:not(:disabled) {
|
|
2680
2694
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2681
2695
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2696
|
+
}
|
|
2697
|
+
.sk-button.sk-solid.sk-neutral:hover:not(:disabled) .sk-button-chrome {
|
|
2682
2698
|
background-color: var(--sk-button-bg-hover);
|
|
2683
2699
|
}
|
|
2684
2700
|
.sk-button.sk-solid.sk-neutral:active:not(:disabled) {
|
|
2685
2701
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2686
2702
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2703
|
+
}
|
|
2704
|
+
.sk-button.sk-solid.sk-neutral:active:not(:disabled) .sk-button-chrome {
|
|
2687
2705
|
background-color: var(--sk-button-bg);
|
|
2688
2706
|
color: var(--sk-button-color-base);
|
|
2689
2707
|
}
|
|
@@ -2695,17 +2713,23 @@
|
|
|
2695
2713
|
--sk-button-text: var(--sk-primary-text);
|
|
2696
2714
|
--sk-kind-color: var(--sk-primary-base);
|
|
2697
2715
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2716
|
+
}
|
|
2717
|
+
.sk-button.sk-solid.sk-primary .sk-button-chrome {
|
|
2698
2718
|
background-color: var(--sk-button-bg);
|
|
2699
2719
|
color: var(--sk-button-text);
|
|
2700
2720
|
}
|
|
2701
2721
|
.sk-button.sk-solid.sk-primary:hover:not(:disabled) {
|
|
2702
2722
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2703
2723
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2724
|
+
}
|
|
2725
|
+
.sk-button.sk-solid.sk-primary:hover:not(:disabled) .sk-button-chrome {
|
|
2704
2726
|
background-color: var(--sk-button-bg-hover);
|
|
2705
2727
|
}
|
|
2706
2728
|
.sk-button.sk-solid.sk-primary:active:not(:disabled) {
|
|
2707
2729
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2708
2730
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2731
|
+
}
|
|
2732
|
+
.sk-button.sk-solid.sk-primary:active:not(:disabled) .sk-button-chrome {
|
|
2709
2733
|
background-color: var(--sk-button-bg);
|
|
2710
2734
|
color: var(--sk-button-color-base);
|
|
2711
2735
|
}
|
|
@@ -2717,17 +2741,23 @@
|
|
|
2717
2741
|
--sk-button-text: var(--sk-accent-text);
|
|
2718
2742
|
--sk-kind-color: var(--sk-accent-base);
|
|
2719
2743
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2744
|
+
}
|
|
2745
|
+
.sk-button.sk-solid.sk-accent .sk-button-chrome {
|
|
2720
2746
|
background-color: var(--sk-button-bg);
|
|
2721
2747
|
color: var(--sk-button-text);
|
|
2722
2748
|
}
|
|
2723
2749
|
.sk-button.sk-solid.sk-accent:hover:not(:disabled) {
|
|
2724
2750
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2725
2751
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2752
|
+
}
|
|
2753
|
+
.sk-button.sk-solid.sk-accent:hover:not(:disabled) .sk-button-chrome {
|
|
2726
2754
|
background-color: var(--sk-button-bg-hover);
|
|
2727
2755
|
}
|
|
2728
2756
|
.sk-button.sk-solid.sk-accent:active:not(:disabled) {
|
|
2729
2757
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2730
2758
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2759
|
+
}
|
|
2760
|
+
.sk-button.sk-solid.sk-accent:active:not(:disabled) .sk-button-chrome {
|
|
2731
2761
|
background-color: var(--sk-button-bg);
|
|
2732
2762
|
color: var(--sk-button-color-base);
|
|
2733
2763
|
}
|
|
@@ -2739,17 +2769,23 @@
|
|
|
2739
2769
|
--sk-button-text: var(--sk-info-text);
|
|
2740
2770
|
--sk-kind-color: var(--sk-info-base);
|
|
2741
2771
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2772
|
+
}
|
|
2773
|
+
.sk-button.sk-solid.sk-info .sk-button-chrome {
|
|
2742
2774
|
background-color: var(--sk-button-bg);
|
|
2743
2775
|
color: var(--sk-button-text);
|
|
2744
2776
|
}
|
|
2745
2777
|
.sk-button.sk-solid.sk-info:hover:not(:disabled) {
|
|
2746
2778
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2747
2779
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2780
|
+
}
|
|
2781
|
+
.sk-button.sk-solid.sk-info:hover:not(:disabled) .sk-button-chrome {
|
|
2748
2782
|
background-color: var(--sk-button-bg-hover);
|
|
2749
2783
|
}
|
|
2750
2784
|
.sk-button.sk-solid.sk-info:active:not(:disabled) {
|
|
2751
2785
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2752
2786
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2787
|
+
}
|
|
2788
|
+
.sk-button.sk-solid.sk-info:active:not(:disabled) .sk-button-chrome {
|
|
2753
2789
|
background-color: var(--sk-button-bg);
|
|
2754
2790
|
color: var(--sk-button-color-base);
|
|
2755
2791
|
}
|
|
@@ -2761,17 +2797,23 @@
|
|
|
2761
2797
|
--sk-button-text: var(--sk-success-text);
|
|
2762
2798
|
--sk-kind-color: var(--sk-success-base);
|
|
2763
2799
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2800
|
+
}
|
|
2801
|
+
.sk-button.sk-solid.sk-success .sk-button-chrome {
|
|
2764
2802
|
background-color: var(--sk-button-bg);
|
|
2765
2803
|
color: var(--sk-button-text);
|
|
2766
2804
|
}
|
|
2767
2805
|
.sk-button.sk-solid.sk-success:hover:not(:disabled) {
|
|
2768
2806
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2769
2807
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2808
|
+
}
|
|
2809
|
+
.sk-button.sk-solid.sk-success:hover:not(:disabled) .sk-button-chrome {
|
|
2770
2810
|
background-color: var(--sk-button-bg-hover);
|
|
2771
2811
|
}
|
|
2772
2812
|
.sk-button.sk-solid.sk-success:active:not(:disabled) {
|
|
2773
2813
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2774
2814
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2815
|
+
}
|
|
2816
|
+
.sk-button.sk-solid.sk-success:active:not(:disabled) .sk-button-chrome {
|
|
2775
2817
|
background-color: var(--sk-button-bg);
|
|
2776
2818
|
color: var(--sk-button-color-base);
|
|
2777
2819
|
}
|
|
@@ -2783,17 +2825,23 @@
|
|
|
2783
2825
|
--sk-button-text: var(--sk-warning-text);
|
|
2784
2826
|
--sk-kind-color: var(--sk-warning-base);
|
|
2785
2827
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2828
|
+
}
|
|
2829
|
+
.sk-button.sk-solid.sk-warning .sk-button-chrome {
|
|
2786
2830
|
background-color: var(--sk-button-bg);
|
|
2787
2831
|
color: var(--sk-button-text);
|
|
2788
2832
|
}
|
|
2789
2833
|
.sk-button.sk-solid.sk-warning:hover:not(:disabled) {
|
|
2790
2834
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2791
2835
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2836
|
+
}
|
|
2837
|
+
.sk-button.sk-solid.sk-warning:hover:not(:disabled) .sk-button-chrome {
|
|
2792
2838
|
background-color: var(--sk-button-bg-hover);
|
|
2793
2839
|
}
|
|
2794
2840
|
.sk-button.sk-solid.sk-warning:active:not(:disabled) {
|
|
2795
2841
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2796
2842
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2843
|
+
}
|
|
2844
|
+
.sk-button.sk-solid.sk-warning:active:not(:disabled) .sk-button-chrome {
|
|
2797
2845
|
background-color: var(--sk-button-bg);
|
|
2798
2846
|
color: var(--sk-button-color-base);
|
|
2799
2847
|
}
|
|
@@ -2805,17 +2853,23 @@
|
|
|
2805
2853
|
--sk-button-text: var(--sk-danger-text);
|
|
2806
2854
|
--sk-kind-color: var(--sk-danger-base);
|
|
2807
2855
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2856
|
+
}
|
|
2857
|
+
.sk-button.sk-solid.sk-danger .sk-button-chrome {
|
|
2808
2858
|
background-color: var(--sk-button-bg);
|
|
2809
2859
|
color: var(--sk-button-text);
|
|
2810
2860
|
}
|
|
2811
2861
|
.sk-button.sk-solid.sk-danger:hover:not(:disabled) {
|
|
2812
2862
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2813
2863
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2864
|
+
}
|
|
2865
|
+
.sk-button.sk-solid.sk-danger:hover:not(:disabled) .sk-button-chrome {
|
|
2814
2866
|
background-color: var(--sk-button-bg-hover);
|
|
2815
2867
|
}
|
|
2816
2868
|
.sk-button.sk-solid.sk-danger:active:not(:disabled) {
|
|
2817
2869
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2818
2870
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2871
|
+
}
|
|
2872
|
+
.sk-button.sk-solid.sk-danger:active:not(:disabled) .sk-button-chrome {
|
|
2819
2873
|
background-color: var(--sk-button-bg);
|
|
2820
2874
|
color: var(--sk-button-color-base);
|
|
2821
2875
|
}
|
|
@@ -2827,17 +2881,23 @@
|
|
|
2827
2881
|
--sk-button-text: var(--sk-boulder-text);
|
|
2828
2882
|
--sk-kind-color: var(--sk-boulder-base);
|
|
2829
2883
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2884
|
+
}
|
|
2885
|
+
.sk-button.sk-solid.sk-boulder .sk-button-chrome {
|
|
2830
2886
|
background-color: var(--sk-button-bg);
|
|
2831
2887
|
color: var(--sk-button-text);
|
|
2832
2888
|
}
|
|
2833
2889
|
.sk-button.sk-solid.sk-boulder:hover:not(:disabled) {
|
|
2834
2890
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2835
2891
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2892
|
+
}
|
|
2893
|
+
.sk-button.sk-solid.sk-boulder:hover:not(:disabled) .sk-button-chrome {
|
|
2836
2894
|
background-color: var(--sk-button-bg-hover);
|
|
2837
2895
|
}
|
|
2838
2896
|
.sk-button.sk-solid.sk-boulder:active:not(:disabled) {
|
|
2839
2897
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2840
2898
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2899
|
+
}
|
|
2900
|
+
.sk-button.sk-solid.sk-boulder:active:not(:disabled) .sk-button-chrome {
|
|
2841
2901
|
background-color: var(--sk-button-bg);
|
|
2842
2902
|
color: var(--sk-button-color-base);
|
|
2843
2903
|
}
|
|
@@ -2849,17 +2909,23 @@
|
|
|
2849
2909
|
--sk-button-text: var(--sk-neon-blue-text);
|
|
2850
2910
|
--sk-kind-color: var(--sk-neon-blue-base);
|
|
2851
2911
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2912
|
+
}
|
|
2913
|
+
.sk-button.sk-solid.sk-neon-blue .sk-button-chrome {
|
|
2852
2914
|
background-color: var(--sk-button-bg);
|
|
2853
2915
|
color: var(--sk-button-text);
|
|
2854
2916
|
}
|
|
2855
2917
|
.sk-button.sk-solid.sk-neon-blue:hover:not(:disabled) {
|
|
2856
2918
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2857
2919
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2920
|
+
}
|
|
2921
|
+
.sk-button.sk-solid.sk-neon-blue:hover:not(:disabled) .sk-button-chrome {
|
|
2858
2922
|
background-color: var(--sk-button-bg-hover);
|
|
2859
2923
|
}
|
|
2860
2924
|
.sk-button.sk-solid.sk-neon-blue:active:not(:disabled) {
|
|
2861
2925
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2862
2926
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2927
|
+
}
|
|
2928
|
+
.sk-button.sk-solid.sk-neon-blue:active:not(:disabled) .sk-button-chrome {
|
|
2863
2929
|
background-color: var(--sk-button-bg);
|
|
2864
2930
|
color: var(--sk-button-color-base);
|
|
2865
2931
|
}
|
|
@@ -2871,17 +2937,23 @@
|
|
|
2871
2937
|
--sk-button-text: var(--sk-light-blue-text);
|
|
2872
2938
|
--sk-kind-color: var(--sk-light-blue-base);
|
|
2873
2939
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2940
|
+
}
|
|
2941
|
+
.sk-button.sk-solid.sk-light-blue .sk-button-chrome {
|
|
2874
2942
|
background-color: var(--sk-button-bg);
|
|
2875
2943
|
color: var(--sk-button-text);
|
|
2876
2944
|
}
|
|
2877
2945
|
.sk-button.sk-solid.sk-light-blue:hover:not(:disabled) {
|
|
2878
2946
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2879
2947
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2948
|
+
}
|
|
2949
|
+
.sk-button.sk-solid.sk-light-blue:hover:not(:disabled) .sk-button-chrome {
|
|
2880
2950
|
background-color: var(--sk-button-bg-hover);
|
|
2881
2951
|
}
|
|
2882
2952
|
.sk-button.sk-solid.sk-light-blue:active:not(:disabled) {
|
|
2883
2953
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2884
2954
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2955
|
+
}
|
|
2956
|
+
.sk-button.sk-solid.sk-light-blue:active:not(:disabled) .sk-button-chrome {
|
|
2885
2957
|
background-color: var(--sk-button-bg);
|
|
2886
2958
|
color: var(--sk-button-color-base);
|
|
2887
2959
|
}
|
|
@@ -2893,17 +2965,23 @@
|
|
|
2893
2965
|
--sk-button-text: var(--sk-neon-orange-text);
|
|
2894
2966
|
--sk-kind-color: var(--sk-neon-orange-base);
|
|
2895
2967
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2968
|
+
}
|
|
2969
|
+
.sk-button.sk-solid.sk-neon-orange .sk-button-chrome {
|
|
2896
2970
|
background-color: var(--sk-button-bg);
|
|
2897
2971
|
color: var(--sk-button-text);
|
|
2898
2972
|
}
|
|
2899
2973
|
.sk-button.sk-solid.sk-neon-orange:hover:not(:disabled) {
|
|
2900
2974
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2901
2975
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
2976
|
+
}
|
|
2977
|
+
.sk-button.sk-solid.sk-neon-orange:hover:not(:disabled) .sk-button-chrome {
|
|
2902
2978
|
background-color: var(--sk-button-bg-hover);
|
|
2903
2979
|
}
|
|
2904
2980
|
.sk-button.sk-solid.sk-neon-orange:active:not(:disabled) {
|
|
2905
2981
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2906
2982
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
2983
|
+
}
|
|
2984
|
+
.sk-button.sk-solid.sk-neon-orange:active:not(:disabled) .sk-button-chrome {
|
|
2907
2985
|
background-color: var(--sk-button-bg);
|
|
2908
2986
|
color: var(--sk-button-color-base);
|
|
2909
2987
|
}
|
|
@@ -2915,17 +2993,23 @@
|
|
|
2915
2993
|
--sk-button-text: var(--sk-neon-purple-text);
|
|
2916
2994
|
--sk-kind-color: var(--sk-neon-purple-base);
|
|
2917
2995
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
2996
|
+
}
|
|
2997
|
+
.sk-button.sk-solid.sk-neon-purple .sk-button-chrome {
|
|
2918
2998
|
background-color: var(--sk-button-bg);
|
|
2919
2999
|
color: var(--sk-button-text);
|
|
2920
3000
|
}
|
|
2921
3001
|
.sk-button.sk-solid.sk-neon-purple:hover:not(:disabled) {
|
|
2922
3002
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2923
3003
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3004
|
+
}
|
|
3005
|
+
.sk-button.sk-solid.sk-neon-purple:hover:not(:disabled) .sk-button-chrome {
|
|
2924
3006
|
background-color: var(--sk-button-bg-hover);
|
|
2925
3007
|
}
|
|
2926
3008
|
.sk-button.sk-solid.sk-neon-purple:active:not(:disabled) {
|
|
2927
3009
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2928
3010
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3011
|
+
}
|
|
3012
|
+
.sk-button.sk-solid.sk-neon-purple:active:not(:disabled) .sk-button-chrome {
|
|
2929
3013
|
background-color: var(--sk-button-bg);
|
|
2930
3014
|
color: var(--sk-button-color-base);
|
|
2931
3015
|
}
|
|
@@ -2937,17 +3021,23 @@
|
|
|
2937
3021
|
--sk-button-text: var(--sk-neon-green-text);
|
|
2938
3022
|
--sk-kind-color: var(--sk-neon-green-base);
|
|
2939
3023
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3024
|
+
}
|
|
3025
|
+
.sk-button.sk-solid.sk-neon-green .sk-button-chrome {
|
|
2940
3026
|
background-color: var(--sk-button-bg);
|
|
2941
3027
|
color: var(--sk-button-text);
|
|
2942
3028
|
}
|
|
2943
3029
|
.sk-button.sk-solid.sk-neon-green:hover:not(:disabled) {
|
|
2944
3030
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2945
3031
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3032
|
+
}
|
|
3033
|
+
.sk-button.sk-solid.sk-neon-green:hover:not(:disabled) .sk-button-chrome {
|
|
2946
3034
|
background-color: var(--sk-button-bg-hover);
|
|
2947
3035
|
}
|
|
2948
3036
|
.sk-button.sk-solid.sk-neon-green:active:not(:disabled) {
|
|
2949
3037
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2950
3038
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3039
|
+
}
|
|
3040
|
+
.sk-button.sk-solid.sk-neon-green:active:not(:disabled) .sk-button-chrome {
|
|
2951
3041
|
background-color: var(--sk-button-bg);
|
|
2952
3042
|
color: var(--sk-button-color-base);
|
|
2953
3043
|
}
|
|
@@ -2959,17 +3049,23 @@
|
|
|
2959
3049
|
--sk-button-text: var(--sk-neon-mint-text);
|
|
2960
3050
|
--sk-kind-color: var(--sk-neon-mint-base);
|
|
2961
3051
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3052
|
+
}
|
|
3053
|
+
.sk-button.sk-solid.sk-neon-mint .sk-button-chrome {
|
|
2962
3054
|
background-color: var(--sk-button-bg);
|
|
2963
3055
|
color: var(--sk-button-text);
|
|
2964
3056
|
}
|
|
2965
3057
|
.sk-button.sk-solid.sk-neon-mint:hover:not(:disabled) {
|
|
2966
3058
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2967
3059
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3060
|
+
}
|
|
3061
|
+
.sk-button.sk-solid.sk-neon-mint:hover:not(:disabled) .sk-button-chrome {
|
|
2968
3062
|
background-color: var(--sk-button-bg-hover);
|
|
2969
3063
|
}
|
|
2970
3064
|
.sk-button.sk-solid.sk-neon-mint:active:not(:disabled) {
|
|
2971
3065
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2972
3066
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3067
|
+
}
|
|
3068
|
+
.sk-button.sk-solid.sk-neon-mint:active:not(:disabled) .sk-button-chrome {
|
|
2973
3069
|
background-color: var(--sk-button-bg);
|
|
2974
3070
|
color: var(--sk-button-color-base);
|
|
2975
3071
|
}
|
|
@@ -2981,17 +3077,23 @@
|
|
|
2981
3077
|
--sk-button-text: var(--sk-neon-pink-text);
|
|
2982
3078
|
--sk-kind-color: var(--sk-neon-pink-base);
|
|
2983
3079
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3080
|
+
}
|
|
3081
|
+
.sk-button.sk-solid.sk-neon-pink .sk-button-chrome {
|
|
2984
3082
|
background-color: var(--sk-button-bg);
|
|
2985
3083
|
color: var(--sk-button-text);
|
|
2986
3084
|
}
|
|
2987
3085
|
.sk-button.sk-solid.sk-neon-pink:hover:not(:disabled) {
|
|
2988
3086
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2989
3087
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3088
|
+
}
|
|
3089
|
+
.sk-button.sk-solid.sk-neon-pink:hover:not(:disabled) .sk-button-chrome {
|
|
2990
3090
|
background-color: var(--sk-button-bg-hover);
|
|
2991
3091
|
}
|
|
2992
3092
|
.sk-button.sk-solid.sk-neon-pink:active:not(:disabled) {
|
|
2993
3093
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
2994
3094
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3095
|
+
}
|
|
3096
|
+
.sk-button.sk-solid.sk-neon-pink:active:not(:disabled) .sk-button-chrome {
|
|
2995
3097
|
background-color: var(--sk-button-bg);
|
|
2996
3098
|
color: var(--sk-button-color-base);
|
|
2997
3099
|
}
|
|
@@ -3003,17 +3105,23 @@
|
|
|
3003
3105
|
--sk-button-text: var(--sk-yellow-text);
|
|
3004
3106
|
--sk-kind-color: var(--sk-yellow-base);
|
|
3005
3107
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3108
|
+
}
|
|
3109
|
+
.sk-button.sk-solid.sk-yellow .sk-button-chrome {
|
|
3006
3110
|
background-color: var(--sk-button-bg);
|
|
3007
3111
|
color: var(--sk-button-text);
|
|
3008
3112
|
}
|
|
3009
3113
|
.sk-button.sk-solid.sk-yellow:hover:not(:disabled) {
|
|
3010
3114
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3011
3115
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3116
|
+
}
|
|
3117
|
+
.sk-button.sk-solid.sk-yellow:hover:not(:disabled) .sk-button-chrome {
|
|
3012
3118
|
background-color: var(--sk-button-bg-hover);
|
|
3013
3119
|
}
|
|
3014
3120
|
.sk-button.sk-solid.sk-yellow:active:not(:disabled) {
|
|
3015
3121
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3016
3122
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3123
|
+
}
|
|
3124
|
+
.sk-button.sk-solid.sk-yellow:active:not(:disabled) .sk-button-chrome {
|
|
3017
3125
|
background-color: var(--sk-button-bg);
|
|
3018
3126
|
color: var(--sk-button-color-base);
|
|
3019
3127
|
}
|
|
@@ -3025,17 +3133,23 @@
|
|
|
3025
3133
|
--sk-button-text: var(--sk-red-text);
|
|
3026
3134
|
--sk-kind-color: var(--sk-red-base);
|
|
3027
3135
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3136
|
+
}
|
|
3137
|
+
.sk-button.sk-solid.sk-red .sk-button-chrome {
|
|
3028
3138
|
background-color: var(--sk-button-bg);
|
|
3029
3139
|
color: var(--sk-button-text);
|
|
3030
3140
|
}
|
|
3031
3141
|
.sk-button.sk-solid.sk-red:hover:not(:disabled) {
|
|
3032
3142
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3033
3143
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3144
|
+
}
|
|
3145
|
+
.sk-button.sk-solid.sk-red:hover:not(:disabled) .sk-button-chrome {
|
|
3034
3146
|
background-color: var(--sk-button-bg-hover);
|
|
3035
3147
|
}
|
|
3036
3148
|
.sk-button.sk-solid.sk-red:active:not(:disabled) {
|
|
3037
3149
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3038
3150
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3151
|
+
}
|
|
3152
|
+
.sk-button.sk-solid.sk-red:active:not(:disabled) .sk-button-chrome {
|
|
3039
3153
|
background-color: var(--sk-button-bg);
|
|
3040
3154
|
color: var(--sk-button-color-base);
|
|
3041
3155
|
}
|
|
@@ -3047,16 +3161,22 @@
|
|
|
3047
3161
|
--sk-button-text: var(--sk-neutral-text);
|
|
3048
3162
|
--sk-kind-color: var(--sk-neutral-base);
|
|
3049
3163
|
--sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
|
|
3164
|
+
}
|
|
3165
|
+
.sk-button.sk-subtle.sk-neutral .sk-button-chrome {
|
|
3050
3166
|
background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
|
|
3051
3167
|
color: var(--sk-button-color-base);
|
|
3052
3168
|
}
|
|
3053
3169
|
.sk-button.sk-subtle.sk-neutral:hover:not(:disabled) {
|
|
3054
3170
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3171
|
+
}
|
|
3172
|
+
.sk-button.sk-subtle.sk-neutral:hover:not(:disabled) .sk-button-chrome {
|
|
3055
3173
|
background-color: var(--sk-button-bg-hover);
|
|
3056
3174
|
}
|
|
3057
3175
|
.sk-button.sk-subtle.sk-neutral:active:not(:disabled) {
|
|
3058
3176
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3059
3177
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3178
|
+
}
|
|
3179
|
+
.sk-button.sk-subtle.sk-neutral:active:not(:disabled) .sk-button-chrome {
|
|
3060
3180
|
background-color: var(--sk-button-bg);
|
|
3061
3181
|
color: var(--sk-button-text);
|
|
3062
3182
|
}
|
|
@@ -3065,16 +3185,22 @@
|
|
|
3065
3185
|
--sk-button-text: var(--sk-primary-text);
|
|
3066
3186
|
--sk-kind-color: var(--sk-primary-base);
|
|
3067
3187
|
--sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
|
|
3188
|
+
}
|
|
3189
|
+
.sk-button.sk-subtle.sk-primary .sk-button-chrome {
|
|
3068
3190
|
background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
|
|
3069
3191
|
color: var(--sk-button-color-base);
|
|
3070
3192
|
}
|
|
3071
3193
|
.sk-button.sk-subtle.sk-primary:hover:not(:disabled) {
|
|
3072
3194
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3195
|
+
}
|
|
3196
|
+
.sk-button.sk-subtle.sk-primary:hover:not(:disabled) .sk-button-chrome {
|
|
3073
3197
|
background-color: var(--sk-button-bg-hover);
|
|
3074
3198
|
}
|
|
3075
3199
|
.sk-button.sk-subtle.sk-primary:active:not(:disabled) {
|
|
3076
3200
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3077
3201
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3202
|
+
}
|
|
3203
|
+
.sk-button.sk-subtle.sk-primary:active:not(:disabled) .sk-button-chrome {
|
|
3078
3204
|
background-color: var(--sk-button-bg);
|
|
3079
3205
|
color: var(--sk-button-text);
|
|
3080
3206
|
}
|
|
@@ -3083,16 +3209,22 @@
|
|
|
3083
3209
|
--sk-button-text: var(--sk-accent-text);
|
|
3084
3210
|
--sk-kind-color: var(--sk-accent-base);
|
|
3085
3211
|
--sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
|
|
3212
|
+
}
|
|
3213
|
+
.sk-button.sk-subtle.sk-accent .sk-button-chrome {
|
|
3086
3214
|
background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
|
|
3087
3215
|
color: var(--sk-button-color-base);
|
|
3088
3216
|
}
|
|
3089
3217
|
.sk-button.sk-subtle.sk-accent:hover:not(:disabled) {
|
|
3090
3218
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3219
|
+
}
|
|
3220
|
+
.sk-button.sk-subtle.sk-accent:hover:not(:disabled) .sk-button-chrome {
|
|
3091
3221
|
background-color: var(--sk-button-bg-hover);
|
|
3092
3222
|
}
|
|
3093
3223
|
.sk-button.sk-subtle.sk-accent:active:not(:disabled) {
|
|
3094
3224
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3095
3225
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3226
|
+
}
|
|
3227
|
+
.sk-button.sk-subtle.sk-accent:active:not(:disabled) .sk-button-chrome {
|
|
3096
3228
|
background-color: var(--sk-button-bg);
|
|
3097
3229
|
color: var(--sk-button-text);
|
|
3098
3230
|
}
|
|
@@ -3101,16 +3233,22 @@
|
|
|
3101
3233
|
--sk-button-text: var(--sk-info-text);
|
|
3102
3234
|
--sk-kind-color: var(--sk-info-base);
|
|
3103
3235
|
--sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
|
|
3236
|
+
}
|
|
3237
|
+
.sk-button.sk-subtle.sk-info .sk-button-chrome {
|
|
3104
3238
|
background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
|
|
3105
3239
|
color: var(--sk-button-color-base);
|
|
3106
3240
|
}
|
|
3107
3241
|
.sk-button.sk-subtle.sk-info:hover:not(:disabled) {
|
|
3108
3242
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3243
|
+
}
|
|
3244
|
+
.sk-button.sk-subtle.sk-info:hover:not(:disabled) .sk-button-chrome {
|
|
3109
3245
|
background-color: var(--sk-button-bg-hover);
|
|
3110
3246
|
}
|
|
3111
3247
|
.sk-button.sk-subtle.sk-info:active:not(:disabled) {
|
|
3112
3248
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3113
3249
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3250
|
+
}
|
|
3251
|
+
.sk-button.sk-subtle.sk-info:active:not(:disabled) .sk-button-chrome {
|
|
3114
3252
|
background-color: var(--sk-button-bg);
|
|
3115
3253
|
color: var(--sk-button-text);
|
|
3116
3254
|
}
|
|
@@ -3119,16 +3257,22 @@
|
|
|
3119
3257
|
--sk-button-text: var(--sk-success-text);
|
|
3120
3258
|
--sk-kind-color: var(--sk-success-base);
|
|
3121
3259
|
--sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
|
|
3260
|
+
}
|
|
3261
|
+
.sk-button.sk-subtle.sk-success .sk-button-chrome {
|
|
3122
3262
|
background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
|
|
3123
3263
|
color: var(--sk-button-color-base);
|
|
3124
3264
|
}
|
|
3125
3265
|
.sk-button.sk-subtle.sk-success:hover:not(:disabled) {
|
|
3126
3266
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3267
|
+
}
|
|
3268
|
+
.sk-button.sk-subtle.sk-success:hover:not(:disabled) .sk-button-chrome {
|
|
3127
3269
|
background-color: var(--sk-button-bg-hover);
|
|
3128
3270
|
}
|
|
3129
3271
|
.sk-button.sk-subtle.sk-success:active:not(:disabled) {
|
|
3130
3272
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3131
3273
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3274
|
+
}
|
|
3275
|
+
.sk-button.sk-subtle.sk-success:active:not(:disabled) .sk-button-chrome {
|
|
3132
3276
|
background-color: var(--sk-button-bg);
|
|
3133
3277
|
color: var(--sk-button-text);
|
|
3134
3278
|
}
|
|
@@ -3137,16 +3281,22 @@
|
|
|
3137
3281
|
--sk-button-text: var(--sk-warning-text);
|
|
3138
3282
|
--sk-kind-color: var(--sk-warning-base);
|
|
3139
3283
|
--sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
|
|
3284
|
+
}
|
|
3285
|
+
.sk-button.sk-subtle.sk-warning .sk-button-chrome {
|
|
3140
3286
|
background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
|
|
3141
3287
|
color: var(--sk-button-color-base);
|
|
3142
3288
|
}
|
|
3143
3289
|
.sk-button.sk-subtle.sk-warning:hover:not(:disabled) {
|
|
3144
3290
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3291
|
+
}
|
|
3292
|
+
.sk-button.sk-subtle.sk-warning:hover:not(:disabled) .sk-button-chrome {
|
|
3145
3293
|
background-color: var(--sk-button-bg-hover);
|
|
3146
3294
|
}
|
|
3147
3295
|
.sk-button.sk-subtle.sk-warning:active:not(:disabled) {
|
|
3148
3296
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3149
3297
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3298
|
+
}
|
|
3299
|
+
.sk-button.sk-subtle.sk-warning:active:not(:disabled) .sk-button-chrome {
|
|
3150
3300
|
background-color: var(--sk-button-bg);
|
|
3151
3301
|
color: var(--sk-button-text);
|
|
3152
3302
|
}
|
|
@@ -3155,16 +3305,22 @@
|
|
|
3155
3305
|
--sk-button-text: var(--sk-danger-text);
|
|
3156
3306
|
--sk-kind-color: var(--sk-danger-base);
|
|
3157
3307
|
--sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
|
|
3308
|
+
}
|
|
3309
|
+
.sk-button.sk-subtle.sk-danger .sk-button-chrome {
|
|
3158
3310
|
background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
|
|
3159
3311
|
color: var(--sk-button-color-base);
|
|
3160
3312
|
}
|
|
3161
3313
|
.sk-button.sk-subtle.sk-danger:hover:not(:disabled) {
|
|
3162
3314
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3315
|
+
}
|
|
3316
|
+
.sk-button.sk-subtle.sk-danger:hover:not(:disabled) .sk-button-chrome {
|
|
3163
3317
|
background-color: var(--sk-button-bg-hover);
|
|
3164
3318
|
}
|
|
3165
3319
|
.sk-button.sk-subtle.sk-danger:active:not(:disabled) {
|
|
3166
3320
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3167
3321
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3322
|
+
}
|
|
3323
|
+
.sk-button.sk-subtle.sk-danger:active:not(:disabled) .sk-button-chrome {
|
|
3168
3324
|
background-color: var(--sk-button-bg);
|
|
3169
3325
|
color: var(--sk-button-text);
|
|
3170
3326
|
}
|
|
@@ -3173,16 +3329,22 @@
|
|
|
3173
3329
|
--sk-button-text: var(--sk-boulder-text);
|
|
3174
3330
|
--sk-kind-color: var(--sk-boulder-base);
|
|
3175
3331
|
--sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
|
|
3332
|
+
}
|
|
3333
|
+
.sk-button.sk-subtle.sk-boulder .sk-button-chrome {
|
|
3176
3334
|
background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
|
|
3177
3335
|
color: var(--sk-button-color-base);
|
|
3178
3336
|
}
|
|
3179
3337
|
.sk-button.sk-subtle.sk-boulder:hover:not(:disabled) {
|
|
3180
3338
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3339
|
+
}
|
|
3340
|
+
.sk-button.sk-subtle.sk-boulder:hover:not(:disabled) .sk-button-chrome {
|
|
3181
3341
|
background-color: var(--sk-button-bg-hover);
|
|
3182
3342
|
}
|
|
3183
3343
|
.sk-button.sk-subtle.sk-boulder:active:not(:disabled) {
|
|
3184
3344
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3185
3345
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3346
|
+
}
|
|
3347
|
+
.sk-button.sk-subtle.sk-boulder:active:not(:disabled) .sk-button-chrome {
|
|
3186
3348
|
background-color: var(--sk-button-bg);
|
|
3187
3349
|
color: var(--sk-button-text);
|
|
3188
3350
|
}
|
|
@@ -3191,16 +3353,22 @@
|
|
|
3191
3353
|
--sk-button-text: var(--sk-neon-blue-text);
|
|
3192
3354
|
--sk-kind-color: var(--sk-neon-blue-base);
|
|
3193
3355
|
--sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
|
|
3356
|
+
}
|
|
3357
|
+
.sk-button.sk-subtle.sk-neon-blue .sk-button-chrome {
|
|
3194
3358
|
background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
|
|
3195
3359
|
color: var(--sk-button-color-base);
|
|
3196
3360
|
}
|
|
3197
3361
|
.sk-button.sk-subtle.sk-neon-blue:hover:not(:disabled) {
|
|
3198
3362
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3363
|
+
}
|
|
3364
|
+
.sk-button.sk-subtle.sk-neon-blue:hover:not(:disabled) .sk-button-chrome {
|
|
3199
3365
|
background-color: var(--sk-button-bg-hover);
|
|
3200
3366
|
}
|
|
3201
3367
|
.sk-button.sk-subtle.sk-neon-blue:active:not(:disabled) {
|
|
3202
3368
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3203
3369
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3370
|
+
}
|
|
3371
|
+
.sk-button.sk-subtle.sk-neon-blue:active:not(:disabled) .sk-button-chrome {
|
|
3204
3372
|
background-color: var(--sk-button-bg);
|
|
3205
3373
|
color: var(--sk-button-text);
|
|
3206
3374
|
}
|
|
@@ -3209,16 +3377,22 @@
|
|
|
3209
3377
|
--sk-button-text: var(--sk-light-blue-text);
|
|
3210
3378
|
--sk-kind-color: var(--sk-light-blue-base);
|
|
3211
3379
|
--sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
|
|
3380
|
+
}
|
|
3381
|
+
.sk-button.sk-subtle.sk-light-blue .sk-button-chrome {
|
|
3212
3382
|
background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
|
|
3213
3383
|
color: var(--sk-button-color-base);
|
|
3214
3384
|
}
|
|
3215
3385
|
.sk-button.sk-subtle.sk-light-blue:hover:not(:disabled) {
|
|
3216
3386
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3387
|
+
}
|
|
3388
|
+
.sk-button.sk-subtle.sk-light-blue:hover:not(:disabled) .sk-button-chrome {
|
|
3217
3389
|
background-color: var(--sk-button-bg-hover);
|
|
3218
3390
|
}
|
|
3219
3391
|
.sk-button.sk-subtle.sk-light-blue:active:not(:disabled) {
|
|
3220
3392
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3221
3393
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3394
|
+
}
|
|
3395
|
+
.sk-button.sk-subtle.sk-light-blue:active:not(:disabled) .sk-button-chrome {
|
|
3222
3396
|
background-color: var(--sk-button-bg);
|
|
3223
3397
|
color: var(--sk-button-text);
|
|
3224
3398
|
}
|
|
@@ -3227,16 +3401,22 @@
|
|
|
3227
3401
|
--sk-button-text: var(--sk-neon-orange-text);
|
|
3228
3402
|
--sk-kind-color: var(--sk-neon-orange-base);
|
|
3229
3403
|
--sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
|
|
3404
|
+
}
|
|
3405
|
+
.sk-button.sk-subtle.sk-neon-orange .sk-button-chrome {
|
|
3230
3406
|
background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
|
|
3231
3407
|
color: var(--sk-button-color-base);
|
|
3232
3408
|
}
|
|
3233
3409
|
.sk-button.sk-subtle.sk-neon-orange:hover:not(:disabled) {
|
|
3234
3410
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3411
|
+
}
|
|
3412
|
+
.sk-button.sk-subtle.sk-neon-orange:hover:not(:disabled) .sk-button-chrome {
|
|
3235
3413
|
background-color: var(--sk-button-bg-hover);
|
|
3236
3414
|
}
|
|
3237
3415
|
.sk-button.sk-subtle.sk-neon-orange:active:not(:disabled) {
|
|
3238
3416
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3239
3417
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3418
|
+
}
|
|
3419
|
+
.sk-button.sk-subtle.sk-neon-orange:active:not(:disabled) .sk-button-chrome {
|
|
3240
3420
|
background-color: var(--sk-button-bg);
|
|
3241
3421
|
color: var(--sk-button-text);
|
|
3242
3422
|
}
|
|
@@ -3245,16 +3425,22 @@
|
|
|
3245
3425
|
--sk-button-text: var(--sk-neon-purple-text);
|
|
3246
3426
|
--sk-kind-color: var(--sk-neon-purple-base);
|
|
3247
3427
|
--sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
|
|
3428
|
+
}
|
|
3429
|
+
.sk-button.sk-subtle.sk-neon-purple .sk-button-chrome {
|
|
3248
3430
|
background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
|
|
3249
3431
|
color: var(--sk-button-color-base);
|
|
3250
3432
|
}
|
|
3251
3433
|
.sk-button.sk-subtle.sk-neon-purple:hover:not(:disabled) {
|
|
3252
3434
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3435
|
+
}
|
|
3436
|
+
.sk-button.sk-subtle.sk-neon-purple:hover:not(:disabled) .sk-button-chrome {
|
|
3253
3437
|
background-color: var(--sk-button-bg-hover);
|
|
3254
3438
|
}
|
|
3255
3439
|
.sk-button.sk-subtle.sk-neon-purple:active:not(:disabled) {
|
|
3256
3440
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3257
3441
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3442
|
+
}
|
|
3443
|
+
.sk-button.sk-subtle.sk-neon-purple:active:not(:disabled) .sk-button-chrome {
|
|
3258
3444
|
background-color: var(--sk-button-bg);
|
|
3259
3445
|
color: var(--sk-button-text);
|
|
3260
3446
|
}
|
|
@@ -3263,16 +3449,22 @@
|
|
|
3263
3449
|
--sk-button-text: var(--sk-neon-green-text);
|
|
3264
3450
|
--sk-kind-color: var(--sk-neon-green-base);
|
|
3265
3451
|
--sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
|
|
3452
|
+
}
|
|
3453
|
+
.sk-button.sk-subtle.sk-neon-green .sk-button-chrome {
|
|
3266
3454
|
background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
|
|
3267
3455
|
color: var(--sk-button-color-base);
|
|
3268
3456
|
}
|
|
3269
3457
|
.sk-button.sk-subtle.sk-neon-green:hover:not(:disabled) {
|
|
3270
3458
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3459
|
+
}
|
|
3460
|
+
.sk-button.sk-subtle.sk-neon-green:hover:not(:disabled) .sk-button-chrome {
|
|
3271
3461
|
background-color: var(--sk-button-bg-hover);
|
|
3272
3462
|
}
|
|
3273
3463
|
.sk-button.sk-subtle.sk-neon-green:active:not(:disabled) {
|
|
3274
3464
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3275
3465
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3466
|
+
}
|
|
3467
|
+
.sk-button.sk-subtle.sk-neon-green:active:not(:disabled) .sk-button-chrome {
|
|
3276
3468
|
background-color: var(--sk-button-bg);
|
|
3277
3469
|
color: var(--sk-button-text);
|
|
3278
3470
|
}
|
|
@@ -3281,16 +3473,22 @@
|
|
|
3281
3473
|
--sk-button-text: var(--sk-neon-mint-text);
|
|
3282
3474
|
--sk-kind-color: var(--sk-neon-mint-base);
|
|
3283
3475
|
--sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
|
|
3476
|
+
}
|
|
3477
|
+
.sk-button.sk-subtle.sk-neon-mint .sk-button-chrome {
|
|
3284
3478
|
background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
|
|
3285
3479
|
color: var(--sk-button-color-base);
|
|
3286
3480
|
}
|
|
3287
3481
|
.sk-button.sk-subtle.sk-neon-mint:hover:not(:disabled) {
|
|
3288
3482
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3483
|
+
}
|
|
3484
|
+
.sk-button.sk-subtle.sk-neon-mint:hover:not(:disabled) .sk-button-chrome {
|
|
3289
3485
|
background-color: var(--sk-button-bg-hover);
|
|
3290
3486
|
}
|
|
3291
3487
|
.sk-button.sk-subtle.sk-neon-mint:active:not(:disabled) {
|
|
3292
3488
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3293
3489
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3490
|
+
}
|
|
3491
|
+
.sk-button.sk-subtle.sk-neon-mint:active:not(:disabled) .sk-button-chrome {
|
|
3294
3492
|
background-color: var(--sk-button-bg);
|
|
3295
3493
|
color: var(--sk-button-text);
|
|
3296
3494
|
}
|
|
@@ -3299,16 +3497,22 @@
|
|
|
3299
3497
|
--sk-button-text: var(--sk-neon-pink-text);
|
|
3300
3498
|
--sk-kind-color: var(--sk-neon-pink-base);
|
|
3301
3499
|
--sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
|
|
3500
|
+
}
|
|
3501
|
+
.sk-button.sk-subtle.sk-neon-pink .sk-button-chrome {
|
|
3302
3502
|
background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
|
|
3303
3503
|
color: var(--sk-button-color-base);
|
|
3304
3504
|
}
|
|
3305
3505
|
.sk-button.sk-subtle.sk-neon-pink:hover:not(:disabled) {
|
|
3306
3506
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3507
|
+
}
|
|
3508
|
+
.sk-button.sk-subtle.sk-neon-pink:hover:not(:disabled) .sk-button-chrome {
|
|
3307
3509
|
background-color: var(--sk-button-bg-hover);
|
|
3308
3510
|
}
|
|
3309
3511
|
.sk-button.sk-subtle.sk-neon-pink:active:not(:disabled) {
|
|
3310
3512
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3311
3513
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3514
|
+
}
|
|
3515
|
+
.sk-button.sk-subtle.sk-neon-pink:active:not(:disabled) .sk-button-chrome {
|
|
3312
3516
|
background-color: var(--sk-button-bg);
|
|
3313
3517
|
color: var(--sk-button-text);
|
|
3314
3518
|
}
|
|
@@ -3317,16 +3521,22 @@
|
|
|
3317
3521
|
--sk-button-text: var(--sk-yellow-text);
|
|
3318
3522
|
--sk-kind-color: var(--sk-yellow-base);
|
|
3319
3523
|
--sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
|
|
3524
|
+
}
|
|
3525
|
+
.sk-button.sk-subtle.sk-yellow .sk-button-chrome {
|
|
3320
3526
|
background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
|
|
3321
3527
|
color: var(--sk-button-color-base);
|
|
3322
3528
|
}
|
|
3323
3529
|
.sk-button.sk-subtle.sk-yellow:hover:not(:disabled) {
|
|
3324
3530
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3531
|
+
}
|
|
3532
|
+
.sk-button.sk-subtle.sk-yellow:hover:not(:disabled) .sk-button-chrome {
|
|
3325
3533
|
background-color: var(--sk-button-bg-hover);
|
|
3326
3534
|
}
|
|
3327
3535
|
.sk-button.sk-subtle.sk-yellow:active:not(:disabled) {
|
|
3328
3536
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3329
3537
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3538
|
+
}
|
|
3539
|
+
.sk-button.sk-subtle.sk-yellow:active:not(:disabled) .sk-button-chrome {
|
|
3330
3540
|
background-color: var(--sk-button-bg);
|
|
3331
3541
|
color: var(--sk-button-text);
|
|
3332
3542
|
}
|
|
@@ -3335,20 +3545,26 @@
|
|
|
3335
3545
|
--sk-button-text: var(--sk-red-text);
|
|
3336
3546
|
--sk-kind-color: var(--sk-red-base);
|
|
3337
3547
|
--sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity));
|
|
3548
|
+
}
|
|
3549
|
+
.sk-button.sk-subtle.sk-red .sk-button-chrome {
|
|
3338
3550
|
background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
|
|
3339
3551
|
color: var(--sk-button-color-base);
|
|
3340
3552
|
}
|
|
3341
3553
|
.sk-button.sk-subtle.sk-red:hover:not(:disabled) {
|
|
3342
3554
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3555
|
+
}
|
|
3556
|
+
.sk-button.sk-subtle.sk-red:hover:not(:disabled) .sk-button-chrome {
|
|
3343
3557
|
background-color: var(--sk-button-bg-hover);
|
|
3344
3558
|
}
|
|
3345
3559
|
.sk-button.sk-subtle.sk-red:active:not(:disabled) {
|
|
3346
3560
|
--sk-button-border-color: var(--sk-button-border-base);
|
|
3347
3561
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3562
|
+
}
|
|
3563
|
+
.sk-button.sk-subtle.sk-red:active:not(:disabled) .sk-button-chrome {
|
|
3348
3564
|
background-color: var(--sk-button-bg);
|
|
3349
3565
|
color: var(--sk-button-text);
|
|
3350
3566
|
}
|
|
3351
|
-
.sk-button.sk-subtle:disabled, .sk-button.sk-subtle.sk-loading {
|
|
3567
|
+
.sk-button.sk-subtle:disabled .sk-button-chrome, .sk-button.sk-subtle.sk-loading .sk-button-chrome {
|
|
3352
3568
|
background-color: oklch(from var(--sk-button-bg) l c h/0.45);
|
|
3353
3569
|
}
|
|
3354
3570
|
.sk-button.sk-subtle.sk-neutral {
|
|
@@ -3356,26 +3572,31 @@
|
|
|
3356
3572
|
from color-mix(in oklch, var(--sk-button-border-base), white 50%)
|
|
3357
3573
|
l c h / var(--sk-button-subtle-border-opacity)
|
|
3358
3574
|
);
|
|
3359
|
-
color: color-mix(in oklch, var(--sk-button-color-base), white 50%);
|
|
3360
3575
|
}
|
|
3361
|
-
.sk-button.sk-
|
|
3362
|
-
|
|
3576
|
+
.sk-button.sk-subtle.sk-neutral .sk-button-chrome {
|
|
3577
|
+
color: color-mix(in oklch, var(--sk-button-color-base), white 50%);
|
|
3363
3578
|
}
|
|
3364
3579
|
.sk-button.sk-ghost.sk-neutral {
|
|
3365
3580
|
--sk-button-color-base: var(--sk-neutral-base);
|
|
3366
3581
|
--sk-button-text: var(--sk-neutral-text);
|
|
3367
3582
|
--sk-kind-color: var(--sk-neutral-base);
|
|
3368
3583
|
--sk-button-border-color: transparent;
|
|
3584
|
+
}
|
|
3585
|
+
.sk-button.sk-ghost.sk-neutral .sk-button-chrome {
|
|
3369
3586
|
background-color: transparent;
|
|
3370
3587
|
color: var(--sk-button-color-base);
|
|
3371
3588
|
}
|
|
3372
3589
|
.sk-button.sk-ghost.sk-neutral:hover:not(:disabled) {
|
|
3373
3590
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3591
|
+
}
|
|
3592
|
+
.sk-button.sk-ghost.sk-neutral:hover:not(:disabled) .sk-button-chrome {
|
|
3374
3593
|
background-color: var(--sk-button-bg-hover);
|
|
3375
3594
|
}
|
|
3376
3595
|
.sk-button.sk-ghost.sk-neutral:active:not(:disabled) {
|
|
3377
3596
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3378
3597
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3598
|
+
}
|
|
3599
|
+
.sk-button.sk-ghost.sk-neutral:active:not(:disabled) .sk-button-chrome {
|
|
3379
3600
|
background-color: var(--sk-button-bg-hover);
|
|
3380
3601
|
color: var(--sk-button-text);
|
|
3381
3602
|
}
|
|
@@ -3384,16 +3605,22 @@
|
|
|
3384
3605
|
--sk-button-text: var(--sk-primary-text);
|
|
3385
3606
|
--sk-kind-color: var(--sk-primary-base);
|
|
3386
3607
|
--sk-button-border-color: transparent;
|
|
3608
|
+
}
|
|
3609
|
+
.sk-button.sk-ghost.sk-primary .sk-button-chrome {
|
|
3387
3610
|
background-color: transparent;
|
|
3388
3611
|
color: var(--sk-button-color-base);
|
|
3389
3612
|
}
|
|
3390
3613
|
.sk-button.sk-ghost.sk-primary:hover:not(:disabled) {
|
|
3391
3614
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3615
|
+
}
|
|
3616
|
+
.sk-button.sk-ghost.sk-primary:hover:not(:disabled) .sk-button-chrome {
|
|
3392
3617
|
background-color: var(--sk-button-bg-hover);
|
|
3393
3618
|
}
|
|
3394
3619
|
.sk-button.sk-ghost.sk-primary:active:not(:disabled) {
|
|
3395
3620
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3396
3621
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3622
|
+
}
|
|
3623
|
+
.sk-button.sk-ghost.sk-primary:active:not(:disabled) .sk-button-chrome {
|
|
3397
3624
|
background-color: var(--sk-button-bg-hover);
|
|
3398
3625
|
color: var(--sk-button-text);
|
|
3399
3626
|
}
|
|
@@ -3402,16 +3629,22 @@
|
|
|
3402
3629
|
--sk-button-text: var(--sk-accent-text);
|
|
3403
3630
|
--sk-kind-color: var(--sk-accent-base);
|
|
3404
3631
|
--sk-button-border-color: transparent;
|
|
3632
|
+
}
|
|
3633
|
+
.sk-button.sk-ghost.sk-accent .sk-button-chrome {
|
|
3405
3634
|
background-color: transparent;
|
|
3406
3635
|
color: var(--sk-button-color-base);
|
|
3407
3636
|
}
|
|
3408
3637
|
.sk-button.sk-ghost.sk-accent:hover:not(:disabled) {
|
|
3409
3638
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3639
|
+
}
|
|
3640
|
+
.sk-button.sk-ghost.sk-accent:hover:not(:disabled) .sk-button-chrome {
|
|
3410
3641
|
background-color: var(--sk-button-bg-hover);
|
|
3411
3642
|
}
|
|
3412
3643
|
.sk-button.sk-ghost.sk-accent:active:not(:disabled) {
|
|
3413
3644
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3414
3645
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3646
|
+
}
|
|
3647
|
+
.sk-button.sk-ghost.sk-accent:active:not(:disabled) .sk-button-chrome {
|
|
3415
3648
|
background-color: var(--sk-button-bg-hover);
|
|
3416
3649
|
color: var(--sk-button-text);
|
|
3417
3650
|
}
|
|
@@ -3420,16 +3653,22 @@
|
|
|
3420
3653
|
--sk-button-text: var(--sk-info-text);
|
|
3421
3654
|
--sk-kind-color: var(--sk-info-base);
|
|
3422
3655
|
--sk-button-border-color: transparent;
|
|
3656
|
+
}
|
|
3657
|
+
.sk-button.sk-ghost.sk-info .sk-button-chrome {
|
|
3423
3658
|
background-color: transparent;
|
|
3424
3659
|
color: var(--sk-button-color-base);
|
|
3425
3660
|
}
|
|
3426
3661
|
.sk-button.sk-ghost.sk-info:hover:not(:disabled) {
|
|
3427
3662
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3663
|
+
}
|
|
3664
|
+
.sk-button.sk-ghost.sk-info:hover:not(:disabled) .sk-button-chrome {
|
|
3428
3665
|
background-color: var(--sk-button-bg-hover);
|
|
3429
3666
|
}
|
|
3430
3667
|
.sk-button.sk-ghost.sk-info:active:not(:disabled) {
|
|
3431
3668
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3432
3669
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3670
|
+
}
|
|
3671
|
+
.sk-button.sk-ghost.sk-info:active:not(:disabled) .sk-button-chrome {
|
|
3433
3672
|
background-color: var(--sk-button-bg-hover);
|
|
3434
3673
|
color: var(--sk-button-text);
|
|
3435
3674
|
}
|
|
@@ -3438,16 +3677,22 @@
|
|
|
3438
3677
|
--sk-button-text: var(--sk-success-text);
|
|
3439
3678
|
--sk-kind-color: var(--sk-success-base);
|
|
3440
3679
|
--sk-button-border-color: transparent;
|
|
3680
|
+
}
|
|
3681
|
+
.sk-button.sk-ghost.sk-success .sk-button-chrome {
|
|
3441
3682
|
background-color: transparent;
|
|
3442
3683
|
color: var(--sk-button-color-base);
|
|
3443
3684
|
}
|
|
3444
3685
|
.sk-button.sk-ghost.sk-success:hover:not(:disabled) {
|
|
3445
3686
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3687
|
+
}
|
|
3688
|
+
.sk-button.sk-ghost.sk-success:hover:not(:disabled) .sk-button-chrome {
|
|
3446
3689
|
background-color: var(--sk-button-bg-hover);
|
|
3447
3690
|
}
|
|
3448
3691
|
.sk-button.sk-ghost.sk-success:active:not(:disabled) {
|
|
3449
3692
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3450
3693
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3694
|
+
}
|
|
3695
|
+
.sk-button.sk-ghost.sk-success:active:not(:disabled) .sk-button-chrome {
|
|
3451
3696
|
background-color: var(--sk-button-bg-hover);
|
|
3452
3697
|
color: var(--sk-button-text);
|
|
3453
3698
|
}
|
|
@@ -3456,16 +3701,22 @@
|
|
|
3456
3701
|
--sk-button-text: var(--sk-warning-text);
|
|
3457
3702
|
--sk-kind-color: var(--sk-warning-base);
|
|
3458
3703
|
--sk-button-border-color: transparent;
|
|
3704
|
+
}
|
|
3705
|
+
.sk-button.sk-ghost.sk-warning .sk-button-chrome {
|
|
3459
3706
|
background-color: transparent;
|
|
3460
3707
|
color: var(--sk-button-color-base);
|
|
3461
3708
|
}
|
|
3462
3709
|
.sk-button.sk-ghost.sk-warning:hover:not(:disabled) {
|
|
3463
3710
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3711
|
+
}
|
|
3712
|
+
.sk-button.sk-ghost.sk-warning:hover:not(:disabled) .sk-button-chrome {
|
|
3464
3713
|
background-color: var(--sk-button-bg-hover);
|
|
3465
3714
|
}
|
|
3466
3715
|
.sk-button.sk-ghost.sk-warning:active:not(:disabled) {
|
|
3467
3716
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3468
3717
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3718
|
+
}
|
|
3719
|
+
.sk-button.sk-ghost.sk-warning:active:not(:disabled) .sk-button-chrome {
|
|
3469
3720
|
background-color: var(--sk-button-bg-hover);
|
|
3470
3721
|
color: var(--sk-button-text);
|
|
3471
3722
|
}
|
|
@@ -3474,16 +3725,22 @@
|
|
|
3474
3725
|
--sk-button-text: var(--sk-danger-text);
|
|
3475
3726
|
--sk-kind-color: var(--sk-danger-base);
|
|
3476
3727
|
--sk-button-border-color: transparent;
|
|
3728
|
+
}
|
|
3729
|
+
.sk-button.sk-ghost.sk-danger .sk-button-chrome {
|
|
3477
3730
|
background-color: transparent;
|
|
3478
3731
|
color: var(--sk-button-color-base);
|
|
3479
3732
|
}
|
|
3480
3733
|
.sk-button.sk-ghost.sk-danger:hover:not(:disabled) {
|
|
3481
3734
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3735
|
+
}
|
|
3736
|
+
.sk-button.sk-ghost.sk-danger:hover:not(:disabled) .sk-button-chrome {
|
|
3482
3737
|
background-color: var(--sk-button-bg-hover);
|
|
3483
3738
|
}
|
|
3484
3739
|
.sk-button.sk-ghost.sk-danger:active:not(:disabled) {
|
|
3485
3740
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3486
3741
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3742
|
+
}
|
|
3743
|
+
.sk-button.sk-ghost.sk-danger:active:not(:disabled) .sk-button-chrome {
|
|
3487
3744
|
background-color: var(--sk-button-bg-hover);
|
|
3488
3745
|
color: var(--sk-button-text);
|
|
3489
3746
|
}
|
|
@@ -3492,16 +3749,22 @@
|
|
|
3492
3749
|
--sk-button-text: var(--sk-boulder-text);
|
|
3493
3750
|
--sk-kind-color: var(--sk-boulder-base);
|
|
3494
3751
|
--sk-button-border-color: transparent;
|
|
3752
|
+
}
|
|
3753
|
+
.sk-button.sk-ghost.sk-boulder .sk-button-chrome {
|
|
3495
3754
|
background-color: transparent;
|
|
3496
3755
|
color: var(--sk-button-color-base);
|
|
3497
3756
|
}
|
|
3498
3757
|
.sk-button.sk-ghost.sk-boulder:hover:not(:disabled) {
|
|
3499
3758
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3759
|
+
}
|
|
3760
|
+
.sk-button.sk-ghost.sk-boulder:hover:not(:disabled) .sk-button-chrome {
|
|
3500
3761
|
background-color: var(--sk-button-bg-hover);
|
|
3501
3762
|
}
|
|
3502
3763
|
.sk-button.sk-ghost.sk-boulder:active:not(:disabled) {
|
|
3503
3764
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3504
3765
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3766
|
+
}
|
|
3767
|
+
.sk-button.sk-ghost.sk-boulder:active:not(:disabled) .sk-button-chrome {
|
|
3505
3768
|
background-color: var(--sk-button-bg-hover);
|
|
3506
3769
|
color: var(--sk-button-text);
|
|
3507
3770
|
}
|
|
@@ -3510,16 +3773,22 @@
|
|
|
3510
3773
|
--sk-button-text: var(--sk-neon-blue-text);
|
|
3511
3774
|
--sk-kind-color: var(--sk-neon-blue-base);
|
|
3512
3775
|
--sk-button-border-color: transparent;
|
|
3776
|
+
}
|
|
3777
|
+
.sk-button.sk-ghost.sk-neon-blue .sk-button-chrome {
|
|
3513
3778
|
background-color: transparent;
|
|
3514
3779
|
color: var(--sk-button-color-base);
|
|
3515
3780
|
}
|
|
3516
3781
|
.sk-button.sk-ghost.sk-neon-blue:hover:not(:disabled) {
|
|
3517
3782
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3783
|
+
}
|
|
3784
|
+
.sk-button.sk-ghost.sk-neon-blue:hover:not(:disabled) .sk-button-chrome {
|
|
3518
3785
|
background-color: var(--sk-button-bg-hover);
|
|
3519
3786
|
}
|
|
3520
3787
|
.sk-button.sk-ghost.sk-neon-blue:active:not(:disabled) {
|
|
3521
3788
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3522
3789
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3790
|
+
}
|
|
3791
|
+
.sk-button.sk-ghost.sk-neon-blue:active:not(:disabled) .sk-button-chrome {
|
|
3523
3792
|
background-color: var(--sk-button-bg-hover);
|
|
3524
3793
|
color: var(--sk-button-text);
|
|
3525
3794
|
}
|
|
@@ -3528,16 +3797,22 @@
|
|
|
3528
3797
|
--sk-button-text: var(--sk-light-blue-text);
|
|
3529
3798
|
--sk-kind-color: var(--sk-light-blue-base);
|
|
3530
3799
|
--sk-button-border-color: transparent;
|
|
3800
|
+
}
|
|
3801
|
+
.sk-button.sk-ghost.sk-light-blue .sk-button-chrome {
|
|
3531
3802
|
background-color: transparent;
|
|
3532
3803
|
color: var(--sk-button-color-base);
|
|
3533
3804
|
}
|
|
3534
3805
|
.sk-button.sk-ghost.sk-light-blue:hover:not(:disabled) {
|
|
3535
3806
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3807
|
+
}
|
|
3808
|
+
.sk-button.sk-ghost.sk-light-blue:hover:not(:disabled) .sk-button-chrome {
|
|
3536
3809
|
background-color: var(--sk-button-bg-hover);
|
|
3537
3810
|
}
|
|
3538
3811
|
.sk-button.sk-ghost.sk-light-blue:active:not(:disabled) {
|
|
3539
3812
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3540
3813
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3814
|
+
}
|
|
3815
|
+
.sk-button.sk-ghost.sk-light-blue:active:not(:disabled) .sk-button-chrome {
|
|
3541
3816
|
background-color: var(--sk-button-bg-hover);
|
|
3542
3817
|
color: var(--sk-button-text);
|
|
3543
3818
|
}
|
|
@@ -3546,16 +3821,22 @@
|
|
|
3546
3821
|
--sk-button-text: var(--sk-neon-orange-text);
|
|
3547
3822
|
--sk-kind-color: var(--sk-neon-orange-base);
|
|
3548
3823
|
--sk-button-border-color: transparent;
|
|
3824
|
+
}
|
|
3825
|
+
.sk-button.sk-ghost.sk-neon-orange .sk-button-chrome {
|
|
3549
3826
|
background-color: transparent;
|
|
3550
3827
|
color: var(--sk-button-color-base);
|
|
3551
3828
|
}
|
|
3552
3829
|
.sk-button.sk-ghost.sk-neon-orange:hover:not(:disabled) {
|
|
3553
3830
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3831
|
+
}
|
|
3832
|
+
.sk-button.sk-ghost.sk-neon-orange:hover:not(:disabled) .sk-button-chrome {
|
|
3554
3833
|
background-color: var(--sk-button-bg-hover);
|
|
3555
3834
|
}
|
|
3556
3835
|
.sk-button.sk-ghost.sk-neon-orange:active:not(:disabled) {
|
|
3557
3836
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3558
3837
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3838
|
+
}
|
|
3839
|
+
.sk-button.sk-ghost.sk-neon-orange:active:not(:disabled) .sk-button-chrome {
|
|
3559
3840
|
background-color: var(--sk-button-bg-hover);
|
|
3560
3841
|
color: var(--sk-button-text);
|
|
3561
3842
|
}
|
|
@@ -3564,16 +3845,22 @@
|
|
|
3564
3845
|
--sk-button-text: var(--sk-neon-purple-text);
|
|
3565
3846
|
--sk-kind-color: var(--sk-neon-purple-base);
|
|
3566
3847
|
--sk-button-border-color: transparent;
|
|
3848
|
+
}
|
|
3849
|
+
.sk-button.sk-ghost.sk-neon-purple .sk-button-chrome {
|
|
3567
3850
|
background-color: transparent;
|
|
3568
3851
|
color: var(--sk-button-color-base);
|
|
3569
3852
|
}
|
|
3570
3853
|
.sk-button.sk-ghost.sk-neon-purple:hover:not(:disabled) {
|
|
3571
3854
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3855
|
+
}
|
|
3856
|
+
.sk-button.sk-ghost.sk-neon-purple:hover:not(:disabled) .sk-button-chrome {
|
|
3572
3857
|
background-color: var(--sk-button-bg-hover);
|
|
3573
3858
|
}
|
|
3574
3859
|
.sk-button.sk-ghost.sk-neon-purple:active:not(:disabled) {
|
|
3575
3860
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3576
3861
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3862
|
+
}
|
|
3863
|
+
.sk-button.sk-ghost.sk-neon-purple:active:not(:disabled) .sk-button-chrome {
|
|
3577
3864
|
background-color: var(--sk-button-bg-hover);
|
|
3578
3865
|
color: var(--sk-button-text);
|
|
3579
3866
|
}
|
|
@@ -3582,16 +3869,22 @@
|
|
|
3582
3869
|
--sk-button-text: var(--sk-neon-green-text);
|
|
3583
3870
|
--sk-kind-color: var(--sk-neon-green-base);
|
|
3584
3871
|
--sk-button-border-color: transparent;
|
|
3872
|
+
}
|
|
3873
|
+
.sk-button.sk-ghost.sk-neon-green .sk-button-chrome {
|
|
3585
3874
|
background-color: transparent;
|
|
3586
3875
|
color: var(--sk-button-color-base);
|
|
3587
3876
|
}
|
|
3588
3877
|
.sk-button.sk-ghost.sk-neon-green:hover:not(:disabled) {
|
|
3589
3878
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3879
|
+
}
|
|
3880
|
+
.sk-button.sk-ghost.sk-neon-green:hover:not(:disabled) .sk-button-chrome {
|
|
3590
3881
|
background-color: var(--sk-button-bg-hover);
|
|
3591
3882
|
}
|
|
3592
3883
|
.sk-button.sk-ghost.sk-neon-green:active:not(:disabled) {
|
|
3593
3884
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3594
3885
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3886
|
+
}
|
|
3887
|
+
.sk-button.sk-ghost.sk-neon-green:active:not(:disabled) .sk-button-chrome {
|
|
3595
3888
|
background-color: var(--sk-button-bg-hover);
|
|
3596
3889
|
color: var(--sk-button-text);
|
|
3597
3890
|
}
|
|
@@ -3600,16 +3893,22 @@
|
|
|
3600
3893
|
--sk-button-text: var(--sk-neon-mint-text);
|
|
3601
3894
|
--sk-kind-color: var(--sk-neon-mint-base);
|
|
3602
3895
|
--sk-button-border-color: transparent;
|
|
3896
|
+
}
|
|
3897
|
+
.sk-button.sk-ghost.sk-neon-mint .sk-button-chrome {
|
|
3603
3898
|
background-color: transparent;
|
|
3604
3899
|
color: var(--sk-button-color-base);
|
|
3605
3900
|
}
|
|
3606
3901
|
.sk-button.sk-ghost.sk-neon-mint:hover:not(:disabled) {
|
|
3607
3902
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3903
|
+
}
|
|
3904
|
+
.sk-button.sk-ghost.sk-neon-mint:hover:not(:disabled) .sk-button-chrome {
|
|
3608
3905
|
background-color: var(--sk-button-bg-hover);
|
|
3609
3906
|
}
|
|
3610
3907
|
.sk-button.sk-ghost.sk-neon-mint:active:not(:disabled) {
|
|
3611
3908
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3612
3909
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3910
|
+
}
|
|
3911
|
+
.sk-button.sk-ghost.sk-neon-mint:active:not(:disabled) .sk-button-chrome {
|
|
3613
3912
|
background-color: var(--sk-button-bg-hover);
|
|
3614
3913
|
color: var(--sk-button-text);
|
|
3615
3914
|
}
|
|
@@ -3618,16 +3917,22 @@
|
|
|
3618
3917
|
--sk-button-text: var(--sk-neon-pink-text);
|
|
3619
3918
|
--sk-kind-color: var(--sk-neon-pink-base);
|
|
3620
3919
|
--sk-button-border-color: transparent;
|
|
3920
|
+
}
|
|
3921
|
+
.sk-button.sk-ghost.sk-neon-pink .sk-button-chrome {
|
|
3621
3922
|
background-color: transparent;
|
|
3622
3923
|
color: var(--sk-button-color-base);
|
|
3623
3924
|
}
|
|
3624
3925
|
.sk-button.sk-ghost.sk-neon-pink:hover:not(:disabled) {
|
|
3625
3926
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3927
|
+
}
|
|
3928
|
+
.sk-button.sk-ghost.sk-neon-pink:hover:not(:disabled) .sk-button-chrome {
|
|
3626
3929
|
background-color: var(--sk-button-bg-hover);
|
|
3627
3930
|
}
|
|
3628
3931
|
.sk-button.sk-ghost.sk-neon-pink:active:not(:disabled) {
|
|
3629
3932
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3630
3933
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3934
|
+
}
|
|
3935
|
+
.sk-button.sk-ghost.sk-neon-pink:active:not(:disabled) .sk-button-chrome {
|
|
3631
3936
|
background-color: var(--sk-button-bg-hover);
|
|
3632
3937
|
color: var(--sk-button-text);
|
|
3633
3938
|
}
|
|
@@ -3636,16 +3941,22 @@
|
|
|
3636
3941
|
--sk-button-text: var(--sk-yellow-text);
|
|
3637
3942
|
--sk-kind-color: var(--sk-yellow-base);
|
|
3638
3943
|
--sk-button-border-color: transparent;
|
|
3944
|
+
}
|
|
3945
|
+
.sk-button.sk-ghost.sk-yellow .sk-button-chrome {
|
|
3639
3946
|
background-color: transparent;
|
|
3640
3947
|
color: var(--sk-button-color-base);
|
|
3641
3948
|
}
|
|
3642
3949
|
.sk-button.sk-ghost.sk-yellow:hover:not(:disabled) {
|
|
3643
3950
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3951
|
+
}
|
|
3952
|
+
.sk-button.sk-ghost.sk-yellow:hover:not(:disabled) .sk-button-chrome {
|
|
3644
3953
|
background-color: var(--sk-button-bg-hover);
|
|
3645
3954
|
}
|
|
3646
3955
|
.sk-button.sk-ghost.sk-yellow:active:not(:disabled) {
|
|
3647
3956
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3648
3957
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3958
|
+
}
|
|
3959
|
+
.sk-button.sk-ghost.sk-yellow:active:not(:disabled) .sk-button-chrome {
|
|
3649
3960
|
background-color: var(--sk-button-bg-hover);
|
|
3650
3961
|
color: var(--sk-button-text);
|
|
3651
3962
|
}
|
|
@@ -3654,28 +3965,35 @@
|
|
|
3654
3965
|
--sk-button-text: var(--sk-red-text);
|
|
3655
3966
|
--sk-kind-color: var(--sk-red-base);
|
|
3656
3967
|
--sk-button-border-color: transparent;
|
|
3968
|
+
}
|
|
3969
|
+
.sk-button.sk-ghost.sk-red .sk-button-chrome {
|
|
3657
3970
|
background-color: transparent;
|
|
3658
3971
|
color: var(--sk-button-color-base);
|
|
3659
3972
|
}
|
|
3660
3973
|
.sk-button.sk-ghost.sk-red:hover:not(:disabled) {
|
|
3661
3974
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
3975
|
+
}
|
|
3976
|
+
.sk-button.sk-ghost.sk-red:hover:not(:disabled) .sk-button-chrome {
|
|
3662
3977
|
background-color: var(--sk-button-bg-hover);
|
|
3663
3978
|
}
|
|
3664
3979
|
.sk-button.sk-ghost.sk-red:active:not(:disabled) {
|
|
3665
3980
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
3666
3981
|
--sk-button-glow-shadow: 0 0 0 transparent;
|
|
3982
|
+
}
|
|
3983
|
+
.sk-button.sk-ghost.sk-red:active:not(:disabled) .sk-button-chrome {
|
|
3667
3984
|
background-color: var(--sk-button-bg-hover);
|
|
3668
3985
|
color: var(--sk-button-text);
|
|
3669
3986
|
}
|
|
3670
|
-
.sk-button.sk-ghost.sk-neutral {
|
|
3987
|
+
.sk-button.sk-ghost.sk-neutral .sk-button-chrome {
|
|
3671
3988
|
color: color-mix(in oklch, var(--sk-button-color-base), white 50%);
|
|
3672
3989
|
}
|
|
3673
3990
|
.sk-button.sk-link {
|
|
3674
|
-
|
|
3675
|
-
|
|
3676
|
-
|
|
3991
|
+
--sk-button-current-padding-x: 0;
|
|
3992
|
+
}
|
|
3993
|
+
.sk-button.sk-link .sk-button-chrome {
|
|
3677
3994
|
text-decoration: underline;
|
|
3678
3995
|
text-underline-offset: 2px;
|
|
3996
|
+
border-color: transparent;
|
|
3679
3997
|
}
|
|
3680
3998
|
.sk-button.sk-link.sk-neutral {
|
|
3681
3999
|
--sk-button-color-base: var(--sk-neutral-base);
|
|
@@ -3684,17 +4002,19 @@
|
|
|
3684
4002
|
--sk-button-radius-factor: 10;
|
|
3685
4003
|
--sk-button-border-width: 0;
|
|
3686
4004
|
--sk-button-border-color: transparent;
|
|
4005
|
+
}
|
|
4006
|
+
.sk-button.sk-link.sk-neutral .sk-button-chrome {
|
|
3687
4007
|
background-color: transparent;
|
|
3688
4008
|
color: var(--sk-button-color-base);
|
|
3689
4009
|
text-decoration: none;
|
|
3690
4010
|
border: none;
|
|
3691
4011
|
}
|
|
3692
|
-
.sk-button.sk-link.sk-neutral:hover:not(:disabled) {
|
|
4012
|
+
.sk-button.sk-link.sk-neutral:hover:not(:disabled) .sk-button-chrome {
|
|
3693
4013
|
color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
|
|
3694
4014
|
text-decoration-color: var(--sk-button-text);
|
|
3695
4015
|
text-decoration: underline;
|
|
3696
4016
|
}
|
|
3697
|
-
.sk-button.sk-link.sk-neutral:active:not(:disabled) {
|
|
4017
|
+
.sk-button.sk-link.sk-neutral:active:not(:disabled) .sk-button-chrome {
|
|
3698
4018
|
color: var(--sk-button-text);
|
|
3699
4019
|
text-decoration-color: var(--sk-button-border-hover);
|
|
3700
4020
|
text-decoration: underline;
|
|
@@ -3706,17 +4026,19 @@
|
|
|
3706
4026
|
--sk-button-radius-factor: 10;
|
|
3707
4027
|
--sk-button-border-width: 0;
|
|
3708
4028
|
--sk-button-border-color: transparent;
|
|
4029
|
+
}
|
|
4030
|
+
.sk-button.sk-link.sk-primary .sk-button-chrome {
|
|
3709
4031
|
background-color: transparent;
|
|
3710
4032
|
color: var(--sk-button-color-base);
|
|
3711
4033
|
text-decoration: none;
|
|
3712
4034
|
border: none;
|
|
3713
4035
|
}
|
|
3714
|
-
.sk-button.sk-link.sk-primary:hover:not(:disabled) {
|
|
4036
|
+
.sk-button.sk-link.sk-primary:hover:not(:disabled) .sk-button-chrome {
|
|
3715
4037
|
color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
|
|
3716
4038
|
text-decoration-color: var(--sk-button-text);
|
|
3717
4039
|
text-decoration: underline;
|
|
3718
4040
|
}
|
|
3719
|
-
.sk-button.sk-link.sk-primary:active:not(:disabled) {
|
|
4041
|
+
.sk-button.sk-link.sk-primary:active:not(:disabled) .sk-button-chrome {
|
|
3720
4042
|
color: var(--sk-button-text);
|
|
3721
4043
|
text-decoration-color: var(--sk-button-border-hover);
|
|
3722
4044
|
text-decoration: underline;
|
|
@@ -3728,17 +4050,19 @@
|
|
|
3728
4050
|
--sk-button-radius-factor: 10;
|
|
3729
4051
|
--sk-button-border-width: 0;
|
|
3730
4052
|
--sk-button-border-color: transparent;
|
|
4053
|
+
}
|
|
4054
|
+
.sk-button.sk-link.sk-accent .sk-button-chrome {
|
|
3731
4055
|
background-color: transparent;
|
|
3732
4056
|
color: var(--sk-button-color-base);
|
|
3733
4057
|
text-decoration: none;
|
|
3734
4058
|
border: none;
|
|
3735
4059
|
}
|
|
3736
|
-
.sk-button.sk-link.sk-accent:hover:not(:disabled) {
|
|
4060
|
+
.sk-button.sk-link.sk-accent:hover:not(:disabled) .sk-button-chrome {
|
|
3737
4061
|
color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
|
|
3738
4062
|
text-decoration-color: var(--sk-button-text);
|
|
3739
4063
|
text-decoration: underline;
|
|
3740
4064
|
}
|
|
3741
|
-
.sk-button.sk-link.sk-accent:active:not(:disabled) {
|
|
4065
|
+
.sk-button.sk-link.sk-accent:active:not(:disabled) .sk-button-chrome {
|
|
3742
4066
|
color: var(--sk-button-text);
|
|
3743
4067
|
text-decoration-color: var(--sk-button-border-hover);
|
|
3744
4068
|
text-decoration: underline;
|
|
@@ -3750,17 +4074,19 @@
|
|
|
3750
4074
|
--sk-button-radius-factor: 10;
|
|
3751
4075
|
--sk-button-border-width: 0;
|
|
3752
4076
|
--sk-button-border-color: transparent;
|
|
4077
|
+
}
|
|
4078
|
+
.sk-button.sk-link.sk-info .sk-button-chrome {
|
|
3753
4079
|
background-color: transparent;
|
|
3754
4080
|
color: var(--sk-button-color-base);
|
|
3755
4081
|
text-decoration: none;
|
|
3756
4082
|
border: none;
|
|
3757
4083
|
}
|
|
3758
|
-
.sk-button.sk-link.sk-info:hover:not(:disabled) {
|
|
4084
|
+
.sk-button.sk-link.sk-info:hover:not(:disabled) .sk-button-chrome {
|
|
3759
4085
|
color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
|
|
3760
4086
|
text-decoration-color: var(--sk-button-text);
|
|
3761
4087
|
text-decoration: underline;
|
|
3762
4088
|
}
|
|
3763
|
-
.sk-button.sk-link.sk-info:active:not(:disabled) {
|
|
4089
|
+
.sk-button.sk-link.sk-info:active:not(:disabled) .sk-button-chrome {
|
|
3764
4090
|
color: var(--sk-button-text);
|
|
3765
4091
|
text-decoration-color: var(--sk-button-border-hover);
|
|
3766
4092
|
text-decoration: underline;
|
|
@@ -3772,17 +4098,19 @@
|
|
|
3772
4098
|
--sk-button-radius-factor: 10;
|
|
3773
4099
|
--sk-button-border-width: 0;
|
|
3774
4100
|
--sk-button-border-color: transparent;
|
|
4101
|
+
}
|
|
4102
|
+
.sk-button.sk-link.sk-success .sk-button-chrome {
|
|
3775
4103
|
background-color: transparent;
|
|
3776
4104
|
color: var(--sk-button-color-base);
|
|
3777
4105
|
text-decoration: none;
|
|
3778
4106
|
border: none;
|
|
3779
4107
|
}
|
|
3780
|
-
.sk-button.sk-link.sk-success:hover:not(:disabled) {
|
|
4108
|
+
.sk-button.sk-link.sk-success:hover:not(:disabled) .sk-button-chrome {
|
|
3781
4109
|
color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
|
|
3782
4110
|
text-decoration-color: var(--sk-button-text);
|
|
3783
4111
|
text-decoration: underline;
|
|
3784
4112
|
}
|
|
3785
|
-
.sk-button.sk-link.sk-success:active:not(:disabled) {
|
|
4113
|
+
.sk-button.sk-link.sk-success:active:not(:disabled) .sk-button-chrome {
|
|
3786
4114
|
color: var(--sk-button-text);
|
|
3787
4115
|
text-decoration-color: var(--sk-button-border-hover);
|
|
3788
4116
|
text-decoration: underline;
|
|
@@ -3794,17 +4122,19 @@
|
|
|
3794
4122
|
--sk-button-radius-factor: 10;
|
|
3795
4123
|
--sk-button-border-width: 0;
|
|
3796
4124
|
--sk-button-border-color: transparent;
|
|
4125
|
+
}
|
|
4126
|
+
.sk-button.sk-link.sk-warning .sk-button-chrome {
|
|
3797
4127
|
background-color: transparent;
|
|
3798
4128
|
color: var(--sk-button-color-base);
|
|
3799
4129
|
text-decoration: none;
|
|
3800
4130
|
border: none;
|
|
3801
4131
|
}
|
|
3802
|
-
.sk-button.sk-link.sk-warning:hover:not(:disabled) {
|
|
4132
|
+
.sk-button.sk-link.sk-warning:hover:not(:disabled) .sk-button-chrome {
|
|
3803
4133
|
color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
|
|
3804
4134
|
text-decoration-color: var(--sk-button-text);
|
|
3805
4135
|
text-decoration: underline;
|
|
3806
4136
|
}
|
|
3807
|
-
.sk-button.sk-link.sk-warning:active:not(:disabled) {
|
|
4137
|
+
.sk-button.sk-link.sk-warning:active:not(:disabled) .sk-button-chrome {
|
|
3808
4138
|
color: var(--sk-button-text);
|
|
3809
4139
|
text-decoration-color: var(--sk-button-border-hover);
|
|
3810
4140
|
text-decoration: underline;
|
|
@@ -3816,17 +4146,19 @@
|
|
|
3816
4146
|
--sk-button-radius-factor: 10;
|
|
3817
4147
|
--sk-button-border-width: 0;
|
|
3818
4148
|
--sk-button-border-color: transparent;
|
|
4149
|
+
}
|
|
4150
|
+
.sk-button.sk-link.sk-danger .sk-button-chrome {
|
|
3819
4151
|
background-color: transparent;
|
|
3820
4152
|
color: var(--sk-button-color-base);
|
|
3821
4153
|
text-decoration: none;
|
|
3822
4154
|
border: none;
|
|
3823
4155
|
}
|
|
3824
|
-
.sk-button.sk-link.sk-danger:hover:not(:disabled) {
|
|
4156
|
+
.sk-button.sk-link.sk-danger:hover:not(:disabled) .sk-button-chrome {
|
|
3825
4157
|
color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
|
|
3826
4158
|
text-decoration-color: var(--sk-button-text);
|
|
3827
4159
|
text-decoration: underline;
|
|
3828
4160
|
}
|
|
3829
|
-
.sk-button.sk-link.sk-danger:active:not(:disabled) {
|
|
4161
|
+
.sk-button.sk-link.sk-danger:active:not(:disabled) .sk-button-chrome {
|
|
3830
4162
|
color: var(--sk-button-text);
|
|
3831
4163
|
text-decoration-color: var(--sk-button-border-hover);
|
|
3832
4164
|
text-decoration: underline;
|
|
@@ -3838,17 +4170,19 @@
|
|
|
3838
4170
|
--sk-button-radius-factor: 10;
|
|
3839
4171
|
--sk-button-border-width: 0;
|
|
3840
4172
|
--sk-button-border-color: transparent;
|
|
4173
|
+
}
|
|
4174
|
+
.sk-button.sk-link.sk-boulder .sk-button-chrome {
|
|
3841
4175
|
background-color: transparent;
|
|
3842
4176
|
color: var(--sk-button-color-base);
|
|
3843
4177
|
text-decoration: none;
|
|
3844
4178
|
border: none;
|
|
3845
4179
|
}
|
|
3846
|
-
.sk-button.sk-link.sk-boulder:hover:not(:disabled) {
|
|
4180
|
+
.sk-button.sk-link.sk-boulder:hover:not(:disabled) .sk-button-chrome {
|
|
3847
4181
|
color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
|
|
3848
4182
|
text-decoration-color: var(--sk-button-text);
|
|
3849
4183
|
text-decoration: underline;
|
|
3850
4184
|
}
|
|
3851
|
-
.sk-button.sk-link.sk-boulder:active:not(:disabled) {
|
|
4185
|
+
.sk-button.sk-link.sk-boulder:active:not(:disabled) .sk-button-chrome {
|
|
3852
4186
|
color: var(--sk-button-text);
|
|
3853
4187
|
text-decoration-color: var(--sk-button-border-hover);
|
|
3854
4188
|
text-decoration: underline;
|
|
@@ -3860,17 +4194,19 @@
|
|
|
3860
4194
|
--sk-button-radius-factor: 10;
|
|
3861
4195
|
--sk-button-border-width: 0;
|
|
3862
4196
|
--sk-button-border-color: transparent;
|
|
4197
|
+
}
|
|
4198
|
+
.sk-button.sk-link.sk-neon-blue .sk-button-chrome {
|
|
3863
4199
|
background-color: transparent;
|
|
3864
4200
|
color: var(--sk-button-color-base);
|
|
3865
4201
|
text-decoration: none;
|
|
3866
4202
|
border: none;
|
|
3867
4203
|
}
|
|
3868
|
-
.sk-button.sk-link.sk-neon-blue:hover:not(:disabled) {
|
|
4204
|
+
.sk-button.sk-link.sk-neon-blue:hover:not(:disabled) .sk-button-chrome {
|
|
3869
4205
|
color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
|
|
3870
4206
|
text-decoration-color: var(--sk-button-text);
|
|
3871
4207
|
text-decoration: underline;
|
|
3872
4208
|
}
|
|
3873
|
-
.sk-button.sk-link.sk-neon-blue:active:not(:disabled) {
|
|
4209
|
+
.sk-button.sk-link.sk-neon-blue:active:not(:disabled) .sk-button-chrome {
|
|
3874
4210
|
color: var(--sk-button-text);
|
|
3875
4211
|
text-decoration-color: var(--sk-button-border-hover);
|
|
3876
4212
|
text-decoration: underline;
|
|
@@ -3882,17 +4218,19 @@
|
|
|
3882
4218
|
--sk-button-radius-factor: 10;
|
|
3883
4219
|
--sk-button-border-width: 0;
|
|
3884
4220
|
--sk-button-border-color: transparent;
|
|
4221
|
+
}
|
|
4222
|
+
.sk-button.sk-link.sk-light-blue .sk-button-chrome {
|
|
3885
4223
|
background-color: transparent;
|
|
3886
4224
|
color: var(--sk-button-color-base);
|
|
3887
4225
|
text-decoration: none;
|
|
3888
4226
|
border: none;
|
|
3889
4227
|
}
|
|
3890
|
-
.sk-button.sk-link.sk-light-blue:hover:not(:disabled) {
|
|
4228
|
+
.sk-button.sk-link.sk-light-blue:hover:not(:disabled) .sk-button-chrome {
|
|
3891
4229
|
color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
|
|
3892
4230
|
text-decoration-color: var(--sk-button-text);
|
|
3893
4231
|
text-decoration: underline;
|
|
3894
4232
|
}
|
|
3895
|
-
.sk-button.sk-link.sk-light-blue:active:not(:disabled) {
|
|
4233
|
+
.sk-button.sk-link.sk-light-blue:active:not(:disabled) .sk-button-chrome {
|
|
3896
4234
|
color: var(--sk-button-text);
|
|
3897
4235
|
text-decoration-color: var(--sk-button-border-hover);
|
|
3898
4236
|
text-decoration: underline;
|
|
@@ -3904,17 +4242,19 @@
|
|
|
3904
4242
|
--sk-button-radius-factor: 10;
|
|
3905
4243
|
--sk-button-border-width: 0;
|
|
3906
4244
|
--sk-button-border-color: transparent;
|
|
4245
|
+
}
|
|
4246
|
+
.sk-button.sk-link.sk-neon-orange .sk-button-chrome {
|
|
3907
4247
|
background-color: transparent;
|
|
3908
4248
|
color: var(--sk-button-color-base);
|
|
3909
4249
|
text-decoration: none;
|
|
3910
4250
|
border: none;
|
|
3911
4251
|
}
|
|
3912
|
-
.sk-button.sk-link.sk-neon-orange:hover:not(:disabled) {
|
|
4252
|
+
.sk-button.sk-link.sk-neon-orange:hover:not(:disabled) .sk-button-chrome {
|
|
3913
4253
|
color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
|
|
3914
4254
|
text-decoration-color: var(--sk-button-text);
|
|
3915
4255
|
text-decoration: underline;
|
|
3916
4256
|
}
|
|
3917
|
-
.sk-button.sk-link.sk-neon-orange:active:not(:disabled) {
|
|
4257
|
+
.sk-button.sk-link.sk-neon-orange:active:not(:disabled) .sk-button-chrome {
|
|
3918
4258
|
color: var(--sk-button-text);
|
|
3919
4259
|
text-decoration-color: var(--sk-button-border-hover);
|
|
3920
4260
|
text-decoration: underline;
|
|
@@ -3926,17 +4266,19 @@
|
|
|
3926
4266
|
--sk-button-radius-factor: 10;
|
|
3927
4267
|
--sk-button-border-width: 0;
|
|
3928
4268
|
--sk-button-border-color: transparent;
|
|
4269
|
+
}
|
|
4270
|
+
.sk-button.sk-link.sk-neon-purple .sk-button-chrome {
|
|
3929
4271
|
background-color: transparent;
|
|
3930
4272
|
color: var(--sk-button-color-base);
|
|
3931
4273
|
text-decoration: none;
|
|
3932
4274
|
border: none;
|
|
3933
4275
|
}
|
|
3934
|
-
.sk-button.sk-link.sk-neon-purple:hover:not(:disabled) {
|
|
4276
|
+
.sk-button.sk-link.sk-neon-purple:hover:not(:disabled) .sk-button-chrome {
|
|
3935
4277
|
color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
|
|
3936
4278
|
text-decoration-color: var(--sk-button-text);
|
|
3937
4279
|
text-decoration: underline;
|
|
3938
4280
|
}
|
|
3939
|
-
.sk-button.sk-link.sk-neon-purple:active:not(:disabled) {
|
|
4281
|
+
.sk-button.sk-link.sk-neon-purple:active:not(:disabled) .sk-button-chrome {
|
|
3940
4282
|
color: var(--sk-button-text);
|
|
3941
4283
|
text-decoration-color: var(--sk-button-border-hover);
|
|
3942
4284
|
text-decoration: underline;
|
|
@@ -3948,17 +4290,19 @@
|
|
|
3948
4290
|
--sk-button-radius-factor: 10;
|
|
3949
4291
|
--sk-button-border-width: 0;
|
|
3950
4292
|
--sk-button-border-color: transparent;
|
|
4293
|
+
}
|
|
4294
|
+
.sk-button.sk-link.sk-neon-green .sk-button-chrome {
|
|
3951
4295
|
background-color: transparent;
|
|
3952
4296
|
color: var(--sk-button-color-base);
|
|
3953
4297
|
text-decoration: none;
|
|
3954
4298
|
border: none;
|
|
3955
4299
|
}
|
|
3956
|
-
.sk-button.sk-link.sk-neon-green:hover:not(:disabled) {
|
|
4300
|
+
.sk-button.sk-link.sk-neon-green:hover:not(:disabled) .sk-button-chrome {
|
|
3957
4301
|
color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
|
|
3958
4302
|
text-decoration-color: var(--sk-button-text);
|
|
3959
4303
|
text-decoration: underline;
|
|
3960
4304
|
}
|
|
3961
|
-
.sk-button.sk-link.sk-neon-green:active:not(:disabled) {
|
|
4305
|
+
.sk-button.sk-link.sk-neon-green:active:not(:disabled) .sk-button-chrome {
|
|
3962
4306
|
color: var(--sk-button-text);
|
|
3963
4307
|
text-decoration-color: var(--sk-button-border-hover);
|
|
3964
4308
|
text-decoration: underline;
|
|
@@ -3970,17 +4314,19 @@
|
|
|
3970
4314
|
--sk-button-radius-factor: 10;
|
|
3971
4315
|
--sk-button-border-width: 0;
|
|
3972
4316
|
--sk-button-border-color: transparent;
|
|
4317
|
+
}
|
|
4318
|
+
.sk-button.sk-link.sk-neon-mint .sk-button-chrome {
|
|
3973
4319
|
background-color: transparent;
|
|
3974
4320
|
color: var(--sk-button-color-base);
|
|
3975
4321
|
text-decoration: none;
|
|
3976
4322
|
border: none;
|
|
3977
4323
|
}
|
|
3978
|
-
.sk-button.sk-link.sk-neon-mint:hover:not(:disabled) {
|
|
4324
|
+
.sk-button.sk-link.sk-neon-mint:hover:not(:disabled) .sk-button-chrome {
|
|
3979
4325
|
color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
|
|
3980
4326
|
text-decoration-color: var(--sk-button-text);
|
|
3981
4327
|
text-decoration: underline;
|
|
3982
4328
|
}
|
|
3983
|
-
.sk-button.sk-link.sk-neon-mint:active:not(:disabled) {
|
|
4329
|
+
.sk-button.sk-link.sk-neon-mint:active:not(:disabled) .sk-button-chrome {
|
|
3984
4330
|
color: var(--sk-button-text);
|
|
3985
4331
|
text-decoration-color: var(--sk-button-border-hover);
|
|
3986
4332
|
text-decoration: underline;
|
|
@@ -3992,17 +4338,19 @@
|
|
|
3992
4338
|
--sk-button-radius-factor: 10;
|
|
3993
4339
|
--sk-button-border-width: 0;
|
|
3994
4340
|
--sk-button-border-color: transparent;
|
|
4341
|
+
}
|
|
4342
|
+
.sk-button.sk-link.sk-neon-pink .sk-button-chrome {
|
|
3995
4343
|
background-color: transparent;
|
|
3996
4344
|
color: var(--sk-button-color-base);
|
|
3997
4345
|
text-decoration: none;
|
|
3998
4346
|
border: none;
|
|
3999
4347
|
}
|
|
4000
|
-
.sk-button.sk-link.sk-neon-pink:hover:not(:disabled) {
|
|
4348
|
+
.sk-button.sk-link.sk-neon-pink:hover:not(:disabled) .sk-button-chrome {
|
|
4001
4349
|
color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
|
|
4002
4350
|
text-decoration-color: var(--sk-button-text);
|
|
4003
4351
|
text-decoration: underline;
|
|
4004
4352
|
}
|
|
4005
|
-
.sk-button.sk-link.sk-neon-pink:active:not(:disabled) {
|
|
4353
|
+
.sk-button.sk-link.sk-neon-pink:active:not(:disabled) .sk-button-chrome {
|
|
4006
4354
|
color: var(--sk-button-text);
|
|
4007
4355
|
text-decoration-color: var(--sk-button-border-hover);
|
|
4008
4356
|
text-decoration: underline;
|
|
@@ -4014,17 +4362,19 @@
|
|
|
4014
4362
|
--sk-button-radius-factor: 10;
|
|
4015
4363
|
--sk-button-border-width: 0;
|
|
4016
4364
|
--sk-button-border-color: transparent;
|
|
4365
|
+
}
|
|
4366
|
+
.sk-button.sk-link.sk-yellow .sk-button-chrome {
|
|
4017
4367
|
background-color: transparent;
|
|
4018
4368
|
color: var(--sk-button-color-base);
|
|
4019
4369
|
text-decoration: none;
|
|
4020
4370
|
border: none;
|
|
4021
4371
|
}
|
|
4022
|
-
.sk-button.sk-link.sk-yellow:hover:not(:disabled) {
|
|
4372
|
+
.sk-button.sk-link.sk-yellow:hover:not(:disabled) .sk-button-chrome {
|
|
4023
4373
|
color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
|
|
4024
4374
|
text-decoration-color: var(--sk-button-text);
|
|
4025
4375
|
text-decoration: underline;
|
|
4026
4376
|
}
|
|
4027
|
-
.sk-button.sk-link.sk-yellow:active:not(:disabled) {
|
|
4377
|
+
.sk-button.sk-link.sk-yellow:active:not(:disabled) .sk-button-chrome {
|
|
4028
4378
|
color: var(--sk-button-text);
|
|
4029
4379
|
text-decoration-color: var(--sk-button-border-hover);
|
|
4030
4380
|
text-decoration: underline;
|
|
@@ -4036,25 +4386,27 @@
|
|
|
4036
4386
|
--sk-button-radius-factor: 10;
|
|
4037
4387
|
--sk-button-border-width: 0;
|
|
4038
4388
|
--sk-button-border-color: transparent;
|
|
4389
|
+
}
|
|
4390
|
+
.sk-button.sk-link.sk-red .sk-button-chrome {
|
|
4039
4391
|
background-color: transparent;
|
|
4040
4392
|
color: var(--sk-button-color-base);
|
|
4041
4393
|
text-decoration: none;
|
|
4042
4394
|
border: none;
|
|
4043
4395
|
}
|
|
4044
|
-
.sk-button.sk-link.sk-red:hover:not(:disabled) {
|
|
4396
|
+
.sk-button.sk-link.sk-red:hover:not(:disabled) .sk-button-chrome {
|
|
4045
4397
|
color: color-mix(in oklch, var(--sk-button-color-base) 92%, white 8%);
|
|
4046
4398
|
text-decoration-color: var(--sk-button-text);
|
|
4047
4399
|
text-decoration: underline;
|
|
4048
4400
|
}
|
|
4049
|
-
.sk-button.sk-link.sk-red:active:not(:disabled) {
|
|
4401
|
+
.sk-button.sk-link.sk-red:active:not(:disabled) .sk-button-chrome {
|
|
4050
4402
|
color: var(--sk-button-text);
|
|
4051
4403
|
text-decoration-color: var(--sk-button-border-hover);
|
|
4052
4404
|
text-decoration: underline;
|
|
4053
4405
|
}
|
|
4054
|
-
.sk-button.sk-link.sk-neutral {
|
|
4406
|
+
.sk-button.sk-link.sk-neutral .sk-button-chrome {
|
|
4055
4407
|
color: color-mix(in oklch, var(--sk-button-color-base), white 50%);
|
|
4056
4408
|
}
|
|
4057
|
-
.sk-button.sk-link.sk-neutral:hover:not(:disabled) {
|
|
4409
|
+
.sk-button.sk-link.sk-neutral:hover:not(:disabled) .sk-button-chrome {
|
|
4058
4410
|
color: color-mix(in oklch, var(--sk-button-color-base), white 60%);
|
|
4059
4411
|
}
|
|
4060
4412
|
.sk-button:disabled {
|
|
@@ -4069,38 +4421,111 @@
|
|
|
4069
4421
|
}
|
|
4070
4422
|
.sk-button.sk-pressed.sk-solid {
|
|
4071
4423
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
4424
|
+
}
|
|
4425
|
+
.sk-button.sk-pressed.sk-solid .sk-button-chrome {
|
|
4072
4426
|
background-color: var(--sk-button-bg-hover);
|
|
4073
4427
|
color: var(--sk-button-text);
|
|
4074
4428
|
}
|
|
4075
4429
|
.sk-button.sk-pressed.sk-solid:hover:not(:disabled) {
|
|
4076
4430
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
4431
|
+
}
|
|
4432
|
+
.sk-button.sk-pressed.sk-solid:hover:not(:disabled) .sk-button-chrome {
|
|
4077
4433
|
background-color: color-mix(in oklch, var(--sk-button-bg) 70%, white 30%);
|
|
4078
4434
|
}
|
|
4079
4435
|
.sk-button.sk-pressed.sk-outline {
|
|
4080
4436
|
--sk-button-border-color: var(--sk-button-border-hover);
|
|
4437
|
+
}
|
|
4438
|
+
.sk-button.sk-pressed.sk-outline .sk-button-chrome {
|
|
4081
4439
|
background-color: var(--sk-button-bg);
|
|
4082
4440
|
color: var(--sk-button-text);
|
|
4083
4441
|
}
|
|
4084
4442
|
.sk-button.sk-pressed.sk-subtle {
|
|
4085
4443
|
--sk-button-border-color: transparent;
|
|
4444
|
+
}
|
|
4445
|
+
.sk-button.sk-pressed.sk-subtle .sk-button-chrome {
|
|
4086
4446
|
background-color: var(--sk-button-bg);
|
|
4087
4447
|
color: var(--sk-button-text);
|
|
4088
4448
|
}
|
|
4089
4449
|
.sk-button.sk-pressed.sk-subtle:hover:not(:disabled) {
|
|
4090
4450
|
--sk-button-border-color: transparent;
|
|
4091
4451
|
--sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
|
|
4452
|
+
}
|
|
4453
|
+
.sk-button.sk-pressed.sk-subtle:hover:not(:disabled) .sk-button-chrome {
|
|
4092
4454
|
background-color: var(--sk-button-bg-hover);
|
|
4093
4455
|
}
|
|
4094
4456
|
.sk-button.sk-pressed.sk-ghost {
|
|
4095
4457
|
--sk-button-border-color: color-mix(in oklch, var(--sk-button-border-base) 50%, transparent 50%);
|
|
4458
|
+
}
|
|
4459
|
+
.sk-button.sk-pressed.sk-ghost .sk-button-chrome {
|
|
4096
4460
|
border-color: color-mix(in oklch, var(--sk-button-border-base) 50%, transparent 50%);
|
|
4097
4461
|
background-color: var(--sk-button-outline-bg);
|
|
4098
4462
|
color: var(--sk-button-text);
|
|
4099
4463
|
}
|
|
4100
|
-
.sk-button.sk-pressed.sk-link {
|
|
4464
|
+
.sk-button.sk-pressed.sk-link .sk-button-chrome {
|
|
4101
4465
|
color: var(--sk-button-text);
|
|
4102
4466
|
}
|
|
4103
|
-
.sk-button
|
|
4467
|
+
.sk-button.sk-icon-only {
|
|
4468
|
+
--sk-button-current-padding-x: 0;
|
|
4469
|
+
}
|
|
4470
|
+
.sk-button.sk-icon-only .sk-button-chrome {
|
|
4471
|
+
aspect-ratio: 1;
|
|
4472
|
+
}
|
|
4473
|
+
.sk-button.sk-icon-only .sk-button-icon {
|
|
4474
|
+
font-size: 1.25em;
|
|
4475
|
+
}
|
|
4476
|
+
.sk-button-chrome {
|
|
4477
|
+
position: relative;
|
|
4478
|
+
display: inline-flex;
|
|
4479
|
+
align-items: center;
|
|
4480
|
+
justify-content: center;
|
|
4481
|
+
gap: var(--sk-button-gap);
|
|
4482
|
+
height: var(--sk-button-current-height);
|
|
4483
|
+
padding-left: var(--sk-button-current-padding-x);
|
|
4484
|
+
padding-right: var(--sk-button-current-padding-x);
|
|
4485
|
+
font-weight: var(--sk-button-font-weight);
|
|
4486
|
+
font-size: var(--sk-button-current-font-size);
|
|
4487
|
+
line-height: var(--sk-button-line-height);
|
|
4488
|
+
border-width: var(--sk-button-border-width);
|
|
4489
|
+
border-style: solid;
|
|
4490
|
+
flex-shrink: 0;
|
|
4491
|
+
box-sizing: border-box;
|
|
4492
|
+
}
|
|
4493
|
+
@supports (corner-shape: bevel) {
|
|
4494
|
+
.sk-button-chrome {
|
|
4495
|
+
border: var(--sk-button-border-width) solid var(--sk-button-border-color);
|
|
4496
|
+
border-top-left-radius: var(--sk-button-current-cut-size);
|
|
4497
|
+
border-top-right-radius: 0;
|
|
4498
|
+
border-bottom-right-radius: var(--sk-button-current-cut-size);
|
|
4499
|
+
border-bottom-left-radius: 0;
|
|
4500
|
+
corner-shape: bevel;
|
|
4501
|
+
}
|
|
4502
|
+
}
|
|
4503
|
+
@supports not (corner-shape: bevel) {
|
|
4504
|
+
.sk-button-chrome {
|
|
4505
|
+
border: none;
|
|
4506
|
+
clip-path: polygon(var(--sk-button-current-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-current-cut-size)), calc(100% - var(--sk-button-current-cut-size)) 100%, 0% 100%, 0% var(--sk-button-current-cut-size));
|
|
4507
|
+
}
|
|
4508
|
+
.sk-button-chrome::before {
|
|
4509
|
+
content: "";
|
|
4510
|
+
position: absolute;
|
|
4511
|
+
top: 0;
|
|
4512
|
+
left: 0;
|
|
4513
|
+
right: 0;
|
|
4514
|
+
bottom: 0;
|
|
4515
|
+
background-color: var(--sk-button-border-color);
|
|
4516
|
+
z-index: -1;
|
|
4517
|
+
clip-path: polygon(var(--sk-button-current-cut-size) 0%, 100% 0%, 100% calc(100% - var(--sk-button-current-cut-size)), calc(100% - var(--sk-button-current-cut-size)) 100%, 0% 100%, 0% var(--sk-button-current-cut-size), var(--sk-button-current-cut-size) 0%, calc(var(--sk-button-current-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width), var(--sk-button-border-width) calc(var(--sk-button-current-cut-size) + var(--sk-button-border-width)), var(--sk-button-border-width) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-current-cut-size) - var(--sk-button-border-width)) calc(100% - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) calc(100% - var(--sk-button-current-cut-size) - var(--sk-button-border-width)), calc(100% - var(--sk-button-border-width)) var(--sk-button-border-width), calc(var(--sk-button-current-cut-size) + var(--sk-button-border-width)) var(--sk-button-border-width));
|
|
4518
|
+
}
|
|
4519
|
+
}
|
|
4520
|
+
@supports (corner-shape: bevel) {
|
|
4521
|
+
.sk-button-chrome {
|
|
4522
|
+
box-shadow: var(--sk-button-glow-shadow);
|
|
4523
|
+
}
|
|
4524
|
+
}
|
|
4525
|
+
.sk-button-chrome {
|
|
4526
|
+
transition: color var(--sk-button-transition-duration) var(--sk-button-transition-easing), background-color var(--sk-button-transition-duration) var(--sk-button-transition-easing), border-color var(--sk-button-transition-duration) var(--sk-button-transition-easing), box-shadow var(--sk-button-transition-duration) var(--sk-button-transition-easing);
|
|
4527
|
+
}
|
|
4528
|
+
.sk-button-loader {
|
|
4104
4529
|
position: absolute;
|
|
4105
4530
|
width: 1em;
|
|
4106
4531
|
height: 1em;
|
|
@@ -4109,35 +4534,27 @@
|
|
|
4109
4534
|
border-radius: 50%;
|
|
4110
4535
|
animation: sk-button-spin 0.6s linear infinite;
|
|
4111
4536
|
}
|
|
4112
|
-
.sk-button
|
|
4113
|
-
padding-left: 0;
|
|
4114
|
-
padding-right: 0;
|
|
4115
|
-
aspect-ratio: 1;
|
|
4116
|
-
}
|
|
4117
|
-
.sk-button.sk-icon-only .sk-button-icon {
|
|
4118
|
-
font-size: 1.25em;
|
|
4119
|
-
}
|
|
4120
|
-
.sk-button .sk-button-icon {
|
|
4537
|
+
.sk-button-icon {
|
|
4121
4538
|
display: inline-flex;
|
|
4122
4539
|
align-items: center;
|
|
4123
4540
|
justify-content: center;
|
|
4124
4541
|
flex-shrink: 0;
|
|
4125
4542
|
line-height: 1;
|
|
4126
4543
|
}
|
|
4127
|
-
.sk-button
|
|
4544
|
+
.sk-button-icon svg {
|
|
4128
4545
|
width: 1em;
|
|
4129
4546
|
height: 1em;
|
|
4130
4547
|
display: block;
|
|
4131
4548
|
}
|
|
4132
|
-
.sk-button
|
|
4549
|
+
.sk-button-content {
|
|
4133
4550
|
display: inline-flex;
|
|
4134
4551
|
align-items: center;
|
|
4135
4552
|
gap: var(--sk-button-gap);
|
|
4136
4553
|
}
|
|
4137
|
-
.sk-button
|
|
4554
|
+
.sk-button-content.loading {
|
|
4138
4555
|
visibility: hidden;
|
|
4139
4556
|
}
|
|
4140
|
-
.sk-button
|
|
4557
|
+
.sk-button-text {
|
|
4141
4558
|
display: inline-flex;
|
|
4142
4559
|
align-items: center;
|
|
4143
4560
|
}
|
|
@@ -4239,6 +4656,11 @@
|
|
|
4239
4656
|
gap: var(--sk-space-xs);
|
|
4240
4657
|
cursor: pointer;
|
|
4241
4658
|
}
|
|
4659
|
+
@media (pointer: coarse) {
|
|
4660
|
+
.sk-checkbox-wrapper {
|
|
4661
|
+
min-height: 44px;
|
|
4662
|
+
}
|
|
4663
|
+
}
|
|
4242
4664
|
.sk-checkbox-wrapper.sk-disabled {
|
|
4243
4665
|
cursor: not-allowed;
|
|
4244
4666
|
opacity: 0.5;
|
|
@@ -4247,6 +4669,7 @@
|
|
|
4247
4669
|
--sk-checkbox-color-base: var(--sk-neutral-base);
|
|
4248
4670
|
--sk-checkbox-fg: var(--sk-neutral-text);
|
|
4249
4671
|
--sk-checkbox-cut: 0.25rem;
|
|
4672
|
+
position: relative;
|
|
4250
4673
|
display: inline-flex;
|
|
4251
4674
|
align-items: center;
|
|
4252
4675
|
justify-content: center;
|
|
@@ -4457,6 +4880,7 @@
|
|
|
4457
4880
|
color-mix(in oklch, var(--sk-collapsible-color-base) 75%, transparent 25%),
|
|
4458
4881
|
#000 46.25%
|
|
4459
4882
|
);
|
|
4883
|
+
position: relative;
|
|
4460
4884
|
padding: var(--sk-space-md) var(--sk-space-lg);
|
|
4461
4885
|
width: 100%;
|
|
4462
4886
|
}
|
|
@@ -4511,6 +4935,12 @@
|
|
|
4511
4935
|
opacity: 0;
|
|
4512
4936
|
}
|
|
4513
4937
|
}
|
|
4938
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4939
|
+
.sk-collapsible-content[data-state=open],
|
|
4940
|
+
.sk-collapsible-content[data-state=closed] {
|
|
4941
|
+
animation: none;
|
|
4942
|
+
}
|
|
4943
|
+
}
|
|
4514
4944
|
.sk-color-picker {
|
|
4515
4945
|
--sk-color-picker-color-base: var(--sk-neutral-base);
|
|
4516
4946
|
--sk-color-picker-fg: var(--sk-neutral-text);
|
|
@@ -4643,6 +5073,7 @@
|
|
|
4643
5073
|
pointer-events: none;
|
|
4644
5074
|
}
|
|
4645
5075
|
.sk-color-picker-swatch {
|
|
5076
|
+
position: relative;
|
|
4646
5077
|
flex-shrink: 0;
|
|
4647
5078
|
}
|
|
4648
5079
|
@supports (corner-shape: bevel) {
|
|
@@ -4746,11 +5177,12 @@
|
|
|
4746
5177
|
.sk-color-picker-panel {
|
|
4747
5178
|
--sk-panel-color-base: var(--sk-neutral-base);
|
|
4748
5179
|
--sk-panel-fg: var(--sk-neutral-text);
|
|
5180
|
+
position: relative;
|
|
4749
5181
|
display: flex;
|
|
4750
5182
|
flex-direction: column;
|
|
4751
5183
|
gap: var(--sk-space-sm);
|
|
4752
5184
|
padding: var(--sk-space-md);
|
|
4753
|
-
z-index:
|
|
5185
|
+
z-index: var(--sk-z-popover);
|
|
4754
5186
|
width: 17rem;
|
|
4755
5187
|
}
|
|
4756
5188
|
@supports (corner-shape: bevel) {
|
|
@@ -4884,6 +5316,7 @@
|
|
|
4884
5316
|
gap: 2px;
|
|
4885
5317
|
}
|
|
4886
5318
|
.sk-color-picker-format-btn {
|
|
5319
|
+
position: relative;
|
|
4887
5320
|
flex: 1;
|
|
4888
5321
|
padding: var(--sk-space-3xs) var(--sk-space-xs);
|
|
4889
5322
|
font-size: 0.6875rem;
|
|
@@ -5248,6 +5681,7 @@
|
|
|
5248
5681
|
--sk-input-color-base: var(--sk-neutral-base);
|
|
5249
5682
|
--sk-input-fg: var(--sk-neutral-text);
|
|
5250
5683
|
--sk-input-cut: 0.5rem;
|
|
5684
|
+
position: relative;
|
|
5251
5685
|
display: block;
|
|
5252
5686
|
width: 100%;
|
|
5253
5687
|
font-family: var(--sk-font-family-base);
|
|
@@ -5575,7 +6009,7 @@
|
|
|
5575
6009
|
max-height: 20rem;
|
|
5576
6010
|
overflow: auto;
|
|
5577
6011
|
padding: var(--sk-space-xs);
|
|
5578
|
-
z-index:
|
|
6012
|
+
z-index: var(--sk-z-dropdown);
|
|
5579
6013
|
}
|
|
5580
6014
|
@supports (corner-shape: bevel) {
|
|
5581
6015
|
.sk-listbox-content {
|
|
@@ -5670,6 +6104,7 @@
|
|
|
5670
6104
|
--sk-menu-fg: var(--sk-red-text);
|
|
5671
6105
|
}
|
|
5672
6106
|
.sk-listbox-item {
|
|
6107
|
+
position: relative;
|
|
5673
6108
|
display: flex;
|
|
5674
6109
|
align-items: center;
|
|
5675
6110
|
justify-content: space-between;
|
|
@@ -5681,6 +6116,11 @@
|
|
|
5681
6116
|
outline: none;
|
|
5682
6117
|
user-select: none;
|
|
5683
6118
|
}
|
|
6119
|
+
@media (pointer: coarse) {
|
|
6120
|
+
.sk-listbox-item {
|
|
6121
|
+
min-height: 44px;
|
|
6122
|
+
}
|
|
6123
|
+
}
|
|
5684
6124
|
@supports (corner-shape: bevel) {
|
|
5685
6125
|
.sk-listbox-item {
|
|
5686
6126
|
border: var(--sk-border-width-thin) solid transparent;
|
|
@@ -5740,9 +6180,10 @@
|
|
|
5740
6180
|
.sk-menu-content {
|
|
5741
6181
|
--sk-menu-color-base: var(--sk-neutral-base);
|
|
5742
6182
|
--sk-menu-fg: var(--sk-neutral-text);
|
|
6183
|
+
position: relative;
|
|
5743
6184
|
min-width: 12rem;
|
|
5744
6185
|
padding: var(--sk-space-xs);
|
|
5745
|
-
z-index:
|
|
6186
|
+
z-index: var(--sk-z-dropdown);
|
|
5746
6187
|
}
|
|
5747
6188
|
@supports (corner-shape: bevel) {
|
|
5748
6189
|
.sk-menu-content {
|
|
@@ -5837,6 +6278,7 @@
|
|
|
5837
6278
|
--sk-menu-fg: var(--sk-red-text);
|
|
5838
6279
|
}
|
|
5839
6280
|
.sk-menu-item {
|
|
6281
|
+
position: relative;
|
|
5840
6282
|
display: flex;
|
|
5841
6283
|
align-items: center;
|
|
5842
6284
|
justify-content: space-between;
|
|
@@ -5848,6 +6290,11 @@
|
|
|
5848
6290
|
outline: none;
|
|
5849
6291
|
user-select: none;
|
|
5850
6292
|
}
|
|
6293
|
+
@media (pointer: coarse) {
|
|
6294
|
+
.sk-menu-item {
|
|
6295
|
+
min-height: 44px;
|
|
6296
|
+
}
|
|
6297
|
+
}
|
|
5851
6298
|
@supports (corner-shape: bevel) {
|
|
5852
6299
|
.sk-menu-item {
|
|
5853
6300
|
border: var(--sk-border-width-thin) solid transparent;
|
|
@@ -5961,7 +6408,7 @@
|
|
|
5961
6408
|
position: fixed;
|
|
5962
6409
|
inset: 0;
|
|
5963
6410
|
background: oklch(0% 0 0deg / 0.75);
|
|
5964
|
-
z-index:
|
|
6411
|
+
z-index: var(--sk-z-modal-scrim);
|
|
5965
6412
|
backdrop-filter: blur(2px);
|
|
5966
6413
|
}
|
|
5967
6414
|
.sk-modal-overlay[data-state=open] {
|
|
@@ -6002,7 +6449,7 @@
|
|
|
6002
6449
|
top: 50%;
|
|
6003
6450
|
left: 50%;
|
|
6004
6451
|
transform: translate(-50%, -50%);
|
|
6005
|
-
z-index:
|
|
6452
|
+
z-index: var(--sk-z-modal);
|
|
6006
6453
|
display: flex;
|
|
6007
6454
|
flex-direction: column;
|
|
6008
6455
|
max-height: 85vh;
|
|
@@ -6264,6 +6711,14 @@
|
|
|
6264
6711
|
transform: translate(-50%, -48%) scale(0.96);
|
|
6265
6712
|
}
|
|
6266
6713
|
}
|
|
6714
|
+
@media (prefers-reduced-motion: reduce) {
|
|
6715
|
+
.sk-modal-overlay[data-state=open],
|
|
6716
|
+
.sk-modal-overlay[data-state=closed],
|
|
6717
|
+
.sk-modal-content[data-state=open],
|
|
6718
|
+
.sk-modal-content[data-state=closed] {
|
|
6719
|
+
animation: none;
|
|
6720
|
+
}
|
|
6721
|
+
}
|
|
6267
6722
|
.sk-navbar {
|
|
6268
6723
|
--sk-navbar-padding-y: 0.75rem;
|
|
6269
6724
|
--sk-navbar-padding-x: 1rem;
|
|
@@ -6328,17 +6783,21 @@
|
|
|
6328
6783
|
.sk-navbar.sk-sticky {
|
|
6329
6784
|
position: sticky;
|
|
6330
6785
|
top: 0;
|
|
6331
|
-
z-index:
|
|
6786
|
+
z-index: var(--sk-z-sticky);
|
|
6332
6787
|
}
|
|
6333
6788
|
.sk-navbar .sk-navbar-content {
|
|
6334
6789
|
display: flex;
|
|
6335
6790
|
align-items: center;
|
|
6336
|
-
|
|
6337
|
-
gap: 2rem;
|
|
6791
|
+
gap: 1rem;
|
|
6338
6792
|
padding: var(--sk-navbar-padding-y) var(--sk-navbar-padding-x);
|
|
6339
6793
|
max-width: 1920px;
|
|
6340
6794
|
margin: 0 auto;
|
|
6341
6795
|
}
|
|
6796
|
+
.sk-navbar .sk-navbar-leading {
|
|
6797
|
+
display: flex;
|
|
6798
|
+
align-items: center;
|
|
6799
|
+
flex-shrink: 0;
|
|
6800
|
+
}
|
|
6342
6801
|
.sk-navbar .sk-navbar-brand {
|
|
6343
6802
|
display: flex;
|
|
6344
6803
|
align-items: center;
|
|
@@ -6349,13 +6808,13 @@
|
|
|
6349
6808
|
color: inherit;
|
|
6350
6809
|
}
|
|
6351
6810
|
.sk-navbar .sk-navbar-brand a:hover h1 {
|
|
6352
|
-
color: var(--sk-
|
|
6811
|
+
color: var(--sk-navbar-color-base);
|
|
6353
6812
|
}
|
|
6354
6813
|
.sk-navbar .sk-navbar-brand h1 {
|
|
6355
6814
|
margin: 0;
|
|
6356
6815
|
font-size: 1.5rem;
|
|
6357
6816
|
font-weight: 600;
|
|
6358
|
-
color:
|
|
6817
|
+
color: inherit;
|
|
6359
6818
|
transition: color var(--sk-transition-fast);
|
|
6360
6819
|
}
|
|
6361
6820
|
.sk-navbar .sk-navbar-nav {
|
|
@@ -6389,6 +6848,7 @@
|
|
|
6389
6848
|
justify-content: flex-end;
|
|
6390
6849
|
gap: 1rem;
|
|
6391
6850
|
flex-shrink: 0;
|
|
6851
|
+
margin-left: auto;
|
|
6392
6852
|
}
|
|
6393
6853
|
.sk-navbar.sk-neutral {
|
|
6394
6854
|
--sk-navbar-color-base: var(--sk-neutral-base);
|
|
@@ -6783,6 +7243,7 @@
|
|
|
6783
7243
|
opacity: 0.5;
|
|
6784
7244
|
}
|
|
6785
7245
|
.sk-number-input-increment {
|
|
7246
|
+
position: relative;
|
|
6786
7247
|
border-bottom: var(--sk-border-width-thin) solid var(--sk-number-input-color-base);
|
|
6787
7248
|
}
|
|
6788
7249
|
@supports (corner-shape: bevel) {
|
|
@@ -6816,9 +7277,20 @@
|
|
|
6816
7277
|
--sk-page-header-height: auto;
|
|
6817
7278
|
--sk-page-footer-height: auto;
|
|
6818
7279
|
--sk-page-sidebar-width: 16rem;
|
|
7280
|
+
--sk-page-aside-width: 16rem;
|
|
7281
|
+
--sk-page-drawer-z-index: var(--sk-z-drawer);
|
|
7282
|
+
--sk-page-min-height: 100vh;
|
|
7283
|
+
--sk-page-gap: 1rem;
|
|
7284
|
+
}
|
|
7285
|
+
.sk-page.sk-flush {
|
|
7286
|
+
--sk-page-gap: 0;
|
|
7287
|
+
}
|
|
7288
|
+
.sk-page {
|
|
7289
|
+
position: relative;
|
|
7290
|
+
isolation: isolate;
|
|
6819
7291
|
display: flex;
|
|
6820
7292
|
flex-direction: column;
|
|
6821
|
-
min-height:
|
|
7293
|
+
min-height: var(--sk-page-min-height);
|
|
6822
7294
|
background: var(--sk-surface-base);
|
|
6823
7295
|
color: var(--sk-text-primary);
|
|
6824
7296
|
}
|
|
@@ -6830,23 +7302,62 @@
|
|
|
6830
7302
|
position: sticky;
|
|
6831
7303
|
top: 0;
|
|
6832
7304
|
}
|
|
7305
|
+
.sk-page .sk-page-subheader {
|
|
7306
|
+
flex-shrink: 0;
|
|
7307
|
+
z-index: 9;
|
|
7308
|
+
}
|
|
6833
7309
|
.sk-page .sk-page-main {
|
|
6834
7310
|
display: flex;
|
|
6835
7311
|
flex: 1;
|
|
6836
7312
|
min-height: 0;
|
|
7313
|
+
padding: var(--sk-page-gap);
|
|
7314
|
+
gap: var(--sk-page-gap);
|
|
6837
7315
|
}
|
|
6838
7316
|
.sk-page .sk-page-sidebar {
|
|
6839
7317
|
flex-shrink: 0;
|
|
6840
|
-
|
|
6841
|
-
|
|
7318
|
+
display: flex;
|
|
7319
|
+
flex-direction: column;
|
|
7320
|
+
min-height: 0;
|
|
6842
7321
|
}
|
|
6843
|
-
.sk-page
|
|
6844
|
-
flex
|
|
7322
|
+
.sk-page .sk-page-center {
|
|
7323
|
+
flex: 1;
|
|
7324
|
+
min-width: 0;
|
|
7325
|
+
display: flex;
|
|
7326
|
+
flex-direction: column;
|
|
7327
|
+
}
|
|
7328
|
+
.sk-page .sk-page-center .sk-page-main-header,
|
|
7329
|
+
.sk-page .sk-page-center .sk-page-main-footer {
|
|
7330
|
+
flex-shrink: 0;
|
|
6845
7331
|
}
|
|
6846
7332
|
.sk-page .sk-page-content {
|
|
6847
7333
|
flex: 1;
|
|
6848
|
-
min-
|
|
7334
|
+
min-height: 0;
|
|
7335
|
+
overflow-y: auto;
|
|
7336
|
+
}
|
|
7337
|
+
.sk-page .sk-page-aside {
|
|
7338
|
+
flex-shrink: 0;
|
|
7339
|
+
display: flex;
|
|
7340
|
+
flex-direction: column;
|
|
7341
|
+
min-height: 0;
|
|
7342
|
+
}
|
|
7343
|
+
.sk-page .sk-page-sidebar-header,
|
|
7344
|
+
.sk-page .sk-page-sidebar-footer,
|
|
7345
|
+
.sk-page .sk-page-aside-header,
|
|
7346
|
+
.sk-page .sk-page-aside-footer {
|
|
7347
|
+
flex-shrink: 0;
|
|
7348
|
+
}
|
|
7349
|
+
.sk-page .sk-page-sidebar-body,
|
|
7350
|
+
.sk-page .sk-page-aside-body {
|
|
7351
|
+
flex: 1;
|
|
7352
|
+
min-height: 0;
|
|
6849
7353
|
overflow-y: auto;
|
|
7354
|
+
display: flex;
|
|
7355
|
+
flex-direction: column;
|
|
7356
|
+
}
|
|
7357
|
+
.sk-page .sk-page-sidebar-body > *,
|
|
7358
|
+
.sk-page .sk-page-aside-body > * {
|
|
7359
|
+
flex: 1;
|
|
7360
|
+
min-height: 0;
|
|
6850
7361
|
}
|
|
6851
7362
|
.sk-page .sk-page-footer {
|
|
6852
7363
|
flex-shrink: 0;
|
|
@@ -6856,6 +7367,73 @@
|
|
|
6856
7367
|
position: sticky;
|
|
6857
7368
|
bottom: 0;
|
|
6858
7369
|
}
|
|
7370
|
+
.sk-page .sk-page-drawer {
|
|
7371
|
+
position: fixed;
|
|
7372
|
+
top: 0;
|
|
7373
|
+
bottom: 0;
|
|
7374
|
+
max-height: 100dvh;
|
|
7375
|
+
width: var(--sk-page-sidebar-width);
|
|
7376
|
+
max-width: calc(100vw - 3rem);
|
|
7377
|
+
z-index: var(--sk-z-drawer);
|
|
7378
|
+
background: transparent;
|
|
7379
|
+
display: flex;
|
|
7380
|
+
flex-direction: column;
|
|
7381
|
+
}
|
|
7382
|
+
.sk-page .sk-page-drawer.sk-page-drawer-left {
|
|
7383
|
+
left: 0;
|
|
7384
|
+
}
|
|
7385
|
+
.sk-page .sk-page-drawer.sk-page-drawer-right {
|
|
7386
|
+
right: 0;
|
|
7387
|
+
width: var(--sk-page-aside-width);
|
|
7388
|
+
}
|
|
7389
|
+
.sk-page .sk-page-drawer:focus {
|
|
7390
|
+
outline: none;
|
|
7391
|
+
}
|
|
7392
|
+
.sk-page .sk-page-drawer-backdrop {
|
|
7393
|
+
position: fixed;
|
|
7394
|
+
inset: 0;
|
|
7395
|
+
z-index: var(--sk-z-drawer-scrim);
|
|
7396
|
+
background: oklch(0% 0 0deg / 0.6);
|
|
7397
|
+
backdrop-filter: blur(2px);
|
|
7398
|
+
}
|
|
7399
|
+
.sk-page-drawer-left-enter-active,
|
|
7400
|
+
.sk-page-drawer-left-leave-active,
|
|
7401
|
+
.sk-page-drawer-right-enter-active,
|
|
7402
|
+
.sk-page-drawer-right-leave-active {
|
|
7403
|
+
transition: transform var(--sk-transition-duration-normal) var(--sk-transition-easing);
|
|
7404
|
+
}
|
|
7405
|
+
.sk-page-drawer-left-enter-from,
|
|
7406
|
+
.sk-page-drawer-left-leave-to {
|
|
7407
|
+
transform: translateX(-100%);
|
|
7408
|
+
}
|
|
7409
|
+
.sk-page-drawer-right-enter-from,
|
|
7410
|
+
.sk-page-drawer-right-leave-to {
|
|
7411
|
+
transform: translateX(100%);
|
|
7412
|
+
}
|
|
7413
|
+
.sk-page-drawer-backdrop-enter-active,
|
|
7414
|
+
.sk-page-drawer-backdrop-leave-active {
|
|
7415
|
+
transition: opacity var(--sk-transition-duration-normal) var(--sk-transition-easing);
|
|
7416
|
+
}
|
|
7417
|
+
.sk-page-drawer-backdrop-enter-from,
|
|
7418
|
+
.sk-page-drawer-backdrop-leave-to {
|
|
7419
|
+
opacity: 0;
|
|
7420
|
+
}
|
|
7421
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7422
|
+
.sk-page-drawer-left-enter-active,
|
|
7423
|
+
.sk-page-drawer-left-leave-active,
|
|
7424
|
+
.sk-page-drawer-right-enter-active,
|
|
7425
|
+
.sk-page-drawer-right-leave-active,
|
|
7426
|
+
.sk-page-drawer-backdrop-enter-active,
|
|
7427
|
+
.sk-page-drawer-backdrop-leave-active {
|
|
7428
|
+
transition: none;
|
|
7429
|
+
}
|
|
7430
|
+
.sk-page-drawer-left-enter-from,
|
|
7431
|
+
.sk-page-drawer-left-leave-to,
|
|
7432
|
+
.sk-page-drawer-right-enter-from,
|
|
7433
|
+
.sk-page-drawer-right-leave-to {
|
|
7434
|
+
transform: none;
|
|
7435
|
+
}
|
|
7436
|
+
}
|
|
6859
7437
|
.sk-pagination {
|
|
6860
7438
|
display: flex;
|
|
6861
7439
|
align-items: center;
|
|
@@ -6959,6 +7537,7 @@
|
|
|
6959
7537
|
}
|
|
6960
7538
|
}
|
|
6961
7539
|
.sk-pagination-item {
|
|
7540
|
+
position: relative;
|
|
6962
7541
|
display: inline-flex;
|
|
6963
7542
|
align-items: center;
|
|
6964
7543
|
justify-content: center;
|
|
@@ -6972,6 +7551,14 @@
|
|
|
6972
7551
|
line-height: 1.5;
|
|
6973
7552
|
cursor: pointer;
|
|
6974
7553
|
user-select: none;
|
|
7554
|
+
}
|
|
7555
|
+
@media (pointer: coarse) {
|
|
7556
|
+
.sk-pagination-item {
|
|
7557
|
+
min-width: 44px;
|
|
7558
|
+
min-height: 44px;
|
|
7559
|
+
}
|
|
7560
|
+
}
|
|
7561
|
+
.sk-pagination-item {
|
|
6975
7562
|
transition: color var(--sk-pagination-transition-duration) var(--sk-pagination-transition-easing), background-color var(--sk-pagination-transition-duration) var(--sk-pagination-transition-easing), border-color var(--sk-pagination-transition-duration) var(--sk-pagination-transition-easing), box-shadow var(--sk-pagination-transition-duration) var(--sk-pagination-transition-easing);
|
|
6976
7563
|
}
|
|
6977
7564
|
@supports (corner-shape: bevel) {
|
|
@@ -7364,7 +7951,7 @@
|
|
|
7364
7951
|
.sk-panel.sk-no-border::after {
|
|
7365
7952
|
display: none;
|
|
7366
7953
|
}
|
|
7367
|
-
.sk-panel:has(.sk-panel-scroll-content) {
|
|
7954
|
+
.sk-panel:has(> .sk-panel-scroll-content) {
|
|
7368
7955
|
padding: 0;
|
|
7369
7956
|
display: flex;
|
|
7370
7957
|
flex-direction: column;
|
|
@@ -7588,7 +8175,7 @@
|
|
|
7588
8175
|
box-shadow: var(--sk-shadow-lg), inset 0 0 24px oklch(from var(--sk-popover-color-base) l c h/0.15), 0 0 12px oklch(from var(--sk-popover-color-base) l c h/0.3);
|
|
7589
8176
|
max-width: 24rem;
|
|
7590
8177
|
min-width: 12rem;
|
|
7591
|
-
z-index:
|
|
8178
|
+
z-index: var(--sk-z-popover);
|
|
7592
8179
|
}
|
|
7593
8180
|
.sk-popover-content[data-state=open] {
|
|
7594
8181
|
animation: sk-popover-show var(--sk-transition-duration-fast) ease-out;
|
|
@@ -7738,6 +8325,12 @@
|
|
|
7738
8325
|
transform: scale(0.96);
|
|
7739
8326
|
}
|
|
7740
8327
|
}
|
|
8328
|
+
@media (prefers-reduced-motion: reduce) {
|
|
8329
|
+
.sk-popover-content[data-state=open],
|
|
8330
|
+
.sk-popover-content[data-state=closed] {
|
|
8331
|
+
animation: none;
|
|
8332
|
+
}
|
|
8333
|
+
}
|
|
7741
8334
|
.sk-progress {
|
|
7742
8335
|
--sk-progress-color-base: var(--sk-primary-base);
|
|
7743
8336
|
--sk-progress-track-bg: oklch(from var(--sk-neutral-base) l c h / 0.15);
|
|
@@ -7903,6 +8496,11 @@
|
|
|
7903
8496
|
transform: translateX(400%);
|
|
7904
8497
|
}
|
|
7905
8498
|
}
|
|
8499
|
+
@media (prefers-reduced-motion: reduce) {
|
|
8500
|
+
.sk-progress-indicator-indeterminate {
|
|
8501
|
+
animation-duration: 8s;
|
|
8502
|
+
}
|
|
8503
|
+
}
|
|
7906
8504
|
.sk-radio-group {
|
|
7907
8505
|
display: flex;
|
|
7908
8506
|
gap: var(--sk-space-md);
|
|
@@ -7919,6 +8517,11 @@
|
|
|
7919
8517
|
gap: var(--sk-space-xs);
|
|
7920
8518
|
cursor: pointer;
|
|
7921
8519
|
}
|
|
8520
|
+
@media (pointer: coarse) {
|
|
8521
|
+
.sk-radio-wrapper {
|
|
8522
|
+
min-height: 44px;
|
|
8523
|
+
}
|
|
8524
|
+
}
|
|
7922
8525
|
.sk-radio-wrapper.sk-disabled {
|
|
7923
8526
|
cursor: not-allowed;
|
|
7924
8527
|
opacity: 0.5;
|
|
@@ -7927,6 +8530,7 @@
|
|
|
7927
8530
|
--sk-radio-color-base: var(--sk-neutral-base);
|
|
7928
8531
|
--sk-radio-fg: var(--sk-neutral-text);
|
|
7929
8532
|
--sk-radio-cut: 0.3rem;
|
|
8533
|
+
position: relative;
|
|
7930
8534
|
display: inline-flex;
|
|
7931
8535
|
align-items: center;
|
|
7932
8536
|
justify-content: center;
|
|
@@ -8066,6 +8670,7 @@
|
|
|
8066
8670
|
cursor: not-allowed;
|
|
8067
8671
|
}
|
|
8068
8672
|
.sk-radio-indicator {
|
|
8673
|
+
position: relative;
|
|
8069
8674
|
display: flex;
|
|
8070
8675
|
align-items: center;
|
|
8071
8676
|
justify-content: center;
|
|
@@ -8108,6 +8713,7 @@
|
|
|
8108
8713
|
--sk-scroll-area-thumb-color: var(--sk-scroll-area-color-base);
|
|
8109
8714
|
--sk-scroll-area-track-color: oklch(from var(--sk-neutral-base) l c h / 0.08);
|
|
8110
8715
|
--sk-scroll-area-size: 0.5rem;
|
|
8716
|
+
--sk-scroll-area-fade: 1.5rem;
|
|
8111
8717
|
position: relative;
|
|
8112
8718
|
overflow: hidden;
|
|
8113
8719
|
}
|
|
@@ -8132,6 +8738,16 @@
|
|
|
8132
8738
|
.sk-scroll-area.sk-danger {
|
|
8133
8739
|
--sk-scroll-area-color-base: var(--sk-danger-base);
|
|
8134
8740
|
}
|
|
8741
|
+
.sk-scroll-area.sk-fade.sk-vertical .sk-scroll-area-viewport {
|
|
8742
|
+
mask-image: linear-gradient(to bottom, transparent 0, black var(--sk-scroll-area-fade), black calc(100% - var(--sk-scroll-area-fade)), transparent 100%);
|
|
8743
|
+
}
|
|
8744
|
+
.sk-scroll-area.sk-fade.sk-horizontal .sk-scroll-area-viewport {
|
|
8745
|
+
mask-image: linear-gradient(to right, transparent 0, black var(--sk-scroll-area-fade), black calc(100% - var(--sk-scroll-area-fade)), transparent 100%);
|
|
8746
|
+
}
|
|
8747
|
+
.sk-scroll-area.sk-fade.sk-both .sk-scroll-area-viewport {
|
|
8748
|
+
mask-image: linear-gradient(to bottom, transparent 0, black var(--sk-scroll-area-fade), black calc(100% - var(--sk-scroll-area-fade)), transparent 100%), linear-gradient(to right, transparent 0, black var(--sk-scroll-area-fade), black calc(100% - var(--sk-scroll-area-fade)), transparent 100%);
|
|
8749
|
+
mask-composite: intersect;
|
|
8750
|
+
}
|
|
8135
8751
|
.sk-scroll-area-viewport {
|
|
8136
8752
|
width: 100%;
|
|
8137
8753
|
height: 100%;
|
|
@@ -8254,6 +8870,7 @@
|
|
|
8254
8870
|
--sk-select-fg: var(--sk-red-text);
|
|
8255
8871
|
}
|
|
8256
8872
|
.sk-select-trigger {
|
|
8873
|
+
position: relative;
|
|
8257
8874
|
display: flex;
|
|
8258
8875
|
align-items: center;
|
|
8259
8876
|
gap: var(--sk-space-sm);
|
|
@@ -8350,7 +8967,7 @@
|
|
|
8350
8967
|
max-height: 20rem;
|
|
8351
8968
|
overflow: auto;
|
|
8352
8969
|
padding: var(--sk-space-xs);
|
|
8353
|
-
z-index:
|
|
8970
|
+
z-index: var(--sk-z-dropdown);
|
|
8354
8971
|
}
|
|
8355
8972
|
@supports (corner-shape: bevel) {
|
|
8356
8973
|
.sk-select-content {
|
|
@@ -8445,6 +9062,7 @@
|
|
|
8445
9062
|
--sk-menu-fg: var(--sk-red-text);
|
|
8446
9063
|
}
|
|
8447
9064
|
.sk-select-item {
|
|
9065
|
+
position: relative;
|
|
8448
9066
|
display: flex;
|
|
8449
9067
|
align-items: center;
|
|
8450
9068
|
justify-content: space-between;
|
|
@@ -8510,6 +9128,14 @@
|
|
|
8510
9128
|
.sk-sidebar {
|
|
8511
9129
|
width: var(--sk-sidebar-width, 180px);
|
|
8512
9130
|
flex-shrink: 0;
|
|
9131
|
+
display: flex;
|
|
9132
|
+
flex-direction: column;
|
|
9133
|
+
}
|
|
9134
|
+
.sk-sidebar .sk-sidebar-panel {
|
|
9135
|
+
flex: 1 1 auto;
|
|
9136
|
+
min-height: 0;
|
|
9137
|
+
}
|
|
9138
|
+
.sk-sidebar {
|
|
8513
9139
|
--sk-sidebar-color-base: var(--sk-neutral-base);
|
|
8514
9140
|
--sk-sidebar-item-bg: color-mix(
|
|
8515
9141
|
in oklch,
|
|
@@ -8518,26 +9144,32 @@
|
|
|
8518
9144
|
);
|
|
8519
9145
|
--sk-sidebar-item-hover-bg: color-mix(in oklch, var(--sk-sidebar-item-bg) 85%, white 15%);
|
|
8520
9146
|
--sk-sidebar-item-hover-text: color-mix(in oklch, var(--sk-sidebar-color-base), white 30%);
|
|
8521
|
-
--sk-sidebar-item-active-text:
|
|
8522
|
-
--sk-sidebar-item-active-bg: var(--sk-sidebar-item-bg);
|
|
9147
|
+
--sk-sidebar-item-active-text: var(--sk-neutral-text);
|
|
9148
|
+
--sk-sidebar-item-active-bg: color-mix(in oklch, var(--sk-sidebar-item-bg) 92%, white 8%);
|
|
8523
9149
|
}
|
|
8524
9150
|
.sk-sidebar.sk-primary {
|
|
8525
9151
|
--sk-sidebar-color-base: var(--sk-primary-base);
|
|
9152
|
+
--sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
|
|
8526
9153
|
}
|
|
8527
9154
|
.sk-sidebar.sk-accent {
|
|
8528
9155
|
--sk-sidebar-color-base: var(--sk-accent-base);
|
|
9156
|
+
--sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
|
|
8529
9157
|
}
|
|
8530
9158
|
.sk-sidebar.sk-info {
|
|
8531
9159
|
--sk-sidebar-color-base: var(--sk-info-base);
|
|
9160
|
+
--sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
|
|
8532
9161
|
}
|
|
8533
9162
|
.sk-sidebar.sk-success {
|
|
8534
9163
|
--sk-sidebar-color-base: var(--sk-success-base);
|
|
9164
|
+
--sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
|
|
8535
9165
|
}
|
|
8536
9166
|
.sk-sidebar.sk-warning {
|
|
8537
9167
|
--sk-sidebar-color-base: var(--sk-warning-base);
|
|
9168
|
+
--sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
|
|
8538
9169
|
}
|
|
8539
9170
|
.sk-sidebar.sk-danger {
|
|
8540
9171
|
--sk-sidebar-color-base: var(--sk-danger-base);
|
|
9172
|
+
--sk-sidebar-item-active-text: var(--sk-sidebar-color-base);
|
|
8541
9173
|
}
|
|
8542
9174
|
.sk-sidebar .sk-sidebar-nav {
|
|
8543
9175
|
display: flex;
|
|
@@ -8567,6 +9199,13 @@
|
|
|
8567
9199
|
cursor: pointer;
|
|
8568
9200
|
display: block;
|
|
8569
9201
|
}
|
|
9202
|
+
@media (pointer: coarse) {
|
|
9203
|
+
.sk-sidebar:not(.sk-dense) .sk-sidebar-item {
|
|
9204
|
+
min-height: 44px;
|
|
9205
|
+
display: flex;
|
|
9206
|
+
align-items: center;
|
|
9207
|
+
}
|
|
9208
|
+
}
|
|
8570
9209
|
.sk-sidebar-item:hover {
|
|
8571
9210
|
background: var(--sk-sidebar-item-hover-bg);
|
|
8572
9211
|
color: var(--sk-sidebar-item-hover-text);
|
|
@@ -8576,23 +9215,26 @@
|
|
|
8576
9215
|
background: var(--sk-sidebar-item-active-bg);
|
|
8577
9216
|
color: var(--sk-sidebar-item-active-text);
|
|
8578
9217
|
font-weight: 600;
|
|
8579
|
-
clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
|
|
8580
9218
|
}
|
|
8581
9219
|
.sk-sidebar-item.sk-active::before, .sk-sidebar-item.router-link-active::before {
|
|
8582
9220
|
content: "";
|
|
8583
9221
|
position: absolute;
|
|
8584
9222
|
inset: 0;
|
|
8585
9223
|
background: var(--sk-sidebar-color-base);
|
|
8586
|
-
clip-path: polygon(0%
|
|
9224
|
+
clip-path: polygon(0% 0%, 2px 0%, 2px 100%, 0% 100%);
|
|
8587
9225
|
}
|
|
8588
|
-
.sk-sidebar-
|
|
8589
|
-
|
|
9226
|
+
.sk-sidebar-item.sk-active:hover, .sk-sidebar-item.router-link-active:hover {
|
|
9227
|
+
background: var(--sk-sidebar-item-hover-bg);
|
|
9228
|
+
clip-path: none;
|
|
8590
9229
|
}
|
|
8591
|
-
.sk-sidebar-
|
|
9230
|
+
.sk-sidebar-item.sk-active:hover::before, .sk-sidebar-item.router-link-active:hover::before {
|
|
9231
|
+
background: var(--sk-sidebar-item-hover-text);
|
|
9232
|
+
}
|
|
9233
|
+
.sk-sidebar-right .sk-sidebar-item:hover {
|
|
8592
9234
|
clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 10px, 100% 100%, 10px 100%, 0% calc(100% - 10px));
|
|
8593
9235
|
}
|
|
8594
9236
|
.sk-sidebar-right .sk-sidebar-item.sk-active::before, .sk-sidebar-right .sk-sidebar-item.router-link-active::before {
|
|
8595
|
-
clip-path: polygon(100%
|
|
9237
|
+
clip-path: polygon(100% 0%, calc(100% - 2px) 0%, calc(100% - 2px) 100%, 100% 100%);
|
|
8596
9238
|
}
|
|
8597
9239
|
.sk-skeleton {
|
|
8598
9240
|
--sk-skeleton-base: oklch(from var(--sk-neutral-base) l c h / 0.12);
|
|
@@ -8649,6 +9291,13 @@
|
|
|
8649
9291
|
opacity: 0.4;
|
|
8650
9292
|
}
|
|
8651
9293
|
}
|
|
9294
|
+
@media (prefers-reduced-motion: reduce) {
|
|
9295
|
+
.sk-skeleton,
|
|
9296
|
+
.sk-skeleton::after,
|
|
9297
|
+
.sk-skeleton-shimmer::after {
|
|
9298
|
+
animation: none;
|
|
9299
|
+
}
|
|
9300
|
+
}
|
|
8652
9301
|
.sk-slider {
|
|
8653
9302
|
--sk-slider-color-base: var(--sk-primary-base);
|
|
8654
9303
|
--sk-slider-thumb-color: var(--sk-slider-color-base);
|
|
@@ -8852,6 +9501,7 @@
|
|
|
8852
9501
|
}
|
|
8853
9502
|
}
|
|
8854
9503
|
.sk-slider-thumb {
|
|
9504
|
+
position: relative;
|
|
8855
9505
|
display: block;
|
|
8856
9506
|
width: var(--sk-slider-thumb-size);
|
|
8857
9507
|
height: var(--sk-slider-thumb-size);
|
|
@@ -9119,6 +9769,11 @@
|
|
|
9119
9769
|
opacity: 0.3;
|
|
9120
9770
|
}
|
|
9121
9771
|
}
|
|
9772
|
+
@media (prefers-reduced-motion: reduce) {
|
|
9773
|
+
.sk-spinner * {
|
|
9774
|
+
animation-duration: 8s !important;
|
|
9775
|
+
}
|
|
9776
|
+
}
|
|
9122
9777
|
.sk-splitter {
|
|
9123
9778
|
--sk-splitter-color-base: var(--sk-neutral-base);
|
|
9124
9779
|
--sk-splitter-handle-color: var(--sk-splitter-color-base);
|
|
@@ -9233,6 +9888,11 @@
|
|
|
9233
9888
|
gap: var(--sk-switch-label-gap);
|
|
9234
9889
|
cursor: pointer;
|
|
9235
9890
|
}
|
|
9891
|
+
@media (pointer: coarse) {
|
|
9892
|
+
.sk-switch-wrapper {
|
|
9893
|
+
min-height: 44px;
|
|
9894
|
+
}
|
|
9895
|
+
}
|
|
9236
9896
|
.sk-switch-wrapper:has(.sk-switch:disabled) {
|
|
9237
9897
|
cursor: not-allowed;
|
|
9238
9898
|
}
|
|
@@ -9814,6 +10474,7 @@
|
|
|
9814
10474
|
.sk-table-wrapper {
|
|
9815
10475
|
--sk-table-border-color: color-mix(in oklch, var(--sk-neutral-base), black 20%);
|
|
9816
10476
|
--sk-table-corner-cut: 1rem;
|
|
10477
|
+
position: relative;
|
|
9817
10478
|
overflow-x: auto;
|
|
9818
10479
|
}
|
|
9819
10480
|
@supports (corner-shape: bevel) {
|
|
@@ -11710,6 +12371,13 @@
|
|
|
11710
12371
|
border: none;
|
|
11711
12372
|
border-radius: 0;
|
|
11712
12373
|
cursor: pointer;
|
|
12374
|
+
}
|
|
12375
|
+
@media (pointer: coarse) {
|
|
12376
|
+
.sk-tab {
|
|
12377
|
+
min-height: 44px;
|
|
12378
|
+
}
|
|
12379
|
+
}
|
|
12380
|
+
.sk-tab {
|
|
11713
12381
|
transition: color var(--sk-tab-transition-duration) var(--sk-tab-transition-easing), background-color var(--sk-tab-transition-duration) var(--sk-tab-transition-easing), border-color var(--sk-tab-transition-duration) var(--sk-tab-transition-easing);
|
|
11714
12382
|
white-space: nowrap;
|
|
11715
12383
|
user-select: none;
|
|
@@ -11969,6 +12637,7 @@
|
|
|
11969
12637
|
--sk-tag-ghost-opacity: 0.35;
|
|
11970
12638
|
}
|
|
11971
12639
|
.sk-tag {
|
|
12640
|
+
position: relative;
|
|
11972
12641
|
display: inline-flex;
|
|
11973
12642
|
align-items: center;
|
|
11974
12643
|
justify-content: center;
|
|
@@ -12802,6 +13471,7 @@
|
|
|
12802
13471
|
--sk-tags-input-fg: var(--sk-red-text);
|
|
12803
13472
|
}
|
|
12804
13473
|
.sk-tags-input-container {
|
|
13474
|
+
position: relative;
|
|
12805
13475
|
display: flex;
|
|
12806
13476
|
flex-wrap: wrap;
|
|
12807
13477
|
align-items: center;
|
|
@@ -12915,6 +13585,7 @@
|
|
|
12915
13585
|
--sk-textarea-color-base: var(--sk-neutral-base);
|
|
12916
13586
|
--sk-textarea-fg: var(--sk-neutral-text);
|
|
12917
13587
|
--sk-textarea-cut: 0.5rem;
|
|
13588
|
+
position: relative;
|
|
12918
13589
|
display: block;
|
|
12919
13590
|
width: 100%;
|
|
12920
13591
|
font-family: var(--sk-font-family-base);
|
|
@@ -13064,7 +13735,7 @@
|
|
|
13064
13735
|
}
|
|
13065
13736
|
.sk-toast-viewport {
|
|
13066
13737
|
position: fixed;
|
|
13067
|
-
z-index:
|
|
13738
|
+
z-index: var(--sk-z-toast);
|
|
13068
13739
|
display: flex;
|
|
13069
13740
|
flex-direction: column;
|
|
13070
13741
|
gap: var(--sk-space-sm);
|
|
@@ -13122,6 +13793,7 @@
|
|
|
13122
13793
|
#000 46.25%
|
|
13123
13794
|
);
|
|
13124
13795
|
--sk-toast-border-color: var(--sk-toast-color-base);
|
|
13796
|
+
position: relative;
|
|
13125
13797
|
display: flex;
|
|
13126
13798
|
align-items: center;
|
|
13127
13799
|
gap: var(--sk-toast-gap);
|
|
@@ -13279,6 +13951,13 @@
|
|
|
13279
13951
|
transform: translateX(calc(100% + var(--sk-space-md)));
|
|
13280
13952
|
}
|
|
13281
13953
|
}
|
|
13954
|
+
@media (prefers-reduced-motion: reduce) {
|
|
13955
|
+
.sk-toast-root[data-state=open],
|
|
13956
|
+
.sk-toast-root[data-state=closed],
|
|
13957
|
+
.sk-toast-root[data-swipe=end] {
|
|
13958
|
+
animation: none;
|
|
13959
|
+
}
|
|
13960
|
+
}
|
|
13282
13961
|
.sk-toolbar {
|
|
13283
13962
|
--sk-toolbar-color-base: var(--sk-neutral-base);
|
|
13284
13963
|
--sk-toolbar-fg: var(--sk-neutral-text);
|
|
@@ -13383,6 +14062,7 @@
|
|
|
13383
14062
|
--sk-toolbar-active: var(--sk-danger-active);
|
|
13384
14063
|
}
|
|
13385
14064
|
.sk-toolbar-button {
|
|
14065
|
+
position: relative;
|
|
13386
14066
|
display: flex;
|
|
13387
14067
|
align-items: center;
|
|
13388
14068
|
justify-content: center;
|
|
@@ -13445,6 +14125,7 @@
|
|
|
13445
14125
|
gap: 1px;
|
|
13446
14126
|
}
|
|
13447
14127
|
.sk-toolbar-toggle-item {
|
|
14128
|
+
position: relative;
|
|
13448
14129
|
display: flex;
|
|
13449
14130
|
align-items: center;
|
|
13450
14131
|
justify-content: center;
|
|
@@ -13566,7 +14247,7 @@
|
|
|
13566
14247
|
color: var(--sk-neutral-text);
|
|
13567
14248
|
box-shadow: var(--sk-shadow-md), 0 0 8px oklch(from var(--sk-tooltip-color-base) l c h/0.4);
|
|
13568
14249
|
max-width: 20rem;
|
|
13569
|
-
z-index:
|
|
14250
|
+
z-index: var(--sk-z-tooltip);
|
|
13570
14251
|
}
|
|
13571
14252
|
.sk-tooltip-content[data-state=delayed-open], .sk-tooltip-content[data-state=instant-open] {
|
|
13572
14253
|
animation: sk-tooltip-show var(--sk-transition-duration-fast) ease-out;
|
|
@@ -13665,6 +14346,11 @@
|
|
|
13665
14346
|
transform: scale(0.95);
|
|
13666
14347
|
}
|
|
13667
14348
|
}
|
|
14349
|
+
@media (prefers-reduced-motion: reduce) {
|
|
14350
|
+
.sk-tooltip-content[data-state] {
|
|
14351
|
+
animation: none;
|
|
14352
|
+
}
|
|
14353
|
+
}
|
|
13668
14354
|
.sk-tree-view {
|
|
13669
14355
|
--sk-tree-color-base: var(--sk-neutral-base);
|
|
13670
14356
|
--sk-tree-fg: var(--sk-neutral-text);
|
|
@@ -13713,6 +14399,13 @@
|
|
|
13713
14399
|
font-size: var(--sk-font-size-sm);
|
|
13714
14400
|
line-height: 1.5;
|
|
13715
14401
|
outline: none;
|
|
14402
|
+
}
|
|
14403
|
+
@media (pointer: coarse) {
|
|
14404
|
+
.sk-tree-item {
|
|
14405
|
+
min-height: 44px;
|
|
14406
|
+
}
|
|
14407
|
+
}
|
|
14408
|
+
.sk-tree-item {
|
|
13716
14409
|
transition: background var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
|
|
13717
14410
|
}
|
|
13718
14411
|
.sk-tree-item:hover:not([data-disabled]) {
|
|
@@ -14318,7 +15011,7 @@ kbd.sk-neutral {
|
|
|
14318
15011
|
|
|
14319
15012
|
@layer reset, tokens, base, components, utilities;.sk-panel[data-v-07c1642c]::after {
|
|
14320
15013
|
display: var(--v42b18398);
|
|
14321
|
-
}.vuelor-picker-root{--vuelor-primary
|
|
15014
|
+
}.vuelor-picker-root{--color-vuelor-primary: #0d99ff;--color-vuelor-surface: #ffffff;--color-vuelor-border: #e6e6e6;--color-vuelor-shadow-inner: #0000001a;--color-vuelor-input-bg: #f5f5f5;--color-vuelor-button-bg--hover: #0000000d;--opacity-vuelor-disabled: .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(--color-vuelor-shadow-inner);width:15rem;background-color:var(--color-vuelor-surface);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(--color-vuelor-button-bg--hover)}.vuelor-picker-eye-dropper:disabled{opacity:var(--opacity-vuelor-disabled);background-color:transparent;cursor:not-allowed}.vuelor-picker-eye-dropper:focus-within{outline-width:.0625rem;outline-style:solid;outline-color:var(--color-vuelor-primary)}.vuelor-picker-shared-thumb{display:block;width:1rem;height:1rem;border-radius:9999rem;border-width:.25rem;border-style:solid;border-color:var(--color-vuelor-surface);box-shadow:var(--shadow-vuelor-thumb)}.vuelor-picker-shared-thumb:focus{outline-width:.0625rem;outline-style:solid;outline-color:var(--color-vuelor-primary)}.vuelor-picker-canvas-root{position:relative;width:100%;height:13rem;touch-action:none;border-radius:.3125rem;box-shadow:var(--shadow-vuelor-inner)}.vuelor-picker-canvas-root[data-disabled]{pointer-events:none;opacity:var(--opacity-vuelor-disabled)}.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(--opacity-vuelor-disabled)}.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(--color-vuelor-border)}.vuelor-picker-input-group:hover:not([data-disabled]){outline-width:.0625rem}.vuelor-picker-input-group:focus-within{outline-width:.0625rem;outline-color:var(--color-vuelor-primary)}.vuelor-picker-input-group[data-disabled]{pointer-events:none;opacity:var(--opacity-vuelor-disabled);outline:none}.vuelor-picker-input-item{display:flex;flex:1 1 0%;align-items:center;padding-left:.25rem;padding-right:.25rem;gap:.25rem;background-color:var(--color-vuelor-input-bg)}.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}.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-root{position:relative;flex-grow:0;height:1rem;width:1rem;border-radius:20%;overflow:hidden}.vuelor-picker-swatch-root:disabled{opacity:var(--opacity-vuelor-disabled)}.vuelor-picker-swatch-root:focus-within{outline-width:.0625rem;outline-style:solid;outline-color:var(--color-vuelor-primary)}.vuelor-picker-swatch-alpha{position:absolute;top:0;right:0;height:100%;width:50%}
|
|
14322
15015
|
.vuelor-picker-root[data-v-adc9cbb2] {
|
|
14323
15016
|
width: 100%;
|
|
14324
15017
|
background: transparent;
|
|
@@ -14439,4 +15132,4 @@ kbd.sk-neutral {
|
|
|
14439
15132
|
}
|
|
14440
15133
|
.sk-color-picker-panel .vuelor-picker-swatch-base {
|
|
14441
15134
|
border-radius: 2px;
|
|
14442
|
-
}
|
|
15135
|
+
}/*$vite$:1*/
|