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-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-bg: @colortheme_modal-dim;
@alertify-fg: @alertify-fore; @alertify-fg: @alertify-fore;
@alertify-input-bg: @colortheme_modal-input; @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_padding-base: @variables_padding;
@alertify_box-shadow: @variables_shadow; @alertify_box-shadow: @variables_shadow;
@ -113,7 +110,7 @@
.dialog, .alert { .dialog, .alert {
.bright { .bright {
color: @colortheme_light-base; //color: @colortheme_light-base;
} }
& > div { & > div {
@ -227,7 +224,7 @@
button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) { 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; box-sizing: border-box;
position: relative; position: relative;
outline: 0; outline: 0;
@ -247,7 +244,7 @@
border-radius: 0; border-radius: 0;
color: @alertify-btn-fg; color: @alertify-btn-fg;
border: 1px solid transparent; border: 1px solid @colortheme_alertify-cancel-border;
&.safe, &.danger { &.safe, &.danger {
color: @colortheme_old-base; color: @colortheme_old-base;
@ -256,28 +253,32 @@
} }
&.danger { &.danger {
background-color: @colortheme_alertify-red; background-color: @colortheme_alertify-red;
border-color: @colortheme_alertify-red-border;
&:hover, &:active { &: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 { &.safe {
background-color: @colortheme_alertify-green; background-color: @colortheme_alertify-green;
border-color: @colortheme_alertify-green-border;
&:hover, &:active { &: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 { &.primary {
background-color: @colortheme_alertify-primary; background-color: @colortheme_alertify-primary;
color: @colortheme_alertify-primary-text; color: @colortheme_alertify-primary-text;
border-color: @colortheme_alertify-primary-border;
font-weight: bold;
&:hover, &:active { &: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 { &: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 { &:focus {

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

@ -26,24 +26,32 @@
@colortheme_form-warning: #f49842; @colortheme_form-warning: #f49842;
@colortheme_form-warning-hov: darken(@colortheme_form-warning, 5%); @colortheme_form-warning-hov: darken(@colortheme_form-warning, 5%);
@colortheme_modal-bg: #222; @colortheme_modal-bg: @colortheme_form-bg-alt; // TODO Modals bg
@colortheme_modal-fg: #fff; @colortheme_modal-fg: @colortheme_form-color-alt;
@colortheme_modal-link: #eee; @colortheme_modal-link: #eee;
@colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%); @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: @colortheme_logo-1;
@colortheme_loading-bg-alt: @colortheme_logo-2; @colortheme_loading-bg-alt: @colortheme_logo-2;
@colortheme_loading-color: @colortheme_old-fore; @colortheme_loading-color: @colortheme_old-fore;
@colortheme_modal-input: #111;
// TODO modals buttons
@colortheme_alertify-red: #E55236; @colortheme_alertify-red: #E55236;
@colortheme_alertify-red-border: transparent;
@colortheme_alertify-green: #77C825; @colortheme_alertify-green: #77C825;
@colortheme_alertify-primary: #fff; @colortheme_alertify-green-border: transparent;
@colortheme_alertify-primary-text: #000; @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: rgba(0, 0, 0, 0.8);
@colortheme_notification-log: fade(@colortheme_logo-1, 90%);
@colortheme_notification-warn: rgba(205, 37, 50, 0.8); @colortheme_notification-warn: rgba(205, 37, 50, 0.8);
@colortheme_dropdown-bg: #f9f9f9; @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: #666;
@colortheme_creation-modal-title: @colortheme_loading-bg; @colortheme_creation-modal-title: @colortheme_loading-bg;
.tippy-popper {
z-index: 100000001 !important;
}
#cp-creation-container { #cp-creation-container {
position: absolute; position: absolute;
z-index: 100000000; // #loading * 10 z-index: 100000000; // #loading * 10

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

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

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

@ -57,7 +57,7 @@
input { input {
background-color: @colortheme_modal-input; background-color: @colortheme_modal-input;
color: @colortheme_modal-fg; color: @colortheme_modal-input-fg;
border: 0; border: 0;
padding: 8px 12px; padding: 8px 12px;
margin: 1em; margin: 1em;

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

@ -5,9 +5,7 @@
/* Your styling here. Example: */ /* Your styling here. Example: */
background-color: white; background-color: white;
box-shadow: 2px 2px 10px #000; box-shadow: 2px 2px 10px #000;
//border: 1px solid #BBB; box-shadow: 2px 2px 5px #000;
//border-radius: 0;
//border: 2px solid orange;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
[x-circle] { [x-circle] {

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

@ -183,8 +183,13 @@
#cp-app-toolbar-creation-dialog.cp-modal-container { #cp-app-toolbar-creation-dialog.cp-modal-container {
.icons_main(); .icons_main();
li:hover { li {
border: 1px solid white; border: 1px solid @colortheme_modal-fg;
&:hover {
//border: 1px solid @colortheme_modal-fg;
background: @colortheme_modal-fg;
color: @colortheme_modal-bg;
}
} }
.cp-modal { .cp-modal {
display: flex; display: flex;

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

@ -23,7 +23,7 @@ define([
UI.Alertify = Alertify; UI.Alertify = Alertify;
// set notification timeout // set notification timeout
Alertify._$$alertify.delay = AppConfig.notificationTimeout || 5000; Alertify._$$alertify.delay = 6000000 || AppConfig.notificationTimeout || 5000;
var findCancelButton = UI.findCancelButton = function (root) { var findCancelButton = UI.findCancelButton = function (root) {
if (root) { if (root) {
@ -557,9 +557,9 @@ define([
$loading.removeClass('cp-loading-hidden'); $loading.removeClass('cp-loading-hidden');
$('.cp-loading-spinner-container').show(); $('.cp-loading-spinner-container').show();
if (loadingText) { if (loadingText) {
$('#' + LOADING).find('p').text(loadingText); $('#' + LOADING).find('p').show().text(loadingText);
} else { } else {
$('#' + LOADING).find('p').text(''); $('#' + LOADING).find('p').hide().text('');
} }
$container = $loading.find('.cp-loading-container'); $container = $loading.find('.cp-loading-container');
} else { } else {
@ -610,8 +610,8 @@ define([
} }
$('.cp-loading-spinner-container').hide(); $('.cp-loading-spinner-container').hide();
$('#cp-loading-tip').remove(); $('#cp-loading-tip').remove();
if (transparent) { $('#' + LOADING).css('opacity', 0.8); } if (transparent) { $('#' + LOADING).css('opacity', 0.9); }
$('#' + LOADING).find('p').html(error || Messages.error); $('#' + LOADING).find('p').show().html(error || Messages.error);
if (exitable) { if (exitable) {
$(window).focus(); $(window).focus();
$(window).keydown(function (e) { $(window).keydown(function (e) {
@ -677,6 +677,7 @@ define([
}, },
//arrowType: 'round', //arrowType: 'round',
arrowTransform: 'scale(2)', arrowTransform: 'scale(2)',
zIndex: 100000001
}); });
UI.addTooltips = function () { UI.addTooltips = function () {
var MutationObserver = window.MutationObserver; var MutationObserver = window.MutationObserver;

9
www/common/loading.js
View File

@ -72,6 +72,13 @@ define([], function () {
#cp-loading .cp-loading-cryptofist { #cp-loading .cp-loading-cryptofist {
} }
} }
#cp-loading-message {
background: #FFF;
padding: 20px;
width: 100%;
color: #000;
display: none;
}
#cp-loading .cp-loading-spinner-container { #cp-loading .cp-loading-spinner-container {
position: relative; position: relative;
height: 100px; height: 100px;
@ -120,7 +127,7 @@ define([], function () {
'<div class="cp-loading-spinner-container">', '<div class="cp-loading-spinner-container">',
'<span class="fa fa-circle-o-notch fa-spin fa-4x fa-fw"></span>', '<span class="fa fa-circle-o-notch fa-spin fa-4x fa-fw"></span>',
'</div>', '</div>',
//'<p id="cp-loading-message"></p>', '<p id="cp-loading-message"></p>',
'</div>' '</div>'
].join(''); ].join('');
var intr; var intr;

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

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

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

@ -36,7 +36,8 @@
line-height: 1em; line-height: 1em;
cursor: pointer; cursor: pointer;
background-color: #111; background-color: @colortheme_modal-bg;
box-shadow: 2px 2px 5px #000;
color: @darker; color: @darker;
transition: all 0.1s; transition: all 0.1s;