diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index 16688f179..8bc53a2a0 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/customize.dist/src/less2/include/alertify.less @@ -3,6 +3,7 @@ @import (once) "./modal-theme.less"; .alertify_main () { + @max-z-index: 2147483647; @alertify-fore: @colortheme_modal-fg; @alertify-base: @colortheme_modal-bg; @@ -27,7 +28,7 @@ // These show only once .alertify-logs { - z-index:10000; + z-index:10000; // alertify logs @media print { visibility: hidden; } @@ -63,7 +64,10 @@ bottom: 0; width: 100%; height: 100%; - z-index: 99999; + z-index: 99999; // alertify container + &.forefront { + z-index: @max-z-index; // alertify max forefront + } .message { h1, h2, h3, h4, h5, h6 { @@ -236,7 +240,7 @@ .alertify-logs { position: fixed; - z-index: 99999; + z-index: 99999; // alertify logs &.bottom, &:not(.top) { bottom: 16px; diff --git a/customize.dist/src/less2/loading.less b/customize.dist/src/less2/loading.less new file mode 100644 index 000000000..d70c1f65e --- /dev/null +++ b/customize.dist/src/less2/loading.less @@ -0,0 +1,61 @@ +@import (once) "./include/colortheme.less"; +@import (once) "./include/browser.less"; + +#cp-loading { + position: fixed; + z-index: 9999999; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + background: @colortheme_loading-bg; + color: @colortheme_loading-color; + text-align: center; + font-size: 1.5em; + .cp-loading-container { + margin-top: 50vh; + transform: translateY(-50%); + } + .cp-loading-cryptofist { + margin-left: auto; + margin-right: auto; + height: 300px; + margin-bottom: 2em; + @media screen and (max-height: @browser_media-short-screen) { + display: none; + } + } + .cp-loading-spinner-container { + position: relative; + height: 100px; + > div { + height: 100px; + } + } +} +#cp-loading-tip { + position: fixed; + z-index: 99999; + top: 80%; + left: 0; + right: 0; + text-align: center; + + transition: opacity 750ms; + transition-delay: 3000ms; + @media screen and (max-height: @browser_media-medium-screen) { + display: none; + } + span { + background: @colortheme_loading-bg; + color: @colortheme_loading-color; + text-align: center; + font-size: 1.5em; + opacity: 0.7; + font-family: @colortheme_font; + padding: 15px; + max-width: 60%; + display: inline-block; + } +} + diff --git a/customize.dist/template.js b/customize.dist/template.js index d8f07da1a..1f79d7fe9 100644 --- a/customize.dist/template.js +++ b/customize.dist/template.js @@ -4,7 +4,7 @@ define([ '/common/cryptpad-common.js', '/customize/pages.js', - 'css!/bower_components/components-font-awesome/css/font-awesome.min.css', + 'less!/bower_components/components-font-awesome/css/font-awesome.min.css', ], function ($, h, Cryptpad, Pages) { $(function () { var $body = $('body'); diff --git a/www/code/inner.html b/www/code/inner.html index 6fad16db8..80d1cb707 100644 --- a/www/code/inner.html +++ b/www/code/inner.html @@ -2,7 +2,7 @@ - +