Change the CSS and colors

This commit is contained in:
yflory 2017-01-18 13:51:11 +01:00
parent 82e8041054
commit b9c4ceccd4
15 changed files with 192 additions and 129 deletions

View File

@ -24,7 +24,7 @@
</a>
</span>
<span class="slogan" data-localization="main_slogan"></span>
<!--<span class="slogan" data-localization="main_slogan"></span>-->
<span id="language-selector" class="right dropdown-bar"></span>
<span class="right">
@ -42,11 +42,6 @@
</div>
<a data-localization-title="github_ribbon" href="https://github.com/xwiki-labs/cryptpad" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 50px; border: 0; left: 0; transform: scale(-1, 1);z-index:2;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<!-- Thanks! http://tholman.com/github-corners/ -->
<center>
<noscript>
<p>

BIN
customize.dist/bg3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 307 KiB

View File

@ -24,7 +24,7 @@
</a>
</span>
<span class="slogan" data-localization="main_slogan"></span>
<!--<span class="slogan" data-localization="main_slogan"></span>-->
<span id="language-selector" class="right dropdown-bar"></span>
<span class="right">
@ -42,11 +42,6 @@
</div>
<a data-localization-title="github_ribbon" href="https://github.com/xwiki-labs/cryptpad" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 50px; border: 0; left: 0; transform: scale(-1, 1);z-index:2;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<!-- Thanks! http://tholman.com/github-corners/ -->
<center>
<noscript>
<p>

View File

@ -24,7 +24,7 @@
</a>
</span>
<span class="slogan" data-localization="main_slogan"></span>
<!--<span class="slogan" data-localization="main_slogan"></span>-->
<span id="language-selector" class="right dropdown-bar"></span>
<span class="right">
@ -42,11 +42,6 @@
</div>
<a data-localization-title="github_ribbon" href="https://github.com/xwiki-labs/cryptpad" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 50px; border: 0; left: 0; transform: scale(-1, 1);z-index:2;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<!-- Thanks! http://tholman.com/github-corners/ -->
<center>
<noscript>
<p>
@ -61,8 +56,14 @@
<a data-localization-title="github_ribbon" href="https://github.com/xwiki-labs/cryptpad" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 50px; border: 0; left: 0; transform: scale(-1, 1);z-index:2;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<!-- Thanks! http://tholman.com/github-corners/ -->
<div id="main">
<div id="overlay"></div>
<div id="main-container">
<div id="data">
<p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
@ -76,25 +77,24 @@
<a id="create-poll" href="/poll/"><button class="btn btn-secondary" data-localization="button_newpoll"></button></a>
<a id="create-slide" href="/slide/"><button class="btn btn-secondary" data-localization="button_newslide"></button></a>
<br>
<button class="btn btn-default nologin" data-localization="login_nologin"></button>
<button class="btn btn-success nologin" data-localization="login_nologin"></button>
</div>
</div>
<div id="userForm">
<center>
<!--<center>
<h1 data-localization="form_title"></h1>
</center>
<label for="name" data-localization="form_username"></label><br>
</center>-->
<!--<label for="name" data-localization="form_username"></label>-->
<input type="text" id="name" name="name" data-localization-placeholder="login_username" autofocus><br>
<label for="password" data-localization="form_password"></label><br>
<!--<label for="password" data-localization="form_password"></label>--><br>
<input type="password" id="password" name="password" data-localization-placeholder="login_password"><br>
<input type="checkbox" id="rememberme" checked="checked"><label for="rememberme" data-localization="login_remember"></label><br>
<br>
<span class="remember"><input type="checkbox" id="rememberme" checked="checked"><label for="rememberme" data-localization="login_remember"></label></span><br>
<button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-primary register half" data-localization="login_register"></button><br>
</div>
</div>
</div>

View File

