80 lines
1.5 KiB
CSS
80 lines
1.5 KiB
CSS
.drop {
|
|
padding: 2px 5px;
|
|
display: block;
|
|
color: #6c7a89;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
|
|
summary {
|
|
display: block;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
summary::after {
|
|
margin-left: .5em;
|
|
font-family: monospace;
|
|
content: '▶';
|
|
}
|
|
|
|
&.down {
|
|
summary ~ * {
|
|
top: 2em;
|
|
}
|
|
|
|
&[open] {
|
|
summary::after {
|
|
font-family: monospace;
|
|
content: '▼';
|
|
}
|
|
}
|
|
}
|
|
|
|
&.up {
|
|
summary ~ * {
|
|
bottom: 2em;
|
|
}
|
|
|
|
&[open] {
|
|
summary::after {
|
|
font-family: monospace;
|
|
content: '▲';
|
|
}
|
|
}
|
|
}
|
|
|
|
summary ~ * {
|
|
z-index: 100;
|
|
position: absolute;
|
|
border: solid 2px #00101f;
|
|
border-radius: .5em;
|
|
background: #01010c radial-gradient(at bottom center, #00101f, #000614, #01010c) no-repeat;
|
|
box-shadow: 0 1px 1em #000;
|
|
max-height: 50vh;
|
|
overflow: auto;
|
|
left: 30%;
|
|
}
|
|
|
|
nav a {
|
|
display: block;
|
|
padding: .2em 3em;
|
|
color: #6c7a89;
|
|
text-decoration: none;
|
|
|
|
&.selected {
|
|
color: orange;
|
|
}
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
text-decoration: underline;
|
|
background: #01010c radial-gradient(at bottom center, #00101f, #000614, #01010c) no-repeat;
|
|
}
|
|
}
|
|
}
|