x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-26 00:31:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

feat(cssVar): add new CSS variables for font size and tooltip positioning

Browse Source 
Refactor styles for consistency and improved theming

- Updated context menu styles to use new spacing and surface mixins.
- Adjusted control styles to utilize touch hit size for better accessibility.
- Refined info panel padding and applied panel surface mixin for uniformity.
- Standardized mini player transitions and background colors.
- Introduced new mixins for panel surfaces and flyout animations.
- Enhanced notice padding and applied consistent spacing variables.
- Updated plugin styles to use new icon sizes and panel surface mixin.
- Improved progress bar styles with consistent surface and shadow properties.
- Refactored selector styles to utilize new surface mixin and flyout animations.
- Streamlined setting panel styles with consistent spacing and hover effects.
- Added new variables for spacing, surface colors, and icon sizes.
- Updated volume panel styles to use new spacing and flyout animations.

feat(cssVar): add new CSS variables for enhanced theming and layout

Refactor styles in ArtPlayer

- Updated transition properties across various LESS files to use the new `--art-ease-standard` variable for consistency.
- Added new CSS variables for mobile padding and border radius.
- Introduced shadow variables for different elevation levels.
- Minor adjustments to ensure proper formatting and consistency in LESS files, including adding missing newlines at the end of files.

refactor: replace art-text-muted mixin with direct font-size in setting.less

Refactor styles for context menu, info panel, and settings

