A graduate of PolyTech (X90) and Telecom School in Paris, Ludovic Dubost started his career as a software architect for Netscape Communications Europe. He then became CTO of NetValue, one of the first French start-ups that went public. He left NetValue after the company was purchased by Nielsen/NetRatings and in 2004 launched XWiki, the next generation wiki.
Since the very beginning, Ludovic has been immensely helpful to the CryptPad project. He believed in the idea when there was nothing more than the collaborative pad and his help with sales strategy for the project.
') ]) ]), ]), @@ -280,9 +274,11 @@ define([ if (showingMore) { $('.cp-more, .cp-callout-more-lessmsg').addClass('cp-hidden'); $('.cp-callout-more-moremsg').removeClass('cp-hidden'); + if ( $( window ).width() >991 ) $('.navbar').css('margin-top','-1em'); } else { $('.cp-more, .cp-callout-more-lessmsg').removeClass('cp-hidden'); $('.cp-callout-more-moremsg').addClass('cp-hidden'); + $('.navbar').css('margin-top','0'); } showingMore = !showingMore; } diff --git a/customize.dist/src/less/alertify.less b/customize.dist/src/less/alertify.less deleted file mode 100644 index 7f6622522..000000000 --- a/customize.dist/src/less/alertify.less +++ /dev/null @@ -1,282 +0,0 @@ -@import "./variables.less"; - -/* Logs are shown to inform the user that something has happened - They are only displayed briefly -*/ -.alertify-logs { - @media print { - visibility: hidden; - } - > * { - padding: @padding-base @padding-base * 4; - color: @alertify-fore; - - font-weight: bold; - font-size: large; - - box-shadow: @box-shadow; - border-radius: @border-radius; - &, &.default { - // FIXME - background: rgba(0, 0, 0, .8); - } - &.error { - background: @danger-color; - } - &.success { - background: @success-color; - color: @success-fore; - } - } -} - -.alertify { - position: fixed; - background-color: @alertify-bg; - color: @alertify-fg; - left: 0; - right: 0; - top: 0; - bottom: 0; - width: 100%; - height: 100%; - z-index: 99999; - - &.hide { - opacity: 0; - pointer-events: none; - } - - &, &.show { - box-sizing: border-box; - transition: all .33s cubic-bezier(.25, .8, .25, 1); - } - - &, * { - box-sizing: border-box; - } - - .dialog { - padding: 12px; - } - - .dialog, .alert { - .bright { - color: @light-base; - } - - & > div { - background-color: @alertify-dialog-bg; - border-radius: 5px; - &.half { - width: 50%; - @media (max-width: @media-medium-screen) { - width: 100%; - } - } - } - - width: 100%; - margin: 0 auto; - position: relative; - top: 50%; - transform: translateY(-50%); - - > * { - width: 30%; - width: 500px; - max-width: 95%; - margin: 0 auto; - text-align: center; - padding: @padding-base; - background: #fff; - // FIXME - box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084); - } - - .msg { - padding: @padding-base; - margin-bottom: @padding-base; - margin: 0; - text-align: left; - } - - input:not(.form-control){ - background-color: @alertify-input-bg; - color: @alertify-input-fg; - - border: 0px; - border-radius: 5px; - - margin-bottom: 15px; - width: 100%; - font-size: 100%; - padding: @padding-base; - &:focus { - //outline-offset: -2px; - } - } - nav { - - text-align: right; - - button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) { - - background-color: @alertify-btn-bg; - box-sizing: border-box; - position: relative; - outline: 0; - border: 0; - display: inline-block; - align-items: center; - padding: 0 6px; - margin: 6px 8px; - line-height: 36px; - min-height: 36px; - white-space: nowrap; - min-width: 88px; - text-align: center; - text-transform: uppercase; - font-size: 14px; - text-decoration: none; - cursor: pointer; - - color: @alertify-btn-fg; - border: 1px solid @alertify-base; - border-radius: 5px; - - &.safe, &.danger { - color: @old-base; - white-space: normal; - font-weight: bold; - } - &.danger { - background-color: @cp-red; - &:hover, &:active { - background-color: lighten(@cp-red, 5%); - } - } - - &.safe { - background-color: @cp-green; - &:hover, &:active { - background-color: lighten(@cp-green, 10%); - } - } - - &:hover, &:active { - background-color: @alertify-btn-bg-hover; - } - - &:focus { - border: 1px dotted @alertify-base; - } - &::-moz-focus-inner { - border:0; - } - } - - button.btn { - margin: 6px 4px; - } - } - } -} - -.alertify-logs { - - position: fixed; - z-index: 99999; - - &.bottom, &:not(.top) { - bottom: 16px; - // Bottom left placement. Default. Use for transitions. - &.left, &:not(.right) { - > * { - - } - } - // Top right placement - &.right { - > * { - - } - } - } - - // All left positions. - &.left, &:not(.right) { - left: 16px; - > * { - float: left; - transform: translate3d(0, 0, 0); - height: auto; - - &.show { - left: 0; - } - &, &.hide { - left: -110%; - } - } - } - - &.right { - right: 16px; - > * { - float: right; - transform: translate3d(0, 0, 0); - &.show { - right: 0; - opacity: 1; - } - &, &.hide { - right: -110%; - opacity: 0; - } - } - } - - &.top { - top: 0; - // Top left placement, use for transitions. - &.left, &:not(.right) { - > * { - - } - } - // Top right placement, use for transitions - &.right { - > * { - - } - } - } - - > * { - box-sizing: border-box; - transition: all .4s cubic-bezier(.25, .8, .25, 1); - position: relative; - clear: both; - backface-visibility: hidden; - perspective: 1000; - - & { - max-height: 0; - margin: 0; - padding: 0; - overflow: hidden; - opacity: 0; - pointer-events: none; - } - - &.show { - margin-top: @padding-base; - opacity: 1; - max-height: 1000px; - padding: @padding-base; - pointer-events: auto; - } - } - -} diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less index 3e08d9375..bed6c6eea 100644 --- a/customize.dist/src/less/cryptpad.less +++ b/customize.dist/src/less/cryptpad.less @@ -1,7 +1,7 @@ @import "./variables.less"; @import "./mixins.less"; -@import "./alertify.less"; +@import "../less2/include/alertify.less"; @import "./bar.less"; @import "./loading.less"; @import "./dropdown.less"; @@ -10,6 +10,8 @@ @toolbar-green: #5cb85c; +.alertify_main(); + html.cp, .cp body { font-size: .875em; background-color: @page-white; //@base; diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less index ccd1f065f..87165c2b8 100644 --- a/customize.dist/src/less/variables.less +++ b/customize.dist/src/less/variables.less @@ -1,21 +1,21 @@ @import (once) '../less2/include/colortheme.less'; +@import (once) '../less2/include/browser.less'; -@base: #fff; //#f5f5f5; +@base: @colortheme_base; @dark-base: darken(@base, 20%); @less-dark-base: darken(@base, 10%); -@light-base: lighten(@base, 20%); +@light-base: @colortheme_light-base; @less-light-base: lighten(@base, 10%); @fore: #555; -@old-base: #302B28; -@old-fore: #fafafa; +@old-base: @colortheme_old-base; +@old-fore: @colortheme_old-fore; @main-font-size: 16px; -@cp-green: #46E981; +@cp-green: @colortheme_cp-green; @cp-accent: lighten(@cp-green, 20%); -//@cp-red: #FF0073; // remove red -@cp-red: #FA5858; // remove red +@cp-red: @colortheme_cp-red; @cp-outline: #444; @cp-orange: #FE9A2E; @@ -33,46 +33,18 @@ @cp-link-visited: @cp-light-blue; @cp-link-hover: darken(@cp-light-blue, 10%); -// alertify things - -@box-shadow: 0 2px 5px 0 rgba(0,0,0,.2); -@padding-base: 12px; - -@success-color: @cp-green; -@success-fore: @base; -@danger-color: @cp-red; - -@text-color: rgba(0, 0, 0, .8); -@border-radius: 1px; - -@alertify-fore: @old-fore; -@alertify-base: @old-base; - -@alertify-dialog-bg: #444; -@alertify-dialog-fg: @old-fore; - -@alertify-btn-fg: @old-fore; - -@alertify-btn-bg: rgba(200, 200, 200, 0.05); -@alertify-btn-bg-hover: rgba(200, 200, 200, .15); - -@alertify-bg: rgba(0, 0, 0, .3); -@alertify-fg: @old-fore; - -@alertify-input-bg: @old-base; -@alertify-input-fg: @old-fore; @slide-default-bg: #000; @bg-loading: #222; @color-loading: @old-fore; -@media-not-big: 800px; -@media-not-small: 801px; +@media-not-big: @browser_media-not-big; +@media-not-small: @browser_media-not-small; -@media-short-screen: 450px; -@media-narrow-screen: 400px; -@media-medium-screen: 600px; +@media-short-screen: @browser_media-short-screen; +@media-narrow-screen: @browser_media-narrow-screen; +@media-medium-screen: @browser_media-medium-screen; // Dropdown diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less new file mode 100644 index 000000000..cb3fd3621 --- /dev/null +++ b/customize.dist/src/less2/include/alertify.less @@ -0,0 +1,304 @@ +@import (once) "./colortheme.less"; +@import (once) "./browser.less"; + +.alertify_main () { + @alertify-fore: @colortheme_old-fore; + @alertify-base: @colortheme_old-base; + + @alertify-dialog-bg: #444; + @alertify-dialog-fg: @colortheme_old-fore; + + @alertify-btn-fg: @colortheme_old-fore; + + @alertify-btn-bg: rgba(200, 200, 200, 0.05); + @alertify-btn-bg-hover: rgba(200, 200, 200, .15); + + @alertify-bg: rgba(0, 0, 0, .3); + @alertify-fg: @colortheme_old-fore; + + @alertify-input-bg: @colortheme_old-base; + @alertify-input-fg: @colortheme_old-fore; + + @alertify_padding-base: 12px; + @alertify_box-shadow: 0 2px 5px 0 rgba(0,0,0,.2); + @alertify_border-radius: 1px; + + // Logs to show that something has happened + // These show only once + + .alertify-logs { + @media print { + visibility: hidden; + } + > * { + padding: @alertify_padding-base @alertify_padding-base * 4; + color: @alertify-fore; + + font-weight: bold; + font-size: large; + + box-shadow: @alertify_box-shadow; + border-radius: @alertify_border-radius; + &, &.default { + // FIXME + background: rgba(0, 0, 0, .8); + } + &.error { + background: @colortheme_cp-red; + } + &.success { + background: @colortheme_cp-green; + } + } + } + + .alertify { + position: fixed; + background-color: @alertify-bg; + color: @alertify-fg; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + z-index: 99999; + + &.hide { + opacity: 0; + pointer-events: none; + } + + &, &.show { + box-sizing: border-box; + transition: all .33s cubic-bezier(.25, .8, .25, 1); + } + + &, * { + box-sizing: border-box; + } + + .dialog { + padding: 12px; + } + + .dialog, .alert { + .bright { + color: @colortheme_light-base; + } + + & > div { + background-color: @alertify-dialog-bg; + border-radius: 5px; + &.half { + width: 50%; + @media (max-width: @browser_media-medium-screen) { + width: 100%; + } + } + } + + width: 100%; + margin: 0 auto; + position: relative; + top: 50%; + transform: translateY(-50%); + + > * { + width: 30%; + width: 500px; + max-width: 95%; + margin: 0 auto; + text-align: center; + padding: @alertify_padding-base; + background: #fff; + // FIXME + box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084); + } + + .msg { + padding: @alertify_padding-base; + margin-bottom: @alertify_padding-base; + margin: 0; + text-align: left; + } + + input:not(.form-control){ + background-color: @alertify-input-bg; + color: @alertify-input-fg; + border: 0px; + border-radius: 5px; + + margin-bottom: 15px; + width: 100%; + font-size: 100%; + padding: @alertify_padding-base; + &:focus { + //outline-offset: -2px; + } + } + nav { + + text-align: right; + + button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) { + + background-color: @alertify-btn-bg; + box-sizing: border-box; + position: relative; + outline: 0; + border: 0; + display: inline-block; + align-items: center; + padding: 0 6px; + margin: 6px 8px; + line-height: 36px; + min-height: 36px; + white-space: nowrap; + min-width: 88px; + text-align: center; + text-transform: uppercase; + font-size: 14px; + text-decoration: none; + cursor: pointer; + + color: @alertify-btn-fg; + border: 1px solid @alertify-base; + border-radius: 5px; + + &.safe, &.danger { + color: @colortheme_old-base; + white-space: normal; + font-weight: bold; + } + &.danger { + background-color: @colortheme_cp-red; + &:hover, &:active { + background-color: lighten(@colortheme_cp-red, 5%); + } + } + + &.safe { + background-color: @colortheme_cp-green; + &:hover, &:active { + background-color: lighten(@colortheme_cp-green, 10%); + } + } + + &:hover, &:active { + background-color: @alertify-btn-bg-hover; + } + + &:focus { + border: 1px dotted @alertify-base; + } + &::-moz-focus-inner { + border:0; + } + } + + button.btn { + margin: 6px 4px; + } + } + } + } + + .alertify-logs { + + position: fixed; + z-index: 99999; + + &.bottom, &:not(.top) { + bottom: 16px; + // Bottom left placement. Default. Use for transitions. + &.left, &:not(.right) { + > * { + + } + } + // Top right placement + &.right { + > * { + + } + } + } + + // All left positions. + &.left, &:not(.right) { + left: 16px; + > * { + float: left; + transform: translate3d(0, 0, 0); + height: auto; + + &.show { + left: 0; + } + &, &.hide { + left: -110%; + } + } + } + + &.right { + right: 16px; + > * { + float: right; + transform: translate3d(0, 0, 0); + &.show { + right: 0; + opacity: 1; + } + &, &.hide { + right: -110%; + opacity: 0; + } + } + } + + &.top { + top: 0; + // Top left placement, use for transitions. + &.left, &:not(.right) { + > * { + + } + } + // Top right placement, use for transitions + &.right { + > * { + + } + } + } + + > * { + box-sizing: border-box; + transition: all .4s cubic-bezier(.25, .8, .25, 1); + position: relative; + clear: both; + backface-visibility: hidden; + perspective: 1000; + + & { + max-height: 0; + margin: 0; + padding: 0; + overflow: hidden; + opacity: 0; + pointer-events: none; + } + + &.show { + margin-top: @alertify_padding-base; + opacity: 1; + max-height: 1000px; + padding: @alertify_padding-base; + pointer-events: auto; + } + } + + } +} diff --git a/customize.dist/src/less2/include/browser.less b/customize.dist/src/less2/include/browser.less new file mode 100644 index 000000000..449244387 --- /dev/null +++ b/customize.dist/src/less2/include/browser.less @@ -0,0 +1,9 @@ +// These things are not for design but rather for working in different browser +// types and window sizes + +@browser_media-not-big: 800px; +@browser_media-not-small: 801px; + +@browser_media-short-screen: 450px; +@browser_media-narrow-screen: 400px; +@browser_media-medium-screen: 600px; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 3ece30827..268a26922 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -2,6 +2,14 @@ @colortheme_link-color-visited: #005999; @colortheme_info-background: #fafafa; +@colortheme_old-base: #302B28; +@colortheme_old-fore: #fafafa; + +@colortheme_base: #fff; +@colortheme_light-base: lighten(@colortheme_base, 20%); + +@colortheme_cp-red: #FA5858; // remove red +@colortheme_cp-green: #46E981; @colortheme_pad-bg: #1c4fa0; @colortheme_pad-color: #fff; @@ -34,4 +42,4 @@ @colortheme_settings-color: #fff; @colortheme_profile-bg: #0087ff; -@colortheme_profile-color: #fff; \ No newline at end of file +@colortheme_profile-color: #fff; diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less index 82832f792..1a62f0060 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/customize.dist/src/less2/pages/page-index.less @@ -62,43 +62,39 @@ //font-style: italic; } } -.cp-topbar { - //position: absolute; - background: transparent; +.navbar { + width: 100%; + margin-top: -1em; + @media only screen and (max-device-width: 991px) { + margin-top: 0; + } + .navbar-brand { + background: url(/customize/CryptPad-white-logo.svg) no-repeat; + width: 250px; + height: 50px; + } a { color: #fff; - padding: 0.5em 0.5em 0.5em 0.5em; + border: 2px solid transparent; + &:visited { + color: rgba(255,255,255,.8); + }; + } + .nav-link { + padding: 0.5em 0.7em; + &:hover { + transform: scale(1.05); + }; + } + .cp-register-btn { + border: 2px solid #fff; } button:focus { outline: none; } - .collapse { - a { - display: block; - } - } - .navbar-toggler-left { - top: -0.59rem; - } - .cp-left { - .fa-bars { - font-size: 1.6rem; - } - } - a.cp-logo { - display: none; - } - img { - height: 5vh; - margin-top: -4px; - } - &:hover { - img { - transform: none; - } - }; - a.cp-logo { - display: none; + .navbar-toggler { + margin-top: 10px; + color: #fff; } } @callout-padding: 15px; @@ -119,9 +115,9 @@ a:hover { color: black; &:hover { text-decoration-line: none; } } - div { + div h4 { @media only screen and (min-device-width: 576px) and (max-device-width: 767px) { - left: 4.5em !important; + font-size: 1.3em; } } } @@ -192,11 +188,6 @@ h4 { } } } -.navbar-inverse .navbar-toggler { - border-color: transparent; - margin-top: -12px; - padding: 0; -} @media (min-width: 576px) and (max-width: 767px) { .container { padding-left: 0; @@ -208,22 +199,25 @@ h4 { } @media (max-width: 991px) { #menuCollapse { - /*position: absolute; - left: -131px;*/ - margin-top: 0.5em; - text-align: right; - } - #menuCollapse a { - width: 100%; text-align: right; } .navbar-nav a { text-align: right !important; } - .cp-right .cp-login-btn { - padding: 0.5em; + .cp-register-btn { + margin-right: 13px; + margin-left: 83vw; + text-align: center; + } +} +@media (max-width: 687px) { + .cp-register-btn { + margin-left: 75vw; } } -.collapsing a { - text-align: right !important; +@media (max-width: 467px) { + .cp-register-btn { + margin-left: 63vw; + } } + diff --git a/customize.dist/src/less2/pages/page-login.less b/customize.dist/src/less2/pages/page-login.less index 6909ecdc7..8bfc79c5c 100644 --- a/customize.dist/src/less2/pages/page-login.less +++ b/customize.dist/src/less2/pages/page-login.less @@ -1,8 +1,10 @@ @import (once) "../include/infopages.less"; @import (once) "../include/colortheme.less"; +@import (once) "../include/alertify.less"; .infopages_main(); .infopages_topbar(); +.alertify_main(); .form-group { .extra { diff --git a/customize.dist/src/less2/pages/page-register.less b/customize.dist/src/less2/pages/page-register.less index e057e2b20..fc54a3073 100644 --- a/customize.dist/src/less2/pages/page-register.less +++ b/customize.dist/src/less2/pages/page-register.less @@ -1,8 +1,10 @@ @import (once) "../include/infopages.less"; @import (once) "../include/colortheme.less"; +@import (once) "../include/alertify.less"; .infopages_main(); .infopages_topbar(); +.alertify_main(); .cp-container { .form-group {