#header-container { height: @app-header-height; display: table; & > div { display: table-cell; height: @app-header-height; white-space: nowrap; vertical-align: middle; color: #fff; } } #header-logo { background-color: @app-header-bg-color-dark; min-width: 15px + 90px + 5px; .background-ximage('@{common-image-path}/header/header-logo.png', '@{common-image-path}/header/header-logo@2x.png', 86px); background-repeat: no-repeat; background-position: 15px center; cursor: pointer; } #header-caption { & > div { position: relative; background-color: @app-header-bg-color-dark; color: lighten(@app-header-bg-color-light, 20%) !important; padding-right: 15px; cursor: default; z-index: 1; white-space: nowrap; height: @app-header-height; line-height: @app-header-height; &:after { content: ''; position: absolute; top: 0; right: -@app-header-height / 2; width: @app-header-height / 2; height: @app-header-height; border-top: @app-header-height / 2 solid transparent; border-left: @app-header-height / 3 solid @app-header-bg-color-dark; border-bottom: @app-header-height / 2 solid transparent; } } } #header-developer { background-color: #ffb400; padding-left: 15px + @app-header-height / 3; & > div { position: relative; background-color: #ffb400; color: #6e4e00 !important; padding-right: 15px; cursor: default; z-index: 1; white-space: nowrap; height: @app-header-height; line-height: @app-header-height; &:after { content: ''; position: absolute; top: 0; right: -@app-header-height / 2; width: @app-header-height / 2; height: @app-header-height; border-top: @app-header-height / 2 solid transparent; border-left: @app-header-height / 3 solid #ffb400; border-bottom: @app-header-height / 2 solid transparent; } } } #header-documentcaption { width: 100%; max-width: 100px; overflow: hidden; text-overflow: ellipsis; background-color: @app-header-bg-color; padding: 0 7px + @app-header-height / 3; cursor: default; div { display: inline-block; padding: 2px 8px; &.renamed { background-color: @app-header-bg-color-dark; } } } #header-back { & > div { position: relative; background-color: @app-header-bg-color-light; padding: 0 15px 0 15px + @app-header-height / 3; cursor: pointer; white-space: nowrap; height: @app-header-height; line-height: @app-header-height - 2px; &:after { content: ''; position: absolute; top: 0; left: 0; width: @app-header-height / 2; height: @app-header-height; border-top: @app-header-height / 2 solid transparent; border-left: @app-header-height / 3 solid @app-header-bg-color; border-bottom: @app-header-height / 2 solid transparent; } } }