wip
After Width: | Height: | Size: 848 KiB |
After Width: | Height: | Size: 366 KiB |
After Width: | Height: | Size: 347 KiB |
After Width: | Height: | Size: 368 KiB |
After Width: | Height: | Size: 4.7 MiB |
After Width: | Height: | Size: 42 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 40 KiB |
After Width: | Height: | Size: 26 KiB |
|
@ -238,36 +238,54 @@ define([
|
|||
];
|
||||
};
|
||||
|
||||
var infopageTopbar = function () {
|
||||
return h('div.cp-topbar',
|
||||
h('div.cp-left',
|
||||
h('a', { href: '/zeroknowledge.html'}, 'TODO What is Zero Knowledge'),
|
||||
h('a', { href: 'https://blog.cryptpad.fr/'}, 'TODO Blog'),
|
||||
h('a', { href: '/contact.html'}, 'TODO Contact'),
|
||||
h('a', { href: '/about.html'}, 'TODO About')
|
||||
),
|
||||
h('div.cp-right',
|
||||
h('a', { href: '/register'}, 'TODO Register'),
|
||||
h('a', { href: '/login'}, 'TODO Log in')
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Pages['/'] = Pages['/index.html'] = function () {
|
||||
return [
|
||||
h('div#main.page-index', [
|
||||
h('div.mainOverlay'),
|
||||
h('div#align-container', [
|
||||
h('div#main-container.container', [
|
||||
h('div.row', [
|
||||
h('div#data.hidden.title.col-xs-6', [
|
||||
h('h1', 'CryptPad'),
|
||||
h('p', Msg.main_catch_phrase)
|
||||
h('div#cp-main.cp-page-index', [
|
||||
infopageTopbar(),
|
||||
h('div.container', [
|
||||
h('div.row', [
|
||||
h('div.cp-title.col-6.col-xs-6', [
|
||||
h('img', { src: '/customize/cryptpad-new-logo-big-white-logoonly.png?' + urlArgs }),
|
||||
h('h1', 'CryptPad'),
|
||||
h('p', Msg.main_catch_phrase)
|
||||
]),
|
||||
/*userForm(),*/
|
||||
h('div.col-6.col-xs-6', [
|
||||
h('div.bs-callout.cp-callout-pad', [
|
||||
h('h4', 'TODO Rich Text Pad'),
|
||||
// "TODO Collaborate in realtime on notes and ideas."
|
||||
]),
|
||||
/*userForm(),*/
|
||||
h('div.col-xs-6', [
|
||||
"Make a pad, no login needed",
|
||||
h('div.bs-callout.bs-callout-pad', [
|
||||
h('h4', 'Rich Text Pad'),
|
||||
"Collaborate in Real time on notes and ideas."
|
||||
]),
|
||||
h('div.bs-callout.bs-callout-code', [
|
||||
h('h4', 'Markdown/code Pad'),
|
||||
"Edit Markdown with realtime visual rendering."
|
||||
]),
|
||||
h('div.bs-callout.bs-callout-slide', [
|
||||
h('h4', 'Markdown Presentation'),
|
||||
"Make quick presentations with Markdown slides."
|
||||
]),
|
||||
])
|
||||
h('div.bs-callout.cp-callout-code', [
|
||||
h('h4', 'TODO Markdown/Code Pad'),
|
||||
// "TODO Edit Markdown with realtime visual rendering."
|
||||
]),
|
||||
h('div.bs-callout.cp-callout-slide', [
|
||||
h('h4', 'TODO Markdown Presentation'),
|
||||
// "TODO Make quick presentations with Markdown slides."
|
||||
]),
|
||||
/*h('div.bs-callout.cp-callout-recent', [
|
||||
h('h4', 'TODO Your Recent Pads'),
|
||||
/// "TODO See pads recently edited on this computer."
|
||||
]),*/
|
||||
])
|
||||
])
|
||||
]),
|
||||
//h('footer.cp-more', "More")
|
||||
])
|
||||
];
|
||||
//.concat(tryIt());
|
||||
|
|
|
@ -1,97 +0,0 @@
|
|||
@import (once) "./variables.less";
|
||||
div#data.title {
|
||||
margin-top: 8rem;
|
||||
h1 {
|
||||
//font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif;
|
||||
font-family: "Raleway";
|
||||
font-size: 65px;
|
||||
}
|
||||
p {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bs-callout {
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
border: 1px solid #eee;
|
||||
border-left-width: 5px;
|
||||
border-radius: 3px;
|
||||
background:white;
|
||||
}
|
||||
.bs-callout h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.bs-callout p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.bs-callout code {
|
||||
border-radius: 3px;
|
||||
}
|
||||
.bs-callout+.bs-callout {
|
||||
margin-top: -5px;
|
||||
}
|
||||
.bs-callout-default {
|
||||
border-left-color: #777;
|
||||
}
|
||||
.bs-callout-default h4 {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
|
||||
.bs-callout-pad {
|
||||
border-left-color: @toolbar-pad-bg;
|
||||
}
|
||||
.bs-callout-pad h4 {
|
||||
color: @toolbar-pad-bg;
|
||||
}
|
||||
|
||||
.bs-callout-code {
|
||||
border-left-color: @toolbar-code-bg;
|
||||
}
|
||||
.bs-callout-code h4 {
|
||||
color: @toolbar-code-bg;
|
||||
}
|
||||
|
||||
.bs-callout-pad {
|
||||
border-left-color: @toolbar-pad-bg;
|
||||
}
|
||||
.bs-callout-pad h4 {
|
||||
color: @toolbar-pad-bg;
|
||||
}
|
||||
|
||||
.bs-callout-slide {
|
||||
border-left-color: @toolbar-slide-bg;
|
||||
}
|
||||
.bs-callout-slide h4 {
|
||||
color: @toolbar-slide-bg;
|
||||
}
|
||||
|
||||
|
||||
.bs-callout-success {
|
||||
border-left-color: #5cb85c;
|
||||
}
|
||||
.bs-callout-success h4 {
|
||||
color: #5cb85c;
|
||||
}
|
||||
.bs-callout-danger {
|
||||
border-left-color: #d9534f;
|
||||
}
|
||||
.bs-callout-danger h4 {
|
||||
color: #d9534f;
|
||||
}
|
||||
.bs-callout-warning {
|
||||
border-left-color: #f0ad4e;
|
||||
}
|
||||
.bs-callout-warning h4 {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
.bs-callout-info {
|
||||
border-left-color: #5bc0de;
|
||||
}
|
||||
.bs-callout-info h4 {
|
||||
color: #5bc0de;
|
||||
}
|
|
@ -1,3 +1,5 @@
|
|||
@import (once) '../less2/include/colortheme.less';
|
||||
|
||||
@base: #fff; //#f5f5f5;
|
||||
@dark-base: darken(@base, 20%);
|
||||
@less-dark-base: darken(@base, 10%);
|
||||
|
@ -85,28 +87,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-color: @colortheme_pad-bg;
|
||||
@toolbar-pad-color: @colortheme_pad-color;
|
||||
@toolbar-slide-color: @colortheme_slide-bg;
|
||||
@toolbar-slide-color: @colortheme_slide-color;
|
||||
@toolbar-code-color: @colortheme_code-bg;
|
||||
@toolbar-code-color: @colortheme_code-color;
|
||||
@toolbar-poll-color: @colortheme_poll-bg;
|
||||
@toolbar-poll-color: @colortheme_poll-color;
|
||||
@toolbar-whiteboard-color: @colortheme_whiteboard-bg;
|
||||
@toolbar-whiteboard-color: @colortheme_whiteboard-color;
|
||||
@toolbar-drive-color: @colortheme_drive-bg;
|
||||
@toolbar-drive-color: @colortheme_drive-color;
|
||||
@toolbar-file-color: @colortheme_file-bg;
|
||||
@toolbar-file-color: @colortheme_file-color;
|
||||
@toolbar-friends-color: @colortheme_friends-bg;
|
||||
@toolbar-friends-color: @colortheme_friends-color;
|
||||
@toolbar-default-color: @colortheme_default-bg;
|
||||
@toolbar-default-color: @colortheme_default-color;
|
||||
@toolbar-settings-color: @colortheme_settings-bg;
|
||||
@toolbar-settings-color: @colortheme_settings-color;
|
||||
@toolbar-profile-color: @colortheme_profile-bg;
|
||||
@toolbar-profile-color: @colortheme_profile-color;
|
||||
|
||||
|
||||
@topbar-back: #fff;
|
||||
|
@ -123,7 +125,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;
|
||||
|
||||
|
|
|
@ -0,0 +1,32 @@
|
|||
@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;
|
|
@ -0,0 +1,58 @@
|
|||
// Basic setup for info pages, this should be used at the global level
|
||||
.infopages_main () {
|
||||
min-height: 100vh;
|
||||
background-color: #FAFAFA;
|
||||
|
||||
a {
|
||||
color: #FFF;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
font-size: 14px;
|
||||
font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
};
|
||||
|
||||
// Apply this to the top bar div
|
||||
.infopages_topbar () {
|
||||
.cp-topbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
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;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 0.6em;
|
||||
color: #FFF;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,2 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Roboto');
|
||||
div#cp-main.cp-page-index { @import "./pages/page-index.less"; }
|
|
@ -0,0 +1,82 @@
|
|||
//@import (once) "./variables.less";
|
||||
|
||||
@import (once) "../include/infopages.less";
|
||||
@import (once) "../include/colortheme.less";
|
||||
|
||||
|
||||
.infopages_main();
|
||||
.infopages_topbar();
|
||||
|
||||
@background: rgba(0,0,0,0.2);
|
||||
&#cp-main {
|
||||
color: #FFF;
|
||||
background: linear-gradient( @background, @background ), url('/customize/bg8.jpg');
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cp-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
img {
|
||||
height: 30vh;
|
||||
}
|
||||
margin-left: 0;
|
||||
h1 {
|
||||
font-family: "Roboto";
|
||||
//font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif;
|
||||
//font-family: "Raleway";
|
||||
font-size: 65px;
|
||||
}
|
||||
p {
|
||||
//font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
font-size: 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bs-callout {
|
||||
padding: 15px;
|
||||
margin: 25px 0;
|
||||
border: 1px solid #eee;
|
||||
border-left-width: 5px;
|
||||
border-radius: 3px;
|
||||
background:rgba(255,255,255,0.6);
|
||||
color: black;
|
||||
transition: all .1s ease-in-out;
|
||||
}
|
||||
.bs-callout h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.bs-callout p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.bs-callout+.bs-callout {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.bs-callout:hover {
|
||||
//background:rgba(255,255,255,0.8);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.cp-callout-pad { border-left-color: @colortheme_pad-bg; }
|
||||
//.cp-callout-pad h4 { color: @colortheme_pad-bg; }
|
||||
|
||||
.cp-callout-code { border-left-color: @colortheme_code-bg; }
|
||||
//.cp-callout-code h4 { color: @colortheme_code-bg; }
|
||||
|
||||
.cp-callout-pad { border-left-color: @colortheme_pad-bg; }
|
||||
//.cp-callout-pad h4 { color: @colortheme_pad-bg; }
|
||||
|
||||
.cp-callout-slide { border-left-color: @colortheme_slide-bg; }
|
||||
//.cp-callout-slide h4 { color: @colortheme_slide-bg; }
|
||||
|
||||
.cp-callout-recent { border-left-color: @colortheme_drive-bg; }
|
||||
//.cp-callout-recent h4 { color: @colortheme_drive-bg; }
|
|
@ -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 `<div id="cp-main" class="cp-page-index">`
|
||||
* 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.
|
|
@ -174,9 +174,14 @@ $(function () {
|
|||
}
|
||||
|
||||
require([
|
||||
'less!/customize/src/less/cryptpad.less',
|
||||
'less!/customize/src/less2/main.less',
|
||||
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
||||
], function () {
|
||||
if (pathname === '/') {
|
||||
// TODO(cjd): This is a hack because the template system doesn't make it easy.
|
||||
$body.append($main);
|
||||
return;
|
||||
}
|
||||
$body.append($topbar).append($main).append($footer);
|
||||
|
||||
if (/^\/user\//.test(pathname)) {
|
||||
|
|
|
@ -32,7 +32,7 @@ var setHeaders = (function () {
|
|||
if (typeof(config.httpHeaders) !== 'object') { return function () {}; }
|
||||
|
||||
const headers = clone(config.httpHeaders);
|
||||
if (config.contentSecurity) {
|
||||
if (config.contentSecurity && false) {
|
||||
headers['Content-Security-Policy'] = clone(config.contentSecurity);
|
||||
if (!/;$/.test(headers['Content-Security-Policy'])) { headers['Content-Security-Policy'] += ';' }
|
||||
if (headers['Content-Security-Policy'].indexOf('frame-ancestors') === -1) {
|
||||
|
|