.menu {
display: flex;
flex-direction: column;
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
a,
a:visited {
line-height: $lineheight_rel;
padding: $lineheight_rel / 4;
justify-content: space-between;
align-items: center;
text-decoration: none;
word-wrap: none;
text-overflow: ellipsis;
overflow: hidden;
.badge {
a {
color: var(--text-color);
outline-color: var(--text-color);
&:hover,
&:active,
&.submenu:focus {
background-color: var(--link-color-hover);
.submenu .fa-caret-down {
position: relative;
top: 2px;
font-size:0.8em;
.toolbar {
flex-direction: row;
padding: $lineheight_rel/4;
ul {
flex-grow: 1;
text-align: center;
span,
em,
strong,
&.toolbar-element {
display: block;
padding: $lineheight_rel/3 $lineheight_rel/2;
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 0rem;
left: 0;
display: none;
padding:0.33rem;
z-index:2;
background-color: $color-background-alt;
&:hover ul,
ul:hover,
&:focus-within ul {
visibility: visible;
opacity: 1;
border-radius: $card-radius;
box-shadow:0px 1px 1px rgba(0,0,0,0.2);
width: max-content;
text-align:left;
.menu-divider,
.menu ul h1,
ul.menu h1,
.menu h2,
ul.menu h2 {
left: -$lineheight_rel / 4;
font-weight: $fontweight_hyper;
padding-top: $lineheight_rel / 4;
padding-bottom: $lineheight_rel / 4;
font-size:1em;
line-height:$lineheight_rel;
.menu-label {
@include button-hover();
padding-left: $button_small;
padding-right: $button_small;