created impress-common.css (#760)
Co-authored-by: Ingrid-Regina Vähi <ingrid.vahi@adm.ee>
This commit is contained in:
IngridRegina
155
css/impress-common.css
Normal file
155
css/impress-common.css
Normal file
@@ -0,0 +1,155 @@
|
|||||||
|
/* impress.js doesn't require any particular CSS file.
|
||||||
|
Each author should create their own, to achieve the visual style they want.
|
||||||
|
Yet in practice many plugins will not do anything useful without CSS. (See for example mouse-timeout plugin.)
|
||||||
|
This file contains sample CSS that you may want to use in your presentation.
|
||||||
|
It is focused on plugin functionality, not the visual style of your presentation. */
|
||||||
|
|
||||||
|
/* Using the substep plugin, hide bullet points at first, then show them one by one. */
|
||||||
|
#impress .step .substep {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#impress .step .substep.substep-visible {
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 1s;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toolbar plugin */
|
||||||
|
.impress-enabled div#impress-toolbar {
|
||||||
|
position: fixed;
|
||||||
|
right: 1px;
|
||||||
|
bottom: 1px;
|
||||||
|
opacity: 0.6;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.impress-enabled div#impress-toolbar > span {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.impress-enabled div#impress-toolbar.impress-toolbar-show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.impress-enabled div#impress-toolbar.impress-toolbar-hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Progress bar */
|
||||||
|
.impress-progress {
|
||||||
|
position: absolute;
|
||||||
|
left: 59px;
|
||||||
|
bottom: 1px;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 10pt;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
.impress-enabled .impress-progressbar {
|
||||||
|
position: absolute;
|
||||||
|
right: 318px;
|
||||||
|
bottom: 1px;
|
||||||
|
left: 118px;
|
||||||
|
border-radius: 7px;
|
||||||
|
border: 2px solid rgba(100, 100, 100, 0.2);
|
||||||
|
}
|
||||||
|
.impress-progressbar {
|
||||||
|
right: 118px;
|
||||||
|
}
|
||||||
|
.impress-progressbar DIV {
|
||||||
|
width: 0;
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: rgba(75, 75, 75, 0.4);
|
||||||
|
transition: width 1s linear;
|
||||||
|
}
|
||||||
|
.impress-enabled .impress-progress {
|
||||||
|
position: absolute;
|
||||||
|
left: 59px;
|
||||||
|
bottom: 1px;
|
||||||
|
text-align: left;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
.impress-enabled #impress-help {
|
||||||
|
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
|
||||||
|
color: #EEEEEE;
|
||||||
|
font-size: 80%;
|
||||||
|
position: fixed;
|
||||||
|
left: 2em;
|
||||||
|
bottom: 2em;
|
||||||
|
width: 24em;
|
||||||
|
border-radius: 1em;
|
||||||
|
padding: 1em;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 100;
|
||||||
|
font-family: Verdana, Arial, Sans;
|
||||||
|
}
|
||||||
|
.impress-enabled #impress-help td {
|
||||||
|
padding-left: 1em;
|
||||||
|
padding-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
With help from the mouse-timeout plugin, we can hide the toolbar and
|
||||||
|
have it show only when you move/click/touch the mouse.
|
||||||
|
*/
|
||||||
|
body.impress-mouse-timeout div#impress-toolbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
In fact, we can hide the mouse cursor itself too, when mouse isn't used.
|
||||||
|
*/
|
||||||
|
body.impress-mouse-timeout {
|
||||||
|
cursor: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
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 }
|
||||||
|
|
||||||
|
/*If you disable pointer-events, you need to re-enable them for the toolbar.
|
||||||
|
And the speaker console while at it.*/
|
||||||
|
|
||||||
|
.impress-enabled #impress-toolbar { pointer-events: auto }
|
||||||
|
.impress-enabled #impress-console-button { pointer-events: auto }
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
There is one funny thing I just realized.
|
||||||
|
|
||||||
|
Thanks to this workaround above everything except #impress element is invisible
|
||||||
|
for click events. That means that the hint element is also not clickable.
|
||||||
|
So basically all of this transforms and delayed transitions trickery was probably
|
||||||
|
not needed at all...
|
||||||
|
|
||||||
|
But it was fun to learn about it, wasn't it?
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
@@ -534,36 +534,6 @@ a:focus {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
This version of impress.js supports plugins, and in particular, a UI toolbar
|
|
||||||
plugin that allows easy navigation between steps and autoplay.
|
|
||||||
*/
|
|
||||||
.impress-enabled div#impress-toolbar {
|
|
||||||
position: fixed;
|
|
||||||
right: 1px;
|
|
||||||
bottom: 1px;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
.impress-enabled div#impress-toolbar > span {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
With help from the mouse-timeout plugin, we can hide the toolbar and
|
|
||||||
have it show only when you move/click/touch the mouse.
|
|
||||||
*/
|
|
||||||
body.impress-mouse-timeout div#impress-toolbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
In fact, we can hide the mouse cursor itself too, when mouse isn't used.
|
|
||||||
*/
|
|
||||||
body.impress-mouse-timeout {
|
|
||||||
cursor: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Now, when we have all the steps styled let's give users a hint how to navigate
|
Now, when we have all the steps styled let's give users a hint how to navigate
|
||||||
around the presentation.
|
around the presentation.
|
||||||
@@ -697,42 +667,6 @@ body.impress-mouse-timeout {
|
|||||||
transition: opacity 1s 5s, transform 0.5s 4.5s;
|
transition: opacity 1s 5s, transform 0.5s 4.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
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 }
|
|
||||||
.impress-enabled #impress-toolbar { pointer-events: auto }
|
|
||||||
.impress-enabled #impress-console-button { pointer-events: auto }
|
|
||||||
/*
|
|
||||||
There is one funny thing I just realized.
|
|
||||||
|
|
||||||
Thanks to this workaround above everything except #impress element is invisible
|
|
||||||
for click events. That means that the hint element is also not clickable.
|
|
||||||
So basically all of this transforms and delayed transitions trickery was probably
|
|
||||||
not needed at all...
|
|
||||||
|
|
||||||
But it was fun to learn about it, wasn't it?
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
That's all I have for you in this file.
|
That's all I have for you in this file.
|
||||||
Thanks for reading. I hope you enjoyed it at least as much as I enjoyed writing it
|
Thanks for reading. I hope you enjoyed it at least as much as I enjoyed writing it
|
||||||
|
|||||||
@@ -87,16 +87,6 @@ body {
|
|||||||
|
|
||||||
.impress-enabled .step.active { opacity: 1 }
|
.impress-enabled .step.active { opacity: 1 }
|
||||||
|
|
||||||
/*
|
|
||||||
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 integrated.
|
|
||||||
*/
|
|
||||||
|
|
||||||
.notes {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3 {
|
h3 {
|
||||||
@@ -237,105 +227,3 @@ body.impress-on-overview #crisps-image {
|
|||||||
#image-credits {
|
#image-credits {
|
||||||
color: #779988;
|
color: #779988;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/******************* PLUGINS *************************************************************/
|
|
||||||
/*
|
|
||||||
This version of impress.js supports plugins, and in particular, a UI toolbar
|
|
||||||
plugin that allows easy navigation between steps and autoplay.
|
|
||||||
*/
|
|
||||||
.impress-enabled div#impress-toolbar {
|
|
||||||
position: fixed;
|
|
||||||
right: 1px;
|
|
||||||
bottom: 1px;
|
|
||||||
opacity: 0.6;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
.impress-enabled div#impress-toolbar > span {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
With help from the mouse-timeout plugin, we can hide the toolbar and
|
|
||||||
have it show only when you move/click/touch the mouse.
|
|
||||||
*/
|
|
||||||
body.impress-mouse-timeout div#impress-toolbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
In fact, we can hide the mouse cursor itself too, when mouse isn't used.
|
|
||||||
*/
|
|
||||||
body.impress-mouse-timeout {
|
|
||||||
cursor: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Progress bar */
|
|
||||||
.impress-progressbar {
|
|
||||||
position: absolute;
|
|
||||||
right: 118px;
|
|
||||||
bottom: 1px;
|
|
||||||
left: 118px;
|
|
||||||
border-radius: 7px;
|
|
||||||
border: 2px solid rgba(100, 100, 100, 0.2);
|
|
||||||
}
|
|
||||||
.impress-progressbar DIV {
|
|
||||||
width: 0;
|
|
||||||
height: 2px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background: rgba(75, 75, 75, 0.4);
|
|
||||||
transition: width 1s linear;
|
|
||||||
}
|
|
||||||
.impress-progress {
|
|
||||||
position: absolute;
|
|
||||||
left: 59px;
|
|
||||||
bottom: 1px;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 10pt;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Help popup plugin */
|
|
||||||
.impress-enabled #impress-help {
|
|
||||||
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
|
|
||||||
color: #EEEEEE;
|
|
||||||
font-size: 80%;
|
|
||||||
position: fixed;
|
|
||||||
left: 2em;
|
|
||||||
bottom: 2em;
|
|
||||||
width: 24em;
|
|
||||||
border-radius: 1em;
|
|
||||||
padding: 1em;
|
|
||||||
text-align: center;
|
|
||||||
z-index: 100;
|
|
||||||
font-family: Verdana, Arial, Sans;
|
|
||||||
}
|
|
||||||
.impress-enabled #impress-help td {
|
|
||||||
padding-left: 1em;
|
|
||||||
padding-right: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Substep plugin */
|
|
||||||
|
|
||||||
#impress .step .substep {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#impress .step .substep.substep-visible {
|
|
||||||
opacity: 1;
|
|
||||||
transition: opacity 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.impress-enabled { pointer-events: none }
|
|
||||||
.impress-enabled #impress { pointer-events: auto }
|
|
||||||
.impress-enabled #impress-toolbar { pointer-events: auto }
|
|
||||||
.impress-enabled #impress-console-button { pointer-events: auto }
|
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
<title>Desserts (2D navigation demo)</title>
|
<title>Desserts (2D navigation demo)</title>
|
||||||
<meta name="description" content="2D navigation demo" />
|
<meta name="description" content="2D navigation demo" />
|
||||||
<meta name="author" content="Henrik Ingo" />
|
<meta name="author" content="Henrik Ingo" />
|
||||||
|
<link href="../../css/impress-common.css" rel="stylesheet" />
|
||||||
<link href="css/presentation.css" rel="stylesheet" />
|
<link href="css/presentation.css" rel="stylesheet" />
|
||||||
</head>
|
</head>
|
||||||
<body class="impress-not-supported">
|
<body class="impress-not-supported">
|
||||||
|
|||||||
@@ -58,10 +58,6 @@ body {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.notes {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Overview step has no background or border */
|
/* Overview step has no background or border */
|
||||||
|
|
||||||
.overview {
|
.overview {
|
||||||
@@ -165,85 +161,6 @@ small {
|
|||||||
font-size: 0.4em;
|
font-size: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
This version of impress.js supports plugins, and in particular, a UI toolbar
|
|
||||||
plugin that allows easy navigation between steps and autoplay.
|
|
||||||
*/
|
|
||||||
.impress-enabled div#impress-toolbar {
|
|
||||||
position: fixed;
|
|
||||||
right: 1px;
|
|
||||||
bottom: 1px;
|
|
||||||
opacity: 0.6;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
.impress-enabled div#impress-toolbar > span {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
With help from the mouse-timeout plugin, we can hide the toolbar and
|
|
||||||
have it show only when you move/click/touch the mouse.
|
|
||||||
*/
|
|
||||||
body.impress-mouse-timeout div#impress-toolbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
In fact, we can hide the mouse cursor itself too, when mouse isn't used.
|
|
||||||
*/
|
|
||||||
body.impress-mouse-timeout {
|
|
||||||
cursor: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Progress bar */
|
|
||||||
.impress-progressbar {
|
|
||||||
position: absolute;
|
|
||||||
right: 118px;
|
|
||||||
bottom: 1px;
|
|
||||||
left: 118px;
|
|
||||||
border-radius: 7px;
|
|
||||||
border: 2px solid rgba(100, 100, 100, 0.2);
|
|
||||||
}
|
|
||||||
.impress-progressbar DIV {
|
|
||||||
width: 0;
|
|
||||||
height: 2px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background: rgba(75, 75, 75, 0.4);
|
|
||||||
transition: width 1s linear;
|
|
||||||
}
|
|
||||||
.impress-progress {
|
|
||||||
position: absolute;
|
|
||||||
left: 59px;
|
|
||||||
bottom: 1px;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 10pt;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Help popup plugin */
|
|
||||||
.impress-enabled #impress-help {
|
|
||||||
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
|
|
||||||
color: #EEEEEE;
|
|
||||||
font-size: 80%;
|
|
||||||
position: fixed;
|
|
||||||
left: 2em;
|
|
||||||
bottom: 2em;
|
|
||||||
width: 24em;
|
|
||||||
border-radius: 1em;
|
|
||||||
padding: 1em;
|
|
||||||
text-align: center;
|
|
||||||
z-index: 100;
|
|
||||||
font-family: Verdana, Arial, Sans;
|
|
||||||
}
|
|
||||||
.impress-enabled #impress-help td {
|
|
||||||
padding-left: 1em;
|
|
||||||
padding-right: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Styles specific to each step */
|
/* Styles specific to each step */
|
||||||
|
|
||||||
#overview2 {
|
#overview2 {
|
||||||
@@ -251,30 +168,3 @@ body.impress-mouse-timeout {
|
|||||||
padding-left: 200px;
|
padding-left: 200px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
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 }
|
|
||||||
.impress-enabled #impress-toolbar { pointer-events: auto }
|
|
||||||
.impress-enabled #impress-console-button { pointer-events: auto }
|
|
||||||
|
|||||||
@@ -22,6 +22,7 @@
|
|||||||
<title>A Study in 3D Rotations| by Henrik Ingo @henrikingo</title>
|
<title>A Study in 3D Rotations| by Henrik Ingo @henrikingo</title>
|
||||||
<meta name="description" content="Explore impress.js in 3D" />
|
<meta name="description" content="Explore impress.js in 3D" />
|
||||||
<meta name="author" content="Henrik Ingo" />
|
<meta name="author" content="Henrik Ingo" />
|
||||||
|
<link href="..\..\css\impress-common.css" rel="stylesheet" />
|
||||||
<link href="css/3D-rotations.css" rel="stylesheet" />
|
<link href="css/3D-rotations.css" rel="stylesheet" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|||||||
@@ -83,16 +83,6 @@ body {
|
|||||||
|
|
||||||
.impress-enabled .step.active { opacity: 1 }
|
.impress-enabled .step.active { opacity: 1 }
|
||||||
|
|
||||||
/*
|
|
||||||
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 integrated.
|
|
||||||
*/
|
|
||||||
|
|
||||||
.notes {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
These 'slide' step styles were heavily inspired by HTML5 Slides:
|
These 'slide' step styles were heavily inspired by HTML5 Slides:
|
||||||
http://html5slides.googlecode.com/svn/trunk/styles.css
|
http://html5slides.googlecode.com/svn/trunk/styles.css
|
||||||
@@ -314,94 +304,6 @@ td {
|
|||||||
opacity: 0.0;
|
opacity: 0.0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
This version of impress.js supports plugins, and in particular, a UI toolbar
|
|
||||||
plugin that allows easy navigation between steps and autoplay.
|
|
||||||
*/
|
|
||||||
.impress-enabled div#impress-toolbar {
|
|
||||||
position: fixed;
|
|
||||||
right: 1px;
|
|
||||||
bottom: 1px;
|
|
||||||
opacity: 0.6;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
.impress-enabled div#impress-toolbar > span {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
With help from the mouse-timeout plugin, we can hide the toolbar and
|
|
||||||
have it show only when you move/click/touch the mouse.
|
|
||||||
*/
|
|
||||||
body.impress-mouse-timeout div#impress-toolbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
In fact, we can hide the mouse cursor itself too, when mouse isn't used.
|
|
||||||
*/
|
|
||||||
body.impress-mouse-timeout {
|
|
||||||
cursor: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Progress bar */
|
|
||||||
.impress-progressbar {
|
|
||||||
position: absolute;
|
|
||||||
right: 118px;
|
|
||||||
bottom: 1px;
|
|
||||||
left: 118px;
|
|
||||||
border-radius: 7px;
|
|
||||||
border: 2px solid rgba(100, 100, 100, 0.2);
|
|
||||||
}
|
|
||||||
.impress-progressbar DIV {
|
|
||||||
width: 0;
|
|
||||||
height: 2px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background: rgba(75, 75, 75, 0.4);
|
|
||||||
transition: width 1s linear;
|
|
||||||
}
|
|
||||||
.impress-progress {
|
|
||||||
position: absolute;
|
|
||||||
left: 59px;
|
|
||||||
bottom: 1px;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 10pt;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Help popup plugin */
|
|
||||||
.impress-enabled #impress-help {
|
|
||||||
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
|
|
||||||
color: #EEEEEE;
|
|
||||||
font-size: 80%;
|
|
||||||
position: fixed;
|
|
||||||
left: 2em;
|
|
||||||
bottom: 2em;
|
|
||||||
width: 24em;
|
|
||||||
border-radius: 1em;
|
|
||||||
padding: 1em;
|
|
||||||
text-align: center;
|
|
||||||
z-index: 100;
|
|
||||||
font-family: Verdana, Arial, Sans;
|
|
||||||
}
|
|
||||||
.impress-enabled #impress-help td {
|
|
||||||
padding-left: 1em;
|
|
||||||
padding-right: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Substep plugin */
|
|
||||||
|
|
||||||
#impress .step .substep {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#impress .step .substep.substep-visible {
|
|
||||||
opacity: 1;
|
|
||||||
transition: opacity 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Styles for specific slides.
|
Styles for specific slides.
|
||||||
*/
|
*/
|
||||||
@@ -446,6 +348,7 @@ body.impress-mouse-timeout {
|
|||||||
|
|
||||||
#acme-graph-q4 {
|
#acme-graph-q4 {
|
||||||
background-color: purple;
|
background-color: purple;
|
||||||
|
left: 750px;
|
||||||
right: 300px;
|
right: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -33,7 +33,8 @@
|
|||||||
<link rel="stylesheet" href="../../extras/highlight/styles/github.css">
|
<link rel="stylesheet" href="../../extras/highlight/styles/github.css">
|
||||||
<link rel="stylesheet" href="../../extras/mermaid/mermaid.forest.css">
|
<link rel="stylesheet" href="../../extras/mermaid/mermaid.forest.css">
|
||||||
|
|
||||||
|
<!-- This file contains common styles for example presentations. -->
|
||||||
|
<link href="..\..\css\impress-common.css" rel="stylesheet" />
|
||||||
<!--
|
<!--
|
||||||
This file contains styles specific for this example presentation.
|
This file contains styles specific for this example presentation.
|
||||||
-->
|
-->
|
||||||
|
|||||||
@@ -73,10 +73,6 @@ body {
|
|||||||
|
|
||||||
.impress-enabled .step.active { opacity: 1 }
|
.impress-enabled .step.active { opacity: 1 }
|
||||||
|
|
||||||
.notes {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3 {
|
h3 {
|
||||||
@@ -151,107 +147,3 @@ strike {
|
|||||||
small {
|
small {
|
||||||
font-size: 0.4em;
|
font-size: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
This version of impress.js supports plugins, and in particular, a UI toolbar
|
|
||||||
plugin that allows easy navigation between steps and autoplay.
|
|
||||||
*/
|
|
||||||
.impress-enabled div#impress-toolbar {
|
|
||||||
position: fixed;
|
|
||||||
right: 1px;
|
|
||||||
bottom: 1px;
|
|
||||||
opacity: 0.6;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
.impress-enabled div#impress-toolbar > span {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
With help from the mouse-timeout plugin, we can hide the toolbar and
|
|
||||||
have it show only when you move/click/touch the mouse.
|
|
||||||
*/
|
|
||||||
body.impress-mouse-timeout div#impress-toolbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
In fact, we can hide the mouse cursor itself too, when mouse isn't used.
|
|
||||||
*/
|
|
||||||
body.impress-mouse-timeout {
|
|
||||||
cursor: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Progress bar */
|
|
||||||
.impress-progressbar {
|
|
||||||
position: absolute;
|
|
||||||
right: 118px;
|
|
||||||
bottom: 1px;
|
|
||||||
left: 118px;
|
|
||||||
border-radius: 7px;
|
|
||||||
border: 2px solid rgba(100, 100, 100, 0.2);
|
|
||||||
}
|
|
||||||
.impress-progressbar DIV {
|
|
||||||
width: 0;
|
|
||||||
height: 2px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background: rgba(75, 75, 75, 0.4);
|
|
||||||
transition: width 1s linear;
|
|
||||||
}
|
|
||||||
.impress-progress {
|
|
||||||
position: absolute;
|
|
||||||
left: 59px;
|
|
||||||
bottom: 1px;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 10pt;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Help popup plugin */
|
|
||||||
.impress-enabled #impress-help {
|
|
||||||
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
|
|
||||||
color: #EEEEEE;
|
|
||||||
font-size: 80%;
|
|
||||||
position: fixed;
|
|
||||||
left: 2em;
|
|
||||||
bottom: 2em;
|
|
||||||
width: 24em;
|
|
||||||
border-radius: 1em;
|
|
||||||
padding: 1em;
|
|
||||||
text-align: center;
|
|
||||||
z-index: 100;
|
|
||||||
font-family: Verdana, Arial, Sans;
|
|
||||||
}
|
|
||||||
.impress-enabled #impress-help td {
|
|
||||||
padding-left: 1em;
|
|
||||||
padding-right: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
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 }
|
|
||||||
.impress-enabled #impress-toolbar { pointer-events: auto }
|
|
||||||
.impress-enabled #impress-console-button { pointer-events: auto }
|
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
<title>Cube | Explore impress.js in 3D | by Henrik Ingo @henrikingo</title>
|
<title>Cube | Explore impress.js in 3D | by Henrik Ingo @henrikingo</title>
|
||||||
<meta name="description" content="Explore impress.js in 3D" />
|
<meta name="description" content="Explore impress.js in 3D" />
|
||||||
<meta name="author" content="Henrik Ingo" />
|
<meta name="author" content="Henrik Ingo" />
|
||||||
|
<link href="..\..\css\impress-common.css" rel="stylesheet" />
|
||||||
<link href="css/cube.css" rel="stylesheet" />
|
<link href="css/cube.css" rel="stylesheet" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|||||||
@@ -88,10 +88,6 @@ body {
|
|||||||
}
|
}
|
||||||
.impress-enabled .step.active { opacity: 1 }
|
.impress-enabled .step.active { opacity: 1 }
|
||||||
|
|
||||||
.notes {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3 {
|
h3 {
|
||||||
@@ -184,51 +180,3 @@ img {
|
|||||||
.title h1 { top: 50px; }
|
.title h1 { top: 50px; }
|
||||||
.title h2 { top: 400px; }
|
.title h2 { top: 400px; }
|
||||||
.title h3 { top: 500px; }
|
.title h3 { top: 500px; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/***** Plugins ******/
|
|
||||||
.impress-enabled div#impress-toolbar {
|
|
||||||
position: fixed;
|
|
||||||
right: 1px;
|
|
||||||
bottom: 1px;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
.impress-enabled div#impress-toolbar > span {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
body.impress-mouse-timeout div#impress-toolbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
body.impress-mouse-timeout {
|
|
||||||
cursor: none;
|
|
||||||
}
|
|
||||||
/* Help popup plugin */
|
|
||||||
.impress-enabled #impress-help {
|
|
||||||
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
|
|
||||||
color: #EEEEEE;
|
|
||||||
font-size: 80%;
|
|
||||||
position: fixed;
|
|
||||||
left: 2em;
|
|
||||||
bottom: 2em;
|
|
||||||
width: 24em;
|
|
||||||
border-radius: 1em;
|
|
||||||
padding: 1em;
|
|
||||||
text-align: center;
|
|
||||||
z-index: 100;
|
|
||||||
font-family: Verdana, Arial, Sans;
|
|
||||||
}
|
|
||||||
.impress-enabled #impress-help td {
|
|
||||||
padding-left: 1em;
|
|
||||||
padding-right: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
Disable mouse clicks / focus for body
|
|
||||||
*/
|
|
||||||
.impress-enabled { pointer-events: none }
|
|
||||||
.impress-enabled #impress { pointer-events: auto }
|
|
||||||
.impress-enabled #impress-toolbar { pointer-events: auto }
|
|
||||||
.impress-enabled #impress-console-button { pointer-events: auto }
|
|
||||||
|
|||||||
@@ -15,7 +15,8 @@
|
|||||||
<meta name="author" content="Henrik Ingo" />
|
<meta name="author" content="Henrik Ingo" />
|
||||||
<link rel="stylesheet" href="../../extras/highlight/styles/github.css">
|
<link rel="stylesheet" href="../../extras/highlight/styles/github.css">
|
||||||
|
|
||||||
|
<!-- Common styles for example presentations -->
|
||||||
|
<link href="..\..\css\impress-common.css" rel="stylesheet" />
|
||||||
<!--
|
<!--
|
||||||
Styles specific for this example presentation.
|
Styles specific for this example presentation.
|
||||||
-->
|
-->
|
||||||
|
|||||||
@@ -90,6 +90,7 @@
|
|||||||
|
|
||||||
-->
|
-->
|
||||||
<link href="css/impress-demo.css" rel="stylesheet" />
|
<link href="css/impress-demo.css" rel="stylesheet" />
|
||||||
|
<link href="css/impress-common.css" rel="stylesheet" />
|
||||||
|
|
||||||
<link rel="shortcut icon" href="favicon.png" />
|
<link rel="shortcut icon" href="favicon.png" />
|
||||||
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
|
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
|
||||||
|
|||||||
@@ -87,89 +87,7 @@ Some addons can handle additional HTML data attributes to help us in further cus
|
|||||||
|
|
||||||
### Sample CSS related to plugins and extra addons
|
### Sample CSS related to plugins and extra addons
|
||||||
|
|
||||||
/* Using the substep plugin, hide bullet points at first, then show them one by one. */
|
The sample css related to plugins and extra addons is located in [css/impress-common.css](../../css/impress-common.css).
|
||||||
#impress .step .substep {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#impress .step .substep.substep-visible {
|
|
||||||
opacity: 1;
|
|
||||||
transition: opacity 1s;
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Toolbar plugin */
|
|
||||||
.impress-enabled div#impress-toolbar {
|
|
||||||
position: fixed;
|
|
||||||
right: 1px;
|
|
||||||
bottom: 1px;
|
|
||||||
opacity: 0.6;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
.impress-enabled div#impress-toolbar > span {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
.impress-enabled div#impress-toolbar.impress-toolbar-show {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.impress-enabled div#impress-toolbar.impress-toolbar-hide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* If you disable pointer-events (like in the impress.js official demo), you need to re-enable them for the toolbar.
|
|
||||||
And the speaker console while at it.*/
|
|
||||||
.impress-enabled #impress-toolbar { pointer-events: auto }
|
|
||||||
.impress-enabled #impress-console-button { pointer-events: auto }
|
|
||||||
|
|
||||||
/* Progress bar */
|
|
||||||
.impress-enabled .impress-progressbar {
|
|
||||||
position: absolute;
|
|
||||||
right: 318px;
|
|
||||||
bottom: 1px;
|
|
||||||
left: 118px;
|
|
||||||
border-radius: 7px;
|
|
||||||
border: 2px solid rgba(100, 100, 100, 0.2);
|
|
||||||
}
|
|
||||||
.impress-enabled .impress-progressbar DIV {
|
|
||||||
width: 0;
|
|
||||||
height: 2px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background: rgba(75, 75, 75, 0.4);
|
|
||||||
transition: width 1s linear;
|
|
||||||
}
|
|
||||||
.impress-enabled .impress-progress {
|
|
||||||
position: absolute;
|
|
||||||
left: 59px;
|
|
||||||
bottom: 1px;
|
|
||||||
text-align: left;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
.impress-enabled #impress-help {
|
|
||||||
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
|
|
||||||
color: #EEEEEE;
|
|
||||||
font-size: 80%;
|
|
||||||
position: fixed;
|
|
||||||
left: 2em;
|
|
||||||
bottom: 2em;
|
|
||||||
width: 24em;
|
|
||||||
border-radius: 1em;
|
|
||||||
padding: 1em;
|
|
||||||
text-align: center;
|
|
||||||
z-index: 100;
|
|
||||||
font-family: Verdana, Arial, Sans;
|
|
||||||
}
|
|
||||||
.impress-enabled #impress-help td {
|
|
||||||
padding-left: 1em;
|
|
||||||
padding-right: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
For developers
|
For developers
|
||||||
==============
|
==============
|
||||||
|
|||||||
Reference in New Issue
Block a user