website/src/styles/components/_link-tree.scss

77 lines
1.3 KiB
SCSS
Raw Normal View History

2023-06-06 20:18:12 +02:00
.link-tree {
2023-06-08 14:00:17 +02:00
position: relative;
2023-06-06 20:18:12 +02:00
padding: 1em;
overflow-y: auto;
2023-06-08 14:00:17 +02:00
&__switch {
position: absolute;
top: 0.5em;
left: 0.5em;
cursor: pointer;
img {
max-height: 1.5em;
}
}
2023-06-06 20:18:12 +02:00
&__heading {
2023-06-08 14:00:17 +02:00
margin-bottom: 0.5em;
2023-06-06 21:34:16 +02:00
border-bottom: 1px solid;
2023-06-06 23:37:58 +02:00
border-image: linear-gradient(to right, transparent, lightgray, transparent) 1;
2023-06-06 20:18:12 +02:00
&-text {
display: block;
text-decoration: unset;
text-align: center;
2023-06-06 23:37:58 +02:00
color: var(--c-primary);
2023-06-06 20:18:12 +02:00
}
}
&__nav {
&-list {
margin: 0;
padding-left: 0.5em;
list-style: none;
ul {
border-left: 1px solid lightgray;
}
}
// &-list-item {
// }
&-list-text {
2023-06-06 23:37:58 +02:00
padding-inline: 0.25em;
2023-06-06 20:18:12 +02:00
text-decoration: unset;
2023-06-06 20:43:21 +02:00
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
2023-06-06 20:18:12 +02:00
2023-06-06 23:37:58 +02:00
&.link {
color: var(--c-primary);
}
&:not(.current):hover {
2023-06-06 20:18:12 +02:00
text-decoration: underline;
}
2023-06-06 23:37:58 +02:00
&.current {
background-color: var(--c-primary);
2023-06-08 14:00:17 +02:00
border: unset;
2023-06-06 23:37:58 +02:00
border-radius: 0.33em;
color: white;
2023-06-08 14:00:17 +02:00
cursor: pointer;
2023-06-06 23:37:58 +02:00
}
2023-06-06 20:18:12 +02:00
}
}
}
2023-06-08 14:00:17 +02:00
#link-tree-mode {
&:checked ~ .v-prime {
display: none;
}
&:not(:checked) ~ .v-alt {
display: none;
}
}