/* * Application Header * */ header { &.navbar-gitlab { margin-bottom: 0; min-height: 40px; .navbar-inner { background: #F1F1F1; border-bottom: 1px solid #DDD; filter: none; .nav > li > a { color: $style_color; text-shadow: 0 1px 0 #fff; font-size: 14px; line-height: 32px; padding: 6px 10px; &:hover { background: none; } } /** NAV block with links and profile **/ .nav { float: right; margin-right: 0; } } } z-index: 10; /** * * Logo holder * */ .app_logo { float: left; margin-right: 9px; a { float: left; padding: 0px; margin: 0 6px; h1 { margin: 0; background: url('logo-black.png') no-repeat center center; background-size: 32px; float: left; height: 46px; width: 40px; @include header-font; text-indent: -9999px; } } &:hover { background-color: #EEE; } } /** * * Project / Area name * */ .project_name { position: relative; float: left; margin: 0; margin-left: 5px; @include header-font; } .profile-pic { position: relative; top: -1px; img { width: 26px; height: 26px; @include border-radius(4px); } } /** * * Search box * */ .search { margin-right: 10px; margin-left: 10px; margin-top: 8px; form { margin: 0; padding: 0; } .search-input { background-image: url("icon-search.png"); background-repeat: no-repeat; background-position: 10px; height: inherit; padding: 4px 6px; padding-left: 25px; font-size: 13px; @include border-radius(3px); border: 1px solid #c6c6c6; box-shadow: none; @include transition(all 0.15s ease-in 0s); } } /* * Dark header * */ &.header-dark { &.navbar-gitlab { .navbar-inner { background: #708090; border-bottom: 1px solid #AAA; .nav > li > a { color: #AAA; text-shadow: 0 1px 0 #444; &:hover { color: #FFF; } } } } .turbolink-spinner { color: #FFF; } .search { .search-input { background-color: #D2D5DA; background-color: rgba(255, 255, 255, 0.5); border: 1px solid #AAA; &:focus { background-color: white; } } } .search-input::-webkit-input-placeholder { color: #666; } .app_logo { a { h1 { background: url('logo-white.png') no-repeat center center; background-size: 32px; color: #fff; text-shadow: 0 1px 1px #444; } } } .project_name { a { color: #BBB; &:hover { color: #FFF; } } color: #fff; text-shadow: 0 1px 1px #444; } } .app_logo { .separator { margin-left: 0; margin-right: 0; } } .separator { float: left; height: 46px; width: 2px; background: white; border-left: 1px solid #DDD; margin-left: 10px; margin-right: 10px; } } .search .search-input { width: 300px; &:focus { width: 400px; } } @media (max-width: 1200px) { .search .search-input { width: 200px; &:focus { width: 300px; } } }