/*
Speaker notes allow you to write comments within the steps, that will not
be displayed as part of the presentation. However, they will be picked up
and displayed by impressConsole.js when you press P.
*/
.notes {
display: none;
}
body.impress-mouse-timeout {
cursor: none;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
Now here is when interesting things start to appear.
We set up styles with default font and nice gradient in the background.
And yes, there is a lot of repetition there because of -prefixes but we don't
want to leave anybody behind.
*/
body {
font-family: 'PT Sans', sans-serif;
min-height: 740px;
background: rgb(215, 215, 215);
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
background: -ms-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
background: radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
}
/*
Now let's bring some text styles back ...
*/
b, strong { font-weight: bold }
i, em { font-style: italic }
/*
... and give links a nice look.
*/
a {
color: blue;
text-decoration: none;
padding: 0 0.1em;
background: rgba(255,255,255,0.5);
text-shadow: -1px -1px 2px rgba(100,100,100,0.9);
border-radius: 0.2em;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
a:hover,
a:focus {
background: rgba(250,250,200,1);
text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
}
/*
Because the main point behind the impress.js demo is to demo impress.js
we display a fallback message for users with browsers that don't support
all the features required by it.
All of the content will be still fully accessible for them, but I want
them to know that they are missing something - that's what the demo is
about, isn't it?
And then we hide the message, when support is detected in the browser.
*/
.fallback-message {
font-family: sans-serif;
line-height: 1.3;
width: 780px;
padding: 10px 10px 0;
margin: 20px auto;
border: 1px solid #E4C652;
border-radius: 10px;
background: #EEDC94;
}
.fallback-message p {
margin-bottom: 10px;
}
.impress-supported .fallback-message {
display: none;
}
/*
Now let's style the presentation steps.
We start with basics to make sure it displays correctly in everywhere ...
*/
.step {
position: relative;
width: 900px;
padding: 40px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
font-family: 'PT Serif', georgia, serif;
font-size: 48px;
line-height: 1.5;
}
/*
... and we enhance the styles for impress.js.
Basically we remove the margin and make inactive steps a little bit transparent.
*/
.impress-enabled .step {
margin: 0;
opacity: 0.3;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.impress-enabled .step.active { opacity: 1 }
/*
These 'slide' step styles were heavily inspired by HTML5 Slides:
http://html5slides.googlecode.com/svn/trunk/styles.css
;)
They cover everything what you see on first three steps of the demo.
All impress.js steps are wrapped inside a div element of 0 size! This means that relative
values for width and height (example: `width: 100%`) will not work. You need to use pixel
values. The pixel values used here correspond to the data-width and data-height given to the
#impress root element. When the presentation is viewed on a larger or smaller screen, impress.js
will automatically scale the steps to fit the screen.
*/
.slide {
display: block;
width: 1920px;
height: 1080px;
padding: 40px 60px;
background-color: white;
border: 1px solid rgba(0, 0, 0, .3);
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
color: rgb(102, 102, 102);
text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
font-family: 'Open Sans', Arial, sans-serif;
font-size: 50px;
line-height: 46px;
letter-spacing: -1px;
}
.slide h1 img {
max-height: 1.2em;
}
.slide h1 {
font-size: 1.4em;
line-height: 1.4em;
font-weight: bold;
}
.slide h2 {
font-size: 1.2em;
line-height: 1.1em;
}
.slide q {
display: block;
font-size: 50px;
line-height: 72px;
margin-top: 100px;
}
.slide q strong {
white-space: nowrap;
}
.main-content-verticalcenter {
transform: translateY(100%);
}
.bottom-badge {
position: absolute;
/*border: 1px solid grey;*/
margin-bottom: 10px;
bottom: 10px;
right: 10px;
text-align: right;
}
.bottom-message p {
font-size: 0.9em;
}
p.fineprint {
font-size: 0.6em;
}
.slide pre {
border: 1px solid black;
margin-top: .3em;
margin-bottom: .3em;
}
ul.listplus {
list-style: none;
list-style-type: "+ ";
}
ul.listminus {
list-style: none;
list-style-type: "- ";
}
#slide-pagenum{
position: absolute;
/*border: 1px solid grey;*/
margin-bottom: 10px;
bottom: 10px;
right: 10px;
text-align: right;
}
h1, h2, h3, h4, h5 { margin: 0; padding: 0; }
img, svg {
max-width: 95%;
vertical-align: text-top;
object-fit: cover;
}
.slide > img {
display: block;
margin: 1em auto;
max-height: 95vh;
}
/* When an image follows another image, show it inline */
.slide > img + img {
display: inline-block;
margin: 1em 0;
}
/* When an image is followed by another image, show it inline */
.slide > img:has(+ img) {
display: inline-block;
margin: 1em 0;
}
/* A layout that shows one big image to the left, and two smaller images stacked vertically to the right. Use like
**/
.img-layout--left-stack {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1rem;
align-items: stretch;
}
.img-layout--left-stack .img-stack {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 1rem;
}
.img-layout--left-stack img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
height: fit-content;
width: fit-content;
}
/********************************************/
/**
* A layout with two images stacked vertically to the left, and a list on the right. Use:
*/
.img-layout--stacked-center-list {
display: grid;
grid-template-columns: 2fr 1fr; /* left = images, right = list */
gap: 1.5rem;
align-items: start; /* top-align items */
}
/* Stack the images vertically inside the left column */
.img-layout--stacked-center-list .img-stack {
display: flex;
flex-direction: column;
gap: 1rem;
height: 100%;
}
/* Primary image (first) bigger */
.img-layout--stacked-center-list .img-stack > img:first-child {
width: 100%;
max-height: 60%;
object-fit: contain;
display: block;
}
/* Secondary image, may be wrapped */
.img-layout--stacked-center-list .img-stack > a img {
width: 100%;
max-height: 40%;
object-fit: contain;
display: block;
}
/* List on the right column */
.img-layout--stacked-center-list > ul {
margin: 0; /* optional */
padding-left: 1em;
}
label {
display: flex;
font-size: 60%;
font-weight: bold;
}
label input[type="range"] {
width: 100% !important;
display: inline !important;
}
canvas { width: 60%; }
details {
font-size: 60%;
}
details li {
padding: 0;
margin: 0;
}
button {
margin: .1em;
padding: .2em .5em;
font-size: 50%;
}
select {
font-size: 40%;
padding: 2; margin: 2;
}
.blink { animation: blink 1s step-start infinite; color: red; }
@keyframes blink { 50% { opacity: 0; }}
.rainbow {
font-size: 2rem;
font-weight: bold;
background: linear-gradient(
90deg,
red,
orange,
yellow,
green,
cyan,
blue,
violet
);
background-size: 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbow 4s linear infinite;
}
@keyframes rainbow {
0% { background-position: 0%; }
100% { background-position: 100%; }
}
.color-display {
width: 200px;
height: 100px;
border: 2px solid #333;
margin: 10px 0;
}
/* Name of the div used by the slide number */
#slide-div {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 1000;
}
#impress-toolbar {
position: fixed;
bottom: 10px;
left: 0;
z-index: 1000;
/* Make child elements 70% smaller */
transform: scale(0.7);
transform-origin: top left;
}
#impress-toolbar select {
font-size: 50%;
}