Dark toolbar and apps

pull/1/head
David Benqué 4 years ago
parent 7d9f769056
commit 16e4b76f4b

@ -69,9 +69,10 @@
@cryptpad_color_green_fade: fade(@cryptpad_color_green, 50%);
@cryptpad_color_light_green: #c5ffa8;
@cryptpad_color_light_yellow: darken(#FFE69C, 75%);
@cryptpad_color_yellow_fade: fade(#FFE69C, 50%);
@cryptpad_color_lighter_blue: #d2e1f2; // XXX replace with @cryptpad_color_brand_fadest
@cryptpad_color_link: #0275D8;
@cryptpad_color_link:@cryptpad_color_brand_300;
// Premium plans colors
@cryptpad_color_basic: darken(desaturate(#DDEFFF, 70%), 75%);
@ -118,8 +119,9 @@
@cp_forms-disabled: @cryptpad_color_grey_500;
// Buttons
@cp_buttons-fg: @cryptpad_color_brand;
@cp_buttons-default: #CCC;
@cp_buttons-fg: @cryptpad_color_brand_300;
@cp_buttons-hover: @cryptpad_color_brand_fadest;
@cp_buttons-default: @cryptpad_color_grey_700;
@cp_buttons-default-color: @cryptpad_text_col;
@cp_buttons-default-border: @cryptpad_text_col;
@cp_buttons-red: #E55236;
@ -131,8 +133,8 @@
@cp_buttons-disabled: #6c757d;
@cp_buttons-disabled-text: #ffffff;
@cp_buttons-disabled-border: #6c757d;
@cp_buttons-cancel: #ffffff;
@cp_buttons-cancel-border: #949494;
@cp_buttons-cancel: transparent;
@cp_buttons-cancel-border: @cryptpad_color_grey_400;
// Sidebar layout
@cp_sidebar-left-bg: @cryptpad_color_grey_800;
@ -182,11 +184,11 @@
@cp_dropdown-bg-active: @cryptpad_color_grey_600;
// Rendered Markdown
@cp_markdown-bg: @cryptpad_color_lighter_grey;
@cp_markdown-border: @cryptpad_color_grey;
@cp_markdown-bg: @cryptpad_color_grey_900;
@cp_markdown-border: @cryptpad_color_grey_700;
// Avatar
@cp_avatar-bg: @cryptpad_color_grey;
@cp_avatar-bg: @cryptpad_color_grey_700;
@cp_avatar-fg: @cryptpad_text_col;
// Comments
@ -214,12 +216,12 @@
@cp_export-error-bg2: @cryptpad_color_neutral2_grey;
// File upload
@cp_upload-fg: @cryptpad_color_brand;
@cp_upload-header: @cryptpad_color_help_grey;
@cp_upload-progress: @cryptpad_color_help_grey;
@cp_upload-fg: @cryptpad_color_brand_300;
@cp_upload-header: @cryptpad_color_grey_700;
@cp_upload-progress: @cryptpad_color_grey_700;
// Help
@cp_help-bg: @cryptpad_color_help_grey;
@cp_help-bg: @cryptpad_color_grey_700;
@cp_help-fg: @cryptpad_text_col;
@cp_help-link: @cryptpad_color_link;
@ -261,8 +263,8 @@
@cp_toolbar-bottom-fg: @cryptpad_text_col;
@cp_toolbar-logo-bg: @cryptpad_color_grey_200;
@cp_toolbar-fade1: fade(@cryptpad_color_black, 10%);
@cp_toolbar-fade3: fade(@cryptpad_color_black, 30%);
@cp_toolbar-fade1: fade(@cryptpad_text_col, 10%);
@cp_toolbar-fade3: fade(@cryptpad_text_col, 30%);
@cp_toolbar-warn: @cp_buttons-red;
@cp_history-line-bg: @cryptpad_color_white;
@ -285,7 +287,7 @@
@cp_shadow-color: fade(@cryptpad_color_black, 60%);
// Apps
@cp_app-bg: @cryptpad_color_light_grey;
@cp_app-bg: @cryptpad_color_grey_900;
@cp_app-fg: @cryptpad_text_col;
// Accounts
@ -311,7 +313,7 @@
@cp_admin-last-bg: lighten(@cryptpad_color_orange, 25%);
// Code
@cp_preview-bg: @cryptpad_color_light_grey;
@cp_preview-bg: @cryptpad_color_grey_900;
@cp_preview-fg: @cryptpad_text_col;
// Debug
@ -328,13 +330,13 @@
// Kanban
@cp_kanban-fg: @cryptpad_text_col;
@cp_kanban-item-bg: @cryptpad_color_light_grey;
@cp_kanban-board-bg: @cryptpad_color_help_grey;
@cp_kanban-item-bg: @cryptpad_color_grey_800;
@cp_kanban-board-bg: @cryptpad_color_grey_700;
@cp_kanban-conflict-bg: @cryptpad_color_toolbar_grey;
@cp_kanban-tags-bg: @cryptpad_color_help_grey;
@cp_kanban-tags-bg: @cryptpad_color_grey_700;
@cp_kanban-add-hover: fade(@cryptpad_color_black, 10%);
@cp_kanban-trash-bg: @cryptpad_color_warn_red;
@cp_kanban-color0: @cryptpad_color_neutral2_grey;
@cp_kanban-color0: @cryptpad_color_grey_600;
@cp_kanban-colors: darken(#FFD4D4,75%), darken(#FFDECA, 75%), darken(#FFE69C,75%), darken(#DBFFB7,75%), darken(#AFFDC2,75%), darken(#C9FFFE,75%), darken(#C8D6FF,75%), darken(#E4CAFF,75%);
// Notifications
@ -353,15 +355,15 @@
@cp_pad-icon-filter: invert();
// Poll
@cp_poll-th-bg: @cryptpad_color_lighter_blue;
@cp_poll-th-bg: @cryptpad_color_brand_fadest;
@cp_poll-th-fg: @cryptpad_text_col;
@cp_poll-uncommitted-bg: @cryptpad_color_toolbar_grey;
@cp_poll-border-color: @cryptpad_color_hint_grey;
@cp_poll-uncommitted-bg: @cryptpad_color_grey_800;
@cp_poll-border-color: @cryptpad_color_grey_600;
@cp_poll-cell-fg: @cryptpad_text_col;
@cp_poll-unset: @cryptpad_color_help_grey;
@cp_poll-unset: @cryptpad_color_grey_700;
@cp_poll-yes: @cryptpad_color_green_fade;
@cp_poll-no: @cryptpad_color_red_fade;
@cp_poll-maybe: @cryptpad_color_light_yellow;
@cp_poll-maybe: @cryptpad_color_grey_600;
@cp_poll-hint: @cryptpad_color_dark_grey;
// Profile

@ -119,6 +119,7 @@
// Buttons
@cp_buttons-fg: @cryptpad_color_brand;
@cp_buttons-hover: @cryptpad_color_brand_fadest;
@cp_buttons-default: #CCC;
@cp_buttons-default-color: @cryptpad_text_col;
@cp_buttons-default-border: @cryptpad_text_col;

@ -116,7 +116,7 @@
&:hover, &:not(:disabled):not(.disabled):active, &:focus {
color: @cp_buttons-fg;
border: 1px solid @cp_buttons-fg;
background-color: lighten(@cp_buttons-fg, 35%);
background-color: @cp_buttons-hover;
}
&.btn-default {

@ -16,6 +16,7 @@
.cp-help-close {
position: absolute;
color: @cryptpad_text_col;
top: 5px;
right: 5px;
cursor: pointer;
@ -26,6 +27,7 @@
padding: 5px 15px;
a {
color: @cp_help-link;
text-decoration: underline;
}
h1 {
font-size: 20px;

@ -350,8 +350,9 @@
}
.cp-toolbar-userlist-button {
background: transparent;
color: @cryptpad_text_col;
&:hover {
color: contrast(@cp_toolbar-bg, lighten(@cp_toolbar-fg, 10%), darken(@cp_toolbar-fg, 10%));
color: contrast(@cp_toolbar-bg, darken(@cp_toolbar-fg, 10%), lighten(@cp_toolbar-fg, 10%));
}
}
}

@ -948,7 +948,7 @@ define([
$d.append(changePass);
}
if (owned) {
var deleteOwned = h('button.btn.btn-danger-alt', [h('i.cptools.cptools-destroy'), Messages.fc_delete_owned]);
var deleteOwned = h('button.btn.btn-danger', [h('i.cptools.cptools-destroy'), Messages.fc_delete_owned]);
var spinner = UI.makeSpinner();
UI.confirmButton(deleteOwned, {
classes: 'btn-danger'

@ -41,6 +41,7 @@
display: flex;
flex: 1;
min-height: 0;
background-color: @cp_app-bg;
#cp-app-poll-form {
flex: 1;
overflow-y: auto;
@ -451,6 +452,7 @@
box-sizing: border-box;
padding: 1px 5px;
margin: 1px;
margin-bottom: 5px;
&[disabled] {
color: @poll-th-fg;
}

@ -310,7 +310,7 @@ define([
var $nav = $('<nav>').appendTo($div);
$('<button>', {'class': 'btn cancel'}).text(Messages.cancelButton).appendTo($nav).click(todoCancel);
$('<button>', {'class': 'btn ok'}).text(Messages.settings_save).appendTo($nav).click(todo);
$('<button>', {'class': 'btn primary'}).text(Messages.settings_save).appendTo($nav).click(todo);
return $container;
};

Loading…
Cancel
Save