.toolbar { padding: 0; margin: 0; background: @background; color: @foreground; line-height: 30px; list-style-type: none; z-index: 99; hr { border: none; border-top: 1px solid rgba(128, 128, 128, .2); margin: 4px 8px; } .shortcut { color: fade(@foreground, 50%); margin-left: 1em; } //nested menus (default) li { display: flex; padding: 4px 8px; justify-content: space-between; &:hover, &.active { background: fade(@foreground, 20%); } &.parent:hover, &.active { & > .menu { display: block; } } .menu { display: none; min-width: 150px; position: absolute; margin-left: 80%; margin-top: -2em; z-index: 999; background: @background; padding: 0; box-shadow: 4px 8px 16px rgba(0, 0, 0, .2); } &.parent::after { content: "►"; font-family: serif; position: absolute; right: 4px; color: fade(@foreground, 50%); } } //base-level menus & > li { display: inline-block; padding: 4px 8px; line-height: initial; & > .menu { margin-left: -8px; margin-top: 4px; } } } .bottom-bar { margin: 0; padding: 2px 5px; .status-text { display: flex; flex-flow: column; justify-content: center; } select { margin: 0; border: none; width: 150px; background: @background; color: @foreground; } }