blob: 3a5dcb0e1fccbdb66a825be914ee7e8ee677e1a4 [file] [log] [blame]
/**
* IDS theme for reveal.js
*
* By Marc Kupietz
*/
@import url("https://code.cdn.mozilla.net/fonts/fira.css");
@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://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: monospace;
--r-link-color: #2a76dd;
--r-link-color-dark: #1a53a1;
--r-link-color-hover: #6ca0e8;
--r-selection-background-color: #98bdef;
--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: 540px;
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);
}
}
.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.7em !important;
}
.reveal .slides section:not(.title-frame) pre {
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.reveal .slides {
background-image: url("https://corpora.ids-mannheim.de/slides/reveal.js.ids/images/IDS-Logo-2019.svg");
background-repeat: no-repeat;
background-position: top 10px right 8px;
background-size: calc(var(--slide-height) * 0.25) auto;
}
.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)) {
margin-bottom: calc(8px + 45.36px + 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) !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;
}
:root {
--r-bold-color: #f6a800;
--r-list-bullet-color: #f6a800;
}
.reveal strong, .reveal b {
color: var(--r-bold-color);
}
.reveal ul li::marker, .reveal ol li::marker {
color: var(--r-list-bullet-color) !important;
}
/* Nested list items are set progressively smaller, both to emphasise the
hierarchy and to keep deeply nested lists from visually competing with the
first level. The em size compounds down the nesting levels, so each deeper
level is 80% of its parent (level 2: 80%, level 3: 64%, level 4: 51%).
Markers and the hanging indentation scale with the text automatically. */
.reveal li li {
font-size: 0.8em;
}
/*********************************************
* 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;
}
.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 15px bottom 5px;
background-size: calc(var(--slide-height) * 0.07) auto;
}
@media only screen {
.reveal .slides section.title-frame {
background-position: right 45px bottom 5px;
}
}
.slide-menu-items, .slide-menu-toolbar {
font-family: "Fira Sans" !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;
}
.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: 35px;
max-height: 540px;
font-weight: 400;
color: #253b43;
overflow-y: auto;
}
.hanging-indent>.csl-entry {
padding-left: 22px;
text-indent: -22px;
}
.csl-entry::first-line {
color: #253b43;
}
.csl-entry {
color: #888888;
}
/* Add line break after authors and year*/
.csl-entry :first-child::before {
content: "\a";
white-space: pre;
}
.reveal code.sourceCode:last-child+pre {
height: 800px !important;
}
/*********************************************
* ARROWS and SLIDE NUMBERS
*********************************************/
.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;
}