25 changed files with 914 additions and 174 deletions
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,25 @@ |
|||||||
|
##UI组成 |
||||||
|
- 数据源：一列，每行为一页slide的文字内容，其中可以用h5标签 |
||||||
|
- 幻灯片样式选择列表 |
||||||
|
- 背景颜色 |
||||||
|
- 文字背景色、文字颜色 |
||||||
|
- 可选项：1、自动/手动播放；2、自动播放间隔时间 |
||||||
|
|
||||||
|
##幻灯片样式 |
||||||
|
- 左右 |
||||||
|
- 上下 |
||||||
|
- 前后 |
||||||
|
- 3D rotation |
||||||
|
|
||||||
|
##比例 |
||||||
|
- slide width:900->1536 padding:40 |
||||||
|
- slide height:700->758 padding:60 |
||||||
|
- slide fontsize:30->(1536*758) |
||||||
|
- slide line-height:36->(1536*758) |
||||||
|
|
||||||
|
|
||||||
|
#git码云 |
||||||
|
- git init |
||||||
|
- git remote add origin https://gitee.com/你的码云用户名/XXXX //添加远程仓库 |
||||||
|
- git pull origin master 命令，将码云上的仓库pull到本地文件夹 |
||||||
|
- git push origin master ，将本地仓库推送到远程仓库 |
||||||
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,17 @@ |
|||||||
|
EasySlides插件使用手册 |
||||||
|
|
||||||
|
EasySlides插件用于帆软设计平台决策报表，方便的生成及显示ppt。 |
||||||
|
一、数据源 |
||||||
|
使用帆软设计平台的数据集做为插件的数据源。 |
||||||
|
1、数据源中需要提供一列字符串类型的文本内容。 |
||||||
|
2、每一行文本，对应于ppt的每一页。 |
||||||
|
3、每一行文本的格式，可以使用html标签来设置。 |
||||||
|
二、参数设置 |
||||||
|
1、幻灯片样式选择列表：选择ppt的显示方式。（将来会进一步增加样式，或者接受按需定制） |
||||||
|
2、背景颜色：ppt背景色。 |
||||||
|
3、文字背景色，文字颜色。 |
||||||
|
4、自动/手动播放。自动播放可以设置播放间隔时间（秒）。手动播放，使用键盘方向键进行。（可能需要先在网页中点击一下控件，以获取焦点） |
||||||
|
5、工具条、进度条、进度：显示在ppt底部，用于查看播放进度。 |
||||||
|
|
||||||
|
备注： |
||||||
|
目前不支持图片显示，计划在下一步实现。 |
||||||
@ -1,16 +0,0 @@ |
|||||||
##UI组成 |
|
||||||
- 数据源：一列，每行为一页slide的文字内容，其中可以用h5标签 |
|
||||||
- 幻灯片样式选择列表 |
|
||||||
- 背景颜色 |
|
||||||
- 可选项：1、自动/手动播放；2、自动播放间隔时间 |
|
||||||
|
|
||||||
##幻灯片样式 |
|
||||||
- 左入，右入 |
|
||||||
- 上入，下入 |
|
||||||
- 前入，后入 |
|
||||||
|
|
||||||
##比例 |
|
||||||
- slide width:900->1536 padding:40 |
|
||||||
- slide height:700->758 padding:60 |
|
||||||
- slide fontsize:30->(1536*758) |
|
||||||
- slide line-height:36->(1536*758) |
|
||||||
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 689 B After Width: | Height: | Size: 700 B |
@ -0,0 +1,321 @@ |
|||||||
|
package com.fr.plugin.easyslides.slidestyles; |
||||||
|
|
||||||
|
import java.util.List; |
||||||
|
|
||||||
|
/** |
||||||
|
* 旋转3D风格 |
||||||
|
*/ |
||||||
|
public class Rotation3DStyle extends SlideStyle { |
||||||
|
private String[] stepsDiv = { |
||||||
|
"<div id=\"overview\" class=\"step overview\" data-x=\"1350\" data-y=\"100\" data-z=\"100\" data-scale=\"3\" data-rotate-y=\"90\">\n", |
||||||
|
"<div id=\"step-%d\" class=\"step slide\" data-x=\"%s\" data-y=\"0\" data-z=\"0\">", |
||||||
|
"<div id=\"step-%d\" class=\"step slide\" data-x=\"%s\" data-y=\"-70\" data-z=\"-250\" data-rotate-z=\"45\" data-rotate-y=\"-45\" data-rotate-order=\"zyx\">", |
||||||
|
"<div id=\"step-%d\" class=\"step slide\" data-x=\"%s\" data-y=\"350\" data-z=\"-350\" data-rotate-z=\"90\" data-rotate-y=\"-90\" data-rotate-order=\"zyx\">", |
||||||
|
"<div id=\"step-%d\" class=\"step slide\" data-x=\"%s\" data-y=\"780\" data-z=\"-250\" data-rotate-z=\"135\" data-rotate-y=\"-135\" data-rotate-order=\"zyx\">", |
||||||
|
"<div id=\"step-%d\" class=\"step slide\" data-x=\"%s\" data-y=\"702\" data-z=\"0\" data-rotate-z=\"180\" data-rotate-y=\"-180\" data-rotate-order=\"zyx\">", |
||||||
|
"<div id=\"step-%d\" class=\"step slide\" data-x=\"%s\" data-y=\"780\" data-z=\"270\" data-rotate-z=\"135\" data-rotate-y=\"-225\" data-rotate-order=\"zyx\">", |
||||||
|
"<div id=\"step-%d\" class=\"step slide\" data-x=\"%s\" data-y=\"350\" data-z=\"350\" data-rotate-z=\"90\" data-rotate-y=\"-270\" data-rotate-order=\"zyx\">", |
||||||
|
"<div id=\"step-%d\" class=\"step slide\" data-x=\"%s\" data-y=\"-70\" data-z=\"270\" data-rotate-z=\"45\" data-rotate-y=\"-315\" data-rotate-order=\"zyx\">" |
||||||
|
}; |
||||||
|
|
||||||
|
private int[] dataX = {0, 420, 700, 422, 0, 379, 700, 379}; |
||||||
|
|
||||||
|
@Override |
||||||
|
protected String buildContents(List<String> contents) { |
||||||
|
StringBuilder r = new StringBuilder(); |
||||||
|
for (int i = 0; i < contents.size(); i++) { |
||||||
|
if (i == 0) { |
||||||
|
r.append(stepsDiv[i]); |
||||||
|
} else { |
||||||
|
int id = (i / stepsDiv.length) < 1 ? (i % stepsDiv.length) : (i % stepsDiv.length + 1); |
||||||
|
String div = stepsDiv[id]; |
||||||
|
div = String.format(div, i, (dataX[(i - 1) % dataX.length] + 1000 * ((i - 1) / dataX.length))); |
||||||
|
r.append(div); |
||||||
|
} |
||||||
|
r.append(contents.get(i)); |
||||||
|
r.append("</div>\n"); |
||||||
|
} |
||||||
|
r.append("<style type=\"text/css\">\n"); |
||||||
|
r.append(css); |
||||||
|
r.append("</style>"); |
||||||
|
return r.toString(); |
||||||
|
} |
||||||
|
|
||||||
|
private static final String css = |
||||||
|
"/* Fallback message */\n" + |
||||||
|
"\n" + |
||||||
|
".fallback-message {\n" + |
||||||
|
" font-family: sans-serif;\n" + |
||||||
|
" line-height: 1.3;\n" + |
||||||
|
"\n" + |
||||||
|
" width: 780px;\n" + |
||||||
|
" padding: 10px 10px 0;\n" + |
||||||
|
" margin: 20px auto;\n" + |
||||||
|
"\n" + |
||||||
|
" border: 1px solid #E4C652;\n" + |
||||||
|
" border-radius: 10px;\n" + |
||||||
|
" background: #EEDC94;\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
".fallback-message p {\n" + |
||||||
|
" margin-bottom: 10px;\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
".impress-supported .fallback-message {\n" + |
||||||
|
" display: none;\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"\n" + |
||||||
|
"/* Body & steps */\n" + |
||||||
|
"body {\n" + |
||||||
|
" font-family: 'PT Sans', sans-serif;\n" + |
||||||
|
" min-height: 740px;\n" + |
||||||
|
"\n" + |
||||||
|
" background: #00000f;\n" + |
||||||
|
" color: rgb(102, 102, 102);\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
".step {\n" + |
||||||
|
" position: relative;\n" + |
||||||
|
" width: 700px;\n" + |
||||||
|
" height: 700px;\n" + |
||||||
|
" padding: 40px 60px;\n" + |
||||||
|
" margin: 20px auto;\n" + |
||||||
|
"\n" + |
||||||
|
" box-sizing: border-box;\n" + |
||||||
|
"\n" + |
||||||
|
" line-height: 1.5;\n" + |
||||||
|
"\n" + |
||||||
|
" background-color: white;\n" + |
||||||
|
" border-radius: 10px;\n" + |
||||||
|
" box-shadow: 0 2px 6px rgba(0, 0, 0, .1);\n" + |
||||||
|
"\n" + |
||||||
|
" text-shadow: 0 2px 2px rgba(0, 0, 0, .1);\n" + |
||||||
|
"\n" + |
||||||
|
" font-family: 'Open Sans', Arial, sans-serif;\n" + |
||||||
|
" font-size: 40pt;\n" + |
||||||
|
" letter-spacing: -1px;\n" + |
||||||
|
"\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
".notes {\n" + |
||||||
|
" display: none;\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"/* Overview step has no background or border */\n" + |
||||||
|
"\n" + |
||||||
|
".overview {\n" + |
||||||
|
" background-color: transparent;\n" + |
||||||
|
" border: none;\n" + |
||||||
|
" box-shadow: none;\n" + |
||||||
|
" pointer-events: none;\n" + |
||||||
|
" display: none;\n" + |
||||||
|
"}\n" + |
||||||
|
".overview.active {\n" + |
||||||
|
" display: block;\n" + |
||||||
|
" pointer-events: auto;\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"/*\n" + |
||||||
|
" Make inactive steps a little bit transparent.\n" + |
||||||
|
"*/\n" + |
||||||
|
".impress-enabled .step {\n" + |
||||||
|
" margin: 0;\n" + |
||||||
|
" opacity: 0.1;\n" + |
||||||
|
" transition: opacity 1s;\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
".impress-enabled .step.active { opacity: 1 }\n" + |
||||||
|
"\n" + |
||||||
|
"\n" + |
||||||
|
"/* Content */\n" + |
||||||
|
"\n" + |
||||||
|
"h1, \n" + |
||||||
|
"h2, \n" + |
||||||
|
"h3 {\n" + |
||||||
|
" margin-bottom: 0.5em;\n" + |
||||||
|
" margin-top: 0.5em;\n" + |
||||||
|
" text-align: center;\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"p {\n" + |
||||||
|
" margin: 0.7em;\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"li {\n" + |
||||||
|
" margin: 0.2em; \n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"/* Highlight.js used for coloring pre > code blocks. */\n" + |
||||||
|
"pre > code {\n" + |
||||||
|
" font-size: 14px;\n" + |
||||||
|
" text-shadow: 0 0 0 rgba(0, 0, 0, 0);\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"/* Inline code, no Highlight.js */\n" + |
||||||
|
"code {\n" + |
||||||
|
" font-family: \"Cutive mono\",\"Courier New\", monospace;\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"\n" + |
||||||
|
"a {\n" + |
||||||
|
" color: inherit;\n" + |
||||||
|
" text-decoration: none;\n" + |
||||||
|
" padding: 0 0.1em;\n" + |
||||||
|
" background: rgba(200,200,200,0.2);\n" + |
||||||
|
" text-shadow: -1px 1px 2px rgba(100,100,100,0.9);\n" + |
||||||
|
" border-radius: 0.2em;\n" + |
||||||
|
" border-bottom: 1px solid rgba(100,100,100,0.2);\n" + |
||||||
|
" border-left: 1px solid rgba(100,100,100,0.2);\n" + |
||||||
|
"\n" + |
||||||
|
" transition: 0.5s;\n" + |
||||||
|
"}\n" + |
||||||
|
"a:hover,\n" + |
||||||
|
"a:focus {\n" + |
||||||
|
" background: rgba(200,200,200,1);\n" + |
||||||
|
" text-shadow: -1px 1px 2px rgba(100,100,100,0.5);\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"blockquote {\n" + |
||||||
|
" font-family: 'PT Serif';\n" + |
||||||
|
" font-style: italic;\n" + |
||||||
|
" font-weight: 400; \n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"em {\n" + |
||||||
|
" text-shadow: 0 2px 2px rgba(0, 0, 0, .3); \n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"strong {\n" + |
||||||
|
" text-shadow: -1px 1px 2px rgba(100,100,100,0.5);\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"q {\n" + |
||||||
|
" font-family: 'PT Serif';\n" + |
||||||
|
" font-style: italic;\n" + |
||||||
|
" font-weight: 400; \n" + |
||||||
|
" text-shadow: 0 2px 2px rgba(0, 0, 0, .3);\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"strike {\n" + |
||||||
|
" opacity: 0.7;\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"small {\n" + |
||||||
|
" font-size: 0.4em;\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"\n" + |
||||||
|
"/*\n" + |
||||||
|
" This version of impress.js supports plugins, and in particular, a UI toolbar\n" + |
||||||
|
" plugin that allows easy navigation between steps and autoplay.\n" + |
||||||
|
"*/\n" + |
||||||
|
".impress-enabled div#impress-toolbar {\n" + |
||||||
|
" position: fixed;\n" + |
||||||
|
" right: 1px;\n" + |
||||||
|
" bottom: 1px;\n" + |
||||||
|
" opacity: 0.6;\n" + |
||||||
|
" z-index: 10;\n" + |
||||||
|
"}\n" + |
||||||
|
".impress-enabled div#impress-toolbar > span {\n" + |
||||||
|
" margin-right: 10px;\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"/*\n" + |
||||||
|
" With help from the mouse-timeout plugin, we can hide the toolbar and\n" + |
||||||
|
" have it show only when you move/click/touch the mouse.\n" + |
||||||
|
"*/\n" + |
||||||
|
"body.impress-mouse-timeout div#impress-toolbar {\n" + |
||||||
|
" display: none;\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"/*\n" + |
||||||
|
" In fact, we can hide the mouse cursor itself too, when mouse isn't used.\n" + |
||||||
|
"*/\n" + |
||||||
|
"body.impress-mouse-timeout {\n" + |
||||||
|
" cursor: none;\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"\n" + |
||||||
|
"\n" + |
||||||
|
"/* Progress bar */\n" + |
||||||
|
".impress-progressbar {\n" + |
||||||
|
" position: absolute;\n" + |
||||||
|
" right: 118px;\n" + |
||||||
|
" bottom: 1px;\n" + |
||||||
|
" left: 118px;\n" + |
||||||
|
" border-radius: 7px;\n" + |
||||||
|
" border: 2px solid rgba(100, 100, 100, 0.2);\n" + |
||||||
|
"}\n" + |
||||||
|
".impress-progressbar DIV {\n" + |
||||||
|
" width: 0;\n" + |
||||||
|
" height: 2px;\n" + |
||||||
|
" border-radius: 5px;\n" + |
||||||
|
" background: rgba(75, 75, 75, 0.4);\n" + |
||||||
|
" transition: width 1s linear;\n" + |
||||||
|
"}\n" + |
||||||
|
".impress-progress {\n" + |
||||||
|
" position: absolute;\n" + |
||||||
|
" left: 59px;\n" + |
||||||
|
" bottom: 1px;\n" + |
||||||
|
" text-align: left;\n" + |
||||||
|
" font-size: 10pt;\n" + |
||||||
|
" opacity: 0.6;\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"/* Help popup plugin */\n" + |
||||||
|
".impress-enabled #impress-help {\n" + |
||||||
|
" background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);\n" + |
||||||
|
" color: #EEEEEE;\n" + |
||||||
|
" font-size: 80%;\n" + |
||||||
|
" position: fixed;\n" + |
||||||
|
" left: 2em;\n" + |
||||||
|
" bottom: 2em;\n" + |
||||||
|
" width: 24em;\n" + |
||||||
|
" border-radius: 1em;\n" + |
||||||
|
" padding: 1em;\n" + |
||||||
|
" text-align: center;\n" + |
||||||
|
" z-index: 100;\n" + |
||||||
|
" font-family: Verdana, Arial, Sans;\n" + |
||||||
|
"}\n" + |
||||||
|
".impress-enabled #impress-help td {\n" + |
||||||
|
" padding-left: 1em;\n" + |
||||||
|
" padding-right: 1em;\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"\n" + |
||||||
|
"/* Styles specific to each step */\n" + |
||||||
|
"\n" + |
||||||
|
"#overview2 {\n" + |
||||||
|
" font-size: 20pt;\n" + |
||||||
|
" padding-left: 200px;\n" + |
||||||
|
" text-align: right;\n" + |
||||||
|
"}\n" + |
||||||
|
"\n" + |
||||||
|
"\n" + |
||||||
|
"/*\n" + |
||||||
|
" And as the last thing there is a workaround for quite strange bug.\n" + |
||||||
|
" It happens a lot in Chrome. I don't remember if I've seen it in Firefox.\n" + |
||||||
|
"\n" + |
||||||
|
" Sometimes the element positioned in 3D (especially when it's moved back\n" + |
||||||
|
" along Z axis) is not clickable, because it falls 'behind' the <body>\n" + |
||||||
|
" element.\n" + |
||||||
|
"\n" + |
||||||
|
" To prevent this, I decided to make <body> non clickable by setting\n" + |
||||||
|
" pointer-events property to `none` value.\n" + |
||||||
|
" Value if this property is inherited, so to make everything else clickable\n" + |
||||||
|
" I bring it back on the #impress element.\n" + |
||||||
|
"\n" + |
||||||
|
" If you want to know more about `pointer-events` here are some docs:\n" + |
||||||
|
" https://developer.mozilla.org/en/CSS/pointer-events\n" + |
||||||
|
"\n" + |
||||||
|
" There is one very important thing to notice about this workaround - it makes\n" + |
||||||
|
" everything 'unclickable' except what's in #impress element.\n" + |
||||||
|
"\n" + |
||||||
|
" So use it wisely ... or don't use at all.\n" + |
||||||
|
"*/\n" + |
||||||
|
".impress-enabled { pointer-events: none }\n" + |
||||||
|
".impress-enabled #impress { pointer-events: auto }\n" + |
||||||
|
".impress-enabled #impress-toolbar { pointer-events: auto }\n" + |
||||||
|
".impress-enabled #impress-console-button { pointer-events: auto }\n"; |
||||||
|
} |
||||||
@ -0,0 +1,276 @@ |
|||||||
|
/* Fallback message */ |
||||||
|
|
||||||
|
.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; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/* Body & steps */ |
||||||
|
body { |
||||||
|
font-family: 'PT Sans', sans-serif; |
||||||
|
min-height: 740px; |
||||||
|
|
||||||
|
background: #00000f; |
||||||
|
color: rgb(102, 102, 102); |
||||||
|
} |
||||||
|
|
||||||
|
.step { |
||||||
|
position: relative; |
||||||
|
width: 700px; |
||||||
|
height: 700px; |
||||||
|
padding: 40px 60px; |
||||||
|
margin: 20px auto; |
||||||
|
|
||||||
|
box-sizing: border-box; |
||||||
|
|
||||||
|
line-height: 1.5; |
||||||
|
|
||||||
|
background-color: white; |
||||||
|
border-radius: 10px; |
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, .1); |
||||||
|
|
||||||
|
text-shadow: 0 2px 2px rgba(0, 0, 0, .1); |
||||||
|
|
||||||
|
font-family: 'Open Sans', Arial, sans-serif; |
||||||
|
font-size: 40pt; |
||||||
|
letter-spacing: -1px; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.notes { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* Overview step has no background or border */ |
||||||
|
|
||||||
|
.overview { |
||||||
|
background-color: transparent; |
||||||
|
border: none; |
||||||
|
box-shadow: none; |
||||||
|
pointer-events: none; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.overview.active { |
||||||
|
display: block; |
||||||
|
pointer-events: auto; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
Make inactive steps a little bit transparent. |
||||||
|
*/ |
||||||
|
.impress-enabled .step { |
||||||
|
margin: 0; |
||||||
|
opacity: 0.1; |
||||||
|
transition: opacity 1s; |
||||||
|
} |
||||||
|
|
||||||
|
.impress-enabled .step.active { opacity: 1 } |
||||||
|
|
||||||
|
|
||||||
|
/* Content */ |
||||||
|
|
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3 { |
||||||
|
margin-bottom: 0.5em; |
||||||
|
margin-top: 0.5em; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
margin: 0.7em; |
||||||
|
} |
||||||
|
|
||||||
|
li { |
||||||
|
margin: 0.2em; |
||||||
|
} |
||||||
|
|
||||||
|
/* Highlight.js used for coloring pre > code blocks. */ |
||||||
|
pre > code { |
||||||
|
font-size: 14px; |
||||||
|
text-shadow: 0 0 0 rgba(0, 0, 0, 0); |
||||||
|
} |
||||||
|
|
||||||
|
/* Inline code, no Highlight.js */ |
||||||
|
code { |
||||||
|
font-family: "Cutive mono","Courier New", monospace; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
a { |
||||||
|
color: inherit; |
||||||
|
text-decoration: none; |
||||||
|
padding: 0 0.1em; |
||||||
|
background: rgba(200,200,200,0.2); |
||||||
|
text-shadow: -1px 1px 2px rgba(100,100,100,0.9); |
||||||
|
border-radius: 0.2em; |
||||||
|
border-bottom: 1px solid rgba(100,100,100,0.2); |
||||||
|
border-left: 1px solid rgba(100,100,100,0.2); |
||||||
|
|
||||||
|
transition: 0.5s; |
||||||
|
} |
||||||
|
a:hover, |
||||||
|
a:focus { |
||||||
|
background: rgba(200,200,200,1); |
||||||
|
text-shadow: -1px 1px 2px rgba(100,100,100,0.5); |
||||||
|
} |
||||||
|
|
||||||
|
blockquote { |
||||||
|
font-family: 'PT Serif'; |
||||||
|
font-style: italic; |
||||||
|
font-weight: 400; |
||||||
|
} |
||||||
|
|
||||||
|
em { |
||||||
|
text-shadow: 0 2px 2px rgba(0, 0, 0, .3); |
||||||
|
} |
||||||
|
|
||||||
|
strong { |
||||||
|
text-shadow: -1px 1px 2px rgba(100,100,100,0.5); |
||||||
|
} |
||||||
|
|
||||||
|
q { |
||||||
|
font-family: 'PT Serif'; |
||||||
|
font-style: italic; |
||||||
|
font-weight: 400; |
||||||
|
text-shadow: 0 2px 2px rgba(0, 0, 0, .3); |
||||||
|
} |
||||||
|
|
||||||
|
strike { |
||||||
|
opacity: 0.7; |
||||||
|
} |
||||||
|
|
||||||
|
small { |
||||||
|
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 */ |
||||||
|
|
||||||
|
#overview2 { |
||||||
|
font-size: 20pt; |
||||||
|
padding-left: 200px; |
||||||
|
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 } |
||||||
Binary file not shown.
Loading…
Reference in new issue