- Updated font sizes to use the new variable `--art-font-size-sm` for consistency across context menus, info panels, and settings.
- Introduced a new mixin `.art-menu-item-base` to standardize menu item styles, including padding and hover effects.
- Adjusted padding and positioning for tooltip elements in the progress bar.
- Added new CSS variables for tip padding and offset to enhance maintainability and readability of styles.
This commit is contained in:
Harvey Zhao committed 2025-12-14 12:30:20 +08:00
1 parent 51d49f857a
commit 59e9a32ecb
33 files changed
+214 -118
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/style/artplayer.less
+1 -1
View File
@@ -59,4 +59,4 @@
color: var(--art-font-color);
text-decoration: none;
}
}
}
packages/artplayer/src/style/aspectRatio.less
+2 -1
View File
@@ -1,9 +1,10 @@
.art-video-player {
&[data-aspect-ratio] {
overflow: hidden;
.art-video {
object-fit: fill;
box-sizing: content-box;
}
}
}
}
packages/artplayer/src/style/backdrop.less
+2 -1
View File
@@ -1,4 +1,5 @@
.art-video-player.art-backdrop {
.art-contextmenus,
.art-info,
.art-settings,
@@ -7,4 +8,4 @@
.art-volume-inner {
.art-backdrop-filter();
}
}
}
packages/artplayer/src/style/bottom.less
+4 -3
View File
@@ -8,14 +8,14 @@
overflow: hidden;
pointer-events: none;
padding: 0 var(--art-padding);
transition: all var(--art-transition-duration) ease;
transition: all var(--art-transition-duration) var(--art-ease-standard);
background-size: 100% var(--art-bottom-height);
.art-bottom-gradient();
.art-controls,
.art-progress {
transform: translateY(var(--art-bottom-offset));
transition: transform var(--art-transition-duration) ease;
transition: transform var(--art-transition-duration) var(--art-ease-standard);
}
}
@@ -23,10 +23,11 @@
&.art-hover {
.art-bottom {
opacity: 1;
.art-controls,
.art-progress {
transform: translateY(0);
}
}
}
}
}
packages/artplayer/src/style/contextmenu.less
+6 -9
View File
@@ -4,17 +4,14 @@
flex-direction: column;
position: absolute;
z-index: 120;
padding: 5px 0;
border-radius: var(--art-border-radius);
font-size: 12px;
background-color: var(--art-widget-background);
padding: var(--art-space-xxs) 0;
font-size: var(--art-font-size-sm);
min-width: var(--art-contextmenus-min-width);
.art-panel-surface();
.art-contextmenu {
cursor: pointer;
display: flex;
padding: 10px 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
.art-menu-item-base(var(--art-space-xs), var(--art-contextmenu-padding-x), false);
border-bottom: 1px solid var(--art-surface-border-color);
span {
padding: 0 8px;
@@ -26,7 +23,7 @@
}
&:hover {
background-color: rgba(255, 255, 255, 0.1);
background-color: var(--art-surface-hover-color);
}
&:last-child {
packages/artplayer/src/style/controls.less
+5 -5
View File
@@ -30,15 +30,15 @@
cursor: pointer;
white-space: nowrap;
opacity: var(--art-control-opacity);
min-height: var(--art-control-height);
min-width: var(--art-control-height);
transition: opacity var(--art-transition-duration) ease;
min-height: var(--art-touch-hit-size);
min-width: var(--art-touch-hit-size);
transition: opacity var(--art-transition-duration) var(--art-ease-standard);
.art-icon {
height: var(--art-control-icon-size);
width: var(--art-control-icon-size);
transform: scale(var(--art-control-icon-scale));
transition: transform var(--art-transition-duration) ease;
transition: transform var(--art-transition-duration) var(--art-ease-standard);
&:active {
transform: scale(calc(var(--art-control-icon-scale) * 0.8));
@@ -49,4 +49,4 @@
opacity: 1;
}
}
}
}
packages/artplayer/src/style/danmuku.less
+1 -1
View File
@@ -2,4 +2,4 @@
.art-full(30);
pointer-events: none;
overflow: hidden;
}
}
packages/artplayer/src/style/flip.less
+1 -1
View File
@@ -6,4 +6,4 @@
&[data-flip='vertical'] .art-video {
transform: scaleY(-1);
}
}
}
packages/artplayer/src/style/fullscreen.less
+1 -1
View File
@@ -3,4 +3,4 @@
--art-indicator-size: 20px;
--art-control-height: 60px;
--art-control-icon-scale: 1.3;
}
}
packages/artplayer/src/style/fullscreenWeb.less
+1 -1
View File
@@ -1,4 +1,4 @@
.art-fullscreen-web {
.art-fullscreen();
.art-full(var(--art-fullscreen-web-index), fixed);
}
}
packages/artplayer/src/style/hideCursor.less
+1 -1
View File
@@ -1,3 +1,3 @@
.art-hide-cursor * {
cursor: none !important;
}
}
packages/artplayer/src/style/hint.less
+9 -1
View File
@@ -34,6 +34,7 @@
* tooltip body
*/
}
[class*='hint--']:before,
[class*='hint--']:after {
position: absolute;
@@ -51,17 +52,20 @@
-moz-transition-delay: 0ms;
transition-delay: 0ms;
}
[class*='hint--']:hover:before,
[class*='hint--']:hover:after {
visibility: visible;
opacity: 1;
}
[class*='hint--']:hover:before,
[class*='hint--']:hover:after {
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
transition-delay: 100ms;
}
[class*='hint--']:before {
content: '';
position: absolute;
@@ -69,6 +73,7 @@
border: 6px solid transparent;
z-index: 1000001;
}
[class*='hint--']:after {
background: #000000;
color: white;
@@ -78,9 +83,11 @@
line-height: 12px;
white-space: nowrap;
}
[class*='hint--'][aria-label]:after {
content: attr(aria-label);
}
[class*='hint--'][data-hint]:after {
content: attr(data-hint);
}
@@ -467,6 +474,7 @@
* tooltip body
*/
}
[class*='hint--']:after {
text-shadow: 0 -1px 0px black;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
@@ -809,4 +817,4 @@
.hint--no-arrow:before {
display: none;
}
}
packages/artplayer/src/style/icon.less
+1 -1
View File
@@ -1,4 +1,4 @@
.art-icon {
line-height: 1;
.art-center();
}
}
packages/artplayer/src/style/index.less
+1 -1
View File
@@ -27,4 +27,4 @@
@import './plugins';
@import './selector';
@import './hint';
@import './mobile';
@import './mobile';
packages/artplayer/src/style/info.less
+3 -4
View File
@@ -5,10 +5,9 @@
left: var(--art-padding);
top: var(--art-padding);
z-index: 100;
padding: 10px;
font-size: 12px;
border-radius: var(--art-border-radius);
background-color: var(--art-widget-background);
padding: var(--art-space-xs);
font-size: var(--art-font-size-sm);
.art-panel-surface();
.art-info-panel {
display: flex;
packages/artplayer/src/style/layers.less
+1 -1
View File
@@ -14,4 +14,4 @@
display: flex;
}
}
}
}
packages/artplayer/src/style/loading.less
+2 -1
View File
@@ -9,8 +9,9 @@
.art-loading {
display: flex;
}
.art-mask {
display: none;
}
}
}
}
packages/artplayer/src/style/mask.less
+2 -2
View File
@@ -10,7 +10,7 @@
transform: scale(2);
width: var(--art-state-size);
height: var(--art-state-size);
transition: all var(--art-transition-duration) ease;
transition: all var(--art-transition-duration) var(--art-ease-standard);
}
}
@@ -28,4 +28,4 @@
display: none;
}
}
}
}
packages/artplayer/src/style/mini.less
+8 -7
View File
@@ -8,8 +8,8 @@
cursor: move;
user-select: none;
overflow: hidden;
transition: opacity 0.2s ease;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
transition: opacity var(--art-transition-duration) var(--art-ease-standard);
box-shadow: 0 0 5px var(--art-overlay-strong);
svg {
fill: #fff;
@@ -26,7 +26,7 @@
top: 10px;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s ease;
transition: opacity var(--art-transition-duration) var(--art-ease-standard);
}
.art-mini-state {
@@ -34,15 +34,15 @@
.art-center();
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
background-color: rgba(0, 0, 0, 0.25);
transition: opacity var(--art-transition-duration) var(--art-ease-standard);
background-color: var(--art-overlay-dim);
.art-icon {
opacity: 0.75;
cursor: pointer;
transform: scale(3);
pointer-events: auto;
transition: transform 0.2s ease;
transition: transform var(--art-transition-duration) var(--art-ease-standard);
&:active {
transform: scale(2.5);
@@ -55,9 +55,10 @@
}
&:hover {
.art-mini-close,
.art-mini-state {
opacity: 1;
}
}
}
}
packages/artplayer/src/style/mixins.less
+63
View File
@@ -35,3 +35,66 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.art-panel-surface {
border-radius: var(--art-radius-sm);
background-color: var(--art-widget-background);
}
.art-flyout-hidden(@distance: 10px, @axis: y) {
opacity: 0;
pointer-events: none;
transition: all var(--art-transition-duration) var(--art-ease-standard);
& when (@axis =y) {
transform: translateY(@distance);
}
& when (@axis =x) {
transform: translateX(@distance);
}
}
.art-flyout-visible(@axis: y) {
opacity: 1;
pointer-events: auto;
& when (@axis =y) {
transform: translateY(0);
}
& when (@axis =x) {
transform: translateX(0);
}
}
.art-elevation(@level: medium) when (@level =low) {
box-shadow: var(--art-shadow-low);
}
.art-elevation(@level: medium) when (@level =medium) {
box-shadow: var(--art-shadow-medium);
}
.art-elevation(@level: medium) when (@level =high) {
box-shadow: var(--art-shadow-high);
}
.art-text-muted(@size: 12px) {
font-size: @size;
color: var(--art-surface-muted-color);
}
.art-menu-item-base(@padding-y, @padding-x, @animated: true) {
display: flex;
cursor: pointer;
padding: @padding-y @padding-x;
& when (@animated = true) {
transition: background-color var(--art-transition-duration) var(--art-ease-standard);
}
&:hover {
background-color: var(--art-surface-hover-color);
}
}
packages/artplayer/src/style/mobile.less
+3 -1
View File
@@ -7,6 +7,8 @@
--art-selector-max-height: 180px;
--art-indicator-scale: 1;
--art-control-opacity: 1;
--art-padding: var(--art-mobile-padding);
--art-border-radius: var(--art-mobile-radius);
.art-controls-left {
margin-left: calc(var(--art-padding) / -1);
@@ -15,4 +17,4 @@
.art-controls-right {
margin-right: calc(var(--art-padding) / -1);
}
}
}
packages/artplayer/src/style/notice.less
+2 -2
View File
@@ -9,7 +9,7 @@
.art-notice-inner {
display: inline-flex;
padding: 5px;
padding: var(--art-space-xxs);
line-height: 1;
border-radius: var(--art-border-radius);
background-color: var(--art-tip-background);
@@ -21,4 +21,4 @@
display: flex;
}
}
}
}
packages/artplayer/src/style/plugins.less
+6 -9
View File
@@ -16,20 +16,19 @@
gap: 10px;
align-items: center;
position: absolute;
border-radius: var(--art-border-radius);
padding: 10px;
padding: var(--art-space-xs);
line-height: 1;
left: var(--art-padding);
bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + 10px);
background-color: var(--art-widget-background);
.art-panel-surface();
.art-auto-playback-close {
.art-center();
cursor: pointer;
svg {
width: 15px;
height: 15px;
width: var(--art-icon-small-size);
height: var(--art-icon-small-size);
fill: var(--art-theme);
}
}
@@ -55,9 +54,7 @@
.art-controls,
.art-progress {
transform: translateY(
calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-progress-height) / 4)
);
transform: translateY(calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-progress-height) / 4));
}
.art-progress-indicator {
@@ -71,4 +68,4 @@
display: flex;
}
}
}
}
packages/artplayer/src/style/poster.less
+1 -1
View File
@@ -2,4 +2,4 @@
.art-full(11);
.art-bg-cover();
pointer-events: none;
}
}
packages/artplayer/src/style/progress.less
+15 -14
View File
@@ -18,7 +18,7 @@
position: relative;
height: 50%;
width: 100%;
transition: height var(--art-transition-duration) ease;
transition: height var(--art-transition-duration) var(--art-ease-standard);
background-color: var(--art-progress-color);
.art-progress-hover {
@@ -63,7 +63,7 @@
height: var(--art-indicator-size);
transform: scale(var(--art-indicator-scale));
margin-left: calc(var(--art-indicator-size) / -2);
transition: transform var(--art-transition-duration) ease;
transition: transform var(--art-transition-duration) var(--art-ease-standard);
.art-icon {
width: 100%;
@@ -86,15 +86,16 @@
opacity: 0;
position: absolute;
z-index: 50;
top: -25px;
top: var(--art-tip-offset);
left: 0;
padding: 3px 5px;
padding: var(--art-tip-padding);
line-height: 1;
font-size: 12px;
font-size: var(--art-font-size-sm);
border-radius: var(--art-border-radius);
white-space: nowrap;
background-color: var(--art-tip-background);
transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;
transition: transform var(--art-transition-duration) var(--art-ease-standard),
opacity var(--art-transition-duration) var(--art-ease-standard);
}
}
@@ -112,13 +113,11 @@
position: absolute;
bottom: calc(var(--art-bottom-gap) + 10px);
left: 0;
border-radius: var(--art-border-radius);
pointer-events: none;
background-color: var(--art-widget-background);
transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;
box-shadow:
0 1px 3px 0 rgb(0 0 0 / 0.2),
0 1px 2px -1px rgb(0 0 0 / 0.2);
.art-panel-surface();
transition: transform var(--art-transition-duration) var(--art-ease-standard),
opacity var(--art-transition-duration) var(--art-ease-standard);
.art-elevation(medium);
}
}
@@ -131,9 +130,11 @@
.art-progress-hover {
.art-bottom .art-progress {
.art-control-progress .art-control-progress-inner .art-progress-tip, .art-control-thumbnails {
.art-control-progress .art-control-progress-inner .art-progress-tip,
.art-control-thumbnails {
transform: scale(1);
opacity: 1;
}
}
}
}
packages/artplayer/src/style/selector.less
+5 -11
View File
@@ -9,16 +9,12 @@
align-items: center;
text-align: center;
position: absolute;
border-radius: var(--art-border-radius);
overflow-y: auto;
overflow-x: hidden;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
bottom: var(--art-control-height);
max-height: var(--art-selector-max-height);
background-color: var(--art-widget-background);
transition: all var(--art-transition-duration) ease;
.art-panel-surface();
.art-flyout-hidden();
.art-selector-item {
.art-center();
@@ -28,7 +24,7 @@
line-height: 1;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
background-color: var(--art-surface-hover-color);
}
&:hover,
@@ -40,9 +36,7 @@
&:hover {
.art-selector-list {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
.art-flyout-visible();
}
}
}
}
packages/artplayer/src/style/setting.less
+10 -18
View File
@@ -7,12 +7,11 @@
left: auto;
overflow-y: auto;
overflow-x: hidden;
border-radius: var(--art-border-radius);
max-height: var(--art-settings-max-height);
right: var(--art-padding);
bottom: var(--art-control-height);
transition: all var(--art-transition-duration) ease;
background-color: var(--art-widget-background);
transition: all var(--art-transition-duration) var(--art-ease-standard);
.art-panel-surface();
.art-setting-panel {
display: none;
@@ -23,17 +22,10 @@
}
.art-setting-item {
display: flex;
.art-menu-item-base(0, var(--art-space-xxs));
justify-content: space-between;
align-items: center;
padding: 0 5px;
cursor: pointer;
overflow: hidden;
transition: background-color var(--art-transition-duration) ease;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
&.art-current {
color: var(--art-theme);
@@ -41,7 +33,7 @@
.art-icon-check {
visibility: hidden;
height: 15px;
height: var(--art-icon-small-size);
}
&.art-current .art-icon-check {
@@ -51,7 +43,7 @@
.art-setting-item-left {
.art-center();
flex-shrink: 0;
gap: 5px;
gap: var(--art-space-xxs);
.art-setting-item-left-icon {
.art-center();
@@ -62,12 +54,12 @@
.art-setting-item-right {
.art-center();
gap: 5px;
font-size: 12px;
gap: var(--art-space-xxs);
font-size: var(--art-font-size-sm);
.art-setting-item-right-tooltip {
white-space: nowrap;
color: rgba(255, 255, 255, 0.5);
color: var(--art-surface-muted-color);
}
.art-setting-item-right-icon {
@@ -81,13 +73,13 @@
width: 80px;
outline: none;
appearance: none;
background-color: rgba(255, 255, 255, 0.2);
background-color: var(--art-surface-range-color);
}
}
}
.art-setting-item-back {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid var(--art-surface-border-color);
}
}
}
packages/artplayer/src/style/subtitle.less
+2 -2
View File
@@ -11,7 +11,7 @@
gap: var(--art-subtitle-gap);
bottom: var(--art-subtitle-bottom);
font-size: var(--art-subtitle-font-size);
transition: bottom var(--art-transition-duration) ease;
transition: bottom var(--art-transition-duration) var(--art-ease-standard);
text-shadow:
var(--art-subtitle-border) 1px 0 1px,
var(--art-subtitle-border) 0 1px 1px,
@@ -34,4 +34,4 @@
bottom: calc(var(--art-control-height) + var(--art-subtitle-bottom));
}
}
}
}
packages/artplayer/src/style/variables.less
+22
View File
@@ -2,15 +2,28 @@
--art-theme: #f00;
--art-font-color: #fff;
--art-background-color: #000;
--art-font-size-sm: 12px;
--art-text-shadow-color: rgba(0, 0, 0, 0.5);
--art-transition-duration: 0.2s;
--art-ease-standard: ease;
--art-padding: 10px;
--art-border-radius: 3px;
--art-mobile-padding: 10px;
--art-mobile-radius: 3px;
--art-radius-sm: 3px;
--art-space-xxs: 5px;
--art-space-xs: 10px;
--art-surface-hover-color: rgba(255, 255, 255, 0.1);
--art-surface-border-color: rgba(255, 255, 255, 0.1);
--art-surface-muted-color: rgba(255, 255, 255, 0.5);
--art-surface-range-color: rgba(255, 255, 255, 0.2);
--art-progress-height: 6px;
--art-progress-color: rgba(255, 255, 255, 0.25);
--art-progress-top-gap: 8px;
--art-hover-color: rgba(255, 255, 255, 0.25);
--art-loaded-color: rgba(255, 255, 255, 0.25);
--art-tip-padding: 3px 5px;
--art-tip-offset: -25px;
--art-state-size: 80px;
--art-state-opacity: 0.8;
--art-bottom-height: 100px;
@@ -22,6 +35,7 @@
--art-control-opacity: 0.75;
--art-control-icon-size: 36px;
--art-control-icon-scale: 1.1;
--art-touch-hit-size: var(--art-control-height);
--art-volume-height: 120px;
--art-volume-handle-size: 14px;
--art-lock-size: 36px;
@@ -32,6 +46,7 @@
--art-settings-max-height: 300px;
--art-selector-max-height: 300px;
--art-contextmenus-min-width: 250px;
--art-contextmenu-padding-x: 15px;
--art-subtitle-font-size: 20px;
--art-subtitle-gap: 5px;
--art-subtitle-bottom: 15px;
@@ -42,4 +57,11 @@
--art-scrollbar-background: rgba(255, 255, 255, 0.25);
--art-scrollbar-background-hover: rgba(255, 255, 255, 0.5);
--art-mini-progress-height: 2px;
--art-shadow-low: 0 1px 2px 0 rgb(0 0 0 / 0.12);
--art-shadow-medium: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
--art-shadow-high: 0 4px 10px 0 rgb(0 0 0 / 0.25);
--art-shadow-elevated: var(--art-shadow-medium);
--art-icon-small-size: 15px;
--art-overlay-dim: rgba(0, 0, 0, 0.25);
--art-overlay-strong: rgba(0, 0, 0, 0.5);
}
packages/artplayer/src/style/video.less
+1 -1
View File
@@ -1,4 +1,4 @@
.art-video {
.art-full(10);
cursor: pointer;
}
}
packages/artplayer/src/style/volume.less
+9 -15
View File
@@ -7,27 +7,23 @@
left: 0;
right: 0;
padding: 0 5px;
font-size: 12px;
.art-text-muted(12px);
text-align: center;
cursor: default;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
bottom: var(--art-control-height);
width: var(--art-control-height);
height: var(--art-volume-height);
transition: all var(--art-transition-duration) ease;
.art-flyout-hidden();
.art-volume-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
gap: var(--art-space-xs);
height: 100%;
width: 100%;
padding: 10px 0 12px;
border-radius: var(--art-border-radius);
background-color: var(--art-widget-background);
padding: var(--art-space-xs) 0 12px;
.art-panel-surface();
.art-volume-slider {
flex: 1;
@@ -44,7 +40,7 @@
width: 2px;
border-radius: var(--art-border-radius);
overflow: hidden;
background-color: rgba(255, 255, 255, 0.25);
background-color: var(--art-hover-color);
.art-volume-loaded {
.art-full(0);
@@ -61,7 +57,7 @@
transform: scale(1);
border-radius: 100%;
background-color: var(--art-theme);
transition: transform var(--art-transition-duration) ease;
transition: transform var(--art-transition-duration) var(--art-ease-standard);
}
&:active {
@@ -75,9 +71,7 @@
&:hover {
.art-volume-panel {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
.art-flyout-visible();
}
}
}
}
packages/artplayer/types/cssVar.d.ts
Vendored
+22
View File
@@ -2,15 +2,28 @@ export interface CssVar {
'--art-theme': string
'--art-font-color': string
'--art-background-color': string
'--art-font-size-sm': string
'--art-text-shadow-color': string
'--art-transition-duration': string
'--art-ease-standard': string
'--art-padding': string
'--art-border-radius': string
'--art-mobile-padding': string
'--art-mobile-radius': string
'--art-radius-sm': string
'--art-space-xxs': string
'--art-space-xs': string
'--art-surface-hover-color': string
'--art-surface-border-color': string
'--art-surface-muted-color': string
'--art-surface-range-color': string
'--art-progress-height': string
'--art-progress-color': string
'--art-progress-top-gap': string
'--art-hover-color': string
'--art-loaded-color': string
'--art-tip-padding': string
'--art-tip-offset': string
'--art-state-size': string
'--art-state-opacity': number
'--art-bottom-height': string
@@ -22,6 +35,7 @@ export interface CssVar {
'--art-control-opacity': number
'--art-control-icon-size': string
'--art-control-icon-scale': number
'--art-touch-hit-size': string
'--art-volume-height': string
'--art-volume-handle-size': string
'--art-lock-size': string
@@ -32,6 +46,7 @@ export interface CssVar {
'--art-settings-max-height': string
'--art-selector-max-height': string
'--art-contextmenus-min-width': string
'--art-contextmenu-padding-x': string
'--art-subtitle-font-size': string
'--art-subtitle-gap': string
'--art-subtitle-bottom': string
@@ -42,4 +57,11 @@ export interface CssVar {
'--art-scrollbar-background': string
'--art-scrollbar-background-hover': string
'--art-mini-progress-height': string
'--art-shadow-low': string
'--art-shadow-medium': string
'--art-shadow-high': string
'--art-shadow-elevated': string
'--art-icon-small-size': string
'--art-overlay-dim': string
'--art-overlay-strong': string
}