diff --git a/customize.dist/CryptPad-white-logo.svg b/customize.dist/CryptPad-white-logo.svg
index 120bd9014..26131b502 100644
--- a/customize.dist/CryptPad-white-logo.svg
+++ b/customize.dist/CryptPad-white-logo.svg
@@ -1 +1 @@
-CryptPad white logo
\ No newline at end of file
+
\ No newline at end of file
diff --git a/customize.dist/CryptPad_logo_color.svg b/customize.dist/CryptPad_logo_color.svg
new file mode 100644
index 000000000..64fc86682
--- /dev/null
+++ b/customize.dist/CryptPad_logo_color.svg
@@ -0,0 +1 @@
+CryptPad_logo_color
\ No newline at end of file
diff --git a/customize.dist/bg14.jpg b/customize.dist/bg14.jpg
index 6bf5956a1..7f5211229 100644
Binary files a/customize.dist/bg14.jpg and b/customize.dist/bg14.jpg differ
diff --git a/customize.dist/images/Catalin.jpg b/customize.dist/images/Catalin.jpg
new file mode 100644
index 000000000..3a7cb2f13
Binary files /dev/null and b/customize.dist/images/Catalin.jpg differ
diff --git a/customize.dist/images/Pierre-new.jpg b/customize.dist/images/Pierre-new.jpg
new file mode 100644
index 000000000..b4fef2583
Binary files /dev/null and b/customize.dist/images/Pierre-new.jpg differ
diff --git a/customize.dist/pages.js b/customize.dist/pages.js
index 7c1548119..150aaf78b 100644
--- a/customize.dist/pages.js
+++ b/customize.dist/pages.js
@@ -16,7 +16,7 @@ define([
var footerCol = function (title, L, literal) {
return h('div.col', [
h('ul.list-unstyled', [
- h('li.title', {
+ h('li.footer-title', {
'data-localization': title,
}, title? Msg[title]: literal )
].concat(L.map(function (l) {
@@ -77,6 +77,21 @@ define([
};
var infopageTopbar = function () {
+ var rightLinks;
+ var username = window.localStorage.getItem('User_name');
+ if (username === null) {
+ rightLinks = [
+ 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)
+ ];
+ } else {
+ rightLinks = h('a.nav-item.nav-link.cp-user-btn', { href: '/drive' }, [
+ h('i.fa.fa-user-circle'),
+ " ",
+ username
+ ]);
+ }
+
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 ')
@@ -87,9 +102,7 @@ define([
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.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)
- ])
+ ].concat(rightLinks))
);
};
@@ -122,14 +135,14 @@ define([
h('h2', 'Key Contributors'),
h('div.row', [
h('div.col-md-4', [
- h('img.bio-avatar', {'src': '/customize/images/pierre.jpg'}),
+ h('img.bio-avatar', {'src': '/customize/images/Pierre-new.jpg'}),
h('h3', "Pierre Bondoerffer"),
setHTML(h('div#bio'), '
Resident CSS wizard and emoji extraordinaire, Pierre is passionate about anything related to technology. He loves to hack around computers and put parts together.
He is currently studying at 42, where he learns about algorithms, networking, kernel programming and graphics.
As a part of an internship, he joined XWiki SAS and worked on CryptPad to improve user experience. He also maintains the Spanish translation.
')
]),
h('div.col-md-4', [
- h('img.bio-avatar', {'src': '/customize/images/avatar.png'}),
+ h('img.bio-avatar', {'src': '/customize/images/Catalin.jpg'}),
h('h3', "Catalin Scripcariu"),
- setHTML(h('div#bio'), '')
+ setHTML(h('div#bio'), ' Catalin is a Maths majour and has worked in B2B sales for 12 years. Design was always his passion and 3 years ago he started to dedicate himself to web design and front-end.
At the beginning of 2017 he joined the Xwiki family, where he worked both on the business and the community side of XWiki, including the research team and CryptPad.
')
]),
h('div.col-md-4', [
h('img.bio-avatar', {'src': '/customize/images/ludovic.jpg'}),
@@ -285,7 +298,7 @@ define([
])
])
]),
- ])
+ ]),
];
};
diff --git a/customize.dist/src/less/bar.less b/customize.dist/src/less/bar.less
index b280e53d6..91744728b 100644
--- a/customize.dist/src/less/bar.less
+++ b/customize.dist/src/less/bar.less
@@ -1,4 +1,5 @@
/* Bottom Bar */
+@import (once) "../less2/include/colortheme.less";
.top-bar, .bottom-bar {
position:fixed;
@@ -16,7 +17,7 @@
}
p {
margin: -1px;
- font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
+ font-family: @colortheme_font;
font-size: 20px;
display:block;
diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less
index bed6c6eea..e607ef7ff 100644
--- a/customize.dist/src/less/cryptpad.less
+++ b/customize.dist/src/less/cryptpad.less
@@ -2,6 +2,7 @@
@import "./mixins.less";
@import "../less2/include/alertify.less";
+@import "../less2/include/colortheme.less";
@import "./bar.less";
@import "./loading.less";
@import "./dropdown.less";
@@ -27,7 +28,7 @@ html.cp, .cp body {
// add font for tooltips
.tippy-popper {
- font: normal normal normal 16px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
+ font: 16px @colortheme_font;
}
// override bootstrap colors
@@ -69,7 +70,7 @@ a.github-corner > svg {
h1,h2,h3,h4,h5,h6 {
color: @fore;
- font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
+ font-family: @colortheme_font;
-webkit-font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
-moz-font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
@@ -427,7 +428,7 @@ noscript {
max-width: 40%;
padding: 10px;
box-sizing: border-box;
- font-family: lato, Helvetica, sans-serif;
+ font-family: @colortheme_font;
color: @main-color;
label {
@@ -641,7 +642,7 @@ noscript {
box-sizing: border-box;
z-index:10000;
display: none;
- font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+ font-family: @colortheme_font;
#uploadStatus {
width: 80vw;
border: 1px solid black;
diff --git a/customize.dist/src/less/dropdown.less b/customize.dist/src/less/dropdown.less
index 28daed328..7f0b5e7b2 100644
--- a/customize.dist/src/less/dropdown.less
+++ b/customize.dist/src/less/dropdown.less
@@ -1,3 +1,4 @@
+@import (once) "../less2/include/colortheme.less";
/* The container - needed to position the dropdown content */
.dropdown-bar {
@@ -36,7 +37,7 @@
z-index: 1000;
max-height: 300px;
overflow-y: auto;
- font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+ font-family: @colortheme_font;
font-size: 16px;
line-height: 1em;
diff --git a/customize.dist/src/less/footer.less b/customize.dist/src/less/footer.less
index 8862bf951..fdfc69d7a 100644
--- a/customize.dist/src/less/footer.less
+++ b/customize.dist/src/less/footer.less
@@ -1,8 +1,9 @@
@import "./variables.less";
+@import (once) "../less2/include/colortheme.less";
.cp footer {
background: @category-bg;
- font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+ font-family: @colortheme_font;
padding-top: 1em;
font-size: 1.2em;
a {
diff --git a/customize.dist/src/less/loading.less b/customize.dist/src/less/loading.less
index cf93330cb..e7cb8060a 100644
--- a/customize.dist/src/less/loading.less
+++ b/customize.dist/src/less/loading.less
@@ -1,4 +1,5 @@
@import "./variables.less";
+@import (once) "../less2/include/colortheme.less";
.cp #loading {
position: fixed;
@@ -51,7 +52,7 @@
text-align: center;
font-size: 1.5em;
opacity: 0.7;
- font-family: lato, Helvetica, sans-serif;
+ font-family: @colortheme_font;
padding: 15px;
max-width: 60%;
display: inline-block;
diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less
index f6ac5b1ac..91afca6ae 100644
--- a/customize.dist/src/less/toolbar.less
+++ b/customize.dist/src/less/toolbar.less
@@ -2,6 +2,7 @@
@import "./mixins.less";
@import "./dropdown.less";
+@import (once) "../less2/include/colortheme.less";
.unselectable {
-webkit-touch-callout: none;
@@ -61,7 +62,7 @@
}
body .userlist-drawer {
- font: normal normal normal @main-font-size Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
+ font: @main-font-size @colortheme_font;
min-width: 175px;
width: 175px;
display: block;
@@ -100,7 +101,7 @@ body .userlist-drawer {
}
& > p {
- font: normal normal normal @main-font-size Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
+ font: @main-font-size @colortheme_font;
margin: 0;
padding: 0;
display: block;
diff --git a/customize.dist/src/less/topbar.less b/customize.dist/src/less/topbar.less
index 3e8812ddd..05472a605 100644
--- a/customize.dist/src/less/topbar.less
+++ b/customize.dist/src/less/topbar.less
@@ -1,4 +1,5 @@
@import "./variables.less";
+@import (once) "../less2/include/colortheme.less";
#cryptpadTopBar {
background: @topbar-back;
@@ -8,7 +9,7 @@
right: 0;
height: @topbar-height;
color: @topbar-color;
- font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-family: @colortheme_font;
padding: 5px;
box-sizing: border-box;
font-size: 30px;
diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less
index 87165c2b8..8469ec518 100644
--- a/customize.dist/src/less/variables.less
+++ b/customize.dist/src/less/variables.less
@@ -49,7 +49,7 @@
// Dropdown
-@dropdown-font: @main-font-size -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+@dropdown-font: @main-font-size @colortheme_font;
@dropdown-bg: #f9f9f9;
@dropdown-color: black;
@dropdown-bg-hover: #f1f1f1;
diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less
index cb3fd3621..d667aa1cf 100644
--- a/customize.dist/src/less2/include/alertify.less
+++ b/customize.dist/src/less2/include/alertify.less
@@ -5,15 +5,15 @@
@alertify-fore: @colortheme_old-fore;
@alertify-base: @colortheme_old-base;
- @alertify-dialog-bg: #444;
+ @alertify-dialog-bg: #222;
@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-btn-bg: rgba(200, 200, 200, 0.1);
+ @alertify-btn-bg-hover: rgba(200, 200, 200, .3);
- @alertify-bg: rgba(0, 0, 0, .3);
+ @alertify-bg: rgba(0, 0, 0, .4);
@alertify-fg: @colortheme_old-fore;
@alertify-input-bg: @colortheme_old-base;
@@ -21,7 +21,6 @@
@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
@@ -38,7 +37,6 @@
font-size: large;
box-shadow: @alertify_box-shadow;
- border-radius: @alertify_border-radius;
&, &.default {
// FIXME
background: rgba(0, 0, 0, .8);
@@ -64,6 +62,10 @@
height: 100%;
z-index: 99999;
+ h1, h2, h3 {
+ margin-top: 0;
+ }
+
&.hide {
opacity: 0;
pointer-events: none;
@@ -89,7 +91,6 @@
& > div {
background-color: @alertify-dialog-bg;
- border-radius: 5px;
&.half {
width: 50%;
@media (max-width: @browser_media-medium-screen) {
@@ -106,10 +107,10 @@
> * {
width: 30%;
- width: 500px;
+ min-width: 500px;
max-width: 95%;
margin: 0 auto;
- text-align: center;
+ text-align: left;
padding: @alertify_padding-base;
background: #fff;
// FIXME
@@ -120,14 +121,12 @@
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%;
@@ -161,10 +160,10 @@
font-size: 14px;
text-decoration: none;
cursor: pointer;
+ border-radius: 0;
color: @alertify-btn-fg;
- border: 1px solid @alertify-base;
- border-radius: 5px;
+ border: 1px solid transparent;
&.safe, &.danger {
color: @colortheme_old-base;
@@ -172,16 +171,16 @@
font-weight: bold;
}
&.danger {
- background-color: @colortheme_cp-red;
+ background-color: @colortheme_alertify-red;
&:hover, &:active {
- background-color: lighten(@colortheme_cp-red, 5%);
+ background-color: lighten(@colortheme_alertify-red, 5%);
}
}
&.safe {
- background-color: @colortheme_cp-green;
+ background-color: @colortheme_alertify-green;
&:hover, &:active {
- background-color: lighten(@colortheme_cp-green, 10%);
+ background-color: lighten(@colortheme_alertify-green, 10%);
}
}
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index 268a26922..822c7bf47 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -1,3 +1,5 @@
+@colortheme_font: 'Open Sans', 'Helvetica Neue', sans-serif;
+
@colortheme_link-color: #0275D8;
@colortheme_link-color-visited: #005999;
@colortheme_info-background: #fafafa;
@@ -11,6 +13,9 @@
@colortheme_cp-red: #FA5858; // remove red
@colortheme_cp-green: #46E981;
+@colortheme_alertify-red: #E55236;
+@colortheme_alertify-green: #77C825;
+
@colortheme_pad-bg: #1c4fa0;
@colortheme_pad-color: #fff;
@@ -43,3 +48,6 @@
@colortheme_profile-bg: #0087ff;
@colortheme_profile-color: #fff;
+
+@cryptpad_color_blue: #4591C4;
+@cryptpad_color_grey: #999999;
\ No newline at end of file
diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less
index 73b68b40a..390877b40 100644
--- a/customize.dist/src/less2/include/infopages.less
+++ b/customize.dist/src/less2/include/infopages.less
@@ -8,10 +8,8 @@
background-color: @colortheme_info-background;
a {
- color: @colortheme_link-color;
- &:visited { color: @colortheme_link-color-visited; }
- //opacity: 0.8;
- //transition: opacity 0.2s;
+ color: @cryptpad_color_blue;
+ &:visited { color: darken(@cryptpad_color_blue, 10%); }
}
a:hover {
opacity: 1;
@@ -21,8 +19,8 @@
padding: 0;
margin: 0;
- font-size: 16pxt:;
- font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
+ font-size: 16px;
+ font-family: @colortheme_font;
.cp-container {
font-size: 16px;
@@ -76,25 +74,26 @@
}
footer {
- background-color: white;
-
+ background-color: @cryptpad_color_grey;
.container {
.col {
margin-top: 1em;
}
-
- width: 100%;
- text-align: center;
- margin-bottom: 1em;
-
- ul.list-unstyled {
+ a {
+ color: #fff;
+ &:visited {
+ color: darken(#fff, 20%);
+ };
+ }
+ margin-bottom: 1em;
+ ul.list-unstyled {
margin: 0;
}
}
.cp-version-footer {
- background-color: @colortheme_info-background;
- color: black;
+ background-color: #6C6C6C;
+ color: #fff;
text-align: center;
padding: 0.5em;
}
@@ -151,10 +150,71 @@
}
.cp-logo {
- img {
- height: @infopages_infobar-height / 2;
- }
margin-right: 0.5em;
}
}
}
+
+// navigation top bar
+.navbar {
+ background: #fff;
+ .navbar-brand {
+ display: block;
+ background-image: url(/customize/CryptPad_logo_color.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+ height: 50px;
+ width: 250px;
+ }
+ a {
+ border: 2px solid transparent;
+ }
+ .nav-link {
+ padding: 0.5em 0.7em;
+ &:hover {
+ transform: scale(1.05);
+ };
+ }
+ .cp-register-btn {
+ border: 2px solid #4591C4;
+ }
+ button:focus {
+ outline: none;
+ }
+ .navbar-toggler {
+ margin-top: 10px;
+ color: #4591C4;
+ }
+}
+@media (max-width: 991px) {
+ #menuCollapse {
+ text-align: right;
+ }
+ .navbar-nav a {
+ text-align: right !important;
+ }
+ .cp-register-btn {
+ margin-right: 13px;
+ margin-left: 83vw;
+ text-align: center;
+ }
+}
+@media (max-width: 687px) {
+ .cp-register-btn {
+ margin-left: 75vw;
+ }
+}
+@media (max-width: 467px) {
+ .cp-register-btn {
+ margin-left: 63vw;
+ }
+}
+
+
+//footer general styles
+
+.footer-title {
+ font-weight: bold;
+ font-size: 1.2em;
+ color: #1E1F1F;
+}
diff --git a/customize.dist/src/less2/pages/page-about.less b/customize.dist/src/less2/pages/page-about.less
index 7e9cb81a4..66c72eec9 100644
--- a/customize.dist/src/less2/pages/page-about.less
+++ b/customize.dist/src/less2/pages/page-about.less
@@ -9,4 +9,4 @@
margin: 1em 0;
max-width: 300px;
max-height: 300px;
-}
+}
\ No newline at end of file
diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less
index 962a174f1..84ec8bab6 100644
--- a/customize.dist/src/less2/pages/page-index.less
+++ b/customize.dist/src/less2/pages/page-index.less
@@ -13,6 +13,7 @@
color: #FFF;
background: linear-gradient( @background_darker, @background_lighter ), url('/customize/bg14.jpg');
background-size: cover;
+ background-position: center;
min-height: 100vh;
display: flex;
flex-direction: column;
@@ -63,24 +64,21 @@
}
}
.navbar {
+ background: transparent;
width: 100%;
@media only screen and (max-device-width: 991px) {
margin-top: 0;
}
.navbar-brand {
- background: url(/customize/CryptPad-white-logo.svg) no-repeat;
- width: 250px;
- height: 50px;
+ background-image: url(/customize/CryptPad-white-logo.svg);
}
a {
color: #fff;
- border: 2px solid transparent;
&:visited {
color: rgba(255,255,255,.8);
};
}
.nav-link {
- padding: 0.5em 0.7em;
&:hover {
transform: scale(1.05);
};
@@ -88,9 +86,6 @@
.cp-register-btn {
border: 2px solid #fff;
}
- button:focus {
- outline: none;
- }
.navbar-toggler {
margin-top: 10px;
color: #fff;
@@ -196,27 +191,4 @@ h4 {
left: 5px;
}
}
-@media (max-width: 991px) {
- #menuCollapse {
- text-align: right;
- }
- .navbar-nav a {
- text-align: right !important;
- }
- .cp-register-btn {
- margin-right: 13px;
- margin-left: 83vw;
- text-align: center;
- }
-}
-@media (max-width: 687px) {
- .cp-register-btn {
- margin-left: 75vw;
- }
-}
-@media (max-width: 467px) {
- .cp-register-btn {
- margin-left: 63vw;
- }
-}
diff --git a/customize.dist/src/less2/pages/page-register.less b/customize.dist/src/less2/pages/page-register.less
index fc54a3073..06a5207c6 100644
--- a/customize.dist/src/less2/pages/page-register.less
+++ b/customize.dist/src/less2/pages/page-register.less
@@ -23,3 +23,10 @@
}
}
}
+
+.alertify {
+ // workaround for alertify making empty p
+ p:empty {
+ display: none;
+ }
+}