Merge remote-tracking branch 'origin/fix-#254' into fix-#254
MTRNord
6 years ago
commit
7e686a065e
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="cptools" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="" glyph-name="template" horiz-adv-x="876" d="M804.244 960h-732.699c-39.513 0-71.545-32.032-71.545-71.545v0-880.909c0-39.513 32.032-71.545 71.545-71.545v0h732.699c39.513 0 71.545 32.032 71.545 71.545v0 880.909c0 39.513-32.032 71.545-71.545 71.545v0zM808.421 7.545c0-2.307-1.87-4.177-4.177-4.177v0h-732.699c-2.307 0-4.177 1.87-4.177 4.177v0 880.909c0 2.307 1.87 4.177 4.177 4.177v0h732.699c2.307 0 4.177-1.87 4.177-4.177v0zM107.789 852.211h660.211v-256h-660.211v256zM107.789 555.789h269.474v-256h-269.474v256zM417.684 70.737h350.316v-26.947h-350.316v26.947zM417.684 133.659h350.316v-26.947h-350.316v26.947zM417.684 196.446h350.316v-26.947h-350.316v26.947zM417.684 259.368h350.316v-26.947h-350.316v26.947zM417.684 555.789h350.316v-26.947h-350.316v26.947zM417.684 498.526h350.316v-26.947h-350.316v26.947zM417.684 441.263h350.316v-26.947h-350.316v26.947zM417.684 384h350.316v-26.947h-350.316v26.947zM417.684 326.737h350.316v-26.947h-350.316v26.947zM107.789 259.368h269.474v-215.579h-269.474v215.579z" />
|
||||
<glyph unicode="" glyph-name="new-template" horiz-adv-x="920" d="M103.696 856.304h635.139v-246.278h-635.139v246.278zM103.696 571.139h259.241v-246.278h-259.241v246.278zM401.823 165.039h337.013v-25.924h-337.013v25.924zM401.823 225.442h337.013v-25.924h-337.013v25.924zM401.823 285.975h337.013v-25.924h-337.013v25.924zM401.823 571.139h337.013v-25.924h-337.013v25.924zM401.823 516.051h337.013v-25.924h-337.013v25.924zM401.823 460.962h337.013v-25.924h-337.013v25.924zM401.823 405.873h337.013v-25.924h-337.013v25.924zM401.823 350.785h337.013v-25.924h-337.013v25.924zM103.696 285.975h259.241v-207.392h-259.241v207.392zM842.532 140.152v751.020c0 38.013-30.816 68.828-68.828 68.828v0h-704.875c-38.013 0-68.828-30.816-68.828-68.828v0-847.457c0-38.013 30.816-68.828 68.828-68.828v0h666.896c19.163-23.765 48.277-38.841 80.912-38.841 57.27 0 103.696 46.426 103.696 103.696 0 48.068-32.706 88.497-77.078 100.248l-0.724 0.163zM68.828 39.696c-2.219 0-4.018 1.799-4.018 4.018v0 847.457c0 2.219 1.799 4.018 4.018 4.018v0h704.875c2.219 0 4.018-1.799 4.018-4.018v0-755.297c-16.886-6.977-31.013-17.69-41.84-31.166l-0.157-0.202h-333.902v-25.924h318.607c-4.743-11.511-7.504-24.874-7.518-38.881v-0.006zM816.608-51.038c-50.111 0-90.734 40.623-90.734 90.734v0c0 0.068 0 0.148 0 0.228 0 14.058 3.253 27.357 9.047 39.184l-0.233-0.526c1.324 3.018 2.711 5.571 4.28 7.995l-0.132-0.218c9.3 15.303 22.547 27.384 38.344 35.021l0.542 0.236c11.301 5.562 24.6 8.814 38.658 8.814 0.080 0 0.16 0 0.241 0h-0.012c50.111 0 90.734-40.623 90.734-90.734s-40.623-90.734-90.734-90.734v0zM861.975 52.658h-32.405v32.405c0 3.579-2.902 6.481-6.481 6.481v0h-12.962c-3.579 0-6.481-2.902-6.481-6.481v0-32.405h-32.405c-3.579 0-6.481-2.902-6.481-6.481v0-12.962c0-3.579 2.902-6.481 6.481-6.481v0h32.405v-32.405c0-3.579 2.902-6.481 6.481-6.481v0h12.962c3.579 0 6.481 2.902 6.481 6.481v0 32.405h32.405c3.579 0 6.481 2.902 6.481 6.481v0 12.962c0 3.579-2.902 6.481-6.481 6.481v0z" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,31 @@
|
||||
@font-face {
|
||||
font-family: 'cptools';
|
||||
src:
|
||||
url('fonts/cptools.ttf?dysqmo') format('truetype'),
|
||||
url('fonts/cptools.woff?dysqmo') format('woff'),
|
||||
url('fonts/cptools.svg?dysqmo#cptools') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.cptools {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'cptools' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.cptools-template:before {
|
||||
content: "\e900";
|
||||
}
|
||||
.cptools-new-template:before {
|
||||
content: "\e901";
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
@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"; }
|
||||
|
||||
// Set the HTML style for the apps which shouldn't have a body scrollbar
|
||||
html.cp-app-noscroll {
|
||||
@import "./include/app-noscroll.less";
|
||||
.app-noscroll_main();
|
||||
}
|
||||
// Set the HTML style for printing slides
|
||||
html.cp-app-print {
|
||||
@import "./include/app-print.less";
|
||||
.app-print_main();
|
||||
}
|
||||
|
||||
body.cp-readonly .cp-hidden-if-readonly { display: none !important; }
|
||||
|
||||
body.cp-app-drive { @import "../../../drive/app-drive.less"; }
|
||||
body.cp-app-pad { @import "../../../pad/app-pad.less"; }
|
||||
body.cp-app-code { @import "../../../code/app-code.less"; }
|
||||
body.cp-app-slide { @import "../../../slide/app-slide.less"; }
|
||||
body.cp-app-file { @import "../../../file/app-file.less"; }
|
||||
body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; }
|
||||
body.cp-app-contacts { @import "../../../contacts/app-contacts.less"; }
|
||||
body.cp-app-poll { @import "../../../poll/app-poll.less"; }
|
||||
body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; }
|
||||
body.cp-app-todo { @import "../../../todo/app-todo.less"; }
|
||||
body.cp-app-profile { @import "../../../profile/app-profile.less"; }
|
||||
body.cp-app-settings { @import "../../../settings/app-settings.less"; }
|
||||
body.cp-app-debug { @import "../../../debug/app-debug.less"; }
|
||||
|
||||
@ -1,9 +1,18 @@
|
||||
.font_neuropolitical () {
|
||||
.font_main () {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
}
|
||||
|
||||
// Fonts need to go on the global scope
|
||||
@font-face {
|
||||
font-family: Neuropolitical;
|
||||
src: url("/customize/fonts/neuropolitical.ttf");
|
||||
}
|
||||
|
||||
// Fonts need to go on the global scope
|
||||
@font-tools {
|
||||
font-family: CryptPadTools;
|
||||
src: url("/customize/fonts/cryptpadtools.ttf");
|
||||
}
|
||||
.font_open-sans () {
|
||||
|
||||
@import (once) '/customize/fonts/open-sans.less';
|
||||
}
|
||||
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
@import (once) "./colortheme-all.less";
|
||||
|
||||
.markdownToolbar_main (@color, @bg-color) {
|
||||
.cp-markdown-toolbar {
|
||||
height: @toolbar_line-height;
|
||||
background-color: lighten(@bg-color, 20%);
|
||||
display: none;
|
||||
button {
|
||||
height: @toolbar_line-height !important;
|
||||
outline: 0;
|
||||
color: @color;
|
||||
.toolbar_button;
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
&:hover {
|
||||
background-color: lighten(@bg-color, 8%);
|
||||
}
|
||||
&.cp-markdown-help { float: right; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
@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-features { @import "./pages/page-features.less"; }
|
||||
body.cp-page-faq { @import "./pages/page-faq.less"; }
|
||||
body.cp-page-terms { @import "./pages/page-terms.less"; }
|
||||
|
||||
// Set the HTML style for the apps which shouldn't have a body scrollbar
|
||||
html.cp-app-noscroll {
|
||||
@import "./include/app-noscroll.less";
|
||||
.app-noscroll_main();
|
||||
}
|
||||
// Set the HTML style for printing slides
|
||||
html.cp-app-print {
|
||||
@import "./include/app-print.less";
|
||||
.app-print_main();
|
||||
}
|
||||
|
||||
body.cp-readonly .cp-hidden-if-readonly { display: none !important; }
|
||||
|
||||
body.cp-app-drive { @import "../../../drive/app-drive.less"; }
|
||||
body.cp-app-pad { @import "../../../pad/app-pad.less"; }
|
||||
body.cp-app-code { @import "../../../code/app-code.less"; }
|
||||
body.cp-app-slide { @import "../../../slide/app-slide.less"; }
|
||||
body.cp-app-file { @import "../../../file/app-file.less"; }
|
||||
body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; }
|
||||
body.cp-app-contacts { @import "../../../contacts/app-contacts.less"; }
|
||||
body.cp-app-poll { @import "../../../poll/app-poll.less"; }
|
||||
body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; }
|
||||
body.cp-app-todo { @import "../../../todo/app-todo.less"; }
|
||||
body.cp-app-profile { @import "../../../profile/app-profile.less"; }
|
||||
body.cp-app-settings { @import "../../../settings/app-settings.less"; }
|
||||
body.cp-app-debug { @import "../../../debug/app-debug.less"; }
|
||||
body.cp-app-worker { @import "../../../worker/app-worker.less"; }
|
||||
body.cp-app-kanban { @import "../../../kanban/app-kanban.less"; }
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
@import (once) "../include/infopages.less";
|
||||
@import (once) "../include/colortheme-all.less";
|
||||
@import (reference) "../include/infopages.less";
|
||||
@import (reference) "../include/colortheme-all.less";
|
||||
|
||||
&.cp-page-terms {
|
||||
.infopages_main();
|
||||
.infopages_topbar();
|
||||
}
|
||||
|
||||
|
||||
@ -1,19 +1,45 @@
|
||||
# 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.
|
||||
## Linking Less/CSS
|
||||
|
||||
In order to keep the amount of CSS generated under control, we use "linking", via the LessLoader.
|
||||
This makes use of CSS variables in order to work. The old solution was to put all of the content into less mixins
|
||||
which would be used inside of the scope where they should be, but this caused a state explosion because each app needed
|
||||
essentially the same mixins. However, these mixins had arguments such as colors which were different per-app.
|
||||
|
||||
The new solution is to set CSS variables for the arguments (like color) and then put the bulk of the less at the global
|
||||
scope. When you include a dependency, the following happens:
|
||||
|
||||
1. You `@include (reference) './include/dependency.less`. The (reference) argument which means it will not emit CSS,
|
||||
this is important because otherwise all of the dependencies of your app's less file would end up bundled with it, the
|
||||
state explosion problem.
|
||||
2. You invoke `.dependency_main(@arg1 @arg2)` inside of the scope you want it in, the name `dependency_main` is a
|
||||
convention, all less variables, mixins, or CSS variables which a file creates should be prefixed with the name of the
|
||||
file (in this case, "dependency").
|
||||
3. The mixin `.dependency_main` does a couple of things:
|
||||
* First, it sets a CSS variable called `--LessLoader_require`, this is a special variable which the browser does not
|
||||
use, the only objective of this variable is to inform LessLoader that another file is needed. To do this, there is a
|
||||
helper function (also specified in LessLoader.js) called `LessLoader_currentFile()`. The syntax is:
|
||||
`--LessLoader_require: LessLoader_currentFile();` and in the CSS, this outputs something like:
|
||||
`--LessLoader_require: "/customize/src/less2/include/dependency.less?ver=2.4.0-1531572157592";`
|
||||
* Secondly, it sets browser variables for it's arguments, making sure to avoid namespace collisions:
|
||||
`--dependency-arg1: @arg1;`, `--dependency-arg2: @arg2;`. Sometimes a less transformation needs to be done on a
|
||||
variable, unfortunately in this case the transformation must be done here and the transformed variable must be output.
|
||||
`--dependency-arg1-l10: lighten(@arg1, 10%);`.
|
||||
4. After less processing is completed, the LessLoader caches the result of parsing, then scans the it for instances of
|
||||
`--LessLoader_require` variable and then processes them, but it does this separately. So even if dependency.less is
|
||||
required many times, it will only be processed by the less interpreter once.
|
||||
|
||||
## Other convensions
|
||||
|
||||
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.
|
||||
* The document body has a class on it depending on the app/page, app classes begin with `cp-app-` and page classes begin
|
||||
with `cp-page-`.
|
||||
* Custom classes ought to begin with `cp-` and the name of the file where the rules are written for them (see help.less as
|
||||
an example of doing the right thing).
|
||||
* Since the include files generate CSS and the app cannot control the scope which it's run at, be considerate avoid
|
||||
making an include file which changes something significant (like making a rule for `li`). help.less is an excellent example
|
||||
of doing this well, infopages.less is the worst example (fortunately it doesn't get included in any of the apps).
|
||||
* 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.
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue