diff --git a/customize.dist/pages/index.js b/customize.dist/pages/index.js index dc882ad32..d099640e4 100644 --- a/customize.dist/pages/index.js +++ b/customize.dist/pages/index.js @@ -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' }) diff --git a/customize.dist/pages/what-is-cryptpad.js b/customize.dist/pages/what-is-cryptpad.js index a686476b3..c100782ce 100644 --- a/customize.dist/pages/what-is-cryptpad.js +++ b/customize.dist/pages/what-is-cryptpad.js @@ -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' }), diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index 6eb7ab406..4619af9e5 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -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; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index de606751f..875ff50a4 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -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; diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index 78f3a0b89..e64e38744 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/customize.dist/src/less2/include/infopages.less @@ -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; } diff --git a/customize.dist/src/less2/pages/page-contact.less b/customize.dist/src/less2/pages/page-contact.less index 9a7b3c67a..c305f087a 100644 --- a/customize.dist/src/less2/pages/page-contact.less +++ b/customize.dist/src/less2/pages/page-contact.less @@ -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) { diff --git a/customize.dist/src/less2/pages/page-features.less b/customize.dist/src/less2/pages/page-features.less index 1fe267144..5ec076a34 100644 --- a/customize.dist/src/less2/pages/page-features.less +++ b/customize.dist/src/less2/pages/page-features.less @@ -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%); } } } diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less index a144c6216..3b1a50ef3 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/customize.dist/src/less2/pages/page-index.less @@ -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; diff --git a/customize.dist/src/less2/pages/page-login.less b/customize.dist/src/less2/pages/page-login.less index f79f93017..07fcc7cb5 100644 --- a/customize.dist/src/less2/pages/page-login.less +++ b/customize.dist/src/less2/pages/page-login.less @@ -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; } } } diff --git a/customize.dist/src/less2/pages/page-register.less b/customize.dist/src/less2/pages/page-register.less index 67d0d2be6..ce4309822 100644 --- a/customize.dist/src/less2/pages/page-register.less +++ b/customize.dist/src/less2/pages/page-register.less @@ -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 { diff --git a/customize.dist/src/less2/pages/page-what-is-cryptpad.less b/customize.dist/src/less2/pages/page-what-is-cryptpad.less index 5e2aa0795..e6c1edc92 100644 --- a/customize.dist/src/less2/pages/page-what-is-cryptpad.less +++ b/customize.dist/src/less2/pages/page-what-is-cryptpad.less @@ -6,7 +6,7 @@ .small-logos { img { - max-width: 40%; + max-width: 40% !important; padding: 10px; margin-top: 0px; }