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

Dark theme for static pages

pull/1/head
David Benqué 2021-02-03 17:06:11 +00:00
parent 93ffef47d2
commit 9ac8f8e26d
11 changed files with 70 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
customize.dist/pages/index.js
View File

@ -73,9 +73,9 @@ define([
UI.addTooltips();
var blocks = [
h('div.row.cp-index-section', [
h('div.row.cp-page-section', [
h('div.col-sm-6',
h('img.img-fluid', {
h('img.img-fluid.cp-img-invert', {
src:'/customize/images/shredder.png',
alt:'',
'aria-hidden': 'true'
@ -86,17 +86,17 @@ define([
h('p', Msg.home_privacy_text)
])
]),
h('div.row.cp-index-section',
h('div.row.cp-page-section',
h('div.col-sm-12', [
h('h2', Msg.home_host_title),
h('p'), Msg.home_host
])
),
h('div.row.cp-index-section', [
h('div.row.cp-page-section', [
h('div.col-sm-6', [
h('h2', Msg.home_opensource_title),
Pages.setHTML(h('p'), Msg.home_opensource),
h('img.small-logo', {
h('img.small-logo.cp-img-invert', {
src: '/customize/images/logo_AGPLv3.svg',
alt: 'APGL3 License Logo'
})

6
customize.dist/pages/what-is-cryptpad.js
View File

@ -20,7 +20,7 @@ define([
Pages.setHTML(h('span'), Msg.whatis_collaboration_info),
]),
h('div.col-md-6', [
h('img', {
h('img.cp-img-invert', {
src: '/customize/images/collaboration.png?' + urlArgs,
alt: '',
'aria-hidden': 'true'
@ -66,11 +66,11 @@ define([
}),
]),
h('div.col-md-6.order-md-1.small-logos', [
h('img', {
h('img.cp-img-invert', {
src: '/customize/images/logo_ngi.png?' + urlArgs,
alt: 'NGI Award 2019'
}),
h('img', {
h('img.cp-img-invert', {
src: '/customize/images/logo_nlnet.svg?' + urlArgs,
alt: 'NLNet Foundation logo'
}),

12
customize.dist/src/less2/include/colortheme-dark.less
View File

@ -26,6 +26,7 @@
// Colors
@cryptpad_color_brand: #0087FF;
@cryptpad_color_brand_300: lighten(@cryptpad_color_brand, 30%);
@cryptpad_color_brand_fade: fade(@cryptpad_color_brand, 75%);
@cryptpad_color_brand_fader: fade(@cryptpad_color_brand, 50%);
@cryptpad_color_brand_fadest: fade(@cryptpad_color_brand, 25%);
@ -51,6 +52,7 @@
@cryptpad_color_grey_700: #616161;
@cryptpad_color_grey_800: #424242;
@cryptpad_color_grey_900: #212121;
@cryptpad_color_grey_950: #121212;
@cryptpad_color_black: #000;
@cryptpad_text_col: @cryptpad_color_grey_200;
@ -222,11 +224,13 @@
// Static pages
@cp_static-bg: @cryptpad_color_grey_900;
@cp_static-fg: @cryptpad_text_col;
@cp_static-link: @cryptpad_color_brand;
@cp_static-link: @cryptpad_color_brand_300;
@cp_static-title: @cryptpad_color_brand;
@cp_static-footer: @cryptpad_color_grey_800;
@cp_static-footer-border: @cryptpad_color_white;
@cp_static-topbar-fg: @cryptpad_color_brand;
@cp_static-footer: @cryptpad_color_grey_950;
@cp_static-footer-border: @cryptpad_color_grey_600;
@cp_static-topbar-fg: @cryptpad_color_brand_300;
@cp_static-card-bg: @cryptpad_color_grey_800;
@cp_static-img-invert-filter: hue-rotate(200grad) invert();
// Limit
@cp_limit-fg: @cryptpad_text_col;

8
customize.dist/src/less2/include/colortheme.less
View File

@ -26,6 +26,7 @@
// Colors
@cryptpad_color_brand: #0087FF;
@cryptpad_color_brand_300: lighten(@cryptpad_color_brand, 30%);
@cryptpad_color_brand_fade: fade(@cryptpad_color_brand, 75%);
@cryptpad_color_brand_fader: fade(@cryptpad_color_brand, 50%);
@cryptpad_color_brand_fadest: fade(@cryptpad_color_brand, 25%);
@ -40,6 +41,7 @@
@cryptpad_color_light_grey: #f1f1f1;
@cryptpad_color_lighter_grey: #f9f9f9;
@cryptpad_color_white: #FFF;
@cryptpad_color_grey_50: #FAFAFA;
@cryptpad_color_grey_100: #F5F5F5;
@cryptpad_color_grey_200: #EEEEEE;
@ -50,6 +52,8 @@
@cryptpad_color_grey_700: #616161;
@cryptpad_color_grey_800: #424242;
@cryptpad_color_grey_900: #212121;
@cryptpad_color_grey_950: #121212;
@cryptpad_color_black: #000;
@cryptpad_text_col:@cryptpad_color_grey_800;
@ -61,8 +65,6 @@
@cryptpad_color_dark_red: #9e0000;
@cryptpad_color_light_red: #FFD4D4;
@cryptpad_color_orange: #f49842;
@cryptpad_color_black: #000;
@cryptpad_color_white: #FFF;
@cryptpad_color_light_green: #c5ffa8;
@cryptpad_color_green: #5cb85c;
@cryptpad_color_light_yellow: #FFE69C;
@ -227,6 +229,8 @@
@cp_static-footer: @cryptpad_color_help_grey;
@cp_static-footer-border: @cryptpad_color_white;
@cp_static-topbar-fg: @cryptpad_color_brand;
@cp_static-card-bg: @cryptpad_color_white;
@cp_static-img-invert-filter: none;
// Limit
@cp_limit-fg: @cryptpad_text_col;

21
customize.dist/src/less2/include/infopages.less
View File

@ -81,12 +81,26 @@ body.html {
margin: 50px auto;
}
}
p {
a {
text-decoration: underline;
}
}
.row.cp-page-section {
margin: 50px 0px;
a {
text-decoration: underline;
}
.small-logo {
max-width: 40%;
}
}
img.cp-shadow {
.cp-shadow();
}
img.cp-img-invert {
filter: @cp_static-img-invert-filter;
}
button {
outline: none;
@ -155,7 +169,7 @@ body.html {
display: block;
font-family: "IBM Plex Mono";
font-size: 1.5rem;
color: @cp_static-link;
color: @cp_static-title;
margin-bottom: 10px;
}
@ -196,12 +210,11 @@ body.html {
a {
border: 2px solid transparent;
white-space: nowrap;
&:visited {
color: @cp_static-link;
}
color: @cp_static-title;
}
.nav-link {
padding: 0.5em 0.7em;
color: @cp_static-link;
&:hover {
color: @cryptpad_text_col;
}

2
customize.dist/src/less2/pages/page-contact.less
View File

@ -21,8 +21,10 @@
border-radius: 0;
margin-bottom: 1em;
border: 0;
background-color: @cp_static-card-bg;
&:hover, &:focus {
text-decoration: none;
color: @cryptpad_text_col;
background-color: @cryptpad_color_brand_fadest;
}
@media (max-width: 1200px) and (min-width: 769px) {

23
customize.dist/src/less2/pages/page-features.less
View File

@ -10,7 +10,7 @@
}
.cp-features-register-button {
font-size: 20px;
color: #fff;
color: @cryptpad_color_white;
background: @cryptpad_color_brand;
border-radius: 0;
&:hover {
@ -21,6 +21,8 @@
.card {
.cp-shadow();
border: none;
background-color: @cp_static-card-bg;
border-radius: 0px;;
.title-card {
background-color: @cryptpad_color_brand;
padding: 20px;
@ -37,7 +39,10 @@
&.cp-pricing {
div {
font-size: 1.2em;
color: @cryptpad_color_brand;
color: @cp_static-link;
a {
text-decoration: underline;
}
&:first-child {
font-weight: bold;
}
@ -46,10 +51,13 @@
}
}
}
&:last-child {
border-top: 1px solid fade(@cryptpad_text_col, 30%);
}
}
}
h3 {
color: #fff;
color: @cryptpad_color_white;
}
.list-group {
li {
@ -84,13 +92,12 @@
font-size: 0.8em;
}
.list-group-item {
border-bottom: 1px solid @cryptpad_color_neutral2_grey;
background-color: transparent;
&:first-child {
border-top: 1px solid @cryptpad_color_neutral2_grey;
border-top: 1px solid fade(@cryptpad_text_col, 30%);
}
&:last-child {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
&:not(:last-child) {
border-bottom: 1px solid fade(@cryptpad_text_col, 30%);
}
}
}

14
customize.dist/src/less2/pages/page-index.less
View File

@ -56,7 +56,7 @@
.tag-line {
text-align: center;
font-size: 1.4em;
//font-style: italic;
color: @cp_static-link;
}
}
@ -71,6 +71,7 @@
justify-content: space-around;
a {
margin: 10px;
text-decoration: none;
}
@media screen and (max-width: 768px) {
margin-top: 40px;
@ -172,17 +173,6 @@
}
}
#cp-main {
.cp-container {
.row.cp-index-section {
margin: 50px 0px;
.small-logo {
max-width: 40%;
}
}
}
}
@media (min-width: 576px) and (max-width: 767px) {
.container {
padding-left: 0;

5
customize.dist/src/less2/pages/page-login.less
View File

@ -21,15 +21,17 @@
.cp-container {
#userForm {
.cp-shadow();
background-color: @cryptpad_color_white;
background-color: @cp_static-card-bg;
padding: 10px;
.form-control {
border-radius: 0;
color: @cryptpad_text_col;
background-color: @cp_forms-bg;
margin-bottom: 5px;
&:focus {
border-color: @cryptpad_color_brand;
}
.tools_placeholder-color();
}
.checkbox-container {
color: @cryptpad_text_col;
@ -48,6 +50,7 @@
color: @cryptpad_color_brand;
padding: 10px;
border-radius: 0;
margin: 0px;
}
}
}

9
customize.dist/src/less2/pages/page-register.less
View File

@ -78,7 +78,7 @@
}
#userForm {
padding: 15px;
background-color: @cryptpad_color_white;
background-color: @cp_static-card-bg;
position: relative;
z-index: 2;
margin-bottom: 100px;
@ -86,14 +86,19 @@
.form-control {
border-radius: 0;
color: @cryptpad_text_col;
background-color: @cp_forms-bg;
margin-top: 5px;
&:focus {
border-color: @cryptpad_color_blue;
border-color: @cryptpad_color_brand;
}
.tools_placeholder-color();
}
.checkbox-container {
color: @cryptpad_text_col;
}
button#register {
margin: 0px;
}
}
.cp-register-notes {

2
customize.dist/src/less2/pages/page-what-is-cryptpad.less
View File

@ -6,7 +6,7 @@
.small-logos {
img {
max-width: 40%;
max-width: 40% !important;
padding: 10px;
margin-top: 0px;
}