infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

break monolithic style file into several modules

pull/1/head
ansuz 2016-12-30 15:05:16 +01:00
parent 34967ac354
commit 773209472e
8 changed files with 194 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
customize.dist/src/alertify.less → customize.dist/src/less/alertify.less
View File

91
customize.dist/src/less/bar.less Normal file
View File

@ -0,0 +1,91 @@
/* Bottom Bar */
.top-bar, .bottom-bar {
position:fixed;
height:4%;
height: 2.5em;
display: inline-block;
width: 100%;
background: @base;
border-top: 1px solid @cp-outline;
a {
color: @cp-green;
text-decoration: none;
}
p {
margin: -1px;
font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
font-size: 20px;
display:block;
margin-left: 10px;
padding-top:3px;
color: @fore;
}
img {
margin-right: 4px;
position: relative;
}
.big {
@media screen and (max-width: 800px) {
display: none;
}
@media screen and (min-width: 801px) {
display: inline-block;
}
}
.small {
@media screen and (max-width: 800px) {
display: inline-block;
}
@media screen and (min-width: 801px) {
display: none;
}
img {
height: 1.25em;
}
}
}
.bottom-bar {
bottom: 0px;
right: 0px;
}
.top-bar {
top: 0px;
right: 0px;
}
.bottom-bar-left {
display:block;
float:left;
padding-left:10px;
}
.bottom-bar-left p {
float: right;
}
.bottom-bar-right {
display:block;
float:right;
padding-right:20px
}
.bottom-bar-center {
width: 20%;
position: absolute;
left: 40%;
text-align: center;
}
.bottom-bar-heart {
top: 2px;
}
.bottom-bar-xwiki {
top: 3px;
}
.bottom-bar-openpaas {
top: 3px;
max-width: 100px;
}

232
customize.dist/src/cryptpad.less → customize.dist/src/less/cryptpad.less
View File

