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; + } +}