Implemented purple playback bar for Podcasts

- Added a settings toggle for it
- Added 1 language string to en_US and the i18n README
- Translated string to hu_HU
- Changed CSS background color for playback bar dot to songProgressColor
This commit is contained in:
Amaru8 2022-06-10 22:27:26 +02:00
parent 619a0b16ad
commit 574641ae74
7 changed files with 33 additions and 15 deletions

View file

@ -1420,7 +1420,7 @@ div[data-type="musicVideo"] .info-rect .title::before {
width: 12px;
height: 12px;
border-radius: 100%;
background: var(--keyColor);
background: var(--songProgressColor);
cursor: default;
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
}
@ -1429,7 +1429,7 @@ div[data-type="musicVideo"] .info-rect .title::before {
width: 8px;
height: 8px;
border-radius: 100%;
background: var(--keyColor);
background: var(--songProgressColor);
cursor: default;
}
}
@ -1614,12 +1614,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
&::-webkit-slider-thumb:hover {
background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px);
transform: scale(1.2);
}
&::-webkit-slider-thumb:active {
background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px);
transform: scale(1);
}
@ -2159,12 +2159,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
&::-webkit-slider-thumb:hover {
background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px);
transform: scale(1.2);
}
&::-webkit-slider-thumb:active {
background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px);
transform: scale(1);
}
@ -2409,7 +2409,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
width: 12px;
height: 12px;
border-radius: 100%;
background: var(--keyColor);
background: var(--songProgressColor);
cursor: default;
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
}
@ -2418,7 +2418,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
width: 8px;
height: 8px;
border-radius: 100%;
background: var(--keyColor);
background: var(--songProgressColor);
cursor: default;
}
}
@ -2547,12 +2547,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
&::-webkit-slider-thumb:hover {
background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
background-image: radial-gradient(var(--songProgressColor) 2px, transparent 3px, transparent 10px);
transform: scale(1.2);
}
&::-webkit-slider-thumb:active {
background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
background-image: radial-gradient(var(--songProgressColor) 3px, transparent 4px, transparent 10px);
transform: scale(1);
}
@ -2820,7 +2820,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
width: 12px;
height: 12px;
border-radius: 100%;
background: var(--keyColor);
background: var(--songProgressColor);
cursor: default;
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
}
@ -2829,7 +2829,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
width: 8px;
height: 8px;
border-radius: 100%;
background: var(--keyColor);
background: var(--songProgressColor);
cursor: default;
}
}