Browse Source

Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging

master
ansuz 3 years ago
parent
commit
c895d06193
12 changed files with 394 additions and 387 deletions
  1. BIN
      customize.dist/alt-favicon.png
  2. BIN
      customize.dist/images/ludovic.jpg
  3. 24
      customize.dist/pages.js
  4. 282
      customize.dist/src/less/alertify.less
  5. 4
      customize.dist/src/less/cryptpad.less
  6. 52
      customize.dist/src/less/variables.less
  7. 304
      customize.dist/src/less2/include/alertify.less
  8. 9
      customize.dist/src/less2/include/browser.less
  9. 10
      customize.dist/src/less2/include/colortheme.less
  10. 92
      customize.dist/src/less2/pages/page-index.less
  11. 2
      customize.dist/src/less2/pages/page-login.less
  12. 2
      customize.dist/src/less2/pages/page-register.less

BIN
customize.dist/alt-favicon.png

Before After
Width: 512  |  Height: 512  |  Size: 8.2 KiB Width: 512  |  Height: 512  |  Size: 26 KiB

BIN
customize.dist/images/ludovic.jpg

Before After
Width: 4000  |  Height: 4000  |  Size: 1.0 MiB

24
customize.dist/pages.js

@ -77,25 +77,19 @@ define([
};
var infopageTopbar = function () {
return h('div.cp-topbar',
h('div',
h('a.navbar-brand', { href: 'index.html'}, [
h( 'img', { src: '/customize/CryptPad-white-logo.svg' })
])
),
h('div.navbar.navbar-toggleable-md.navbar-light.navbar-inverse',
h('button.navbar-toggler.navbar-toggler-right', {'type':'button'}, {'data-toggle':'collapse'}, {'data-target':'#menuCollapse'}, {'aria-controls': 'menuCollapse'}, {'aria-expanded':'false'}, {'aria-label':'Toggle navigation'},
return h('nav.navbar.navbar-toggleable-md',
h('button.navbar-toggler.navbar-toggler-right', {'type':'button'}, {'data-toggle':'collapse'}, {'data-target':'#menuCollapse'}, {'aria-controls': 'menuCollapse'}, {'aria-expanded':'false'}, {'aria-label':'Toggle navigation'},
[h('i.fa.fa-bars ')
]),
h('div.collapse.navbar-collapse.justify-content-end.flex-column#menuCollapse', [
h('a.navbar-brand', { href: '/'}),
h('div.collapse.navbar-collapse.justify-content-end#menuCollapse', [
h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.topbar_whatIsCryptpad),
h('a.nav-item.nav-link', { href: 'https://blog.cryptpad.fr/'}, Msg.blog),
h('a.nav-item.nav-link', { href: '/contact.html'}, Msg.contact),
h('a.nav-item.nav-link', { href: '/about.html'}, Msg.about),
h('a.cp-login-btn', { href: '/login'}, Msg.login_login),
h('a.cp-register-btn', { href: '/register'}, Msg.login_register)
h('a.nav-item.nav-link.cp-login-btn', { href: '/login'}, Msg.login_login),
h('a.nav-item.nav-link.cp-register-btn', { href: '/register'}, Msg.login_register)
])
)
);
};
@ -138,9 +132,9 @@ define([
setHTML(h('div#bio'), '')
]),
h('div.col-md-4', [
h('img.bio-avatar', {'src': '/customize/images/avatar.png'}),
h('img.bio-avatar', {'src': '/customize/images/ludovic.jpg'}),
h('h3', "Ludovic Dubost"),
setHTML(h('div#bio'), '')
setHTML(h('div#bio'), '<p>A graduate of PolyTech (X90) and Telecom School in Paris, Ludovic Dubost started his career as a software architect for Netscape Communications Europe. He then became CTO of NetValue, one of the first French start-ups that went public. He left NetValue after the company was purchased by Nielsen/NetRatings and in 2004 launched XWiki, the next generation wiki.</p><p>Since the very beginning, Ludovic has been immensely helpful to the CryptPad project. He believed in the idea when there was nothing more than the collaborative pad and his help with sales strategy for the project.</p>')
])
]),
]),
@ -280,9 +274,11 @@ define([
if (showingMore) {
$('.cp-more, .cp-callout-more-lessmsg').addClass('cp-hidden');
$('.cp-callout-more-moremsg').removeClass('cp-hidden');
if ( $( window ).width() >991 ) $('.navbar').css('margin-top','-1em');
} else {
$('.cp-more, .cp-callout-more-lessmsg').removeClass('cp-hidden');
$('.cp-callout-more-moremsg').addClass('cp-hidden');
$('.navbar').css('margin-top','0');
}
showingMore = !showingMore;
}

282
customize.dist/src/less/alertify.less

@ -1,282 +0,0 @@
@import "./variables.less";
/* Logs are shown to inform the user that something has happened
They are only displayed briefly
*/
.alertify-logs {
@media print {
visibility: hidden;
}
> * {
padding: @padding-base @padding-base * 4;
color: @alertify-fore;
font-weight: bold;
font-size: large;
box-shadow: @box-shadow;
border-radius: @border-radius;
&, &.default {
// FIXME
background: rgba(0, 0, 0, .8);
}
&.error {
background: @danger-color;
}
&.success {
background: @success-color;
color: @success-fore;
}
}
}
.alertify {
position: fixed;
background-color: @alertify-bg;
color: @alertify-fg;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 99999;
&.hide {
opacity: 0;
pointer-events: none;
}
&, &.show {
box-sizing: border-box;
transition: all .33s cubic-bezier(.25, .8, .25, 1);
}
&, * {
box-sizing: border-box;
}
.dialog {
padding: 12px;
}
.dialog, .alert {
.bright {
color: @light-base;
}
& > div {
background-color: @alertify-dialog-bg;
border-radius: 5px;
&.half {
width: 50%;
@media (max-width: @media-medium-screen) {
width: 100%;
}
}
}
width: 100%;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
> * {
width: 30%;
width: 500px;
max-width: 95%;
margin: 0 auto;
text-align: center;
padding: @padding-base;
background: #fff;
// FIXME
box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);
}
.msg {
padding: @padding-base;
margin-bottom: @padding-base;
margin: 0;
text-align: left;
}
input:not(.form-control){
background-color: @alertify-input-bg;
color: @alertify-input-fg;
border: 0px;
border-radius: 5px;
margin-bottom: 15px;
width: 100%;
font-size: 100%;
padding: @padding-base;
&:focus {
//outline-offset: -2px;
}
}
nav {
text-align: right;
button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
background-color: @alertify-btn-bg;
box-sizing: border-box;
position: relative;
outline: 0;
border: 0;
display: inline-block;
align-items: center;
padding: 0 6px;
margin: 6px 8px;
line-height: 36px;
min-height: 36px;
white-space: nowrap;
min-width: 88px;
text-align: center;
text-transform: uppercase;
font-size: 14px;
text-decoration: none;
cursor: pointer;
color: @alertify-btn-fg;
border: 1px solid @alertify-base;
border-radius: 5px;
&.safe, &.danger {
color: @old-base;
white-space: normal;
font-weight: bold;
}
&.danger {
background-color: @cp-red;
&:hover, &:active {
background-color: lighten(@cp-red, 5%);
}
}
&.safe {
background-color: @cp-green;
&:hover, &:active {
background-color: lighten(@cp-green, 10%);
}
}
&:hover, &:active {
background-color: @alertify-btn-bg-hover;
}
&:focus {
border: 1px dotted @alertify-base;
}
&::-moz-focus-inner {
border:0;
}
}
button.btn {
margin: 6px 4px;
}
}
}
}
.alertify-logs {
position: fixed;
z-index: 99999;
&.bottom, &:not(.top) {
bottom: 16px;
// Bottom left placement. Default. Use for transitions.
&.left, &:not(.right) {
> * {
}
}
// Top right placement
&.right {
> * {
}
}
}
// All left positions.
&.left, &:not(.right) {
left: 16px;
> * {
float: left;
transform: translate3d(0, 0, 0);
height: auto;
&.show {
left: 0;
}
&, &.hide {
left: -110%;
}
}
}
&.right {
right: 16px;
> * {
float: right;
transform: translate3d(0, 0, 0);
&.show {
right: 0;
opacity: 1;
}
&, &.hide {
right: -110%;
opacity: 0;
}
}
}
&.top {
top: 0;
// Top left placement, use for transitions.
&.left, &:not(.right) {
> * {
}
}
// Top right placement, use for transitions
&.right {
> * {
}
}
}
> * {
box-sizing: border-box;
transition: all .4s cubic-bezier(.25, .8, .25, 1);
position: relative;
clear: both;
backface-visibility: hidden;
perspective: 1000;
& {
max-height: 0;
margin: 0;
padding: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
&.show {
margin-top: @padding-base;
opacity: 1;
max-height: 1000px;
padding: @padding-base;
pointer-events: auto;
}
}
}

4
customize.dist/src/less/cryptpad.less

@ -1,7 +1,7 @@
@import "./variables.less";
@import "./mixins.less";
@import "./alertify.less";
@import "../less2/include/alertify.less";
@import "./bar.less";
@import "./loading.less";
@import "./dropdown.less";
@ -10,6 +10,8 @@
@toolbar-green: #5cb85c;
.alertify_main();
html.cp, .cp body {
font-size: .875em;
background-color: @page-white; //@base;

52
customize.dist/src/less/variables.less

@ -1,21 +1,21 @@
@import (once) '../less2/include/colortheme.less';
@import (once) '../less2/include/browser.less';
@base: #fff; //#f5f5f5;
@base: @colortheme_base;
@dark-base: darken(@base, 20%);
@less-dark-base: darken(@base, 10%);
@light-base: lighten(@base, 20%);
@light-base: @colortheme_light-base;
@less-light-base: lighten(@base, 10%);
@fore: #555;
@old-base: #302B28;
@old-fore: #fafafa;
@old-base: @colortheme_old-base;
@old-fore: @colortheme_old-fore;
@main-font-size: 16px;
@cp-green: #46E981;
@cp-green: @colortheme_cp-green;
@cp-accent: lighten(@cp-green, 20%);
//@cp-red: #FF0073; // remove red
@cp-red: #FA5858; // remove red
@cp-red: @colortheme_cp-red;
@cp-outline: #444;
@cp-orange: #FE9A2E;
@ -33,46 +33,18 @@
@cp-link-visited: @cp-light-blue;
@cp-link-hover: darken(@cp-light-blue, 10%);
// alertify things
@box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
@padding-base: 12px;
@success-color: @cp-green;
@success-fore: @base;
@danger-color: @cp-red;
@text-color: rgba(0, 0, 0, .8);
@border-radius: 1px;
@alertify-fore: @old-fore;
@alertify-base: @old-base;
@alertify-dialog-bg: #444;
@alertify-dialog-fg: @old-fore;
@alertify-btn-fg: @old-fore;
@alertify-btn-bg: rgba(200, 200, 200, 0.05);
@alertify-btn-bg-hover: rgba(200, 200, 200, .15);
@alertify-bg: rgba(0, 0, 0, .3);
@alertify-fg: @old-fore;
@alertify-input-bg: @old-base;
@alertify-input-fg: @old-fore;
@slide-default-bg: #000;
@bg-loading: #222;
@color-loading: @old-fore;
@media-not-big: 800px;
@media-not-small: 801px;
@media-not-big: @browser_media-not-big;
@media-not-small: @browser_media-not-small;
@media-short-screen: 450px;
@media-narrow-screen: 400px;
@media-medium-screen: 600px;
@media-short-screen: @browser_media-short-screen;
@media-narrow-screen: @browser_media-narrow-screen;
@media-medium-screen: @browser_media-medium-screen;
// Dropdown

304
customize.dist/src/less2/include/alertify.less

@ -0,0 +1,304 @@
@import (once) "./colortheme.less";
@import (once) "./browser.less";
.alertify_main () {
@alertify-fore: @colortheme_old-fore;
@alertify-base: @colortheme_old-base;
@alertify-dialog-bg: #444;
@alertify-dialog-fg: @colortheme_old-fore;
@alertify-btn-fg: @colortheme_old-fore;
@alertify-btn-bg: rgba(200, 200, 200, 0.05);
@alertify-btn-bg-hover: rgba(200, 200, 200, .15);
@alertify-bg: rgba(0, 0, 0, .3);
@alertify-fg: @colortheme_old-fore;
@alertify-input-bg: @colortheme_old-base;
@alertify-input-fg: @colortheme_old-fore;
@alertify_padding-base: 12px;
@alertify_box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
@alertify_border-radius: 1px;
// Logs to show that something has happened
// These show only once
.alertify-logs {
@media print {
visibility: hidden;
}
> * {
padding: @alertify_padding-base @alertify_padding-base * 4;
color: @alertify-fore;
font-weight: bold;
font-size: large;
box-shadow: @alertify_box-shadow;
border-radius: @alertify_border-radius;
&, &.default {
// FIXME
background: rgba(0, 0, 0, .8);
}
&.error {
background: @colortheme_cp-red;
}
&.success {
background: @colortheme_cp-green;
}
}
}
.alertify {
position: fixed;
background-color: @alertify-bg;
color: @alertify-fg;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 99999;
&.hide {
opacity: 0;
pointer-events: none;
}
&, &.show {
box-sizing: border-box;
transition: all .33s cubic-bezier(.25, .8, .25, 1);
}
&, * {
box-sizing: border-box;
}
.dialog {
padding: 12px;
}
.dialog, .alert {
.bright {
color: @colortheme_light-base;
}
& > div {
background-color: @alertify-dialog-bg;
border-radius: 5px;
&.half {
width: 50%;
@media (max-width: @browser_media-medium-screen) {
width: 100%;
}
}
}
width: 100%;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
> * {
width: 30%;
width: 500px;
max-width: 95%;
margin: 0 auto;
text-align: center;
padding: @alertify_padding-base;
background: #fff;
// FIXME
box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);
}
.msg {
padding: @alertify_padding-base;
margin-bottom: @alertify_padding-base;
margin: 0;
text-align: left;
}
input:not(.form-control){
background-color: @alertify-input-bg;
color: @alertify-input-fg;
border: 0px;
border-radius: 5px;
margin-bottom: 15px;
width: 100%;
font-size: 100%;
padding: @alertify_padding-base;
&:focus {
//outline-offset: -2px;
}
}
nav {
text-align: right;
button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
background-color: @alertify-btn-bg;
box-sizing: border-box;
position: relative;
outline: 0;
border: 0;
display: inline-block;
align-items: center;
padding: 0 6px;
margin: 6px 8px;
line-height: 36px;
min-height: 36px;
white-space: nowrap;
min-width: 88px;
text-align: center;
text-transform: uppercase;
font-size: 14px;
text-decoration: none;
cursor: pointer;
color: @alertify-btn-fg;
border: 1px solid @alertify-base;
border-radius: 5px;
&.safe, &.danger {
color: @colortheme_old-base;
white-space: normal;
font-weight: bold;
}
&.danger {
background-color: @colortheme_cp-red;
&:hover, &:active {
background-color: lighten(@colortheme_cp-red, 5%);
}
}
&.safe {
background-color: @colortheme_cp-green;
&:hover, &:active {
background-color: lighten(@colortheme_cp-green, 10%);
}
}
&:hover, &:active {
background-color: @alertify-btn-bg-hover;
}
&:focus {
border: 1px dotted @alertify-base;
}
&::-moz-focus-inner {
border:0;
}
}
button.btn {
margin: 6px 4px;
}
}
}
}
.alertify-logs {
position: fixed;
z-index: 99999;
&.bottom, &:not(.top) {
bottom: 16px;
// Bottom left placement. Default. Use for transitions.
&.left, &:not(.right) {
> * {
}
}
// Top right placement
&.right {
> * {
}
}
}
// All left positions.
&.left, &:not(.right) {
left: 16px;
> * {
float: left;
transform: translate3d(0, 0, 0);
height: auto;
&.show {
left: 0;
}
&, &.hide {
left: -110%;
}
}
}
&.right {
right: 16px;
> * {
float: right;
transform: translate3d(0, 0, 0);
&.show {
right: 0;
opacity: 1;
}
&, &.hide {
right: -110%;
opacity: 0;
}
}
}
&.top {
top: 0;
// Top left placement, use for transitions.
&.left, &:not(.right) {
> * {
}
}
// Top right placement, use for transitions
&.right {
> * {
}
}
}
> * {
box-sizing: border-box;
transition: all .4s cubic-bezier(.25, .8, .25, 1);
position: relative;
clear: both;
backface-visibility: hidden;
perspective: 1000;
& {
max-height: 0;
margin: 0;
padding: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
&.show {
margin-top: @alertify_padding-base;
opacity: 1;
max-height: 1000px;
padding: @alertify_padding-base;
pointer-events: auto;
}
}
}
}

9
customize.dist/src/less2/include/browser.less

@ -0,0 +1,9 @@
// These things are not for design but rather for working in different browser
// types and window sizes
@browser_media-not-big: 800px;
@browser_media-not-small: 801px;
@browser_media-short-screen: 450px;
@browser_media-narrow-screen: 400px;
@browser_media-medium-screen: 600px;

10
customize.dist/src/less2/include/colortheme.less

@ -2,6 +2,14 @@
@colortheme_link-color-visited: #005999;
@colortheme_info-background: #fafafa;
@colortheme_old-base: #302B28;
@colortheme_old-fore: #fafafa;
@colortheme_base: #fff;
@colortheme_light-base: lighten(@colortheme_base, 20%);
@colortheme_cp-red: #FA5858; // remove red
@colortheme_cp-green: #46E981;
@colortheme_pad-bg: #1c4fa0;
@colortheme_pad-color: #fff;
@ -34,4 +42,4 @@
@colortheme_settings-color: #fff;
@colortheme_profile-bg: #0087ff;
@colortheme_profile-color: #fff;
@colortheme_profile-color: #fff;

92
customize.dist/src/less2/pages/page-index.less

@ -62,43 +62,39 @@
//font-style: italic;
}
}
.cp-topbar {
//position: absolute;
background: transparent;
a {
color: #fff;
padding: 0.5em 0.5em 0.5em 0.5em;
.navbar {
width: 100%;
margin-top: -1em;
@media only screen and (max-device-width: 991px) {
margin-top: 0;
}
button:focus {
outline: none;
.navbar-brand {
background: url(/customize/CryptPad-white-logo.svg) no-repeat;
width: 250px;
height: 50px;
}
.collapse {
a {
display: block;
}
a {
color: #fff;
border: 2px solid transparent;
&:visited {
color: rgba(255,255,255,.8);
};
}
.navbar-toggler-left {
top: -0.59rem;
.nav-link {
padding: 0.5em 0.7em;
&:hover {
transform: scale(1.05);
};
}
.cp-left {
.fa-bars {
font-size: 1.6rem;
}
.cp-register-btn {
border: 2px solid #fff;
}
a.cp-logo {
display: none;
}
img {
height: 5vh;
margin-top: -4px;
button:focus {
outline: none;
}
&:hover {
img {
transform: none;
}
};
a.cp-logo {
display: none;
.navbar-toggler {
margin-top: 10px;
color: #fff;
}
}
@callout-padding: 15px;
@ -119,9 +115,9 @@ a:hover {
color: black;
&:hover { text-decoration-line: none; }
}
div {
div h4 {
@media only screen and (min-device-width: 576px) and (max-device-width: 767px) {
left: 4.5em !important;
font-size: 1.3em;
}
}
}
@ -192,11 +188,6 @@ h4 {
}
}
}
.navbar-inverse .navbar-toggler {
border-color: transparent;
margin-top: -12px;
padding: 0;
}
@media (min-width: 576px) and (max-width: 767px) {
.container {
padding-left: 0;
@ -208,22 +199,25 @@ h4 {
}
@media (max-width: 991px) {
#menuCollapse {
/*position: absolute;
left: -131px;*/
margin-top: 0.5em;
text-align: right;
}
#menuCollapse a {
width: 100%;
text-align: right;
}
.navbar-nav a {
text-align: right !important;
}
.cp-right .cp-login-btn {
padding: 0.5em;
.cp-register-btn {
margin-right: 13px;
margin-left: 83vw;
text-align: center;
}
}
@media (max-width: 687px) {
.cp-register-btn {
margin-left: 75vw;
}
}
.collapsing a {
text-align: right !important;
@media (max-width: 467px) {
.cp-register-btn {
margin-left: 63vw;
}
}

2
customize.dist/src/less2/pages/page-login.less

@ -1,8 +1,10 @@
@import (once) "../include/infopages.less";
@import (once) "../include/colortheme.less";
@import (once) "../include/alertify.less";
.infopages_main();
.infopages_topbar();
.alertify_main();
.form-group {
.extra {

2
customize.dist/src/less2/pages/page-register.less

@ -1,8 +1,10 @@
@import (once) "../include/infopages.less";
@import (once) "../include/colortheme.less";
@import (once) "../include/alertify.less";
.infopages_main();
.infopages_topbar();
.alertify_main();
.cp-container {
.form-group {

Loading…
Cancel
Save