cryptpad/www/slide/app-slide.less

423 lines
11 KiB
Plaintext

@import (reference) "../../customize/src/less2/include/markdown.less";
@import (reference) "../../customize/src/less2/include/mediatag.less";
@import (reference) "../../customize/src/less2/include/framework.less";
&.cp-app-slide {
.mediatag_base();
.framework_main(
@bg-color: @colortheme_slide-bg,
@warn-color: @colortheme_slide-warn,
@color: @colortheme_slide-color
);
// body
font-size: unset;
display: flex;
flex-flow: column;
@slide-default-bg: #000;
.size (@n) {
// font-size: @n * 1vmin;
// line-height: @n * 1.1vmin;
font-size: @n * 10%;
// line-height: @n * 11%;
line-height: 110%;
}
h1 { font-size: 40px; }
h2 { font-size: 37px; }
h3 { font-size: 34px; }
h4 { font-size: 31px; }
h5 { font-size: 27px; }
h6 { font-size: 24px; }
#cp-app-slide-editor-container {
display: inline-flex;
flex-flow: column;
height: 100%;
min-height: 100%;
width: 50%;
min-width: 20%;
max-width: 80%;
overflow: hidden;
max-width: 100%;
flex: 1;
}
.CodeMirror {
flex: 1;
width: 100%;
font-size: initial;
}
.CodeMirror-focused .cm-matchhighlight {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
background-position: bottom;
background-repeat: repeat-x;
}
#cp-app-slide-colorpicker {
display: block;
}
#cme_toolbox {
z-index: 10000;
}
#cp-app-slide-editor {
flex: 1;
display: flex;
flex-flow: row;
height: 100%;
overflow: hidden;
.CodeMirror {
resize: none;
//width: 100vw;
}
&.cp-app-slide-preview {
.CodeMirror {
//resize: horizontal;
//width: 50vw;
}
}
}
.cp-app-slide-shown {
.cp-app-slide-container {
position: relative;
&> media-tag {
position: absolute;
top:0; right: 0; bottom: 0; left: 0;
z-index: -1;
&> img {
width: 100vw;
height: 56.25vw; // height:width ratio = 9/16 = .5625
max-height: 100vh;
max-width: 177.78vh; // 16/9 = 1.778
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
}
}
}
.cp-app-slide-preview {
.cp-app-slide-viewer {
width: 50vw;
overflow: hidden;
div#cp-app-slide-modal:not(.cp-app-slide-shown) {
position: relative;
top: auto;
left: auto;
width: auto;
display: block;
height: 100%;
#cp-app-slide-modal-content {
.cp-app-slide-container {
position: relative;
&> media-tag {
position: absolute;
top:0; right: 0; bottom: 0; left: 0;
z-index: -1;
&> img {
width: 50vw;
height: 28.125vw;
max-height: ~"calc(100vh - 96px)";
max-width: ~"calc(16 / 9 * (100vh - 96px))";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
}
}
.cp-app-slide-container {
width: 100%;
}
.cp-app-slide-frame {
width: 50vw;
height: 28.125vw; // height:width ratio = 9/16 = .5625
max-height: ~"calc(100vh - 96px)";
max-width: ~"calc(16 / 9 * (100vh - 96px))";
//max-height: 100vh;
//max-width: 177.78vh; // 16/9 = 1.778
}
}
#cp-app-slide-modal-exit {
visibility: hidden;
}
}
}
.CodeMirror {
flex: 1;
}
}
/* Slide position (print mode) */
@ratio:0.9;
@media print {
#cp-app-slide-editor-container {
display: none;
}
}
#cp-app-slide-print {
position: relative;
display: none;
font-size: @ratio*11.25vw;
.cp-app-slide-frame {
display: flex !important;
flex-flow: column;
padding: 0.5em;
margin: auto;
border: 1px solid black;
height: @ratio*56.25vw;
width: @ratio*100vw;
page-break-after: always;
position: relative;
box-sizing: border-box;
overflow: hidden;
li {
min-width: @ratio*50vw;
}
h1 {
padding-top: 0;
}
}
.cp-app-slide-container {
position: relative;
&> media-tag {
position: absolute;
top:0; right: 0; bottom: 0; left: 0;
z-index: -1;
&> img {
width: 90vw;
height: 50.625vw;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
}
}
.cp-app-slide-container {
width: 90vw;
height: 100vh;
margin: 0vh 5vw !important;
display: flex;
&:last-child {
height: ~"calc(100vh - 2px)";
}
}
}
/* Slide position (present mode) */
div#cp-app-slide-modal {
display: none;
background-color: black;
color: white;
.cp-app-slide-isempty {
display: flex;
align-items: center;
justify-content: center;
img {
max-width: 100%;
max-height: 100%;
}
}
/* Navigation buttons */
.cp-app-slide-modal-button {
position: absolute;
cursor: pointer;
font-size: 30px;
opacity: 0.6;
display: none;
z-index: 9001;
}
.cp-app-slide-modal-button:hover {
opacity: 1;
display: block !important;
}
#cp-app-slide-modal-exit {
left: 20px;
top: 20px;
}
#cp-app-slide-modal-left {
left: 6vw;
bottom: 10vh;
}
#cp-app-slide-modal-right {
right: 6vw;
bottom: 10vh;
}
&.cp-app-slide-shown {
display: block;
position: fixed;
top: 0px;
left: 0px;
z-index: 1000000; // one order of magnitude higher than alertify
height: 100vh;
width: 100%;
}
#cp-app-slide-modal-content {
font-size: 20vh;
position: relative;
height: 100%;
overflow: visible;
white-space: nowrap;
.cp-app-slide-frame {
overflow: hidden;
display: flex;
flex-flow: column !important;
box-sizing: border-box;
border: 1px solid;
white-space: normal;
vertical-align: middle;
padding: 0.5em;
width: 100vw;
height: 56.25vw; // height:width ratio = 9/16 = .5625
max-height: 100vh;
max-width: 177.78vh; // 16/9 = 1.778
margin: auto;
}
.cp-app-slide-container {
display: inline-flex;
height: 100%; width: 100vw;
text-align: center;
vertical-align: top;
}
&.cp-app-slide-transition {
.cp-app-slide-container {
transition: margin-left 1s;
}
}
media-tag button {
max-height: none;
}
}
box-sizing: border-box;
z-index: 9001;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
display: none;
background-color: @slide-default-bg;
}
/* Slide content */
div#cp-app-slide-modal #cp-app-slide-modal-content, #cp-app-slide-print {
.cp-app-slide-frame {
* {
.size(2.75);
* {
font-size: 1em;
line-height: 1em;
}
}
ul, ol {
ul, ol {
margin: 0;
}
}
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;
padding-top: 0;
margin-bottom: 0.5em;
}
.markdown_main();
.markdown_preformatted-code;
.markdown_gfm-table(#ddd);
ul, ol {
min-width: 50%;
max-width: 100%;
display: table;
margin: 0 auto;
padding-left: 0.3em;
}
// fixes image overflowing
media-tag {
height: 100%;
flex-flow: row;
justify-content: center;
& + * {
margin-top: 1rem;
}
img { flex: unset; }
}
img {
position: relative;
min-width: 1%;
margin: auto;
}
.cp-app-slide-number {
position: absolute;
right: 5vh;
bottom: 5vh;
.size(1);
}
.cp-app-slide-date {
position: absolute;
left: 5vh;
bottom: 5vh;
.size(1);
}
.cp-app-slide-title {
position: absolute;
bottom: 5vh;
left: 0px; right: 0px;
text-align: center;
.size(1);
}
text-align: left;
position: relative;
}
}
.cp-app-slide-frame * {
max-width: 100%;
max-height: 100%;
}
p {
padding: 0;
margin: 0;
min-height:0;
min-width:0;
}
pre.cp-slide-css-error {
color: white;
}
}