infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Move all color variables to colortheme.less

Browse Source
pull/1/head
yflory 4 years ago
parent 45dff2f5c4
commit baddf8ae11
30 changed files with 559 additions and 393 deletions
Show Stats Download Patch File Download Diff File

22
customize.dist/src/less2/include/checkmark.less
Unescape Escape View File

@ -1,4 +1,5 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (reference) "./tools.less";
.checkmark_vars( .checkmark_vars(
@size: 20px @size: 20px
@ -23,12 +24,12 @@
} }
& { & {
// XXX DARK // XXX DARK
@cp_checkmark-back0: @colortheme_form-bg-alt; @cp_checkmark-back0: @cp_forms-bg;
@cp_checkmark-back0-active: @colortheme_form-border; @cp_checkmark-back0-active: @cp_forms-disabled;
@cp_checkmark-back1: @colortheme_form-bg; @cp_checkmark-back1: @cp_forms-border;
@cp_checkmark-col1: @colortheme_form-color; @cp_checkmark-col1: @cp_forms-bg;
@cp_checkmark-back2: @colortheme_form-bg-alt; @cp_checkmark-back2: @cp_forms-bg;
@cp_checkmark-col2: @colortheme_form-color-alt; @cp_checkmark-col2: @cp_forms-border;
@cp_checkmark-disabled: @cp_forms-disabled; @cp_checkmark-disabled: @cp_forms-disabled;
.checkmark_vars(); .checkmark_vars();
@ -38,10 +39,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
-webkit-user-select: none; .tools_unselectable();
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
& > a { & > a {
margin-left: 0.25em; margin-left: 0.25em;
@ -103,7 +101,7 @@
background-color: @cp_checkmark-back0; background-color: @cp_checkmark-back0;
display: flex; display: flex;
justify-content: center; justify-content: center;
border: 1px solid @colortheme_form-border; border: 1px solid @cp_checkmark-disabled;
flex-shrink: 0; flex-shrink: 0;
&:after { &:after {
content: ""; content: "";
@ -196,7 +194,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 1px solid @colortheme_form-border; border: 1px solid @cp_checkmark-disabled;
flex-shrink: 0; flex-shrink: 0;
&:after { &:after {
display: none; display: none;

219
customize.dist/src/less2/include/colortheme-dark.less
Unescape Escape View File

@ -9,18 +9,17 @@
@colortheme_loading_bg: #E7E7E7; @colortheme_loading_bg: #E7E7E7;
@colortheme_link-color: #0275D8; @colortheme_link-color: #0275D8;
@colortheme_link-color-visited: #005999; @colortheme_link-color-visited: lighten(@colortheme_link-color, 10%);
@colortheme_info-background: #eeeeee; @colortheme_info-background: #eeeeee;
@colortheme_old-base: #302B28;
@colortheme_old-fore: #fafafa;
@colortheme_base: #fff; @colortheme_base: #fff;
@colortheme_light-base: lighten(@colortheme_base, 20%); @colortheme_light-base: lighten(@colortheme_base, 20%);
@colortheme_cp-red: #FA5858; // remove red @colortheme_cp-red: #FA5858; // remove red
@colortheme_cp-green: #46E981; @colortheme_cp-green: #46E981;
@colortheme_old-fore: #fafafa;
@colortheme_form-border: #bbbbbb; @colortheme_form-border: #bbbbbb;
@colortheme_form-bg: @colortheme_logo-2; @colortheme_form-bg: @colortheme_logo-2;
@colortheme_form-color: #ffffff; @colortheme_form-color: #ffffff;
@ -48,9 +47,6 @@
@colortheme_alertify-red: #E55236; @colortheme_alertify-red: #E55236;
@colortheme_alertify-red-color: #FFF; @colortheme_alertify-red-color: #FFF;
@colortheme_alertify-red-border: transparent; @colortheme_alertify-red-border: transparent;
@colortheme_alertify-green: #77C825;
@colortheme_alertify-green-color: #FFF;
@colortheme_alertify-green-border: transparent;
@colortheme_alertify-primary: @colortheme_form-bg; @colortheme_alertify-primary: @colortheme_form-bg;
@colortheme_alertify-primary-text: @colortheme_form-color; @colortheme_alertify-primary-text: @colortheme_form-color;
@colortheme_alertify-primary-border: transparent; @colortheme_alertify-primary-border: transparent;
@ -60,15 +56,8 @@
@colortheme_alertify-cancel: @colortheme_modal-bg; @colortheme_alertify-cancel: @colortheme_modal-bg;
@colortheme_alertify-cancel-border: #949494; @colortheme_alertify-cancel-border: #949494;
@colortheme_notification-log: fade(@colortheme_logo-2, 90%);
@colortheme_notification-color: #fff;;
@colortheme_notification-warn: rgba(205, 37, 50, 0.8); @colortheme_notification-warn: rgba(205, 37, 50, 0.8);
@colortheme_dropdown-bg: #f9f9f9;
@colortheme_dropdown-color: black;
@colortheme_dropdown-bg-hover: #f1f1f1;
@colortheme_dropdown-bg-active: #e8e8e8;
// Apps, these colors are used for customizing the toolbar for the apps. // Apps, these colors are used for customizing the toolbar for the apps.
@colortheme_toolbar-warn: @colortheme_alertify-red; @colortheme_toolbar-warn: @colortheme_alertify-red;
@colortheme_pad-toolbar-bg: #eeeeee; @colortheme_pad-toolbar-bg: #eeeeee;
@ -77,7 +66,7 @@
@colortheme_pad-chat-bg: #AAA; @colortheme_pad-chat-bg: #AAA;
@colortheme_apps: { @colortheme_apps: {
default: #000000; default: #0087FF;
drive: #0087FF; // Used as icon color in index.js (index.html) drive: #0087FF; // Used as icon color in index.js (index.html)
pad: #256ad5; pad: #256ad5;
code: #EAA000; code: #EAA000;
@ -92,7 +81,7 @@
} }
@colortheme_static_apps: { @colortheme_static_apps: {
default: #000000; default: #0087FF;
teams: #4A3BBD; teams: #4A3BBD;
contacts: #607B8D; contacts: #607B8D;
} }
@ -115,11 +104,8 @@
@colortheme_sidebar-button-alt-bg: #fff; @colortheme_sidebar-button-alt-bg: #fff;
@cryptpad_color_blue: #4591C4; @cryptpad_color_blue: #4591C4;
@cryptpad_color_grey: #999999;
@cryptpad_color_light_grey: #e0e0e0;
@cryptpad_header_col: #1E1F1F; @cryptpad_header_col: #1E1F1F;
@cryptpad_text_col: #3F4141; @cryptpad_text_col: #FFF-#3F4141;
@cryptpad_color_light_blue: #00b7d8;
@colortheme_checkmark-back0: @colortheme_form-bg-alt; @colortheme_checkmark-back0: @colortheme_form-bg-alt;
@colortheme_checkmark-back0-active: @colortheme_form-border; @colortheme_checkmark-back0-active: @colortheme_form-border;
@ -128,3 +114,196 @@
@colortheme_checkmark-back2: @colortheme_form-bg-alt; @colortheme_checkmark-back2: @colortheme_form-bg-alt;
@colortheme_checkmark-col2: @colortheme_form-color-alt; @colortheme_checkmark-col2: @colortheme_form-color-alt;
@colortheme_checkmark-disabled: #AAA; @colortheme_checkmark-disabled: #AAA;
// New variables
// Colors
@cryptpad_color_hint_grey: #FFF-#777;
@cryptpad_color_dark_grey: #FFF-#999999;
@cryptpad_color_neutral_grey: #FFF-#aaaaaa;
@cryptpad_color_neutral2_grey: #FFF-#cccccc;
@cryptpad_color_help_grey: #FFF-#dddddd;
@cryptpad_color_grey: #FFF-#e0e0e0;
@cryptpad_color_toolbar_grey: #FFF-#EEEEEE;
@cryptpad_color_light_grey: #FFF-#f1f1f1;
@cryptpad_color_lighter_grey: #FFF-#f9f9f9;
@cryptpad_color_light_blue: #FFF-#00b7d8;
@cryptpad_color_lighter_blue: #FFF-#d2e1f2;
@cryptpad_color_warn_red: #FFF-#eb675e;
@cryptpad_color_black: #FFF-#000;
@cryptpad_color_white: #FFF-#FFF;
@cryptpad_color_link: #FFF-#0275D8;
@cp_loading-bg: #FFF-#E7E7E7;
// Alertify
@cp_alertify-bg: @cryptpad_color_white;
@cp_alertify-fg: @colortheme_logo-2;
@cp_alertify-hover: fade(@cp_alertify-fg, 25%);
@cp_alertify-overlay: fade(@cryptpad_text_col, 50%);
@cp_alertify-log-bg: fade(@colortheme_logo-2, 90%);
@cp_alertify-log-fg: @cryptpad_color_white;
@cp_alertify-warn-bg: rgba(205, 37, 50);
// Forms
@cp_forms-fg: @cryptpad_text_col;
@cp_forms-bg: @cryptpad_color_white;
@cp_forms-border: @colortheme_logo-2;
@cp_forms-placeholder: @cryptpad_color_dark_grey;
@cp_forms-readonly: fade(@colortheme_logo-2, 25%);
@cp_forms-readonly-border: @cryptpad_color_white;
@cp_forms-disabled: #AAA;
// Buttons
@cp_buttons-fg: @colortheme_logo-2;
@cp_buttons-default: #CCC;
@cp_buttons-default-color: @cryptpad_text_col;
@cp_buttons-default-border: @cryptpad_text_col;
@cp_buttons-red: #E55236;
@cp_buttons-red-color: #FFF;
@cp_buttons-red-border: transparent;
@cp_buttons-primary: @colortheme_logo-2;
@cp_buttons-primary-text: #FFFFFF;
@cp_buttons-primary-border: transparent;
@cp_buttons-disabled: #6c757d;
@cp_buttons-disabled-text: #ffffff;
@cp_buttons-disabled-border: #6c757d;
@cp_buttons-cancel: #ffffff;
@cp_buttons-cancel-border: #949494;
// Sidebar layout
@cp_sidebar-left-bg: @cryptpad_color_grey;
@cp_sidebar-left-fg: @cryptpad_color_black;
@cp_sidebar-left-active: @cryptpad_color_white;
@cp_sidebar-right-bg: @cryptpad_color_white;
@cp_sidebar-right-fg: @cryptpad_text_col; // XXX was black
@cp_sidebar-hint: @cryptpad_color_hint_grey;
// Drive
@cp_drive-bg: @cryptpad_color_white;
@cp_drive-fg: @cryptpad_text_col;
@cp_drive-header-fg: @cryptpad_color_dark_grey;
@cp_drive-icon-hover: @cryptpad_color_grey;
@cp_drive-icon-border: @cryptpad_color_neutral2_grey;
@cp_drive-selected-bg: @cryptpad_color_dark_grey;
@cp_drive-selected-fg: contrast(@cp_drive-droppable-bg, @cryptpad_text_col, @cryptpad_color_light_grey);
@cp_drive-selection-overlay: fade(@cryptpad_color_black, 70%);
@cp_drive-selection-bg: @cryptpad_color_neutral_grey;
@cp_drive-selection-fg: @cryptpad_text_col;
@cp_drive-droppable-bg: @colortheme_logo-2;
@cp_drive-droppable-fg: contrast(@cp_drive-droppable-bg, @cryptpad_text_col, @cryptpad_color_light_grey);
@cp_drive-infobox-bg: @cryptpad_color_lighter_blue;
@cp_drive-infobox-fg: @cryptpad_color_black;
@cp_drive-warnbox-bg: @cryptpad_color_warn_red;
@cp_drive-warnbox-fg: @cryptpad_color_white;
@cp_drive-tree-branch: @cryptpad_color_dark_grey;
// Tooltip background
@cp_tooltip-bg: @cryptpad_color_grey;
@cp_tooltip-fg: @cryptpad_text_col;
// Dropdown
@cp_dropdown-fg: @cryptpad_text_col;
@cp_dropdown-bg: @cryptpad_color_lighter_grey;
@cp_dropdown-bg-hover: @cryptpad_color_light_grey;
@cp_dropdown-bg-active: @cryptpad_color_grey;
// Rendered Markdown
@cp_markdown-bg: @cryptpad_color_light_grey;
@cp_markdown-border: @cryptpad_color_grey;
// Avatar
@cp_avatar-bg: @cryptpad_color_grey;
@cp_avatar-fg: @cryptpad_text_col;
// Comments
@cp_comments-fg: @cryptpad_text_col;
@cp_comments-bg: @cryptpad_color_white;
@cp_comments-header: @cryptpad_color_dark_grey;
// Contextmenu
@cp_context-bg: @cryptpad_color_white;
@cp_context-bg-hover: @cryptpad_color_lighter_grey;
@cp_context-bg-active: @cryptpad_color_light_grey;
@cp_context-fg: @cryptpad_text_col;
@cp_context-icon: @cryptpad_color_dark_grey;
@cp_context-disabled: @cryptpad_color_neutral_grey;
// Corner
@cp_corner-primary: @colortheme_logo-1;
@cp_corner-secondary: @cryptpad_color_white;
// Pad Creation Screen
@cp_creation-bg: @cryptpad_color_white;
@cp_creation-fg: @cryptpad_text_col;
@cp_creation-button-bg: @colortheme_logo-2;
@cp_creation-button-fg: @cryptpad_color_white;
@cp_creation-error-bg: @colortheme_logo-1;
@cp_creation-error-fg: @cryptpad_color_light_grey;
// Export
@cp_export-bg: @cryptpad_color_white;
@cp_export-fg: @cryptpad_text_col;
@cp_export-hint: @cryptpad_color_hint_grey;
@cp_export-error-bg: @cryptpad_color_grey;
@cp_export-error-bg2: @cryptpad_color_neutral2_grey;
// File upload
@cp_upload-fg: @colortheme_logo-2;
@cp_upload-header: @cryptpad_color_help_grey;
@cp_upload-progress: @cryptpad_color_help_grey;
// Help
@cp_help-bg: @cryptpad_color_help_grey;
@cp_help-fg: @cryptpad_text_col;
@cp_help-link: @cryptpad_color_link;
// Static pages
@cp_static-bg: @cryptpad_color_grey;
@cp_static-fg: @cryptpad_text_col;
@cp_static-link: @colortheme_logo-2;
@cp_static-title: @colortheme_logo-2;
@cp_static-footer: @cryptpad_color_help_grey;
@cp_static-footer-border: @cryptpad_color_white;
@cp_static-topbar-fg: @colortheme_logo-2;
// Limit
@cp_limit-fg: @cryptpad_text_col;
// Mentions
@cp_mentions-bg: @cryptpad_color_grey;
@cp_mentions-hover: @cryptpad_color_help_grey;
// Modals
@cp_access-overlay: fade(@cryptpad_color_white, 50%);
@cp_snapshots-hover: @cryptpad_color_help_grey;
// Support
@cp_support-bg: @cryptpad_color_lighter_grey;
@cp_support-msg-bg: @cryptpad_color_grey;
@cp_support-header-bg: @cryptpad_color_help_grey;
// Toolbar
@cp_toolbar-bg: @cryptpad_color_toolbar_grey;
@cp_toolbar-fg: @cryptpad_text_col;
@cp_toolbar-bottom-fg: @cryptpad_text_col;
@cp_toolbar-fade1: fade(@cryptpad_color_black, 10%);
@cp_toolbar-fade3: fade(@cryptpad_color_black, 30%);
@cp_toolbar-warn: @cp_buttons-red;
@cp_history-line-bg: @cryptpad_color_white;
@cp_history-bg1: #DDD;
@cp_history-bg2: #BBB;
@cp_history-fg: @cp_toolbar-bottom-fg;
// Usergrid
@cp_usergrid-fg: @cryptpad_text_col;
@cp_usergrid-selected-bg: @colortheme_logo-2;
@cp_usergrid-selected-fg: @cryptpad_color_white;
// Other
@cp_shadow-color: rgba(0,0,0,0.4);

134
customize.dist/src/less2/include/colortheme.less
Unescape Escape View File

@ -118,13 +118,26 @@
// New variables // New variables
// Colors // Colors
@cryptpad_color_hint_grey: #777;
@cryptpad_color_dark_grey: #999999; @cryptpad_color_dark_grey: #999999;
@cryptpad_color_neutral_grey: #aaaaaa;
@cryptpad_color_neutral2_grey: #cccccc;
@cryptpad_color_help_grey: #dddddd;
@cryptpad_color_grey: #e0e0e0; @cryptpad_color_grey: #e0e0e0;
@cryptpad_color_toolbar_grey: #EEEEEE;
@cryptpad_color_light_grey: #f1f1f1; @cryptpad_color_light_grey: #f1f1f1;
@cryptpad_color_lighter_grey: #f9f9f9; @cryptpad_color_lighter_grey: #f9f9f9;
@cryptpad_color_light_blue: #00b7d8; @cryptpad_color_light_blue: #00b7d8;
@cryptpad_color_lighter_blue: #d2e1f2;
@cryptpad_color_warn_red: #eb675e;
@cryptpad_color_black: #000; @cryptpad_color_black: #000;
@cryptpad_color_white: #FFF; @cryptpad_color_white: #FFF;
@cryptpad_color_green: #5cb85c;
@cryptpad_color_link: #0275D8;
@cp_loading-bg: #E7E7E7;
// Alertify // Alertify
@cp_alertify-bg: @cryptpad_color_white; @cp_alertify-bg: @cryptpad_color_white;
@ -137,9 +150,11 @@
// Forms // Forms
@cp_forms-fg: @cryptpad_text_col; @cp_forms-fg: @cryptpad_text_col;
@cp_forms-bg: @cryptpad_color_white;
@cp_forms-border: @colortheme_logo-2; @cp_forms-border: @colortheme_logo-2;
@cp_forms-placeholder: @cryptpad_color_dark_grey; @cp_forms-placeholder: @cryptpad_color_dark_grey;
@cp_forms-readonly: fade(@colortheme_logo-2, 25%); @cp_forms-readonly: fade(@colortheme_logo-2, 25%);
@cp_forms-readonly-border: @cryptpad_color_white;
@cp_forms-disabled: #AAA; @cp_forms-disabled: #AAA;
// Buttons // Buttons
@ -150,15 +165,42 @@
@cp_buttons-red: #E55236; @cp_buttons-red: #E55236;
@cp_buttons-red-color: #FFF; @cp_buttons-red-color: #FFF;
@cp_buttons-red-border: transparent; @cp_buttons-red-border: transparent;
@cp_buttons-primary: @colortheme_form-bg; @cp_buttons-primary: @colortheme_logo-2;
@cp_buttons-primary-text: @colortheme_form-color; @cp_buttons-primary-text: #FFFFFF;
@cp_buttons-primary-border: transparent; @cp_buttons-primary-border: transparent;
@cp_buttons-disabled: #6c757d; @cp_buttons-disabled: #6c757d;
@cp_buttons-disabled-text: #ffffff; @cp_buttons-disabled-text: #ffffff;
@cp_buttons-disabled-border: #6c757d; @cp_buttons-disabled-border: #6c757d;
@cp_buttons-cancel: @colortheme_modal-bg; @cp_buttons-cancel: #ffffff;
@cp_buttons-cancel-border: #949494; @cp_buttons-cancel-border: #949494;
// Sidebar layout
@cp_sidebar-left-bg: @cryptpad_color_grey;
@cp_sidebar-left-fg: @cryptpad_color_black;
@cp_sidebar-left-active: @cryptpad_color_white;
@cp_sidebar-right-bg: @cryptpad_color_white;
@cp_sidebar-right-fg: @cryptpad_text_col; // XXX was black
@cp_sidebar-hint: @cryptpad_color_hint_grey;
// Drive
@cp_drive-bg: @cryptpad_color_white;
@cp_drive-fg: @cryptpad_text_col;
@cp_drive-header-fg: @cryptpad_color_dark_grey;
@cp_drive-icon-hover: @cryptpad_color_grey;
@cp_drive-icon-border: @cryptpad_color_neutral2_grey;
@cp_drive-selected-bg: @cryptpad_color_dark_grey;
@cp_drive-selected-fg: contrast(@cp_drive-droppable-bg, @cryptpad_text_col, @cryptpad_color_light_grey);
@cp_drive-selection-overlay: fade(@cryptpad_color_black, 70%);
@cp_drive-selection-bg: @cryptpad_color_neutral_grey;
@cp_drive-selection-fg: @cryptpad_text_col;
@cp_drive-droppable-bg: @colortheme_logo-2;
@cp_drive-droppable-fg: contrast(@cp_drive-droppable-bg, @cryptpad_text_col, @cryptpad_color_light_grey);
@cp_drive-infobox-bg: @cryptpad_color_lighter_blue;
@cp_drive-infobox-fg: @cryptpad_color_black;
@cp_drive-warnbox-bg: @cryptpad_color_warn_red;
@cp_drive-warnbox-fg: @cryptpad_color_white;
@cp_drive-tree-branch: @cryptpad_color_dark_grey;
// Tooltip background // Tooltip background
@cp_tooltip-bg: @cryptpad_color_grey; @cp_tooltip-bg: @cryptpad_color_grey;
@ -178,5 +220,91 @@
@cp_avatar-bg: @cryptpad_color_grey; @cp_avatar-bg: @cryptpad_color_grey;
@cp_avatar-fg: @cryptpad_text_col; @cp_avatar-fg: @cryptpad_text_col;
// Comments
@cp_comments-fg: @cryptpad_text_col;
@cp_comments-bg: @cryptpad_color_white;
@cp_comments-header: @cryptpad_color_dark_grey;
// Contextmenu
@cp_context-bg: @cryptpad_color_white;
@cp_context-bg-hover: @cryptpad_color_lighter_grey;
@cp_context-bg-active: @cryptpad_color_light_grey;
@cp_context-fg: @cryptpad_text_col;
@cp_context-icon: @cryptpad_color_dark_grey;
@cp_context-disabled: @cryptpad_color_neutral_grey;
// Corner
@cp_corner-primary: @colortheme_logo-1;
@cp_corner-secondary: @cryptpad_color_white;
// Pad Creation Screen
@cp_creation-bg: @cryptpad_color_white;
@cp_creation-fg: @cryptpad_text_col;
@cp_creation-button-bg: @colortheme_logo-2;
@cp_creation-button-fg: @cryptpad_color_white;
@cp_creation-error-bg: @colortheme_logo-1;
@cp_creation-error-fg: @cryptpad_color_light_grey;
// Export
@cp_export-bg: @cryptpad_color_white;
@cp_export-fg: @cryptpad_text_col;
@cp_export-hint: @cryptpad_color_hint_grey;
@cp_export-error-bg: @cryptpad_color_grey;
@cp_export-error-bg2: @cryptpad_color_neutral2_grey;
// File upload
@cp_upload-fg: @colortheme_logo-2;
@cp_upload-header: @cryptpad_color_help_grey;
@cp_upload-progress: @cryptpad_color_help_grey;
// Help
@cp_help-bg: @cryptpad_color_help_grey;
@cp_help-fg: @cryptpad_text_col;
@cp_help-link: @cryptpad_color_link;
// Static pages
@cp_static-bg: @cryptpad_color_grey;
@cp_static-fg: @cryptpad_text_col;
@cp_static-link: @colortheme_logo-2;
@cp_static-title: @colortheme_logo-2;
@cp_static-footer: @cryptpad_color_help_grey;
@cp_static-footer-border: @cryptpad_color_white;
@cp_static-topbar-fg: @colortheme_logo-2;
// Limit
@cp_limit-fg: @cryptpad_text_col;
// Mentions
@cp_mentions-bg: @cryptpad_color_grey;
@cp_mentions-hover: @cryptpad_color_help_grey;
// Modals
@cp_access-overlay: fade(@cryptpad_color_white, 50%);
@cp_snapshots-hover: @cryptpad_color_help_grey;
// Support
@cp_support-bg: @cryptpad_color_lighter_grey;
@cp_support-msg-bg: @cryptpad_color_grey;
@cp_support-header-bg: @cryptpad_color_help_grey;
// Toolbar
@cp_toolbar-bg: @cryptpad_color_toolbar_grey;
@cp_toolbar-fg: @cryptpad_text_col;
@cp_toolbar-bottom-fg: @cryptpad_text_col;
@cp_toolbar-fade1: fade(@cryptpad_color_black, 10%);
@cp_toolbar-fade3: fade(@cryptpad_color_black, 30%);
@cp_toolbar-warn: @cp_buttons-red;
@cp_history-line-bg: @cryptpad_color_white;
@cp_history-bg1: #DDD;
@cp_history-bg2: #BBB;
@cp_history-fg: @cp_toolbar-bottom-fg;
// Usergrid
@cp_usergrid-fg: @cryptpad_text_col;
@cp_usergrid-selected-bg: @colortheme_logo-2;
@cp_usergrid-selected-fg: @cryptpad_color_white;
// Other // Other
@cp_shadow-color: rgba(0,0,0,0.4); @cp_shadow-color: rgba(0,0,0,0.4);

15
customize.dist/src/less2/include/comments.less
Unescape Escape View File

@ -4,9 +4,8 @@
@import (reference) "./tools.less"; @import (reference) "./tools.less";
.comments_main() { .comments_main() {
@data-color: #888;
overflow-y: auto; overflow-y: auto;
color: @cryptpad_text_col; color: @cp_comments-fg;
&:empty { &:empty {
display: none !important; display: none !important;
@ -29,7 +28,7 @@
margin-left: 30px; margin-left: 30px;
} }
.cp-comment-deleted { .cp-comment-deleted {
background: white; background-color: @cp_comments-bg;
font-size: 14px; font-size: 14px;
padding: 5px; padding: 5px;
} }
@ -96,7 +95,7 @@
height: 40px; height: 40px;
align-items: center; align-items: center;
display: flex; display: flex;
background-color: white; background-color: @cp_comments-bg;
position: relative; position: relative;
padding: 5px; padding: 5px;
box-sizing: content-box; box-sizing: content-box;
@ -108,7 +107,7 @@
margin-left: 5px; margin-left: 5px;
.cp-comment-time { .cp-comment-time {
font-size: 13px; font-size: 13px;
color: @data-color; color: @cp_comments-header;
} }
} }
.cp-comment-edit { .cp-comment-edit {
@ -127,15 +126,15 @@
} }
} }
.cp-comment-content { .cp-comment-content {
background-color: white; background-color: @cp_comments-bg;
padding: 0px 5px 5px 5px; padding: 0px 5px 5px 5px;
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-word; word-break: break-word;
} }
.cp-comment-edited { .cp-comment-edited {
background-color: white; background-color: @cp_comments-bg;
font-size: 13px; font-size: 13px;
color: @data-color; color: @cp_comments-header;
padding: 0 5px; padding: 0 5px;
} }
.cp-comment-actions { .cp-comment-actions {

16
customize.dist/src/less2/include/contextmenu.less
Unescape Escape View File

@ -8,6 +8,9 @@
display: none; display: none;
position: absolute; position: absolute;
z-index: 50000; z-index: 50000;
& > ul {
background-color: @cp_context-bg;
}
li { li {
padding: 0; padding: 0;
font-size: @colortheme_app-font-size; font-size: @colortheme_app-font-size;
@ -33,16 +36,25 @@
} }
a { a {
cursor: pointer; cursor: pointer;
color: @cp_context-fg;
&:hover {
background-color: @cp_context-bg-hover;
color: @cp_context-fg;
}
&:active {
background-color: @cp_context-bg-active;
color: @cp_context-fg;
}
.fa, .cptools { .fa, .cptools {
margin-right: 1rem; margin-right: 1rem;
color: @colortheme_context-menu-icon-color; color: @cp_context-icon;
width: 16px; width: 16px;
} }
} }
} }
.cp-app-drive-context-noAction { .cp-app-drive-context-noAction {
font-style: italic; font-style: italic;
color: #aaa; color: @cp_context-disabled;
cursor: default; cursor: default;
display: none; display: none;
} }

62
customize.dist/src/less2/include/corner.less
Unescape Escape View File

@ -4,9 +4,11 @@
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
}; };
& { & {
@corner-link: #ffff7a;
@corner-blue: @colortheme_logo-1; @corner-blue: @colortheme_logo-1;
@corner-white: @colortheme_base; @corner-white: @colortheme_base;
@corner-blue-alt: darken(@corner-blue, 10%);
@corner-white-alt: darken(@corner-white, 10%);
@keyframes appear { @keyframes appear {
0% { 0% {
@ -32,7 +34,6 @@
width: 350px; width: 350px;
padding: 10px; padding: 10px;
background-color: fade(@corner-blue, 95%); background-color: fade(@corner-blue, 95%);
border: 1px solid @corner-blue;
color: @corner-white; color: @corner-white;
z-index: 9999; z-index: 9999;
transform-origin: bottom right; transform-origin: bottom right;
@ -41,7 +42,6 @@
&.cp-corner-alt { &.cp-corner-alt {
background-color: fade(@corner-white, 95%); background-color: fade(@corner-white, 95%);
border: 1px solid @corner-blue;
color: @corner-blue; color: @corner-blue;
} }
@ -54,39 +54,6 @@
clear: left; clear: left;
height: 21px; height: 21px;
} }
.cp-corner-minimize, .cp-corner-maximize {
position: absolute;
height: 15px;
width: 20px;
top: 0;
right: 0;
font-size: 12px;
text-align: left;
cursor: pointer;
line-height: 15px;
display: none;
&:hover {
color: darken(@corner-white, 15%);
}
}
.cp-corner-minimize {
display: inline;
}
&.cp-minimized {
transition: transform 0.8s ease-in-out;
transform: scale(0.1);
animation: none;
.cp-corner-text, .cp-corner-actions, .cp-corner-footer {
display: none;
}
.cp-corner-maximize {
display: inline;
font-size: 130px;
width: 180px;
height: 200px;
line-height: 200px;
}
}
&.cp-corner-big { &.cp-corner-big {
width: 500px; width: 500px;
max-width: 95%; max-width: 95%;
@ -99,13 +66,14 @@
font-size: 1.1em; font-size: 1.1em;
} }
&:hover { &:hover {
color: darken(@corner-white, 10%); color: @corner-white-alt;
} }
} }
&.cp-corner-alt { &.cp-corner-alt {
.cp-corner-dontshow { .cp-corner-dontshow {
&:hover { &:hover {
color: lighten(@corner-blue, 10%); color: @corner-blue-alt;
} }
} }
} }
@ -124,19 +92,19 @@
color: @corner-white; color: @corner-white;
text-decoration: underline; text-decoration: underline;
&:hover { &:hover {
color: darken(@corner-white, 10%); color: @corner-white-alt;
} }
} }
} }
&.cp-corner-alt a { &.cp-corner-alt a {
color: @corner-blue; color: @corner-blue;
&:hover { &:hover {
color: lighten(@corner-blue, 10%); color: @corner-blue-alt;
} }
} }
button { button {
padding: 5px; padding: 5px;
color: @corner-white; color: @corner-white;
&:not(:first-child) { &:not(:first-child) {
margin-left: 10px; margin-left: 10px;
@ -151,15 +119,15 @@
background-color: @corner-white; background-color: @corner-white;
color: @corner-blue; color: @corner-blue;
&:hover { &:hover {
background-color: lighten(@corner-blue, 50%); background-color: @corner-white-alt;
border-color: lighten(@corner-blue, 50%); border-color: @corner-white-alt;
} }
} }
&.cp-corner-cancel { &.cp-corner-cancel {
background-color: @corner-blue; background-color: @corner-blue;
color: @corner-white; color: @corner-white;
&:hover { &:hover {
background-color: darken(@corner-blue, 10%); background-color: @corner-blue-alt;
} }
} }
} }
@ -169,15 +137,15 @@
background-color: @corner-blue; background-color: @corner-blue;
color: @corner-white; color: @corner-white;
&:hover { &:hover {
background-color: darken(@corner-blue, 10%); background-color: @corner-blue-alt;
border-color: darken(@corner-blue, 10%); border-color: @corner-blue-alt;
} }
} }
&.cp-corner-cancel { &.cp-corner-cancel {
background-color: @corner-white; background-color: @corner-white;
color: @corner-blue; color: @corner-blue;
&:hover { &:hover {
background-color: lighten(@corner-blue, 50%); background-color: @corner-white-alt;
} }
} }
} }

