@import "../common/foundation/variables"; @import "../common/foundation/mixins"; // -------------------------------------------------- // Discourse header // -------------------------------------------------- .d-header { padding-left: 10px !important; padding-right: 10px !important; min-width: 100%; position: absolute; top: 0; z-index: 1001; background-color: $primary_background_color; box-shadow: 0 0 3px rgba($primary_shadow_color, .6); .docked & { position: fixed; } a.star {float: left;} .contents { margin: 10px 0; } .title { display: table; float: left; height: 40px; > a { display: table-cell; vertical-align: middle; } } #site-logo { max-width: 122px; max-height: 40px; } .fa-home { font-size: 20px; line-height: 40px; } .panel { float: right; position: relative; margin-right: 20px; } .current-username { float: left; display: none; a { color: $primary_text_color; font-size: 14px; line-height: 40px; } button { margin-top: 8px; } } .icons { float: left; text-align: center; margin: 0 0 0 15px; list-style: none; > li { float: left; } .icon { display: block; padding: 4px; color: $nav-button-color; text-decoration: none; cursor: pointer; &:hover { color: $nav-button-color-hover; background-color: $nav-button-background-color-hover; } &:active { color: $nav-button-color-active; background-color: $nav-button-background-color-active; } } .active .icon { position: relative; color: lighten($primary_text_color, 60%); background-color: $primary_background_color; cursor: default; @include box-shadow((6px 0 6px -6px rgba($primary_shadow_color, 0.2), -6px 0 6px -6px rgba($primary_shadow_color, 0.2), inset 0 13px 13px -13px rgba($primary_shadow_color, 0.1))); &:after { display: block; position: absolute; top: 100%; left: 0; z-index: 1101; width: 100%; height: 0; content: ""; border-top: 1px solid $primary_border_color; } } [class^="fa fa-"] { width: 32px; height: 32px; font-size: 20px; line-height: 32px; display: inline-block; } .notifications { position: relative; } .badge-notification { position: absolute; top: -9px; z-index: 1; margin-left: 0; } .unread-notifications { right: -4px; background-color: $emphasis_background_color; color: $emphasis_text_color; } .unread-private-messages { left: -4px; background-color: $success_text_color; } } .flagged-posts { background-color: $warning_text_color; } } #main { position: relative; } #main-outlet { padding-top: 60px; } // Dropdowns // -------------------------------------------------- .d-dropdown { display: none; width: 290px; position: absolute; top: 100%; right: 0; z-index: 1100; margin-top: -1px; border: 1px solid $primary_border_color; background-color: $primary_background_color; @include box-shadow(0 1px 1px rgba($primary_shadow_color, 0.2)); // Common ul { margin: 0; list-style: none; } li { padding: 5px; font-size: 13px; line-height: 16px; .fa { margin-right: 3px; } } .heading { color: $primary_text_color; font-weight: bold; font-size: 12px; line-height: 15px; } .selected { background-color: $header-item-highlight; } // Notifications &#notifications-dropdown { .fa { color: #777; } li { background-color: $header-item-highlight; } .read { background-color: $primary_background_color; } .none { padding: 5px; } } // Search input[type='text'] { width: 267px; height: 22px; margin: 5px; padding: 5px; font-size: 16px; &:focus { @include box-shadow((inset 0 1px 1px rgba($primary_shadow_color, 0.075), 0 0 4px rgba(82, 168, 236, 0.6))); } } .searching { display: block; position: absolute; top: 13px; right: 13px; color: #777; font-size: 18px; } .no-results { padding: 0 5px 5px; } .filter { float: right; } // Categories .category { float: left; background-color: transparent; } &#user-dropdown { width: 155px; } .btn { padding: 2px 8px; .fa { margin-right: 5px; } } }