@ -1,62 +1,43 @@
@import "./variables.less";
@import "./alertify.less";
@import "./mixins.less";
html.cp {
@import "./alertify.less";
@import "./bar.less";
@import "./loading.less";
html.cp, .cp body {
font-size: .875em;
background-color: @base;
color: @fore;
}
.cp {
.fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){
@font-face{
font-family: @family;
src: url(@src) format(@fmt);
font-weight: @weight;
font-style: @style;
}
}
a.github-corner > svg {
fill: @cp-green;
color: @base;
}
.transform(...) {
-webkit-transform: @arguments;
-moz-transform: @arguments;
-o-transform: @arguments;
-ms-transform: @arguments;
transform: @arguments;
}
.translate(@x:0, @y:0) {
.transform(translate(@x, @y));
}
.table-refresh > svg {
width: .9em;
height: .9em;
fill: @cp-green;
.translate(0, 15%);
}
.lato {
font-family: lato, Helvetica, sans-serif;
font-size: 1.02em;
}
html,body {
font-family: Georgia,Cambria,serif;
height: 100%;
}
.cp {
body {
font-size: 1rem;
font-weight: 400;
line-height: 2rem;
}
#language-selector {
position: absolute;
top: 0px;
right: 0px;
}
a.github-corner > svg {
fill: @cp-blue;
color: @base;
}
.lato {
font-family: lato, Helvetica, sans-serif;
font-size: 1.02em;
}
h1,h2,h3,h4,h5,h6 {
color: @fore;
@ -138,36 +119,6 @@ p, pre, td, a, table, tr {
.lato;
}
#loading {
position: fixed;
z-index: 9999;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: @bg-loading;
text-align: center;
font-size: 1.5em;
.loadingContainer {
margin-top: 50vh;
transform: translateY(-50%);
}
.cryptofist {
margin-left: auto;
margin-right: auto;
@media screen and (max-height: 450px) {
display: none;
}
}
.spinnerContainer {
position: relative;
height: 100px;
> div {
height: 100px;
}
}
}
#main {
width: 70vw;
margin: auto;
@ -183,10 +134,18 @@ p, pre, td, a, table, tr {
}
/* buttons */
// home page button container
.buttons {
margin-bottom: 50px;
margin-top: 20px;
line-height: 2.5em;
}
.create, .action {
display: inline-block;
@thick: 2px;
border: @thick solid @cp-green;
border-radius: 10px;
background-color: @base;
color: @cp-green;
@ -199,34 +158,21 @@ p, pre, td, a, table, tr {
color: @cp-green;
}
}
.create {
display: none;
}
.action {
display: inline-block;
}
.buttons {
margin-bottom: 50px;
margin-top: 20px;
line-height: 2.5em;
}
.button {
@hpad: 2 * 6px;
@vpad: 2 * 2px;
padding: @vpad @hpad @vpad @hpad;
border-radius: 5px;
margin-top: 2 * 6px;
margin-bottom: 2 * 6px;
display: inline-block;
line-height: 1.5em;
}
.alertify button {
margin: 3px 0px;
}
/* Tables */
/* Tables
* Currently only used by /poll/
*/
table {
border-collapse: collapse;
border-spacing: 0;
@ -271,7 +217,6 @@ tbody {
}
}
td {
border-right: 1px solid black;
padding: 12px;
@ -283,107 +228,12 @@ tbody {
}
}
/* Bottom Bar */
.top-bar, .bottom-bar {
position:fixed;
height:4%;
height: 2.5em;
display: inline-block;
width: 100%;
background: @base;
border-top: 1px solid @cp-outline;
a {
color: @cp-green;
text-decoration: none;
}
p {
margin: -1px;
font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
font-size: 20px;
display:block;
margin-left: 10px;
padding-top:3px;
color: @fore;
}
img {
margin-right: 4px;
position: relative;
}
.big {
@media screen and (max-width: 800px) {
display: none;
}
@media screen and (min-width: 801px) {
display: inline-block;
}
}
.small {
@media screen and (max-width: 800px) {
display: inline-block;
}
@media screen and (min-width: 801px) {
display: none;
}
img {
height: 1.25em;
}
}
}
.bottom-bar {
bottom: 0px;
right: 0px;
}
.top-bar {
top: 0px;
right: 0px;
}
.bottom-bar-left {
display:block;
float:left;
padding-left:10px;
}
.bottom-bar-left p {
float: right;
}
.bottom-bar-right {
display:block;
float:right;
padding-right:20px
}
.bottom-bar-center {
width: 20%;
position: absolute;
left: 40%;
text-align: center;
}
.bottom-bar-heart {
top: 2px;
}
.bottom-bar-xwiki {
top: 3px;
}
.bottom-bar-openpaas {
top: 3px;
max-width: 100px;
}
// form things
// MIXINS
.bottom-left(@s: 5px) { border-bottom-left-radius: @s; }
.bottom-left {
.bottom-left;
}
.top-left(@s: 5px) { border-top-left-radius: @s; }
.top-left {
.top-left;
}
@ -610,6 +460,7 @@ form.realtime, div.realtime {
#addoption { .bottom-left; }
}
// used for slides
.viewportRatio (@x, @y, @p: 100) {
width: @p * 100vw;
height: @y * (@p * 100vw) / @x;
@ -617,7 +468,6 @@ form.realtime, div.realtime {
max-height: (@p * 100vh);
}
&.slide {
#modal #content {
p, ul, ol { font-size: 26px; }
@ -639,11 +489,6 @@ div.modal, div#modal {
#content {
box-sizing: border-box;
.size (@n) {
font-size: @n * 1vw;
line-height: @n * 1.1vw;
}
border: 1px solid white;
vertical-align: middle;
@ -678,16 +523,13 @@ div.modal, div#modal {
h5 { .size(2.2); }
h6 { .size(1.6); }
pre > code {
display: block;
position: relative;
border: 1px solid #333;
width: 90%;
margin: auto;
padding-left: .25vw;
}
ul, ol {

30
customize.dist/src/less/loading.less Normal file
View File

@ -0,0 +1,30 @@
.cp #loading {
position: fixed;
z-index: 9999;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: @bg-loading;
text-align: center;
font-size: 1.5em;
.loadingContainer {
margin-top: 50vh;
transform: translateY(-50%);
}
.cryptofist {
margin-left: auto;
margin-right: auto;
@media screen and (max-height: 450px) {
display: none;
}
}
.spinnerContainer {
position: relative;
height: 100px;
> div {
height: 100px;
}
}
}

29
customize.dist/src/less/mixins.less Normal file
View File

@ -0,0 +1,29 @@
.fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){
@font-face{
font-family: @family;
src: url(@src) format(@fmt);
font-weight: @weight;
font-style: @style;
}
}
.transform(...) {
-webkit-transform: @arguments;
-moz-transform: @arguments;
-o-transform: @arguments;
-ms-transform: @arguments;
transform: @arguments;
}
.translate(@x:0, @y:0) {
.transform(translate(@x, @y));
}
.bottom-left(@s: 5px) { border-bottom-left-radius: @s; }
.top-left(@s: 5px) { border-top-left-radius: @s; }
.size (@n) {
font-size: @n * 1vw;
line-height: @n * 1.1vw;
}

0
customize.dist/src/toolbar.less → customize.dist/src/less/toolbar.less
View File

7
customize.dist/src/variables.less → customize.dist/src/less/variables.less
View File

@ -10,6 +10,11 @@
@cp-outline: #444;
@cp-orange: #FE9A2E;
@cp-blue: #00CFC1;
@cp-blue: #00ADEE;
@cp-light-blue: lighten(@cp-blue, 20%);
// alertify things
@box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
@ -22,7 +27,7 @@
@text-color: rgba(0, 0, 0, .8);
@border-radius: 1px;
@alertify-dialog-bg: #333;
@alertify-dialog-bg: #444;
@alertify-dialog-fg: @fore;
@alertify-btn-fg: @fore;

2
package.json
View File

@ -16,7 +16,7 @@
"scripts": {
"lint": "jshint --config .jshintrc --exclude-path .jshintignore .",
"test": "node TestSelenium.js",
"style": "lessc ./customize.dist/src/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/toolbar.less > ./customize.dist/toolbar.css",
"style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css",
"template": "cd customize.dist/src && node build.js"
}
}