heckyel/yt-local
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FrontEnd]: fix dropdown design

Browse Source
This commit is contained in:
Jesús 2021-12-31 18:15:59 -05:00
parent f572bb62aa
commit 90338c25c6
No known key found for this signature in database
GPG Key ID: F6EE7BC59A315766
9 changed files with 39 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
youtube/static/channel.css
View File

@ -508,22 +508,19 @@ hr {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 120px); grid-template-columns: 100px auto;
grid-template-areas: grid-template-areas:
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
background: var(--background);
padding-right: 4rem;
z-index: 1;
position: absolute; position: absolute;
z-index: 1;
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem; width: calc(100% + 100px);
width: 100%; max-height: 80vh;
max-height: 45vh; overflow-y: scroll;
overflow: hidden;
} }
.author-container { .author-container {
@ -539,7 +536,7 @@ hr {
grid-area: playlist; grid-area: playlist;
} }
.play-clean { .play-clean {
grid-template-columns: minmax(50px, 120px); grid-template-columns: 100px auto;
} }
.play-clean > button { .play-clean > button {
padding-left: 0px; padding-left: 0px;

7
youtube/static/home.css
View File

@ -189,7 +189,7 @@ label[for=options-toggle-cbox] {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 120px); grid-template-columns: 100px auto;
grid-template-areas: grid-template-areas:
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
@ -200,9 +200,8 @@ label[for=options-toggle-cbox] {
z-index: 1; z-index: 1;
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem; width: calc(100% + 100px);
width: 100%; max-height: 80vh;
max-height: 45vh;
overflow-y: scroll; overflow-y: scroll;
} }

13
youtube/static/local_playlist.css
View File

@ -477,20 +477,17 @@ hr {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 120px); grid-template-columns: 100px auto;
grid-template-areas: grid-template-areas:
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
background: var(--background);
padding-right: 4rem;
z-index: 1;
position: absolute; position: absolute;
z-index: 1;
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem; width: calc(100% + 100px);
width: 100%; max-height: 80vh;
max-height: 45vh;
overflow-y: scroll; overflow-y: scroll;
} }
.playlist-metadata { .playlist-metadata {
@ -506,7 +503,7 @@ hr {
grid-area: playlist; grid-area: playlist;
} }
.play-clean { .play-clean {
grid-template-columns: minmax(50px, 120px); grid-template-columns: 100px auto;
} }
.play-clean > button { .play-clean > button {
padding-left: 0px; padding-left: 0px;

12
youtube/static/playlist.css
View File

@ -487,19 +487,17 @@ hr {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 120px); grid-template-columns: 100px auto;
grid-template-areas: grid-template-areas:
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
padding-right: 4rem;
z-index: 1;
position: absolute; position: absolute;
z-index: 1;
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem; width: calc(100% + 100px);
width: 100%; max-height: 80vh;
max-height: 45vh;
overflow-y: scroll; overflow-y: scroll;
} }
.playlist-metadata { .playlist-metadata {
@ -515,7 +513,7 @@ hr {
grid-area: playlist; grid-area: playlist;
} }
.play-clean { .play-clean {
grid-template-columns: minmax(50px, 120px); grid-template-columns: 100px auto;
} }
.play-clean > button { .play-clean > button {
padding-left: 0px; padding-left: 0px;

13
youtube/static/search.css
View File

@ -465,20 +465,17 @@ hr {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 120px); grid-template-columns: 100px auto;
grid-template-areas: grid-template-areas:
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
background: var(--background);
padding-right: 4rem;
z-index: 1;
position: absolute; position: absolute;
z-index: 1;
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem; width: calc(100% + 100px);
width: 100%; max-height: 80vh;
max-height: 45vh;
overflow-y: scroll; overflow-y: scroll;
} }
/* playlist */ /* playlist */
@ -490,7 +487,7 @@ hr {
grid-area: playlist; grid-area: playlist;
} }
.play-clean { .play-clean {
grid-template-columns: minmax(50px, 120px); grid-template-columns: 100px auto;
} }
.play-clean > button { .play-clean > button {
padding-left: 0px; padding-left: 0px;

8
youtube/static/settings.css
View File

@ -222,19 +222,17 @@ label[for=options-toggle-cbox] {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 120px); grid-template-columns: 100px auto;
grid-template-areas: grid-template-areas:
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
position: absolute; position: absolute;
padding-right: 4rem;
z-index: 1; z-index: 1;
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem; width: calc(100% + 100px);
width: 100%; max-height: 80vh;
max-height: 45vh;
overflow-y: scroll; overflow-y: scroll;
} }
.main { .main {

9
youtube/static/subscription.css
View File

@ -480,7 +480,7 @@ hr {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 120px); grid-template-columns: 100px auto;
grid-template-areas: grid-template-areas:
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
@ -490,9 +490,8 @@ hr {
position: absolute; position: absolute;
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem; width: calc(100% + 100px);
width: 100%; max-height: 80vh;
max-height: 45vh;
overflow-y: scroll; overflow-y: scroll;
} }
.sidebar-links { .sidebar-links {
@ -508,7 +507,7 @@ hr {
grid-area: playlist; grid-area: playlist;
} }
.play-clean { .play-clean {
grid-template-columns: minmax(50px, 120px); grid-template-columns: 100px auto;
} }
.play-clean > button { .play-clean > button {
padding-left: 0px; padding-left: 0px;

11
youtube/static/subscription_manager.css
View File

@ -328,20 +328,17 @@ hr {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 120px); grid-template-columns: 100px auto;
grid-template-areas: grid-template-areas:
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
background: var(--background);
padding-right: 4rem;
z-index: 1;
position: absolute; position: absolute;
z-index: 1;
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem; width: calc(100% + 100px);
width: 100%; max-height: 80vh;
max-height: 45vh;
overflow-y: scroll; overflow-y: scroll;
} }
.import-export { .import-export {

10
youtube/static/watch.css
View File

@ -620,19 +620,17 @@ label[for=options-toggle-cbox] {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 120px); grid-template-columns: 100px auto;
grid-template-areas: grid-template-areas:
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
position: absolute; position: absolute;
padding-right: 4rem;
z-index: 1; z-index: 1;
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem; width: calc(100% + 100px);
width: 100%; max-height: 80vh;
max-height: 45vh;
overflow-y: scroll; overflow-y: scroll;
} }
.playlist { .playlist {
@ -643,7 +641,7 @@ label[for=options-toggle-cbox] {
grid-area: playlist; grid-area: playlist;
} }
.play-clean { .play-clean {
grid-template-columns: minmax(50px, 120px); grid-template-columns: 100px auto;
} }
.play-clean > button { .play-clean > button {
padding-bottom: 6px; padding-bottom: 6px;