/* Header ========================================================================== */ /** * Header content area. * * Example HTML: * * *
* Content *
*
* * */ .txp-header { @include gradient-linear($color-accent-gradient-from, $color-accent-gradient-to); display: flex; position: fixed; z-index: 1000; top: 0; right: 0; left: 0; height: 2.69230769230769em; // 35px / 13px padding: 0 4%; border-top: 1px solid $color-accent-gradient-to; border-bottom: 1px solid darken($color-accent-gradient-to, 6%); @if $flat-theme < 1 { box-shadow: 0 0.2em 0.25em rgba(#000000, 0.15); } } @include dark-mode { .txp-header a { color: $color-text; &:focus { outline: thin solid $color-link-focus; } } } /** * Hide header content area on login panels. */ .login { .txp-header { display: none; } } /** * Textpattern logo. * * Example HTML: * *
*

* My site *

*/ .txp-header h1 { flex: none; width: 8.125em; // 130px / 16px height: 2em; // 32px / 16px margin: 0.0625em 0.5em 0 0; // 1px / 16px, 6px / 16px background: url("../img/sprite.svg") no-repeat; background-size: 13em 2em; // 208px / 16px + 32px / 16px font-size: 16px; a { display: block; width: 8.125em; height: 2em; } span { @include hide-text; display: block; } } /** * Reverse Textpattern logo margin in RTL languages. */ [dir="rtl"] .txp-header h1 { margin: 0.0625em 0 0 0.5em; // 1px / 16px, 6px / 16px } /** * 'View site' link. * * Example HTML: * *

* * My site * *

*/ .txp-view-site { flex: 1; margin: 0 1em; padding: 0 1px; overflow: hidden; line-height: 2.69230769230769; // 35px / 13px white-space: nowrap; span { display: block; overflow: hidden; color: $color-text; text-overflow: ellipsis; } a { color: $color-text; font-weight: bold; } } /** * Switch between Dark Mode/Light Mode manually. * * Example HTML: * *

* * Switch light/dark mode * *

*/ .txp-lightswitch { flex: none; margin: 0 0.75em; // 12px / 16px; padding: 0; overflow: inherit; font-size: 16px; a { display: block; position: relative; top: 50%; width: 1.5em; height: 1.5em; transform: translateY(-50%); border: 1px solid darken($color-accent-gradient-to, 6%); border-radius: 0.75em; background: rgba($color-text-inverse, 0.6); text-align: center; &:hover { background: rgba($color-text-inverse, 0.8); } &:focus { border-color: $color-link-focus; outline: 2px solid transparent; // Allows for repainting in high contrast modes. } } } @include dark-mode { .txp-lightswitch a { background: transparent; &:hover { background: rgba($color-text-inverse, 0.25); } &:focus { border-color: $color-link-focus; outline: 2px solid transparent; // Allows for repainting in high contrast modes. } .ui-icon { filter: none; } } } /** * Positioning of logout button. * * Example HTML: * *

*/ .txp-logout { position: relative; top: -0.846153846153846em; // 11px / 13px flex: none; } @include dark-mode { .txp-logout a:focus { border-color: $color-link-focus; outline: 2px solid transparent; // Allows for repainting in high contrast modes. } }