Korbs/poke
Korbs/poke
1
Fork 0
Code Activity

add dropdown menu

Browse source
This commit is contained in:
Ashley 2022-12-31 14:07:55 +00:00
parent 5ca91af393
commit 741810ac9b
1 changed files with 65 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
css/poketube.css
View file

@ -126,11 +126,16 @@ a {
color: var(--text-link);
}
.video > .info > .title {
font-family: var(--text-font-primary);
width: 10em;
}
.dropdown__menu > a {
text-decoration: none;
}
.video-info-panel > .video-title > a {
white-space: nowrap;
}
@ -416,3 +421,63 @@ a {
border: var(--div-border-color);
border-style: solid;
}
.dropdown {
position: relative;
display: flex;
}
.dropdown > input[type="checkbox"] {
display: none;
}
.dropdown > label {
width: 100%;
height: 100%;
margin: -8px;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.dropdown__menu {
position: absolute;
z-index: 999;
display: none;
margin-right: 4em;
top: 40px;
padding: 6px 0;
margin: 0;
width: 300px;
border-radius: 8px;
box-shadow: var(--border-color) 0 0 5px;
background-color: var(--context-menu-background)
}
.dropdown__item {
display: flex;
flex-direction: row;
align-items: center;
padding: 0 16px;
height: 40px;
column-gap: 16px;
color: var(--text-primary);
text-decoration: none;
}
.dropdown__item:hover {
background-color: var(--chip-background-hover);
}
.dropdown__item:active {
background-color: var(--chip-background-active);
}
.dropdown > input[type="checkbox"]:checked ~ div,
.dropdown__menu:target {
display: block;
}