dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

New colortheme for alertify logs and modals

This commit is contained in:
yflory 2018-04-13 17:47:33 +02:00
parent 5ee5a93513
commit 52d6c9d468
11 changed files with 51 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
customize.dist/src/less2/include/alertify.less
View File

@ -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 {

20
customize.dist/src/less2/include/colortheme.less
View File

@ -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;

3
customize.dist/src/less2/include/creation.less
View File

@ -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

1
customize.dist/src/less2/include/icons.less
View File

@ -10,7 +10,6 @@
text-overflow: ellipsis;
padding-top: 5px;
padding-bottom: 5px;
border: 1px solid white;
.cp-icons-name {
width: 100%;

2
customize.dist/src/less2/include/modal.less
View File

@ -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;

4
customize.dist/src/less2/include/tippy.less
View File

@ -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] {

9
customize.dist/src/less2/include/toolbar.less
View File

@ -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;

11
www/common/common-interface.js
View File

@ -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;

9
www/common/loading.js
View File

@ -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 () {
'<div class="cp-loading-spinner-container">',
'<span class="fa fa-circle-o-notch fa-spin fa-4x fa-fw"></span>',
'</div>',
//'<p id="cp-loading-message"></p>',
'<p id="cp-loading-message"></p>',
'</div>'
].join('');
var intr;

5
www/file/app-file.less
View File

@ -12,11 +12,6 @@
@button-border: 2px;
/*html, body {
margin: 0px;
height: 100%;
}*/
// body
display: flex;
flex-flow: column;

3
www/filepicker/app-filepicker.less
View File

@ -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;