web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

maintain aspect ratio for slides

Browse Source 
display index and slide count in title
This commit is contained in:
ansuz
2016-09-01 12:03:09 +02:00
parent f403d8e2e2
commit 8a659cf887
4 changed files with 182 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
customize.dist/main.css
View File

@@ -384,7 +384,8 @@ form.realtime #adduser {
form.realtime #addoption {
border-bottom-left-radius: 5px;
}
div.modal {
div.modal,
div#modal {
box-sizing: border-box;
z-index: 9001;
position: fixed;
@@ -395,7 +396,75 @@ div.modal {
display: none;
background-color: #302B28;
}
div.modal .center {
div.modal #content,
div#modal #content {
box-sizing: border-box;
border: 1px solid white;
vertical-align: middle;
padding: 2.5vw;
width: 100vw;
height: 56.25vw;
max-height: 100vh;
max-width: 177.78vh;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
div.modal #content p,
div#modal #content p,
div.modal #content li,
div#modal #content li,
div.modal #content pre,
div#modal #content pre,
div.modal #content code,
div#modal #content code {
font-size: 2.5vw;
line-height: 3vw;
}
div.modal #content h1,
div#modal #content h1 {
font-size: 5vw;
line-height: 6vw;
}
div.modal #content h2,
div#modal #content h2 {
font-size: 4.2vw;
line-height: 5.04vw;
}
div.modal #content h3,
div#modal #content h3 {
font-size: 3.6vw;
line-height: 4.32vw;
}
div.modal #content h4,
div#modal #content h4 {
font-size: 3vw;
line-height: 3.6vw;
}
div.modal #content h5,
div#modal #content h5 {
font-size: 2.2vw;
line-height: 2.64vw;
}
div.modal #content h6,
div#modal #content h6 {
font-size: 1.6vw;
line-height: 1.92vw;
}
div.modal #content pre > code,
div#modal #content pre > code {
display: block;
position: relative;
border: 1px solid #333;
width: 90%;
margin: auto;
padding-left: .25vw;
}
div.modal .center,
div#modal .center {
position: relative;
width: 80%;
height: 80%;
@@ -403,31 +472,39 @@ div.modal .center {
border: 1px solid #685d56;
text-align: center;
}
div.modal.shown {
div.modal.shown,
div#modal.shown {
display: block;
}
div.modal table {
div.modal table,
div#modal table {
margin: 30px;
border-collapse: collapse;
}
div.modal table input {
div.modal table input,
div#modal table input {
height: 100%;
width: 90%;
border: 3px solid #302B28;
}
div.modal table tfoot tr td {
div.modal table tfoot tr td,
div#modal table tfoot tr td {
z-index: 4000;
cursor: pointer;
}
div.modal #addtime,
div.modal #adddate {
div#modal #addtime,
div.modal #adddate,
div#modal #adddate {
color: #46E981;
border: 1px solid #46E981;
padding: 15px;
}
div.modal #adddate {
div.modal #adddate,
div#modal #adddate {
border-top-left-radius: 5px;
}
div.modal #addtime {
div.modal #addtime,
div#modal #addtime {
border-bottom-left-radius: 5px;
}

58
customize.dist/src/cryptpad.less
View File

@@ -471,7 +471,63 @@ form.realtime {
#addoption { .bottom-left; }
}
div.modal {
.viewportRatio (@x, @y, @p: 100) {
width: @p * 100vw;
height: @y * (@p * 100vw) / @x;
max-width: @x / @y * (@p * 100vh);
max-height: (@p * 100vh);
}
div.modal, div#modal {
#content {
box-sizing: border-box;
.size (@n) {
font-size: @n * 1vw;
line-height: @n * 1.2vw;
}
border: 1px solid white;
vertical-align: middle;
padding: 2.5vw;
width: 100vw;
height: 56.25vw; // height:width ratio = 9/16 = .5625
//background: pink;
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.5);
}
h1 { .size(5); }
h2 { .size(4.2); }
h3 { .size(3.6); }
h4 { .size (3); }
h5 { .size(2.2); }
h6 { .size(1.6); }
pre > code {
display: block;
position: relative;
border: 1px solid #333;
width: 90%;
margin: auto;
padding-left: .25vw;
}
}
box-sizing: border-box;
z-index: 9001;
position: fixed;