779 lines
29 KiB
CSS
779 lines
29 KiB
CSS
/*
|
|
This file is part of m.css.
|
|
|
|
Copyright © 2017, 2018, 2019 Vladimír Vondruš <mosra@centrum.cz>
|
|
|
|
Permission is hereby granted, free of charge, to any person obtaining a
|
|
copy of this software and associated documentation files (the "Software"),
|
|
to deal in the Software without restriction, including without limitation
|
|
the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
|
and/or sell copies of the Software, and to permit persons to whom the
|
|
Software is furnished to do so, subject to the following conditions:
|
|
|
|
The above copyright notice and this permission notice shall be included
|
|
in all copies or substantial portions of the Software.
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
|
|
THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
|
|
DEALINGS IN THE SOFTWARE.
|
|
*/
|
|
|
|
/* Header navigation */
|
|
body > header > nav {
|
|
width: 100%;
|
|
background-color: var(--header-background-color);
|
|
min-height: 3rem;
|
|
}
|
|
body > header > nav.m-navbar-landing,
|
|
body > header > nav.m-navbar-cover {
|
|
background-color: transparent;
|
|
position: relative;
|
|
}
|
|
body > header > nav.m-navbar-landing {
|
|
opacity: 0.8;
|
|
}
|
|
body > header > nav.m-navbar-cover {
|
|
background-color: var(--header-background-color-jumbo);
|
|
opacity: 1;
|
|
}
|
|
body > header > nav.m-navbar-landing:hover,
|
|
body > header > nav.m-navbar-cover:hover {
|
|
background-color: var(--header-background-color-landing);
|
|
opacity: 1;
|
|
}
|
|
body> header > nav.m-navbar-landing:target,
|
|
body> header > nav.m-navbar-cover:target {
|
|
background-color: var(--header-background-color);
|
|
opacity: 1;
|
|
}
|
|
body > header > nav.m-navbar-landing #m-navbar-brand.m-navbar-brand-hidden {
|
|
visibility: hidden;
|
|
}
|
|
body > header > nav.m-navbar-landing:target #m-navbar-brand.m-navbar-brand-hidden {
|
|
visibility: visible;
|
|
}
|
|
body > header > nav {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
color: var(--header-color);
|
|
}
|
|
body > header > nav a {
|
|
text-decoration: var(--link-decoration-nav);
|
|
text-transform: var(--nav-menu-case);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
line-height: 2.75rem;
|
|
color: var(--header-link-color);
|
|
}
|
|
body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide {
|
|
font-weight: var(--heading-font-weight);
|
|
font-size: 1.125rem;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a {
|
|
text-transform: var(--nav-brand-case);
|
|
}
|
|
body > header > nav #m-navbar-brand a {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
body > header > nav #m-navbar-brand .m-thin {
|
|
font-weight: normal;
|
|
}
|
|
body > header > nav #m-navbar-brand .m-breadcrumb {
|
|
color: var(--dim-color);
|
|
}
|
|
body > header > nav a#m-navbar-show:before, body > header > nav a#m-navbar-hide:before {
|
|
content:'\2630';
|
|
}
|
|
body > header > nav #m-navbar-collapse {
|
|
padding-bottom: 1rem;
|
|
}
|
|
body > header > nav #m-navbar-collapse li {
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
border-width: 0 0 0 0.25rem;
|
|
margin-left: -1rem;
|
|
}
|
|
body > header > nav #m-navbar-collapse li a {
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
line-height: 1.5rem;
|
|
margin-left: -0.25rem;
|
|
padding-left: 0.75rem;
|
|
border-width: 0 0 0 0.25rem;
|
|
width: 100%;
|
|
}
|
|
body > header > nav #m-navbar-collapse li a#m-navbar-current {
|
|
color: var(--header-link-current-color);
|
|
border-color: var(--header-link-current-color);
|
|
}
|
|
body > header > nav ol {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
}
|
|
body > header > nav ol ol {
|
|
padding-left: 1.5rem;
|
|
}
|
|
body > header > nav .m-row > [class*='m-col-'] {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
body > header > nav a:hover, body > header > nav a:focus, body > header > nav a:active {
|
|
color: var(--header-link-active-color);
|
|
}
|
|
body > header > nav #m-navbar-collapse li:hover {
|
|
border-color: var(--header-link-active-color);
|
|
}
|
|
body > header > nav #m-navbar-collapse li a:hover,
|
|
body > header > nav #m-navbar-collapse li a:focus,
|
|
body > header > nav #m-navbar-collapse li a:active {
|
|
border-color: var(--header-link-active-color);
|
|
background-color: var(--header-link-active-background-color);
|
|
}
|
|
body > header > nav.m-navbar-landing #m-navbar-collapse li a:hover,
|
|
body > header > nav.m-navbar-cover #m-navbar-collapse li a:hover,
|
|
body > header > nav.m-navbar-landing #m-navbar-collapse li a:focus,
|
|
body > header > nav.m-navbar-cover #m-navbar-collapse li a:focus,
|
|
body > header > nav.m-navbar-landing #m-navbar-collapse li a:active,
|
|
body > header > nav.m-navbar-cover #m-navbar-collapse li a:active {
|
|
background-color: var(--header-link-active-background-color-semi);
|
|
}
|
|
|
|
/* Header navigation -- collapsible part */
|
|
body > header > nav #m-navbar-hide {
|
|
display: none;
|
|
}
|
|
body > header > nav:target #m-navbar-collapse {
|
|
display: block;
|
|
}
|
|
body > header > nav:target #m-navbar-show {
|
|
display: none;
|
|
}
|
|
body > header > nav:target #m-navbar-hide {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Header navigation -- 768px and up (tablets, desktops) */
|
|
@media screen and (min-width: 768px) {
|
|
body > header > nav #m-navbar-show, body > header > nav #m-navbar-hide,
|
|
body > header > nav:target #m-navbar-show, body > header > nav:target #m-navbar-hide {
|
|
display: none;
|
|
}
|
|
body > header > nav #m-navbar-collapse li a {
|
|
line-height: 2.75rem;
|
|
}
|
|
body > header > nav a, body > header > nav #m-navbar-collapse li a {
|
|
margin-left: 0;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
white-space: nowrap;
|
|
}
|
|
body > header > nav #m-navbar-collapse {
|
|
padding-bottom: 0;
|
|
}
|
|
body > header > nav #m-navbar-collapse li ol {
|
|
background-color: var(--header-background-color);
|
|
}
|
|
body > header > nav #m-navbar-collapse ol ol li {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
border-left-width: 0;
|
|
}
|
|
body > header > nav #m-navbar-collapse ol ol li a {
|
|
padding-left: 0.75rem;
|
|
}
|
|
body > header > nav #m-navbar-collapse > .m-row > ol > li {
|
|
margin-left: 0;
|
|
border-left-width: 0;
|
|
}
|
|
body > header > nav #m-navbar-collapse > .m-row > ol > li > a {
|
|
border-width: var(--header-border-width);
|
|
}
|
|
body > header > nav #m-navbar-collapse ol {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
body > header > nav #m-navbar-collapse > .m-row > ol, body > header > nav #m-navbar-collapse > .m-row > ol > li {
|
|
float: left;
|
|
}
|
|
body > header > nav #m-navbar-collapse ol ol {
|
|
z-index: 99999;
|
|
position: absolute;
|
|
visibility: hidden;
|
|
}
|
|
body > header > nav #m-navbar-collapse li:hover ol {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
/* Footer navigation */
|
|
body > footer {
|
|
width: 100%;
|
|
}
|
|
body > footer > nav {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
font-size: var(--footer-font-size);
|
|
text-align: center;
|
|
color: var(--footer-color);
|
|
background-color: var(--footer-background-color);
|
|
}
|
|
body > footer > nav h3, body > footer > nav h3 a {
|
|
text-transform: var(--nav-heading-case);
|
|
font-weight: normal;
|
|
}
|
|
body > footer > nav ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
body > footer > nav a {
|
|
text-decoration: var(--link-decoration-nav);
|
|
text-transform: var(--nav-menu-case);
|
|
color: var(--footer-link-color);
|
|
}
|
|
body > footer > nav a:hover, body > footer > nav a:focus, body > footer > nav a:active {
|
|
color: var(--footer-link-active-color);
|
|
}
|
|
|
|
/* Main content */
|
|
body > main {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
/* Page heading (not in <header>), breadcrumb naviation on pages */
|
|
article h1 {
|
|
font-size: 1.75rem;
|
|
}
|
|
article h1 .m-breadcrumb {
|
|
color: var(--dim-color);
|
|
font-weight: normal;
|
|
}
|
|
article h1 .m-breadcrumb a {
|
|
color: var(--article-heading-color);
|
|
}
|
|
article h1 .m-breadcrumb a:hover, article h1 a:focus, article h1 a:active {
|
|
color: var(--article-heading-active-color);
|
|
}
|
|
|
|
/* Article elements */
|
|
article > header h1 {
|
|
font-size: 2rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
article h1 a, article > header h1, article > header h1 a,
|
|
article section > h2, article section > h2 a,
|
|
article section > h3, article section > h3 a,
|
|
article section > h4, article section > h4 a,
|
|
article section > h5, article section > h5 a,
|
|
article section > h6, article section > h6 a {
|
|
color: var(--article-heading-color);
|
|
}
|
|
article h1 a:hover, article > header h1 a:hover, article > header h1 a:focus, article > header h1 a:active,
|
|
article section > h2 a:hover, article section > h2 a:focus, article section > h2 a:active,
|
|
article section > h3 a:hover, article section > h3 a:focus, article section > h3 a:active,
|
|
article section > h4 a:hover, article section > h4 a:focus, article section > h4 a:active,
|
|
article section > h5 a:hover, article section > h5 a:focus, article section > h5 a:active,
|
|
article section > h6 a:hover, article section > h6 a:focus, article section > h6 a:active {
|
|
color: var(--article-heading-active-color);
|
|
}
|
|
article > header .m-date {
|
|
display: block;
|
|
width: 2.5rem;
|
|
float: left;
|
|
text-align: center;
|
|
line-height: 95%;
|
|
font-size: 0.75rem;
|
|
font-weight: normal;
|
|
white-space: nowrap;
|
|
border-right-style: solid;
|
|
border-right-width: 0.125rem;
|
|
border-color: var(--article-heading-color);
|
|
padding-right: 0.75rem;
|
|
margin-top: -0.1rem;
|
|
margin-right: 0.75rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
article > header .m-date-day {
|
|
display: block;
|
|
font-weight: bold;
|
|
padding-top: 0.2rem;
|
|
padding-bottom: 0.15rem;
|
|
font-size: 1.25rem;
|
|
}
|
|
article > header p {
|
|
color: var(--article-header-color);
|
|
font-size: 1.125rem;
|
|
}
|
|
article > header h1::after {
|
|
content: " ";
|
|
clear: both;
|
|
display: table;
|
|
}
|
|
article > footer {
|
|
color: var(--article-footer-color);
|
|
}
|
|
article > footer p {
|
|
font-style: italic;
|
|
font-size: 0.85rem;
|
|
text-indent: 0;
|
|
}
|
|
|
|
/* Article -- dynamic section headers */
|
|
article section:target {
|
|
margin-left: -1.0rem;
|
|
border-left-style: solid;
|
|
border-left-width: 0.25rem;
|
|
padding-left: 0.75rem;
|
|
border-color: var(--article-heading-color);
|
|
}
|
|
article h1 a, article > header h1 a, article section > h2 a, article section > h3 a,
|
|
article section > h4 a, article section > h5 a, article section > h6 a {
|
|
text-decoration: var(--link-decoration-heading);
|
|
}
|
|
|
|
/* Landing page, jumbo article */
|
|
#m-landing-image, #m-cover-image, article#m-jumbo > header #m-jumbo-image {
|
|
background-size: cover;
|
|
background-color: var(--cover-image-background-color);
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
margin-top: -4rem;
|
|
padding-top: 5rem;
|
|
}
|
|
#m-landing-image {
|
|
color: #ffffff;
|
|
}
|
|
#m-cover-image {
|
|
height: 30rem;
|
|
margin-bottom: -26rem;
|
|
}
|
|
#m-landing-cover h1 {
|
|
font-size: 2.8rem;
|
|
margin-top: -0.5rem;
|
|
padding-left: var(--paragraph-indent);
|
|
padding-bottom: 1rem;
|
|
text-transform: var(--landing-header-case);
|
|
}
|
|
#m-landing-cover {
|
|
padding-bottom: 10rem;
|
|
margin-bottom: -6rem;
|
|
}
|
|
article#m-jumbo {
|
|
margin-top: -1rem;
|
|
}
|
|
#m-landing-cover, #m-cover-image > div, article#m-jumbo > header #m-jumbo-cover {
|
|
background: linear-gradient(transparent 0%, transparent 50%, var(--background-color) 100%);
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
article#m-jumbo > header h1, article#m-jumbo > header h2 {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
article#m-jumbo > header a {
|
|
text-decoration: none;
|
|
}
|
|
article#m-jumbo > header #m-jumbo-cover {
|
|
padding-bottom: 5rem;
|
|
}
|
|
article#m-jumbo > header #m-jumbo-image {
|
|
font-size: 2.5vmin;
|
|
margin-bottom: -3rem;
|
|
}
|
|
article#m-jumbo > header h1 {
|
|
font-size: 10vmin;
|
|
}
|
|
article#m-jumbo > header h2 {
|
|
font-size: 3vmin;
|
|
}
|
|
/* 2.5vmin equals to 16px (= 1 rem) on 640px, use that as the lower limit */
|
|
@media screen and (max-height: 640px) , screen and (max-width: 640px) {
|
|
article#m-jumbo > header h1 {
|
|
font-size: 3rem;
|
|
}
|
|
article#m-jumbo > header #m-jumbo-image, article#m-jumbo > header h2 {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
article#m-jumbo > header, article#m-jumbo > header h1, article#m-jumbo > header a {
|
|
color: #ffffff;
|
|
}
|
|
article#m-jumbo > header a:hover, article#m-jumbo > header a:focus, article#m-jumbo > header a:active {
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
article#m-jumbo.m-inverted > header, article#m-jumbo.m-inverted > header h1, article#m-jumbo.m-inverted > header a {
|
|
color: #000000;
|
|
}
|
|
article#m-jumbo.m-inverted > header a:hover, article#m-jumbo.m-inverted > header a:focus, article#m-jumbo.m-inverted > header a:active {
|
|
color: #0f0f0f;
|
|
}
|
|
|
|
/* News list on landing pages */
|
|
.m-landing-news h3 a {
|
|
color: var(--color);
|
|
text-decoration: none;
|
|
text-transform: var(--nav-heading-case);
|
|
}
|
|
.m-landing-news h3 a:hover, .m-landing-news h3 a:hover, .m-landing-news h3 a:focus, .m-landing-news h3 a:active {
|
|
color: var(--article-heading-color);
|
|
}
|
|
.m-landing-news time {
|
|
display: inline-block;
|
|
margin-left: 1rem;
|
|
float: right;
|
|
}
|
|
|
|
/* Article pagination */
|
|
.m-article-pagination {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* Right navigation panel */
|
|
nav.m-navpanel {
|
|
text-align: center;
|
|
}
|
|
nav.m-navpanel h3 {
|
|
text-transform: var(--nav-heading-case);
|
|
font-weight: normal;
|
|
}
|
|
nav.m-navpanel ol {
|
|
text-transform: var(--nav-categories-case);
|
|
}
|
|
nav.m-navpanel ol, nav.m-navpanel ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
nav.m-navpanel a {
|
|
color: var(--navpanel-link-color);
|
|
text-decoration: var(--link-decoration-nav);
|
|
}
|
|
nav.m-navpanel a:hover, nav.m-navpanel a:focus, nav.m-navpanel a:active {
|
|
color: var(--navpanel-link-active-color);
|
|
}
|
|
|
|
/* Tag cloud */
|
|
ul.m-tagcloud li { display: inline; }
|
|
ul.m-tagcloud li.m-tag-1 { font-size: 0.75rem; }
|
|
ul.m-tagcloud li.m-tag-2 { font-size: 0.825rem; }
|
|
ul.m-tagcloud li.m-tag-3 { font-size: 1rem; }
|
|
ul.m-tagcloud li.m-tag-4 { font-size: 1.25rem; }
|
|
ul.m-tagcloud li.m-tag-5 { font-size: 1.5rem; }
|
|
|
|
/* Avoid selection border being above figure border */
|
|
article section:target figure.m-code-figure, article section:target figure.m-console-figure {
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Spacing after every block element, but not after the last */
|
|
article, article > header, article section { margin-bottom: 1rem; }
|
|
article:last-child, article section:last-child { margin-bottom: 0; }
|
|
|
|
/* Active sections in inflatable content affect left border of some components
|
|
--- restrict to components directly in active section, its subsections and
|
|
floating / inflatable content inside. */
|
|
.m-container-inflatable section:target > .m-note,
|
|
.m-container-inflatable section:target > .m-frame,
|
|
.m-container-inflatable section:target > .m-block,
|
|
.m-container-inflatable section:target > pre,
|
|
.m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
|
|
.m-container-inflatable section:target > figure.m-console-figure > pre:first-child,
|
|
.m-container-inflatable section:target section > .m-note,
|
|
.m-container-inflatable section:target section > .m-frame,
|
|
.m-container-inflatable section:target section > .m-block,
|
|
.m-container-inflatable section:target section > pre,
|
|
.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child,
|
|
.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child,
|
|
.m-container-inflatable section:target [class*='m-center-'] > .m-note,
|
|
.m-container-inflatable section:target [class*='m-center-'] > .m-frame,
|
|
.m-container-inflatable section:target [class*='m-center-'] > .m-block,
|
|
.m-container-inflatable section:target [class*='m-center-'] > pre,
|
|
.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure > pre:first-child,
|
|
.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure > pre:first-child,
|
|
.m-container-inflatable section:target [class*='m-left-'] > .m-note,
|
|
.m-container-inflatable section:target [class*='m-left-'] > .m-frame,
|
|
.m-container-inflatable section:target [class*='m-left-'] > .m-block,
|
|
.m-container-inflatable section:target [class*='m-left-'] > pre,
|
|
.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure > pre:first-child,
|
|
.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure > pre:first-child,
|
|
.m-container-inflatable section:target [class*='m-right-'] > .m-note,
|
|
.m-container-inflatable section:target [class*='m-right-'] > .m-frame,
|
|
.m-container-inflatable section:target [class*='m-right-'] > .m-block,
|
|
.m-container-inflatable section:target [class*='m-right-'] > pre,
|
|
.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure > pre:first-child,
|
|
.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure > pre:first-child,
|
|
.m-container-inflatable section:target .m-container-inflate > .m-note,
|
|
.m-container-inflatable section:target .m-container-inflate > .m-frame,
|
|
.m-container-inflatable section:target .m-container-inflate > .m-block,
|
|
.m-container-inflatable section:target .m-container-inflate > pre,
|
|
.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure > pre:first-child,
|
|
.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure > pre:first-child {
|
|
margin-left: -1.0rem;
|
|
border-left-style: solid;
|
|
border-left-width: 0.25rem;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
padding-left: 0.75rem;
|
|
}
|
|
.m-container-inflatable section:target > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target > figure.m-console-figure::before,
|
|
.m-container-inflatable section:target section > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target section > figure.m-console-figure::before,
|
|
.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before,
|
|
.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before,
|
|
.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before,
|
|
.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure::before {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-left-width: 0.25rem;
|
|
}
|
|
/* Center/left/right are tied to particular breakpoint so we need to
|
|
conditionally revert that. Left-aligned content is touching the left border
|
|
both in full size and aligned, so we revert it only for center and right. */
|
|
@media screen and (min-width: 576px) {
|
|
.m-container-inflatable section:target .m-center-s > .m-note,
|
|
.m-container-inflatable section:target .m-center-s > pre,
|
|
.m-container-inflatable section:target .m-center-s > figure.m-code-figure > pre:first-child,
|
|
.m-container-inflatable section:target .m-center-s > figure.m-console-figure > pre:first-child,
|
|
.m-container-inflatable section:target .m-right-s > figure.m-code-figure > pre:first-child,
|
|
.m-container-inflatable section:target .m-right-s > figure.m-console-figure > pre:first-child {
|
|
/* Centers have -1rem margin on both sides *always* and pre inside figures
|
|
as well, don't revert that */
|
|
border-left-width: 0;
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
padding-left: 1rem;
|
|
}
|
|
.m-container-inflatable section:target .m-center-s > .m-block,
|
|
.m-container-inflatable section:target .m-right-s > .m-block {
|
|
/* Block keep the same left border width at all times */
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
}
|
|
.m-container-inflatable section:target .m-center-s > .m-frame,
|
|
.m-container-inflatable section:target .m-right-s > .m-frame {
|
|
/* Frame has a thinner border */
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
border-left-width: 0.125rem;
|
|
padding-left: 0.875rem;
|
|
}
|
|
.m-container-inflatable section:target .m-right-s > .m-block,
|
|
.m-container-inflatable section:target .m-right-s > .m-frame {
|
|
margin-left: 0;
|
|
}
|
|
.m-container-inflatable section:target .m-right-s > .m-note,
|
|
.m-container-inflatable section:target .m-right-s > pre {
|
|
/* Note and pre has no border */
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
margin-left: 0;
|
|
border-left-width: 0;
|
|
padding-left: 1rem;
|
|
}
|
|
.m-container-inflatable section:target .m-center-s > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target .m-center-s > figure.m-console-figure::before,
|
|
.m-container-inflatable section:target .m-right-s > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target .m-right-s > figure.m-console-figure::before {
|
|
/* Reverting thin figure border, keeping -1rem margin */
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
border-left-width: 0.125rem;
|
|
}
|
|
}
|
|
@media screen and (min-width: 768px) {
|
|
.m-container-inflatable section:target .m-center-m > .m-note,
|
|
.m-container-inflatable section:target .m-center-m > pre,
|
|
.m-container-inflatable section:target .m-center-m > figure.m-code-figure > pre:first-child,
|
|
.m-container-inflatable section:target .m-center-m > figure.m-console-figure > pre:first-child,
|
|
.m-container-inflatable section:target .m-right-m > figure.m-code-figure > pre:first-child,
|
|
.m-container-inflatable section:target .m-right-m > figure.m-console-figure > pre:first-child {
|
|
/* Centers have -1rem margin on both sides *always* and pre inside figures
|
|
as well, don't revert that */
|
|
border-left-width: 0;
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
padding-left: 1rem;
|
|
}
|
|
.m-container-inflatable section:target .m-center-m > .m-block,
|
|
.m-container-inflatable section:target .m-right-m > .m-block {
|
|
/* Block keep the same left border width at all times */
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
}
|
|
.m-container-inflatable section:target .m-center-m > .m-frame,
|
|
.m-container-inflatable section:target .m-right-m > .m-frame {
|
|
/* Frame has a thinner border */
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
border-left-width: 0.125rem;
|
|
padding-left: 0.875rem;
|
|
}
|
|
.m-container-inflatable section:target .m-right-m > .m-block,
|
|
.m-container-inflatable section:target .m-right-m > .m-frame {
|
|
margin-left: 0;
|
|
}
|
|
.m-container-inflatable section:target .m-right-m > .m-note,
|
|
.m-container-inflatable section:target .m-right-m > pre {
|
|
/* Note and pre has no border */
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
margin-left: 0;
|
|
border-left-width: 0;
|
|
padding-left: 1rem;
|
|
}
|
|
.m-container-inflatable section:target .m-center-m > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target .m-center-m > figure.m-console-figure::before,
|
|
.m-container-inflatable section:target .m-right-m > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target .m-right-m > figure.m-console-figure::before {
|
|
/* Reverting thin figure border, keeping -1rem margin */
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
border-left-width: 0.125rem;
|
|
}
|
|
}
|
|
@media screen and (min-width: 992px) {
|
|
.m-container-inflatable section:target .m-center-l > .m-note,
|
|
.m-container-inflatable section:target .m-center-l > pre,
|
|
.m-container-inflatable section:target .m-center-l > figure.m-code-figure > pre:first-child,
|
|
.m-container-inflatable section:target .m-center-l > figure.m-console-figure > pre:first-child,
|
|
.m-container-inflatable section:target .m-right-l > figure.m-code-figure > pre:first-child,
|
|
.m-container-inflatable section:target .m-right-l > figure.m-console-figure > pre:first-child {
|
|
/* Centers have -1rem margin on both sides *always* and pre inside figures
|
|
as well, don't revert that */
|
|
border-left-width: 0;
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
padding-left: 1rem;
|
|
}
|
|
.m-container-inflatable section:target .m-center-l > .m-block,
|
|
.m-container-inflatable section:target .m-right-l > .m-block {
|
|
/* Block keep the same left border width at all times */
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
}
|
|
.m-container-inflatable section:target .m-center-l > .m-frame,
|
|
.m-container-inflatable section:target .m-right-l > .m-frame {
|
|
/* Frame has a thinner border */
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
border-left-width: 0.125rem;
|
|
padding-left: 0.875rem;
|
|
}
|
|
.m-container-inflatable section:target .m-right-l > .m-block,
|
|
.m-container-inflatable section:target .m-right-l > .m-frame {
|
|
margin-left: 0;
|
|
}
|
|
.m-container-inflatable section:target .m-right-l > .m-note,
|
|
.m-container-inflatable section:target .m-right-l > pre {
|
|
/* Note and pre has no border */
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
margin-left: 0;
|
|
border-left-width: 0;
|
|
padding-left: 1rem;
|
|
}
|
|
.m-container-inflatable section:target .m-center-l > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target .m-center-l > figure.m-console-figure::before,
|
|
.m-container-inflatable section:target .m-right-l > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target .m-right-l > figure.m-console-figure::before {
|
|
/* Reverting thin figure border, keeping -1rem margin */
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
border-left-width: 0.125rem;
|
|
}
|
|
}
|
|
|
|
/* These have different border width/color around so we need to restrict like
|
|
above. */
|
|
.m-container-inflatable section:target > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target > figure.m-console-figure::before,
|
|
.m-container-inflatable section:target section > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target section > figure.m-console-figure::before,
|
|
.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before,
|
|
.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before,
|
|
.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before,
|
|
.m-container-inflatable section:target .m-container-inflatable > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target .m-container-inflatable > figure.m-console-figure::before {
|
|
border-left-color: var(--line-color);
|
|
}
|
|
/* Center/left/right are tied to particular breakpoint so we need to
|
|
conditionally revert that. Left-aligned content is touching the left border
|
|
both in full size and aligned, so we revert it only for center and right. */
|
|
@media screen and (min-width: 576px) {
|
|
.m-container-inflatable section:target .m-center-s > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target .m-right-s > figure.m-code-figure::before {
|
|
border-color: var(--code-background-color);
|
|
}
|
|
.m-container-inflatable section:target .m-center-s > figure.m-console-figure::before,
|
|
.m-container-inflatable section:target .m-right-s > figure.m-console-figure::before {
|
|
border-color: var(--console-background-color);
|
|
}
|
|
}
|
|
@media screen and (min-width: 768px) {
|
|
.m-container-inflatable section:target .m-center-m > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target .m-right-m > figure.m-code-figure::before {
|
|
border-color: var(--code-background-color);
|
|
}
|
|
.m-container-inflatable section:target .m-center-m > figure.m-console-figure::before,
|
|
.m-container-inflatable section:target .m-right-m > figure.m-console-figure::before {
|
|
border-color: var(--console-background-color);
|
|
}
|
|
}
|
|
@media screen and (min-width: 992px) {
|
|
.m-container-inflatable section:target .m-center-l > figure.m-code-figure::before,
|
|
.m-container-inflatable section:target .m-right-l > figure.m-code-figure::before {
|
|
border-color: var(--code-background-color);
|
|
}
|
|
.m-container-inflatable section:target .m-center-l > figure.m-console-figure::before,
|
|
.m-container-inflatable section:target .m-right-l > figure.m-console-figure::before {
|
|
border-color: var(--console-background-color);
|
|
}
|
|
}
|
|
|
|
/* These don't have any border otherwise, so we don't need to restrict the
|
|
selectors or border sides like above. */
|
|
.m-container-inflatable section:target pre,
|
|
.m-container-inflatable section:target figure.m-code-figure > pre:first-child,
|
|
.m-container-inflatable section:target figure.m-console-figure > pre:first-child {
|
|
border-color: var(--line-color);
|
|
}
|
|
.m-container-inflatable section:target .m-note.m-default {
|
|
border-color: var(--line-color);
|
|
}
|
|
.m-container-inflatable section:target .m-note.m-primary {
|
|
border-color: var(--primary-color);
|
|
}
|
|
.m-container-inflatable section:target .m-note.m-success {
|
|
border-color: var(--success-color);
|
|
}
|
|
.m-container-inflatable section:target .m-note.m-warning {
|
|
border-color: var(--warning-color);
|
|
}
|
|
.m-container-inflatable section:target .m-note.m-danger {
|
|
border-color: var(--danger-color);
|
|
}
|
|
.m-container-inflatable section:target .m-note.m-info {
|
|
border-color: var(--info-color);
|
|
}
|
|
.m-container-inflatable section:target .m-note.m-dim {
|
|
border-color: var(--dim-color);
|
|
}
|