diff --git a/.jshintignore b/.jshintignore index 45011b5dc..aad5dea36 100644 --- a/.jshintignore +++ b/.jshintignore @@ -9,3 +9,5 @@ www/scratch www/common/toolbar.js www/common/hyperscript.js www/common/tippy.min.js + +www/pad/wysiwygarea-plugin.js diff --git a/bower.json b/bower.json index b04ff3a6b..0880e56ef 100644 --- a/bower.json +++ b/bower.json @@ -39,6 +39,7 @@ "require-css": "0.1.10", "less": "^2.7.2", "bootstrap": "#v4.0.0-alpha.6", - "diff-dom": "2.1.1" + "diff-dom": "2.1.1", + "open-sans-fontface": "^1.4.2" } } diff --git a/config.example.js b/config.example.js index 749fe4793..7af6cf8af 100644 --- a/config.example.js +++ b/config.example.js @@ -82,23 +82,6 @@ module.exports = { */ websocketPath: '/cryptpad_websocket', - /* it is assumed that your websocket will bind to the same port as http - * you can override this behaviour by supplying a number via websocketPort - */ - //websocketPort: 3000, - - /* if you want to run a different version of CryptPad but using the same websocket - * server, you should use the other server port as websocketPort and disable - * the websockets on that server - */ - //useExternalWebsocket: false, - - /* If CryptPad is proxied without using https, the server needs to know. - * Specify 'useSecureWebsockets: true' so that it can send - * Content Security Policy Headers that prevent http and https from mixing - */ - useSecureWebsockets: false, - /* CryptPad can log activity to stdout * This may be useful for debugging */ @@ -119,6 +102,7 @@ module.exports = { 'terms', 'about', 'contact', + 'what-is-cryptpad' ], /* Limits, Donations, Subscriptions and Contact @@ -237,14 +221,6 @@ module.exports = { */ suppressRPCErrors: false, - - /* WARNING: EXPERIMENTAL - * - * CryptPad features experimental support for encrypted file upload. - * Our encryption format is still liable to change. As such, we do not - * guarantee that files uploaded now will be supported in the future - */ - /* Setting this value to anything other than true will cause file upload * attempts to be rejected outright. */ diff --git a/customize.dist/CryptPad-white-logo.svg b/customize.dist/CryptPad-white-logo.svg new file mode 100644 index 000000000..26131b502 --- /dev/null +++ b/customize.dist/CryptPad-white-logo.svg @@ -0,0 +1 @@ + \ 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/alt-favicon.png b/customize.dist/alt-favicon.png index 169ce4ef2..52ec0a4bc 100644 Binary files a/customize.dist/alt-favicon.png and b/customize.dist/alt-favicon.png differ diff --git a/customize.dist/bg14.jpg b/customize.dist/bg14.jpg new file mode 100644 index 000000000..7f5211229 Binary files /dev/null and b/customize.dist/bg14.jpg differ diff --git a/customize.dist/bg3.jpg b/customize.dist/bg3.jpg deleted file mode 100644 index 04d3a04e0..000000000 Binary files a/customize.dist/bg3.jpg and /dev/null differ diff --git a/customize.dist/bkabout.jpg b/customize.dist/bkabout.jpg new file mode 100644 index 000000000..43de08268 Binary files /dev/null and b/customize.dist/bkabout.jpg differ diff --git a/customize.dist/bkregister.jpg b/customize.dist/bkregister.jpg new file mode 100644 index 000000000..03660433f Binary files /dev/null and b/customize.dist/bkregister.jpg differ diff --git a/customize.dist/code.svg b/customize.dist/code.svg new file mode 100644 index 000000000..29647b529 --- /dev/null +++ b/customize.dist/code.svg @@ -0,0 +1,14 @@ + + + + + + + + + + diff --git a/customize.dist/cryptpad-new-logo-colors-logoonly.png b/customize.dist/cryptpad-new-logo-colors-logoonly.png new file mode 100644 index 000000000..6ad292df0 Binary files /dev/null and b/customize.dist/cryptpad-new-logo-colors-logoonly.png differ diff --git a/customize.dist/fonts/neuropolitical.ttf b/customize.dist/fonts/neuropolitical.ttf new file mode 100644 index 000000000..26bbb63ce Binary files /dev/null and b/customize.dist/fonts/neuropolitical.ttf differ diff --git a/customize.dist/fonts/open-sans.less b/customize.dist/fonts/open-sans.less new file mode 100644 index 000000000..7a1bcbb90 --- /dev/null +++ b/customize.dist/fonts/open-sans.less @@ -0,0 +1,133 @@ +/* Open Sans @font-face kit */ + +@OpenSansPath: "/bower_components/open-sans-fontface/fonts"; + +/* BEGIN Light */ +@font-face { + font-family: 'Open Sans'; + src: url('@{OpenSansPath}/Light/OpenSans-Light.eot'); + src: url('@{OpenSansPath}/Light/OpenSans-Light.eot?#iefix') format('embedded-opentype'), + url('@{OpenSansPath}/Light/OpenSans-Light.woff') format('woff'), + url('@{OpenSansPath}/Light/OpenSans-Light.ttf') format('truetype'), + url('@{OpenSansPath}/Light/OpenSans-Light.svg#OpenSansLight') format('svg'); + font-weight: 300; + font-style: normal; +} +/* END Light */ + +/* BEGIN Light Italic */ +@font-face { + font-family: 'Open Sans'; + src: url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.eot'); + src: url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'), + url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.woff') format('woff'), + url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.ttf') format('truetype'), + url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.svg#OpenSansLightItalic') format('svg'); + font-weight: 300; + font-style: italic; +} +/* END Light Italic */ + +/* BEGIN Regular */ +@font-face { + font-family: 'Open Sans'; + src: url('@{OpenSansPath}/Regular/OpenSans-Regular.eot'); + src: url('@{OpenSansPath}/Regular/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), + url('@{OpenSansPath}/Regular/OpenSans-Regular.woff') format('woff'), + url('@{OpenSansPath}/Regular/OpenSans-Regular.ttf') format('truetype'), + url('@{OpenSansPath}/Regular/OpenSans-Regular.svg#OpenSansRegular') format('svg'); + font-weight: normal; + font-style: normal; +} +/* END Regular */ + +/* BEGIN Italic */ +@font-face { + font-family: 'Open Sans'; + src: url('@{OpenSansPath}/Italic/OpenSans-Italic.eot'); + src: url('@{OpenSansPath}/Italic/OpenSans-Italic.eot?#iefix') format('embedded-opentype'), + url('@{OpenSansPath}/Italic/OpenSans-Italic.woff') format('woff'), + url('@{OpenSansPath}/Italic/OpenSans-Italic.ttf') format('truetype'), + url('@{OpenSansPath}/Italic/OpenSans-Italic.svg#OpenSansItalic') format('svg'); + font-weight: normal; + font-style: italic; +} +/* END Italic */ + +/* BEGIN Semibold */ +@font-face { + font-family: 'Open Sans'; + src: url('@{OpenSansPath}/Semibold/OpenSans-Semibold.eot'); + src: url('@{OpenSansPath}/Semibold/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'), + url('@{OpenSansPath}/Semibold/OpenSans-Semibold.woff') format('woff'), + url('@{OpenSansPath}/Semibold/OpenSans-Semibold.ttf') format('truetype'), + url('@{OpenSansPath}/Semibold/OpenSans-Semibold.svg#OpenSansSemibold') format('svg'); + font-weight: 600; + font-style: normal; +} +/* END Semibold */ + +/* BEGIN Semibold Italic */ +@font-face { + font-family: 'Open Sans'; + src: url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.eot'); + src: url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.eot?#iefix') format('embedded-opentype'), + url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.woff') format('woff'), + url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.ttf') format('truetype'), + url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.svg#OpenSansSemiboldItalic') format('svg'); + font-weight: 600; + font-style: italic; +} +/* END Semibold Italic */ + +/* BEGIN Bold */ +@font-face { + font-family: 'Open Sans'; + src: url('@{OpenSansPath}/Bold/OpenSans-Bold.eot'); + src: url('@{OpenSansPath}/Bold/OpenSans-Bold.eot?#iefix') format('embedded-opentype'), + url('@{OpenSansPath}/Bold/OpenSans-Bold.woff') format('woff'), + url('@{OpenSansPath}/Bold/OpenSans-Bold.ttf') format('truetype'), + url('@{OpenSansPath}/Bold/OpenSans-Bold.svg#OpenSansBold') format('svg'); + font-weight: bold; + font-style: normal; +} +/* END Bold */ + +/* BEGIN Bold Italic */ +@font-face { + font-family: 'Open Sans'; + src: url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.eot'); + src: url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'), + url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.woff') format('woff'), + url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.ttf') format('truetype'), + url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.svg#OpenSansBoldItalic') format('svg'); + font-weight: bold; + font-style: italic; +} +/* END Bold Italic */ + +/* BEGIN Extrabold */ +@font-face { + font-family: 'Open Sans'; + src: url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.eot'); + src: url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'), + url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.woff') format('woff'), + url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.ttf') format('truetype'), + url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.svg#OpenSansExtrabold') format('svg'); + font-weight: 800; + font-style: normal; +} +/* END Extrabold */ + +/* BEGIN Extrabold Italic */ +@font-face { + font-family: 'Open Sans'; + src: url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot'); + src: url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'), + url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff') format('woff'), + url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.ttf') format('truetype'), + url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.svg#OpenSansExtraboldItalic') format('svg'); + font-weight: 800; + font-style: italic; +} +/* END Extrabold Italic */ diff --git a/customize.dist/images/AaronMacSween.jpg b/customize.dist/images/AaronMacSween.jpg new file mode 100644 index 000000000..2ee96ea6f Binary files /dev/null and b/customize.dist/images/AaronMacSween.jpg differ diff --git a/customize.dist/images/CalebJames.jpg b/customize.dist/images/CalebJames.jpg new file mode 100644 index 000000000..65d5a6cae Binary files /dev/null and b/customize.dist/images/CalebJames.jpg differ diff --git a/customize.dist/images/Catalin.jpg b/customize.dist/images/Catalin.jpg new file mode 100644 index 000000000..109a5404b Binary files /dev/null and b/customize.dist/images/Catalin.jpg differ diff --git a/customize.dist/images/LudovicDuboist.jpg b/customize.dist/images/LudovicDuboist.jpg new file mode 100644 index 000000000..6a9988942 Binary files /dev/null and b/customize.dist/images/LudovicDuboist.jpg differ diff --git a/customize.dist/images/Pierre-new.jpg b/customize.dist/images/Pierre-new.jpg new file mode 100644 index 000000000..4f197aeb0 Binary files /dev/null and b/customize.dist/images/Pierre-new.jpg differ diff --git a/customize.dist/images/YannFlory.jpg b/customize.dist/images/YannFlory.jpg new file mode 100644 index 000000000..19d10ec56 Binary files /dev/null and b/customize.dist/images/YannFlory.jpg differ diff --git a/customize.dist/images/aaron.jpg b/customize.dist/images/aaron.jpg new file mode 100644 index 000000000..f746cf7e4 Binary files /dev/null and b/customize.dist/images/aaron.jpg differ diff --git a/customize.dist/images/atest.jpg b/customize.dist/images/atest.jpg new file mode 100644 index 000000000..4ce7014fe Binary files /dev/null and b/customize.dist/images/atest.jpg differ diff --git a/customize.dist/images/caleb.jpg b/customize.dist/images/caleb.jpg new file mode 100644 index 000000000..1903d87b9 Binary files /dev/null and b/customize.dist/images/caleb.jpg differ diff --git a/customize.dist/images/drive_screenshot.png b/customize.dist/images/drive_screenshot.png new file mode 100644 index 000000000..b1170561c Binary files /dev/null and b/customize.dist/images/drive_screenshot.png differ diff --git a/customize.dist/images/logo_white.png b/customize.dist/images/logo_white.png new file mode 100644 index 000000000..81928ffb1 Binary files /dev/null and b/customize.dist/images/logo_white.png differ diff --git a/customize.dist/images/logo_white.svg b/customize.dist/images/logo_white.svg new file mode 100644 index 000000000..d1cd2bc73 --- /dev/null +++ b/customize.dist/images/logo_white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/customize.dist/images/ludovic.jpg b/customize.dist/images/ludovic.jpg new file mode 100644 index 000000000..684e0692e Binary files /dev/null and b/customize.dist/images/ludovic.jpg differ diff --git a/customize.dist/images/pad_screenshot.png b/customize.dist/images/pad_screenshot.png new file mode 100644 index 000000000..cbc837f58 Binary files /dev/null and b/customize.dist/images/pad_screenshot.png differ diff --git a/customize.dist/images/pierre.jpg b/customize.dist/images/pierre.jpg new file mode 100644 index 000000000..fea27c787 Binary files /dev/null and b/customize.dist/images/pierre.jpg differ diff --git a/customize.dist/images/yann.jpg b/customize.dist/images/yann.jpg new file mode 100644 index 000000000..6c5e144fd Binary files /dev/null and b/customize.dist/images/yann.jpg differ diff --git a/customize.dist/main-favicon.png b/customize.dist/main-favicon.png index 54169c07e..354d88ece 100644 Binary files a/customize.dist/main-favicon.png and b/customize.dist/main-favicon.png differ diff --git a/customize.dist/main.js b/customize.dist/main.js index 633f4c573..4049ec659 100644 --- a/customize.dist/main.js +++ b/customize.dist/main.js @@ -25,6 +25,14 @@ define([ $main.find('#data').removeClass('hidden'); if (Cryptpad.isLoggedIn()) { + if (window.location.pathname === '/') { + window.location = '/drive/'; + return; + } + + $main.find('a[href="/drive/"] div.pad-button-text h4') + .text(Messages.main_yourCryptDrive); + var name = localStorage[Cryptpad.userNameKey] || sessionStorage[Cryptpad.userNameKey]; var $loggedInBlock = $main.find('#loggedIn'); var $hello = $loggedInBlock.find('#loggedInHello'); diff --git a/customize.dist/pages.js b/customize.dist/pages.js index b7b94940c..9e2759786 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -2,7 +2,8 @@ define([ '/api/config', '/common/hyperscript.js', '/common/cryptpad-common.js', -], function (Config, h, Cryptpad) { + 'jquery' +], function (Config, h, Cryptpad, $) { var Pages = {}; var Msg = Cryptpad.Messages; var urlArgs = Config.requireConf.urlArgs; @@ -12,286 +13,408 @@ define([ return e; }; - var indexContent = function () { - return [ - h('div.page.category.first#knowmore', [ - h('center', [ - h('h1', Msg.main_howitworks) - ]) - ]), - h('div.page', [ - h('div.info-container', [ - h('div.left.image', [ - h('img', { - src: '/customize/images/zeroknowledge_small.png?' + urlArgs , - alt: 'Zero Knowledge' - }) - ]), - h('div.right', [ - h('h2', Msg.main_zeroKnowledge), - setHTML(h('p'), Msg.main_zeroKnowledge_p) - ]) - ]) - ]), - h('div.page.even', [ - h('div.info-container', [ - h('div.left', [ - h('h2', Msg.main_writeItDown), - h('p', Msg.main_writeItDown_p) + var footerCol = function (title, L, literal) { + return h('div.col-6.col-sm-3', [ + h('ul.list-unstyled', [ + h('li.footer-title', { + 'data-localization': title, + }, title? Msg[title]: literal ) + ].concat(L.map(function (l) { + return h('li', [ l ]); + })) + ) + ]); + }; + + var footLink = function (ref, loc, text) { + var attrs = { + href: ref, + }; + if (!/^\//.test(ref)) { + attrs.target = '_blank'; + attrs.rel = 'noopener noreferrer'; + } + if (loc) { + attrs['data-localization'] = loc; + text = Msg[loc]; + } + return h('a', attrs, text); + }; + + var infopageFooter = function () { + return h('footer', [ + h('div.container', [ + h('div.row', [ + footerCol(null, [ + h('div.cp-bio-foot', [ + h('p', Msg.main_footerText) + ]) + ], ''), + /* footerCol(null, [ + footLink('/about.html', 'about'), + footLink('/terms.html', 'terms'), + footLink('/privacy.html', 'privacy'), + ], 'CryptPad'),*/ + footerCol('footer_applications', [ + footLink('/drive/', 'main_drive'), + footLink('/pad/', 'main_richText'), + footLink('/code/', 'main_code'), + footLink('/slide/', 'main_slide'), + footLink('/poll/', 'main_poll'), + footLink('/whiteboard/', null, Msg.type.whiteboard) ]), - h('div.right.image', [ - h('img', { - alt: "User account", - src: '/customize/images/realtime_small.png?' + urlArgs, - }) - ]) - ]) - ]), - h('div.page', [ - h('div.info-container', [ - h('div.left.image', [ - h('img', { - src: '/customize/images/key_small.png?' + urlArgs, - alt: 'User account' - }) + footerCol('footer_aboutUs', [ + footLink('https://blog.cryptpad.fr', 'blog'), + footLink('https://labs.xwiki.com', null, 'XWiki Labs'), + footLink('http://www.xwiki.com', null, 'XWiki SAS'), + footLink('https://www.open-paas.org', null, 'OpenPaaS') ]), - h('div.right', [ - h('h2', Msg.main_share), - h('p', Msg.main_share_p) + footerCol('footer_contact', [ + footLink('https://riot.im/app/#/room/#cryptpad:matrix.org', null, 'Chat'), + footLink('https://twitter.com/cryptpad', null, 'Twitter'), + footLink('https://github.com/xwiki-labs/cryptpad', null, 'GitHub'), + footLink('/contact.html', null, 'Email') ]) ]) ]), - h('div.page.even', [ - h('div.info-container', [ - h('div.left', [ - h('h2', Msg.main_organize), - h('p', Msg.main_organize_p) + h('div.cp-version-footer', "CryptPad v1.13.0 (Naiad)") + ]); + }; + + 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 ') ]), - h('div.right.image', [ - h('img', { - src: '/customize/images/organize.png?' + urlArgs, - alt: 'User account' - }) - ]) - ]) - ]) - ]; + h('a.navbar-brand', { href: '/index.html'}), + 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), + ].concat(rightLinks)) + ); }; Pages['/about.html'] = function () { - return h('div#main_other', [ - h('center', [ - h('h1', Msg.about) + return h('div#cp-main', [ + infopageTopbar(), + h('div.container-fluid.cp-about-intro', [ + h('div.container', [ + h('center', [ + h('h1', Msg.about), + setHTML(h('p'), 'CryptPad is created inside of the Research Team at XWiki SAS, a small business located in Paris France and Iasi Romania. There are 3 core team members working on CryptPad plus a number of contributors both inside and outside of XWiki SAS.'), + ]), + ]), + ]), + h('div.container.cp-container', [ + h('div.row', [ + h('div.cp-develop-about.col-12',[ + h('div.cp-icon-cent'), + h('h2.text-center', 'Core Developers') + ]), + ]), + h('div.row.align-items-center', [ + h('div.col-12.col-sm-12.col-md-12.col-lg-6.cp-bio-avatar', [ + h('img.img-fluid', {'src': '/customize/images/CalebJames.jpg'}) + ]), + h('div.col-12.col-sm-12.col-md-12.col-lg-6.cp-profile-det', [ + h('h3', "Caleb James Delisle"), + h('hr'), + setHTML(h('div#bioCaleb'), '

Caleb is a cryptography developer, Machine Technology graduate of the Franklin County Technical School and lifelong tinkerer.
In 2011, he started the cjdns Open Source project to show that secure networking could be invisible and easily deployed.
After joining XWiki SAS in 2014, he started the CryptPad project with the intent of bringing the same transparent security to collaborative editing.
He\'s always trying to learn from more experienced colleagues and when someone passes through the Research Team office, his favorite words are "Pull up a chair!".

'), + h('a.cp-soc-media', { href : 'https://twitter.com/cjdelisle'}, [ + h('i.fa.fa-twitter') + ]), + h('a.cp-soc-media', { href : 'https://github.com/cjdelisle'}, [ + h('i.fa.fa-github') + ]) + ]), + ]), + h('div.row.align-items-center',[ + h('div.col-12.col-sm-12.col-md-12.col-lg-6.push-lg-6.cp-bio-avatar.cp-bio-avatar-right', [ + h('img.img-fluid', {'src': '/customize/images/AaronMacSween.jpg'}) + ]), + h('div.col-12.col-sm-12.col-md-12.col-lg-6.pull-lg-6.cp-profile-det',[ + h('h3', "Aaron MacSween"), + h('hr'), + setHTML(h('div#bioAaron'), '

Aaron transitioned into distributed systems development from a background in jazz and live stage performance.
He appreciates the elegance of biological systems and functional programming, and focused on both as a student at the University of Toronto, where he studied cognitive and computer sciences.
He moved to Paris in 2015 to work as a research engineer at XWiki SAS, after having dedicated significant time to various cryptography-related software projects.
He spends his spare time experimenting with guitars, photography, science fiction, and spicy food.

'), + h('a.cp-soc-media', { href : 'https://twitter.com/fc00ansuz'}, [ + h('i.fa.fa-twitter') + ]), + h('a.cp-soc-media', { href : 'https://github.com/ansuz/'}, [ + h('i.fa.fa-github') + ]) + ]), + ]), + h('div.row.align-items-center', [ + h('div.col-12.col-sm-12.col-md-12.col-lg-6.cp-bio-avatar', [ + h('img.img-fluid', {'src': '/customize/images/YannFlory.jpg'}) + ]), + h('div.col-12.col-sm-12.col-md-12.col-lg-6.cp-profile-det', [ + h('h3', "Yann Flory"), + h('hr'), + setHTML(h('div#bioYann'), '

In 2015, Yann graduated with an engineering degree from Ecole Centrale de Lille majoring in Data Science. In his studies he worked on a project to detect defects in optical fiber using image processing technology.
Upon joining XWiki SAS, Yann developed a Wiki page recommendation system, a common API for accessing data server-side and client-side, and an integrated development environment for development of XWiki applications.
Yann is soft spoken but brutally efficient, he is known to say "It will take 5 minutes".

'), + h('a.cp-soc-media', { href : 'https://github.com/yflory/'}, [ + h('i.fa.fa-github') + ]) + ]), + ]), + h('div.row', [ + h('div.cp-develop-about.col-12.cp-contrib',[ + h('div.cp-icon-cent'), + h('h2.text-center', 'Key Contributors') + ]), + ]), + h('div.row.align-items-center', [ + h('div.col-12.col-sm-12.col-md-12.col-lg-6.cp-bio-avatar', [ + h('img.img-fluid', {'src': '/customize/images/Pierre-new.jpg'}) + ]), + h('div.col-12.col-sm-12.col-md-12.col-lg-6.cp-profile-det', [ + h('h3', "Pierre Bondoerffer"), + h('hr'), + setHTML(h('div#bioPierre'), '

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('a.cp-soc-media', { href : 'https://twitter.com/cjdelisle'}, [ + h('i.fa.fa-twitter') + ]), + h('a.cp-soc-media', { href : 'https://github.com/cjdelisle'}, [ + h('i.fa.fa-github') + ]) + ]), + ]), + h('div.row.align-items-center',[ + h('div.col-12.col-sm-12.col-md-12.col-lg-6.push-lg-6.cp-bio-avatar.cp-bio-avatar-right', [ + h('img.img-fluid', {'src': '/customize/images/Catalin.jpg'}) + ]), + h('div.col-12.col-sm-12.col-md-12.col-lg-6.pull-lg-6.cp-profile-det',[ + h('h3', "Catalin Scripcariu"), + h('hr'), + setHTML(h('div#bioCatalin'), '

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, where he worked both on the business and the community side of XWiki, including the research team and CryptPad.

'), + h('a.cp-soc-media', { href : 'https://twitter.com/catalinscr'}, [ + h('i.fa.fa-twitter') + ]), + h('a.cp-soc-media', { href : 'https://www.linkedin.com/in/catalinscripcariu/'}, [ + h('i.fa.fa-linkedin') + ]) + ]), + ]), + h('div.row.align-items-center.cp-margin-bot', [ + h('div.col-12.col-sm-12.col-md-12.col-lg-6.cp-bio-avatar', [ + h('img.img-fluid', {'src': '/customize/images/LudovicDuboist.jpg'}) + ]), + h('div.col-12.col-sm-12.col-md-12.col-lg-6.cp-profile-det', [ + h('h3', "Ludovic Dubost"), + h('hr'), + setHTML(h('div#bioLudovic'), '

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.
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.

'), + h('a.cp-soc-media', { href : 'https://twitter.com/ldubost'}, [ + h('i.fa.fa-twitter') + ]), + h('a.cp-soc-media', { href : 'https://github.com/ldubost'}, [ + h('i.fa.fa-github') + ]) + ]), + ]), ]), - setHTML(h('p'), Msg.main_p2), - h('h2', Msg.main_howitworks), - setHTML(h('p'), Msg.main_howitworks_p1) - ].concat(indexContent())); + infopageFooter() + ]); }; Pages['/privacy.html'] = function () { - return h('div#main_other', [ - h('center', h('h1', Msg.policy_title)), - h('h2', Msg.policy_whatweknow), - h('p', Msg.policywhatweknow_p1), + return h('div#cp-main', [ + infopageTopbar(), + h('div.container.cp-container', [ + h('center', h('h1', Msg.policy_title)), + h('h2', Msg.policy_whatweknow), + h('p', Msg.policywhatweknow_p1), - h('h2', Msg.policy_howweuse), - h('p', Msg.policy_howweuse_p1), - h('p', Msg.policy_howweuse_p2), + h('h2', Msg.policy_howweuse), + h('p', Msg.policy_howweuse_p1), + h('p', Msg.policy_howweuse_p2), - h('h2', Msg.policy_whatwetell), - h('p', Msg.policy_whatwetell_p1), + h('h2', Msg.policy_whatwetell), + h('p', Msg.policy_whatwetell_p1), - h('h2', Msg.policy_links), - h('p', Msg.policy_links_p1), + h('h2', Msg.policy_links), + h('p', Msg.policy_links_p1), - h('h2', Msg.policy_ads), - h('p', Msg.policy_ads_p1), + h('h2', Msg.policy_ads), + h('p', Msg.policy_ads_p1), - h('h2', Msg.policy_choices), - h('p', Msg.policy_choices_open), - setHTML(h('p'), Msg.policy_choices_vpn), - - h('br') + h('h2', Msg.policy_choices), + h('p', Msg.policy_choices_open), + setHTML(h('p'), Msg.policy_choices_vpn), + ]), + infopageFooter() ]); }; Pages['/terms.html'] = function () { - return h('div#main_other', [ - h('center', h('h1', Msg.tos_title)), - h('p', Msg.tos_legal), - h('p', Msg.tos_availability), - h('p', Msg.tos_e2ee), - h('p', Msg.tos_logs), - h('p', Msg.tos_3rdparties), + return h('div#cp-main', [ + infopageTopbar(), + h('div.container.cp-container', [ + h('center', h('h1', Msg.tos_title)), + h('p', Msg.tos_legal), + h('p', Msg.tos_availability), + h('p', Msg.tos_e2ee), + h('p', Msg.tos_logs), + h('p', Msg.tos_3rdparties), + ]), + infopageFooter() ]); }; Pages['/contact.html'] = function () { - return h('div#main_other', [ - h('center', h('h1', Msg.contact)), - setHTML(h('p'), Msg.main_about_p2) - ]); - }; - - var userForm = function () { - return h('div#userForm.form-group.hidden', [ - h('input#name.form-control', { - name: 'name', - type: 'text', - placeholder: Msg.login_username - }), - h('input#password.form-control', { - name: 'password', - type: 'password', - placeholder: Msg.login_password - }), - h('div', { - style: { display: 'none' } - }, [ - h('span.remember.form-check', [ - h('label.form-check-label', { - 'for': 'rememberme', - placeholder: Msg.login_remember, - }, [ - h('input#rememberme.form-check-input', { - type: 'checkbox', - checked: true - }) - ]) - ]) + return h('div#cp-main', [ + infopageTopbar(), + h('div.container.cp-container', [ + h('center', h('h1', Msg.contact)), + setHTML(h('p'), Msg.main_about_p2) ]), - h('button.btn.btn-secondary.login.half.first', Msg.login_login), - h('button.btn.btn-success.register.half', Msg.login_register), - h('p.separator', Msg.login_orNoLogin), - h('p#buttons.buttons'), - h('p.driveLink', [ - h('a.gotodrive', { - href: '/drive/' - }, Msg.login_nologin) - ]) + infopageFooter(), ]); }; - - var appButton = function (alt, h2, img, p, url, btn, id) { - return h('div.app', [ - h('center', [ - h('h2', h2), - h('img', { - alt: 'Rich Text application', - src: img, - }) + Pages['/what-is-cryptpad.html'] = function () { + return h('div#cp-main', [ + infopageTopbar(), + h('div.container.cp-container', [ + h('center', h('h1', Msg.whatis_title)), + setHTML(h('h2'), Msg.whatis_collaboration), + setHTML(h('p'), Msg.whatis_collaboration_p1), + h('img', { src: '/customize/images/pad_screenshot.png?' + urlArgs }), + setHTML(h('p'), Msg.whatis_collaboration_p2), + setHTML(h('p'), Msg.whatis_collaboration_p3), + setHTML(h('h2'), Msg.whatis_zeroknowledge), + h('div.row', [ + h('div.col-md-4.align-self-center', [ + h('img#zeroknowledge', { src: '/customize/images/zeroknowledge_small.png?' + urlArgs }), + ]), + h('div.col-md-8', [ + setHTML(h('p'), Msg.whatis_zeroknowledge_p1), + setHTML(h('p'), Msg.whatis_zeroknowledge_p2), + setHTML(h('p'), Msg.whatis_zeroknowledge_p3), + ]), + ]), + setHTML(h('h2'), Msg.whatis_drive), + setHTML(h('p'), Msg.whatis_drive_p1), + h('img', { src: '/customize/images/drive_screenshot.png?' + urlArgs }), + setHTML(h('p'), Msg.whatis_drive_p2), + setHTML(h('p'), Msg.whatis_drive_p3), + setHTML(h('h2'), Msg.whatis_business), + setHTML(h('p'), Msg.whatis_business_p1), + setHTML(h('p'), Msg.whatis_business_p2), ]), - setHTML(h('p'), p), - h('p.buttons', [ - h('a#' + id, { - href: url, - }, [ - h('button.btn.btn-secondary', btn), - ]) - ]) + infopageFooter(), ]); }; - var tryIt = function () { - return [ - h('div.class.category#tryit', [ - h('center', [ - h('h1', Msg.tryIt) - ]) - ]), - h('div.page', [ - h('div.app-container', [ - h('div.app-row', [ - appButton("Rich Text application", - Msg.main_richText, - '/customize/images/pad.png?' + urlArgs, - Msg.main_richText_p, - '/pad/', - Msg.button_newpad, - 'create-pad'), - appButton('Code application', - Msg.main_code, - '/customize/images/code.png?' + urlArgs, - Msg.main_code_p, - '/code/', - Msg.button_newcode, - 'create-code'), - appButton('Slide application', - Msg.main_slide, - '/customize/images/slide.png?' + urlArgs, - Msg.main_slide_p, - '/slide/', - Msg.button_newslide, - 'create-slide'), - appButton('Poll application', - Msg.main_poll, - '/customize/images/poll.png?' + urlArgs, - Msg.main_poll_p, - '/poll/', - Msg.button_newpoll, - 'create-poll') - ]) - ]) - ]) - ]; - }; - Pages['/'] = Pages['/index.html'] = function () { + var showingMore = false; return [ - h('div#main', [ - h('div.mainOverlay'), - h('div#align-container', [ - h('div#main-container', [ - h('div#data.hidden', [ - setHTML(h('p.left'), Msg.main_info), + h('div#cp-main', [ + infopageTopbar(), + h('div.container.cp-container', [ + h('div.row', [ + h('div.cp-title.col-12.col-sm-6', [ + h('img', { src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs }), + h('h1', 'CryptPad'), + h('p', Msg.main_catch_phrase) ]), - userForm(), - h('div#loggedIn.hidden', [ - h('p#loggedInHello'), - h('p', [ - h('button.btn.btn-primary.gotodrive', Msg.login_accessDrive), - ]), - h('p', [ - h('button#loggedInLogout.btn.btn-secondary', Msg.logoutButton) + h('div.col-12.col-sm-6', [ + [ + [ 'pad', '/pad/', Msg.main_richTextPad, 'fa-file-word-o' ], + [ 'code', '/code/', Msg.main_codePad, 'fa-file-code-o' ], + [ 'slide', '/slide/', Msg.main_slidePad, 'fa-file-powerpoint-o' ], + [ 'poll.cp-more.cp-hidden', '/poll/', Msg.main_pollPad, 'fa-calendar' ], + [ 'whiteboard.cp-more.cp-hidden', '/whiteboard/', Msg.main_whiteboardPad, 'fa-paint-brush' ], + [ 'recent.cp-more.cp-hidden', '/drive/', Msg.main_localPads, 'fa-hdd-o' ] + ].map(function (x) { + return h('a', [ + { href: x[1] }, + h('div.bs-callout.cp-callout-' + x[0], [ + h('i.fa.' + x[3]), + h('div.pad-button-text', [ h('h4', x[2]) ]) + ]) + ]); + }), + h('div.bs-callout.cp-callout-more', [ + h('div.cp-callout-more-lessmsg.cp-hidden', [ + "see less ", + h('i.fa.fa-caret-up') + ]), + h('div.cp-callout-more-moremsg', [ + "see more ", + h('i.fa.fa-caret-down') + ]), + { + onclick: function () { + if (showingMore) { + $('.cp-more, .cp-callout-more-lessmsg').addClass('cp-hidden'); + $('.cp-callout-more-moremsg').removeClass('cp-hidden'); + } else { + $('.cp-more, .cp-callout-more-lessmsg').removeClass('cp-hidden'); + $('.cp-callout-more-moremsg').addClass('cp-hidden'); + } + showingMore = !showingMore; + } + } ]) ]) ]) ]), - ]) - ] - .concat(tryIt()); + ]), + ]; }; var loadingScreen = function () { return h('div#loading', h('div.loadingContainer', [ h('img.cryptofist', { - src: '/customize/cryptofist_small.png?' + urlArgs + src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs }), h('div.spinnerContainer', - h('span.fa.fa-spinner.fa-pulse.fa-4x.fa-fw')), + h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw')), h('p', Msg.loading) ]) ); }; - loadingScreen = loadingScreen; // TODO use this Pages['/user/'] = Pages['/user/index.html'] = function () { return h('div#container'); }; Pages['/register/'] = Pages['/register/index.html'] = function () { - return [h('div#main', [ - h('div.mainOverlay'), - h('div#align-container', [ - h('div#data.hidden', [ - h('h1', Msg.register_header), - h('br'), - setHTML(h('p.left.register-explanation'), Msg.register_explanation) + return [h('div#cp-main', [ + infopageTopbar(), + h('div.container-fluid.cp-register-wel',[ + h('div.container',[ + h('div.row',[ + h('div.col-12',[ + h('h1.text-center', Msg.register_header) + ]) + ]) + ]) + ]), + h('div.container.cp-container', [ + h('div.row.cp-register-det', [ + h('div#data.hidden.col-md-6', [ + setHTML(h('p.register-explanation'), Msg.register_explanation) ]), - h('div#userForm.form-group.hidden', [ + h('div#userForm.form-group.hidden.col-md-6', [ h('input.form-control#username', { type: 'text', autocomplete: 'off', @@ -309,34 +432,52 @@ define([ type: 'password', placeholder: Msg.login_confirm, }), - h('input#import-recent', { - type: 'checkbox', - checked: true - }), - h('label', { - 'for': 'import-recent', - }, Msg.register_importRecent), - h('br'), - h('input#accept-terms', { - type: 'checkbox' - }), - setHTML(h('label', { - 'for': 'accept-terms', - }), Msg.register_acceptTerms), - h('br'), - h('button#register.btn.btn-primary', Msg.login_register) + h('div.checkbox-container', [ + h('input#import-recent', { + name: 'import-recent', + type: 'checkbox', + checked: true + }), + // hscript doesn't generate for on label for some + // reason... use jquery as a temporary fallback + setHTML($('')[0], Msg.register_importRecent) + /*h('label', { + 'for': 'import-recent', + }, Msg.register_importRecent),*/ + ]), + h('div.checkbox-container', [ + h('input#accept-terms', { + name: 'accept-terms', + type: 'checkbox' + }), + setHTML($('')[0], Msg.register_acceptTerms) + /*setHTML(h('label', { + 'for': 'accept-terms', + }), Msg.register_acceptTerms),*/ + ]), + h('button#register.btn.cp-login-register', Msg.login_register) ]) - ]) + ]), + h('div.row.cp-register-test',[ + h('hr'), + h('div.col-12', [ + setHTML(h('p.test-details'), Msg.register_testimonial), + h('a.cp-test-source.pull-right', { href : 'http://boingboing.net/2016/09/26/cryptpad-a-freeopen-end-to.html'}, Msg.register_testimonial_name) + ]) + ]) + ]), + + infopageFooter(), ])]; }; Pages['/login/'] = Pages['/login/index.html'] = function () { - return [h('div#main', [ - h('div.mainOverlay'), - h('div#align-container', - h('div#main-container', [ - h('div#data.hidden', setHTML(h('p.left'), Msg.main_info)), - h('div#userForm.form-group.hidden', [ + return [h('div#cp-main', [ + infopageTopbar(), + h('div.container.cp-container', [ + h('div.row.align-items-center', [ + h('div#data.hidden.col-md-6', setHTML(h('p.left'), Msg.main_info)), + h('div#userForm.form-group.hidden.col-md-6', [ h('input.form-control#name', { name: 'name', type: 'text', @@ -352,14 +493,14 @@ define([ 'name': 'password', placeholder: Msg.login_password, }), - h('button.btn.btn-primary.login.first', Msg.login_login), h('div.extra', [ - h('p', Msg.login_notRegistered), - h('button#register.btn.btn-success.register', Msg.login_register) + h('button.login.first.btn', Msg.login_login), + h('button#register.btn.register.cp-login-register', Msg.login_register) ]) ]) - ]) - ) + ]), + ]), + infopageFooter(), ])]; }; @@ -379,33 +520,43 @@ define([ display: 'block', } }, [ - h('button#clear', Msg.canvas_clear), ' ', - h('button#toggleDraw', Msg.canvas_disable), - h('button#delete', { + h('button#clear.btn.btn-danger', Msg.canvas_clear), ' ', + h('button#toggleDraw.btn.btn-secondary', Msg.canvas_disable), + h('button#delete.btn.btn-secondary', { style: { display: 'none', } - }), - h('input#width', { - type: 'range', - value: "5", - min: "1", - max: "100" - }), - h('label', { - 'for': 'width' - }, Msg.canvas_width), - h('input#opacity', { - type: 'range', - value: "1", - min: "0.1", - max: "1", - step: "0.1" - }), - h('label', { - 'for': 'width', - }), - h('span.selected') + }, Msg.canvas_delete), + h('div.range-group', [ + h('label', { + 'for': 'width' + }, Msg.canvas_width), + h('input#width', { + type: 'range', + value: "5", + min: "1", + max: "100" + }), + h('span#width-val', '5px') + ]), + h('div.range-group', [ + h('label', { + 'for': 'opacity', + }, Msg.canvas_opacity), + h('input#opacity', { + type: 'range', + value: "1", + min: "0.1", + max: "1", + step: "0.1" + }), + h('span#opacity-val', '100%') + ]), + h('span.selected', [ + h('img', { + title: Msg.canvas_currentBrush + }) + ]) ]), setHTML(h('div#colors'), ' '), loadingScreen(), @@ -432,16 +583,15 @@ define([ h('p', Msg.poll_p_encryption) ]), h('div.upper', [ - h('button#publish', { + h('button#publish.btn.btn-success', { style: { display: 'none' } }, Msg.poll_publish_button), - h('button#admin', { + h('button#admin.btn.btn-primary', { style: { display: 'none' }, title: Msg.poll_admin_button }, Msg.poll_admin_button), - h('button#help', { - title: Msg.poll_show_help_button, - style: { display: 'none' } + h('button#help.btn.btn-secondary', { + title: Msg.poll_show_help_button }, Msg.poll_show_help_button) ]), h('div.realtime', [ @@ -456,13 +606,13 @@ define([ ]), h('div#tableContainer', [ h('div#tableScroll'), - h('button#create-user', { + h('button#create-user.btn.btn-secondary', { title: Msg.poll_create_user }, h('span.fa.fa-plus')), - h('button#create-option', { + h('button#create-option.btn.btn-secondary', { title: Msg.poll_create_option }, h('span.fa.fa-plus')), - h('button#commit', { + h('button#commit.btn.btn-secondary', { title: Msg.poll_commit }, h('span.fa.fa-check')) ]) diff --git a/customize.dist/source-branch.svg b/customize.dist/source-branch.svg new file mode 100644 index 000000000..b7aff2d83 --- /dev/null +++ b/customize.dist/source-branch.svg @@ -0,0 +1,17 @@ + + + + + + + + + + diff --git a/customize.dist/src/less/alertify.less b/customize.dist/src/less/alertify.less deleted file mode 100644 index 7f6622522..000000000 --- a/customize.dist/src/less/alertify.less +++ /dev/null @@ -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; - } - } - -} 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 3e08d9375..ca1fab6c5 100644 --- a/customize.dist/src/less/cryptpad.less +++ b/customize.dist/src/less/cryptpad.less @@ -1,7 +1,10 @@ @import "./variables.less"; @import "./mixins.less"; -@import "./alertify.less"; +@import "../less2/include/alertify.less"; +@import "../less2/include/colortheme.less"; +@import "../less2/include/modal.less"; +@import "../less2/include/font.less"; @import "./bar.less"; @import "./loading.less"; @import "./dropdown.less"; @@ -10,6 +13,10 @@ @toolbar-green: #5cb85c; +.font_open-sans(); + +.alertify_main(); + html.cp, .cp body { font-size: .875em; background-color: @page-white; //@base; @@ -25,7 +32,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 @@ -67,7 +74,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; @@ -425,7 +432,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 { @@ -630,29 +637,29 @@ noscript { /* Upload status table */ #uploadStatusContainer { + .modal_base(); position: absolute; left: 10vw; right: 10vw; - bottom: 100px; - background-color: rgba(0,0,0,0.5); - color: white; - opacity: 0.7; + bottom: 10vh; + opacity: 0.9; box-sizing: border-box; - z-index:10000; + z-index: 10000; display: none; - font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; #uploadStatus { width: 80vw; - border: 1px solid black; - border-collapse: collapse; tr:nth-child(1) { - background-color: #888; - border: 1px solid #999; - td { text-align: center; } + background-color: darken(@colortheme_modal-bg, 20%); + td { + text-align: center; + font-weight: bold; + padding: 0.25em; + } } + @upload_pad_h: 0.25em; + @upload_pad_v: 0.5em; + td { - border-left: 1px solid #BBB; - border-right: 1px solid #BBB; - padding: 0 10px; + padding: @upload_pad_h @upload_pad_v; } .upProgress { width: 200px; @@ -663,9 +670,10 @@ noscript { .progressContainer { position: absolute; width: 0px; - left: 5px; - top: 1px; bottom: 1px; + left: @upload_pad_v; + top: @upload_pad_h; bottom: @upload_pad_h; background-color: rgba(0,0,255,0.3); + z-index: -1; } .upCancel { text-align: center; } .fa.cancel { 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..97b5bda8c 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 { +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 3f2ac0381..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; @@ -19,6 +20,7 @@ margin-left: auto; margin-right: auto; height: 300px; + margin-bottom: 2em; @media screen and (max-height: @media-short-screen) { display: none; } @@ -50,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 80537d534..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; @@ -821,13 +822,16 @@ body .cryptpad-toolbar { } a.cryptpad-logo { cursor: pointer; - font-size: 1em; - height: auto; - padding: 0px 5px; + display: inline-flex; text-decoration: none; + height: auto; + padding: 10px; - // hack because of whiteboard and poll - color: white !important; + img { + cursor: pointer; + height: 100%; + width: 100%; + } } } .cryptpad-user { 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 5e089d7f7..8469ec518 100644 --- a/customize.dist/src/less/variables.less +++ b/customize.dist/src/less/variables.less @@ -1,19 +1,21 @@ -@base: #fff; //#f5f5f5; +@import (once) '../less2/include/colortheme.less'; +@import (once) '../less2/include/browser.less'; + +@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; @@ -31,51 +33,23 @@ @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: @old-base; +@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 -@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; @@ -85,28 +59,28 @@ @toolbar-button-font: @dropdown-font; -@toolbar-pad-bg: #1c4fa0; -@toolbar-pad-color: #fff; -@toolbar-slide-bg: #e57614; -@toolbar-slide-color: #fff; -@toolbar-code-bg: #ffae00; -@toolbar-code-color: #000; -@toolbar-poll-bg: #006304; -@toolbar-poll-color: #fff; -@toolbar-whiteboard-bg: #800080; -@toolbar-whiteboard-color: #fff; -@toolbar-drive-bg: #0087ff; -@toolbar-drive-color: #fff; -@toolbar-file-bg: #cd2532; -@toolbar-file-color: #fff; -@toolbar-friends-bg: #607B8D; -@toolbar-friends-color: #fff; -@toolbar-default-bg: #ddd; -@toolbar-default-color: #000; -@toolbar-settings-bg: #0087ff; -@toolbar-settings-color: #fff; -@toolbar-profile-bg: #0087ff; -@toolbar-profile-color: #fff; +@toolbar-pad-bg: @colortheme_pad-bg; +@toolbar-pad-color: @colortheme_pad-color; +@toolbar-slide-bg: @colortheme_slide-bg; +@toolbar-slide-color: @colortheme_slide-color; +@toolbar-code-bg: @colortheme_code-bg; +@toolbar-code-color: @colortheme_code-color; +@toolbar-poll-bg: @colortheme_poll-bg; +@toolbar-poll-color: @colortheme_poll-color; +@toolbar-whiteboard-bg: @colortheme_whiteboard-bg; +@toolbar-whiteboard-color: @colortheme_whiteboard-color; +@toolbar-drive-bg: @colortheme_drive-bg; +@toolbar-drive-color: @colortheme_drive-color; +@toolbar-file-bg: @colortheme_file-bg; +@toolbar-file-color: @colortheme_file-color; +@toolbar-friends-bg: @colortheme_friends-bg; +@toolbar-friends-color: @colortheme_friends-color; +@toolbar-default-bg: @colortheme_default-bg; +@toolbar-default-color: @colortheme_default-color; +@toolbar-settings-bg: @colortheme_settings-bg; +@toolbar-settings-color: @colortheme_settings-color; +@toolbar-profile-bg: @colortheme_profile-bg; +@toolbar-profile-color: @colortheme_profile-color; @toolbar-todo-bg: #7bccd1; @toolbar-todo-color: #000; @@ -124,7 +98,7 @@ @main-block-bg: rgba(200, 200, 200, 0.3); @main-color: #fff; -@main-bg: url('/customize/bg3.jpg') no-repeat center center; +@main-bg: url('/customize/bg4.jpg') no-repeat center center; @category-bg: #f4f4f4; diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less new file mode 100644 index 000000000..ff4a2abec --- /dev/null +++ b/customize.dist/src/less2/include/alertify.less @@ -0,0 +1,311 @@ +@import (once) "./colortheme.less"; +@import (once) "./browser.less"; + +.alertify_main () { + @alertify-fore: @colortheme_modal-fg; + @alertify-base: @colortheme_modal-bg; + + @alertify-dialog-bg: @alertify-base; + @alertify-dialog-fg: @alertify-fore; + + @alertify-btn-fg: @alertify-fore; + + @alertify-btn-bg: rgba(200, 200, 200, 0.1); + @alertify-btn-bg-hover: rgba(200, 200, 200, .3); + + @alertify-bg: @colortheme_modal-dim; + @alertify-fg: @alertify-fore; + + @alertify-input-bg: @colortheme_modal-input; + @alertify-input-fg: @colortheme_modal-fg; + + @alertify_padding-base: @colortheme_modal-padding; + @alertify_box-shadow: @colortheme_modal-shadow; + + // 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-family: @colortheme_font; + font-size: large; + + box-shadow: @alertify_box-shadow; + &, &.default { + // FIXME + background: @colortheme_notification-log; + } + &.error { + font-weight: bold; + background: @colortheme_notification-warn; + } + &.success { + background: @colortheme_notification-log; + } + } + } + + .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; + + h1, h2, h3 { + margin-top: 0; + } + + &.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; + &.half { + width: 50%; + max-width: 50%; + @media (max-width: @browser_media-medium-screen) { + width: 100%; + } + } + } + + width: 100%; + margin: 0 auto; + position: relative; + top: 50%; + transform: translateY(-50%); + + > * { + width: 100%; + min-width: 300px; + max-width: 500px; + margin: 0 auto; + text-align: left; + padding: @alertify_padding-base; + background: #fff; + box-shadow: @alertify_box-shadow; + } + + .msg { + padding: @alertify_padding-base; + margin-bottom: @alertify_padding-base; + margin: 0; + } + + input:not(.form-control), textarea { + background-color: @alertify-input-bg; + color: @alertify-input-fg; + border: 0px; + + margin-bottom: 15px; + width: 100%; + font-size: 100%; + padding: @alertify_padding-base; + &:focus { + //outline-offset: -2px; + } + } + + input[type="checkbox"] { + padding: 0; + margin: 0; + margin-right: 0.5em; + } + + 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; + border-radius: 0; + + color: @alertify-btn-fg; + border: 1px solid transparent; + + &.safe, &.danger { + color: @colortheme_old-base; + white-space: normal; + font-weight: bold; + } + &.danger { + background-color: @colortheme_alertify-red; + &:hover, &:active { + background-color: lighten(@colortheme_alertify-red, 5%); + } + } + + &.safe { + background-color: @colortheme_alertify-green; + &:hover, &:active { + background-color: lighten(@colortheme_alertify-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; + } + } + + } +} diff --git a/customize.dist/src/less2/include/browser.less b/customize.dist/src/less2/include/browser.less new file mode 100644 index 000000000..449244387 --- /dev/null +++ b/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; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less new file mode 100644 index 000000000..4ecafb27a --- /dev/null +++ b/customize.dist/src/less2/include/colortheme.less @@ -0,0 +1,70 @@ +@colortheme_font: 'Open Sans', 'Helvetica Neue', sans-serif; + +@colortheme_link-color: #0275D8; +@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_modal-bg: #222; +@colortheme_modal-fg: #fff; +@colortheme_modal-link: #eee; +@colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%); +@colortheme_modal-dim: rgba(0, 0, 0, 0.4); +@colortheme_modal-padding: 12px; +@colortheme_modal-shadow: 0 8px 32px 0 rgba(0,0,0,.4); + +@colortheme_modal-input: #111; + +@colortheme_alertify-red: #E55236; +@colortheme_alertify-green: #77C825; + +@colortheme_notification-log: rgba(0, 0, 0, 0.8); +@colortheme_notification-warn: rgba(205, 37, 50, 0.8); + +// Apps + +@colortheme_pad-bg: #1c4fa0; +@colortheme_pad-color: #fff; + +@colortheme_slide-bg: #e57614; +@colortheme_slide-color: #fff; + +@colortheme_code-bg: #ffae00; +@colortheme_code-color: #000; + +@colortheme_poll-bg: #006304; +@colortheme_poll-color: #fff; + +@colortheme_whiteboard-bg: #800080; +@colortheme_whiteboard-color: #fff; + +@colortheme_drive-bg: #0087ff; +@colortheme_drive-color: #fff; + +@colortheme_file-bg: #cd2532; +@colortheme_file-color: #fff; + +@colortheme_friends-bg: #607B8D; +@colortheme_friends-color: #fff; + +@colortheme_default-bg: #ddd; +@colortheme_default-color: #000; + +@colortheme_settings-bg: #0087ff; +@colortheme_settings-color: #fff; + +@colortheme_profile-bg: #0087ff; +@colortheme_profile-color: #fff; + +@cryptpad_color_blue: #4591C4; +@cryptpad_color_grey: #999999; +@cryptpad_header_col: #1E1F1F; +@cryptpad_text_col: #3F4141; \ No newline at end of file diff --git a/customize.dist/src/less2/include/font.less b/customize.dist/src/less2/include/font.less new file mode 100644 index 000000000..b1fdd0b19 --- /dev/null +++ b/customize.dist/src/less2/include/font.less @@ -0,0 +1,9 @@ +.font_neuropolitical () { + @font-face { + font-family: Neuropolitical; + src: url(./customize/fonts/neuropolitical.ttf) + } +} +.font_open-sans () { + @import (once) '/customize/fonts/open-sans.less'; +} diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less new file mode 100644 index 000000000..6d9b380ed --- /dev/null +++ b/customize.dist/src/less2/include/infopages.less @@ -0,0 +1,217 @@ +@import (once) "./colortheme.less"; + +@infopages_infobar-height: 64px; +@infopages_padding: 32px; + +// Basic setup for info pages, this should be used at the global level +.infopages_main () { + background-color: @colortheme_info-background; + a { + color: @cryptpad_color_blue; + &:visited { color: darken(@cryptpad_color_blue, 5%); } + } + a:hover { + opacity: 1; + } + border: 0; + padding: 0; + margin: 0; + font-size: 16px; + font-family: @colortheme_font; + .cp-container { + font-size: 16px; + padding-top: @infopages_padding; + padding-bottom: @infopages_padding; + min-height: 75vh; + h1 { + font-size: 3em; + margin-bottom: 0.5em; + } + h2 { + font-size: 2em; + margin-top: 1em; + margin-bottom: 0.5em; + } + h3 { + font-size: 1.5em; + margin-top: 1em; + margin-bottom: 0.5em; + } + img { + &.left { + float: left; + } + max-width: 100%; + } + .form-group { + & > * { + margin-top: 0.5em; + } + display: flex; + flex-direction: column; + align-items: center; + .checkbox-container { + width: 100%; + display: flex; + align-items: center; + label { + margin: 0; + } + input { + margin-right: 0.5em; + } + } + } + } + footer { + background-color: @cryptpad_color_blue; + .container { + .col { + margin-top: 1em; + } + a { + color: #fff; + &:visited { + color: darken(#fff, 5%); + }; + } + margin-bottom: 1em; + ul.list-unstyled { + margin-top: 1em; + text-align: center; + } + } + .cp-bio-foot { + background-image: url(/customize/CryptPad-white-logo.svg); + background-size: 100%; + background-repeat: no-repeat; + p { + color: #fff; + padding-top: 30%; + margin-bottom: 0; + + } + + } + .cp-version-footer { + background-color: @cryptpad_color_blue; + color: #fff; + text-align: center; + padding: 0.5em; + border-top: 2px solid #fff; + } + } +}; + +.infopages_link () { + text-decoration: none; + color: #0275D8; + cursor: pointer; + display: inline-flex; + &:hover { + transform: scale(1.05); + } +} + +// Apply this to the top bar div +.infopages_topbar () { + .cp-topbar { + background: #fff; + z-index: 9001; + position: fixed; + top: 0; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + box-sizing: border-box; + width: 100%; + height: @infopages_infobar-height; + padding-left: 0.5em; + padding-right: 0.5em; + vertical-align: middle; + font-size: 1.25em; + line-height: 1.25em; + cursor: default; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + .navbar-nav { + display: flex; + align-items: center; + } + a { + font-weight: 500; + padding: 0.6em; + .infopages_link() + } + .cp-logo { + 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/include/mediatag.less b/customize.dist/src/less2/include/mediatag.less new file mode 100644 index 000000000..704fd71bd --- /dev/null +++ b/customize.dist/src/less2/include/mediatag.less @@ -0,0 +1,18 @@ +.mediatag_base() { + media-tag { + min-height: 0; + flex: 1; + display: flex; + flex-flow: column; + text-align: center; + } + + media-tag img { + flex: 1; + max-height: 100% !important; + } + + media-tag iframe { + min-height: 100%; + } +} diff --git a/customize.dist/src/less2/include/modal.less b/customize.dist/src/less2/include/modal.less new file mode 100644 index 000000000..21cc69e97 --- /dev/null +++ b/customize.dist/src/less2/include/modal.less @@ -0,0 +1,17 @@ +@import (once) "./colortheme.less"; + +.modal_base() { + font-family: @colortheme_font; + + background-color: @colortheme_modal-bg; + color: @colortheme_modal-fg; + box-shadow: @colortheme_modal-shadow; + + a { + color: @colortheme_modal-link; + + &:visited { + color: @colortheme_modal-link-visited; + } + } +} diff --git a/customize.dist/src/less2/main.less b/customize.dist/src/less2/main.less new file mode 100644 index 000000000..3cab13fbb --- /dev/null +++ b/customize.dist/src/less2/main.less @@ -0,0 +1,12 @@ +@import (once) './include/font.less'; +.font_neuropolitical(); +.font_open-sans(); + +body.cp-page-index { @import "./pages/page-index.less"; } +body.cp-page-contact { @import "./pages/page-contact.less"; } +body.cp-page-login { @import "./pages/page-login.less"; } +body.cp-page-register { @import "./pages/page-register.less"; } +body.cp-page-what-is-cryptpad { @import "./pages/page-what-is-cryptpad.less"; } +body.cp-page-about { @import "./pages/page-about.less"; } +body.cp-page-privacy { @import "./pages/page-privacy.less"; } +body.cp-page-terms { @import "./pages/page-terms.less"; } diff --git a/customize.dist/src/less2/pages/page-about.less b/customize.dist/src/less2/pages/page-about.less new file mode 100644 index 000000000..d356fecd0 --- /dev/null +++ b/customize.dist/src/less2/pages/page-about.less @@ -0,0 +1,115 @@ +@import (once) "../include/infopages.less"; +@import (once) "../include/colortheme.less"; + +.infopages_main(); +.infopages_topbar(); +#cp-main { + background: #fff; +} +.cp-about-intro { + padding-top: 3em; + padding-bottom: 3em; + background-image: url(/customize/bkabout.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + .container { + color: #fff; + font-family: "Open Sans"; + h1 { + font-weight: 700; + } + a { + color: #fff; + text-decoration: underline; + } + p { + padding-top: 1em; + } + } +} +.cp-container { + .row { + background: #fff; + } + .cp-bio-avatar { + padding-right: 0; + @media (max-width: 991px) { + padding-right: 15px; + } + img { + @media (max-width: 991px) { + margin: 0 auto; + display: block; + } + } + } + .cp-bio-avatar-right { + padding-right: 15px; + padding-left: 0; + @media (max-width: 991px) { + padding-left: 15px; + } + } +} +.cp-develop-about { + .cp-icon-cent { + width: 6rem; + background: #fff; + border-radius: 50%; + height: 6rem; + box-shadow: 0 5px 15px rgba(69,145,196, 0.3); + margin: 0 auto; + background-image: url(/customize/code.svg); + background-repeat: no-repeat; + margin-top: 1em; + margin-bottom: 1.5em; + background-position: 50%; + background-size: 4rem; + } + h2 { + margin-top: 0; + font-weight: 600; + color: #1E1F1F; + margin-bottom: 1.5em; + } +} +.cp-profile-det { + padding-left: 30px; + h3 { + color: #1E1F1F; + font-weight: 700; + } + p { + color: #3F4141; + margin-bottom: 1em; + } + hr { + margin-left: 0; + width: 15rem; + border-top: 2px solid @cryptpad_color_blue; + } + margin-bottom: 1em; +} +.cp-soc-media { + font-size: 1.5em; + color: @cryptpad_color_blue; + padding-right: 1em; + display: inline-block; + &:hover { + transform: scale(1.1); + } + &:visited { + color: @cryptpad_color_blue; + } +} +.cp-contrib { + margin-top: 3em; + .cp-icon-cent { + background-image: url(/customize/source-branch.svg); + background-position: 60%; + } +} +.cp-margin-bot { + margin-bottom: 1.5em; +} diff --git a/customize.dist/src/less2/pages/page-contact.less b/customize.dist/src/less2/pages/page-contact.less new file mode 100644 index 000000000..56a60022c --- /dev/null +++ b/customize.dist/src/less2/pages/page-contact.less @@ -0,0 +1,9 @@ +@import (once) "../include/infopages.less"; +@import (once) "../include/colortheme.less"; + +.infopages_main(); +.infopages_topbar(); + +.fa { + padding-right: 0.25em; +} diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less new file mode 100644 index 000000000..90a765a4a --- /dev/null +++ b/customize.dist/src/less2/pages/page-index.less @@ -0,0 +1,197 @@ +//@import (once) "./variables.less"; + +@import (once) "../include/infopages.less"; +@import (once) "../include/colortheme.less"; + + +.infopages_main(); +.infopages_topbar(); + +@background_lighter: rgba(0,0,0,0.1); +@background_darker: rgba(0,0,0,0.4); +#cp-main { + 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; + justify-content: space-between; + align-items: center; + .container { + @media only screen and (max-device-width : 576px) { + margin-top: 6em; + } + } +} +body { + font-family: "Open Sans", Helvetica; +} +.cp-right { + .cp-register-btn { + padding: 0.5em 1em 0.7em 1em; + border: 2px solid #fff; + &:hover { + transform: scale(1.05); + } + } + .cp-login-btn { + color: #fff; + padding: 0.5em 1em 0.7em 1em; + &:hover { + transform: scale(1.05); + } + } +} +.cp-title { + display: flex; + align-items: center; + flex-direction: column; + margin-top: 1.5em; + img { + height: 20vh; + margin-bottom: 1.5em; + } + margin-left: 0; + h1 { + font-family: "Neuropolitical"; + //font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif; + //font-family: "Raleway"; + font-size: 45px; + } + p { + //font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 20px; + //font-style: italic; + } +} +.navbar { + background: transparent; + width: 100%; + @media only screen and (max-device-width: 991px) { + margin-top: 0; + } + .navbar-brand { + background-image: url(/customize/CryptPad-white-logo.svg); + } + a { + color: #fff; + &:visited { + color: rgba(255,255,255,.9); + }; + } + .nav-link { + &:hover { + transform: scale(1.05); + }; + } + .cp-register-btn { + border: 2px solid #fff; + } + .navbar-toggler { + margin-top: 10px; + color: #fff; + } +} +@callout-padding: 15px; +a:hover { + text-decoration: none +} +.bs-callout { + display: flex; + align-items: stretch; + margin: 25px 0; + background:rgba(255,255,255,0.6); + color: black; + transition: all .1s ease-in-out; + box-sizing: border-box; + height: 5em; + position: relative; + a { + color: black; + &:hover { text-decoration-line: none; } + } + div h4 { + @media only screen and (min-device-width: 576px) and (max-device-width: 767px) { + font-size: 1.3em; + } + } +} +h4 { + margin: 0; +} +.cp-callout-more-moremsg,.cp-callout-more-lessmsg { + transform: none !important; +} +.bs-callout div { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + position: absolute; + left: 5em; +} +.bs-callout+.bs-callout { + margin-top: -5px; +} + +.bs-callout:hover { + //color: white; + transform: scale(1.05); + cursor: pointer; +} +.bs-callout:hover .fa { + //width: 100%; +} +.bs-callout:hover.cp-callout-more { + transform: none !important; +} +.bs-callout .fa { + display: flex; + align-items: center; + font-size: 2em; + padding-left: 0.57em; + width: 2em; + transition: width 0.1s; + color: #fff; +} +.cp-callout-pad .fa { background-color: @colortheme_pad-bg; } +.cp-callout-code .fa { background-color: @colortheme_code-bg; } +.cp-callout-slide .fa { background-color: @colortheme_slide-bg; } +.cp-callout-poll .fa { background-color: @colortheme_poll-bg; } +.cp-callout-whiteboard .fa { background-color: @colortheme_whiteboard-bg; } +.cp-callout-recent .fa { background-color: @colortheme_drive-bg; } +.cp-hidden { display: none !important; } +.cp-callout-more { + width: auto; + display: inline-block; + align-content: center; + height: 2em; + border-radius: 1em; + margin-left: auto; + margin-right: auto; + margin-top: 0; + background: none; + width: 100%; + div { + .infopages_link(); + color: #fff; + .fa { + font-size: inherit; + padding: 0; + width: 1em; + padding-left: 5px; + } + } +} +@media (min-width: 576px) and (max-width: 767px) { + .container { + padding-left: 0; + padding-right: 0; + } + div#cp-main.cp-page-index .cp-topbar .navbar-toggler-left { + left: 5px; + } +} + diff --git a/customize.dist/src/less2/pages/page-login.less b/customize.dist/src/less2/pages/page-login.less new file mode 100644 index 000000000..cbde08893 --- /dev/null +++ b/customize.dist/src/less2/pages/page-login.less @@ -0,0 +1,78 @@ +@import (once) "../include/infopages.less"; +@import (once) "../include/colortheme.less"; +@import (once) "../include/alertify.less"; + +.infopages_main(); +.infopages_topbar(); +.alertify_main(); + +.form-group { + .extra { + display: flex; + align-items: center; + justify-content: space-between; + + width: 100%; + .login { + } + } +} +.cp-container { + #data { + background: #4591C4; + padding-top: 3em; + padding-bottom: 7em; + padding-left: 30px; + padding-right: 30px; + p { + color: #fff; + } + h2 { + font-weight: 700; + color: @cryptpad_header_col; + } + } + #userForm { + padding-top: 3em; + padding-bottom: 2em; + .form-control { + border-radius: 0; + color: @cryptpad_text_col; + margin-top: 1em; + &:focus { + border-color: @cryptpad_color_blue; + } + } + .checkbox-container { + color: @cryptpad_text_col; + } + } + .align-items-center { + box-shadow: 0 5px 15px rgba(69,145,196, 0.3); + background: #fff; + } + .extra { + margin-top: 1em; + .cp-login-register { + color: @cryptpad_color_blue; + background: #fff; + border: 2px solid @cryptpad_color_blue; + border-radius: 0; + &:hover { + transform: scale(1.05); + } + } + .login { + background: transparent; + color: @cryptpad_color_blue; + padding: 0; + &:hover { + transform: scale(1.05); + } + } + } +} +.cp-container { + padding-top: 0; + min-height: 66vh; +} \ No newline at end of file diff --git a/customize.dist/src/less2/pages/page-privacy.less b/customize.dist/src/less2/pages/page-privacy.less new file mode 100644 index 000000000..59fa4b1fd --- /dev/null +++ b/customize.dist/src/less2/pages/page-privacy.less @@ -0,0 +1,5 @@ +@import (once) "../include/infopages.less"; +@import (once) "../include/colortheme.less"; + +.infopages_main(); +.infopages_topbar(); diff --git a/customize.dist/src/less2/pages/page-register.less b/customize.dist/src/less2/pages/page-register.less new file mode 100644 index 000000000..82c02edcd --- /dev/null +++ b/customize.dist/src/less2/pages/page-register.less @@ -0,0 +1,130 @@ +@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 { + .checkbox-container { + &:nth-of-type(1) { + margin-top: 2em; + } + &:last-of-type { + margin-bottom: 1em; + } + } + #register { + margin-top: 16px; + font-size: 1.25em; + min-width: 30%; // conflict? + width: 30%; + @media (max-width: 500px) { + width: 45%; + } + } + } + padding-bottom: 3em; + min-height: 5vh; +} +.alertify { + // workaround for alertify making empty p + p:empty { + display: none; + } +} +.cp-register-wel { + padding-top: 6em; + padding-bottom: 20em; + background-image: url(/customize/bkregister.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + h1 { + font-weight: 700; + color: #fff; + text-shadow: 0 1px 5px rgba(0,0,0,.2); + } +} +.cp-register-det { + margin-top: -7em; + background: #fff; + box-shadow: 0 5px 15px rgba(69,145,196, 0.3); + #data { + background: #4591C4; /* fallback for old browsers */ + background: -webkit-linear-gradient(to right, #FF7C4F, #4592C4); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient(to right, #FF7C4F, #4592C4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + padding-top: 3em; + padding-bottom: 7em; + padding-left: 30px; + padding-right: 30px; + p { + color: #fff; + li { + margin-bottom: 1em; + } + .fa { + font-size: 1.5em; + padding-right: 10px; + color: #000; + } + } + h3 { + font-weight: 700; + margin-bottom: 1em; + } + } + #userForm { + padding-top: 3em; + padding-bottom: 2em; + .form-control { + border-radius: 0; + color: @cryptpad_text_col; + margin-top: 1em; + &:focus { + border-color: @cryptpad_color_blue; + } + } + .checkbox-container { + color: @cryptpad_text_col; + } + } + .cp-login-register { + color: @cryptpad_color_blue; + background: #fff; + border: 2px solid @cryptpad_color_blue; + border-radius: 0; + &:hover { + transform: scale(1.05); + } + } +} +.cp-register-test { + margin-top: 3em; + hr { + width: 15rem; + border-top: 2px solid @cryptpad_color_blue; + margin-top: 0; + margin-bottom: 2em; + } + p { + margin-bottom: 0; + } + .cp-test-source { + font-style: italic; + } + .test-details { + padding-left: 4em; + background-image: url(/customize/testimonial.svg); + background-repeat: no-repeat; + background-position: left top; + background-size: 3em; + color: @cryptpad_text_col; + } + +} +#cp-main { + background: #fff; +} diff --git a/customize.dist/src/less2/pages/page-terms.less b/customize.dist/src/less2/pages/page-terms.less new file mode 100644 index 000000000..59fa4b1fd --- /dev/null +++ b/customize.dist/src/less2/pages/page-terms.less @@ -0,0 +1,5 @@ +@import (once) "../include/infopages.less"; +@import (once) "../include/colortheme.less"; + +.infopages_main(); +.infopages_topbar(); diff --git a/customize.dist/src/less2/pages/page-what-is-cryptpad.less b/customize.dist/src/less2/pages/page-what-is-cryptpad.less new file mode 100644 index 000000000..b57517a01 --- /dev/null +++ b/customize.dist/src/less2/pages/page-what-is-cryptpad.less @@ -0,0 +1,9 @@ +@import (once) "../include/infopages.less"; +@import (once) "../include/colortheme.less"; + +.infopages_main(); +.infopages_topbar(); + +img#zeroknowledge { + width: 100%; +} diff --git a/customize.dist/src/less2/readme.md b/customize.dist/src/less2/readme.md new file mode 100644 index 000000000..08a26ec9b --- /dev/null +++ b/customize.dist/src/less2/readme.md @@ -0,0 +1,20 @@ +# CryptPad Styling + +How it works: +* In this example, we use the index page, for each page we will have a corresponding class name and a corresponding less file. +* The index page has a main div containing everything `
` +* There is a corresponding less file called `less2/pages/page-index.less` +* Finally there is a corresponding line in main.less which imports that less file: `div#main.cp-page-index { @import "./pages/page-index.less"; }` + * cp-page-index class means: + * cp -> cryptpad + * page -> this is a style for accessing a page's less file + * index -> the name of the page and of the less file (page-index.less) +* And everything which is standardized across pages is included from `page-index.less` as variables and mixins. + +Rules: +* All of our new classes and ids should start with `cp-`. +* You may make as many files as you need, for different purposes, but they can only contain mixins and variables. +* All mixins and variables must be prefixed with the name of the file where they're defined and and underscore. + * e.g. `@colortheme_toolbar-poll-bg: #006304;` defined in `colortheme.less` +* All mixin / variable files go in an `/include/` directory. +* Document the meaning of your variable or mixin in a comment, consider that your mixin will be used by people other than you and if they do not have a definition of what it means, an update to it's style which seems logical to you might break their usage of it. \ No newline at end of file diff --git a/customize.dist/template.js b/customize.dist/template.js index 6c3361789..a9067f35f 100644 --- a/customize.dist/template.js +++ b/customize.dist/template.js @@ -3,50 +3,15 @@ define([ '/common/hyperscript.js', '/common/cryptpad-common.js', '/customize/pages.js', - '/api/config', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css', -], function ($, h, Cryptpad, Pages, Config) { +], function ($, h, Cryptpad, Pages) { $(function () { - var urlArgs = Config.requireConf.urlArgs; - var Messages = Cryptpad.Messages; var $body = $('body'); var isMainApp = function () { return /^\/(pad|code|slide|poll|whiteboard|file|media|contacts|drive|settings|profile|todo)\/$/.test(location.pathname); }; - var rightLink = function (ref, loc, txt) { - return h('span.link.right', [ - h('a', { href: ref, 'data-localization': loc}, txt) - ]); - }; - - var $topbar = $(h('div#cryptpadTopBar', [ - h('span', [ - h('a.gotoMain', {href: '/'}, [ - h('img.cryptpad-logo', { - src: '/customize/cryptofist_mini.png?' + urlArgs, - alt: '', - }), - 'CryptPad' - ]) - ]), - h('span#user-menu.right.dropdown-bar'), - h('span#language-selector.right.dropdown-bar'), - - rightLink('/about.html', 'about', 'About'), - rightLink('/privacy.html', 'privacy', 'Privacy'), - rightLink('/terms.html', 'terms', 'ToS'), - rightLink('/contact.html', 'contact', 'Contact'), - rightLink('https://blog.cryptpad.fr/', 'blog', 'Blog'), - h('span.link.right', [ - h('button#upgrade.upgrade.btn.buttonSuccess', { - style: { display: 'none' } - }) - ]) - ] - )); - var infoPage = function () { return h('div#mainBlock.hidden', typeof(Pages[location.pathname]) === 'function'? Pages[location.pathname](): [h('div#container')]); @@ -54,67 +19,6 @@ $(function () { var $main = $(infoPage()); - var footerCol = function (title, L, literal) { - return h('div.col', [ - h('ul.list-unstyled', [ - h('li.title', { - 'data-localization': title, - }, title? Messages[title]: literal ) - ].concat(L.map(function (l) { - return h('li', [ l ]); - })) - ) - ]); - }; - - var footLink = function (ref, loc, text) { - var attrs = { - href: ref, - }; - if (!/^\//.test(ref)) { - attrs.target = '_blank'; - attrs.rel = 'noopener noreferrer'; - } - if (loc) { - attrs['data-localization'] = loc; - text = Messages[loc]; - } - return h('a', attrs, text); - }; - - var $footer = $(h('footer', [ - h('div.container', [ - h('div.row', [ - footerCol(null, [ - footLink('/about.html', 'about'), - footLink('/terms.html', 'terms'), - footLink('/privacy.html', 'privacy'), - ], 'CryptPad'), - footerCol('footer_applications', [ - footLink('/drive/', 'main_drive'), - footLink('/pad/', 'main_richText'), - footLink('/code/', 'main_code'), - footLink('/slide/', 'main_slide'), - footLink('/poll/', 'main_poll'), - footLink('/whiteboard/', null, Messages.type.whiteboard) - ]), - footerCol('footer_aboutUs', [ - footLink('https://blog.cryptpad.fr', 'blog'), - footLink('https://labs.xwiki.com', null, 'XWiki Labs'), - footLink('http://www.xwiki.com', null, 'XWiki SAS'), - footLink('https://www.open-paas.org', null, 'OpenPaaS') - ]), - footerCol('footer_contact', [ - footLink('https://riot.im/app/#/room/#cryptpad:matrix.org', null, 'Chat'), - footLink('https://twitter.com/cryptpad', null, 'Twitter'), - footLink('https://github.com/xwiki-labs/cryptpad', null, 'GitHub'), - footLink('/contact.html', null, 'Email') - ]) - ]) - ]), - h('div.version-footer', "CryptPad v1.12.0 (Minotaur)") - ])); - var pathname = location.pathname; if (isMainApp()) { @@ -174,13 +78,24 @@ $(function () { return; } + } else { + // add class on info-pages + var css = location.pathname.replace(/(index)?\.html$/gi, "") // .html + .replace(/[^a-zA-Z]+/gi, '-') // any non-alpha character + .replace(/^-|-$/g, ''); // starting/trailing dashes + if (css === '') + { + css = 'index'; + } + $('body').addClass('cp-page-' + css); } require([ - 'less!/customize/src/less/cryptpad.less', + 'less!/customize/src/less2/main.less', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', + '/bower_components/bootstrap/dist/js/bootstrap.min.js' ], function () { - $body.append($topbar).append($main).append($footer); + $body.append($main); if (/^\/user\//.test(pathname)) { require([ '/user/main.js'], function () {}); diff --git a/customize.dist/testimonial.svg b/customize.dist/testimonial.svg new file mode 100644 index 000000000..4c1b0074e --- /dev/null +++ b/customize.dist/testimonial.svg @@ -0,0 +1,19 @@ + + + + +testimonial + + + + + + + diff --git a/customize.dist/translations/messages.es.js b/customize.dist/translations/messages.es.js index 65afe91f0..82e7fc0a9 100644 --- a/customize.dist/translations/messages.es.js +++ b/customize.dist/translations/messages.es.js @@ -104,7 +104,7 @@ define(function () { out.main_p2 = 'Este proyecto utiliza el editor de texto visual CKEditor, CodeMirror, y el motor en tiempo real ChainPad.'; out.main_howitworks = '¿Cómo funciona?'; out.main_howitworks_p1 = "CryptPad utiliza una variante del algoritmo de transformación operacional (página en inglés) que es capaz de encontrar un consenso distribuido usando un Blockchain Nakamoto (página en inglés), popularizado por Bitcoin. De esta manera el algoritmo puede evitar la necesidad de un servidor central para resolver conflictos de edición de la transformación operacional y sin necesidad de resolver conflictos, el servidor puede mantenerse inconsciente del contenido que se está editando en el pad."; - out.main_about_p2 = 'Si tienes preguntas o comentarios, puedes enviarnos un tweet, abrir un issue en GitHub, saludarnos en nuestro canal IRC (irc.freenode.net), o envíanos un email.'; + out.main_about_p2 = 'Si tienes preguntas o comentarios, puedes enviarnos un tweet, abrir un issue en GitHub. saludarnos en nuestro canal Matrix o en IRC (#cryptpad on irc.freenode.net), o envianos un email.'; out.button_newpad = 'Crear nuevo pad de texto enriquecido'; out.button_newcode = 'Crear nuevo pad de código'; @@ -291,7 +291,7 @@ define(function () { out.blog = "Blog"; out.initialState = [ - '

', + '

', 'Esto es CryptPad, el editor colaborativo en tiempo real Zero Knowledge. Todo está guardado cuando escribes.', '
', 'Comparte el enlace a este pad para editar con amigos o utiliza el botón  Compartir  para obtener un enlace sólo lectura que permite leer pero no escribir.', @@ -299,13 +299,13 @@ define(function () { '

', 'Vamos, empieza a escribir...', - '

', + '

', '

 

' ].join(''); out.codeInitialState = "/*\n Esto es CryptPad, el editor colaborativo en tiempo real zero knowledge.\n Lo que escribes aquí está cifrado de manera que sólo las personas con el enlace pueden acceder a ello.\n Incluso el servidor no puede ver lo que escribes.\n Lo que ves aquí, lo que escuchas aquí, cuando sales, se queda aquí\n*/"; out.slideInitialState = "# CryptSlide\n* Esto es CryptPad, el editor colaborativo en tiempo real zero knowledge.\n* Lo que escribes aquí está cifrado de manera que sólo las personas con el enlace pueden acceder a ello.\n* Incluso el servidor no puede ver lo que escribes.\n* Lo que ves aquí, lo que escuchas aquí, cuando sales, se queda aquí\n\n---\n# Cómo utilizarlo\n1. Escribe tu contenido en Markdown\n - Puedes aprender más sobre Markdown [aquí](http://www.markdowntutorial.com/)\n2. Separa tus diapositivas con ---\n3. Haz clic en \"Presentar\" para ver el resultado - Tus diapositivas se actualizan en tiempo real"; - out.driveReadmeTitle = "¿Qué es CryptDrive?"; + out.driveReadmeTitle = "¿Qué es CryptPad?"; out.readme_welcome = "¡Bienvenido a CryptPad!"; out.readme_p1 = "Bienvenido a CryptPad, aquí podrás anotar cosas solo o con otra gente."; out.readme_p2 = "Este pad es una guía rápida para aprender a usar a CryptPad para tomar notas, organizarlas y trabajar con más personas."; @@ -554,5 +554,30 @@ define(function () { out.todo_markAsCompleteTitle = "Marcar esta tarea como completa"; out.todo_markAsIncompleteTitle = "Marcar esta tarea como incompleta"; out.todo_removeTaskTitle = "Borrar esta tarea de la lista"; + + // 1.13.0 - Naiad + out.topbar_whatIsCryptpad = "Qué es CryptPad"; + out.header_homeTitle = "Volver a la página de inicio"; + out.userListButton = "Lista de usuarios"; + out.userAccountButton = "Tu cuenta"; + out.canvas_saveToDrive = "Guardar esta imagen como archivo en tu CryptDrive"; + out.canvas_currentBrush = "Pincel actual"; + out.canvas_chooseColor = "Eligir un color"; + out.fm_viewListButton = "Lista"; + out.fm_viewGridButton = "Cuadrícula"; + out.settings_cat_code = "Código"; + out.settings_codeIndentation = "Indentación del editor de código (espacios)"; + out.settings_codeUseTabs = "Utilizar tabulaciones en vez de espacios"; + out.pad_showToolbar = "Mostrar la barra de herramientas"; + out.pad_hideToolbar = "Esconder la barra de herramientas"; + out.main_catch_phrase = "El Cloud Zero Knowledge"; + out.main_richTextPad = "Pad de Texto Enriquecido"; + out.main_codePad = "Pad de Código"; + out.main_slidePad = "Presentación Markdown"; + out.main_pollPad = "Encuesta"; + out.main_whiteboardPad = "Pizarra"; + out.main_localPads = "Pad Locales"; + out.main_yourCryptDrive = "Tu CryptDrive"; + return out; }); diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index a63196f95..ed955b373 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -116,6 +116,10 @@ define(function () { out.shareButton = 'Partager'; out.shareSuccess = 'Lien copié dans le presse-papiers'; + out.userListButton = "Liste d'utilisateurs"; + + out.userAccountButton = "Votre compte"; + out.newButton = 'Nouveau'; out.newButtonTitle = 'Créer un nouveau pad'; out.uploadButton = 'Importer des fichiers'; @@ -240,10 +244,13 @@ define(function () { out.canvas_delete = "Supprimer la sélection"; out.canvas_disable = "Désactiver le dessin"; out.canvas_enable = "Activer le dessin"; - out.canvas_width = "Épaisseur"; + out.canvas_width = "Taille"; out.canvas_opacity = "Opacité"; - out.canvas_opacityLabel = "opacité: {0}"; - out.canvas_widthLabel = "taille: {0}"; + out.canvas_opacityLabel = "Opacité: {0}"; + out.canvas_widthLabel = "Taille: {0}"; + out.canvas_saveToDrive = "Sauvegarder cette image en tant que fichier dans CryptDrive"; + out.canvas_currentBrush = "Pinceau actuel"; + out.canvas_chooseColor = "Choisir une couleur"; // Profile out.profileButton = "Profil"; // dropdown menu @@ -257,6 +264,9 @@ define(function () { out.profile_description = "Description"; out.profile_fieldSaved = 'Nouvelle valeur enregistrée: {0}'; + out.profile_inviteButton = "Inviter"; + out.profile_inviteButtonTitle = 'Créer un lien pour inviter cet utilisateur à se connecter avec vous.'; + out.profile_inviteExplanation = "Cliquer sur OK créera un lien vers une session de messagerie sécurisée uniquement accessible par {0}.

Le lien peut être copié et partagé de manière publique."; out.profile_viewMyProfile = "Voir mon profil"; // contacts/userlist @@ -338,6 +348,8 @@ define(function () { out.fm_backup_title = 'Lien de secours'; out.fm_nameFile = 'Comment souhaitez-vous nommer ce fichier ?'; out.fm_error_cantPin = "Erreur interne du serveur. Veuillez recharger la page et essayer de nouveau."; + out.fm_viewListButton = "Liste"; + out.fm_viewGridButton = "Grille"; // File - Context menu out.fc_newfolder = "Nouveau dossier"; out.fc_rename = "Renommer"; @@ -383,8 +395,6 @@ define(function () { out.login_invalPass = 'Mot de passe requis'; out.login_unhandledError = "Une erreur inattendue s'est produite :("; - out.login_notRegistered = 'Pas encore inscrit ?'; - out.register_importRecent = "Importer l'historique (Recommendé)"; out.register_acceptTerms = "J'accepte les conditions d'utilisation"; out.register_passwordsDontMatch = "Les mots de passe doivent être identiques!"; @@ -403,11 +413,12 @@ define(function () { "
  • Vous pouvez importer les pads récents de ce navigateur pour les avoir dans votre compte utilisateur.
  • ", "
  • Si vous utilisez un ordinateur partagé, vous devez vous déconnecter avant de partir, fermer l'onglet n'est pas suffisant.
  • ", "" - ]; + ].join(''); // Settings out.settings_cat_account = "Compte"; out.settings_cat_drive = "CryptDrive"; + out.settings_cat_code = "Code"; out.settings_title = "Préférences"; out.settings_save = "Sauver"; @@ -454,6 +465,9 @@ define(function () { out.settings_logoutEverywhere = "Se déconnecter de force de toutes les autres sessions."; out.settings_logoutEverywhereConfirm = "Êtes-vous sûr ? Vous devrez vous reconnecter sur tous vos autres appareils."; + out.settings_codeIndentation = "Indentation dans l'éditeur de code (nombre d'espaces)"; + out.settings_codeUseTabs = "Utiliser des tabulations au lieu d'espaces"; + out.upload_title = "Hébergement de fichiers"; out.upload_serverError = "Erreur interne: impossible d'importer le fichier pour l'instant."; out.upload_uploadPending = "Vous avez déjà un fichier en cours d'importation. Souhaitez-vous l'annuler et importer ce nouveau fichier ?"; @@ -473,10 +487,14 @@ define(function () { out.todo_title = "CryptTodo"; out.todo_newTodoNamePlaceholder = "Décrivez votre tâche..."; out.todo_newTodoNameTitle = "Ajouter cette tâche à votre liste"; - out.todo_markAsCompleteTitle = "Marquer tâche comme terminée"; - out.todo_markAsIncompleteTitle = "Marquer tâche comme non incomplète"; + out.todo_markAsCompleteTitle = "Marquer cette tâche comme terminée"; + out.todo_markAsIncompleteTitle = "Marquer cette tâche comme incomplète"; out.todo_removeTaskTitle = "Enlever cette tâche de votre liste"; + // pad + out.pad_showToolbar = "Afficher la barre d'outils"; + out.pad_hideToolbar = "Cacher la barre d'outils"; + // general warnings out.warn_notPinned = "Ce pad n'est stocké dans aucun CryptDrive. Il va expirer après 3 mois d'inactivité. En savoir plus..."; @@ -486,9 +504,10 @@ define(function () { out.main_p2 = 'Ce projet utilise l\'éditeur visuel (WYSIWYG) CKEditor, l\'éditeur de code source CodeMirror, et le moteur temps-réel ChainPad.'; out.main_howitworks_p1 = 'CryptPad utilise une variante de l\'algorithme d\'Operational transformation qui est capable de trouver un consensus distribué en utilisant une chaîne de bloc Nakamoto, un outil popularisé par le Bitcoin. 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.'; //contact.html - out.main_about_p2 = 'Si vous avez des questions ou commentaires, vous pouvez nous tweeter, ouvrir une issue sur Github, venir dire bonjour sur IRC (irc.freenode.net), ou nous envoyer un email.'; + out.main_about_p2 = 'Si vous avez des questions ou commentaires, vous pouvez nous tweeter, ouvrir une issue sur GitHub, venir dire bonjour sur notre salle Matrix ou IRC (#cryptpad sur irc.freenode.net), ou bien encore nous envoyer un email.'; - out.main_info = "

    Collaborez avec confiance


    Développez vos idées en groupe avec des document partagés; la technologie Zero Knowledge sécurise vos données."; + out.main_info = "

    Collaborez avec confiance


    Développez vos idées en groupe avec des documents partagés; la technologie Zero Knowledge sécurise vos données."; + out.main_catch_phrase = "Le Cloud Zero Knowledge"; out.main_howitworks = 'Comment ça fonctionne'; out.main_zeroKnowledge = 'Zero Knowledge'; @@ -510,6 +529,15 @@ define(function () { out.main_poll_p = 'Plannifiez vos réunions ou évènements, ou votez pour la meilleure solution concernant votre problème.'; out.main_drive = 'CryptDrive'; + out.main_richTextPad = 'Pad de Texte Riche'; + out.main_codePad = 'Pad de Code'; + out.main_slidePad = 'Présentation Markdown'; + out.main_pollPad = 'Sondage ou Planning'; + out.main_whiteboardPad = 'Tableau blanc'; + out.main_localPads = 'Pads Locaux'; + out.main_yourCryptDrive = 'Votre CryptDrive'; + out.main_footerText = "Avec CryptPad, vous pouvez créer des documents collaboratifs rapidement pour prendre des notes à plusieurs."; + out.footer_applications = "Applications"; out.footer_contact = "Contact"; out.footer_aboutUs = "À propos"; @@ -520,6 +548,8 @@ define(function () { out.terms = "Conditions"; out.blog = "Blog"; + out.topbar_whatIsCryptpad = "Qu'est-ce que CryptPad"; + // privacy.html out.policy_title = 'Politique de confidentialité de CryptPad'; @@ -560,11 +590,12 @@ define(function () { out.header_support = ' OpenPaaS-ng'; out.updated_0_header_logoTitle = 'Retourner vers votre CryptDrive'; out.header_logoTitle = out.updated_0_header_logoTitle; + out.header_homeTitle = "Aller sur la page d'accueil"; // Initial states out.initialState = [ - '

    ', + '

    ', 'Voici CryptPad, l\'éditeur collaboratif en temps-réel Zero Knowledge. Tout est sauvegardé dés que vous le tapez.', '
    ', 'Partagez le lien vers ce pad avec des amis ou utilisez le bouton  Partager  pour obtenir le lien de lecture-seule, qui permet la lecture mais non la modification.', @@ -572,7 +603,7 @@ define(function () { '

    ', '', 'Lancez-vous, commencez à taper...', - '

    ', + '

    ', '

     

    ' ].join(''); @@ -600,7 +631,7 @@ define(function () { ' - La présentation est mise à jour en temps-réel' ].join(''); - out.driveReadmeTitle = "Qu'est-ce que CryptDrive ?"; + out.driveReadmeTitle = "Qu'est-ce que CryptPad ?"; out.readme_welcome = "Bienvenue dans CryptPad !"; out.readme_p1 = "Bienvenue dans CryptPad, le lieu où vous pouvez prendre des notes seul ou avec des amis."; out.readme_p2 = "Ce pad va vous donner un aperçu de la manière dont vous pouvez utiliser CryptPad pour prendre des notes, les organiser et travailler en groupe sur celles-ci."; diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 9cceee9ff..262f9890c 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -118,6 +118,10 @@ define(function () { out.shareButton = 'Share'; out.shareSuccess = 'Copied link to clipboard'; + out.userListButton = "User list"; + + out.userAccountButton = "Your account"; + out.newButton = 'New'; out.newButtonTitle = 'Create a new pad'; out.uploadButton = 'Upload files'; @@ -244,8 +248,11 @@ define(function () { out.canvas_enable = "Enable draw"; out.canvas_width = "Width"; out.canvas_opacity = "Opacity"; - out.canvas_opacityLabel = "opacity: {0}"; + out.canvas_opacityLabel = "Opacity: {0}"; out.canvas_widthLabel = "Width: {0}"; + out.canvas_saveToDrive = "Save this image as a file in your CryptDrive"; + out.canvas_currentBrush = "Current brush"; + out.canvas_chooseColor = "Choose a color"; // Profile out.profileButton = "Profile"; // dropdown menu @@ -329,10 +336,10 @@ define(function () { out.updated_0_fm_info_trash = 'Empty your trash to free space in your CryptDrive.'; out.fm_info_trash = out.updated_0_fm_info_trash; out.fm_info_allFiles = 'Contains all the files from "Documents", "Unsorted" and "Trash". You can\'t move or remove files from here.'; // Same here - out.fm_info_anonymous = 'You are not logged in so these pads may be deleted (find out why). ' + + out.fm_info_anonymous = 'You are not logged in so your pads will expire after 3 months (find out more). ' + 'Sign up or Log in to keep them alive.'; out.fm_alert_backupUrl = "Backup link for this drive.
    " + - "It is highly recommended that you keep ip for yourself only.
    " + + "It is highly recommended that you keep it secret.
    " + "You can use it to retrieve all your files in case your browser memory got erased.
    " + "Anybody with that link can edit or remove all the files in your file manager.
    "; out.fm_alert_anonymous = "Hello there, you are currently using CryptPad anonymously, that's ok but your pads may be deleted after a period of " + @@ -342,6 +349,8 @@ define(function () { out.fm_backup_title = 'Backup link'; out.fm_nameFile = 'How would you like to name that file?'; out.fm_error_cantPin = "Internal server error. Please reload the page and try again."; + out.fm_viewListButton = "List view"; + out.fm_viewGridButton = "Grid view"; // File - Context menu out.fc_newfolder = "New folder"; out.fc_rename = "Rename"; @@ -387,8 +396,6 @@ define(function () { out.login_invalPass = 'Password required'; out.login_unhandledError = 'An unexpected error occurred :('; - out.login_notRegistered = 'Not registered?'; - out.register_importRecent = "Import pad history (Recommended)"; out.register_acceptTerms = "I accept the terms of service"; out.register_passwordsDontMatch = "Passwords do not match!"; @@ -397,13 +404,15 @@ define(function () { out.register_header = "Welcome to CryptPad"; out.register_explanation = [ - "

    Lets go over a couple things first

    ", - "