.header { min-height: 40px; -webkit-app-region: drag; -webkit-user-select: none; &.bordered { border-bottom: 1px solid @color-divider; } display: flex; .no-drag { -webkit-app-region: no-drag; } .left-header { display: flex; min-width: @sidebar-width + 1px; } .updates { flex: 1 auto; display: flex; align-items: center; justify-content: flex-end; margin-right: 20px; } .logo { position: absolute; right: 1rem; top: 0.8rem; } .login-wrapper { flex: 1 auto; display: flex; justify-content: flex-end; } .login { flex: 0 auto; display: flex; align-items: center; border-left: 1px solid @color-divider; border-right: 1px solid @color-divider; padding: 0 1rem 0 1rem; .box-button(); &:active { img, span { -webkit-filter: brightness(0.9); } } img { margin: 0 5px; } } .buttons { display: flex; margin: 0 1.5rem; align-items: center; justify-content: center; &:hover { .button-minimize.enabled { .at2x('minimize.png', 10px, 10px); } .button-close.enabled { .at2x('close.png', 10px, 10px); } .button-fullscreen.enabled { .at2x('fullscreen.png', 10px, 10px); } .button-fullscreenclose.enabled { .at2x('fullscreenclose.png', 10px, 10px); } } .button { flex: 0 auto; .traffic-light(); &.button-close { background-color: @traffic-light-red; border-color: @traffic-light-red-border; } &.button-minimize { background-color: @traffic-light-yellow; border-color: @traffic-light-yellow-border; } &.button-fullscreen { background-color: @traffic-light-green; border-color: @traffic-light-green-border; } &.button-fullscreenclose { background-color: @traffic-light-green; border-color: @traffic-light-green-border; } &.disabled { background-color: @traffic-light-gray; border-color: @traffic-light-gray-border; } } } }