.header { padding-top: var(--header-shade-padding-top); padding-bottom: var(--header-shade-padding-bottom); width: 100%; position: relative; z-index: var(--z-index-header); } .is-bookmarks-show-link .header { position: fixed; top: 0; left: 0; } .header .header-shade, .header .header-border { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .is-header-shade-style-scroll .header .header-shade { transition: background-color var(--animation-speed-slow) ease-in-out; animation: none; } .is-header-shade-show .header .header-shade { background-color: rgb(var(--header-shade-color)); opacity: var(--header-shade-opacity); } .is-header-shade-border-top-show .header .header-border { border-top: var(--header-border-width-top) solid rgb(var(--accent)); } .is-header-shade-border-bottom-show .header .header-border { border-bottom: var(--header-border-width-bottom) solid rgb(var(--accent)); } .header-edge { background-color: transparent; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; box-shadow: inset 0 0 0 var(--line-width) rgb(var(--accent)), inset 0 0 0 calc(var(--line-width) * 2) rgba(var(--accent), 0.25); } .header-area { margin: 0 calc(var(--gutter) * -1); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; } .header-item { margin: var(--gutter); max-width: calc(100% - var(--gutter) * 2); display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; position: relative; } .is-header-search-text-align-left .header-search-input { text-align: left; } .is-header-search-text-align-center .header-search-input { text-align: center; } .is-header-search-text-align-right .header-search-input { text-align: right; } .is-header-searching .header-search-input[type="text"] { padding-right: 3.5em; } .header-search-clear { position: absolute; top: 0; right: 0; } .is-header-alignment-horizontal-left .header-area { justify-content: flex-start; } .is-header-alignment-horizontal-center .header-area { justify-content: center; } .is-header-alignment-horizontal-right .header-area { justify-content: flex-end; } .header-search { width: var(--header-search-width); } .is-header-search-width-auto .header-search { flex-grow: 1; min-width: 10em; } .is-header-search-width-custom .header-search { width: var(--header-search-width); } .header-date, .header-clock, .header-search, .header-edit-add, .header-accent, .header-greeting, .header-menu { display: none; } .is-header-search-show .header-search, .is-header-date-show .header-date, .is-header-clock-show .header-clock, .is-header-edit-add .header-edit-add, .is-header-accent .header-accent, .is-header-greeting .header-greeting, .is-menu .header-menu { display: flex; }