60
customize.dist/src/less2/include/creation.less
Unescape Escape View File

@ -7,9 +7,9 @@
.creation_vars( .creation_vars(
@bg-color: @colortheme_apps[default] @bg-color: @colortheme_apps[default]
) { ) {
@creation-color: @cryptpad_text_col; @creation-color: @cp_creation-fg;
@creation-bg-color: @bg-color; @creation-bg-color: @bg-color;
@creation-bg-color-light: lighten(@bg-color, 30%); @creation-bg-color-light: contrast(@creation-color, lighten(@bg-color, 30%), darken(@bg-color, 30%));
}; };
.creation_main( .creation_main(
@ -17,23 +17,18 @@
) { ) {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
.creation_vars(@bg-color); .creation_vars(@bg-color);
--creation-color: @cryptpad_text_col; --creation-color: @cp_creation-fg;
--creation-bg-color: @bg-color; --creation-bg-color: @bg-color;
--creation-bg-color-light: @creation-bg-color-light; --creation-bg-color-light: @creation-bg-color-light;
} }
& { & {
.creation_vars(); .creation_vars();
@colortheme_creation-modal-bg: #fff;
@colortheme_creation-modal: #666;
@colortheme_creation-modal-title: @colortheme_loading-bg;
#cp-creation-container { #cp-creation-container {
position: absolute; position: absolute;
z-index: 100000000; // #loading * 10 z-index: 100000000; // #loading * 10
top: 0px; top: 0px;
//background: @colortheme_loading-bg; background: @cp_loading-bg;
background: @colortheme_loading_bg;
color: @colortheme_loading-color;
display: flex; display: flex;
flex-flow: column; /* we need column so that the child can shrink vertically */ flex-flow: column; /* we need column so that the child can shrink vertically */
justify-content: center; justify-content: center;
@ -60,8 +55,8 @@
#cp-creation { #cp-creation {
overflow: auto; overflow: auto;
text-align: center; text-align: center;
background: @colortheme_creation-modal-bg; background: @cp_creation-bg;
color: @colortheme_creation-modal; color: @cp_creation-fg;
font: @colortheme_app-font; font: @colortheme_app-font;
outline: none; outline: none;
width: 700px; width: 700px;
@ -127,16 +122,16 @@
button { button {
.tools_unselectable(); .tools_unselectable();
padding: 6px; padding: 6px;
background: @colortheme_logo-2; background: @cp_creation-button-bg;
font-size: 20px; font-size: 20px;
color: #FFF; color: @cp_creation-button-fg;
margin: 3px 10px; margin: 3px 10px;
border: none; border: none;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {
background: lighten(@colortheme_logo-2, 5%); background: contrast(@cp_creation-button-fg, lighten(@cp_creation-button-bg, 5%), darken(@cp_creation-button-bg, 5%));
} }
} }
} }
@ -171,10 +166,9 @@
} }
} }
.cp-creation-help, .cp-creation-warning { .cp-creation-help, .cp-creation-warning {
font-size: 18px; font-size: 16px;
color: @colortheme_form-warning; color: @cp_creation-fg;
&:hover { &:hover {
color: @colortheme_form-warning-hov;
text-decoration: none; text-decoration: none;
} }
} }
@ -196,11 +190,11 @@
input, select { input, select {
font-size: 14px; font-size: 14px;
border: 1px solid @colortheme_form-bg; background: @cp_forms-bg;
border: 1px solid @cp_forms-border;
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
//background-color: @colortheme_form-bg; color: @cp_forms-fg;
color: @cryptpad_text_col;
} }
.cp-creation-teams { .cp-creation-teams {
@ -221,14 +215,13 @@
padding: 5px; padding: 5px;
cursor: default; cursor: default;
font: @colortheme_app-font; font: @colortheme_app-font;
color: @colortheme_modal-fg;
margin: 0 1px; margin: 0 1px;
.tools_unselectable(); .tools_unselectable();
&.cp-selected { &.cp-selected {
background-color: @colortheme_alertify-primary; background-color: @cp_creation-button-bg;
color: @colortheme_alertify-primary-text; color: @cp_creation-button-fg;
} }
.cp-creation-team-avatar { .cp-creation-team-avatar {
.fa { .fa {
@ -243,7 +236,7 @@
text-align: center; text-align: center;
line-height: 18px; line-height: 18px;
} }
border: 1px solid @colortheme_alertify-primary; border: 1px solid @cp_creation-button-bg;
} }
} }
@ -294,19 +287,6 @@
.cp-filler { flex: 1; } .cp-filler { flex: 1; }
} }
div.cp-creation-remember {
.cp-creation-remember-help {
width: 100%;
//font-style: italic;
font-size: 12px;
font-weight: bold;
color: @colortheme_form-bg;
line-height: 20px;
.fa {
margin-right: 10px;
}
}
}
div.cp-creation-template { div.cp-creation-template {
width: 100%; width: 100%;
//flex: 1 0 auto; //flex: 1 0 auto;
@ -341,7 +321,7 @@
max-height: 159px; max-height: 159px;
align-items: center; align-items: center;
.cp-creation-template-element { .cp-creation-template-element {
box-shadow: 2px 2px 7px @colortheme_form-border; box-shadow: 2px 2px 7px @cp_shadow-color;
width: 300px; width: 300px;
max-width: calc(100% - 10px); max-width: calc(100% - 10px);
padding: 2px; padding: 2px;
@ -404,8 +384,8 @@
text-align: center; text-align: center;
.cp-creation-deleted { .cp-creation-deleted {
margin: 0 10px; margin: 0 10px;
background: @colortheme_loading-bg; background: @cp_creation-error-bg;
color: @colortheme_loading-color; color: @cp_creation-error-fg;
padding: 10px; padding: 10px;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;

137
customize.dist/src/less2/include/drive.less
Unescape Escape View File

@ -13,23 +13,6 @@
.tokenfield_main(); .tokenfield_main();
@colortheme_drive-bg-active: lighten(@colortheme_static_apps[default], 20%); @colortheme_drive-bg-active: lighten(@colortheme_static_apps[default], 20%);
@colortheme_drive-color: @cryptpad_text_col;
@drive_hover: #eee;
@drive_hover-light: lighten(@drive_hover, 20%);
@drive_info-box-bg: #d2e1f2;
@drive_info-box-border: #bbb;
@drive_table-header-fg: #555;
@drive_table-header-bg: #e8e8e8;
@drive_mobile-tree-border-col: #ccc;
@drive_content-fg: @colortheme_sidebar-right-fg;
@drive_content-bg: @colortheme_sidebar-right-bg;
@drive_content-bg-ro: darken(@drive_content-bg, 10%);
@drive_selected-bg: #888;
@drive_droppable-bg: #FE9A2E;
/* PAGE */ /* PAGE */
@ -59,7 +42,7 @@
border: 1px solid transparent; border: 1px solid transparent;
&:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-selected-tmp) { &:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-selected-tmp) {
border: 1px solid #CCC; border: 1px solid @cp_drive-icon-border;
} }
.cp-app-drive-element-name { .cp-app-drive-element-name {
width: 100%; width: 100%;
@ -126,7 +109,6 @@
min-width: unset; min-width: unset;
max-width: unset; max-width: unset;
max-height: unset; max-height: unset;
border-bottom: 1px solid @drive_mobile-tree-border-col;
.cp-app-drive-tree-category { .cp-app-drive-tree-category {
margin-top: 0.5em; margin-top: 0.5em;
} }
@ -152,38 +134,34 @@
li { li {
padding: 0px 5px; padding: 0px 5px;
-webkit-user-select: none; .tools_unselectable();
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} }
.cp-app-drive-element-restricted { .cp-app-drive-element-restricted {
color: #939393; color: @cp_drive-header-fg;
} }
.cp-app-drive-element-droppable { .cp-app-drive-element-droppable {
background-color: @drive_droppable-bg; background-color: @cp_drive-droppable-bg;
color: #222; color: @cp_drive-droppable-fg;
} }
.cp-app-drive-element-selected { .cp-app-drive-element-selected {
background: @drive_selected-bg !important; background: @cp_drive-selected-bg !important;
color: #eee; color: @cp_drive-selected-fg;
.fa-minus-square-o, .fa-plus-square-o { .fa-minus-square-o, .fa-plus-square-o {
color: @colortheme_sidebar-left-fg; color: @cp_sidebar-left-fg;
} }
.cptools { .cptools {
color: #eee; color: @cp_drive-selected-fg;
} }
} }
.cp-app-drive-element-selected-tmp { .cp-app-drive-element-selected-tmp {
border: 1px dotted #bbb; background: @cp_drive-selection-bg;
background: #AAA; color: @cp_drive-selection-fg;
color: #ddd;
.fa-minus-square-o, .fa-plus-square-o { .fa-minus-square-o, .fa-plus-square-o {
color: @colortheme_sidebar-left-fg; color: @cp_sidebar-left-fg;
} }
} }
@ -205,19 +183,20 @@
font-size: 50px; font-size: 50px;
} }
.cptools-folder-no-color { .cptools-folder-no-color {
color: #bbb; color: #bbb; // XXX
} }
.fa-check { .fa-check {
position: absolute; position: absolute;
top: 40%; left: 35%; top: 40%; left: 35%;
color: transparent; color: transparent;
} }
// XXX Check colors in the "change folder color" modal
&.cp-app-drive-current-color > .fa-check { &.cp-app-drive-current-color > .fa-check {
color: white; color: @cryptpad_color_white;
} }
&.cp-app-drive-current-color:first-child > .fa-check { &.cp-app-drive-current-color:first-child > .fa-check {
color: black; color: @cryptpad_color_black;
} }
} }
} }
@ -231,13 +210,13 @@
margin: 15px; margin: 15px;
input { input {
background: transparent; background: transparent;
color: @colortheme_drive-color; color: @cp_drive-fg;
.tools_placeholder-color(); .tools_placeholder-color();
outline-width: 0px; outline-width: 0px;
border-radius: 0; border-radius: 0;
width: 100%; width: 100%;
border: 0; border: 0;
border-bottom: 3px solid @colortheme_drive-color; border-bottom: 3px solid @cp_drive-fg;
margin: 0 5px; margin: 0 5px;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
@ -255,12 +234,12 @@
cursor: pointer; cursor: pointer;
} }
.cp-app-drive-tree-search-icon, .cp-app-drive-search-cancel { .cp-app-drive-tree-search-icon, .cp-app-drive-search-cancel {
color: @colortheme_drive-color; color: @cp_drive-fg;
} }
} }
.cp-app-drive-search-spinner { .cp-app-drive-search-spinner {
display: inline-flex; display: inline-flex;
color: @colortheme_drive-color; color: @cp_drive-fg;
font-size: 40px; font-size: 40px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -280,7 +259,7 @@
font-size: @colortheme_app-font-size; font-size: @colortheme_app-font-size;
//border-right: 1px solid #ccc; //border-right: 1px solid #ccc;
box-sizing: border-box; box-sizing: border-box;
background: @colortheme_sidebar-left-bg; background: @cp_sidebar-left-bg;
overflow: auto; overflow: auto;
resize: horizontal; resize: horizontal;
width: auto; width: auto;
@ -288,26 +267,11 @@
max-width: 500px; max-width: 500px;
min-width: 200px; min-width: 200px;
padding: 0px; padding: 0px;
color: @colortheme_sidebar-left-fg; color: @cp_sidebar-left-fg;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
max-height: 100%; max-height: 100%;
position: relative; position: relative;
.cp-close-button {
position: absolute;
cursor: pointer;
right: 5px;
top: 5px;
font-size: 18px;
padding: 3px;
margin: 0;
border: 0;
background-color: transparent;
outline: none;
&:hover {
color: #000;
}
}
.cp-app-drive-tree-categories-container { .cp-app-drive-tree-categories-container {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
@ -330,7 +294,6 @@
width: ~"calc(100% - 30px)"; width: ~"calc(100% - 30px)";
padding: 0 10px; padding: 0 10px;
border: 0; border: 0;
color: lighten(@colortheme_sidebar-left-fg, 40%);
height: auto; height: auto;
} }
& > span.cp-app-drive-element-row { & > span.cp-app-drive-element-row {
@ -391,7 +354,7 @@
height: 11px !important; height: 11px !important;
padding: 0; padding: 0;
margin: 0; margin: 0;
background: white; background: @cryptpad_color_white;
z-index: 10; z-index: 10;
cursor: default; cursor: default;
&:before { &:before {
@ -431,9 +394,9 @@
top: -11px; top: -11px;
content: ''; content: '';
display: block; display: block;
border-left: 1px solid @colortheme_sidebar-left-branch; border-left: 1px solid @cp_drive-tree-branch;
height: ~"calc(1em + 11px)"; height: ~"calc(1em + 11px)";
border-bottom: 1px solid @colortheme_sidebar-left-branch; border-bottom: 1px solid @cp_drive-tree-branch;
width: 15px; width: 15px;
} }
&:after { &:after {
@ -442,7 +405,7 @@
bottom: -7px; bottom: -7px;
content: ''; content: '';
display: block; display: block;
border-left: 1px solid @colortheme_sidebar-left-branch; border-left: 1px solid @cp_drive-tree-branch;
height: 100%; height: 100%;
} }
&.cp-app-drive-tree-root { &.cp-app-drive-tree-root {
@ -470,8 +433,8 @@
} }
#cp-app-drive-content { #cp-app-drive-content {
box-sizing: border-box; box-sizing: border-box;
background: @drive_content-bg; background: @cp_sidebar-right-bg;
color: @drive_content-fg; color: @cp_sidebar-right-fg;
overflow-y: auto; overflow-y: auto;
flex: 1; flex: 1;
display: flex; display: flex;
@ -479,12 +442,12 @@
position: relative; position: relative;
.cp-app-drive-content-select-box { .cp-app-drive-content-select-box {
display: none; display: none;
background-color: rgba(100, 100, 100, 0.7); background-color: @cp_drive-selection-overlay;
position: absolute; position: absolute;
z-index: 50; z-index: 50;
} }
&.cp-app-drive-readonly { &.cp-app-drive-readonly {
background: @drive_content-bg-ro; background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%));
} }
h1 { h1 {
padding-left: 10px; padding-left: 10px;
@ -495,7 +458,7 @@
line-height: 2em; line-height: 2em;
padding: 0.25em 0.75em; padding: 0.25em 0.75em;
margin: 1em; margin: 1em;
background: @drive_info-box-bg; background: @cp_drive-infobox-bg;
cursor: default; cursor: default;
span { span {
cursor: pointer; cursor: pointer;
@ -508,7 +471,7 @@
&:not(.cp-app-drive-element-header) { &:not(.cp-app-drive-element-header) {
&:hover { &:hover {
&:not(.-cp-app-drive-element-selected, .cp-app-drive-element-selected-tmp) { &:not(.-cp-app-drive-element-selected, .cp-app-drive-element-selected-tmp) {
background-color: @drive_hover; background-color: @cp_drive-icon-hover;
} }
} }
} }
@ -535,13 +498,13 @@
.cp-app-drive-path-clickable { .cp-app-drive-path-clickable {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: #eee; color: @cp_drive-fg;
} }
} }
} }
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: @drive_table-header-fg; color: @cp_drive-header-fg;
} }
} }
&.cp-app-drive-tags-list { &.cp-app-drive-tags-list {
@ -603,7 +566,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
border-radius: 0; border-radius: 0;
border: 1px solid #ddd; border: 1px solid transparent;
font-size: 14px; font-size: 14px;
height: auto; height: auto;
} }
@ -658,7 +621,7 @@
li { li {
display: flex; display: flex;
input { input {
border: 1px solid #ddd; border: 1px solid transparent;
margin: 0; margin: 0;
padding: 0 4px; padding: 0 4px;
flex: 1; flex: 1;
@ -734,7 +697,7 @@
} }
&.cp-app-drive-element-header { &.cp-app-drive-element-header {
cursor: default; cursor: default;
color: @drive_table-header-fg; color: @cp_drive-header-fg;
span { span {
&:not(.fa):not(.cptools) { &:not(.fa):not(.cptools) {
text-align: left; text-align: left;
@ -748,7 +711,7 @@
&.cp-app-drive-sort-clickable { &.cp-app-drive-sort-clickable {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: @drive_table-header-bg; background: @cp_drive-icon-hover;
} }
} }
} }
@ -821,7 +784,7 @@
font-size: @colortheme_app-font-size; font-size: @colortheme_app-font-size;
padding: 0 5px; padding: 0 5px;
border: 0; border: 0;
color: @colortheme_drive-color; color: @cp_drive-fg;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -832,7 +795,7 @@
} }
&.cp-app-drive-path-separator { &.cp-app-drive-path-separator {
color: #ccc; color: @cp_drive-header-fg;
cursor: default; cursor: default;
} }
@ -841,7 +804,8 @@
} }
&.cp-app-drive-element-droppable { &.cp-app-drive-element-droppable {
background-color: @drive_droppable-bg; background-color: @cp_drive-droppable-bg;
color: @cp_drive-droppable-fg;
} }
&.cp-app-drive-path-clickable { &.cp-app-drive-path-clickable {
cursor: pointer; cursor: pointer;
@ -867,13 +831,8 @@
#cp-app-drive-new-ghost-dialog.cp-modal-container { #cp-app-drive-new-ghost-dialog.cp-modal-container {
.drive_fileIcon; .drive_fileIcon;
border: 1px solid @colortheme_modal-fg;
li:not(.cp-app-drive-element-selected):hover { li:not(.cp-app-drive-element-selected):hover {
background: @colortheme_logo_2_light; background: @cp_drive-icon-hover;
color: @cryptpad_text_col;
.cptools {
color: @cryptpad_text_col;
}
} }
.cp-modal { .cp-modal {
display: flex; display: flex;
@ -900,7 +859,7 @@
} }
.cp-app-drive-new-name { .cp-app-drive-new-name {
color: @cryptpad_text_col; color: @cp_drive-fg;
white-space: nowrap; white-space: nowrap;
} }
@ -954,8 +913,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: @colortheme_drive-bg-active; background-color: @cp_drive-infobox-bg;
color: black; color: @cp_drive-infobox-fg;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
cursor: default; cursor: default;
@ -965,8 +924,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #eb675e; background-color: @cp_drive-warnbox-bg;
color: white; color: @cp_drive-warnbox-fg;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
cursor: default; cursor: default;

15
customize.dist/src/less2/include/export.less
Unescape Escape View File

@ -6,13 +6,16 @@
min-height: 0; min-height: 0;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: @cp_export-bg;
color: @cp_export-fg;
.cp-export-block { .cp-export-block {
width: 800px; width: 800px;
max-width: 90vw; max-width: 90vw;
// XXX Keep hardcoded progress bar colors for now...
.cp-export-progress-bar-container { .cp-export-progress-bar-container {
height: 24px; height: 24px;
background: white; background: white;
border: 1px solid #DDD; border: 1px solid ;
width: 80%; width: 80%;
margin: auto; margin: auto;
position: relative; position: relative;
@ -33,7 +36,7 @@
} }
} }
& > p { & > p {
color: #777; color: @cp_export-hint;
} }
.cp-export-progress { .cp-export-progress {
margin-bottom: 1rem; margin-bottom: 1rem;
@ -58,8 +61,8 @@
display: none; display: none;
overflow-x: auto; overflow-x: auto;
max-height: 300px; max-height: 300px;
background: #ededed; background: @cp_export-error-bg;
border: 1px solid #777; border: 1px solid @cp_export-hint;
padding: 5px 20px; padding: 5px 20px;
margin-top: 1rem; margin-top: 1rem;
& > p { & > p {
@ -69,7 +72,7 @@
& > div { & > div {
padding: 5px 10px; padding: 5px 10px;
margin: 5px 0; margin: 5px 0;
background: #dedede; background: @cp_export-error-bg2;
.title { .title {
font-weight: bold; font-weight: bold;
} }
@ -79,7 +82,7 @@
} }
.reason { .reason {
padding: 0 20px; padding: 0 20px;
color: #777; color: @cp_export-hint;
} }
} }
} }

8
customize.dist/src/less2/include/fileupload.less
Unescape Escape View File

@ -16,7 +16,7 @@
box-sizing: border-box; box-sizing: border-box;
z-index: 100001; //Z file upload table container: just above the file picker z-index: 100001; //Z file upload table container: just above the file picker
display: none; display: none;
color: darken(@colortheme_static_apps[default], 10%); color: @cp_upload-fg;
max-height: 180px; max-height: 180px;
overflow-y: auto; overflow-y: auto;
@ -26,7 +26,7 @@
.cp-fileupload-header { .cp-fileupload-header {
display: flex; display: flex;
background-color: darken(@colortheme_modal-bg, 10%); background-color: @cp_upload-header;
font-weight: bold; font-weight: bold;
position: sticky; position: sticky;
top: 0; top: 0;
@ -39,7 +39,7 @@
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: rgba(0,0,0,0.1); color: lighten(@cp_upload-fg, 10%);
} }
} }
} }
@ -86,7 +86,7 @@
position: absolute; position: absolute;
width: 0px; width: 0px;
height: 100%; height: 100%;
background-color: #dddddd; background-color: @cp_upload-progress;
z-index: -1; //Z file upload progress container z-index: -1; //Z file upload progress container
} }
.cp-fileupload-table-cancel { .cp-fileupload-table-cancel {

5
customize.dist/src/less2/include/forms.less
Unescape Escape View File

@ -17,6 +17,7 @@
padding: @alertify_padding-base; padding: @alertify_padding-base;
&[readonly] { &[readonly] {
background-color: @cp_forms-readonly; background-color: @cp_forms-readonly;
border-color: @cp_forms-readonly-border;
color: @cp_forms-fg; color: @cp_forms-fg;
} }
} }
@ -135,7 +136,7 @@
&:hover, &:not(:disabled):active, &:focus { &:hover, &:not(:disabled):active, &:focus {
border-color: @cp_buttons-red-border; border-color: @cp_buttons-red-border;
color: @cp_buttons-red-color; color: @cp_buttons-red-color;
background-color: contrast(@cp_buttons-red-color, darken(@cp_buttons-red, 10%), lighten(@colortheme_alertify-red, 10%)); background-color: contrast(@cp_buttons-red-color, darken(@cp_buttons-red, 10%), lighten(@cp_buttons-red, 10%));
} }
} }
@ -157,7 +158,7 @@
&:hover, &:not(:disabled):active, &:focus { &:hover, &:not(:disabled):active, &:focus {
color: @cp_buttons-primary-text; color: @cp_buttons-primary-text;
border-color: @cp_buttons-primary-border; border-color: @cp_buttons-primary-border;
background-color: contrast(@colortheme_modal-bg, darken(@cp_buttons-primary, 10%), lighten(@colortheme_alertify-primary, 10%)); background-color: contrast(@cp_buttons-primary-text, darken(@cp_buttons-primary, 10%), lighten(@cp_buttons-primary, 10%));
} }
} }

