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