mirror of https://github.com/xwiki-labs/cryptpad
Export slides as PDF
This commit is contained in:
yflory
parent
4bac8ea0c7
commit
2392167996
|
|
@ -1,6 +1,11 @@
|
|||
/* Logs are shown to inform the user that something has happened
|
||||
They are only displayed briefly
|
||||
*/
|
||||
@media print {
|
||||
.alertify-logs {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.alertify-logs > * {
|
||||
padding: 12px 48px;
|
||||
color: #fafafa;
|
||||
|
|
@ -1000,11 +1005,6 @@ html.cp,
|
|||
.cp #main_other .buttons {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.cp #fileManagerIframe {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.cp .create,
|
||||
.cp .action {
|
||||
display: inline-block;
|
||||
|
|
@ -1294,196 +1294,6 @@ html.cp,
|
|||
.cp div.realtime #addoption {
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
.cp.slide #modal .button {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
font-size: 30px;
|
||||
opacity: 0.6;
|
||||
display: none;
|
||||
}
|
||||
.cp.slide #modal .button:hover {
|
||||
opacity: 1;
|
||||
display: block !important;
|
||||
}
|
||||
.cp.slide #modal #button_exit {
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
z-index: 9001;
|
||||
}
|
||||
.cp.slide #modal #button_left {
|
||||
left: 6vw;
|
||||
bottom: 10vh;
|
||||
}
|
||||
.cp.slide #modal #button_right {
|
||||
right: 6vw;
|
||||
bottom: 10vh;
|
||||
}
|
||||
.cp.slide #modal #content p,
|
||||
.cp.slide #modal #content ul,
|
||||
.cp.slide #modal #content ol {
|
||||
font-size: 26px;
|
||||
}
|
||||
.cp.slide #modal #content img {
|
||||
position: relative;
|
||||
min-width: 1%;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
.cp div.modal,
|
||||
.cp div#modal {
|
||||
box-sizing: border-box;
|
||||
z-index: 9001;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: none;
|
||||
background-color: #000;
|
||||
}
|
||||
.cp div.modal #content,
|
||||
.cp div#modal #content {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid white;
|
||||
vertical-align: middle;
|
||||
padding: 2.5vw;
|
||||
/* center things as much as possible
|
||||
|
||||
margin-top: 50vh;
|
||||
margin-bottom: 50vh;
|
||||
transform: translateY(-50%);
|
||||
|
||||
*/
|
||||
width: 100vw;
|
||||
height: 56.25vw;
|
||||
max-height: 100vh;
|
||||
max-width: 177.78vh;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.cp div.modal #content p,
|
||||
.cp div#modal #content p,
|
||||
.cp div.modal #content li,
|
||||
.cp div#modal #content li,
|
||||
.cp div.modal #content pre,
|
||||
.cp div#modal #content pre,
|
||||
.cp div.modal #content code,
|
||||
.cp div#modal #content code {
|
||||
font-size: 2.75vw;
|
||||
line-height: 3.025vw;
|
||||
}
|
||||
.cp div.modal #content h1,
|
||||
.cp div#modal #content h1 {
|
||||
font-size: 5vw;
|
||||
line-height: 5.5vw;
|
||||
}
|
||||
.cp div.modal #content h2,
|
||||
.cp div#modal #content h2 {
|
||||
font-size: 4.2vw;
|
||||
line-height: 4.62vw;
|
||||
}
|
||||
.cp div.modal #content h3,
|
||||
.cp div#modal #content h3 {
|
||||
font-size: 3.6vw;
|
||||
line-height: 3.96vw;
|
||||
}
|
||||
.cp div.modal #content h4,
|
||||
.cp div#modal #content h4 {
|
||||
font-size: 3vw;
|
||||
line-height: 3.3vw;
|
||||
}
|
||||
.cp div.modal #content h5,
|
||||
.cp div#modal #content h5 {
|
||||
font-size: 2.2vw;
|
||||
line-height: 2.42vw;
|
||||
}
|
||||
.cp div.modal #content h6,
|
||||
.cp div#modal #content h6 {
|
||||
font-size: 1.6vw;
|
||||
line-height: 1.76vw;
|
||||
}
|
||||
.cp div.modal #content h1,
|
||||
.cp div#modal #content h1,
|
||||
.cp div.modal #content h2,
|
||||
.cp div#modal #content h2,
|
||||
.cp div.modal #content h3,
|
||||
.cp div#modal #content h3,
|
||||
.cp div.modal #content h4,
|
||||
.cp div#modal #content h4,
|
||||
.cp div.modal #content h5,
|
||||
.cp div#modal #content h5,
|
||||
.cp div.modal #content h6,
|
||||
.cp div#modal #content h6 {
|
||||
color: inherit;
|
||||
}
|
||||
.cp div.modal #content pre > code,
|
||||
.cp div#modal #content pre > code {
|
||||
display: block;
|
||||
position: relative;
|
||||
border: 1px solid #333;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
padding-left: .25vw;
|
||||
}
|
||||
.cp div.modal #content ul,
|
||||
.cp div#modal #content ul,
|
||||
.cp div.modal #content ol,
|
||||
.cp div#modal #content ol {
|
||||
min-width: 50%;
|
||||
max-width: 100%;
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.cp div.modal .center,
|
||||
.cp div#modal .center {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
margin: auto;
|
||||
border: 1px solid #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
.cp div.modal.shown,
|
||||
.cp div#modal.shown {
|
||||
display: block;
|
||||
}
|
||||
.cp div.modal table,
|
||||
.cp div#modal table {
|
||||
margin: 30px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.cp div.modal table input,
|
||||
.cp div#modal table input {
|
||||
height: 100%;
|
||||
width: 90%;
|
||||
border: 3px solid #fff;
|
||||
}
|
||||
.cp div.modal table tfoot tr td,
|
||||
.cp div#modal table tfoot tr td {
|
||||
z-index: 4000;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cp div.modal #addtime,
|
||||
.cp div#modal #addtime,
|
||||
.cp div.modal #adddate,
|
||||
.cp div#modal #adddate {
|
||||
color: #46E981;
|
||||
border: 1px solid #46E981;
|
||||
padding: 15px;
|
||||
}
|
||||
.cp div.modal #adddate,
|
||||
.cp div#modal #adddate {
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
.cp div.modal #addtime,
|
||||
.cp div#modal #addtime {
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
#cors-store {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@
|
|||
They are only displayed briefly
|
||||
*/
|
||||
.alertify-logs {
|
||||
@media print {
|
||||
visibility: hidden;
|
||||
}
|
||||
> * {
|
||||
padding: @padding-base @padding-base * 4;
|
||||
color: @alertify-fore;
|
||||
|
|
|
|||
|
|
@ -494,12 +494,6 @@ noscript {
|
|||
}
|
||||
}
|
||||
|
||||
#fileManagerIframe {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
/* buttons */
|
||||
|
||||
.create, .action {
|
||||
|
|
@ -816,192 +810,6 @@ form.realtime, div.realtime {
|
|||
#adduser { .top-left; }
|
||||
#addoption { .bottom-left; }
|
||||
}
|
||||
|
||||
// used for slides
|
||||
.viewportRatio (@x, @y, @p: 100) {
|
||||
width: @p * 100vw;
|
||||
height: @y * (@p * 100vw) / @x;
|
||||
max-width: @x / @y * (@p * 100vh);
|
||||
max-height: (@p * 100vh);
|
||||
}
|
||||
|
||||
&.slide {
|
||||
#modal {
|
||||
.button {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
font-size: 30px;
|
||||
opacity: 0.6;
|
||||
display: none;
|
||||
}
|
||||
.button:hover {
|
||||
opacity: 1;
|
||||
display: block !important;
|
||||
}
|
||||
#button_exit {
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
z-index: 9001;
|
||||
}
|
||||
#button_left {
|
||||
left: 6vw;
|
||||
bottom: 10vh;
|
||||
}
|
||||
#button_right {
|
||||
right: 6vw;
|
||||
bottom: 10vh;
|
||||
}
|
||||
}
|
||||
#modal #content {
|
||||
p, ul, ol { font-size: 26px; }
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
min-width: 1%;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.modal, div#modal {
|
||||
display: none;
|
||||
|
||||
#content {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid white;
|
||||
|
||||
vertical-align: middle;
|
||||
padding: 2.5vw;
|
||||
|
||||
/* center things as much as possible
|
||||
|
||||
margin-top: 50vh;
|
||||
margin-bottom: 50vh;
|
||||
transform: translateY(-50%);
|
||||
|
||||
*/
|
||||
|
||||
width: 100vw;
|
||||
height: 56.25vw; // height:width ratio = 9/16 = .5625
|
||||
max-height: 100vh;
|
||||
max-width: 177.78vh; // 16/9 = 1.778
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top:0;bottom:0; // vertical center
|
||||
left:0;right:0; // horizontal center
|
||||
|
||||
p, li, pre, code {
|
||||
.size(2.75);
|
||||
}
|
||||
|
||||
h1 { .size(5); }
|
||||
h2 { .size(4.2); }
|
||||
h3 { .size(3.6); }
|
||||
h4 { .size (3); }
|
||||
h5 { .size(2.2); }
|
||||
h6 { .size(1.6); }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
display: block;
|
||||
position: relative;
|
||||
border: 1px solid #333;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
padding-left: .25vw;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
min-width: 50%;
|
||||
max-width: 100%;
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
box-sizing: border-box;
|
||||
z-index: 9001;
|
||||
position: fixed;
|
||||
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: none;
|
||||
|
||||
background-color: @slide-default-bg;
|
||||
|
||||
.center {
|
||||
position: relative;
|
||||
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
margin: auto;
|
||||
border: 1px solid @light-base;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.shown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 30px;
|
||||
|
||||
border-collapse: collapse;
|
||||
tr {
|
||||
td {
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
width: 90%;
|
||||
border: 3px solid @base;
|
||||
}
|
||||
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
span.remove {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
tfoot {
|
||||
tr {
|
||||
td {
|
||||
z-index: 4000;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#addtime,
|
||||
#adddate {
|
||||
color: @cp-green;
|
||||
border: 1px solid @cp-green;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#adddate { .top-left; }
|
||||
#addtime { .bottom-left; }
|
||||
}
|
||||
}
|
||||
|
||||
// hack for our cross-origin iframe
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
"scripts": {
|
||||
"lint": "jshint --config .jshintrc --exclude-path .jshintignore .",
|
||||
"test": "node TestSelenium.js",
|
||||
"style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css && lessc ./www/drive/file.less > ./www/drive/file.css && lessc ./www/settings/main.less > ./www/settings/main.css",
|
||||
"style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css && lessc ./www/drive/file.less > ./www/drive/file.css && lessc ./www/settings/main.less > ./www/settings/main.css && lessc ./www/slide/slide.less > ./www/slide/slide.css",
|
||||
"template": "cd customize.dist/src && node build.js"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
|
||||
<link rel="stylesheet" href="/customize/main.css">
|
||||
<link rel="stylesheet" href="./slide.css">
|
||||
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
|
||||
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
|
||||
<script src="/bower_components/codemirror/lib/codemirror.js"></script>
|
||||
|
|
@ -34,55 +35,6 @@
|
|||
<script src="/bower_components/codemirror/addon/fold/markdown-fold.js"></script>
|
||||
<script src="/bower_components/codemirror/addon/fold/comment-fold.js"></script>
|
||||
<script src="/bower_components/codemirror/addon/display/placeholder.js"></script>
|
||||
<style>
|
||||
html, body{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
#modal.shown {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 100;
|
||||
background-color: black;
|
||||
color: white;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#content h1, h2, h3, h4, h5, h6 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 { font-size: 40px; }
|
||||
h2 { font-size: 37px; }
|
||||
h3 { font-size: 34px; }
|
||||
h4 { font-size: 31px; }
|
||||
h5 { font-size: 27px; }
|
||||
h6 { font-size: 24px; }
|
||||
|
||||
.CodeMirror {
|
||||
height: 100%;
|
||||
}
|
||||
.CodeMirror-focused .cm-matchhighlight {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
|
||||
background-position: bottom;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
#colorPicker_check {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="bar"></div>
|
||||
|
|
@ -98,6 +50,7 @@
|
|||
<div id="button_right" class="button"><span class="fa fa-chevron-right"></span></div>
|
||||
<div id="content"></div>
|
||||
</div>
|
||||
<div id="print"></div>
|
||||
</span>
|
||||
<div id="nope"></div>
|
||||
<div id="colorPicker_check"></div>
|
||||
|
|
|
|||
|
|
@ -136,6 +136,7 @@ define([
|
|||
|
||||
var $modal = $pad.contents().find('#modal');
|
||||
var $content = $pad.contents().find('#content');
|
||||
var $print = $pad.contents().find('#print');
|
||||
|
||||
Slide.setModal($modal, $content, $pad, ifrw, initialState);
|
||||
|
||||
|
|
@ -466,6 +467,18 @@ define([
|
|||
var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
|
||||
$rightside.append($forgetPad);
|
||||
|
||||
var $printButton = $('<button>').text('PRINT').click(function () {
|
||||
console.log($print.html());
|
||||
console.log($content.html());
|
||||
console.log($content.html());
|
||||
$print.html($content.html());
|
||||
|
||||
ifrw.focus();
|
||||
ifrw.print();
|
||||
console.log($print.html());
|
||||
});
|
||||
$rightside.append($printButton);
|
||||
|
||||
var $present = Cryptpad.createButton('present', true)
|
||||
.click(function () {
|
||||
enterPresentationMode(true);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,285 @@
|
|||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 37px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 34px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 31px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 27px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 24px;
|
||||
}
|
||||
body .CodeMirror {
|
||||
height: 100%;
|
||||
}
|
||||
body .CodeMirror-focused .cm-matchhighlight {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
|
||||
background-position: bottom;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
#colorPicker_check {
|
||||
display: block;
|
||||
}
|
||||
#print {
|
||||
display: none;
|
||||
}
|
||||
@media print {
|
||||
body .CodeMirror,
|
||||
body #cme_toolbox {
|
||||
display: none !important;
|
||||
}
|
||||
body * {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
height: auto !important;
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
#print {
|
||||
position: relative;
|
||||
display: block;
|
||||
visibility: visible !important;
|
||||
}
|
||||
#print .slide-frame {
|
||||
display: block !important;
|
||||
page-break-before: always !important;
|
||||
page-break-inside: avoid !important;
|
||||
position: relative;
|
||||
}
|
||||
#print * {
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
.cp.slide #modal .button {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
font-size: 30px;
|
||||
opacity: 0.6;
|
||||
display: none;
|
||||
}
|
||||
.cp.slide #modal .button:hover {
|
||||
opacity: 1;
|
||||
display: block !important;
|
||||
}
|
||||
.cp.slide #modal #button_exit {
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
z-index: 9001;
|
||||
}
|
||||
.cp.slide #modal #button_left {
|
||||
left: 6vw;
|
||||
bottom: 10vh;
|
||||
}
|
||||
.cp.slide #modal #button_right {
|
||||
right: 6vw;
|
||||
bottom: 10vh;
|
||||
}
|
||||
.cp.slide #modal #content h1,
|
||||
.cp.slide #modal #content h2,
|
||||
.cp.slide #modal #content h3,
|
||||
.cp.slide #modal #content h4,
|
||||
.cp.slide #modal #content h5,
|
||||
.cp.slide #modal #content h6 {
|
||||
text-align: center;
|
||||
}
|
||||
.cp.slide #modal.shown {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 100;
|
||||
background-color: black;
|
||||
color: white;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
.cp.slide #modal #content p,
|
||||
.cp.slide #modal #content ul,
|
||||
.cp.slide #modal #content ol {
|
||||
font-size: 26px;
|
||||
}
|
||||
.cp.slide #modal #content img {
|
||||
position: relative;
|
||||
min-width: 1%;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
.cp div.modal,
|
||||
.cp div#modal {
|
||||
box-sizing: border-box;
|
||||
z-index: 9001;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: none;
|
||||
background-color: #000;
|
||||
}
|
||||
.cp div.modal #content,
|
||||
.cp div#modal #content {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid white;
|
||||
vertical-align: middle;
|
||||
padding: 2.5vw;
|
||||
/* center things as much as possible
|
||||
|
||||
margin-top: 50vh;
|
||||
margin-bottom: 50vh;
|
||||
transform: translateY(-50%);
|
||||
|
||||
*/
|
||||
width: 100vw;
|
||||
height: 56.25vw;
|
||||
max-height: 100vh;
|
||||
max-width: 177.78vh;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.cp div.modal #content p,
|
||||
.cp div#modal #content p,
|
||||
.cp div.modal #content li,
|
||||
.cp div#modal #content li,
|
||||
.cp div.modal #content pre,
|
||||
.cp div#modal #content pre,
|
||||
.cp div.modal #content code,
|
||||
.cp div#modal #content code {
|
||||
font-size: 2.75vw;
|
||||
line-height: 3.025vw;
|
||||
}
|
||||
.cp div.modal #content h1,
|
||||
.cp div#modal #content h1 {
|
||||
font-size: 5vw;
|
||||
line-height: 5.5vw;
|
||||
}
|
||||
.cp div.modal #content h2,
|
||||
.cp div#modal #content h2 {
|
||||
font-size: 4.2vw;
|
||||
line-height: 4.62vw;
|
||||
}
|
||||
.cp div.modal #content h3,
|
||||
.cp div#modal #content h3 {
|
||||
font-size: 3.6vw;
|
||||
line-height: 3.96vw;
|
||||
}
|
||||
.cp div.modal #content h4,
|
||||
.cp div#modal #content h4 {
|
||||
font-size: 3vw;
|
||||
line-height: 3.3vw;
|
||||
}
|
||||
.cp div.modal #content h5,
|
||||
.cp div#modal #content h5 {
|
||||
font-size: 2.2vw;
|
||||
line-height: 2.42vw;
|
||||
}
|
||||
.cp div.modal #content h6,
|
||||
.cp div#modal #content h6 {
|
||||
font-size: 1.6vw;
|
||||
line-height: 1.76vw;
|
||||
}
|
||||
.cp div.modal #content h1,
|
||||
.cp div#modal #content h1,
|
||||
.cp div.modal #content h2,
|
||||
.cp div#modal #content h2,
|
||||
.cp div.modal #content h3,
|
||||
.cp div#modal #content h3,
|
||||
.cp div.modal #content h4,
|
||||
.cp div#modal #content h4,
|
||||
.cp div.modal #content h5,
|
||||
.cp div#modal #content h5,
|
||||
.cp div.modal #content h6,
|
||||
.cp div#modal #content h6 {
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
.cp div.modal #content pre > code,
|
||||
.cp div#modal #content pre > code {
|
||||
display: block;
|
||||
position: relative;
|
||||
border: 1px solid #333;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
padding-left: .25vw;
|
||||
}
|
||||
.cp div.modal #content ul,
|
||||
.cp div#modal #content ul,
|
||||
.cp div.modal #content ol,
|
||||
.cp div#modal #content ol {
|
||||
min-width: 50%;
|
||||
max-width: 100%;
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.cp div.modal .center,
|
||||
.cp div#modal .center {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
margin: auto;
|
||||
border: 1px solid #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
.cp div.modal.shown,
|
||||
.cp div#modal.shown {
|
||||
display: block;
|
||||
}
|
||||
.cp div.modal table,
|
||||
.cp div#modal table {
|
||||
margin: 30px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.cp div.modal table input,
|
||||
.cp div#modal table input {
|
||||
height: 100%;
|
||||
width: 90%;
|
||||
border: 3px solid #fff;
|
||||
}
|
||||
.cp div.modal table tfoot tr td,
|
||||
.cp div#modal table tfoot tr td {
|
||||
z-index: 4000;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cp div.modal #addtime,
|
||||
.cp div#modal #addtime,
|
||||
.cp div.modal #adddate,
|
||||
.cp div#modal #adddate {
|
||||
color: #46E981;
|
||||
border: 1px solid #46E981;
|
||||
padding: 15px;
|
||||
}
|
||||
.cp div.modal #adddate,
|
||||
.cp div#modal #adddate {
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
.cp div.modal #addtime,
|
||||
.cp div#modal #addtime {
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
|
@ -0,0 +1,278 @@
|
|||
@import "../../customize.dist/src/less/variables.less";
|
||||
@import "../../customize.dist/src/less/mixins.less";
|
||||
|
||||
// used for slides
|
||||
.viewportRatio (@x, @y, @p: 100) {
|
||||
width: @p * 100vw;
|
||||
height: @y * (@p * 100vw) / @x;
|
||||
max-width: @x / @y * (@p * 100vh);
|
||||
max-height: (@p * 100vh);
|
||||
}
|
||||
|
||||
html, body{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
//.cp {
|
||||
h1 { font-size: 40px; }
|
||||
h2 { font-size: 37px; }
|
||||
h3 { font-size: 34px; }
|
||||
h4 { font-size: 31px; }
|
||||
h5 { font-size: 27px; }
|
||||
h6 { font-size: 24px; }
|
||||
|
||||
body {
|
||||
.CodeMirror {
|
||||
height: 100%;
|
||||
}
|
||||
.CodeMirror-focused .cm-matchhighlight {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
|
||||
background-position: bottom;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
}
|
||||
#colorPicker_check {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
.CodeMirror, #cme_toolbox {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
body * {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
html, body {
|
||||
height: auto !important;
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
#print {
|
||||
position: relative;
|
||||
display: block;
|
||||
visibility: visible !important;
|
||||
.slide-frame {
|
||||
display: block !important;
|
||||
page-break-before: always !important;
|
||||
page-break-inside: avoid !important;
|
||||
position: relative;
|
||||
}
|
||||
* {
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp {
|
||||
|
||||
&.slide {
|
||||
#modal {
|
||||
.button {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
font-size: 30px;
|
||||
opacity: 0.6;
|
||||
display: none;
|
||||
}
|
||||
.button:hover {
|
||||
opacity: 1;
|
||||
display: block !important;
|
||||
}
|
||||
#button_exit {
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
z-index: 9001;
|
||||
}
|
||||
#button_left {
|
||||
left: 6vw;
|
||||
bottom: 10vh;
|
||||
}
|
||||
#button_right {
|
||||
right: 6vw;
|
||||
bottom: 10vh;
|
||||
}
|
||||
#content {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
&.shown {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 100;
|
||||
background-color: black;
|
||||
color: white;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
#modal #content {
|
||||
p, ul, ol { font-size: 26px; }
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
min-width: 1%;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.modal, div#modal {
|
||||
display: none;
|
||||
|
||||
#content {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid white;
|
||||
|
||||
vertical-align: middle;
|
||||
padding: 2.5vw;
|
||||
|
||||
/* center things as much as possible
|
||||
|
||||
margin-top: 50vh;
|
||||
margin-bottom: 50vh;
|
||||
transform: translateY(-50%);
|
||||
|
||||
*/
|
||||
|
||||
width: 100vw;
|
||||
height: 56.25vw; // height:width ratio = 9/16 = .5625
|
||||
max-height: 100vh;
|
||||
max-width: 177.78vh; // 16/9 = 1.778
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top:0;bottom:0; // vertical center
|
||||
left:0;right:0; // horizontal center
|
||||
|
||||
p, li, pre, code {
|
||||
.size(2.75);
|
||||
}
|
||||
|
||||
h1 { .size(5); }
|
||||
h2 { .size(4.2); }
|
||||
h3 { .size(3.6); }
|
||||
h4 { .size (3); }
|
||||
h5 { .size(2.2); }
|
||||
h6 { .size(1.6); }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
display: block;
|
||||
position: relative;
|
||||
border: 1px solid #333;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
padding-left: .25vw;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
min-width: 50%;
|
||||
max-width: 100%;
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
box-sizing: border-box;
|
||||
z-index: 9001;
|
||||
position: fixed;
|
||||
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: none;
|
||||
|
||||
background-color: @slide-default-bg;
|
||||
|
||||
.center {
|
||||
position: relative;
|
||||
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
margin: auto;
|
||||
border: 1px solid @light-base;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.shown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 30px;
|
||||
|
||||
border-collapse: collapse;
|
||||
tr {
|
||||
td {
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
width: 90%;
|
||||
border: 3px solid @base;
|
||||
}
|
||||
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
span.remove {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
tfoot {
|
||||
tr {
|
||||
td {
|
||||
z-index: 4000;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#addtime,
|
||||
#adddate {
|
||||
color: @cp-green;
|
||||
border: 1px solid @cp-green;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#adddate { .top-left; }
|
||||
#addtime { .bottom-left; }
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue