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

chore: remove range css from skins for now.

Browse Source
This commit is contained in:
Christian Pillsbury
2025-09-09 07:59:56 -07:00
committed by Christian Pillsbury
parent bef0d42631
commit 517bb30678
2 changed files with 7 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/html/src/skins/media-skin-default.ts
-63
View File
@@ -80,69 +80,6 @@ export function getTemplateHTML() {
.spacer {
flex-grow: 1;
}
/* Volume Range UI/Styles */
media-volume-range {
margin: 0 8px;
}
media-volume-range input[type="range"] {
width: 80px;
height: 4px;
background: rgb(50 50 50);
outline: none;
border-radius: 2px;
}
media-volume-range input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 12px;
height: 12px;
background: rgb(238 238 238);
border-radius: 50%;
cursor: pointer;
}
media-volume-range input[type="range"]::-moz-range-thumb {
width: 12px;
height: 12px;
background: rgb(238 238 238);
border-radius: 50%;
cursor: pointer;
border: none;
}
/* Time Range UI/Styles */
media-time-range {
flex-grow: 1;
margin: 0 8px;
}
media-time-range input[type="range"] {
width: 100%;
height: 4px;
background: rgb(50 50 50);
outline: none;
border-radius: 2px;
}
media-time-range input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 12px;
height: 12px;
background: rgb(238 238 238);
border-radius: 50%;
cursor: pointer;
}
media-time-range input[type="range"]::-moz-range-thumb {
width: 12px;
height: 12px;
background: rgb(238 238 238);
border-radius: 50%;
cursor: pointer;
border: none;
}
</style>
<media-container>
<slot name="media" slot="media"></slot>
packages/react/react/src/skins/styles.module.css
+7 -71
View File
@@ -48,10 +48,10 @@
/* One way to define the "default visible" icon (CJP) */
.MediaMuteButton:not([data-volume-level]) .VolumeLowIcon,
.MediaMuteButton[data-volume-level=high] .VolumeHighIcon,
.MediaMuteButton[data-volume-level=low] .VolumeLowIcon,
.MediaMuteButton[data-volume-level=medium] .VolumeLowIcon,
.MediaMuteButton[data-volume-level=off] .VolumeOffIcon {
.MediaMuteButton[data-volume-level='high'] .VolumeHighIcon,
.MediaMuteButton[data-volume-level='low'] .VolumeLowIcon,
.MediaMuteButton[data-volume-level='medium'] .VolumeLowIcon,
.MediaMuteButton[data-volume-level='off'] .VolumeOffIcon {
display: inline-block;
}
@@ -67,71 +67,6 @@
flex-grow: 1;
}
/* Time Range UI/Styles */
.TimeRange {
flex-grow: 1;
margin: 0 8px;
}
.TimeRange input[type="range"] {
width: 100%;
height: 4px;
background: rgb(50 50 50);
outline: none;
border-radius: 2px;
appearance: none;
}
.TimeRange input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 12px;
height: 12px;
background: rgb(238 238 238);
border-radius: 50%;
cursor: pointer;
}
.TimeRange input[type="range"]::-moz-range-thumb {
width: 12px;
height: 12px;
background: rgb(238 238 238);
border-radius: 50%;
cursor: pointer;
border: none;
}
/* Volume Range UI/Styles */
.VolumeRange {
margin: 0 8px;
}
.VolumeRange input[type="range"] {
width: 80px;
height: 4px;
background: rgb(50 50 50);
outline: none;
border-radius: 2px;
appearance: none;
}
.VolumeRange input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 12px;
height: 12px;
background: rgb(238 238 238);
border-radius: 50%;
cursor: pointer;
}
.VolumeRange input[type="range"]::-moz-range-thumb {
width: 12px;
height: 12px;
background: rgb(238 238 238);
border-radius: 50%;
cursor: pointer;
border: none;
}
/* Base Button Styling */
.MediaPlayButton {
border: none;
@@ -141,7 +76,8 @@
color: rgb(238 238 238);
/* Basic Icon Styling for Buttons */
.PlayIcon, .PauseIcon {
.PlayIcon,
.PauseIcon {
width: 24px;
height: 24px;
display: none; /* Hide icons by default */
@@ -152,4 +88,4 @@
&[data-paused] .PlayIcon {
display: inline-block;
}
}
}