@ -3,7 +3,7 @@
*/
.alertify-logs > * {
padding: 12px 48px;
color: #fafafa;
color: #111;
font-weight: bold;
font-size: large;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
@ -18,7 +18,7 @@
}
.alertify-logs > *.success {
background: #46E981;
color: #302B28;
color: #f5f5f5;
}
.alertify {
position: fixed;
@ -79,8 +79,8 @@
}
.alertify .dialog input:not(.form-control),
.alertify .alert input:not(.form-control) {
background-color: #302B28;
color: #fafafa;
background-color: #f5f5f5;
color: #111;
border: 0px;
border-radius: 5px;
margin-bottom: 15px;
@ -112,8 +112,8 @@
font-size: 14px;
text-decoration: none;
cursor: pointer;
color: #fafafa;
border: 1px solid #302B28;
color: #111;
border: 1px solid #f5f5f5;
border-radius: 5px;
}
.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover,
@ -124,7 +124,7 @@
}
.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):focus,
.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):focus {
border: 1px dotted #302B28;
border: 1px dotted #f5f5f5;
}
.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button)::-moz-focus-inner,
.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button)::-moz-focus-inner {
@ -210,7 +210,7 @@
height: 2.5em;
display: inline-block;
width: 100%;
background: #302B28;
background: #f5f5f5;
border-top: 1px solid #444;
}
.top-bar a,
@ -226,7 +226,7 @@
display: block;
margin-left: 10px;
padding-top: 3px;
color: #fafafa;
color: #111;
}
.top-bar img,
.bottom-bar img {
@ -305,7 +305,7 @@
bottom: 0px;
left: 0px;
right: 0px;
background: #302B28;
background: #f5f5f5;
text-align: center;
font-size: 1.5em;
}
@ -461,8 +461,8 @@
html.cp,
.cp body {
font-size: .875em;
background-color: #302B28;
color: #fafafa;
background-color: #f5f5f5;
color: #111;
font-family: Georgia,Cambria,serif;
height: 100%;
}
@ -501,7 +501,7 @@ html.cp,
.cp h4,
.cp h5,
.cp h6 {
color: #fafafa;
color: #111;
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
@ -592,16 +592,18 @@ html.cp,
background-color: #d8d8d8;
}
.cp #main {
background-image: url('/customize/bg2.jpg');
background-image: url('/customize/bg3.jpg');
background-size: cover;
background-position: center center;
}
.cp #main_other {
padding: 0 15vw;
}
.cp #main,
.cp #main_other {
position: absolute;
left: 0;
right: 0;
padding: 0 15vw;
height: calc(100vh - 50px);
margin: auto;
font-size: medium;
@ -614,40 +616,67 @@ html.cp,
right: 0;
bottom: 0;
background-color: #000;
opacity: 0.2;
opacity: 0.3;
}
.cp #main #main-container,
.cp #main_other #main-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
margin-left: auto;
margin-right: auto;
display: inline-block;
width: 1000px;
max-width: 90%;
}
.cp #main #data,
.cp #main_other #data {
width: 600px;
max-width: 60%;
color: #fff;
padding: 15px;
box-sizing: border-box;
position: absolute;
display: inline-block;
top: 50%;
left: 0;
transform: translateY(-50%);
width: calc(100% - 450px - 30vw);
}
.cp #main #data p,
.cp #main_other #data p {
margin: 0;
padding: 0;
font-size: 20px;
line-height: 1.5em;
}
.cp #main #data h2,
.cp #main_other #data h2 {
font-weight: normal;
font-size: 48px;
line-height: 1.2em;
color: #fff;
}
.cp #main #data h5,
.cp #main_other #data h5 {
font-size: 1em;
color: #fff;
}
.cp #main #data #tryit,
.cp #main_other #data #tryit {
margin-top: 20px;
margin-bottom: 5px;
}
.cp #main #userForm,
.cp #main_other #userForm {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
right: 15vw;
margin-left: 50px;
display: inline-block;
width: 400px;
width: 350px;
max-width: 35%;
padding: 10px;
box-sizing: border-box;
font-family: lato, Helvetica, sans-serif;
@ -664,23 +693,29 @@ html.cp,
.cp #main_other #userForm [type="password"] {
width: 100%;
}
.cp #main #userForm .remember,
.cp #main_other #userForm .remember {
vertical-align: middle;
line-height: 28px;
height: 28px;
display: inline-block;
margin: 10px 0 20px 0;
}
.cp #main #userForm [type="checkbox"],
.cp #main_other #userForm [type="checkbox"] {
vertical-align: sub;
vertical-align: text-top;
margin: 0;
margin-top: 10px;
margin-right: 5px;
}
.cp #main #userForm label,
.cp #main_other #userForm label {
margin-bottom: 0;
margin-top: 0.5em;
}
.cp #main #userForm button,
.cp #main_other #userForm button {
font-weight: bold;
width: 100%;
margin: 2px 0px;
text-transform: uppercase;
cursor: pointer;
}
.cp #main #userForm button.half,
@ -697,7 +732,7 @@ html.cp,
}
.cp #main .buttons button,
.cp #main_other .buttons button {
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
margin-top: 10px;
}
@ -754,7 +789,7 @@ html.cp,
cursor: pointer;
}
.cp tbody tr:nth-child(odd) {
background-color: #685d56;
background-color: #ffffff;
}
.cp tbody tr th:first-of-type {
border-left: 0px;
@ -765,7 +800,7 @@ html.cp,
}
.cp tbody tr th,
.cp tbody tr td {
color: #fafafa;
color: #111;
}
.cp tbody tr th.remove,
.cp tbody tr td.remove {
@ -836,7 +871,7 @@ html.cp,
.cp form.realtime table tr td div.text-cell input[disabled],
.cp div.realtime table tr td div.text-cell input[disabled] {
background-color: transparent;
color: #fafafa;
color: #111;
font-weight: bold;
}
.cp form.realtime table tr td.checkbox-cell,
@ -871,7 +906,7 @@ html.cp,
.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover {
font-weight: bold;
background-color: #FF0073;
color: #302B28;
color: #f5f5f5;
display: block;
}
.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after,
@ -901,13 +936,13 @@ html.cp,
.cp form.realtime table input[type="text"],
.cp div.realtime table input[type="text"] {
height: auto;
border: 1px solid #302B28;
border: 1px solid #f5f5f5;
width: 80%;
}
.cp form.realtime table thead td,
.cp div.realtime table thead td {
padding: 0px 5px;
background: #4c443f;
background: #ffffff;
border-radius: 20px 20px 0 0;
text-align: center;
}
@ -924,7 +959,7 @@ html.cp,
}
.cp form.realtime table tbody .text-cell,
.cp div.realtime table tbody .text-cell {
background: #4c443f;
background: #ffffff;
}
.cp form.realtime table tbody .text-cell input[type="text"],
.cp div.realtime table tbody .text-cell input[type="text"] {
@ -957,7 +992,7 @@ html.cp,
.cp form.realtime table thead tr th input[type="text"][disabled],
.cp div.realtime table thead tr th input[type="text"][disabled] {
background-color: transparent;
color: #fafafa;
color: #111;
font-weight: bold;
}
.cp form.realtime table thead tr th .remove,
@ -1020,7 +1055,7 @@ html.cp,
width: 100%;
height: 100vh;
display: none;
background-color: #302B28;
background-color: #f5f5f5;
}
.cp div.modal #content,
.cp div#modal #content {
@ -1111,7 +1146,7 @@ html.cp,
width: 80%;
height: 80%;
margin: auto;
border: 1px solid #685d56;
border: 1px solid #ffffff;
text-align: center;
}
.cp div.modal.shown,
@ -1127,7 +1162,7 @@ html.cp,
.cp div#modal table input {
height: 100%;
width: 90%;
border: 3px solid #302B28;
border: 3px solid #f5f5f5;
}
.cp div.modal table tfoot tr td,
.cp div#modal table tfoot tr td {

