[FrontEnd]: fix dropdown design
This commit is contained in:
parent
f572bb62aa
commit
90338c25c6
@ -508,22 +508,19 @@ hr {
|
||||
.dropdown {
|
||||
display: grid;
|
||||
grid-gap: 1px;
|
||||
grid-template-columns: minmax(50px, 120px);
|
||||
grid-template-columns: 100px auto;
|
||||
grid-template-areas:
|
||||
"dropdown-label"
|
||||
"dropdown-content";
|
||||
grid-area: dropdown;
|
||||
background: var(--background);
|
||||
padding-right: 4rem;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#options-toggle-cbox:checked ~ .dropdown-content {
|
||||
padding: 0rem 3rem 1rem 1rem;
|
||||
width: 100%;
|
||||
max-height: 45vh;
|
||||
overflow: hidden;
|
||||
width: calc(100% + 100px);
|
||||
max-height: 80vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.author-container {
|
||||
@ -539,7 +536,7 @@ hr {
|
||||
grid-area: playlist;
|
||||
}
|
||||
.play-clean {
|
||||
grid-template-columns: minmax(50px, 120px);
|
||||
grid-template-columns: 100px auto;
|
||||
}
|
||||
.play-clean > button {
|
||||
padding-left: 0px;
|
||||
|
@ -189,7 +189,7 @@ label[for=options-toggle-cbox] {
|
||||
.dropdown {
|
||||
display: grid;
|
||||
grid-gap: 1px;
|
||||
grid-template-columns: minmax(50px, 120px);
|
||||
grid-template-columns: 100px auto;
|
||||
grid-template-areas:
|
||||
"dropdown-label"
|
||||
"dropdown-content";
|
||||
@ -200,9 +200,8 @@ label[for=options-toggle-cbox] {
|
||||
z-index: 1;
|
||||
}
|
||||
#options-toggle-cbox:checked ~ .dropdown-content {
|
||||
padding: 0rem 3rem 1rem 1rem;
|
||||
width: 100%;
|
||||
max-height: 45vh;
|
||||
width: calc(100% + 100px);
|
||||
max-height: 80vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
@ -477,20 +477,17 @@ hr {
|
||||
.dropdown {
|
||||
display: grid;
|
||||
grid-gap: 1px;
|
||||
grid-template-columns: minmax(50px, 120px);
|
||||
grid-template-columns: 100px auto;
|
||||
grid-template-areas:
|
||||
"dropdown-label"
|
||||
"dropdown-content";
|
||||
grid-area: dropdown;
|
||||
background: var(--background);
|
||||
padding-right: 4rem;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
#options-toggle-cbox:checked ~ .dropdown-content {
|
||||
padding: 0rem 3rem 1rem 1rem;
|
||||
width: 100%;
|
||||
max-height: 45vh;
|
||||
width: calc(100% + 100px);
|
||||
max-height: 80vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.playlist-metadata {
|
||||
@ -506,7 +503,7 @@ hr {
|
||||
grid-area: playlist;
|
||||
}
|
||||
.play-clean {
|
||||
grid-template-columns: minmax(50px, 120px);
|
||||
grid-template-columns: 100px auto;
|
||||
}
|
||||
.play-clean > button {
|
||||
padding-left: 0px;
|
||||
|
@ -487,19 +487,17 @@ hr {
|
||||
.dropdown {
|
||||
display: grid;
|
||||
grid-gap: 1px;
|
||||
grid-template-columns: minmax(50px, 120px);
|
||||
grid-template-columns: 100px auto;
|
||||
grid-template-areas:
|
||||
"dropdown-label"
|
||||
"dropdown-content";
|
||||
grid-area: dropdown;
|
||||
padding-right: 4rem;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
#options-toggle-cbox:checked ~ .dropdown-content {
|
||||
padding: 0rem 3rem 1rem 1rem;
|
||||
width: 100%;
|
||||
max-height: 45vh;
|
||||
width: calc(100% + 100px);
|
||||
max-height: 80vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.playlist-metadata {
|
||||
@ -515,7 +513,7 @@ hr {
|
||||
grid-area: playlist;
|
||||
}
|
||||
.play-clean {
|
||||
grid-template-columns: minmax(50px, 120px);
|
||||
grid-template-columns: 100px auto;
|
||||
}
|
||||
.play-clean > button {
|
||||
padding-left: 0px;
|
||||
|
@ -465,20 +465,17 @@ hr {
|
||||
.dropdown {
|
||||
display: grid;
|
||||
grid-gap: 1px;
|
||||
grid-template-columns: minmax(50px, 120px);
|
||||
grid-template-columns: 100px auto;
|
||||
grid-template-areas:
|
||||
"dropdown-label"
|
||||
"dropdown-content";
|
||||
grid-area: dropdown;
|
||||
background: var(--background);
|
||||
padding-right: 4rem;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
#options-toggle-cbox:checked ~ .dropdown-content {
|
||||
padding: 0rem 3rem 1rem 1rem;
|
||||
width: 100%;
|
||||
max-height: 45vh;
|
||||
width: calc(100% + 100px);
|
||||
max-height: 80vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
/* playlist */
|
||||
@ -490,7 +487,7 @@ hr {
|
||||
grid-area: playlist;
|
||||
}
|
||||
.play-clean {
|
||||
grid-template-columns: minmax(50px, 120px);
|
||||
grid-template-columns: 100px auto;
|
||||
}
|
||||
.play-clean > button {
|
||||
padding-left: 0px;
|
||||
|
@ -222,19 +222,17 @@ label[for=options-toggle-cbox] {
|
||||
.dropdown {
|
||||
display: grid;
|
||||
grid-gap: 1px;
|
||||
grid-template-columns: minmax(50px, 120px);
|
||||
grid-template-columns: 100px auto;
|
||||
grid-template-areas:
|
||||
"dropdown-label"
|
||||
"dropdown-content";
|
||||
grid-area: dropdown;
|
||||
position: absolute;
|
||||
padding-right: 4rem;
|
||||
z-index: 1;
|
||||
}
|
||||
#options-toggle-cbox:checked ~ .dropdown-content {
|
||||
padding: 0rem 3rem 1rem 1rem;
|
||||
width: 100%;
|
||||
max-height: 45vh;
|
||||
width: calc(100% + 100px);
|
||||
max-height: 80vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.main {
|
||||
|
@ -480,7 +480,7 @@ hr {
|
||||
.dropdown {
|
||||
display: grid;
|
||||
grid-gap: 1px;
|
||||
grid-template-columns: minmax(50px, 120px);
|
||||
grid-template-columns: 100px auto;
|
||||
grid-template-areas:
|
||||
"dropdown-label"
|
||||
"dropdown-content";
|
||||
@ -490,9 +490,8 @@ hr {
|
||||
position: absolute;
|
||||
}
|
||||
#options-toggle-cbox:checked ~ .dropdown-content {
|
||||
padding: 0rem 3rem 1rem 1rem;
|
||||
width: 100%;
|
||||
max-height: 45vh;
|
||||
width: calc(100% + 100px);
|
||||
max-height: 80vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.sidebar-links {
|
||||
@ -508,7 +507,7 @@ hr {
|
||||
grid-area: playlist;
|
||||
}
|
||||
.play-clean {
|
||||
grid-template-columns: minmax(50px, 120px);
|
||||
grid-template-columns: 100px auto;
|
||||
}
|
||||
.play-clean > button {
|
||||
padding-left: 0px;
|
||||
|
@ -328,20 +328,17 @@ hr {
|
||||
.dropdown {
|
||||
display: grid;
|
||||
grid-gap: 1px;
|
||||
grid-template-columns: minmax(50px, 120px);
|
||||
grid-template-columns: 100px auto;
|
||||
grid-template-areas:
|
||||
"dropdown-label"
|
||||
"dropdown-content";
|
||||
grid-area: dropdown;
|
||||
background: var(--background);
|
||||
padding-right: 4rem;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
#options-toggle-cbox:checked ~ .dropdown-content {
|
||||
padding: 0rem 3rem 1rem 1rem;
|
||||
width: 100%;
|
||||
max-height: 45vh;
|
||||
width: calc(100% + 100px);
|
||||
max-height: 80vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.import-export {
|
||||
|
@ -620,19 +620,17 @@ label[for=options-toggle-cbox] {
|
||||
.dropdown {
|
||||
display: grid;
|
||||
grid-gap: 1px;
|
||||
grid-template-columns: minmax(50px, 120px);
|
||||
grid-template-columns: 100px auto;
|
||||
grid-template-areas:
|
||||
"dropdown-label"
|
||||
"dropdown-content";
|
||||
grid-area: dropdown;
|
||||
position: absolute;
|
||||
padding-right: 4rem;
|
||||
z-index: 1;
|
||||
}
|
||||
#options-toggle-cbox:checked ~ .dropdown-content {
|
||||
padding: 0rem 3rem 1rem 1rem;
|
||||
width: 100%;
|
||||
max-height: 45vh;
|
||||
width: calc(100% + 100px);
|
||||
max-height: 80vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.playlist {
|
||||
@ -643,7 +641,7 @@ label[for=options-toggle-cbox] {
|
||||
grid-area: playlist;
|
||||
}
|
||||
.play-clean {
|
||||
grid-template-columns: minmax(50px, 120px);
|
||||
grid-template-columns: 100px auto;
|
||||
}
|
||||
.play-clean > button {
|
||||
padding-bottom: 6px;
|
||||
|
Loading…
x
Reference in New Issue
Block a user