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

Merge pull request #389 from th-ch/fix-menu-buttons

Browse Source 
Update menu buttons to new format
This commit is contained in:
th-ch
2021-09-12 22:13:46 +02:00
committed by GitHub
parent fea460a374 e888b5c896
commit d255e5ffe1
3 changed files with 114 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
plugins/downloader/style.css
View File

@ -6,8 +6,16 @@
cursor: pointer; cursor: pointer;
} }
.menu-item > .yt-simple-endpoint:hover {
background-color: var(--ytmusic-menu-item-hover-background-color);
}
.menu-icon { .menu-icon {
flex: var(--ytmusic-menu-item-icon_-_flex); flex: var(--ytmusic-menu-item-icon_-_flex);
margin: var(--ytmusic-menu-item-icon_-_margin); margin: var(--ytmusic-menu-item-icon_-_margin);
fill: var(--ytmusic-menu-item-icon_-_fill); fill: var(--ytmusic-menu-item-icon_-_fill);
stroke: var(--iron-icon-stroke-color, none);
width: var(--iron-icon-width, 24px);
height: var(--iron-icon-height, 24px);
animation: var(--iron-icon_-_animation);
} }

58
plugins/downloader/templates/download.html
View File

@ -1,5 +1,5 @@
<div <div
class="menu-item ytmusic-menu-popup-renderer" class="style-scope menu-item ytmusic-menu-popup-renderer"
role="option" role="option"
tabindex="-1" tabindex="-1"
aria-disabled="false" aria-disabled="false"
@ -7,31 +7,39 @@
onclick="download()" onclick="download()"
> >
<div <div
class="menu-icon yt-icon-container yt-icon ytmusic-toggle-menu-service-item-renderer" id="navigation-endpoint"
class="yt-simple-endpoint style-scope ytmusic-menu-navigation-item-renderer"
tabindex="-1"
> >
<svg <div
viewBox="0 0 24 24" class="icon menu-icon style-scope ytmusic-menu-navigation-item-renderer"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%;"
> >
<g class="style-scope yt-icon"> <svg
<path viewBox="0 0 24 24"
d="M25.462,19.105v6.848H4.515v-6.848H0.489v8.861c0,1.111,0.9,2.012,2.016,2.012h24.967c1.115,0,2.016-0.9,2.016-2.012v-8.861H25.462z" preserveAspectRatio="xMidYMid meet"
class="style-scope yt-icon" fill="#aaaaaa" focusable="false"
/> class="style-scope yt-icon"
<path style="pointer-events: none; display: block; width: 100%; height: 100%"
d="M14.62,18.426l-5.764-6.965c0,0-0.877-0.828,0.074-0.828s3.248,0,3.248,0s0-0.557,0-1.416c0-2.449,0-6.906,0-8.723c0,0-0.129-0.494,0.615-0.494c0.75,0,4.035,0,4.572,0c0.536,0,0.524,0.416,0.524,0.416c0,1.762,0,6.373,0,8.742c0,0.768,0,1.266,0,1.266s1.842,0,2.998,0c1.154,0,0.285,0.867,0.285,0.867s-4.904,6.51-5.588,7.193C15.092,18.979,14.62,18.426,14.62,18.426z" >
class="style-scope yt-icon" fill="#aaaaaa" <g class="style-scope yt-icon">
/> <path
</g> d="M25.462,19.105v6.848H4.515v-6.848H0.489v8.861c0,1.111,0.9,2.012,2.016,2.012h24.967c1.115,0,2.016-0.9,2.016-2.012v-8.861H25.462z"
</svg> class="style-scope yt-icon"
</div> fill="#aaaaaa"
<div />
class="text style-scope ytmusic-toggle-menu-service-item-renderer" <path
id="ytmcustom-download" d="M14.62,18.426l-5.764-6.965c0,0-0.877-0.828,0.074-0.828s3.248,0,3.248,0s0-0.557,0-1.416c0-2.449,0-6.906,0-8.723c0,0-0.129-0.494,0.615-0.494c0.75,0,4.035,0,4.572,0c0.536,0,0.524,0.416,0.524,0.416c0,1.762,0,6.373,0,8.742c0,0.768,0,1.266,0,1.266s1.842,0,2.998,0c1.154,0,0.285,0.867,0.285,0.867s-4.904,6.51-5.588,7.193C15.092,18.979,14.62,18.426,14.62,18.426z"
> class="style-scope yt-icon"
Download fill="#aaaaaa"
/>
</g>
</svg>
</div>
<div
class="text style-scope ytmusic-menu-navigation-item-renderer"
id="ytmcustom-download"
>
Download
</div>
</div> </div>
</div> </div>

