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

Drive and context menus

Browse Source
pull/1/head
David Benqué 4 years ago
parent d7de393aca
commit f99e7451e9
7 changed files with 83 additions and 58 deletions
Show Stats Download Patch File Download Diff File

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

@ -26,35 +26,48 @@
// Colors // Colors
@cryptpad_color_brand: #0087FF; @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_text_col: #FFF-#3F4141; @cryptpad_color_brand_fadest: fade(@cryptpad_color_brand, 25%);
@cryptpad_color_hint_grey: #FFF-#777; @cryptpad_color_hint_grey: #777;
@cryptpad_color_dark_grey: #FFF-#999999; @cryptpad_color_dark_grey: #999999;
@cryptpad_color_neutral_grey: #FFF-#aaaaaa; @cryptpad_color_neutral_grey: #aaaaaa;
@cryptpad_color_neutral2_grey: #FFF-#cccccc; @cryptpad_color_neutral2_grey: #cccccc;
@cryptpad_color_help_grey: #FFF-#dddddd; @cryptpad_color_help_grey: #dddddd;
@cryptpad_color_grey: #FFF-#e0e0e0; @cryptpad_color_grey: #e0e0e0;
@cryptpad_color_toolbar_grey: #FFF-#EEEEEE; @cryptpad_color_toolbar_grey: #EEEEEE;
@cryptpad_color_light_grey: #FFF-#f1f1f1; @cryptpad_color_light_grey: #f1f1f1;
@cryptpad_color_lighter_grey: #FFF-#f9f9f9; @cryptpad_color_lighter_grey: #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_blue: #326599; // former logo-1
@cryptpad_color_light_blue: #FFF-#00b7d8; @cryptpad_color_light_blue: #00b7d8;
@cryptpad_color_warn_red: #FFF-#eb675e; @cryptpad_color_warn_red: fade(#ff1100, 50%);
@cryptpad_color_red: #f00; @cryptpad_color_red: #ff1100;
@cryptpad_color_dark_red: #9e0000; @cryptpad_color_dark_red: #9e0000;
@cryptpad_color_orange: #f49842; @cryptpad_color_orange: #f49842;
@cryptpad_color_black: #FFF-#000;
@cryptpad_color_white: #FFF-#FFF;
@cryptpad_color_green: #5cb85c; @cryptpad_color_green: #5cb85c;
@cryptpad_color_light_red: darken(#FFD4D4, 75%); @cryptpad_color_light_red: darken(#FFD4D4, 75%);
@cryptpad_color_light_green: darken(#c5ffa8, 75%); @cryptpad_color_light_green: darken(#c5ffa8, 75%);
@cryptpad_color_light_yellow: darken(#FFE69C, 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 // Premium plans colors
@cryptpad_color_basic: #DDEFFF; @cryptpad_color_basic: #DDEFFF;
@ -65,7 +78,7 @@
@scrollbar_color: @cp_scrollbar-fg transparent; @scrollbar_color: @cp_scrollbar-fg transparent;
// Loading screen // Loading screen
@cp_loading-bg: #FFF-#E7E7E7; @cp_loading-bg: @cryptpad_color_grey_900;
@cp_loading-fg: @cryptpad_text_col; @cp_loading-fg: @cryptpad_text_col;
@cp_loading-msg-bg: @cryptpad_color_white; @cp_loading-msg-bg: @cryptpad_color_white;
@cp_loading-error-bg: @cryptpad_color_dark_red; @cp_loading-error-bg: @cryptpad_color_dark_red;
@ -118,9 +131,9 @@
@cp_buttons-cancel-border: #949494; @cp_buttons-cancel-border: #949494;
// Sidebar layout // 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-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-right-fg: @cryptpad_text_col; // XXX was black
@cp_sidebar-left-active: @cp_sidebar-right-bg; @cp_sidebar-left-active: @cp_sidebar-right-bg;
@cp_sidebar-hint: @cryptpad_color_hint_grey; @cp_sidebar-hint: @cryptpad_color_hint_grey;
@ -128,33 +141,41 @@
// Drive // Drive
@cp_drive-bg: @cp_sidebar-right-bg; @cp_drive-bg: @cp_sidebar-right-bg;
@cp_drive-fg: @cp_sidebar-right-fg; @cp_drive-fg: @cp_sidebar-right-fg;
@cp_drive-header-fg: @cryptpad_color_dark_grey; @cp_drive-header-fg: fade(@cryptpad_text_col, 70%);
@cp_drive-icon-hover: @cryptpad_color_grey; @cp_drive-icon-hover: fade(@cryptpad_text_col, 5%);
@cp_drive-icon-border: @cryptpad_color_neutral2_grey; @cp_drive-icon-border: fade(@cryptpad_text_col, 20%);
@cp_drive-thumb-bg: @cryptpad_color_hint_grey; @cp_drive-thumb-bg: transparent;
@cp_drive-selected-bg: @cryptpad_color_dark_grey; @cp_drive-selected-bg: fade(@cryptpad_text_col, 10%);
@cp_drive-selected-fg: contrast(@cp_drive-droppable-bg, @cryptpad_text_col, @cryptpad_color_light_grey); @cp_drive-selected-fg: @cryptpad_text_col;
@cp_drive-selection-overlay: fade(@cryptpad_color_black, 70%); @cp_drive-selection-overlay: fade(@cryptpad_text_col, 5%);
@cp_drive-selection-bg: @cryptpad_color_neutral_grey; @cp_drive-selection-bg: @cryptpad_color_grey_800;
@cp_drive-selection-fg: @cryptpad_text_col; @cp_drive-selection-fg: @cryptpad_text_col;
@cp_drive-droppable-bg: @cryptpad_color_brand; @cp_drive-droppable-bg: @cryptpad_color_grey_700;
@cp_drive-droppable-fg: contrast(@cp_drive-droppable-bg, @cryptpad_text_col, @cryptpad_color_light_grey); @cp_drive-droppable-fg: @cryptpad_text_col;
@cp_drive-infobox-bg: @cryptpad_color_lighter_blue; @cp_drive-infobox-bg: @cryptpad_color_brand_fadest;
@cp_drive-infobox-fg: @cryptpad_color_black; @cp_drive-infobox-fg: @cryptpad_text_col;
@cp_drive-warnbox-bg: @cryptpad_color_warn_red; @cp_drive-warnbox-bg: @cryptpad_color_warn_red;
@cp_drive-warnbox-fg: @cryptpad_color_white; @cp_drive-warnbox-fg: @cryptpad_text_col;
@cp_drive-tree-branch: @cryptpad_color_dark_grey; @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 // Tooltip background
@cp_tooltip-bg: @cryptpad_color_grey; @cp_tooltip-bg: @cryptpad_color_grey_700;
@cp_tooltip-fg: @cryptpad_text_col; @cp_tooltip-fg: @cryptpad_text_col;
// Dropdown // Dropdown
@cp_dropdown-fg: @cryptpad_text_col; @cp_dropdown-fg: @cryptpad_text_col;
@cp_dropdown-bg: @cryptpad_color_lighter_grey; @cp_dropdown-bg: @cryptpad_color_grey_800;
@cp_dropdown-bg-hover: @cryptpad_color_light_grey; @cp_dropdown-bg-hover: @cryptpad_color_grey_700;
@cp_dropdown-bg-active: @cryptpad_color_grey; @cp_dropdown-bg-active: @cryptpad_color_grey_600;
// Rendered Markdown // Rendered Markdown
@cp_markdown-bg: @cryptpad_color_lighter_grey; @cp_markdown-bg: @cryptpad_color_lighter_grey;
@ -169,14 +190,6 @@
@cp_comments-bg: @cryptpad_color_white; @cp_comments-bg: @cryptpad_color_white;
@cp_comments-header: @cryptpad_color_dark_grey; @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 // Corner
@cp_corner-primary: @cryptpad_color_blue; @cp_corner-primary: @cryptpad_color_blue;
@cp_corner-secondary: @cryptpad_color_black; // XXX @cp_corner-secondary: @cryptpad_color_black; // XXX
@ -217,6 +230,10 @@
// Limit // Limit
@cp_limit-fg: @cryptpad_text_col; @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 // Mentions
@cp_mentions-bg: @cryptpad_color_grey; @cp_mentions-bg: @cryptpad_color_grey;
@ -233,7 +250,7 @@
@cp_support-header-bg: @cryptpad_color_help_grey; @cp_support-header-bg: @cryptpad_color_help_grey;
// Toolbar // Toolbar
@cp_toolbar-bg: @cryptpad_color_toolbar_grey; @cp_toolbar-bg: @cryptpad_color_grey_900;
@cp_toolbar-fg: @cryptpad_text_col; @cp_toolbar-fg: @cryptpad_text_col;
@cp_toolbar-bottom-fg: @cryptpad_text_col; @cp_toolbar-bottom-fg: @cryptpad_text_col;

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

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

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

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

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

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save