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

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

@ -9,18 +9,17 @@
@colortheme_loading_bg: #E7E7E7;
@colortheme_link-color: #0275D8;
@colortheme_link-color-visited: #005999;
@colortheme_link-color-visited: lighten(@colortheme_link-color, 10%);
@colortheme_info-background: #eeeeee;
@colortheme_old-base: #302B28;
@colortheme_old-fore: #fafafa;
@colortheme_base: #fff;
@colortheme_light-base: lighten(@colortheme_base, 20%);
@colortheme_cp-red: #FA5858; // remove red
@colortheme_cp-green: #46E981;
@colortheme_old-fore: #fafafa;
@colortheme_form-border: #bbbbbb;
@colortheme_form-bg: @colortheme_logo-2;
@colortheme_form-color: #ffffff;
@ -48,9 +47,6 @@
@colortheme_alertify-red: #E55236;
@colortheme_alertify-red-color: #FFF;
@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-text: @colortheme_form-color;
@colortheme_alertify-primary-border: transparent;
@ -60,15 +56,8 @@
@colortheme_alertify-cancel: @colortheme_modal-bg;
@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_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.
@colortheme_toolbar-warn: @colortheme_alertify-red;
@colortheme_pad-toolbar-bg: #eeeeee;
@ -77,7 +66,7 @@
@colortheme_pad-chat-bg: #AAA;
@colortheme_apps: {
default: #000000;
default: #0087FF;
drive: #0087FF; // Used as icon color in index.js (index.html)
pad: #256ad5;
code: #EAA000;
@ -92,7 +81,7 @@
}
@colortheme_static_apps: {
default: #000000;
default: #0087FF;
teams: #4A3BBD;
contacts: #607B8D;
}
@ -115,11 +104,8 @@
@colortheme_sidebar-button-alt-bg: #fff;
@cryptpad_color_blue: #4591C4;
@cryptpad_color_grey: #999999;
@cryptpad_color_light_grey: #e0e0e0;
@cryptpad_header_col: #1E1F1F;
@cryptpad_text_col: #3F4141;
@cryptpad_color_light_blue: #00b7d8;
@cryptpad_text_col: #FFF-#3F4141;
@colortheme_checkmark-back0: @colortheme_form-bg-alt;
@colortheme_checkmark-back0-active: @colortheme_form-border;
@ -128,3 +114,196 @@
@colortheme_checkmark-back2: @colortheme_form-bg-alt;
@colortheme_checkmark-col2: @colortheme_form-color-alt;
@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
// Colors
@cryptpad_color_hint_grey: #777;
@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_toolbar_grey: #EEEEEE;
@cryptpad_color_light_grey: #f1f1f1;
@cryptpad_color_lighter_grey: #f9f9f9;
@cryptpad_color_light_blue: #00b7d8;
@cryptpad_color_lighter_blue: #d2e1f2;
@cryptpad_color_warn_red: #eb675e;
@cryptpad_color_black: #000;
@cryptpad_color_white: #FFF;
@cryptpad_color_green: #5cb85c;
@cryptpad_color_link: #0275D8;
@cp_loading-bg: #E7E7E7;
// Alertify
@cp_alertify-bg: @cryptpad_color_white;
@ -137,9 +150,11 @@
// 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
@ -150,15 +165,42 @@
@cp_buttons-red: #E55236;
@cp_buttons-red-color: #FFF;
@cp_buttons-red-border: transparent;
@cp_buttons-primary: @colortheme_form-bg;
@cp_buttons-primary-text: @colortheme_form-color;
@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: @colortheme_modal-bg;
@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;
@ -178,5 +220,91 @@
@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);

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

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

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

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

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

