MediaWiki:Gadget-stickyHeader.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
#ark-sticky-header {
position: fixed;
height: var(--sticky-header-height);
top: calc(-1 * var(--sticky-header-height));
left: 0;
right: 0;
z-index: 20;
color: var(--sticky-header-text-color);
display: flex;
box-shadow: 0 3px 12px 0 var(--sticky-header-shadow-color);
align-items: center;
padding: 0 1em;
background: var(--sticky-header-background-color);
transition: transform .3s, background .1s;
}
#ark-sticky-header #simpleSearch::before {
transform: translate(-2px);
}
:target,
h2, h3, h4,
h2.flashed, h3.flashed, h4.flashed,
h2 span, h3 span, h4 span { /* Adds space at top of headers and other targets so that content isn't hidden */
scroll-margin-top: 70px;
scroll-padding-top: 70px;
}
.is-sticky-header-visible #ark-sticky-header {
transform: translateY(calc(var(--netbar-height) + var(--sticky-header-height)));
}
#ark-sticky-header > *:not(.sticky-search-box) {
flex-grow: 1;
flex-basis: 80%;
}
#ark-sticky-header > .sticky-wiki-name {
font-size: 108%;
font-weight: 600;
white-space: nowrap;
margin-right: 0.75em;
}
#ark-sticky-header > .sticky-wiki-name a {
color: var(--sticky-header-link-color);
text-decoration: none;
}
#ark-sticky-header > .sticky-wiki-name a:hover span {
border-bottom: 1px solid;
color: var(--theme-navbar-tab-text-color);
}
#ark-sticky-header > .sticky-wiki-name span {
vertical-align: middle;
margin-left: 0.5em;
}
#ark-sticky-header > .sticky-search-box {
flex-grow: 1;
flex-basis: 100%;
}
#ark-sticky-header > .sticky-search-box > #p-search {
margin: 0;
width: 100%;
background: var(--sticky-search-background-color);
border-radius: var(--sticky-search-border-radius);
}
#ark-sticky-header > .sticky-search-box form {
margin: 0;
}
#ark-sticky-header > .sticky-search-box #simpleSearch {
width: 100%;
max-width: unset;
}
#ark-sticky-header > .sticky-search-box #searchInput {
height: 36px;
padding-left: 0.8em;
font-size: 0.85em;
color: var(--sticky-search-text-color);
border-color: var(--sticky-search-border-color);
border-radius: var(--sticky-search-border-radius);
}
#ark-sticky-header > .sticky-search-box input::placeholder {
color: var(--sticky-search-placeholder-text-color);
}
#ark-sticky-header > .sticky-buttons {
display: flex;
justify-content: flex-end;
}
#ark-sticky-header .sticky-buttons > a {
color: var(--sticky-button-text-color);
padding: 0 0.5em;
border: 1px solid var(--sticky-button-border-color);
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border-left-width: 0;
background-color: var(--sticky-button-background-color);
}
#ark-sticky-header .sticky-buttons > a:hover,
#ark-sticky-header .sticky-buttons > a:focus {
background-color: var(--sticky-button-hover-background-color);
}
#ark-sticky-header .sticky-buttons > .with-icon {
padding: 0 0.3em;
background-position: center center;
background-repeat: no-repeat;
font-size: 0;
width: 30px;
}
#ark-sticky-header .sticky-buttons > a:first-child {
border-left-width: 1px;
border-top-left-radius: var(--sticky-button-border-radius);
border-bottom-left-radius: var(--sticky-button-border-radius);
}
#ark-sticky-header .sticky-buttons > a:last-child {
border-top-right-radius: var(--sticky-button-border-radius);
border-bottom-right-radius: var(--sticky-button-border-radius);
}
#ark-sticky-header #sticky-edit {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='m16.77 8 1.94-2a1 1 0 0 0 0-1.41l-3.34-3.3a1 1 0 0 0-1.41 0L12 3.23zM1 14.25V19h4.75l9.96-9.96-4.75-4.75z'/%3E%3C/svg%3E%0A");
}
#ark-sticky-header #sticky-history {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' fill='white' height='20'%3E%3Cpath d='M10 2a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm0 2a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6z'/%3E%3Cpath d='M9.984 4.986A1 1 0 0 0 9 6v5h3a1 1 0 1 0 0-2h-1V6a1 1 0 0 0-1.016-1.014z'/%3E%3C/svg%3E");
}
#ark-sticky-header #sticky-talk {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' fill='white' height='20'%3E%3Cpath d='M5.391 15.575c.553 1.556-.098 2.537-.942 3.425 3.262-.731 3.243-2.134 3.77-3.425zm10.366-3.933c-.553 1.557.098 2.538.942 3.426-3.262-.732-3.242-2.134-3.769-3.426z'/%3E%3Cpath d='M7.768 7.146c-3.202 0-5.798 2.035-5.797 4.545 0 2.51 2.596 4.544 5.797 4.543 3.2 0 5.794-2.034 5.795-4.543 0-2.51-2.595-4.544-5.795-4.545zm-.022 2.247c2.01 0 3.64 1.034 3.639 2.308-.001 1.274-1.63 2.306-3.639 2.307-2.01 0-3.64-1.033-3.64-2.307-.001-1.275 1.629-2.309 3.64-2.308z'/%3E%3Cpath d='M12.473 2.727c-3.604 0-6.525 2.149-6.526 4.8l2.104-.017c.001-1.392 1.974-2.52 4.406-2.52 2.433 0 4.407 1.128 4.408 2.52 0 1.393-1.973 2.522-4.408 2.521l.016 2.3c3.603-.001 6.524-2.152 6.523-4.804 0-2.65-2.92-4.8-6.523-4.8z'/%3E%3C/svg%3E");
}
.is-sticky-header-visible #p-cactions {
display: none;
}
/* #region Table of contents */
#ark-sticky-header #sticky-toc {
position: relative;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' viewBox='0 0 20 20'%3E%3Cpath d='M7 15h12v2H7zm0-6h12v2H7zm0-6h12v2H7zM2 6h1V1H1v1h1zm1 9v1H2v1h1v1H1v1h3v-5H1v1zM1 8v1h2v1H1.5a.5.5 0 0 0-.5.5V13h3v-1H2v-1h1.5a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E%0A");;
transition: border-bottom-left-radius .07s;
}
#ark-sticky-header #sticky-toc > .toc {
display: none;
position: absolute;
top: 100%;
box-sizing: border-box;
margin: 0;
padding: 0.5em 1em;
width: 250px;
max-height: 400px;
overflow-y: auto;
border-radius: 6px;
line-height: 1.4;
font-size: 14px;
}
.is-sticky-header-visible #ark-sticky-header #sticky-toc:hover {
border-bottom-left-radius: 0;
}
.is-sticky-header-visible #ark-sticky-header #sticky-toc:hover > .toc {
display: block;
}
#ark-sticky-header #sticky-toc > .toc > ul {
margin: 0;
padding: 0;
border-top: none;
}
#ark-sticky-header #sticky-toc > .toc > ul ul {
font-size: 90%;
}
#ark-sticky-header #sticky-toc .toclevel-3 {
display: none; /* hides 3rd level of TOC links */
}
/* #endregion */
@media screen and (max-width: 720px) {
#ark-sticky-header {
padding-right: 0;
}
#ark-sticky-header > .sticky-wiki-name,
#ark-sticky-header > .sticky-buttons {
flex-basis: unset;
}
#ark-sticky-header > .sticky-wiki-name span {
position: absolute;
top: -50px;
font-size: 1px;
}
#ark-sticky-header > .sticky-search-box #searchInput {
height: var(--sticky-header-height);
border-bottom: none;
border-top: none;
}
#ark-sticky-header .sticky-buttons {
display: none;
}
#ark-sticky-header .sticky-buttons a {
padding: 0 0.5em;
height: var(--sticky-header-height);
}
#ark-sticky-header .sticky-buttons a:first-child {
border-left-width: 0;
}
#ark-sticky-header > .sticky-wiki-name { /* skull icon spacing */
flex-basis: 4%;
}
}