266 lines
6.2 KiB
CSS
266 lines
6.2 KiB
CSS
/*
|
|
So you like the style of impress.js demo?
|
|
Or maybe you are just curious how it was done?
|
|
|
|
You couldn't find a better place to find out!
|
|
|
|
Welcome to the stylesheet impress.js demo presentation.
|
|
|
|
Please remember that it is not meant to be a part of impress.js and is
|
|
not required by impress.js.
|
|
I expect that anyone creating a presentation for impress.js would create
|
|
their own set of styles.
|
|
|
|
But feel free to read through it and learn how to get the most of what
|
|
impress.js provides.
|
|
|
|
And let me be your guide.
|
|
|
|
Shall we begin?
|
|
*/
|
|
|
|
|
|
/*
|
|
We start with a good ol' reset.
|
|
That's the one by Eric Meyer http://meyerweb.com/eric/tools/css/reset/
|
|
|
|
You can probably argue if it is needed here, or not, but for sure it
|
|
doesn't do any harm and gives us a fresh start.
|
|
*/
|
|
|
|
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, ol, ul, li,
|
|
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;
|
|
}
|
|
ol, ul {
|
|
list-style: none;
|
|
}
|
|
blockquote, q {
|
|
quotes: none;
|
|
}
|
|
blockquote:before, blockquote:after,
|
|
q:before, q:after {
|
|
content: '';
|
|
content: none;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
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: inherit;
|
|
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(255,255,255,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: 35px;
|
|
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.
|
|
*/
|
|
.slide {
|
|
display: block;
|
|
|
|
width: 900px;
|
|
height: 700px;
|
|
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: 30px;
|
|
line-height: 36px;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
.slide q {
|
|
display: block;
|
|
font-size: 50px;
|
|
line-height: 72px;
|
|
|
|
margin-top: 100px;
|
|
}
|
|
|
|
.slide q strong {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
/*
|
|
The last step is an overview.
|
|
There is no content in it, so we make sure it's not visible because we want
|
|
to be able to click on other steps.
|
|
|
|
*/
|
|
#overview { display: none }
|
|
|
|
/*
|
|
We also make other steps visible and give them a pointer cursor using the
|
|
`impress-on-` class.
|
|
*/
|
|
.impress-on-overview .step {
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
/*
|
|
And as the last thing there is a workaround for quite strange bug.
|
|
It happens a lot in Chrome. I don't remember if I've seen it in Firefox.
|
|
|
|
Sometimes the element positioned in 3D (especially when it's moved back
|
|
along Z axis) is not clickable, because it falls 'behind' the <body>
|
|
element.
|
|
|
|
To prevent this, I decided to make <body> non clickable by setting
|
|
pointer-events property to `none` value.
|
|
Value if this property is inherited, so to make everything else clickable
|
|
I bring it back on the #impress element.
|
|
|
|
If you want to know more about `pointer-events` here are some docs:
|
|
https://developer.mozilla.org/en/CSS/pointer-events
|
|
|
|
There is one very important thing to notice about this workaround - it makes
|
|
everything 'unclickable' except what's in #impress element.
|
|
|
|
So use it wisely ... or don't use at all.
|
|
*/
|
|
.impress-enabled { pointer-events: none }
|
|
.impress-enabled #impress { pointer-events: auto }
|