@ -4,9 +4,11 @@
--LessLoader_require: LessLoader_currentFile();
};
& {
@corner-link: #ffff7a;
@corner-blue: @colortheme_logo-1;
@corner-white: @colortheme_base;
@corner-blue-alt: darken(@corner-blue, 10%);
@corner-white-alt: darken(@corner-white, 10%);
@keyframes appear {
0% {
@ -32,7 +34,6 @@
width: 350px;
padding: 10px;
background-color: fade(@corner-blue, 95%);
border: 1px solid @corner-blue;
color: @corner-white;
z-index: 9999;
transform-origin: bottom right;
@ -41,7 +42,6 @@
&.cp-corner-alt {
background-color: fade(@corner-white, 95%);
border: 1px solid @corner-blue;
color: @corner-blue;
}
@ -54,39 +54,6 @@
clear: left;
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 {
width: 500px;
max-width: 95%;
@ -99,13 +66,14 @@
font-size: 1.1em;
}
&:hover {
color: darken(@corner-white, 10%);
color: @corner-white-alt;
}
}
&.cp-corner-alt {
.cp-corner-dontshow {
&:hover {
color: lighten(@corner-blue, 10%);
color: @corner-blue-alt;
}
}
}
@ -124,14 +92,14 @@
color: @corner-white;
text-decoration: underline;
&:hover {
color: darken(@corner-white, 10%);
color: @corner-white-alt;
}
}
}
&.cp-corner-alt a {
color: @corner-blue;
&:hover {
color: lighten(@corner-blue, 10%);
color: @corner-blue-alt;
}
}
@ -151,15 +119,15 @@
background-color: @corner-white;
color: @corner-blue;
&:hover {
background-color: lighten(@corner-blue, 50%);
border-color: lighten(@corner-blue, 50%);
background-color: @corner-white-alt;
border-color: @corner-white-alt;
}
}
&.cp-corner-cancel {
background-color: @corner-blue;
color: @corner-white;
&:hover {
background-color: darken(@corner-blue, 10%);
background-color: @corner-blue-alt;
}
}
}
@ -169,15 +137,15 @@
background-color: @corner-blue;
color: @corner-white;
&:hover {
background-color: darken(@corner-blue, 10%);
border-color: darken(@corner-blue, 10%);
background-color: @corner-blue-alt;
border-color: @corner-blue-alt;
}
}
&.cp-corner-cancel {
background-color: @corner-white;
color: @corner-blue;
&: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(
@bg-color: @colortheme_apps[default]
) {
@creation-color: @cryptpad_text_col;
@creation-color: @cp_creation-fg;
@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(
@ -17,23 +17,18 @@
) {
--LessLoader_require: LessLoader_currentFile();
.creation_vars(@bg-color);
--creation-color: @cryptpad_text_col;
--creation-color: @cp_creation-fg;
--creation-bg-color: @bg-color;
--creation-bg-color-light: @creation-bg-color-light;
}
& {
.creation_vars();
@colortheme_creation-modal-bg: #fff;
@colortheme_creation-modal: #666;
@colortheme_creation-modal-title: @colortheme_loading-bg;
#cp-creation-container {
position: absolute;
z-index: 100000000; // #loading * 10
top: 0px;
//background: @colortheme_loading-bg;
background: @colortheme_loading_bg;
color: @colortheme_loading-color;
background: @cp_loading-bg;
display: flex;
flex-flow: column; /* we need column so that the child can shrink vertically */
justify-content: center;
@ -60,8 +55,8 @@
#cp-creation {
overflow: auto;
text-align: center;
background: @colortheme_creation-modal-bg;
color: @colortheme_creation-modal;
background: @cp_creation-bg;
color: @cp_creation-fg;
font: @colortheme_app-font;
outline: none;
width: 700px;
@ -127,16 +122,16 @@
button {
.tools_unselectable();
padding: 6px;
background: @colortheme_logo-2;
background: @cp_creation-button-bg;
font-size: 20px;
color: #FFF;
color: @cp_creation-button-fg;
margin: 3px 10px;
border: none;
cursor: pointer;
outline: none;
text-transform: uppercase;
&: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 {
font-size: 18px;
color: @colortheme_form-warning;
font-size: 16px;
color: @cp_creation-fg;
&:hover {
color: @colortheme_form-warning-hov;
text-decoration: none;
}
}
@ -196,11 +190,11 @@
input, select {
font-size: 14px;
border: 1px solid @colortheme_form-bg;
background: @cp_forms-bg;
border: 1px solid @cp_forms-border;
height: 26px;
line-height: 26px;
//background-color: @colortheme_form-bg;
color: @cryptpad_text_col;
color: @cp_forms-fg;
}
.cp-creation-teams {
@ -221,14 +215,13 @@
padding: 5px;
cursor: default;
font: @colortheme_app-font;
color: @colortheme_modal-fg;
margin: 0 1px;
.tools_unselectable();
&.cp-selected {
background-color: @colortheme_alertify-primary;
color: @colortheme_alertify-primary-text;
background-color: @cp_creation-button-bg;
color: @cp_creation-button-fg;
}
.cp-creation-team-avatar {
.fa {
@ -243,7 +236,7 @@
text-align: center;
line-height: 18px;
}
border: 1px solid @colortheme_alertify-primary;
border: 1px solid @cp_creation-button-bg;
}
}
@ -294,19 +287,6 @@
.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 {
width: 100%;
//flex: 1 0 auto;
@ -341,7 +321,7 @@
max-height: 159px;
align-items: center;
.cp-creation-template-element {
box-shadow: 2px 2px 7px @colortheme_form-border;
box-shadow: 2px 2px 7px @cp_shadow-color;
width: 300px;
max-width: calc(100% - 10px);
padding: 2px;
@ -404,8 +384,8 @@
text-align: center;
.cp-creation-deleted {
margin: 0 10px;
background: @colortheme_loading-bg;
color: @colortheme_loading-color;
background: @cp_creation-error-bg;
color: @cp_creation-error-fg;
padding: 10px;
text-align: center;
font-weight: bold;

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

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

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

@ -6,13 +6,16 @@
min-height: 0;
align-items: center;
justify-content: center;
background-color: @cp_export-bg;
color: @cp_export-fg;
.cp-export-block {
width: 800px;
max-width: 90vw;
// XXX Keep hardcoded progress bar colors for now...
.cp-export-progress-bar-container {
height: 24px;
background: white;
border: 1px solid #DDD;
border: 1px solid ;
width: 80%;
margin: auto;
position: relative;
@ -33,7 +36,7 @@
}
}
& > p {
color: #777;
color: @cp_export-hint;
}
.cp-export-progress {
margin-bottom: 1rem;
@ -58,8 +61,8 @@
display: none;
overflow-x: auto;
max-height: 300px;
background: #ededed;
border: 1px solid #777;
background: @cp_export-error-bg;
border: 1px solid @cp_export-hint;
padding: 5px 20px;
margin-top: 1rem;
& > p {
@ -69,7 +72,7 @@
& > div {
padding: 5px 10px;
margin: 5px 0;
background: #dedede;
background: @cp_export-error-bg2;
.title {
font-weight: bold;
}
@ -79,7 +82,7 @@
}
.reason {
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;
z-index: 100001; //Z file upload table container: just above the file picker
display: none;
color: darken(@colortheme_static_apps[default], 10%);
color: @cp_upload-fg;
max-height: 180px;
overflow-y: auto;
@ -26,7 +26,7 @@
.cp-fileupload-header {
display: flex;
background-color: darken(@colortheme_modal-bg, 10%);
background-color: @cp_upload-header;
font-weight: bold;
position: sticky;
top: 0;
@ -39,7 +39,7 @@
padding: 0.25em 0.5em;
cursor: pointer;
&:hover {
background-color: rgba(0,0,0,0.1);
color: lighten(@cp_upload-fg, 10%);
}
}
}
@ -86,7 +86,7 @@
position: absolute;
width: 0px;
height: 100%;
background-color: #dddddd;
background-color: @cp_upload-progress;
z-index: -1; //Z file upload progress container
}
.cp-fileupload-table-cancel {

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

@ -17,6 +17,7 @@
padding: @alertify_padding-base;
&[readonly] {
background-color: @cp_forms-readonly;
border-color: @cp_forms-readonly-border;
color: @cp_forms-fg;
}
}
@ -135,7 +136,7 @@
&:hover, &:not(:disabled):active, &:focus {
border-color: @cp_buttons-red-border;
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 {
color: @cp_buttons-primary-text;
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 {
position: relative;
background-color: @colortheme_help-bg;
background-color: @cp_help-bg;
max-height: 50%;
overflow-y: auto;
&.cp-help-hidden {
@ -21,11 +21,11 @@
cursor: pointer;
}
.cp-help-text {
color: @cryptpad_text_col;
color: @cp_help-fg;
margin: 0;
padding: 5px 15px;
a {
color: @colortheme_link-color;
color: @cp_help-link;
}
h1 {
font-size: 20px;

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

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

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

@ -3,7 +3,7 @@
.infopages_link () {
text-decoration: none;
color: #0275D8;
color: @cryptpad_color_link;
cursor: pointer;
display: inline-flex;
&:hover {
@ -23,11 +23,11 @@ body {
@infopages_padding: 32px;
// Basic setup for info pages, this should be used at the global level
background-color: @colortheme_info-background;
color: @cryptpad_text_col;
background-color: @cp_static-bg;
color: @cp_static-fg;
a {
color: @colortheme_logo-2;
&:visited { color: darken(@colortheme_logo-2, 5%); }
color: @cp_static-link;
&:visited { color: darken(@cp_static-link, 5%); }
}
a:hover {
opacity: 1;
@ -77,7 +77,7 @@ body {
.cp-page-title {
h1 {
font-family: "IBM Plex Mono";
color: @colortheme_logo-2;
color: @cp_static-title;
margin: 50px auto;
}
}
@ -90,21 +90,21 @@ body {
button {
outline: none;
background-color: @colortheme_logo-2;
color: @colortheme_base;
background-color: @cp_buttons-primary;
color: @cp_buttons-primary-text;
border: none;
padding: 10px 20px;
margin-right: 10px;
border-radius: 0px;
cursor: pointer;
&: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 {
background-color: white;
color: @colortheme_logo-2;
border: 1px solid @colortheme_logo-2;
background-color: @cp_buttons-cancel;
color: @cp_buttons-fg;
border: 1px solid @cp_buttons-fg;
}
.form-group {
@ -128,19 +128,18 @@ body {
}
}
footer {
@footer-color: #d9d9d9; // FIXME use/make variable
background-color: @footer-color;
background-color: @cp_static-footer;
padding-top: 20px;
align-self: normal; // override align-items:center from parent in index.html
.container {
margin-bottom: 20px;
a {
color: @colortheme_logo-2;
color: @cp_static-link;
&:visited {
color: @colortheme_logo-2;
};
color: @cp_static-link;
}
}
}
.cp-logo-foot {
@ -156,18 +155,18 @@ body {
display: block;
font-family: "IBM Plex Mono";
font-size: 1.5rem;
color: @colortheme_logo-2;
color: @cp_static-link;
margin-bottom: 10px;
}
}
.cp-version-footer {
background-color: @footer-color;
background-color: @cp_static-footer;
display: flex;
flex-flow: column;
align-items: center;
padding: 0.5em;
border-top: 1px solid #fff;
border-top: 1px solid @cp_static-footer-border;
select {
min-width: 0;
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
.navbar {
width: 100%;
color: @colortheme_logo-2;
color: @cp_static-topbar-fg;
.navbar-brand {
display: block;
height: 50px;
@ -235,7 +197,7 @@ body {
border: 2px solid transparent;
white-space: nowrap;
&:visited {
color: @colortheme_logo-2;
color: @cp_static-link;
}
}
.nav-link {
@ -245,7 +207,7 @@ body {
}
}
.cp-register-btn {
border: 2px solid @colortheme_logo-2;
border: 2px solid @cp_static-topbar-fg;
display: inline-block;
}
button:focus {
@ -253,7 +215,7 @@ body {
}
.navbar-toggler {
margin-top: 10px;
color: @colortheme_logo-2;
color: @cp_static-topbar-fg;
}
}
@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);
}
&.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;
top: 0;
z-index: 1; // .usage
// XXX Check if we can keep the same colors in dark themes
&.cp-limit-usage-normal {
background: @colortheme_green;
}
@ -45,7 +46,7 @@
}
.cp-limit-usage-text {
color: @cryptpad_text_col;
color: @cp_limit-fg;
margin-left: 5px;
z-index: 2; // .usageText
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;
align-items: center;
vertical-align: bottom;
background-color: #eee;
background-color: @cp_mentions-bg;
span.cp-mentions-name {
max-width: 150px;
@ -25,7 +25,7 @@
outline: none;
cursor: pointer;
&: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;
a {
color: @colortheme_link-color;
color: @cryptpad_color_link;
&: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
.cp-app-prop {
margin-bottom: 10px;
.cp-app-prop-hint {
color: @cryptpad_text_col;
font-size: 0.8em;
margin-bottom: 5px;
}
.cp-app-prop-size-container {
height: 20px;
background-color: @colortheme_logo-2;
@ -52,11 +47,10 @@
height: 20px;
margin: 0;
padding: 0;
background-color: #CCCCCC;
background-color: @cryptpad_color_neutral2_grey;
}
}
.cp-app-prop-size-legend {
color: @colortheme_modal-fg;
display: flex;
margin: 10px 0;
& > div {
@ -73,7 +67,7 @@
margin-right: 10px;
}
.cp-app-prop-history-size-color {
background-color: #CCCCCC;
background-color: @cryptpad_color_neutral2_grey;
}
.cp-app-prop-contents-size-color {
background-color: @colortheme_logo-2;
@ -108,7 +102,7 @@
position: relative;
.cp-overlay {
position: absolute;
background-color: rgba(255,255,255,0.5);
background-color: @cp_access-overlay;
top: 0;
bottom: 0;
left: 0;
@ -200,7 +194,7 @@
.cp-snapshot-buttons {
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;
cursor: pointer;
&:hover {
background-color: rgba(0,0,0,0.1);
background-color: @cp_dropdown-bg-hover;
}
}
.cp-notification-content {
@ -35,7 +35,7 @@
&.cp-clickable {
cursor: pointer;
&:hover {
background-color: rgba(0,0,0,0.1);
background-color: @cp_dropdown-bg-hover;
}
}
}
@ -47,7 +47,7 @@
justify-content: center;
cursor: pointer;
&:hover {
background-color: rgba(0,0,0,0.1);
background-color: @cp_dropdown-bg-hover;
}
}
}
@ -59,7 +59,7 @@
font-weight: bold;
cursor: pointer;
&: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;
cursor: pointer;
&: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 {
font-size: 16px;
display: flex;
flex: 1;
min-height: 0;
#cp-sidebarlayout-leftside {
color: @leftside-color;
color: @cp_sidebar-left-fg;
width: 250px;
background: @leftside-bg;
background: @cp_sidebar-left-bg;
display: flex;
flex-flow: column;
.cp-sidebarlayout-categories {
@ -71,7 +66,8 @@
#cp-sidebarlayout-rightside {
flex: 1;
padding: 5px 20px;
color: @rightside-color;
background: @cp_sidebar-right-bg;
color: @cp_sidebar-right-fg;
overflow: auto;
padding-bottom: 200px;
@ -84,7 +80,7 @@
}
.cp-sidebarlayout-description {
display: block;
color: @description-color;
color: @cp_sidebar-hint;
margin-bottom: 5px;
p {
margin-bottom: 0;
@ -111,7 +107,7 @@
input {
flex: 1;
//border-radius: 0.25em 0 0 0.25em;
border: 1px solid #adadad;
border: 1px solid @cryptpad_color_neutral_grey;
border-right: 0px;
}
button {

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

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

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

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

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

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

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

@ -59,8 +59,8 @@
.tools_unselectable();
&.cp-selected {
background-color: @colortheme_alertify-primary;
color: @colortheme_alertify-primary-text;
background-color: @cp_usergrid-selected-bg;
color: @cp_usergrid-selected-fg;
order: -1 !important;
.cp-usergrid-avatar {
media-tag, .cp-avatar-default {
@ -98,12 +98,12 @@
margin-left: 5px;
text-align: left;
line-height: 150%;
color: @cryptpad_text_col;
color: @cp_usergrid-fg;
}
}
&.cp-selected {
.cp-usergrid-user-name {
color: @colortheme_alertify-primary-text;
color: @cp_usergrid-selected-fg;
}
}
.fa-times {
@ -111,9 +111,9 @@
cursor: pointer;
height: 100%;
line-height: 25px;
color: @cryptpad_text_col;
color: @cp_usergrid-fg;
&: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_DARK = '/customize/src/less2/include/colortheme-dark.less';
//COLORTHEME_DARK = '/customize/src/less2/include/colortheme.less'; // XXX
var getColortheme = function () {
return window.CryptPad_theme;
};

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

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

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

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

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

@ -4023,16 +4023,6 @@ define([
$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'})
.appendTo($tree);
if (displayedCategories.indexOf(SEARCH) !== -1) { createCategory($div, SEARCH); }

Write Preview
Loading…
Cancel
Save