web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Caleb James DeLisle
2017-07-22 16:43:53 +02:00
parent ffb5e555a0
commit 8404017af1
19 changed files with 268 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
customize.dist/src/less/page-index.less
View File

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

48
customize.dist/src/less/variables.less
View File

@@ -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;

32
customize.dist/src/less2/include/colortheme.less Normal file
View File

@@ -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;

58
customize.dist/src/less2/include/infopages.less Normal file
View File

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

2
customize.dist/src/less2/main.less Normal file
View File

@@ -0,0 +1,2 @@
@import url('https://fonts.googleapis.com/css?family=Roboto');
div#cp-main.cp-page-index { @import "./pages/page-index.less"; }

82
customize.dist/src/less2/pages/page-index.less Normal file
View File

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

20
customize.dist/src/less2/readme.md Normal file
View File

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