6
customize.dist/src/less2/include/help.less
Unescape Escape View File

@ -7,7 +7,7 @@
.cp-help-container { .cp-help-container {
position: relative; position: relative;
background-color: @colortheme_help-bg; background-color: @cp_help-bg;
max-height: 50%; max-height: 50%;
overflow-y: auto; overflow-y: auto;
&.cp-help-hidden { &.cp-help-hidden {
@ -21,11 +21,11 @@
cursor: pointer; cursor: pointer;
} }
.cp-help-text { .cp-help-text {
color: @cryptpad_text_col; color: @cp_help-fg;
margin: 0; margin: 0;
padding: 5px 15px; padding: 5px 15px;
a { a {
color: @colortheme_link-color; color: @cp_help-link;
} }
h1 { h1 {
font-size: 20px; font-size: 20px;

9
customize.dist/src/less2/include/icons.less
Unescape Escape View File

@ -10,6 +10,8 @@
text-overflow: ellipsis; text-overflow: ellipsis;
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
border: 1px solid transparent;
background: @cp_drive-bg;
.cp-icons-name { .cp-icons-name {
width: 100%; width: 100%;
@ -22,11 +24,11 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
word-wrap: break-word; word-wrap: break-word;
color: @cryptpad_text_col; color: @cp_drive-fg;
} }
&.cp-icons-element-selected { &.cp-icons-element-selected {
background-color: rgba(0,0,0,0.2); background: @cp_drive-icon-hover;
color: #666; color: @cp_drive-fg;
} }
.fa, .cptools { .fa, .cptools {
display: block; display: block;
@ -39,4 +41,3 @@
} }
} }
} }

84
customize.dist/src/less2/include/infopages.less
Unescape Escape View File

@ -3,7 +3,7 @@
.infopages_link () { .infopages_link () {
text-decoration: none; text-decoration: none;
color: #0275D8; color: @cryptpad_color_link;
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
&:hover { &:hover {
@ -23,11 +23,11 @@ body {
@infopages_padding: 32px; @infopages_padding: 32px;
// Basic setup for info pages, this should be used at the global level // Basic setup for info pages, this should be used at the global level
background-color: @colortheme_info-background; background-color: @cp_static-bg;
color: @cryptpad_text_col; color: @cp_static-fg;
a { a {
color: @colortheme_logo-2; color: @cp_static-link;
&:visited { color: darken(@colortheme_logo-2, 5%); } &:visited { color: darken(@cp_static-link, 5%); }
} }
a:hover { a:hover {
opacity: 1; opacity: 1;
@ -77,7 +77,7 @@ body {
.cp-page-title { .cp-page-title {
h1 { h1 {
font-family: "IBM Plex Mono"; font-family: "IBM Plex Mono";
color: @colortheme_logo-2; color: @cp_static-title;
margin: 50px auto; margin: 50px auto;
} }
} }
@ -90,21 +90,21 @@ body {
button { button {
outline: none; outline: none;
background-color: @colortheme_logo-2; background-color: @cp_buttons-primary;
color: @colortheme_base; color: @cp_buttons-primary-text;
border: none; border: none;
padding: 10px 20px; padding: 10px 20px;
margin-right: 10px; margin-right: 10px;
border-radius: 0px; border-radius: 0px;
cursor: pointer; cursor: pointer;
&:hover, &:focus { &:hover, &:focus {
background-color: darken(@colortheme_logo-2, 5%); background-color: contrast(@cp_buttons-primary-text, darken(@cp_buttons-primary, 10%), lighten(@cp_buttons-primary, 10%));
} }
} }
button.cp-secondary { button.cp-secondary {
background-color: white; background-color: @cp_buttons-cancel;
color: @colortheme_logo-2; color: @cp_buttons-fg;
border: 1px solid @colortheme_logo-2; border: 1px solid @cp_buttons-fg;
} }
.form-group { .form-group {
@ -128,19 +128,18 @@ body {
} }
} }
footer { footer {
@footer-color: #d9d9d9; // FIXME use/make variable
background-color: @footer-color; background-color: @cp_static-footer;
padding-top: 20px; padding-top: 20px;
align-self: normal; // override align-items:center from parent in index.html align-self: normal; // override align-items:center from parent in index.html
.container { .container {
margin-bottom: 20px; margin-bottom: 20px;
a { a {
color: @colortheme_logo-2; color: @cp_static-link;
&:visited { &:visited {
color: @colortheme_logo-2; color: @cp_static-link;
}; }
} }
} }
.cp-logo-foot { .cp-logo-foot {
@ -156,18 +155,18 @@ body {
display: block; display: block;
font-family: "IBM Plex Mono"; font-family: "IBM Plex Mono";
font-size: 1.5rem; font-size: 1.5rem;
color: @colortheme_logo-2; color: @cp_static-link;
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.cp-version-footer { .cp-version-footer {
background-color: @footer-color; background-color: @cp_static-footer;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
align-items: center; align-items: center;
padding: 0.5em; padding: 0.5em;
border-top: 1px solid #fff; border-top: 1px solid @cp_static-footer-border;
select { select {
min-width: 0; min-width: 0;
margin-bottom: 10px; margin-bottom: 10px;
@ -175,47 +174,10 @@ body {
} }
} }
// Apply this to the top bar div
.cp-topbar {
background: #fff;
z-index: 10000; //Z infopage toolbar
position: fixed;
top: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
width: 100%;
height: @infopages_infobar-height;
padding-left: 0.5em;
padding-right: 0.5em;
vertical-align: middle;
font-size: 1.25em;
line-height: 1.25em;
cursor: default;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
.navbar-nav {
display: flex;
align-items: center;
}
a {
font-weight: 500;
padding: 0.6em;
.infopages_link()
}
.cp-logo {
margin-right: 0.5em;
}
}
// navigation top bar // navigation top bar
.navbar { .navbar {
width: 100%; width: 100%;
color: @colortheme_logo-2; color: @cp_static-topbar-fg;
.navbar-brand { .navbar-brand {
display: block; display: block;
height: 50px; height: 50px;
@ -235,7 +197,7 @@ body {
border: 2px solid transparent; border: 2px solid transparent;
white-space: nowrap; white-space: nowrap;
&:visited { &:visited {
color: @colortheme_logo-2; color: @cp_static-link;
} }
} }
.nav-link { .nav-link {
@ -245,7 +207,7 @@ body {
} }
} }
.cp-register-btn { .cp-register-btn {
border: 2px solid @colortheme_logo-2; border: 2px solid @cp_static-topbar-fg;
display: inline-block; display: inline-block;
} }
button:focus { button:focus {
@ -253,7 +215,7 @@ body {
} }
.navbar-toggler { .navbar-toggler {
margin-top: 10px; margin-top: 10px;
color: @colortheme_logo-2; color: @cp_static-topbar-fg;
} }
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {

2
customize.dist/src/less2/include/leftside-menu.less
Unescape Escape View File

@ -18,6 +18,6 @@
background: rgba(0,0,0,0.05); background: rgba(0,0,0,0.05);
} }
&.cp-leftside-active { &.cp-leftside-active {
background: @colortheme_sidebar-active; background: @cp_sidebar-left-active;
} }
} }

3
customize.dist/src/less2/include/limit-bar.less
Unescape Escape View File

@ -32,6 +32,7 @@
left: 0; left: 0;
top: 0; top: 0;
z-index: 1; // .usage z-index: 1; // .usage
// XXX Check if we can keep the same colors in dark themes
&.cp-limit-usage-normal { &.cp-limit-usage-normal {
background: @colortheme_green; background: @colortheme_green;
} }
@ -45,7 +46,7 @@
} }
.cp-limit-usage-text { .cp-limit-usage-text {
color: @cryptpad_text_col; color: @cp_limit-fg;
margin-left: 5px; margin-left: 5px;
z-index: 2; // .usageText z-index: 2; // .usageText
font-size: @colortheme_app-font-size-small; font-size: @colortheme_app-font-size-small;

4
customize.dist/src/less2/include/mentions.less
Unescape Escape View File

@ -12,7 +12,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
vertical-align: bottom; vertical-align: bottom;
background-color: #eee; background-color: @cp_mentions-bg;
span.cp-mentions-name { span.cp-mentions-name {
max-width: 150px; max-width: 150px;
@ -25,7 +25,7 @@
outline: none; outline: none;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: #ddd; background-color: @cp_mentions-hover;
} }
} }
} }

4
customize.dist/src/less2/include/modal.less
Unescape Escape View File

@ -9,10 +9,10 @@
box-shadow: @variables_shadow; box-shadow: @variables_shadow;
a { a {
color: @colortheme_link-color; color: @cryptpad_color_link;
&:visited { &:visited {
color: @colortheme_link-color-visited; color: @cryptpad_color_link;
} }
} }
} }

14
customize.dist/src/less2/include/modals-ui-elements.less
Unescape Escape View File

@ -38,11 +38,6 @@
// Properties modal // Properties modal
.cp-app-prop { .cp-app-prop {
margin-bottom: 10px; margin-bottom: 10px;
.cp-app-prop-hint {
color: @cryptpad_text_col;
font-size: 0.8em;
margin-bottom: 5px;
}
.cp-app-prop-size-container { .cp-app-prop-size-container {
height: 20px; height: 20px;
background-color: @colortheme_logo-2; background-color: @colortheme_logo-2;
@ -52,11 +47,10 @@
height: 20px; height: 20px;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #CCCCCC; background-color: @cryptpad_color_neutral2_grey;
} }
} }
.cp-app-prop-size-legend { .cp-app-prop-size-legend {
color: @colortheme_modal-fg;
display: flex; display: flex;
margin: 10px 0; margin: 10px 0;
& > div { & > div {
@ -73,7 +67,7 @@
margin-right: 10px; margin-right: 10px;
} }
.cp-app-prop-history-size-color { .cp-app-prop-history-size-color {
background-color: #CCCCCC; background-color: @cryptpad_color_neutral2_grey;
} }
.cp-app-prop-contents-size-color { .cp-app-prop-contents-size-color {
background-color: @colortheme_logo-2; background-color: @colortheme_logo-2;
@ -108,7 +102,7 @@
position: relative; position: relative;
.cp-overlay { .cp-overlay {
position: absolute; position: absolute;
background-color: rgba(255,255,255,0.5); background-color: @cp_access-overlay;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -200,7 +194,7 @@
.cp-snapshot-buttons { .cp-snapshot-buttons {
display: flex; display: flex;
} }
background-color: #DDD; background-color: @cp_snapshots-hover;
} }
} }
} }

8
customize.dist/src/less2/include/notifications.less
Unescape Escape View File

@ -22,7 +22,7 @@
padding: 0 5px; padding: 0 5px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: rgba(0,0,0,0.1); background-color: @cp_dropdown-bg-hover;
} }
} }
.cp-notification-content { .cp-notification-content {
@ -35,7 +35,7 @@
&.cp-clickable { &.cp-clickable {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: rgba(0,0,0,0.1); background-color: @cp_dropdown-bg-hover;
} }
} }
} }
@ -47,7 +47,7 @@
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: rgba(0,0,0,0.1); background-color: @cp_dropdown-bg-hover;
} }
} }
} }
@ -59,7 +59,7 @@
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: rgba(0,0,0,0.1); background-color: @cp_dropdown-bg-hover;
} }
} }
} }

