You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
419 lines
8.3 KiB
Plaintext
419 lines
8.3 KiB
Plaintext
@import "/customize/src/less/variables.less";
|
|
@import "/customize/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;
|
|
}
|
|
|
|
@media print {
|
|
@page {
|
|
margin: 0;
|
|
size: landscape;
|
|
}
|
|
body {
|
|
.CodeMirror, #cme_toolbox {
|
|
display: none;
|
|
}
|
|
* {
|
|
visibility: hidden;
|
|
height: auto;
|
|
max-height: none;
|
|
}
|
|
display:block;
|
|
}
|
|
html, body {
|
|
max-height: none;
|
|
overflow: visible;
|
|
}
|
|
html {
|
|
.cp #print {
|
|
display: block;
|
|
visibility: visible;
|
|
* {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
#cme_toolbox {
|
|
z-index: 10000;
|
|
}
|
|
#editorContainer {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-flow: row;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
.CodeMirror {
|
|
resize: none;
|
|
width: 100vw;
|
|
}
|
|
&.preview {
|
|
.CodeMirror {
|
|
//resize: horizontal;
|
|
width: 50vw;
|
|
}
|
|
}
|
|
}
|
|
.preview .cp {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
div#modal:not(.shown) {
|
|
position: relative;
|
|
top: auto;
|
|
left: auto;
|
|
width: auto;
|
|
display: block;
|
|
height: 100%;
|
|
#content {
|
|
.slide-container {
|
|
width: 100%;
|
|
}
|
|
.slide-frame {
|
|
width: 50vw;
|
|
height: 28.125vw; // height:width ratio = 9/16 = .5625
|
|
max-height: 100vh;
|
|
max-width: 177.78vh; // 16/9 = 1.778
|
|
}
|
|
}
|
|
#button_exit {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
.cp {
|
|
|
|
/* Slide position (print mode) */
|
|
@ratio:0.9;
|
|
#print {
|
|
position: relative;
|
|
display: none;
|
|
font-size: @ratio*11.25vw;
|
|
.slide-frame {
|
|
display: block !important;
|
|
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;
|
|
}
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
.slide-container {
|
|
width: 90vw;
|
|
height: 100vh;
|
|
margin: 0vh 5vw;
|
|
display: flex;
|
|
&:last-child {
|
|
height: ~"calc(100vh - 2px)";
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Slide position (present mode) */
|
|
div.modal, div#modal {
|
|
display: none;
|
|
background-color: black;
|
|
color: white;
|
|
|
|
/* Navigation buttons */
|
|
.button {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
font-size: 30px;
|
|
opacity: 0.6;
|
|
display: none;
|
|
z-index: 9001;
|
|
}
|
|
.button:hover {
|
|
opacity: 1;
|
|
display: block !important;
|
|
}
|
|
#button_exit {
|
|
left: 20px;
|
|
top: 20px;
|
|
}
|
|
#button_left {
|
|
left: 6vw;
|
|
bottom: 10vh;
|
|
}
|
|
#button_right {
|
|
right: 6vw;
|
|
bottom: 10vh;
|
|
}
|
|
&.shown {
|
|
display: block;
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
z-index: 100000;
|
|
height: 100vh;
|
|
width: 100%;
|
|
}
|
|
#content {
|
|
font-size: 20vh;
|
|
position: relative;
|
|
height: 100%;
|
|
overflow: visible;
|
|
white-space: nowrap;
|
|
.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;
|
|
}
|
|
.slide-container {
|
|
display: inline-flex;
|
|
height: 100%; width: 100vw;
|
|
text-align: center;
|
|
vertical-align: top;
|
|
}
|
|
&.transition {
|
|
.slide-container {
|
|
transition: margin-left 1s;
|
|
}
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* Slide content */
|
|
div#modal #content, #print {
|
|
.slide-frame {
|
|
* {
|
|
.size(2.75);
|
|
* {
|
|
font-size: 100%;
|
|
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;
|
|
}
|
|
|
|
pre > code {
|
|
display: block;
|
|
position: relative;
|
|
border: 1px solid #333;
|
|
width: 90%;
|
|
margin: auto;
|
|
padding-left: .25vw;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
ul, ol {
|
|
min-width: 50%;
|
|
max-width: 100%;
|
|
display: table;
|
|
margin: 0 auto;
|
|
padding-left: 0.3em;
|
|
}
|
|
|
|
img {
|
|
position: relative;
|
|
min-width: 1%;
|
|
max-width: 90%;
|
|
max-height: 90%;
|
|
margin: auto;
|
|
}
|
|
.slideNumber {
|
|
position: absolute;
|
|
right: 5vh;
|
|
bottom: 5vh;
|
|
.size(1);
|
|
}
|
|
.slideDate {
|
|
position: absolute;
|
|
left: 5vh;
|
|
bottom: 5vh;
|
|
.size(1);
|
|
}
|
|
.slideTitle {
|
|
position: absolute;
|
|
bottom: 5vh;
|
|
left: 0px; right: 0px;
|
|
text-align: center;
|
|
.size(1);
|
|
}
|
|
text-align: left;
|
|
position: relative;
|
|
}
|
|
}
|
|
}
|
|
|
|
#fileDialog {
|
|
position: absolute;
|
|
background-color: rgba(200, 200, 200, 0.8);
|
|
top: 15vh; bottom: 15vh;
|
|
left: 10vw; right: 10vw;
|
|
border: 1px solid black;
|
|
z-index: 100000;
|
|
overflow: auto;
|
|
display: none;
|
|
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
.close {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 5px;
|
|
cursor: pointer;
|
|
}
|
|
.element {
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
width: 100px;
|
|
height: 100px;
|
|
border: 1px solid #ccc;
|
|
margin: 5px;
|
|
overflow: hidden;
|
|
word-wrap: break-word;
|
|
background-color: white;
|
|
padding: 5px;
|
|
align-items: center;
|
|
span {
|
|
width: 100px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.slide-frame * {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
p {
|
|
display: flex;
|
|
flex-flow: column;
|
|
padding: 0;
|
|
margin: 0;
|
|
min-height:0;
|
|
flex: 1;
|
|
}
|
|
|
|
media-tag {
|
|
min-height: 0;
|
|
flex: 1;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
media-tag img {
|
|
max-height: 100% !important;
|
|
}
|
|
|
|
media-tag iframe {
|
|
min-height: 100%;
|
|
}
|