web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

New colortheme for alertify logs and modals

Browse Source
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
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;