discourse/app/assets/stylesheets/mobile/header.scss

92 lines
2.1 KiB
SCSS

// --------------------------------------------------
// Discourse header
// --------------------------------------------------
.d-header {
height: 3.66em;
// some protection for text-only site titles
.title {
max-width: 75%;
@include ellipsis;
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
// This acts as a placeholder if for some reason the small logo takes a while
// to load - prevents topic title from shifting after the small logo loads.
// It's hardcoded to 36px because that's the width we use inline for the small
// logo in the home-logo widget.
min-width: 36px;
a {
display: block;
width: 100%;
}
}
#site-logo {
max-height: 2.4em;
max-width: 100%;
}
#site-text-logo {
margin: 0;
font-size: $font-up-1;
}
.extra-info-wrapper {
.extra-info {
// header title should not be centered if there's no tags / categories
&:not(.two-rows) {
min-height: 2.25em;
}
.header-title {
font-size: $font-0;
margin: 0 0 0.35em 0;
.archetype-private_message & {
// PMs might have participant avatars in the header
margin: 0 0 0.15em 0;
}
}
.private-message-glyph-wrapper {
float: left;
}
}
}
button.sign-up-button {
display: none;
}
// Hide header avatar + icons while topic title is visible in mobile header
.extra-info-wrapper + .panel {
.header-buttons,
.d-header-icons {
display: none;
}
}
// Fade in header avatar + icons if topic title is not visible in mobile header
.panel {
animation: fadein 0.5s;
}
// A rendering bug in safari causes header SVGs to jitter after animations.
// translateZ() forces gpu rendering which fixes the issue.
.d-header-icons {
-webkit-transform: translateZ(0);
}
}
.d-header-icons {
.d-icon {
line-height: $line-height-medium;
}
.active .icon {
&:after {
margin-top: -1px;
}
}
}
#main-outlet {
padding-top: 4.2857em;
}
.search-link .badge-category {
display: none;
}