View File

@ -24,7 +24,7 @@
</a>
</span>
<span class="slogan" data-localization="main_slogan"></span>
<!--<span class="slogan" data-localization="main_slogan"></span>-->
<span id="language-selector" class="right dropdown-bar"></span>
<span class="right">
@ -42,11 +42,6 @@
</div>
<a data-localization-title="github_ribbon" href="https://github.com/xwiki-labs/cryptpad" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 50px; border: 0; left: 0; transform: scale(-1, 1);z-index:2;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<!-- Thanks! http://tholman.com/github-corners/ -->
<center>
<noscript>
<p>

View File

@ -40,7 +40,12 @@ var fragments = {};
var source = swap(template, {
topbar: fragments.topbar,
fork: fragments.fork,
main: fragments[page],
main: swap(fragments[page], {
topbar: fragments.topbar,
fork: fragments.fork,
logo: fragments.logo,
noscript: fragments.noscript,
}),
logo: fragments.logo,
noscript: fragments.noscript,
});

View File

@ -1,36 +1,38 @@
{{fork}}
<div id="main">
<div id="overlay"></div>
<div id="data">
<p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
<div id="main-container">
<div id="data">
<p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
<center>
<h5 id="tryit" data-localization="tryIt"></h5>
</center>
<center>
<h5 id="tryit" data-localization="tryIt"></h5>
</center>
<div id="buttons" class="buttons">
<a id="create-pad" href="/pad/"><button class="btn btn-secondary" data-localization="button_newpad"></button></a>
<a id="create-code" href="/code/"><button class="btn btn-secondary" data-localization="button_newcode"></button></a>
<a id="create-poll" href="/poll/"><button class="btn btn-secondary" data-localization="button_newpoll"></button></a>
<a id="create-slide" href="/slide/"><button class="btn btn-secondary" data-localization="button_newslide"></button></a>
<br>
<button class="btn btn-success nologin" data-localization="login_nologin"></button>
</div>
<div id="buttons" class="buttons">
<a id="create-pad" href="/pad/"><button class="btn btn-secondary" data-localization="button_newpad"></button></a>
<a id="create-code" href="/code/"><button class="btn btn-secondary" data-localization="button_newcode"></button></a>
<a id="create-poll" href="/poll/"><button class="btn btn-secondary" data-localization="button_newpoll"></button></a>
<a id="create-slide" href="/slide/"><button class="btn btn-secondary" data-localization="button_newslide"></button></a>
<br>
<button class="btn btn-default nologin" data-localization="login_nologin"></button>
</div>
</div>
<div id="userForm">
<!--<center>
<h1 data-localization="form_title"></h1>
</center>-->
<!--<label for="name" data-localization="form_username"></label>-->
<input type="text" id="name" name="name" data-localization-placeholder="login_username" autofocus><br>
<div id="userForm">
<center>
<h1 data-localization="form_title"></h1>
</center>
<label for="name" data-localization="form_username"></label><br>
<input type="text" id="name" name="name" data-localization-placeholder="login_username" autofocus><br>
<label for="password" data-localization="form_password"></label><br>
<input type="password" id="password" name="password" data-localization-placeholder="login_password"><br>
<input type="checkbox" id="rememberme" checked="checked"><label for="rememberme" data-localization="login_remember"></label><br>
<br>
<button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-primary register half" data-localization="login_register"></button><br>
<!--<label for="password" data-localization="form_password"></label>--><br>
<input type="password" id="password" name="password" data-localization-placeholder="login_password"><br>
<span class="remember"><input type="checkbox" id="rememberme" checked="checked"><label for="rememberme" data-localization="login_remember"></label></span><br>
<button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-primary register half" data-localization="login_register"></button><br>
</div>
</div>
</div>

