diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less
index b845a5d6f..5307a68bf 100644
--- a/customize.dist/src/less2/include/alertify.less
+++ b/customize.dist/src/less2/include/alertify.less
@@ -12,14 +12,11 @@
@alertify-btn-fg: @alertify-fore;
- @alertify-btn-bg: rgba(200, 200, 200, 0.1);
- @alertify-btn-bg-hover: rgba(200, 200, 200, .3);
-
@alertify-bg: @colortheme_modal-dim;
@alertify-fg: @alertify-fore;
@alertify-input-bg: @colortheme_modal-input;
- @alertify-input-fg: @colortheme_modal-fg;
+ @alertify-input-fg: @colortheme_modal-input-fg;
@alertify_padding-base: @variables_padding;
@alertify_box-shadow: @variables_shadow;
@@ -113,7 +110,7 @@
.dialog, .alert {
.bright {
- color: @colortheme_light-base;
+ //color: @colortheme_light-base;
}
& > div {
@@ -227,7 +224,7 @@
button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
- background-color: @alertify-btn-bg;
+ background-color: @colortheme_alertify-cancel;
box-sizing: border-box;
position: relative;
outline: 0;
@@ -247,7 +244,7 @@
border-radius: 0;
color: @alertify-btn-fg;
- border: 1px solid transparent;
+ border: 1px solid @colortheme_alertify-cancel-border;
&.safe, &.danger {
color: @colortheme_old-base;
@@ -256,28 +253,32 @@
}
&.danger {
background-color: @colortheme_alertify-red;
+ border-color: @colortheme_alertify-red-border;
&:hover, &:active {
- background-color: lighten(@colortheme_alertify-red, 5%);
+ background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%));
}
}
&.safe {
background-color: @colortheme_alertify-green;
+ border-color: @colortheme_alertify-green-border;
&:hover, &:active {
- background-color: lighten(@colortheme_alertify-green, 10%);
+ background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-green, 10%), lighten(@colortheme_alertify-green, 10%));
}
}
&.primary {
background-color: @colortheme_alertify-primary;
color: @colortheme_alertify-primary-text;
+ border-color: @colortheme_alertify-primary-border;
+ font-weight: bold;
&:hover, &:active {
- background-color: darken(@colortheme_alertify-primary, 10%);
+ background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-primary, 10%), lighten(@colortheme_alertify-primary, 10%));
}
}
&:hover, &:active {
- background-color: @alertify-btn-bg-hover;
+ background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-cancel, 10%), lighten(@colortheme_alertify-cancel, 10%));
}
&:focus {
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index 2d785a74f..43b8cf0f6 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -26,24 +26,32 @@
@colortheme_form-warning: #f49842;
@colortheme_form-warning-hov: darken(@colortheme_form-warning, 5%);
-@colortheme_modal-bg: #222;
-@colortheme_modal-fg: #fff;
+@colortheme_modal-bg: @colortheme_form-bg-alt; // TODO Modals bg
+@colortheme_modal-fg: @colortheme_form-color-alt;
@colortheme_modal-link: #eee;
@colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%);
-@colortheme_modal-dim: rgba(0, 0, 0, 0.4);
+@colortheme_modal-dim: fade(@colortheme_logo-2, 50%); // TODO transparent background behind modals
+@colortheme_modal-input: @colortheme_form-bg;
+@colortheme_modal-input-fg: @colortheme_form-color;
@colortheme_loading-bg: @colortheme_logo-1;
@colortheme_loading-bg-alt: @colortheme_logo-2;
@colortheme_loading-color: @colortheme_old-fore;
-@colortheme_modal-input: #111;
+// TODO modals buttons
@colortheme_alertify-red: #E55236;
+@colortheme_alertify-red-border: transparent;
@colortheme_alertify-green: #77C825;
-@colortheme_alertify-primary: #fff;
-@colortheme_alertify-primary-text: #000;
+@colortheme_alertify-green-border: transparent;
+@colortheme_alertify-primary: @colortheme_form-bg;
+@colortheme_alertify-primary-text: @colortheme_form-color;
+@colortheme_alertify-primary-border: transparent;
+@colortheme_alertify-cancel: @colortheme_modal-bg;
+@colortheme_alertify-cancel-border: #ccc;
@colortheme_notification-log: rgba(0, 0, 0, 0.8);
+@colortheme_notification-log: fade(@colortheme_logo-1, 90%);
@colortheme_notification-warn: rgba(205, 37, 50, 0.8);
@colortheme_dropdown-bg: #f9f9f9;
diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less
index afe8874ba..59941044e 100644
--- a/customize.dist/src/less2/include/creation.less
+++ b/customize.dist/src/less2/include/creation.less
@@ -12,9 +12,6 @@
@colortheme_creation-modal: #666;
@colortheme_creation-modal-title: @colortheme_loading-bg;
- .tippy-popper {
- z-index: 100000001 !important;
- }
#cp-creation-container {
position: absolute;
z-index: 100000000; // #loading * 10
diff --git a/customize.dist/src/less2/include/icons.less b/customize.dist/src/less2/include/icons.less
index 03a6af5ab..820a238c4 100644
--- a/customize.dist/src/less2/include/icons.less
+++ b/customize.dist/src/less2/include/icons.less
@@ -10,7 +10,6 @@
text-overflow: ellipsis;
padding-top: 5px;
padding-bottom: 5px;
- border: 1px solid white;
.cp-icons-name {
width: 100%;
diff --git a/customize.dist/src/less2/include/modal.less b/customize.dist/src/less2/include/modal.less
index 3bd674527..e7e39ad96 100644
--- a/customize.dist/src/less2/include/modal.less
+++ b/customize.dist/src/less2/include/modal.less
@@ -57,7 +57,7 @@
input {
background-color: @colortheme_modal-input;
- color: @colortheme_modal-fg;
+ color: @colortheme_modal-input-fg;
border: 0;
padding: 8px 12px;
margin: 1em;
diff --git a/customize.dist/src/less2/include/tippy.less b/customize.dist/src/less2/include/tippy.less
index 72ceaa822..d13cc11f3 100644
--- a/customize.dist/src/less2/include/tippy.less
+++ b/customize.dist/src/less2/include/tippy.less
@@ -5,9 +5,7 @@
/* Your styling here. Example: */
background-color: white;
box-shadow: 2px 2px 10px #000;
- //border: 1px solid #BBB;
- //border-radius: 0;
- //border: 2px solid orange;
+ box-shadow: 2px 2px 5px #000;
font-weight: bold;
color: #333;
[x-circle] {
diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 50c51f611..602868fe4 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -183,8 +183,13 @@
#cp-app-toolbar-creation-dialog.cp-modal-container {
.icons_main();
- li:hover {
- border: 1px solid white;
+ li {
+ border: 1px solid @colortheme_modal-fg;
+ &:hover {
+ //border: 1px solid @colortheme_modal-fg;
+ background: @colortheme_modal-fg;
+ color: @colortheme_modal-bg;
+ }
}
.cp-modal {
display: flex;
diff --git a/www/common/common-interface.js b/www/common/common-interface.js
index 24058199b..bf6bc41e4 100644
--- a/www/common/common-interface.js
+++ b/www/common/common-interface.js
@@ -23,7 +23,7 @@ define([
UI.Alertify = Alertify;
// set notification timeout
- Alertify._$$alertify.delay = AppConfig.notificationTimeout || 5000;
+ Alertify._$$alertify.delay = 6000000 || AppConfig.notificationTimeout || 5000;
var findCancelButton = UI.findCancelButton = function (root) {
if (root) {
@@ -557,9 +557,9 @@ define([
$loading.removeClass('cp-loading-hidden');
$('.cp-loading-spinner-container').show();
if (loadingText) {
- $('#' + LOADING).find('p').text(loadingText);
+ $('#' + LOADING).find('p').show().text(loadingText);
} else {
- $('#' + LOADING).find('p').text('');
+ $('#' + LOADING).find('p').hide().text('');
}
$container = $loading.find('.cp-loading-container');
} else {
@@ -610,8 +610,8 @@ define([
}
$('.cp-loading-spinner-container').hide();
$('#cp-loading-tip').remove();
- if (transparent) { $('#' + LOADING).css('opacity', 0.8); }
- $('#' + LOADING).find('p').html(error || Messages.error);
+ if (transparent) { $('#' + LOADING).css('opacity', 0.9); }
+ $('#' + LOADING).find('p').show().html(error || Messages.error);
if (exitable) {
$(window).focus();
$(window).keydown(function (e) {
@@ -677,6 +677,7 @@ define([
},
//arrowType: 'round',
arrowTransform: 'scale(2)',
+ zIndex: 100000001
});
UI.addTooltips = function () {
var MutationObserver = window.MutationObserver;
diff --git a/www/common/loading.js b/www/common/loading.js
index 6febf0450..c45dabdcd 100644
--- a/www/common/loading.js
+++ b/www/common/loading.js
@@ -72,6 +72,13 @@ define([], function () {
#cp-loading .cp-loading-cryptofist {
}
}
+#cp-loading-message {
+ background: #FFF;
+ padding: 20px;
+ width: 100%;
+ color: #000;
+ display: none;
+}
#cp-loading .cp-loading-spinner-container {
position: relative;
height: 100px;
@@ -120,7 +127,7 @@ define([], function () {
'',
'',
'
',
- //'',
+ '',
''
].join('');
var intr;
diff --git a/www/file/app-file.less b/www/file/app-file.less
index 444e5777b..a0141293b 100644
--- a/www/file/app-file.less
+++ b/www/file/app-file.less
@@ -12,11 +12,6 @@
@button-border: 2px;
-/*html, body {
- margin: 0px;
- height: 100%;
-}*/
-
// body
display: flex;
flex-flow: column;
diff --git a/www/filepicker/app-filepicker.less b/www/filepicker/app-filepicker.less
index df1fec8fb..ca59ebe57 100644
--- a/www/filepicker/app-filepicker.less
+++ b/www/filepicker/app-filepicker.less
@@ -36,7 +36,8 @@
line-height: 1em;
cursor: pointer;
- background-color: #111;
+ background-color: @colortheme_modal-bg;
+ box-shadow: 2px 2px 5px #000;
color: @darker;
transition: all 0.1s;