diff --git a/customize.dist/alt-favicon.png b/customize.dist/alt-favicon.png index 3981f6b84..52ec0a4bc 100644 Binary files a/customize.dist/alt-favicon.png and b/customize.dist/alt-favicon.png differ 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-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 {