View File

@ -5,7 +5,7 @@
</a>
</span>
<span class="slogan" data-localization="main_slogan"></span>
<!--<span class="slogan" data-localization="main_slogan"></span>-->
<span id="language-selector" class="right dropdown-bar"></span>
<span class="right">

View File

@ -37,7 +37,7 @@ body {
a.github-corner > svg {
fill: @cp-blue;
color: @base;
color: @old-base;
}
.lato {
@ -150,10 +150,13 @@ body.html {
}
}
#main {
background-image: url('/customize/bg2.jpg');
background-image: url('/customize/bg3.jpg');
background-size: cover;
background-position: center center;
}
#main_other {
padding: 0 @main-border-width;
}
#main, #main_other {
#overlay {
position: absolute;
@ -162,48 +165,75 @@ body.html {
right: 0;
bottom: 0;
background-color: #000;
opacity: 0.2;
opacity: 0.3;
}
position: absolute;
left: 0;
right: 0;
padding: 0 @main-border-width;
//padding: 0;
height: ~"calc(100vh - 50px)";
margin: auto;
//margin-top: 100px;
font-size: medium;
#main-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
margin-left: auto;
margin-right: auto;
display: inline-block;
width: 1000px;
max-width: 90%;
}
#data {
p {
margin: 0;
padding: 0;
font-size: 20px;
line-height: 1.5em;
}
h5 {
h2 {
font-weight: normal;
font-size: 48px;
line-height: 1.2em;
color: @main-color;
}
h5 {
font-size: 1em;
color: @main-color;
}
width: 600px;
max-width: 60%;
color: @main-color;
padding: 15px;
box-sizing: border-box;
position: absolute;
display: inline-block;
top: 50%;
left: 0;
transform: translateY(-50%);
width: ~"calc(100% - 450px - 30vw)";
// width: ~"calc(100% - 450px - 30vw)";
// background-color: @main-block-bg;
#tryit {
margin-top: 20px;
margin-bottom: 5px;
}
}
#userForm {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
right: @main-border-width;
margin-left: 50px;
display: inline-block;
width: 400px;
width: 350px;
max-width: 35%;
// background-color: @main-block-bg;
padding: 10px;
box-sizing: border-box;
@ -219,22 +249,31 @@ body.html {
width: 100%;
}
.remember {
vertical-align: middle;
line-height: 28px;
height: 28px;
display: inline-block;
margin: 10px 0 20px 0;
}
[type="checkbox"] {
vertical-align: sub;
vertical-align: text-top;
margin: 0;
margin-top: 10px;
//margin-top: 10px;
margin-right: 5px;
}
label {
margin-bottom: 0;
margin-top: 0.5em;
//margin-top: 0.5em;
}
button {
font-weight: bold;
width: 100%;
margin: 2px 0px;
text-transform: uppercase;
cursor: pointer;
&.half {
width: ~"calc(50% - 4px)";
@ -248,7 +287,7 @@ body.html {
.buttons {
text-align: center;
button {
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
margin-top: 10px;
}

View File

@ -1,7 +1,8 @@
@base: #302B28;
@base: #f5f5f5;
@light-base: lighten(@base, 20%);
@less-light-base: lighten(@base, 10%);
@fore: #fafafa;
@fore: #111;
@old-base: #302B28;
@cp-green: #46E981;
@cp-accent: lighten(@cp-green, 20%);

View File

@ -19,8 +19,6 @@
<body class="html">
{{topbar}}
{{fork}}
{{noscript}}
{{main}}

View File

@ -24,7 +24,7 @@
</a>
</span>
<span class="slogan" data-localization="main_slogan"></span>
<!--<span class="slogan" data-localization="main_slogan"></span>-->
<span id="language-selector" class="right dropdown-bar"></span>
<span class="right">
@ -42,11 +42,6 @@
</div>
<a data-localization-title="github_ribbon" href="https://github.com/xwiki-labs/cryptpad" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 50px; border: 0; left: 0; transform: scale(-1, 1);z-index:2;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<!-- Thanks! http://tholman.com/github-corners/ -->
<center>
<noscript>
<p>

View File

@ -239,7 +239,7 @@ define(function () {
// login
out.login_login = "Connexion";
out.login_nologin = "Utiliser une session anonyme";
out.login_nologin = "Documents récents de ce navigateur";
out.login_register = "Inscription";
out.logoutButton = "Déconnexion";
@ -276,7 +276,8 @@ define(function () {
// index.html
out.main_p1 = 'CryptPad est l\'éditeur collaboratif en temps réel <strong>zero knowledge</strong>. Le chiffrement est effectué depuis votre navigateur, ce qui protège les données contre le serveur, le cloud, et la NSA. La clé de chiffrement est stockée dans l\'<a href="https://fr.wikipedia.org/wiki/Identificateur_de_fragment">identifieur de fragment</a> de l\'URL qui n\'est jamais envoyée au serveur mais est accessible depuis javascript, de sorte qu\'en partageant l\'URL, vous donnez l\'accès au pad à ceux qui souhaitent participer.';
//out.main_p1 = 'CryptPad est l\'éditeur collaboratif en temps réel <strong>zero knowledge</strong>. Le chiffrement est effectué depuis votre navigateur, ce qui protège les données contre le serveur, le cloud, et la NSA. La clé de chiffrement est stockée dans l\'<a href="https://fr.wikipedia.org/wiki/Identificateur_de_fragment">identifieur de fragment</a> de l\'URL qui n\'est jamais envoyée au serveur mais est accessible depuis javascript, de sorte qu\'en partageant l\'URL, vous donnez l\'accès au pad à ceux qui souhaitent participer.';
out.main_p1 = "<h2>Collaborez en tout confiance</h2><br>Développez vos idées collaborativement grâce à des documents partagés en temps-réel, tout en gardant vos données personnelles invisibles, même pour nous, avec la technologie <strong>Zero Knowledge</strong>.";
out.main_p2 = 'Ce projet utilise l\'éditeur visuel (WYSIWYG) <a href="http://ckeditor.com/">CKEditor</a>, l\'éditeur de code source <a href="https://codemirror.net/">CodeMirror</a>, et le moteur temps-réel <a href="https://github.com/xwiki-contrib/chainpad">ChainPad</a>.';
out.main_howitworks = 'Comment ça fonctionne';
out.main_howitworks_p1 = 'CryptPad utilise une variante de l\'algorithme d\'<a href="https://en.wikipedia.org/wiki/Operational_transformation">Operational transformation</a> qui est capable de trouver un consensus distribué en utilisant <a href="https://bitcoin.org/bitcoin.pdf">une chaîne de bloc Nakamoto</a>, un outil popularisé par le <a href="https://fr.wikipedia.org/wiki/Bitcoin">Bitcoin</a>. De cette manière, l\'algorithme évite la nécessité d\'utiliser un serveur central pour résoudre les conflits d\'édition de l\'Operational Transformation, et sans ce besoin de résolution des conflits le serveur peut rester ignorant du contenu qui est édité dans le pad.';
@ -290,10 +291,10 @@ define(function () {
out.table_created = 'Créé le';
out.table_last = 'Dernier accès';
out.button_newpad = 'NOUVEAU DOCUMENT TEXTE';
out.button_newcode = 'NOUVELLE PAGE DE CODE';
out.button_newpoll = 'NOUVEAU SONDAGE';
out.button_newslide = 'NOUVELLE PRÉSENTATION';
out.button_newpad = 'Nouveau document texte';
out.button_newcode = 'Nouvelle page de code';
out.button_newpoll = 'Nouveay sondage';
out.button_newslide = 'Nouvelle présentation';
out.form_title = "Tous vos pads, partout où vous allez !";
out.form_username = "Nom d'utilisateur";

View File

@ -274,7 +274,9 @@ define(function () {
// index.html
//out.main_p1 = 'CryptPad is the <strong>zero knowledge</strong> realtime collaborative editor. Encryption carried out in your web browser protects the data from the server, the cloud, and the NSA. The secret encryption key is stored in the URL <a href="https://en.wikipedia.org/wiki/Fragment_identifier">fragment identifier</a> which is never sent to the server but is available to javascript so by sharing the URL, you give authorization to others who want to participate.';
out.main_p1 = "Type quick documents with friends and colleagues.<br>With <strong>Zero Knowledge</strong> technology, the server doesn't know what you're doing.";
//out.main_p1 = "Type quick documents with friends and colleagues.<br>With <strong>Zero Knowledge</strong> technology, the server doesn't know what you're doing.";
out.main_p1 = "<h2>Collaborate in Confidence</h2><br> Grow your ideas together with shared documents while <strong>Zero Knowledge</strong> technology secures your privacy; even from us.";
out.main_p2 = 'This project uses the <a href="http://ckeditor.com/">CKEditor</a> Visual Editor, <a href="https://codemirror.net/">CodeMirror</a>, and the <a href="https://github.com/xwiki-contrib/chainpad">ChainPad</a> realtime engine.';
out.main_howitworks = 'How It Works';
out.main_howitworks_p1 = 'CryptPad uses a variant of the <a href="https://en.wikipedia.org/wiki/Operational_transformation">Operational transformation</a> algorithm which is able to find distributed consensus using a <a href="https://bitcoin.org/bitcoin.pdf">Nakamoto Blockchain</a>, a construct popularized by <a href="https://en.wikipedia.org/wiki/Bitcoin">Bitcoin</a>. This way the algorithm can avoid the need for a central server to resolve Operational Transform Edit Conflicts and without the need for resolving conflicts, the server can be kept unaware of the content which is being edited on the pad.';
@ -288,10 +290,10 @@ define(function () {
out.table_created = 'Created';
out.table_last = 'Last Accessed';
out.button_newpad = 'NEW RICH TEXT PAD';
out.button_newcode = 'NEW CODE PAD';
out.button_newpoll = 'NEW POLL';
out.button_newslide = 'NEW PRESENTATION';
out.button_newpad = 'New Rich Text pad';
out.button_newcode = 'New Code pad';
out.button_newpoll = 'New Poll';
out.button_newslide = 'New Presentation';
out.form_title = "All your pads, everywhere!";
out.form_username = "Username";