blob: 8d56808c206bd42d81c040dea92965dc9e06ead1 [file] [log] [blame]
/**
* IDS theme for reveal.js
*
* By Marc Kupietz
*/
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@300;400;700;800&family=Fira+Sans:wght@200;300;400;700&family=Fira+Sans+Extra+Condensed:wght@300;700&display=swap");
@import url("https://code.cdn.mozilla.net/fonts/fira.css");
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");
@import url("https://korap.ids-mannheim.de/font/libertinus.css");
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
color: #fff;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
:root {
--r-background-color: #fff;
--r-main-font: Libertinus Serif, Helvetica, sans-serif;
--r-main-font-size: 42px;
--r-main-color: #222;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: Fira Sans Extra Condensed, Fira Sans Condensed, Fira Sans, Helvetica, sans-serif;
--r-heading-color: #f6a800;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: 0.05ex;
--r-heading-text-transform: uppercase;
--r-heading-text-shadow: none;
--r-heading-font-weight: 700;
--r-heading1-text-shadow: none;
--r-heading1-size: 2em;
--r-heading2-size: 1.35em;
--r-heading3-size: 0.9em;
--r-heading4-size: 0.7em;
--r-code-font: Fira Code, Fira Mono, DejaVu Sans Mono, Source Code Pro, monospace;
--r-link-color: #2a76dd;
--r-link-color-dark: rgb(30.7720647773, 99.5566801619, 192.7779352227);
--r-link-color-hover: rgb(107.9696356275, 160.4311740891, 231.5303643725);
--r-selection-background-color: rgb(151.9493927126, 188.7186234818, 238.5506072874);
--r-selection-color: #fff;
--r-overlay-element-bg-color: 240, 240, 240;
--r-overlay-element-fg-color: 0, 0, 0;
}
.reveal-viewport {
background: #fff;
background-color: var(--r-background-color);
}
.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}
.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {
font-size: var(--r-heading1-size);
}
.reveal h2 {
font-size: var(--r-heading2-size);
}
.reveal h3 {
font-size: var(--r-heading3-size);
}
.reveal h4 {
font-size: var(--r-heading4-size);
}
.reveal h1 {
text-shadow: var(--r-heading1-text-shadow);
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: var(--r-block-margin) auto;
text-align: left;
font-size: 0.55em;
font-family: var(--r-code-font);
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code {
font-family: var(--r-code-font);
text-transform: none;
tab-size: 2;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal .code-wrapper {
white-space: normal;
}
.reveal .code-wrapper code {
white-space: pre;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align=center],
.reveal table td[align=center] {
text-align: center;
}
.reveal table th[align=right],
.reveal table td[align=right] {
text-align: right;
}
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
.reveal img {
margin: var(--r-block-margin) 0;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: var(--r-link-color);
text-decoration: none;
transition: color 0.15s ease;
}
.reveal a:hover {
color: var(--r-link-color-hover);
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: var(--r-link-color-dark);
}
/*********************************************
* Frame helper
*********************************************/
.reveal .r-frame {
border: 4px solid var(--r-main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal a .r-frame {
transition: all 0.15s linear;
}
.reveal a:hover .r-frame {
border-color: var(--r-link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: var(--r-link-color);
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: var(--r-link-color);
}
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: var(--r-background-color);
}
}
html .reveal .slides section:not(.stack) {
box-sizing: border-box !important;
padding-left: calc(calc(var(--slide-height) * 0.05) + 24px) !important;
padding-right: calc(calc(var(--slide-height) * 0.05) + 24px) !important;
}
.reveal .slides section:not(.stack):not(.title-frame) {
text-align: left !important;
}
.reveal .slides section:not(.title-frame) ul,
.reveal .slides section:not(.title-frame) ol {
display: block !important;
text-align: left !important;
margin-left: 0 !important;
padding-left: 0.65em !important;
list-style: none !important;
}
.reveal .slides section:not(.title-frame) li {
position: relative !important;
}
.reveal .slides section:not(.title-frame) li::before {
position: absolute !important;
left: calc(-1 * 0.65em) !important;
color: var(--r-list-bullet-color) !important;
}
.reveal .slides section:not(.title-frame) li li::before {
left: calc(-1 * 0.65em / 0.8) !important;
}
.reveal .slides section:not(.title-frame) ul > li::before {
content: "" !important;
top: calc((1.3em - 0.22em) / 2) !important;
width: 0.22em !important;
height: 0.22em !important;
box-sizing: border-box !important;
border-radius: 50% !important;
background: var(--r-list-bullet-color) !important;
}
.reveal .slides section:not(.title-frame) ul ul > li::before {
border-radius: 0 !important;
}
.reveal .slides section:not(.title-frame) ul ul ul > li::before {
background: transparent !important;
border: 0.055em solid var(--r-list-bullet-color) !important;
border-radius: 50% !important;
}
.reveal .slides section:not(.title-frame) ol > li::before {
content: counter(list-item, decimal) "." !important;
left: auto !important;
right: 100% !important;
margin-right: 0.3em !important;
}
.reveal .slides section:not(.title-frame) ul.task-list li::before {
content: none !important;
}
.reveal .slides section:not(.title-frame) pre {
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.reveal .slides {
/* Second layer: the optional partner institution logo (--partner-logo is
supplied by the template from the document's partner_logo yaml entry) */
background-image: url("https://corpora.ids-mannheim.de/slides/reveal.js.ids/images/IDS-Logo-2019.svg"), var(--partner-logo, none);
background-repeat: no-repeat;
background-position: top 8px right 8px, top 8px right calc(8px + var(--slide-height) * 0.25 + 16px);
background-size: calc(var(--slide-height) * 0.25) auto, auto calc(var(--slide-height) * 0.085);
}
.reveal .slides section:not(.title-frame) > h1:first-child,
.reveal .slides section:not(.title-frame) > h2:first-child {
position: relative !important;
display: block !important;
text-align: left !important;
margin: 0 calc(-1 * calc(calc(var(--slide-height) * 0.05) + 24px)) 8px calc(-1 * calc(calc(var(--slide-height) * 0.05) + 24px)) !important;
padding: 0 0 0 calc(calc(var(--slide-height) * 0.05) + 24px) !important;
font-weight: var(--r-heading-font-weight) !important;
}
.reveal .slides section:not(.title-frame) > h1:first-child::before,
.reveal .slides section:not(.title-frame) > h2:first-child::before,
.reveal .slides section:not(.title-frame) > h2:first-child + h3::before {
content: "" !important;
position: absolute !important;
width: calc(var(--slide-height) * 0.05) !important;
background: #f6a800 !important;
}
.reveal .slides section:not(.title-frame) > h1:first-child::before,
.reveal .slides section:not(.title-frame) > h2:first-child::before {
top: 0 !important;
left: calc(-1 * var(--ids-band-left, 0px)) !important;
height: 100% !important;
}
.reveal .slides section:not(.title-frame) > h1:first-child:not(:has(+ h3)),
.reveal .slides section:not(.title-frame) > h2:first-child:not(:has(+ h3)) {
padding-top: calc((8px + 45.36px) / 2) !important;
margin-bottom: calc((8px + 45.36px) / 2 + 20px) !important;
}
.reveal .slides section:not(.title-frame) > h1:first-child:not(:has(+ h3))::before,
.reveal .slides section:not(.title-frame) > h2:first-child:not(:has(+ h3))::before {
height: calc(100% + (8px + 45.36px) / 2) !important;
}
.reveal .slides section:not(.title-frame) > h1:first-child:has(+ h3),
.reveal .slides section:not(.title-frame) > h2:first-child:has(+ h3) {
padding-top: 8px !important;
margin-bottom: 0 !important;
}
.reveal .slides section:not(.title-frame) > h2:first-child + h3 {
position: relative !important;
text-align: left !important;
margin-top: 0 !important;
margin-left: 0 !important;
margin-bottom: 20px !important;
}
.reveal .slides section:not(.title-frame) > h2:first-child + h3::before {
top: calc(-1 * (8px + 2px)) !important;
left: calc(-1 * (calc(calc(var(--slide-height) * 0.05) + 24px) + var(--ids-band-left, 0px))) !important;
height: calc(100% + 8px + 2px) !important;
}
.reveal .slides section.level1:not(.title-frame) {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
.reveal .slides section.level1:not(.title-frame)::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: calc(-1 * var(--ids-band-left, 0px)) !important;
width: calc(var(--slide-height) * 0.05) !important;
height: 121.4px !important;
background: #f6a800 !important;
}
.reveal .slides section.level1:not(.title-frame) > h1:first-child {
text-align: center !important;
margin: 0 !important;
padding: 0 !important;
}
.reveal .slides section.level1:not(.title-frame) > h1:first-child::before {
content: none !important;
}
/* Adaptive vertical centering of slide content: the template groups each
slide's body content (everything after the heading block except speaker
notes) into a div.ids-slide-content. Slides carrying such a wrapper become
flex columns of full slide height: the heading block stays pinned to the
top and the wrapper's auto margins center the content in the remaining
space. Auto margins collapse to zero when there is no free space, so
packed slides still start directly below the heading and overflow
downwards as before -- the drawback that makes reveal.js' own `center`
option unusable here (it would also center the headings). The wrapper
keeps the footer band free (--ids-footer-reserve, published by the
template from the actual footer height), so centered content never
covers the footer; slides too packed to fit above it may, as they always
could. Display only ever changes for slides reveal.js is actually
showing, mirroring the section-divider rule above, which works the same
way; screen-only, so the pdf export keeps laying out slides itself. */
@media screen {
html .reveal .slides section:not(.stack):not(.title-frame) {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
.reveal .slides section:not(.stack):not(.title-frame) > .ids-slide-content {
flex: none;
margin-top: auto !important;
margin-bottom: auto !important;
padding-bottom: var(--ids-footer-reserve, 48px);
}
.reveal .slides section:not(.stack):not(.title-frame) > .ids-slide-content > :first-child {
margin-top: 0 !important;
}
}
:root {
--r-bold-color: #f6a800;
--r-list-bullet-color: #f6a800;
}
.reveal strong, .reveal b {
font-family: "Fira Sans Condensed", sans-serif;
font-weight: 600;
font-size: 90%;
color: var(--r-bold-color);
}
.reveal ul li::marker, .reveal ol li::marker {
color: var(--r-list-bullet-color) !important;
}
.reveal li li {
font-size: 0.8em;
}
.reveal dl {
font-size: 0.62em;
line-height: 1.25;
}
.reveal dt {
font-weight: 700;
margin-top: 0.35em;
font-family: "Fira Sans Condensed", sans-serif;
color: #f6a800;
}
.reveal dd {
margin: 0 0 0 1.2em;
color: #444;
}
/*********************************************
* FOOTER
*********************************************/
#ids-footer:not(title-slide) {
opacity: 1;
background: white;
color: #444444;
border-top: dotted orange 2px;
transition: opacity 800ms ease-in-out;
position: fixed;
height: 6%;
line-height: 6%;
z-index: -20;
width: 100%;
letter-spacing: 0em;
text-align: center;
display: table;
}
#ids-footer span {
height: 100%;
line-height: 100%;
z-index: -20;
font-size: 1.8vh;
font-family: "Fira Sans Condensed", "Fira Sans", "Roboto Condensed", "League Gothic", Impact, sans-serif;
display: inline-block;
display: table-cell;
vertical-align: middle;
}
/* Bottom position for the IDS-Footer footer when both progress bar and TOC-Progress are visible */
div.progress[style="display: block;"] ~ #ids-footer {
bottom: calc(3px + 0vh);
}
/* Bottom position for the IDS-Footer footer when TOC-Progress is visible */
#ids-footer {
bottom: 3px;
}
#ids-footer a {
color: #555555;
}
/* Bottom position for the IDS-Footer footer when progress bar is visible */
div.progress[style="display: block;"] ~ footer:last-of-type#ids-footer {
bottom: 3px;
}
/* Bottom position for the IDS-Footer footer when neither progress bar nor TOC-Progress are visible */
footer:last-of-type#ids-footer {
bottom: 0px;
}
/* Make IDS-Footer invisible if explicitly indicated */
.no-ids-footer #ids-footer {
opacity: 0;
transition: opacity 800ms ease-in-out;
}
.title-frame #ids-footer {
opacity: 0;
transition: opacity 800ms ease-in-out;
}
.no-toc-progress #ids-footer {
opacity: 0;
transition: opacity 800ms ease-in-out;
}
/* Make IDS-Footer invisible in overview mode */
.overview #ids-footer {
opacity: 0;
transition: opacity 800ms ease-in-out;
}
/* In print, the footer's negative stacking drops it behind the .pdf-page
* backgrounds (z-index 1); lift it above them. position: fixed repeats it at
* the bottom of every printed page. */
html.reveal-print #ids-footer {
z-index: 100 !important;
}
html.reveal-print .reveal .slides .pdf-page {
z-index: auto !important;
}
html.reveal-print div.slide-number-pdf {
z-index: 200 !important;
bottom: 15px !important;
}
html.reveal-print .reveal .slides section:not(.title-frame) > h1:first-child::before,
html.reveal-print .reveal .slides section:not(.title-frame) > h2:first-child::before {
left: 0 !important;
}
html.reveal-print .reveal .slides section:not(.title-frame) > h2:first-child + h3::before {
left: calc(-1 * calc(calc(var(--slide-height) * 0.05) + 24px)) !important;
}
html.reveal-print .reveal .slides section.level1:not(.title-frame)::before {
left: 0 !important;
}
html.reveal-print .reveal .slides section.title-frame {
background-position: right 8px bottom 55px;
}
.reveal .slides section.title-frame {
background-image: url("https://corpora.ids-mannheim.de/slides/reveal.js.ids/images/Mitglied_WGL_transparent.svg");
background-repeat: no-repeat;
background-position: right 8px bottom 8px;
background-size: calc(var(--slide-height) * 0.1) auto;
/* full slide height, so "bottom" really is the slide's bottom edge */
height: 100%;
}
/* qrlink() codes placed anywhere else in a deck: qr_svg_fit() crops the svg
to the dark modules, so the quiet zone the code needs to stay scannable is
this padding (which also keeps a code readable on a dark background). */
.reveal a.qrcode {
display: inline-block;
padding: 0.5em;
background: #fff;
}
.reveal .slides section.title-frame .title-qr {
position: absolute;
top: 0;
left: 0;
/* qrlink() crops the svg to the dark modules, so the quiet zone the code
needs to stay scannable is this white plate's padding -- which is also
what puts the modules themselves 8px from the slide's edges, like every
other corner logo, the plate sitting flush in the corner. */
box-sizing: border-box;
width: calc(var(--slide-height) * 0.28);
padding: 8px;
background: #fff;
}
.reveal .slides section.title-frame .title-qr a.qrcode,
.reveal .slides section.title-frame .title-qr svg {
display: block;
width: 100%;
height: auto;
margin: 0;
/* the quiet zone comes from the plate around it here */
padding: 0;
}
.reveal .slides section.title-frame img.funder-logo {
position: absolute;
left: 8px;
bottom: 8px;
height: calc(var(--slide-height) * 0.07);
/* reveal.js gives images a vertical margin, which for an absolutely
positioned one would add itself to the inset above. */
margin: 0;
width: auto;
}
/* Lift the funder logo above the print footer band, like the WGL logo */
html.reveal-print .reveal .slides section.title-frame img.funder-logo {
bottom: 55px;
}
/* The navigation chrome is hidden on the title slide (the template toggles
the ids-title-plain class when the title frame is the current slide) */
html.ids-title-plain .reveal .controls,
html.ids-title-plain .reveal .slide-number,
html.ids-title-plain .reveal .slide-menu-button {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.reveal .controls,
.reveal .slide-number,
.reveal .slide-menu-button {
transition: opacity 0.4s;
}
/*********************************************
* SLIDES MENU
*********************************************/
.slide-menu-wrapper .slide-menu {
font-family: "Fira Sans Condensed", sans-serif !important;
}
.slide-menu-wrapper .slide-menu:not(.slide-menu--wide):not(.slide-menu--half):not(.slide-menu--third):not(.slide-menu--full):not(.slide-menu--custom) {
width: 372px !important;
}
.slide-menu-wrapper .slide-menu-item,
.slide-menu-wrapper .slide-menu-item-vertical {
padding: 6px 12px !important;
line-height: 1.3 !important;
}
.slide-menu-wrapper .slide-menu-item-vertical {
padding-left: 26px !important;
}
.slide-menu-wrapper .slide-menu-item,
.slide-menu-wrapper .slide-menu-item-vertical {
display: flex !important;
align-items: baseline !important;
}
.slide-menu-wrapper .slide-menu-item-title {
flex: 1 !important;
min-width: 0 !important;
}
.slide-menu-wrapper .slide-menu-item i.far,
.slide-menu-wrapper .slide-menu-item i.fas,
.slide-menu-wrapper .slide-menu-item-vertical i.far,
.slide-menu-wrapper .slide-menu-item-vertical i.fas,
.slide-menu-wrapper .slide-menu-item svg.svg-inline--fa,
.slide-menu-wrapper .slide-menu-item-vertical svg.svg-inline--fa {
padding-right: 8px !important;
}
.slide-menu-wrapper .slide-menu-item {
font-weight: 700 !important;
}
.slide-menu-wrapper .active-menu-panel li.active {
color: #f6a800 !important;
}
/*
* Menu controls
*/
body .reveal .slide-menu-button {
color: #aaaaaa !important;
position: fixed;
left: 30px;
bottom: 2%;
vertical-align: middle;
z-index: 30;
font-size: 2vh;
}
#customcontrols > ul {
color: #aaaaaa !important;
position: fixed;
left: 50px;
bottom: 2% !important;
vertical-align: middle;
z-index: 30;
font-size: 2vh;
}
@media only screen and (min-width: 500px) {
#customcontrols > ul {
bottom: 2% !important;
}
}
.reveal .controls .controls-arrow {
position: relative;
width: 3.6em;
height: 3.6em;
bottom: -12px;
right: -4px;
}
.reveal h3, h4, h5, h6 {
text-transform: none !important;
}
.reveal h3, h4, h5, h6 {
text-transform: none !important;
}
.reveal h2 + h3 {
margin-top: -0.5em !important;
}
.title-frame h1,
.title-frame h2 {
margin: 0 0 0 0;
background: rgb(246, 168, 0);
color: white;
font-family: "Fira Sans Condensed", "Roboto Condensed", Impact, sans-serif;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.05ex;
text-transform: uppercase;
width: 100%;
margin-top: 0.5em;
padding-top: 0.5em;
font-size: 1.75em;
margin-left: 0;
text-align: center;
text-shadow: none;
word-wrap: break-word;
}
.title-frame .author {
font-family: "Fira Sans Condensed", sans-serif;
font-weight: 400;
color: #657b83;
margin-top: 10vh;
}
.title-frame .place {
font-family: "Fira Sans Condensed", sans-serif;
margin-top: 40px;
font-weight: 400;
color: #657b83;
}
.title-frame h2 {
margin-top: -3px;
margin-bottom: 1em;
padding-bottom: 0.5em;
font-size: 1em;
}
/*********************************************
* TABLES
*********************************************/
th {
color: rgb(246, 168, 0);
}
table {
font-family: "Fira Sans Condensed", sans-serif;
font-weight: 400;
font-size: 16px;
font-variant-numeric: tabular-nums;
}
.reveal table.dataTable {
border: #aaaaaa 1px solid;
border-collapse: collapse;
}
.reveal table.dataTable td {
border: #aaaaaa 1px solid;
border-collapse: collapse;
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate, table.dataTable thead > tr > th.sorting::before, table.dataTable thead > tr > th.sorting::after, table.dataTable thead > tr > th.sorting_asc::before, table.dataTable thead > tr > th.sorting_asc::after, table.dataTable thead > tr > th.sorting_desc::before, table.dataTable thead > tr > th.sorting_desc::after, table.dataTable thead > tr > th.sorting_asc_disabled::before, table.dataTable thead > tr > th.sorting_asc_disabled::after, table.dataTable thead > tr > th.sorting_desc_disabled::before, table.dataTable thead > tr > th.sorting_desc_disabled::after, table.dataTable thead > tr > td.sorting::before, table.dataTable thead > tr > td.sorting::after, table.dataTable thead > tr > td.sorting_asc::before, table.dataTable thead > tr > td.sorting_asc::after, table.dataTable thead > tr > td.sorting_desc::before, table.dataTable thead > tr > td.sorting_desc::after, table.dataTable thead > tr > td.sorting_asc_disabled::before, table.dataTable thead > tr > td.sorting_asc_disabled::after, table.dataTable thead > tr > td.sorting_desc_disabled::before, table.dataTable thead > tr > td.sorting_desc_disabled::after {
display: none;
}
.caption {
font-family: "Fira Sans Condensed", sans-serif;
font-weight: 400;
font-size: 16px;
text-align: center;
}
/*
table.display td { white-space: nowrap; }
*/
.dt-buttons, .dataTables_filter {
margin-top: 10pt;
}
/* Sort Arrows in DataTables */
table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting:before, table.dataTable thead > tr > td.sorting:after, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_asc:after, table.dataTable thead > tr > td.sorting_desc:before, table.dataTable thead > tr > td.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_asc_disabled:after, table.dataTable thead > tr > td.sorting_desc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:after {
right: 0 !important;
line-height: 80% !important;
}
/*********************************************
* BIBLIOGRAPHY
*********************************************/
.reveal .references {
font-family: "Fira Sans Condensed", sans-serif;
font-size: 16px;
text-align: left;
margin-top: 10px;
max-height: 510px;
font-weight: 400;
color: #253b43;
overflow-y: auto;
}
.hanging-indent > .csl-entry {
padding-left: 22px;
text-indent: -22px;
}
.references .csl-entry {
color: #888888;
margin-bottom: 0.5em;
}
.csl-entry .csl-authors-year {
display: block;
font-weight: bold;
color: #4d616b;
}
.reveal code.sourceCode:last-child + pre {
height: 800px !important;
}
/*********************************************
* FULLSCREEN TOGGLE
*********************************************/
#ids-fullscreen {
display: none;
position: fixed;
left: 30px;
bottom: 6%;
z-index: 30;
width: 28px;
height: 28px;
border: 0;
padding: 0;
cursor: pointer;
opacity: 0.55;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M16 3h3a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M8 21H5a2 2 0 0 1-2-2v-3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") center/contain no-repeat;
}
#ids-fullscreen:active, #ids-fullscreen:focus-visible {
opacity: 0.9;
}
#ids-fullscreen.is-fullscreen {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6a800' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M16 3h3a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M8 21H5a2 2 0 0 1-2-2v-3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");
}
@media (hover: none) and (pointer: coarse) {
#ids-fullscreen {
display: block;
}
}
html.reveal-print #ids-fullscreen {
display: none !important;
}
/*********************************************
* SPEAKER NOTES OVERLAY (touch devices)
*********************************************/
#ids-notes {
display: none;
position: fixed;
left: 70px;
bottom: 6%;
z-index: 30;
width: 28px;
height: 28px;
border: 0;
padding: 0;
cursor: pointer;
opacity: 0.55;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
#ids-notes:active, #ids-notes:focus-visible {
opacity: 0.9;
}
#ids-notes.is-open {
opacity: 0.9;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6a800' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
#ids-transcript-btn {
display: none;
position: fixed;
left: 110px;
bottom: 6%;
z-index: 30;
width: 28px;
height: 28px;
border: 0;
padding: 0;
cursor: pointer;
opacity: 0.55;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
}
#ids-transcript-btn:active, #ids-transcript-btn:focus-visible, #ids-transcript-btn.is-open {
opacity: 0.9;
}
#ids-transcript-btn.is-open {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6a800' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
}
@media (hover: none) and (pointer: coarse) {
#ids-notes, #ids-transcript-btn {
display: block;
}
}
html.reveal-print #ids-notes, html.reveal-print #ids-transcript-btn {
display: none !important;
}
#ids-notes-overlay {
position: fixed;
inset: 0;
z-index: 100;
background: #fff;
color: #444444;
font-family: "Fira Sans", "Fira Sans Condensed", sans-serif;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
#ids-notes-overlay[hidden] {
display: none;
}
#ids-notes-header {
display: flex;
align-items: baseline;
gap: 12px;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 16px;
padding-bottom: 8px;
}
#ids-notes-timing {
flex-shrink: 0;
color: #f6a800;
font-weight: bold;
white-space: nowrap;
}
#ids-notes-title {
flex-grow: 1;
margin: 0;
font-size: 1.1em;
}
#ids-notes-close {
flex-shrink: 0;
border: 0;
background: none;
color: #888888;
font-size: 1.2em;
cursor: pointer;
padding: 8px;
margin: -8px;
}
#ids-notes-content {
font-size: 20px;
line-height: 1.5;
}
#ids-notes-content em {
color: #888888;
}
.reveal .controls .controls-arrow:after, .reveal .controls .controls-arrow:before {
width: 13px !important; /* size */
height: 4px; /* line width */
}
.reveal .controls {
display: none;
position: absolute;
top: auto;
bottom: -8px;
right: 16px;
left: auto;
z-index: 11;
/* color: #000;*/
pointer-events: none;
font-size: 8px;
}
.reveal .controls .controls-arrow {
position: relative;
height: 3.6em;
width: 1.2em; /* distance betwee arrows */
bottom: 0;
right: 0;
}
.reveal div.slide-number {
text-align: center;
width: 2em;
position: absolute;
display: block;
right: 29px;
bottom: 22px;
z-index: 31;
font-family: "Fira Sans Condensed", sans-serif;
font-size: 18px;
line-height: 1;
background-color: white;
color: #666;
padding: 0;
}
/*********************************************
* OVERVIEW / TOC SLIDES
*********************************************/
/* The auto-generated TOC lists the chapters with their numbers as
.ids-toc-number spans in the marker colour, prepended to the entry
titles: the enumeration therefore starts flush with the slide heading
(the drawn ol/ul markers are suppressed for the top-level entries;
sub-headings below their chapters keep their bullets). Entries stay at
the normal slide body size and keep the theme's link colour, so they
read as the navigation links they are. Only the denser two-column
variant with sub-headings is scaled down. */
.reveal .slides section:not(.title-frame) .ids-overview-toc {
padding-left: 0 !important;
}
.reveal .slides section:not(.title-frame) .ids-overview-toc > li::before {
content: none !important;
}
.reveal .ids-overview-toc .ids-toc-number {
color: var(--r-list-bullet-color);
}
.reveal .ids-overview-toc {
list-style: none;
margin: 0.2em 0 0 0;
padding: 0;
line-height: 1.35;
}
.reveal .ids-overview-toc > li {
margin: 0.45em 0;
font-weight: bold;
}
.reveal .ids-overview-toc ul {
list-style: none;
margin: 0.1em 0 0.2em 0;
padding: 0 0 0 1.1em;
font-weight: normal;
}
.reveal .ids-overview-toc.with-subheadings {
columns: 2;
column-gap: 2.5em;
font-size: 0.8em;
}
.reveal .ids-overview-toc.with-subheadings > li {
break-inside: avoid;
}
.reveal .ids-overview-toc ul li {
margin: 0.18em 0;
}
/*********************************************
* TRANSCRIPT / READ-ALOUD VIEW ('r')
*********************************************/
#ids-transcript {
position: fixed;
inset: 0;
z-index: 90;
background: #fff;
color: #444444;
font-family: "Fira Sans", "Fira Sans Condensed", sans-serif;
font-size: 18px;
line-height: 1.5;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: max(32px, env(safe-area-inset-top)) max(40px, env(safe-area-inset-right))
max(32px, env(safe-area-inset-bottom)) max(40px, env(safe-area-inset-left));
}
#ids-transcript[hidden] {
display: none;
}
#ids-transcript .ids-transcript-slide {
max-width: 900px;
margin: 0 auto 2.5em auto;
}
#ids-transcript h1, #ids-transcript h2 {
color: var(--r-heading-color);
margin: 0 0 0.4em 0;
}
#ids-transcript h1 { font-size: 1.4em; }
#ids-transcript h2 { font-size: 1.2em; }
#ids-transcript .fragment {
opacity: 1;
visibility: visible;
}
#ids-transcript .ids-transcript-notes {
border-left: 3px solid #f6a800;
padding: 0.2em 0 0.2em 0.8em;
margin-top: 0.8em;
color: #666;
}
#ids-transcript .ids-transcript-notes:empty {
display: none;
}
#ids-transcript img, #ids-transcript video, #ids-transcript iframe {
max-width: 100%;
}
/* The title slide's branding is cloned into the transcript along with the
rest of the slide, but outside .reveal, where neither the title frame's
sizing rules nor the svg's own (absent) intrinsic dimensions constrain it
-- both would fill the transcript's whole width. Give them a size that
suits a page one reads rather than presents. */
#ids-transcript .title-qr {
box-sizing: border-box;
width: 140px;
max-width: 40%;
padding: 8px;
background: #fff;
}
#ids-transcript .title-qr a.qrcode,
#ids-transcript .title-qr svg {
display: block;
width: 100%;
height: auto;
padding: 0;
}
#ids-transcript img.funder-logo {
height: 2.5em;
width: auto;
margin: 0.6em 0;
}
/*# sourceMappingURL=ids.css.map */