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-27 16:13:35 -05:00
parent b21b2a6009
commit 217541bd9c
No known key found for this signature in database
GPG Key ID: F6EE7BC59A315766
11 changed files with 117 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
youtube/static/channel.css
View File

@ -202,8 +202,10 @@ label[for=options-toggle-cbox] {
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
display: inline-grid; display: block;
white-space: nowrap; white-space: nowrap;
background: var(--secondary-background);
padding: 0.5rem 1rem;
} }
/*- ----------- End Menu Mobile sin JS ------------- */ /*- ----------- End Menu Mobile sin JS ------------- */
@ -506,7 +508,7 @@ hr {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 100px); grid-template-columns: minmax(50px, 120px);
grid-template-areas: grid-template-areas:
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
@ -517,6 +519,13 @@ hr {
position: absolute; position: absolute;
} }
#options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem;
width: 100%;
max-height: 45vh;
overflow: hidden;
}
.author-container { .author-container {
max-width: 50vw; max-width: 50vw;
} }
@ -530,7 +539,7 @@ hr {
grid-area: playlist; grid-area: playlist;
} }
.play-clean { .play-clean {
grid-template-columns: minmax(50px, 100px); grid-template-columns: minmax(50px, 120px);
} }
.play-clean > button { .play-clean > button {
padding-left: 0px; padding-left: 0px;

10
youtube/static/comments.css
View File

@ -107,9 +107,7 @@ header {
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
background: var(--background);
padding-right: 4rem; padding-right: 4rem;
z-index: 1;
} }
.dropdown-label { .dropdown-label {
grid-area: dropdown-label; grid-area: dropdown-label;
@ -274,7 +272,7 @@ label[for=options-toggle-cbox] {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 100px); grid-template-columns: minmax(50px, 120px);
grid-template-areas: grid-template-areas:
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
@ -282,6 +280,12 @@ label[for=options-toggle-cbox] {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
} }
#options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem;
width: 100%;
max-height: 45vh;
overflow-y: scroll;
}
.footer { .footer {
display: grid; display: grid;

15
youtube/static/home.css
View File

@ -97,7 +97,6 @@ header {
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
z-index: 1;
} }
.dropdown-label { .dropdown-label {
grid-area: dropdown-label; grid-area: dropdown-label;
@ -137,8 +136,10 @@ label[for=options-toggle-cbox] {
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
display: inline-grid; display: block;
white-space: nowrap; white-space: nowrap;
background: var(--secondary-background);
padding: 0.5rem 1rem;
} }
/*- ----------- End Menu Mobile sin JS ------------- */ /*- ----------- End Menu Mobile sin JS ------------- */
@ -188,15 +189,21 @@ label[for=options-toggle-cbox] {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 100px); grid-template-columns: minmax(50px, 120px);
grid-template-areas: grid-template-areas:
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
z-index: 1;
position: absolute; position: absolute;
background: var(--background); background: var(--background);
padding-right: 4rem; padding-right: 4rem;
z-index: 1;
}
#options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem;
width: 100%;
max-height: 45vh;
overflow-y: scroll;
} }
.footer { .footer {

14
youtube/static/license.css
View File

@ -97,7 +97,6 @@ header {
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
z-index: 1;
} }
.dropdown-label { .dropdown-label {
grid-area: dropdown-label; grid-area: dropdown-label;
@ -137,8 +136,10 @@ label[for=options-toggle-cbox] {
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
display: inline-grid; display: block;
white-space: nowrap; white-space: nowrap;
background: var(--secondary-background);
padding: 0.5rem 1rem;
} }
/*- ----------- End Menu Mobile sin JS ------------- */ /*- ----------- End Menu Mobile sin JS ------------- */
@ -265,7 +266,7 @@ label[for=options-toggle-cbox] {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 100px); grid-template-columns: minmax(50px, 120px);
grid-template-areas: grid-template-areas:
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
@ -273,7 +274,12 @@ label[for=options-toggle-cbox] {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
} }
#options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem;
width: 100%;
max-height: 45vh;
overflow-y: scroll;
}
.footer { .footer {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);

16
youtube/static/local_playlist.css
View File

@ -102,7 +102,6 @@ header {
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
z-index: 1;
} }
.dropdown-label { .dropdown-label {
grid-area: dropdown-label; grid-area: dropdown-label;
@ -202,8 +201,10 @@ label[for=options-toggle-cbox] {
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
display: inline-grid; display: block;
white-space: nowrap; white-space: nowrap;
background: var(--secondary-background);
padding: 0.5rem 1rem;
} }
/*- ----------- End Menu Mobile sin JS ------------- */ /*- ----------- End Menu Mobile sin JS ------------- */
@ -476,7 +477,7 @@ hr {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 100px); grid-template-columns: minmax(50px, 120px);
grid-template-areas: grid-template-areas:
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
@ -486,7 +487,12 @@ hr {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
} }
#options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem;
width: 100%;
max-height: 45vh;
overflow-y: scroll;
}
.playlist-metadata { .playlist-metadata {
max-width: 50vw; max-width: 50vw;
} }
@ -500,7 +506,7 @@ hr {
grid-area: playlist; grid-area: playlist;
} }
.play-clean { .play-clean {
grid-template-columns: minmax(50px, 100px); grid-template-columns: minmax(50px, 120px);
} }
.play-clean > button { .play-clean > button {
padding-left: 0px; padding-left: 0px;

17
youtube/static/playlist.css
View File

@ -102,7 +102,6 @@ header {
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
z-index: 1;
} }
.dropdown-label { .dropdown-label {
grid-area: dropdown-label; grid-area: dropdown-label;
@ -202,8 +201,10 @@ label[for=options-toggle-cbox] {
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
display: inline-grid; display: block;
white-space: nowrap; white-space: nowrap;
background: var(--secondary-background);
padding: 0.5rem 1rem;
} }
/*- ----------- End Menu Mobile sin JS ------------- */ /*- ----------- End Menu Mobile sin JS ------------- */
@ -486,17 +487,21 @@ hr {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 100px); grid-template-columns: minmax(50px, 120px);
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; padding-right: 4rem;
z-index: 1; z-index: 1;
position: absolute; position: absolute;
} }
#options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem;
width: 100%;
max-height: 45vh;
overflow-y: scroll;
}
.playlist-metadata { .playlist-metadata {
max-width: 50vw; max-width: 50vw;
} }
@ -510,7 +515,7 @@ hr {
grid-area: playlist; grid-area: playlist;
} }
.play-clean { .play-clean {
grid-template-columns: minmax(50px, 100px); grid-template-columns: minmax(50px, 120px);
} }
.play-clean > button { .play-clean > button {
padding-left: 0px; padding-left: 0px;

16
youtube/static/search.css
View File

@ -102,7 +102,6 @@ header {
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
z-index: 1;
} }
.dropdown-label { .dropdown-label {
grid-area: dropdown-label; grid-area: dropdown-label;
@ -202,8 +201,10 @@ label[for=options-toggle-cbox] {
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
display: inline-grid; display: block;
white-space: nowrap; white-space: nowrap;
background: var(--secondary-background);
padding: 0.5rem 1rem;
} }
/*- ----------- End Menu Mobile sin JS ------------- */ /*- ----------- End Menu Mobile sin JS ------------- */
@ -464,7 +465,7 @@ hr {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 100px); grid-template-columns: minmax(50px, 120px);
grid-template-areas: grid-template-areas:
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
@ -474,7 +475,12 @@ hr {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
} }
#options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem;
width: 100%;
max-height: 45vh;
overflow-y: scroll;
}
/* playlist */ /* playlist */
.playlist { .playlist {
display: grid; display: grid;
@ -484,7 +490,7 @@ hr {
grid-area: playlist; grid-area: playlist;
} }
.play-clean { .play-clean {
grid-template-columns: minmax(50px, 100px); grid-template-columns: minmax(50px, 120px);
} }
.play-clean > button { .play-clean > button {
padding-left: 0px; padding-left: 0px;

16
youtube/static/settings.css
View File

@ -97,7 +97,6 @@ header {
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
z-index: 1;
} }
.dropdown-label { .dropdown-label {
grid-area: dropdown-label; grid-area: dropdown-label;
@ -137,8 +136,10 @@ label[for=options-toggle-cbox] {
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
display: inline-grid; display: block;
white-space: nowrap; white-space: nowrap;
background: var(--secondary-background);
padding: 0.5rem 1rem;
} }
/*- ----------- End Menu Mobile sin JS ------------- */ /*- ----------- End Menu Mobile sin JS ------------- */
@ -221,15 +222,20 @@ label[for=options-toggle-cbox] {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 100px); grid-template-columns: minmax(50px, 120px);
grid-template-areas: grid-template-areas:
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
z-index: 1;
position: absolute; position: absolute;
background: var(--background);
padding-right: 4rem; padding-right: 4rem;
z-index: 1;
}
#options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem;
width: 100%;
max-height: 45vh;
overflow-y: scroll;
} }
.main { .main {
display: grid; display: grid;

17
youtube/static/subscription.css
View File

@ -102,7 +102,6 @@ header {
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
z-index: 1;
} }
.dropdown-label { .dropdown-label {
grid-area: dropdown-label; grid-area: dropdown-label;
@ -202,8 +201,10 @@ label[for=options-toggle-cbox] {
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
display: inline-grid; display: block;
white-space: nowrap; white-space: nowrap;
background: var(--secondary-background);
padding: 0.5rem 1rem;
} }
/*- ----------- End Menu Mobile sin JS ------------- */ /*- ----------- End Menu Mobile sin JS ------------- */
@ -479,17 +480,21 @@ hr {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 100px); grid-template-columns: minmax(50px, 120px);
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; padding-right: 4rem;
z-index: 1; z-index: 1;
position: absolute; position: absolute;
} }
#options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem;
width: 100%;
max-height: 45vh;
overflow-y: scroll;
}
.sidebar-links { .sidebar-links {
max-width: 50vw; max-width: 50vw;
} }
@ -503,7 +508,7 @@ hr {
grid-area: playlist; grid-area: playlist;
} }
.play-clean { .play-clean {
grid-template-columns: minmax(50px, 100px); grid-template-columns: minmax(50px, 120px);
} }
.play-clean > button { .play-clean > button {
padding-left: 0px; padding-left: 0px;

16
youtube/static/subscription_manager.css
View File

@ -102,7 +102,6 @@ header {
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
z-index: 1;
} }
.dropdown-label { .dropdown-label {
grid-area: dropdown-label; grid-area: dropdown-label;
@ -202,8 +201,10 @@ label[for=options-toggle-cbox] {
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
display: inline-grid; display: block;
white-space: nowrap; white-space: nowrap;
background: var(--secondary-background);
padding: 0.5rem 1rem;
} }
/*- ----------- End Menu Mobile sin JS ------------- */ /*- ----------- End Menu Mobile sin JS ------------- */
@ -387,7 +388,7 @@ hr {
.dropdown { .dropdown {
display: grid; display: grid;
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: minmax(50px, 100px); grid-template-columns: minmax(50px, 120px);
grid-template-areas: grid-template-areas:
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
@ -397,7 +398,12 @@ hr {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
} }
#options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem;
width: 100%;
max-height: 45vh;
overflow-y: scroll;
}
.import-export { .import-export {
max-width: 50vw; max-width: 50vw;
} }
@ -419,7 +425,7 @@ hr {
grid-area: playlist; grid-area: playlist;
} }
.play-clean { .play-clean {
grid-template-columns: minmax(50px, 100px); grid-template-columns: minmax(50px, 120px);
} }
.play-clean > button { .play-clean > button {
padding-left: 0px; padding-left: 0px;

19
youtube/static/watch.css
View File

@ -123,7 +123,6 @@ header {
"dropdown-label" "dropdown-label"
"dropdown-content"; "dropdown-content";
grid-area: dropdown; grid-area: dropdown;
z-index: 1;
} }
.dropdown-label { .dropdown-label {
grid-area: dropdown-label; grid-area: dropdown-label;
@ -221,9 +220,10 @@ label[for=options-toggle-cbox] {
} }
#options-toggle-cbox:checked ~ .dropdown-content { #options-toggle-cbox:checked ~ .dropdown-content {
display: inline-grid; display: block;
white-space: nowrap; white-space: nowrap;
padding-left: 1rem; background: var(--secondary-background);
padding: 0.5rem 1rem;
} }
/*- ----------- End Menu Mobile sin JS ------------- */ /*- ----------- End Menu Mobile sin JS ------------- */
@ -625,12 +625,15 @@ label[for=options-toggle-cbox] {
"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;
padding-right: 4rem;
z-index: 1;
}
#options-toggle-cbox:checked ~ .dropdown-content {
padding: 0rem 3rem 1rem 1rem;
width: 100%;
max-height: 45vh;
overflow-y: scroll;
} }
.playlist { .playlist {
display: grid; display: grid;