.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; } .right-header { display: flex; justify-content: flex-end; flex: 1 0; } .updates { flex: 1 auto; display: flex; align-items: center; justify-content: flex-end; margin-right: 20px; } .logo { padding: 0.9rem 1rem 0 0; } .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(); .text { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } img { position: relative; top: 0.1rem; margin: 0 0rem 0 0.4rem; width: 8px; height: 5px; } } .windows-buttons { display: flex; align-items: center; justify-content: center; } .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; } } } }