zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(skin): responsive design fixes and improvements (#1129)

Browse Source
This commit is contained in:
Sam Potts
2026-03-30 16:25:49 +11:00
committed by GitHub
parent 11d0c2d1ad
commit 10826932be
79 changed files with 1111 additions and 858 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skins/src/default/css/audio.css
+15 -3
View File
@@ -5,7 +5,8 @@
@import "./components/error.css";
@import "./components/controls.css";
@import "./components/time.css";
@import "./components/buttons.css";
@import "./components/button.css";
@import "./components/button-group.css";
@import "./components/icons.css";
@import "./components/slider.css";
@import "./components/popup.css";
@@ -17,7 +18,6 @@
========================================================================== */
.media-default-skin--audio {
--media-border-color: oklch(0 0 0 / 0.1);
--media-surface-background-color: oklch(1 0 0 / 0.5);
--media-surface-inner-border-color: oklch(1 0 0 / 0.1);
--media-surface-outer-border-color: oklch(0 0 0 / 0.05);
@@ -28,6 +28,8 @@
--media-error-dialog-transition-delay: 100ms;
--media-popup-transition-duration: 100ms;
--media-popup-transition-timing-function: ease-out;
--media-tooltip-side-offset: 0.75rem;
--media-popover-side-offset: 0.75rem;
@media (prefers-reduced-motion: reduce) {
--media-error-dialog-transition-duration: 50ms;
@@ -36,10 +38,20 @@
}
@media (prefers-color-scheme: dark) {
--media-border-color: oklch(1 0 0 / 0.1);
--media-surface-background-color: oklch(0 0 0 / 0.4);
--media-text-color: var(--media-color-primary, oklch(1 0 0));
}
@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
--media-surface-background-color: oklch(1 0 0);
--media-surface-outer-border-color: oklch(0 0 0 / 0.05);
}
@media (prefers-color-scheme: dark) and ((prefers-reduced-transparency: reduce) or (prefers-contrast: more)) {
--media-surface-background-color: oklch(0 0 0);
--media-surface-inner-border-color: oklch(1 0 0 / 0.2);
--media-surface-outer-border-color: transparent;
}
}
/* ==========================================================================