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

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

74 lines
1.7 KiB
SCSS
Raw Normal View History

2013-09-05 15:37:07 -04:00
// --------------------------------------------------
// Discourse header
// --------------------------------------------------
.d-header {
height: 3.66em;
.title {
--d-logo-height: 2.4em;
}
#site-text-logo {
font-size: var(--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: var(--font-0);
2020-05-05 17:31:35 -04:00
// the margin-bottom here is fragile, changing it can cause tag alignment issues
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;
}
}
2013-09-05 15:37:07 -04:00
}
2017-09-06 11:29:43 -04:00
button.sign-up-button {
display: none;
2017-09-06 11:29:43 -04:00
}
// 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 {
transform: translateZ(0);
}
2017-09-06 11:29:43 -04:00
}
2017-09-06 11:29:43 -04:00
.d-header-icons {
2018-01-12 17:27:38 -05:00
.d-icon {
line-height: var(--line-height-medium);
}
2017-09-06 11:29:43 -04:00
.active .icon {
&:after {
margin-top: -1px;
}
2013-09-05 15:37:07 -04:00
}
}
2013-09-05 15:37:07 -04:00
#main-outlet {
@media only screen and (orientation: landscape) {
padding-right: env(safe-area-inset-right);
padding-left: env(safe-area-inset-left);
}
2013-09-05 15:37:07 -04:00
}