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

Drive and context menus

pull/1/head
David Benqué 2021-02-02 19:46:23 +00:00
parent d7de393aca
commit f99e7451e9
7 changed files with 81 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
customize.dist/src/less2/include/colortheme-dark.less
View File

@ -26,35 +26,48 @@
// Colors
@cryptpad_color_brand: #0087FF;
@cryptpad_color_brand_soft: lighten(@cryptpad_color_brand, 40%);
@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_text_col: #FFF-#3F4141;
@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_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_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_900: #212121;
@cryptpad_color_black: #000;
@cryptpad_text_col: @cryptpad_color_grey_200;
@cryptpad_color_blue: #326599; // former logo-1
@cryptpad_color_light_blue: #FFF-#00b7d8;
@cryptpad_color_warn_red: #FFF-#eb675e;
@cryptpad_color_red: #f00;
@cryptpad_color_light_blue: #00b7d8;
@cryptpad_color_warn_red: fade(#ff1100, 50%);
@cryptpad_color_red: #ff1100;
@cryptpad_color_dark_red: #9e0000;
@cryptpad_color_orange: #f49842;
@cryptpad_color_black: #FFF-#000;
@cryptpad_color_white: #FFF-#FFF;
@cryptpad_color_green: #5cb85c;
@cryptpad_color_light_red: darken(#FFD4D4, 75%);
@cryptpad_color_light_green: darken(#c5ffa8, 75%);
@cryptpad_color_light_yellow: darken(#FFE69C, 75%);
@cryptpad_color_lighter_blue: darken(#d2e1f2, 75%);
@cryptpad_color_lighter_blue: #d2e1f2; // XXX replace with @cryptpad_color_brand_fadest
@cryptpad_color_link: #FFF-#0275D8;
@cryptpad_color_link: #0275D8;
// Premium plans colors
@cryptpad_color_basic: #DDEFFF;
@ -65,7 +78,7 @@
@scrollbar_color: @cp_scrollbar-fg transparent;
// Loading screen
@cp_loading-bg: #FFF-#E7E7E7;
@cp_loading-bg: @cryptpad_color_grey_900;
@cp_loading-fg: @cryptpad_text_col;
@cp_loading-msg-bg: @cryptpad_color_white;
@cp_loading-error-bg: @cryptpad_color_dark_red;
@ -118,9 +131,9 @@
@cp_buttons-cancel-border: #949494;
// Sidebar layout
@cp_sidebar-left-bg: @cryptpad_color_help_grey;
@cp_sidebar-left-bg: @cryptpad_color_grey_800;
@cp_sidebar-left-fg: @cryptpad_text_col;
@cp_sidebar-right-bg: @cryptpad_color_light_grey;
@cp_sidebar-right-bg: @cryptpad_color_grey_900;
@cp_sidebar-right-fg: @cryptpad_text_col; // XXX was black
@cp_sidebar-left-active: @cp_sidebar-right-bg;
@cp_sidebar-hint: @cryptpad_color_hint_grey;
@ -128,33 +141,41 @@
// Drive
@cp_drive-bg: @cp_sidebar-right-bg;
@cp_drive-fg: @cp_sidebar-right-fg;
@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-thumb-bg: @cryptpad_color_hint_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-header-fg: fade(@cryptpad_text_col, 70%);
@cp_drive-icon-hover: fade(@cryptpad_text_col, 5%);
@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_800;
@cp_drive-selection-fg: @cryptpad_text_col;
@cp_drive-droppable-bg: @cryptpad_color_brand;
@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-droppable-bg: @cryptpad_color_grey_700;
@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_color_white;
@cp_drive-tree-branch: @cryptpad_color_dark_grey;
@cp_drive-warnbox-fg: @cryptpad_text_col;
@cp_drive-tree-branch: @cryptpad_text_col;
// Contextmenu
@cp_context-bg: @cryptpad_color_grey_800;
@cp_context-border: @cryptpad_color_grey_600;
@cp_context-bg-hover: @cryptpad_color_grey_700;
@cp_context-bg-active: @cryptpad_color_grey_600;
@cp_context-fg: @cryptpad_text_col;
@cp_context-icon: @cryptpad_text_col;
@cp_context-disabled: @cryptpad_color_grey_600;
// Tooltip background
@cp_tooltip-bg: @cryptpad_color_grey;
@cp_tooltip-bg: @cryptpad_color_grey_700;
@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;
@cp_dropdown-bg: @cryptpad_color_grey_800;
@cp_dropdown-bg-hover: @cryptpad_color_grey_700;
@cp_dropdown-bg-active: @cryptpad_color_grey_600;
// Rendered Markdown
@cp_markdown-bg: @cryptpad_color_lighter_grey;
@ -169,14 +190,6 @@
@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: @cryptpad_color_blue;
@cp_corner-secondary: @cryptpad_color_black; // XXX
@ -217,6 +230,10 @@
// Limit
@cp_limit-fg: @cryptpad_text_col;
@cp-limit-bar-bg: @cryptpad_color_grey_600;
@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;
@ -233,7 +250,7 @@
@cp_support-header-bg: @cryptpad_color_help_grey;
// Toolbar
@cp_toolbar-bg: @cryptpad_color_toolbar_grey;
@cp_toolbar-bg: @cryptpad_color_grey_900;
@cp_toolbar-fg: @cryptpad_text_col;
@cp_toolbar-bottom-fg: @cryptpad_text_col;

8
customize.dist/src/less2/include/contextmenu.less
View File

@ -9,7 +9,12 @@
position: absolute;
z-index: 50000;
& > ul {
border: 1px solid @cp_context-border;
background-color: @cp_context-bg;
border-radius: 0px;
.dropdown-divider {
border-top: 1px solid @cp_context-border;
}
}
li {
padding: 0;
@ -37,6 +42,7 @@
a {
cursor: pointer;
color: @cp_context-fg;
padding-left: 10px;
&:hover {
background-color: @cp_context-bg-hover;
color: @cp_context-fg;
@ -46,7 +52,7 @@
color: @cp_context-fg;
}
.fa, .cptools {
margin-right: 1rem;
margin-right: 10px;
color: @cp_context-icon;
width: 16px;
}

2
customize.dist/src/less2/include/drive.less
View File

@ -354,7 +354,6 @@
height: 11px !important;
padding: 0;
margin: 0;
background: @cryptpad_color_white;
z-index: 10;
cursor: default;
&:before {
@ -459,6 +458,7 @@
padding: 0.25em 0.75em;
margin: 1em;
background: @cp_drive-infobox-bg;
color: @cp_drive-infobox-fg;
cursor: default;
span {
cursor: pointer;

9
customize.dist/src/less2/include/limit-bar.less
View File

@ -18,7 +18,7 @@
margin: 5px;
box-sizing: border-box;
border-radius: 3px;
background: white;
background: @cp-limit-bar-bg;
position: relative;
text-align: center;
width: ~"calc(100% - 10px)";
@ -34,13 +34,13 @@
z-index: 1; // .usage
// XXX Check if we can keep the same colors in dark themes
&.cp-limit-usage-normal {
background: @colortheme_green;
background: @cp-limit-bar-normal;
}
&.cp-limit-usage-warning {
background: orange;
background: @cp-limit-bar-warning;
}
&.cp-limit-usage-above {
background: red;
background: @cp-limit-bar-above;
}
}
}
@ -67,6 +67,7 @@
padding-bottom: 0;
justify-content: center;
flex: 1;
border-radius: 0px;
}
}
}

1
customize.dist/src/less2/include/toolbar.less
View File

@ -845,6 +845,7 @@
.cp-dropdown-content {
margin: 0;
padding-bottom: 10px;
}
& > button {
display: flex;

2
customize.dist/src/less2/pages/page-contact.less
View File

@ -23,7 +23,7 @@
border: 0;
&:hover, &:focus {
text-decoration: none;
background-color: @cryptpad_color_brand_soft;
background-color: @cryptpad_color_brand_fadest;
}
@media (max-width: 1200px) and (min-width: 769px) {
min-height: 139px;

2
www/common/drive-ui.js
View File

@ -124,7 +124,7 @@ define([
var $gridIcon = $('<button>', {"class": "fa fa-th-large"});
var $sortAscIcon = $('<span>', {"class": "fa fa-angle-up sortasc"});
var $sortDescIcon = $('<span>', {"class": "fa fa-angle-down sortdesc"});
var $closeIcon = $('<span>', {"class": "fa fa-window-close"});
var $closeIcon = $('<span>', {"class": "fa fa-times"});
//var $backupIcon = $('<span>', {"class": "fa fa-life-ring"});
var $searchIcon = $('<span>', {"class": "fa fa-search cp-app-drive-tree-search-icon"});
var $addIcon = $('<span>', {"class": "fa fa-plus"});