smueller/youtube-music
1
0
Fork 0
mirror of https://github.com/th-ch/youtube-music.git synced 2026-01-11 18:41:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Video Toggle Plugin

Browse Source
This commit is contained in:
Araxeus
2021-10-24 20:09:30 +03:00
parent 41a01ba58a
commit 67e43bc0e3
9 changed files with 193 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
plugins/video-toggle/buttonSwitcher.css Normal file
View File

@ -0,0 +1,77 @@
#main-panel.ytmusic-player-page {
align-items: unset !important;
}
.video-switch-button {
z-index: 999;
box-sizing: border-box;
padding: 0;
margin-top: 20px;
margin-left: 10px;
background: rgba(33, 33, 33, 0.4);
border-radius: 30px;
overflow: hidden;
width: 240px;
text-align: center;
font-size: 18px;
letter-spacing: 1px;
color: #fff;
padding-right: 120px;
position: absolute;
}
.video-switch-button:before {
content: "Video";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 120px;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
pointer-events: none;
}
.video-switch-button-checkbox {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 2;
}
.video-switch-button-label-span {
position: relative;
}
.video-switch-button-checkbox:checked+.video-switch-button-label:before {
transform: translateX(120px);
transition: transform 300ms linear;
}
.video-switch-button-checkbox+.video-switch-button-label {
position: relative;
padding: 15px 0;
display: block;
user-select: none;
pointer-events: none;
}
.video-switch-button-checkbox+.video-switch-button-label:before {
content: "";
background: rgba(60, 60, 60, 0.4);
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
border-radius: 30px;
transform: translateX(0);
transition: transform 300ms;
}