138
plugins/playback-speed/templates/slider.html
View File

@ -1,79 +1,87 @@
<div <div
class="menu-item ytmusic-menu-popup-renderer" class="style-scope menu-item ytmusic-menu-popup-renderer"
role="option" role="option"
tabindex="-1" tabindex="-1"
aria-disabled="false" aria-disabled="false"
aria-selected="false" aria-selected="false"
> >
<tp-yt-paper-slider <div
id="playback-speed-slider" id="navigation-endpoint"
class="volume-slider style-scope ytmusic-player-bar on-hover" class="yt-simple-endpoint style-scope ytmusic-menu-navigation-item-renderer"
max="100" tabindex="-1"
min="0" >
step="5" <tp-yt-paper-slider
dir="ltr" id="playback-speed-slider"
title="Playback speed" class="volume-slider style-scope ytmusic-player-bar on-hover"
aria-label="Playback speed" max="100"
role="slider" min="0"
tabindex="0" step="5"
aria-valuemin="0" dir="ltr"
aria-valuemax="100" title="Playback speed"
aria-valuenow="50" aria-label="Playback speed"
aria-disabled="false" role="slider"
value="50" tabindex="0"
><!--css-build:shady--> aria-valuemin="0"
<div id="sliderContainer" class="style-scope tp-yt-paper-slider"> aria-valuemax="100"
<div class="bar-container style-scope tp-yt-paper-slider"> aria-valuenow="50"
<tp-yt-paper-progress aria-disabled="false"
id="sliderBar" value="50"
aria-hidden="true" ><!--css-build:shady-->
class="style-scope tp-yt-paper-slider" <div id="sliderContainer" class="style-scope tp-yt-paper-slider">
role="progressbar" <div class="bar-container style-scope tp-yt-paper-slider">
value="50" <tp-yt-paper-progress
aria-valuenow="50" id="sliderBar"
aria-valuemin="0" aria-hidden="true"
aria-valuemax="100" class="style-scope tp-yt-paper-slider"
aria-disabled="false" role="progressbar"
style="touch-action: none" value="50"
><!--css-build:shady--> aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
aria-disabled="false"
style="touch-action: none"
><!--css-build:shady-->
<div id="progressContainer" class="style-scope tp-yt-paper-progress">
<div <div
id="secondaryProgress" id="progressContainer"
class="style-scope tp-yt-paper-progress" class="style-scope tp-yt-paper-progress"
hidden="true" >
style="transform: scaleX(0)" <div
></div> id="secondaryProgress"
<div class="style-scope tp-yt-paper-progress"
id="primaryProgress" hidden="true"
class="style-scope tp-yt-paper-progress" style="transform: scaleX(0)"
style="transform: scaleX(0.5)" ></div>
></div> <div
</div> id="primaryProgress"
</tp-yt-paper-progress> class="style-scope tp-yt-paper-progress"
style="transform: scaleX(0.5)"
></div>
</div>
</tp-yt-paper-progress>
</div>
<dom-if class="style-scope tp-yt-paper-slider"
><template is="dom-if"></template
></dom-if>
<div
id="sliderKnob"
class="slider-knob style-scope tp-yt-paper-slider"
style="left: 50%; touch-action: none"
>
<div
class="slider-knob-inner style-scope tp-yt-paper-slider"
value="50"
></div>
</div>
</div> </div>
<dom-if class="style-scope tp-yt-paper-slider" <dom-if class="style-scope tp-yt-paper-slider"
><template is="dom-if"></template ><template is="dom-if"></template></dom-if
></dom-if> ></tp-yt-paper-slider>
<div <div
id="sliderKnob" class="text style-scope ytmusic-menu-navigation-item-renderer"
class="slider-knob style-scope tp-yt-paper-slider" id="ytmcustom-playback-speed"
style="left: 50%; touch-action: none" >
> Speed (<span id="playback-speed-value">1</span>)
<div
class="slider-knob-inner style-scope tp-yt-paper-slider"
value="50"
></div>
</div>
</div> </div>
<dom-if class="style-scope tp-yt-paper-slider"
><template is="dom-if"></template></dom-if
></tp-yt-paper-slider>
<div
class="text style-scope ytmusic-toggle-menu-service-item-renderer"
id="ytmcustom-playback-speed"
>
Speed (<span id="playback-speed-value">1</span>)
</div> </div>
</div> </div>