wip
Caleb James DeLisle
7 years ago
parent
ffb5e555a0
commit
8404017af1
Binary file not shown.
|
After Width: | Height: | Size: 848 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 366 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 347 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 368 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@ -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;
|
||||
}
|
||||
@ -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.
|
||||
Loading…
Reference in New Issue