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(); UI.addTooltips();
var blocks = [ var blocks = [
h('div.row.cp-index-section', [ h('div.row.cp-page-section', [
h('div.col-sm-6', h('div.col-sm-6',
h('img.img-fluid', { h('img.img-fluid.cp-img-invert', {
src:'/customize/images/shredder.png', src:'/customize/images/shredder.png',
alt:'', alt:'',
'aria-hidden': 'true' 'aria-hidden': 'true'
@ -86,17 +86,17 @@ define([
h('p', Msg.home_privacy_text) h('p', Msg.home_privacy_text)
]) ])
]), ]),
h('div.row.cp-index-section', h('div.row.cp-page-section',
h('div.col-sm-12', [ h('div.col-sm-12', [
h('h2', Msg.home_host_title), h('h2', Msg.home_host_title),
h('p'), Msg.home_host h('p'), Msg.home_host
]) ])
), ),
h('div.row.cp-index-section', [ h('div.row.cp-page-section', [
h('div.col-sm-6', [ h('div.col-sm-6', [
h('h2', Msg.home_opensource_title), h('h2', Msg.home_opensource_title),
Pages.setHTML(h('p'), Msg.home_opensource), Pages.setHTML(h('p'), Msg.home_opensource),
h('img.small-logo', { h('img.small-logo.cp-img-invert', {
src: '/customize/images/logo_AGPLv3.svg', src: '/customize/images/logo_AGPLv3.svg',
alt: 'APGL3 License Logo' 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), Pages.setHTML(h('span'), Msg.whatis_collaboration_info),
]), ]),
h('div.col-md-6', [ h('div.col-md-6', [
h('img', { h('img.cp-img-invert', {
src: '/customize/images/collaboration.png?' + urlArgs, src: '/customize/images/collaboration.png?' + urlArgs,
alt: '', alt: '',
'aria-hidden': 'true' 'aria-hidden': 'true'
@ -66,11 +66,11 @@ define([
}), }),
]), ]),
h('div.col-md-6.order-md-1.small-logos', [ h('div.col-md-6.order-md-1.small-logos', [
h('img', { h('img.cp-img-invert', {
src: '/customize/images/logo_ngi.png?' + urlArgs, src: '/customize/images/logo_ngi.png?' + urlArgs,
alt: 'NGI Award 2019' alt: 'NGI Award 2019'
}), }),
h('img', { h('img.cp-img-invert', {
src: '/customize/images/logo_nlnet.svg?' + urlArgs, src: '/customize/images/logo_nlnet.svg?' + urlArgs,
alt: 'NLNet Foundation logo' alt: 'NLNet Foundation logo'
}), }),

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

@ -26,6 +26,7 @@
// Colors // Colors
@cryptpad_color_brand: #0087FF; @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_fade: fade(@cryptpad_color_brand, 75%);
@cryptpad_color_brand_fader: fade(@cryptpad_color_brand, 50%); @cryptpad_color_brand_fader: fade(@cryptpad_color_brand, 50%);
@cryptpad_color_brand_fadest: fade(@cryptpad_color_brand, 25%); @cryptpad_color_brand_fadest: fade(@cryptpad_color_brand, 25%);
@ -51,6 +52,7 @@
@cryptpad_color_grey_700: #616161; @cryptpad_color_grey_700: #616161;
@cryptpad_color_grey_800: #424242; @cryptpad_color_grey_800: #424242;
@cryptpad_color_grey_900: #212121; @cryptpad_color_grey_900: #212121;
@cryptpad_color_grey_950: #121212;
@cryptpad_color_black: #000; @cryptpad_color_black: #000;
@cryptpad_text_col: @cryptpad_color_grey_200; @cryptpad_text_col: @cryptpad_color_grey_200;
@ -222,11 +224,13 @@
// Static pages // Static pages
@cp_static-bg: @cryptpad_color_grey_900; @cp_static-bg: @cryptpad_color_grey_900;
@cp_static-fg: @cryptpad_text_col; @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-title: @cryptpad_color_brand;
@cp_static-footer: @cryptpad_color_grey_800; @cp_static-footer: @cryptpad_color_grey_950;
@cp_static-footer-border: @cryptpad_color_white; @cp_static-footer-border: @cryptpad_color_grey_600;
@cp_static-topbar-fg: @cryptpad_color_brand; @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 // Limit
@cp_limit-fg: @cryptpad_text_col; @cp_limit-fg: @cryptpad_text_col;

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

@ -26,6 +26,7 @@
// Colors // Colors
@cryptpad_color_brand: #0087FF; @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_fade: fade(@cryptpad_color_brand, 75%);
@cryptpad_color_brand_fader: fade(@cryptpad_color_brand, 50%); @cryptpad_color_brand_fader: fade(@cryptpad_color_brand, 50%);
@cryptpad_color_brand_fadest: fade(@cryptpad_color_brand, 25%); @cryptpad_color_brand_fadest: fade(@cryptpad_color_brand, 25%);
@ -40,6 +41,7 @@
@cryptpad_color_light_grey: #f1f1f1; @cryptpad_color_light_grey: #f1f1f1;
@cryptpad_color_lighter_grey: #f9f9f9; @cryptpad_color_lighter_grey: #f9f9f9;
@cryptpad_color_white: #FFF;
@cryptpad_color_grey_50: #FAFAFA; @cryptpad_color_grey_50: #FAFAFA;
@cryptpad_color_grey_100: #F5F5F5; @cryptpad_color_grey_100: #F5F5F5;
@cryptpad_color_grey_200: #EEEEEE; @cryptpad_color_grey_200: #EEEEEE;
@ -50,6 +52,8 @@
@cryptpad_color_grey_700: #616161; @cryptpad_color_grey_700: #616161;
@cryptpad_color_grey_800: #424242; @cryptpad_color_grey_800: #424242;
@cryptpad_color_grey_900: #212121; @cryptpad_color_grey_900: #212121;
@cryptpad_color_grey_950: #121212;
@cryptpad_color_black: #000;
@cryptpad_text_col:@cryptpad_color_grey_800; @cryptpad_text_col:@cryptpad_color_grey_800;
@ -61,8 +65,6 @@
@cryptpad_color_dark_red: #9e0000; @cryptpad_color_dark_red: #9e0000;
@cryptpad_color_light_red: #FFD4D4; @cryptpad_color_light_red: #FFD4D4;
@cryptpad_color_orange: #f49842; @cryptpad_color_orange: #f49842;
@cryptpad_color_black: #000;
@cryptpad_color_white: #FFF;
@cryptpad_color_light_green: #c5ffa8; @cryptpad_color_light_green: #c5ffa8;
@cryptpad_color_green: #5cb85c; @cryptpad_color_green: #5cb85c;
@cryptpad_color_light_yellow: #FFE69C; @cryptpad_color_light_yellow: #FFE69C;
@ -227,6 +229,8 @@
@cp_static-footer: @cryptpad_color_help_grey; @cp_static-footer: @cryptpad_color_help_grey;
@cp_static-footer-border: @cryptpad_color_white; @cp_static-footer-border: @cryptpad_color_white;
@cp_static-topbar-fg: @cryptpad_color_brand; @cp_static-topbar-fg: @cryptpad_color_brand;
@cp_static-card-bg: @cryptpad_color_white;
@cp_static-img-invert-filter: none;
// Limit // Limit
@cp_limit-fg: @cryptpad_text_col; @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; margin: 50px auto;
} }
} }
p {
a {
text-decoration: underline;
}
}
.row.cp-page-section { .row.cp-page-section {
margin: 50px 0px; margin: 50px 0px;
a {
text-decoration: underline;
}
.small-logo {
max-width: 40%;
}
} }
img.cp-shadow { img.cp-shadow {
.cp-shadow(); .cp-shadow();
} }
img.cp-img-invert {
filter: @cp_static-img-invert-filter;
}
button { button {
outline: none; outline: none;
@ -155,7 +169,7 @@ body.html {
display: block; display: block;
font-family: "IBM Plex Mono"; font-family: "IBM Plex Mono";
font-size: 1.5rem; font-size: 1.5rem;
color: @cp_static-link; color: @cp_static-title;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -196,12 +210,11 @@ body.html {
a { a {
border: 2px solid transparent; border: 2px solid transparent;
white-space: nowrap; white-space: nowrap;
&:visited { color: @cp_static-title;
color: @cp_static-link;
}
} }
.nav-link { .nav-link {
padding: 0.5em 0.7em; padding: 0.5em 0.7em;
color: @cp_static-link;
&:hover { &:hover {
color: @cryptpad_text_col; color: @cryptpad_text_col;
} }

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

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

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

@ -56,7 +56,7 @@
.tag-line { .tag-line {
text-align: center; text-align: center;
font-size: 1.4em; font-size: 1.4em;
//font-style: italic; color: @cp_static-link;
} }
} }
@ -71,6 +71,7 @@
justify-content: space-around; justify-content: space-around;
a { a {
margin: 10px; margin: 10px;
text-decoration: none;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
margin-top: 40px; 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) { @media (min-width: 576px) and (max-width: 767px) {
.container { .container {
padding-left: 0; padding-left: 0;

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

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

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

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

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

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