diff --git a/chrome/player/assets/fluidplayer/css/fluidplayer.css b/chrome/player/assets/fluidplayer/css/fluidplayer.css
index 8c4437eb..47b5efc8 100644
--- a/chrome/player/assets/fluidplayer/css/fluidplayer.css
+++ b/chrome/player/assets/fluidplayer/css/fluidplayer.css
@@ -737,54 +737,64 @@ body {
background-color: var(--nextvideo-badge-background-color);
}
-/* The next button and its autoplay switch: one tool in the bar. */
-.fluid_tool_next {
- display: flex;
+/* Autoplay next (his wish, 2026-10-11): a tool of its own, always in the bar, like YouTube's
+ switch - this tab's setting; the options page's is where a new tab starts. The knob shows
+ play when on, pause when off; on, it sits right and the track takes the badge color. */
+.fluid_button.fluid_autoplay_switch {
+ display: inline-flex;
align-items: center;
- gap: 3px;
- flex: none;
+ justify-content: center;
+ width: 36px;
+ cursor: pointer;
}
-/* Autoplay next: a switch, on when its knob is right and the track takes the badge color. */
-.fluid_autoplay_switch {
+.fluid_autoplay_track {
position: relative;
- flex: none;
- width: 24px;
+ display: block;
+ width: 28px;
height: 12px;
border-radius: 6px;
- background-color: var(--menu-text-color);
- opacity: 0.35;
- cursor: pointer;
- transition: opacity 0.2s, background-color 0.2s;
-}
-
-.fluid_autoplay_switch:hover {
- opacity: 0.6;
+ background-color: color-mix(in srgb, var(--menu-text-color) 35%, transparent);
+ transition: background-color 0.2s;
}
-.fluid_autoplay_switch.on {
+.fluid_autoplay_switch.on .fluid_autoplay_track {
background-color: var(--nextvideo-badge-background-color);
- opacity: 1;
}
.fluid_autoplay_knob {
position: absolute;
- top: 1px;
- left: 1px;
- width: 10px;
- height: 10px;
+ top: -3px;
+ left: -2px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 18px;
+ height: 18px;
border-radius: 50%;
background-color: var(--menu-text-color);
+ color: var(--menu-background-color);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
transition: transform 0.2s;
}
.fluid_autoplay_switch.on .fluid_autoplay_knob {
- transform: translateX(12px);
+ transform: translateX(14px);
}
-.fluid_autoplay_switch:focus-visible {
- outline: 2px solid var(--menu-text-color);
- outline-offset: 1px;
+.fluid_button .fluid_autoplay_knob svg {
+ width: 12px;
+ height: 12px;
+ opacity: 1;
+}
+
+.fluid_autoplay_switch .fluid_autoplay_play,
+.fluid_autoplay_switch.on .fluid_autoplay_pause {
+ display: none;
+}
+
+.fluid_autoplay_switch.on .fluid_autoplay_play {
+ display: inline-block;
}
#update_notif_banner,
@@ -2189,7 +2199,7 @@ div:not(.reordering)>.volume_block:focus .tooltip .tooltiptext {
/* Make shake */
.reordering>div>svg,
.reordering>div.volume_block>div>svg,
-.reordering>.fluid_tool_next>div>svg {
+.reordering>.fluid_autoplay_switch>.fluid_autoplay_track {
animation: tilt-shaking 0.25s infinite;
}
diff --git a/chrome/player/index.html b/chrome/player/index.html
index 87553760..28ff8bd2 100644
--- a/chrome/player/index.html
+++ b/chrome/player/index.html
@@ -80,16 +80,19 @@
-
-
-
+
+