Skip to content

feat(themes): expose centered layout #1183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Oct 17, 2025
Merged

feat(themes): expose centered layout #1183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ebb6890
update
ronalduQualabs Mar 24, 2025
e8e3e5b
pr fix: remove private variable and observedAttributes
ronalduQualabs May 26, 2025
1e6093f
Merge remote-tracking branch 'upstream/main'
ronalduQualabs Aug 11, 2025
d2d9ccb
Expose centered-layout (formerly centered-chrome) in classic and gerw…
ronalduQualabs Aug 12, 2025
c676084
remove test project with vite
ronalduQualabs Aug 15, 2025
6d5f2b6
pr fix
ronalduQualabs Aug 20, 2025
8cedf2f
pr fixes move filter to play button
ronalduQualabs Sep 11, 2025
e3a9e23
feat: allow remove filter shadow to center buttons in gerwig and clas…
ronalduQualabs Oct 6, 2025
b99ec5a
Merge remote-tracking branch 'upstream/main' into feat/themes-expose-…
ronalduQualabs Oct 9, 2025
ee48464
Merge remote-tracking branch 'upstream/main' into feat/themes-expose-…
ronalduQualabs Oct 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/mux-player/src/themes/classic/classic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,18 +180,17 @@
flex-flow: row;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.25)) drop-shadow(0 0 6px rgb(0 0 0 / 0.25));
paint-order: stroke;
stroke: rgba(102, 102, 102, 1);
stroke-width: 0.3px;
text-shadow: 0 0 2px rgb(0 0 0 / 0.25), 0 0 6px rgb(0 0 0 / 0.25);
}

.center-controls media-play-button {
--media-control-background: transparent;
--media-control-hover-background: transparent;
padding: 0;
width: max(43px, min(10%, 55px));
filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.25)) drop-shadow(0 0 6px rgb(0 0 0 / 0.25));
}

.center-controls media-seek-backward-button,
Expand All @@ -201,6 +200,8 @@
padding: 0;
margin: 0 2%;
width: max(33px, min(8%, 40px));
filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.25)) drop-shadow(0 0 6px rgb(0 0 0 / 0.25));
text-shadow: 0 0 2px rgb(0 0 0 / 0.25), 0 0 6px rgb(0 0 0 / 0.25);
}

media-control-bar:not([slot]) media-seek-backward-button {
Expand Down
5 changes: 4 additions & 1 deletion packages/mux-player/src/themes/gerwig/gerwig.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,6 @@
flex-flow: row;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.25)) drop-shadow(0 0 6px rgb(0 0 0 / 0.25));
paint-order: stroke;
stroke: rgba(102, 102, 102, 1);
stroke-width: 0.3px;
Expand All @@ -306,6 +305,7 @@
--media-control-hover-background: transparent;
--media-control-padding: 0;
width: 40px;
filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.25)) drop-shadow(0 0 6px rgb(0 0 0 / 0.25));
}

[breakpointsm] .center-controls media-play-button {
Expand All @@ -325,6 +325,9 @@
padding: 0;
margin: 0 20px;
width: max(33px, min(8%, 40px));
text-shadow:
0 0 2px rgb(0 0 0 / 0.25),
0 0 6px rgb(0 0 0 / 0.25);
}

[breakpointsm]:not([audio]) .center-controls.pre-playback {
Expand Down
Loading