bunkerweb/docs/assets/extra.css

187 lines
3.8 KiB
CSS

/* Enable smooth scrolling for anchor links */
html {
scroll-behavior: smooth;
}
/* zoom on image, custom z-index */
.medium-zoom-overlay,
.medium-zoom-image--opened {
z-index: 999;
}
/* avoid font to pop on family change */
* {
font-display: swap;
}
:root {
--md-primary-fg-color: #125678;
--md-text-font: "Roboto";
}
.md-header__inner {
max-width: none;
width: 100%;
padding-left: 1.5rem;
padding-right: 1.5rem;
box-sizing: border-box;
overflow: visible;
}
.md-footer {
background-color: #125678;
}
/* better link contrast */
article a {
color: #2388bb;
}
/* highlight content links */
article a,
article p > a {
text-decoration: underline;
}
/* header list links and config tabs stay default */
article li > a,
article label > a {
text-decoration: none;
}
/* lighter base tab color */
nav.md-tabs ul li a {
opacity: 0.9;
}
/* Make top navigation span full width with centered content */
nav.md-tabs {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
nav.md-tabs .md-tabs__inner {
max-width: none;
width: 100%;
justify-content: center;
padding-left: 1.5rem;
padding-right: 1.5rem;
box-sizing: border-box;
overflow: visible;
}
nav.md-tabs .md-tabs__list {
width: 100%;
max-width: 95%;
margin: 0 auto;
justify-content: space-evenly;
flex-wrap: nowrap;
gap: 1.5rem;
}
nav.md-tabs .md-tabs__item {
flex: 0 1 auto;
min-width: 0;
display: flex;
justify-content: center;
}
nav.md-tabs .md-tabs__item a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 0;
}
nav.md-tabs .md-grid {
max-width: 100%;
margin: 0 auto;
}
/* active desktop tabs nav */
nav.md-tabs ul li.md-tabs__item--active a {
color: #36ce7a;
font-weight: bold;
}
nav.md-tabs ul li.md-tabs__item--active a:hover {
filter: brightness(0.9);
}
/*
@font-face {
font-family: Consolas, monaco, monospace;
}
@font-face {
font-family: "TitleFont";
src: "assets/font-title.woff";
}
*/
/* START: Custom styles for TOC dropdowns */
.md-nav--secondary .md-nav__link {
display: flex;
align-items: center;
}
.md-nav--secondary .md-nav__link::before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 0.3em solid transparent;
border-bottom: 0.3em solid transparent;
border-left: 0.5em solid transparent;
margin-right: 0.7rem;
opacity: 0;
transition: transform 0.2s ease-in-out, color 0.25s, opacity 0.2s;
}
.toc-dropdown > summary {
list-style: none; /* Remove default arrow */
cursor: pointer;
position: relative;
outline: none; /* Remove focus outline */
transition: color 0.25s; /* Smooth color transition */
font-weight: 700;
}
.toc-dropdown > summary::-webkit-details-marker {
display: none; /* Hide default arrow for Chrome/Safari */
}
/* Style the dropdown arrow */
.md-nav--secondary .toc-dropdown > summary::before {
border-left-color: currentColor;
opacity: 0.85;
}
/* Keep leaf links inside dropdowns visually lighter than section headers */
.md-nav--secondary .toc-dropdown .md-nav__item > a.md-nav__link {
font-weight: 400;
}
/* Make ALL first-level TOC items bold (both dropdowns and regular links) */
.md-nav--secondary > .md-nav__list > .md-nav__item > .toc-dropdown > summary.md-nav__link,
.md-nav--secondary > .md-nav__list > .md-nav__item > a.md-nav__link {
font-weight: 700;
}
/* Rotate arrow when dropdown is open */
.toc-dropdown[open] > summary::before {
transform: rotate(90deg);
}
/* Set a consistent default color for non-active TOC items */
.md-nav--secondary .md-nav__item .md-nav__link:not(.md-nav__link--active) {
color: var(--md-default-fg-color);
}
/* Apply hover color to non-active items and open dropdowns */
.md-nav--secondary .md-nav__item .md-nav__link:not(.md-nav__link--active):hover,
.toc-dropdown[open] > summary:not(.md-nav__link--active) {
color: #2388bb;
}
/* END: Custom styles for TOC dropdowns */