2
customize.dist/src/less2/include/password-input.less
Unescape Escape View File

@ -18,7 +18,7 @@
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: darken(@colortheme_alertify-primary, 10%); color: darken(@colortheme_logo-2, 10%);
} }
} }
} }

16
customize.dist/src/less2/include/sidebar-layout.less
Unescape Escape View File

@ -13,20 +13,15 @@
} }
} }
& { & {
@leftside-bg: @colortheme_sidebar-left-bg;
@leftside-color: @colortheme_sidebar-left-fg;
@rightside-color: @colortheme_sidebar-right-fg;
@description-color: @colortheme_sidebar-description;
#cp-sidebarlayout-container { #cp-sidebarlayout-container {
font-size: 16px; font-size: 16px;
display: flex; display: flex;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
#cp-sidebarlayout-leftside { #cp-sidebarlayout-leftside {
color: @leftside-color; color: @cp_sidebar-left-fg;
width: 250px; width: 250px;
background: @leftside-bg; background: @cp_sidebar-left-bg;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
.cp-sidebarlayout-categories { .cp-sidebarlayout-categories {
@ -71,7 +66,8 @@
#cp-sidebarlayout-rightside { #cp-sidebarlayout-rightside {
flex: 1; flex: 1;
padding: 5px 20px; padding: 5px 20px;
color: @rightside-color; background: @cp_sidebar-right-bg;
color: @cp_sidebar-right-fg;
overflow: auto; overflow: auto;
padding-bottom: 200px; padding-bottom: 200px;
@ -84,7 +80,7 @@
} }
.cp-sidebarlayout-description { .cp-sidebarlayout-description {
display: block; display: block;
color: @description-color; color: @cp_sidebar-hint;
margin-bottom: 5px; margin-bottom: 5px;
p { p {
margin-bottom: 0; margin-bottom: 0;
@ -111,7 +107,7 @@
input { input {
flex: 1; flex: 1;
//border-radius: 0.25em 0 0 0.25em; //border-radius: 0.25em 0 0 0.25em;
border: 1px solid #adadad; border: 1px solid @cryptpad_color_neutral_grey;
border-right: 0px; border-right: 0px;
} }
button { button {

8
customize.dist/src/less2/include/support.less
Unescape Escape View File

@ -1,8 +1,8 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
.support_main () { .support_main () {
@ticket-bg: #F7F7F7; @ticket-bg: @cp_support-bg;
@msg-bg: #eee; @msg-bg: @cp_support-msg-bg;
@fromme-bg: #ddd; @fromme-bg: @cp_support-header-bg;
.cp-support-form-container { .cp-support-form-container {
div { div {
margin-bottom: 10px; margin-bottom: 10px;
@ -25,7 +25,7 @@
margin-right: 10px; margin-right: 10px;
} }
&> span { &> span {
border: 1px solid #ddd; border: 1px solid @fromme-bg;
margin-right: 5px; margin-right: 5px;
padding: 10px; padding: 10px;
} }

10
customize.dist/src/less2/include/toolbar-history.less
Unescape Escape View File

@ -6,10 +6,10 @@
& { & {
.cp-toolbar-history { .cp-toolbar-history {
@history_lineBg: #FFFFFF; @history_lineBg: @cp_history-line-bg;
@history_userBg1: #DDD; @history_userBg1: @cp_history-bg1;
@history_userBg2: #BBB; @history_userBg2: @cp_history-bg2;
@pos-color: @cryptpad_text_col; @pos-color: @cp_history-fg;
@fill-width: 40px; @fill-width: 40px;
display: none; display: none;
@ -17,7 +17,7 @@
padding: 10px 0 0; padding: 10px 0 0;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: @cryptpad_text_col; color: @cp_history-fg;
* { * {
font: @colortheme_app-font; font: @colortheme_app-font;
} }

62
customize.dist/src/less2/include/toolbar.less
Unescape Escape View File

@ -37,11 +37,10 @@
.modal_main(); .modal_main();
}; };
& { & {
@toolbar-color: @cryptpad_text_col; @toolbar-color: @cp_toolbar-fg;
@toolbar-color-light: lighten(@cryptpad_text_col, 10%);
.toolbar_vars(); .toolbar_vars();
@toolbar-top-bg: #eee; @toolbar-top-bg: @cp_toolbar-bg;
@toolbar_line-height: 32px; @toolbar_line-height: 32px;
@toolbar_top-height: 76px; @toolbar_top-height: 76px;
@toolbar_button-font: @colortheme_app-font; @toolbar_button-font: @colortheme_app-font;
@ -60,7 +59,8 @@
.cp-markdown-toolbar { .cp-markdown-toolbar {
height: @toolbar_line-height; height: @toolbar_line-height;
background-color: @colortheme_pad-toolbar-bg; background-color: @cp_toolbar-bg;
color: @cp_toolbar-fg;
display: none; display: none;
button { button {
height: @toolbar_line-height !important; height: @toolbar_line-height !important;
@ -69,7 +69,7 @@
.toolbar_button; .toolbar_button;
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
&:hover { &:hover {
background-color: darken(@colortheme_pad-toolbar-bg, 5%); background-color: contrast(@cp_toolbar-bg, darken(@cp_toolbar-bg, 5%), lighten(@cp_toolbar-bg, 5%));
} }
&.cp-markdown-help { float: right; } &.cp-markdown-help { float: right; }
} }
@ -102,7 +102,7 @@
} }
background: transparent; background: transparent;
&:hover { &:hover {
background-color: rgba(50,50,50,0.3); background-color: @cp_toolbar-fade3;
} }
} }
@ -174,7 +174,7 @@
.cp-toolbar-userlist-viewer { .cp-toolbar-userlist-viewer {
font-style: italic; font-style: italic;
padding: 5px; padding: 5px;
background: rgba(0,0,0,0.1); background: @cp_toolbar-fade1;
margin: 2px 0; margin: 2px 0;
} }
@ -194,7 +194,7 @@
height: 48px; height: 48px;
padding: 5px; padding: 5px;
margin: 2px 0; margin: 2px 0;
background: rgba(0,0,0,0.1); background: @cp_toolbar-fade1;
border-right: 3px solid transparent; border-right: 3px solid transparent;
.avatar_main(30px); .avatar_main(30px);
.cp-avatar-default, media-tag { .cp-avatar-default, media-tag {
@ -203,7 +203,7 @@
&.cp-userlist-clickable { &.cp-userlist-clickable {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: rgba(0,0,0,0.3); background: @cp_toolbar-fade3;
} }
} }
.cp-toolbar-userlist-rightcol { .cp-toolbar-userlist-rightcol {
@ -263,14 +263,11 @@
.icons_main(); .icons_main();
li { li {
border: 1px solid @colortheme_modal-fg; color: @cp_drive-fg;
border: 1px solid @cp_drive-icon-border;
&:hover { &:hover {
//border: 1px solid @colortheme_modal-fg; background: @cp_drive-icon-hover;
background: @colortheme_logo_2_light; color: @cp_drive-fg;
color: @cryptpad_text_col;
.cptools {
color: @cryptpad_text_col;
}
} }
} }
.cp-modal { .cp-modal {
@ -339,7 +336,7 @@
} }
.cp-toolbar-userlist-drawer { .cp-toolbar-userlist-drawer {
background-color: @colortheme_userlist-bg; background-color: @cp_toolbar-bg;
color: @toolbar-color; color: @toolbar-color;
.cp-toolbar-userlist-drawer-close { .cp-toolbar-userlist-drawer-close {
color: @toolbar-color; color: @toolbar-color;
@ -348,12 +345,12 @@
color: @toolbar-color; color: @toolbar-color;
} }
.cp-toolbar-userlist-name-input { .cp-toolbar-userlist-name-input {
background-color: rgba(0,0,0,0.1); background: @cp_toolbar-fade1;
} }
.cp-toolbar-userlist-button { .cp-toolbar-userlist-button {
background: transparent; background: transparent;
&:hover { &:hover {
color: @toolbar-color-light; color: contrast(@cp_toolbar-bg, lighten(@cp_toolbar-fg, 10%), darken(@cp_toolbar-fg, 10%));
} }
} }
} }
@ -366,8 +363,6 @@
} }
} }
@toolbar-green: #5cb85c;
box-sizing: border-box; box-sizing: border-box;
padding: 0px; padding: 0px;
display: flex; display: flex;
@ -431,6 +426,7 @@
margin: 0; margin: 0;
}*/ }*/
// XXX I don't think we still use any select in the toolbar
select { select {
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
@ -568,7 +564,7 @@
} }
.cp-toolbar-limit { .cp-toolbar-limit {
color: @colortheme_toolbar-warn; color: @cp_toolbar-warn;
} }
} }
@ -591,7 +587,7 @@
padding: 0; padding: 0;
margin: 0 5px; margin: 0 5px;
font-size: @colortheme_app-font-size; font-size: @colortheme_app-font-size;
color: @colortheme_toolbar-warn; color: @cp_toolbar-warn;
.cp-pnp-msg { .cp-pnp-msg {
padding-left: 5px; padding-left: 5px;
font-family: @colortheme_font; font-family: @colortheme_font;
@ -600,7 +596,7 @@
font-size: @colortheme_app-font-size; font-size: @colortheme_app-font-size;
font-family: @colortheme_font; font-family: @colortheme_font;
font-weight: bold; font-weight: bold;
color: @colortheme_toolbar-warn; color: @cp_toolbar-warn;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -621,7 +617,7 @@
//flex: 1; //flex: 1;
} }
.cp-toolbar-title { .cp-toolbar-title {
color: @cryptpad_text_col; color: @cp_toolbar-fg;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -756,7 +752,7 @@
} }
&:hover { &:hover {
border-color: transparent; border-color: transparent;
background-color: rgba(50,50,50,0.1); background-color: @cp_toolbar-fade1;
} }
span { span {
vertical-align: top; vertical-align: top;
@ -859,7 +855,7 @@
padding: 0; padding: 0;
&:hover { &:hover {
border-color: transparent; border-color: transparent;
background-color: rgba(50,50,50,0.1); background-color: @cp_toolbar-fade1;
} }
span { span {
text-align: center; text-align: center;
@ -888,7 +884,7 @@
border-radius: 0; border-radius: 0;
background: transparent; background: transparent;
&:hover { &:hover {
background-color: rgba(0,0,0,0.2); background-color: @cp_toolbar-fade1;
} }
} }
} }
@ -897,7 +893,7 @@
.cp-toolbar-history, .cp-toolbar-snapshots { .cp-toolbar-history, .cp-toolbar-snapshots {
background-color: @toolbar-bg-color-light; background-color: @toolbar-bg-color-light;
background-color: var(--toolbar-bg-color-light); background-color: var(--toolbar-bg-color-light);
color: @cryptpad_text_col; color: @toolbar-color;
} }
.cp-toolbar-snapshots { .cp-toolbar-snapshots {
display: none; display: none;
@ -925,7 +921,7 @@
.cp-toolbar-snapshots-actions { .cp-toolbar-snapshots-actions {
button { button {
margin: 0 5px; margin: 0 5px;
border: 1px solid @cryptpad_text_col; border: 1px solid @toolbar-color;
text-transform: uppercase; text-transform: uppercase;
i:not(:last-child) { i:not(:last-child) {
margin-right: 5px; margin-right: 5px;
@ -936,7 +932,7 @@
.cp-toolbar-bottom { .cp-toolbar-bottom {
background-color: @toolbar-bg-color-light; background-color: @toolbar-bg-color-light;
background-color: var(--toolbar-bg-color-light); background-color: var(--toolbar-bg-color-light);
color: @cryptpad_text_col; color: @cp_toolbar-bottom-fg;
button:hover, button.cp-toolbar-button-active { button:hover, button.cp-toolbar-button-active {
background-color: @toolbar-bg-color-active; background-color: @toolbar-bg-color-active;
background-color: var(--toolbar-bg-color-active); background-color: var(--toolbar-bg-color-active);
@ -1062,7 +1058,7 @@
display: none; display: none;
} }
.cp-toolbar-drawer-content { .cp-toolbar-drawer-content {
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 5px 0px @cp_shadow-color;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
&.cp-dropdown-visible { &.cp-dropdown-visible {
@ -1117,7 +1113,7 @@
} }
.cp-toolbar-spinner { .cp-toolbar-spinner {
color: @cryptpad_text_col; color: @cp_toolbar-fg;
font-family: "Open Sans"; font-family: "Open Sans";
font-size: 14px; font-size: 14px;
padding: 0 8px; padding: 0 8px;

12
customize.dist/src/less2/include/usergrid.less
Unescape Escape View File

@ -59,8 +59,8 @@
.tools_unselectable(); .tools_unselectable();
&.cp-selected { &.cp-selected {
background-color: @colortheme_alertify-primary; background-color: @cp_usergrid-selected-bg;
color: @colortheme_alertify-primary-text; color: @cp_usergrid-selected-fg;
order: -1 !important; order: -1 !important;
.cp-usergrid-avatar { .cp-usergrid-avatar {
media-tag, .cp-avatar-default { media-tag, .cp-avatar-default {
@ -98,12 +98,12 @@
margin-left: 5px; margin-left: 5px;
text-align: left; text-align: left;
line-height: 150%; line-height: 150%;
color: @cryptpad_text_col; color: @cp_usergrid-fg;
} }
} }
&.cp-selected { &.cp-selected {
.cp-usergrid-user-name { .cp-usergrid-user-name {
color: @colortheme_alertify-primary-text; color: @cp_usergrid-selected-fg;
} }
} }
.fa-times { .fa-times {
@ -111,9 +111,9 @@
cursor: pointer; cursor: pointer;
height: 100%; height: 100%;
line-height: 25px; line-height: 25px;
color: @cryptpad_text_col; color: @cp_usergrid-fg;
&:hover { &:hover {
color: lighten(@cryptpad_text_col, 10%); color: lighten(@cp_usergrid-fg, 10%);
} }
} }
} }

1
www/common/LessLoader.js
Unescape Escape View File

@ -95,6 +95,7 @@ define([
var COLORTHEME = '/customize/src/less2/include/colortheme.less'; var COLORTHEME = '/customize/src/less2/include/colortheme.less';
var COLORTHEME_DARK = '/customize/src/less2/include/colortheme-dark.less'; var COLORTHEME_DARK = '/customize/src/less2/include/colortheme-dark.less';
//COLORTHEME_DARK = '/customize/src/less2/include/colortheme.less'; // XXX
var getColortheme = function () { var getColortheme = function () {
return window.CryptPad_theme; return window.CryptPad_theme;
}; };

3
www/common/common-interface.js
Unescape Escape View File

@ -1265,9 +1265,6 @@ define([
var $popup = $(popup); var $popup = $(popup);
if (opts.hidden) {
$popup.addClass('cp-minimized');
}
if (opts.big) { if (opts.big) {
$popup.addClass('cp-corner-big'); $popup.addClass('cp-corner-big');
} }

1
www/common/common-ui-elements.js
Unescape Escape View File

@ -2130,6 +2130,7 @@ define([
// Team pad // Team pad
var team; var team;
// FIXME: broken wen cache is enabled
var teamExists = privateData.teams && Object.keys(privateData.teams).length; var teamExists = privateData.teams && Object.keys(privateData.teams).length;
var teamValue; var teamValue;
// storeInTeam can be // storeInTeam can be

10
www/common/drive-ui.js
Unescape Escape View File

@ -4023,16 +4023,6 @@ define([
$tree.html(''); $tree.html('');
/*
$(h('button.fa.fa-times.cp-close-button', {
title: Messages.filePicker_close
})).click(function (e) {
e.stopPropagation();
$tree.hide();
checkCollapseButton();
}).appendTo($tree);
*/
var $div = $('<div>', {'class': 'cp-app-drive-tree-categories-container'}) var $div = $('<div>', {'class': 'cp-app-drive-tree-categories-container'})
.appendTo($tree); .appendTo($tree);
if (displayedCategories.indexOf(SEARCH) !== -1) { createCategory($div, SEARCH); } if (displayedCategories.indexOf(SEARCH) !== -1) { createCategory($div, SEARCH); }

Write Preview
Loading…
Cancel
Save