cryptpad/customize.dist/src/less2/include/colortheme.less

453 lines
15 KiB
Plaintext

@colortheme_font: 'Open Sans', 'Helvetica Neue', sans-serif;
@colortheme_app-font-size: 16px;
@colortheme_app-font-size-small: 13px;
@colortheme_app-font: @colortheme_app-font-size @colortheme_font;
@colortheme_apps: {
default: #0087FF;
drive: #0087FF; // Used as icon color in index.js (index.html)
pad: #256ad5;
code: #EAA000;
slide: #e57614;
poll: #2c9e98;
form: #2c9e98;
whiteboard: #a72ba7;
kanban: #8C4;
sheet: #40865c;
doc: #5170B5;
presentation: #C65D27;
file: #CD2532;
}
@colortheme_static_apps: {
default: #0087FF;
teams: #4A3BBD;
contacts: #607B8D;
}
// Colors
@cryptpad_color_brand: #0087FF;
@cryptpad_color_brand_300: lighten(@cryptpad_color_brand, 30%);
@cryptpad_color_brand_fade: fade(@cryptpad_color_brand, 75%);
@cryptpad_color_brand_fader: fade(@cryptpad_color_brand, 50%);
@cryptpad_color_brand_fadest: fade(@cryptpad_color_brand, 25%);
@cryptpad_color_white: #FFF;
@cryptpad_color_grey_50: #FAFAFA;
@cryptpad_color_grey_100: #F5F5F5;
@cryptpad_color_grey_200: #EEEEEE;
@cryptpad_color_grey_300: #E0E0E0;
@cryptpad_color_grey_400: #BDBDBD;
@cryptpad_color_grey_500: #9E9E9E;
@cryptpad_color_grey_600: #757575;
@cryptpad_color_grey_700: #616161;
@cryptpad_color_grey_800: #424242;
@cryptpad_color_grey_850: #323232;
@cryptpad_color_grey_900: #212121;
@cryptpad_color_grey_950: #121212;
@cryptpad_color_black: #000;
@cryptpad_text_col:@cryptpad_color_grey_800;
@cryptpad_color_blue: #326599; // former logo-1
@cryptpad_color_light_blue: #00b7d8;
@cryptpad_color_red: #ff1100;
@cryptpad_color_red_fade: fade(@cryptpad_color_red, 50%);
@cryptpad_color_red_fader: fade(@cryptpad_color_red, 15%);
@cryptpad_color_warn_red: @cryptpad_color_red_fade;
@cryptpad_color_dark_red: #9e0000;
@cryptpad_color_light_red: #FFD4D4;
@cryptpad_color_light_red_fade: fade(@cryptpad_color_light_red, 75%);
@cryptpad_color_orange: #f49842;
@cryptpad_color_green: #5cb85c;
@cryptpad_color_green_fade: fade(@cryptpad_color_green, 50%);
@cryptpad_color_light_green: #c5ffa8;
@cryptpad_color_light_green_fade: fade(@cryptpad_color_light_green, 20%);
@cryptpad_color_light_yellow: #FFE69C;
@cryptpad_color_yellow_fade: fade(#FFE69C, 50%); // different from dark
@cryptpad_color_lighter_blue: #d2e1f2;
@cp_palette:
#FFD4D4,
#FFDECA,
#FFE69C,
#DBFFB7,
#AFFDC2,
#C9FFFE,
#C8D6FF,
#E4CAFF;
@cp_palette-dark:
darken(extract(@cp_palette, 1), 50%),
darken(extract(@cp_palette, 2), 51%),
darken(extract(@cp_palette, 3), 52%),
darken(extract(@cp_palette, 4), 61%),
darken(extract(@cp_palette, 5), 57%),
darken(extract(@cp_palette, 6), 65%),
darken(extract(@cp_palette, 7), 50%),
darken(extract(@cp_palette, 8), 50%);
@cryptpad_color_link: @cryptpad_color_brand;
// Premium plans colors
@cryptpad_color_basic: #DDEFFF;
@cryptpad_color_pro: #E4FFDD;
@cryptpad_color_power: #F6DDFF;
@cp_scrollbar-fg: fade(@cryptpad_color_black, 20%);
@scrollbar_color: @cp_scrollbar-fg transparent;
// Loading screen
@cp_loading-bg: @cryptpad_color_grey_200;
@cp_loading-fg: @cryptpad_text_col;
@cp_loading-msg-bg: @cryptpad_color_white;
@cp_loading-link: @cryptpad_color_brand;
@cp_loading-error-bg: @cryptpad_color_warn_red;
@cp_loading-error-fg: @cryptpad_text_col;
@cp_loading-progress-bg: @cryptpad_color_white;
@cp_loading-progress-bar-bg: @cryptpad_color_brand;
@cp_loading-spinner: @cryptpad_color_grey_500;
// Chat
@cp_messenger-bg: @cryptpad_color_grey_200;
@cp_messenger-fg: @cryptpad_text_col;
@cp_messenger-notif: @cryptpad_color_black;
@cp_messenger-friend: @cryptpad_color_black;
@cp_messenger-online: @cryptpad_color_light_green;
// Alertify
@cp_alertify-bg: @cryptpad_color_white;
@cp_alertify-fg: @cryptpad_color_brand;
@cp_alertify-hover: fade(@cp_alertify-fg, 25%);
@cp_alertify-overlay: fade(@cryptpad_text_col, 50%);
@cp_alertify-log-bg: fade(@cryptpad_color_brand, 90%);
@cp_alertify-log-fg: @cryptpad_color_white;
@cp_alertify-warn-bg: rgba(205, 37, 50);
@cp_alertify-disable-border: @cryptpad_color_grey_500;
// Forms
@cp_forms-fg: @cryptpad_text_col;
@cp_forms-bg: @cryptpad_color_grey_100;
@cp_forms-border: @cryptpad_color_brand;
@cp_forms-placeholder: fade(@cryptpad_text_col, 75%);
@cp_forms-readonly: @cryptpad_color_brand_fadest;
@cp_forms-readonly-border: @cryptpad_color_brand;
@cp_forms-disabled: @cryptpad_color_grey_500;
// Bootstrap alerts
@cp_alerts-warning-bg: @cryptpad_color_yellow_fade;
@cp_alerts-warning-fg: @cryptpad_color_light_yellow;
@cp_alerts-warning-text: darken(@cp_alerts-warning-fg, 55%);
@cp_alerts-danger-bg: @cryptpad_color_light_red_fade;
@cp_alerts-danger-fg: @cryptpad_color_light_red;
@cp_alerts-danger-text: darken(@cp_alerts-danger-fg, 55%);
@cp_alerts-info-bg: fade(@cryptpad_color_brand, 15%);
@cp_alerts-info-text: @cryptpad_color_brand;
@cp_alerts-info-fg: @cryptpad_color_brand;
@cp_alerts-success-bg: @cryptpad_color_light_green_fade;
@cp_alerts-success-fg: @cryptpad_color_green;
@cp_alerts-success-text: darken(@cryptpad_color_green, 20%);
// 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;
@cp_buttons-red: #E55236;
@cp_buttons-red-text: @cp_buttons-red;
@cp_buttons-red-color: #FFF;
@cp_buttons-red-border: transparent;
@cp_buttons-primary: @cryptpad_color_brand;
@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_200;
@cp_sidebar-left-fg: @cryptpad_text_col;
@cp_sidebar-right-bg: @cryptpad_color_white;
@cp_sidebar-right-fg: @cryptpad_text_col;
@cp_sidebar-left-active: @cp_sidebar-right-bg;
@cp_sidebar-hint: @cryptpad_color_grey_600;
// Drive
@cp_drive-bg: @cp_sidebar-right-bg;
@cp_drive-fg: @cp_sidebar-right-fg;
@cp_drive-header-fg: fade(@cryptpad_text_col, 70%);
@cp_drive-icon-hover: fade(@cryptpad_text_col, 15%);
@cp_drive-icon-border: fade(@cryptpad_text_col, 20%);
@cp_drive-thumb-bg: transparent;
@cp_drive-selected-bg: fade(@cryptpad_text_col, 10%);
@cp_drive-selected-fg: @cryptpad_text_col;
@cp_drive-selection-overlay: fade(@cryptpad_text_col, 5%);
@cp_drive-selection-bg: @cryptpad_color_grey_200;
@cp_drive-selection-fg: @cryptpad_text_col;
@cp_drive-droppable-bg: @cryptpad_color_grey_400;
@cp_drive-droppable-fg: @cryptpad_text_col;
@cp_drive-infobox-bg: @cryptpad_color_brand_fadest;
@cp_drive-infobox-fg: @cryptpad_text_col;
@cp_drive-warnbox-bg: @cryptpad_color_warn_red;
@cp_drive-warnbox-fg: @cryptpad_text_col;
@cp_drive-tree-branch: @cryptpad_text_col;
// Contextmenu
@cp_context-bg: @cryptpad_color_white;
@cp_context-border: @cryptpad_color_grey_400;
@cp_context-bg-hover: @cryptpad_color_grey_300;
@cp_context-bg-active: @cryptpad_color_grey_400;
@cp_context-fg: @cryptpad_text_col;
@cp_context-icon: @cryptpad_text_col;
@cp_context-disabled: @cryptpad_color_grey_400;
// Tooltip background
@cp_tooltip-bg: @cryptpad_color_grey_300;
@cp_tooltip-fg: @cryptpad_text_col;
// Dropdown
@cp_dropdown-fg: @cryptpad_text_col;
@cp_dropdown-bg: @cryptpad_color_grey_100;
@cp_dropdown-bg-hover: @cryptpad_color_grey_200;
@cp_dropdown-bg-active: @cryptpad_color_grey_300;
// Rendered Markdown
@cp_markdown-bg: @cryptpad_color_grey_100;
@cp_markdown-border: @cryptpad_color_grey_400;
@cp_markdown-block-fg: @cryptpad_text_col;
@cp_markdown-block-bg: @cryptpad_color_grey_200;
// Avatar
@cp_avatar-bg: @cryptpad_color_grey_300;
@cp_avatar-fg: @cryptpad_text_col;
// Corner
@cp_corner-bg: @cryptpad_color_grey_100;
@cp_corner-fg: @cryptpad_color_brand;
@cp_corner-text: @cryptpad_text_col;
// Pad Creation Screen
@cp_creation-bg: @cryptpad_color_white;
@cp_creation-fg: @cryptpad_text_col;
@cp_creation-button-bg: @cryptpad_color_brand;
@cp_creation-button-fg: @cryptpad_color_white;
@cp_creation-error-bg: @cryptpad_color_blue;
@cp_creation-error-fg: @cryptpad_color_grey_100;
// Export
@cp_export-bg: @cryptpad_color_grey_200;
@cp_export-fg: @cryptpad_text_col;
@cp_export-hint: fade(@cryptpad_text_col, 80%);
@cp_export-error-bg: @cryptpad_color_grey_300;
@cp_export-error-bg2: @cryptpad_color_red_fader;
// File upload
@cp_upload-fg: @cryptpad_color_brand;
@cp_upload-header: @cryptpad_color_grey_300;
@cp_upload-progress: @cryptpad_color_grey_300;
// Help
@cp_help-bg: @cryptpad_color_grey_300;
@cp_help-fg: @cryptpad_text_col;
@cp_help-link: @cryptpad_color_link;
// Static pages
@cp_static-bg: @cryptpad_color_grey_200;
@cp_static-fg: @cryptpad_text_col;
@cp_static-link: @cryptpad_color_brand;
@cp_static-title: @cryptpad_color_brand;
@cp_static-footer: @cryptpad_color_grey_300;
@cp_static-footer-border: @cryptpad_color_white;
@cp_static-topbar-fg: @cryptpad_color_brand;
@cp_static-card-bg: @cryptpad_color_white;
@cp_static-img-invert-filter: none;
// Limit
@cp_limit-fg: @cryptpad_text_col;
@cp-limit-bar-bg: @cryptpad_color_white;
@cp-limit-bar-normal: @cryptpad_color_green;
@cp-limit-bar-warning: @cryptpad_color_orange;
@cp-limit-bar-above: @cryptpad_color_red;
// Mentions
@cp_mentions-bg: @cryptpad_color_grey_300;
@cp_mentions-hover: @cryptpad_color_grey_300;
// Autocomplete
@cp_autocomplete-bg: @cryptpad_color_grey_100;
@cp_autocomplete-fg: @cryptpad_text_col;
@cp_autocomplete-border: @cryptpad_color_grey_300;
@cp_autocomplete-hover: @cryptpad_color_brand_fadest;
// Modals
@cp_access-overlay: fade(@cryptpad_color_white, 50%);
@cp_snapshots-hover: @cryptpad_color_grey_300;
// Support
@cp_support-bg: @cryptpad_color_grey_200;
@cp_support-msg-fg: @cryptpad_text_col;
@cp_support-msg-bg: @cryptpad_color_grey_300;
@cp_support-header-bg: @cryptpad_color_grey_300;
// Toolbar
@cp_toolbar-bg: @cryptpad_color_grey_200;
@cp_toolbar-fg: @cryptpad_text_col;
@cp_toolbar-bottom-fg: @cryptpad_text_col;
@cp_toolbar-logo-bg: @cryptpad_color_white;
@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;
// Tokenfield
@cp_token-bg: @cryptpad_color_grey_400;
@cp_token-fg: @cryptpad_text_col;
@cp_token-bg-hover: @cryptpad_color_grey_500;
@cp_token-invalid: @cryptpad_color_warn_red;
// Usergrid
@cp_usergrid-fg: @cryptpad_text_col;
@cp_usergrid-selected-bg: @cryptpad_color_brand;
@cp_usergrid-selected-fg: @cryptpad_color_white;
// Other
@cp_shadow-color: fade(@cryptpad_color_black, 30%);
// Apps
@cp_app-bg: @cryptpad_color_grey_100;
@cp_app-fg: @cryptpad_text_col;
// Accounts
@cp_accounts-basic: @cryptpad_color_basic;
@cp_accounts-pro: @cryptpad_color_pro;
@cp_accounts-power: @cryptpad_color_power;
@cp_accounts-active: @cryptpad_color_light_green;
@cp_accounts-inactive: @cryptpad_color_light_red;
@cp_accounts-mysubs-alert: @cryptpad_color_white;
@cp_accounts-mysubs-bg: @cryptpad_color_grey_200;
@cp_accounts-mysubs-fg: @cryptpad_text_col;
@cp_accounts-contact-hover: fade(@cryptpad_color_black, 20%);
@cp_accounts-tab-bg: @cryptpad_color_grey_200;
@cp_accounts-tab-hover: @cryptpad_color_grey_300;
@cp_accounts-tab-border: @cryptpad_color_grey_500;
// Admin
@cp_admin-isadmin-bg: @cryptpad_color_brand_fadest;
@cp_admin-premium-bg: @cryptpad_color_red_fader;
@cp_admin-last-fg: @cryptpad_text_col;
@cp_admin-last-bg: @cryptpad_color_grey_300;
// Code
@cp_preview-bg: @cryptpad_color_white;
@cp_preview-fg: @cryptpad_text_col;
@cp_preview-link: @cryptpad_color_brand;
// Debug
@cp_debug-hover: fade(@cryptpad_color_black, 10%);
@cp_debug-icon-hover: @cryptpad_color_grey_300;
// Mediatag
@cp_mediatag-text-bg: @cryptpad_color_white;
@cp_mediatag-text-fg: @cryptpad_text_col;
// File
@cp_file-progress-bg: @cryptpad_color_brand;
@cp_file-progress-fg: @cryptpad_text_col;
// Kanban
@cp_kanban-fg: @cryptpad_text_col;
@cp_kanban-item-bg: @cryptpad_color_grey_50;
@cp_kanban-link: @cryptpad_color_brand;
@cp_kanban-board-bg: @cryptpad_color_grey_300;
@cp_kanban-conflict-bg: @cryptpad_color_grey_200;
@cp_kanban-tags-bg: @cryptpad_color_grey_300;
@cp_kanban-add-hover: fade(@cryptpad_color_black, 10%);
@cp_kanban-trash-bg: @cryptpad_color_warn_red;
@cp_kanban-color0: @cryptpad_color_grey_400;
@cp_kanban-colors: @cp_palette;
// Notifications
@cp_notif-hover: fade(@cryptpad_color_black, 10%);
@cp_notif-header-bg: @cryptpad_color_grey_200;
@cp_notif-header-fg: @cryptpad_text_col;
@cp_notif-table-border: @cryptpad_color_white;
@cp_notif-bg: @cryptpad_color_grey_100;
@cp_notif-fg: @cryptpad_text_col;
// OO
@cp_oo-offline-overlay: fade(@cryptpad_color_white, 50%);
// Rich text
@cp_pad-fg: @cryptpad_text_col;
@cp_pad-icon-filter: none;
@cp_pad-resize: @cryptpad_text_col;
// Comments
@cp_comments-fg: @cryptpad_text_col;
@cp_comments-bg: @cryptpad_color_white;
@cp_comments-header: @cryptpad_color_grey_600;
@cp_comments-notif: @cryptpad_color_red;
// Poll
@cp_poll-th-bg: @cryptpad_color_lighter_blue;
@cp_poll-th-fg: @cryptpad_text_col;
@cp_poll-uncommitted-bg: @cryptpad_color_grey_200;
@cp_poll-border-color: @cryptpad_color_grey_600;
@cp_poll-cell-fg: @cryptpad_text_col;
@cp_poll-unset: @cryptpad_color_grey_300;
@cp_poll-yes: @cryptpad_color_light_green;
@cp_poll-no: @cryptpad_color_light_red;
@cp_poll-maybe: @cryptpad_color_light_yellow;
@cp_poll-hint: @cryptpad_color_grey_500;
// Profile
@cp_profile-border: @cryptpad_color_grey_400;
@cp_profile-hint: @cryptpad_color_grey_600;
// SLide
@cp_slide-fg: @cp_app-fg;
@cp_slide-css-error: @cryptpad_color_red_fader;
// Teams
@cp_teams-card-bg: @cryptpad_color_grey_300;
@cp_teams-leftside-bg: darken(@cryptpad_color_grey_200, 5%);
@cp_teams-invite-bg: fade(@cryptpad_color_brand, 50%);
@cp_teams-invite-fg: @cryptpad_text_col;
@cp_teams-roster-odd: fade(@cryptpad_text_col, 15%);
// Whiteboard
@cp_whiteboard-board-bg: @cryptpad_color_white;
@cp_whiteboard-board-border: @cryptpad_color_grey_600;
@cp_whiteboard-bg: @cp_app-bg;
@cp_whiteboard-fg: @cryptpad_text_col;
// Flatpickr
@cp_flatpickr-bg: @cryptpad_color_grey_50;
@cp_flatpickr-highlight: @cryptpad_color_brand_fadest;
@cp_flatpickr-highlight-text: @cryptpad_text_col;
// Calendar
@cp_calendar-border: @cryptpad_color_grey_300;
@cp_calendar-now: @cryptpad_color_brand;
@cp_calendar-now-fg: @cryptpad_color_grey_200;
// Forms
@cp_form-bg1: @cryptpad_color_grey_50;
@cp_form-bg2: @cryptpad_color_grey_200;
@cp_form-border: @cryptpad_color_grey_200;
@cp_form-poll-color: @cryptpad_color_grey_800;
@cp_form-poll-no: fade(@cryptpad_color_light_red, 75%);
@cp_form-poll-yes: fade(@cryptpad_color_light_green, 75%);
@cp_form-poll-maybe: @cryptpad_color_grey_300;
@cp_form-poll-yes-color: @cryptpad_color_green;
@cp_form-invalid: @cryptpad_color_red;
@cp_form-palette: @cp_palette;
@cp_form-palette2: @cp_palette-dark;