diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index fd52420b0..8410cc7ca 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/customize.dist/src/less2/include/alertify.less @@ -10,20 +10,8 @@ }; & { @max-z-index: 2147483647; - @alertify-fore: @colortheme_modal-fg; - @alertify-base: @colortheme_modal-bg; - @alertify-dialog-bg: @alertify-base; - @alertify-dialog-fg: @alertify-fore; - - @alertify-btn-fg: @alertify-fore; - - @alertify-light-bg: fade(@alertify-fore, 25%); - @alertify-bg: @colortheme_modal-dim; - @alertify-fg: @alertify-fore; - - @alertify-input-bg: @colortheme_modal-input; - @alertify-input-fg: @colortheme_modal-input-fg; + @alertify-light-bg: fade(@cp_alertify-fg, 25%); @alertify_padding-base: @variables_padding; @alertify_box-shadow: @variables_shadow; @@ -39,7 +27,7 @@ } > * { padding: @alertify_padding-base @alertify_padding-base * 4; - color: @colortheme_notification-color; + color: @cp_alertify-log-fg; font-family: @colortheme_font; font-size: large; @@ -47,22 +35,22 @@ box-shadow: @alertify_box-shadow; &, &.default { // FIXME - background: @colortheme_notification-log; + background: @cp_alertify-log-bg; } &.error { font-weight: bold; - background: @colortheme_notification-warn; + background: @cp_alertify-warn-bg; } &.success { - background: @colortheme_notification-log; + background: @cp_alertify-log-bg; } } } .alertify { position: fixed; - background-color: @alertify-bg; - color: @alertify-fg; + background-color: @cp_alertify-overlay; + color: @cp_alertify-fg; left: 0; right: 0; top: 0; @@ -86,7 +74,7 @@ .message { h1, h2, h3, h4, h5, h6 { - color: @alertify-fg; + color: @cp_alertify-fg; } } @@ -118,17 +106,17 @@ } color: @colortheme_light-base; - background-color: @alertify-dialog-bg; + background-color: @cp_alertify-bg; input[id$="tokenfield"][type="text"].token-input { - background-color: @alertify-dialog-bg !important; + background-color: @cp_alertify-bg !important; } }*/ } .dialog { & > div { - background-color: @alertify-dialog-bg; + background-color: @cp_alertify-bg; &.half { width: 50%; max-width: 50%; @@ -154,7 +142,7 @@ max-width: 500px; margin: 0 auto; text-align: left; - background: #fff; + background: @cp_alertify-bg; box-shadow: @alertify_box-shadow; &.wide { max-width: 850px; @@ -198,7 +186,7 @@ .alertify-tabs-titles { height: 40px; display: flex; - border-bottom: 1px solid @alertify-fore; + border-bottom: 1px solid @cp_alertify-fg; margin-bottom: 10px; box-sizing: content-box; .alertify-tabs-title { @@ -208,11 +196,9 @@ line-height: 40px; box-sizing: border-box; padding: 0 15px; - border-left: 1px solid lighten(@alertify-base, 10%); - border-right: 1px solid lighten(@alertify-base, 10%); cursor: pointer; &:not(.disabled):hover { - background-color: @alertify-light-bg; + background-color: @cp_alertify-hover; } &.disabled { color: @colortheme_alertify-cancel-border; @@ -227,10 +213,8 @@ } } span.alertify-tabs-active { - background-color: @alertify-fore !important; - border-left: 1px solid @alertify-fore; - border-right: 1px solid @alertify-fore; - color: @alertify-base; + background-color: @cp_alertify-fg !important; + color: @cp_alertify-bg; cursor: default; } } @@ -251,7 +235,9 @@ } } - .tools_placeholder-color(@cryptpad_color_grey); + input { + .tools_placeholder-color(); + } span.cp-password-container { display: flex; @@ -267,7 +253,7 @@ } .fa-question-circle { // help links to Docs - color: @colortheme_logo-2; + color: @cp_alertify-fg; &:hover { text-decoration: none; } @@ -498,11 +484,11 @@ margin-top: @alertify_padding-base; } &.alert-primary { - background-color: @alertify-base; - color: @alertify-fg; - border-color: @alertify-fg; + background-color: @cp_alertify-bg; + color: @cp_alertify-fg; + border-color: @cp_alertify-fg; a { - color: @alertify-fg; + color: @cp_alertify-fg; text-decoration: underline; } } diff --git a/customize.dist/src/less2/include/avatar.less b/customize.dist/src/less2/include/avatar.less index c85c34877..725c7748f 100644 --- a/customize.dist/src/less2/include/avatar.less +++ b/customize.dist/src/less2/include/avatar.less @@ -5,8 +5,6 @@ ) { @avatar-width: @width; @avatar-font-size: @width / 1.2; - @avatar-default-bg: #D9D8D8; - @avatar-default-fg: darken(@avatar-default-bg, 40%); } .avatar_main(@width: 30px) { --LessLoader_require: LessLoader_currentFile(); @@ -38,8 +36,8 @@ } .cp-avatar-default { .tools_unselectable(); - background: @avatar-default-bg; - color: @avatar-default-fg; + background: @cp_avatar-bg; + color: @cp_avatar-fg; font-size: @avatar-font-size; font-size: var(--avatar-font-size); text-transform: capitalize; diff --git a/customize.dist/src/less2/include/checkmark.less b/customize.dist/src/less2/include/checkmark.less index da5a07a26..15cbc5cea 100644 --- a/customize.dist/src/less2/include/checkmark.less +++ b/customize.dist/src/less2/include/checkmark.less @@ -22,6 +22,15 @@ --checkmark-radio-size: @checkmark-radio-size; } & { + // 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-disabled: @cp_forms-disabled; + .checkmark_vars(); // Text .cp-checkmark { @@ -41,40 +50,40 @@ &.cp-checkmark-secondary { .cp-checkmark-mark { &:after { - border-color: @colortheme_checkmark-col2; + border-color: @cp_checkmark-col2; } } input { &:checked ~ .cp-checkmark-mark { - background-color: @colortheme_checkmark-back2; - border-color: @colortheme_checkmark-back2; + background-color: @cp_checkmark-back2; + border-color: @cp_checkmark-back2; } &:disabled ~ .cp-checkmark-mark { - background-color: @colortheme_checkmark-disabled; + background-color: @cp_checkmark-disabled; } &:disabled ~ .cp-checkmark-label { - color: @colortheme_checkmark-disabled; + color: @cp_checkmark-disabled; } } } &:hover .cp-checkmark-mark { - background-color: @colortheme_checkmark-back0-active; + background-color: @cp_checkmark-back0-active; } input { display: none; &:checked ~ .cp-checkmark-mark { - background-color: @colortheme_checkmark-back1; - border-color: @colortheme_checkmark-back1; + background-color: @cp_checkmark-back1; + border-color: @cp_checkmark-back1; &:after { display: block; } } &:disabled ~ .cp-checkmark-mark { - background-color: @colortheme_checkmark-disabled; + background-color: @cp_checkmark-disabled; } &:disabled ~ .cp-checkmark-label { - color: @colortheme_checkmark-disabled; + color: @cp_checkmark-disabled; } } @@ -91,7 +100,7 @@ height: var(--checkmark-size); width: @checkmark-size; width: var(--checkmark-size); - background-color: @colortheme_checkmark-back0; + background-color: @cp_checkmark-back0; display: flex; justify-content: center; border: 1px solid @colortheme_form-border; @@ -106,14 +115,13 @@ height: @checkmark-dim2; height: var(--checkmark-dim2); transform: rotate(45deg); - border: solid @colortheme_checkmark-col1; + border: solid @cp_checkmark-col1; border-width: 0 @checkmark-width @checkmark-width 0; border-width: 0 var(--checkmark-width) var(--checkmark-width) 0; position: absolute; } &:focus { - //border-color: #FF007C !important; - box-shadow: 0px 0px 5px @colortheme_checkmark-back1; + box-shadow: 0px 0px 5px @cp_checkmark-back1; outline: none; } } @@ -133,39 +141,39 @@ &.cp-radio-secondary { .cp-radio-mark { &:after { - border-color: @colortheme_checkmark-col2; + border-color: @cp_checkmark-col2; } } input { &:checked ~ .cp-radio-mark { - background-color: @colortheme_checkmark-back2; + background-color: @cp_checkmark-back2; } &:disabled ~ .cp-checkmark-mark { - background-color: @colortheme_checkmark-disabled; + background-color: @cp_checkmark-disabled; } &:disabled ~ .cp-checkmark-label { - color: @colortheme_checkmark-disabled; + color: @cp_checkmark-disabled; } } } &:hover .cp-radio-mark { - background-color: @colortheme_checkmark-back0-active; + background-color: @cp_checkmark-back0-active; } input { display: none; &:checked ~ .cp-radio-mark { - background-color: @colortheme_checkmark-back1; - border-color: @colortheme_checkmark-back1; + background-color: @cp_checkmark-back1; + border-color: @cp_checkmark-back1; &:after { display: block; } } &:disabled ~ .cp-checkmark-mark { - background-color: @colortheme_checkmark-disabled; + background-color: @cp_checkmark-disabled; } &:disabled ~ .cp-checkmark-label { - color: @colortheme_checkmark-disabled; + color: @cp_checkmark-disabled; } } @@ -183,7 +191,7 @@ height: var(--checkmark-radio-size); width: @checkmark-radio-size; width: var(--checkmark-radio-size); - background-color: @colortheme_checkmark-back0; + background-color: @cp_checkmark-back0; border-radius: 50%; display: flex; justify-content: center; @@ -194,19 +202,14 @@ display: none; content: ""; border-radius: 50%; - background: white; + background: @cp_checkmark-back0; width: @checkmark-dim1; width: var(--checkmark-dim1); height: @checkmark-dim1; height: var(--checkmark-dim1); - - //transform: rotate(45deg); - //border: solid @colortheme_checkmark-col1; - //border-width: 0 var(--checkmark-width) var(--checkmark-width) 0; } &:focus { - //border-color: #FF007C !important; - box-shadow: 0px 0px 5px @colortheme_checkmark-back1; + box-shadow: 0px 0px 5px @cp_checkmark-back1; outline: none; } } diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 700ee8d91..924891005 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -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; @@ -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; @colortheme_checkmark-back0: @colortheme_form-bg-alt; @colortheme_checkmark-back0-active: @colortheme_form-border; @@ -128,3 +114,69 @@ @colortheme_checkmark-back2: @colortheme_form-bg-alt; @colortheme_checkmark-col2: @colortheme_form-color-alt; @colortheme_checkmark-disabled: #AAA; + +// New variables + +// Colors +@cryptpad_color_dark_grey: #999999; +@cryptpad_color_grey: #e0e0e0; +@cryptpad_color_light_grey: #f1f1f1; +@cryptpad_color_lighter_grey: #f9f9f9; +@cryptpad_color_light_blue: #00b7d8; +@cryptpad_color_black: #000; +@cryptpad_color_white: #FFF; + +// 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-border: @colortheme_logo-2; +@cp_forms-placeholder: @cryptpad_color_dark_grey; +@cp_forms-readonly: fade(@colortheme_logo-2, 25%); +@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_form-bg; +@cp_buttons-primary-text: @colortheme_form-color; +@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-border: #949494; + + +// 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; + +// Other +@cp_shadow-color: rgba(0,0,0,0.4); diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less index b82e3513b..b933fa32f 100644 --- a/customize.dist/src/less2/include/drive.less +++ b/customize.dist/src/less2/include/drive.less @@ -232,7 +232,7 @@ input { background: transparent; color: @colortheme_drive-color; - .tools_placeholder-color(@cryptpad_color_grey); + .tools_placeholder-color(); outline-width: 0px; border-radius: 0; width: 100%; diff --git a/customize.dist/src/less2/include/dropdown.less b/customize.dist/src/less2/include/dropdown.less index 0cabeabbf..febef30d1 100644 --- a/customize.dist/src/less2/include/dropdown.less +++ b/customize.dist/src/less2/include/dropdown.less @@ -46,7 +46,7 @@ .cp-dropdown-content { display: none; position: absolute; - background-color: @colortheme_dropdown-bg; + background-color: @cp_dropdown-bg; min-width: 250px; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); z-index: 1000; //Z dropdown content @@ -64,7 +64,7 @@ } & > a, & > span { - color: @colortheme_dropdown-color; + color: @cp_dropdown-fg; padding: 5px 16px; text-decoration: none; display: flex; @@ -100,13 +100,13 @@ } &:hover { - background-color: @colortheme_dropdown-bg-hover; - color: @colortheme_dropdown-color; + background-color: @cp_dropdown-bg-hover; + color: @cp_dropdown-fg; } &.cp-dropdown-element-active { - background-color: @colortheme_dropdown-bg-active; - color: @colortheme_dropdown-color; + background-color: @cp_dropdown-bg-active; + color: @cp_dropdown-fg; } } &> span { @@ -138,7 +138,7 @@ hr { margin: 5px 0px; height: 1px; - background: #bbb; + background: @cp_dropdown-bg-active; & + hr { display: none; } @@ -150,21 +150,11 @@ margin: 0; white-space: normal; text-align: left; - color: black; + color: @cp_dropdown-fg; font-size: 14px; * { font-size: 14px; } - h2 { - color: black; - font-weight: bold; - text-align: center; - background-color: #EEEEEE; - padding: 5px 0px; - margin: 5px 0px; - font-size: 16px; - white-space: normal; - } } } } diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less index b6d909a73..13583ad85 100644 --- a/customize.dist/src/less2/include/forms.less +++ b/customize.dist/src/less2/include/forms.less @@ -6,24 +6,18 @@ } & { - @alertify-fore: @colortheme_modal-fg; - @alertify-btn-fg: @alertify-fore; - @alertify-light-bg: fade(@alertify-fore, 25%); @alertify_padding-base: @variables_padding; - @alertify-input-bg: @colortheme_modal-input; - @alertify-input-fg: @colortheme_modal-input-fg; input:not(.form-control):not([type="checkbox"]), textarea, div.cp-textarea { // background-color: @alertify-input-fg; - color: @cryptpad_text_col; - border: 1px solid @alertify-input-bg; + color: @cp_forms-fg; + border: 1px solid @cp_forms-border; width: 100%; font-size: 100%; padding: @alertify_padding-base; &[readonly] { - background-color: @alertify-light-bg; - color: @cryptpad_text_col; - border-color: @alertify-input-fg; + background-color: @cp_forms-readonly; + color: @cp_forms-fg; } } @@ -76,9 +70,9 @@ height: 3px; & > div { height: 100%; - background-color: @colortheme_alertify-primary; + background-color: @cp_buttons-primary; &.danger, &.btn-danger, &.danger-alt, &.btn-danger-alt { - background-color: @colortheme_alertify-red; + background-color: @cp_buttons-red; } } } @@ -89,7 +83,7 @@ button.btn { - background-color: @colortheme_alertify-cancel; + background-color: @cp_buttons-cancel; box-sizing: border-box; outline: 0; align-items: center; @@ -111,80 +105,63 @@ vertical-align: middle; } - color: @alertify-btn-fg; - border: 1px solid @alertify-btn-fg; + color: @cp_buttons-fg; + border: 1px solid @cp_buttons-fg; &.no-margin { margin: 0; } &:hover, &:not(:disabled):not(.disabled):active, &:focus { - color: @alertify-btn-fg; - border: 1px solid @alertify-btn-fg; - background-color: lighten(@alertify-fore, 35%); - } - - &.safe, &.danger, &.btn-safe, &.btn-danger { - color: @colortheme_old-base; - white-space: normal; - font-weight: bold; + color: @cp_buttons-fg; + border: 1px solid @cp_buttons-fg; + background-color: lighten(@cp_buttons-fg, 35%); } &.btn-default { - border-color: @cryptpad_text_col; - color: @cryptpad_text_col; + border-color: @cp_buttons-default-border; + color: @cp_buttons-default-color; &:hover, &:not(:disabled):active, &:focus { - border-color: @cryptpad_text_col; - color: @cryptpad_text_col; - background-color: #ccc; + border-color: @cp_buttons-default-border; + color: @cp_buttons-default-color; + background-color: @cp_buttons-default; } } &.danger, &.btn-danger { - background-color: @colortheme_alertify-red; - border-color: @colortheme_alertify-red-border; - color: @colortheme_alertify-red-color; + background-color: @cp_buttons-red; + border-color: @cp_buttons-red-border; + color: @cp_buttons-red-color; &:hover, &:not(:disabled):active, &:focus { - border-color: @colortheme_alertify-red-border; - color: @colortheme_alertify-red-color; - background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%)); + 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%)); } } &.danger-alt, &.btn-danger-alt, &.btn-danger-outline { - border-color: @colortheme_alertify-red; - color: @colortheme_alertify-red; + border-color: @cp_buttons-red; + color: @cp_buttons-red; &:hover, &:not(:disabled):active, &:focus { - border-color: @colortheme_alertify-red; - color: @colortheme_alertify-red-color; - background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%)); - } - } - - &.safe, &.btn-safe { - background-color: @colortheme_alertify-green; - border-color: @colortheme_alertify-green-border; - color: @colortheme_alertify-green-color; - &:hover, &:not(:disabled):active, &:focus { - border-color: @colortheme_alertify-green-border; - color: @colortheme_alertify-green-color; - background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-green, 10%), lighten(@colortheme_alertify-green, 10%)); + border-color: @cp_buttons-red; + color: @cp_buttons-red-color; + background-color: @cp_buttons-red; } } &.primary, &.btn-primary, &.btn-success { - background-color: @colortheme_alertify-primary; - color: @colortheme_alertify-primary-text; - border-color: @colortheme_alertify-primary-border; + background-color: @cp_buttons-primary; + color: @cp_buttons-primary-text; + border-color: @cp_buttons-primary-border; font-weight: bold; &:hover, &:not(:disabled):active, &:focus { - color: @colortheme_alertify-primary-text; - border-color: @colortheme_alertify-primary-border; - background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-primary, 10%), lighten(@colortheme_alertify-primary, 10%)); + 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%)); } } - &.btn-light { + &.btn-light { // XXX DARK border-color: @cryptpad_text_col; color: @cryptpad_text_col; background-color: transparent; @@ -196,12 +173,12 @@ } &.cancel, &.btn-cancel { - border-color: @colortheme_alertify-cancel-border; - color: @colortheme_alertify-cancel-border; + border-color: @cp_buttons-cancel-border; + color: @cp_buttons-cancel-border; &:hover, &:not(:disabled):active, &:focus { - border-color: @colortheme_alertify-cancel-border; - color: @colortheme_alertify-cancel-border; - background-color: fade(@colortheme_alertify-cancel-border, 25%); + border-color: @cp_buttons-cancel-border; + color: @cp_buttons-cancel-border; + background-color: fade(@cp_buttons-cancel-border, 25%); } } &.btn-register { @@ -212,7 +189,7 @@ &:focus { //border: 1px dotted @alertify-base; - box-shadow: 0px 0px 5px @colortheme_alertify-primary !important; + box-shadow: 0px 0px 5px @cp_buttons-primary !important; outline: none; } &::-moz-focus-inner { @@ -221,11 +198,11 @@ &:disabled { cursor: not-allowed !important; - background-color: @colortheme_alertify-disabled; - color: @colortheme_alertify-disabled-text; - border-color: @colortheme_alertify-disabled-border; + background-color: @cp_buttons-disabled; + color: @cp_buttons-disabled-text; + border-color: @cp_buttons-disabled-border; &:hover, &:active { - background-color: @colortheme_alertify-disabled; + background-color: @cp_buttons-disabled; } } } diff --git a/customize.dist/src/less2/include/markdown.less b/customize.dist/src/less2/include/markdown.less index 37fd4fce8..50a2ab45e 100644 --- a/customize.dist/src/less2/include/markdown.less +++ b/customize.dist/src/less2/include/markdown.less @@ -1,16 +1,13 @@ @import (reference) "./tools.less"; .markdown_main() { - @nice-grey: #f3f3f3; - @accent-grey: rgba(0, 0, 0, 0.2); hr { - border-top: 1px solid @accent-grey; + border-top: 1px solid @cp_markdown-border; } blockquote { - background: @nice-grey; - background: rgba(144, 144, 144, 0.2); + background: @cp_markdown-bg; padding: 10px; - border-left: 2px solid @accent-grey; + border-left: 2px solid @cp_markdown-border; padding-right: 0; p { margin: 0; } blockquote { margin: 0; } @@ -21,7 +18,7 @@ // todo ul, ol // TOC div.cp-md-toc { - background: @nice-grey; + background: @cp_markdown-bg; padding: 20px; * { margin: 5px; @@ -57,7 +54,7 @@ } div.plain-text-reader { - background: #f3f3f3; + background: @cp_markdown-bg; padding: 10px; color: black; text-align: left; @@ -111,7 +108,7 @@ width: 100px; height: 100px; display: inline-block; - border: 1px solid #BBB; + border: 1px solid @cp_markdown-border; } } @@ -121,7 +118,7 @@ h1, h2, h3, h4, h5, h6 { font-weight: bold; padding-bottom: 0.3em; - border-bottom: 1px solid #eee; + border-bottom: 1px solid @cp_markdown-border; } li { min-height: 22px; @@ -139,7 +136,7 @@ .mediatag_cryptpad(); pre.markmap { - border: 1px solid #ddd; + border: 1px solid @cp_markdown-border; svg { height: 400px; } @@ -153,11 +150,11 @@ } } -.markdown_preformatted-code (@color: #333) { +.markdown_preformatted-code () { pre > code { display: block; position: relative; - border: 1px solid @color; + border: 1px solid @cp_markdown-border; width: 90%; margin: auto; padding-left: .25vw; @@ -166,16 +163,16 @@ } } -.markdown_gfm-table (@color: black) { +.markdown_gfm-table () { table { border-collapse: collapse; tr { th { - border: 1px solid @color; + border: 1px solid @cryptpad_color_black; padding: 15px; } td { - border: 1px solid @color; + border: 1px solid @cryptpad_color_black; } } } diff --git a/customize.dist/src/less2/include/modal.less b/customize.dist/src/less2/include/modal.less index 3496d8efa..bf2175bfb 100644 --- a/customize.dist/src/less2/include/modal.less +++ b/customize.dist/src/less2/include/modal.less @@ -4,15 +4,15 @@ .modal_base() { font-family: @colortheme_font; - background-color: @colortheme_modal-bg; - color: @colortheme_modal-fg; + background-color: @cp_alertify-bg; + color: @cp_alertify-fg; box-shadow: @variables_shadow; a { - color: @colortheme_modal-link; + color: @colortheme_link-color; &:visited { - color: @colortheme_modal-link-visited; + color: @colortheme_link-color-visited; } } } @@ -33,11 +33,11 @@ bottom: 0; left: 0; right: 0; - background-color: @colortheme_modal-dim; + background-color: @cp_alertify-overlay; .cp-modal { - background-color: @colortheme_modal-bg; - color: @colortheme_modal-fg; + background-color: @cp_alertify-bg; + color: @cp_alertify-fg; box-shadow: @variables_shadow; padding: @variables_padding; @@ -71,16 +71,10 @@ } input { - background-color: @colortheme_modal-input; - color: @colortheme_modal-input-fg; - border: 0; padding: 8px 12px; margin: 1em; width: 300px; &[type="text"] { - background-color: @colortheme_modal-input-fg; - color: @cryptpad_text_col; - border: 1px solid @colortheme_modal-input; width: auto; } } diff --git a/customize.dist/src/less2/include/tippy.less b/customize.dist/src/less2/include/tippy.less index cabde79b9..5cb7c2f59 100644 --- a/customize.dist/src/less2/include/tippy.less +++ b/customize.dist/src/less2/include/tippy.less @@ -5,19 +5,16 @@ } & { .tippy-tooltip.cryptpad-theme { - /* Your styling here. Example: */ - background-color: @cryptpad_color_light_grey; + background-color: @cp_tooltip-bg; border-radius: 0px; - // box-shadow: 2px 2px 10px #000; - // font-weight: bold; - color: #333; + color: @cp_tooltip-fg; overflow-wrap: break-word; [x-circle] { background-color: unset; } } .tippy-popper { - @arrow-color: @cryptpad_color_light_grey; + @arrow-color: @cp_tooltip-bg; &[x-placement^='top'] .tippy-arrow { border-top-color: @arrow-color; } diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index 70abfea03..b267b9dad 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -570,9 +570,6 @@ .cp-toolbar-limit { color: @colortheme_toolbar-warn; } - .cp-dropdown-content.cp-dropdown-left a { - color: black; - } } .cp-toolbar-top { @@ -1076,7 +1073,7 @@ top: @toolbar_line-height; margin: -1px; min-width: 50px; - background: @colortheme_dropdown-bg; + background: @cp_dropdown-bg; display: flex; flex-flow: column; z-index: 10000; //Z cp-toolbar-drawer-content @@ -1111,8 +1108,8 @@ vertical-align: baseline; } &:hover { - background-color: @colortheme_dropdown-bg-hover !important; - color: @colortheme_dropdown-color; + background-color: @cp_dropdown-bg-hover !important; + color: @cp_dropdown-fg; } } } diff --git a/customize.dist/src/less2/include/tools.less b/customize.dist/src/less2/include/tools.less index 68feb9314..87650ccdd 100644 --- a/customize.dist/src/less2/include/tools.less +++ b/customize.dist/src/less2/include/tools.less @@ -1,6 +1,9 @@ -.tools_placeholder-color (@color) { +@import (reference) "./colortheme-all.less"; + +.tools_placeholder-color () { + @color: @cp_forms-placeholder; &::-webkit-input-placeholder { /* WebKit, Blink, Edge */ - color: @color;; + color: @color; } &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: @color; diff --git a/customize.dist/src/less2/include/usergrid.less b/customize.dist/src/less2/include/usergrid.less index 9fbcb1da0..ea755b1dd 100644 --- a/customize.dist/src/less2/include/usergrid.less +++ b/customize.dist/src/less2/include/usergrid.less @@ -33,10 +33,7 @@ margin: 0; margin-bottom: 0 !important; height: 38px; - &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ - color: @cryptpad_color_grey; - opacity: 1; /* Firefox */ - } + .tools_placeholder-color(); } margin-bottom: 10px; &:empty { diff --git a/customize.dist/src/less2/include/variables.less b/customize.dist/src/less2/include/variables.less index 570779f05..077e32d52 100644 --- a/customize.dist/src/less2/include/variables.less +++ b/customize.dist/src/less2/include/variables.less @@ -1,3 +1,5 @@ +@import (reference) "./colortheme-all.less"; + // This is a file for generic constants which we didn't want to hardcode everywhere. // However, unlike colortheme, customizing these variables will cause breakage. @@ -7,4 +9,4 @@ // Used in modal.less and alertify.less @variables_padding: 12px; -@variables_shadow: 0 8px 32px 0 rgba(0,0,0,.4); +@variables_shadow: 0 8px 32px 0 @cp_shadow-color; diff --git a/www/code/app-code.less b/www/code/app-code.less index 7ba5142a7..fbeac6f23 100644 --- a/www/code/app-code.less +++ b/www/code/app-code.less @@ -102,7 +102,7 @@ margin: 1em auto; .markdown_preformatted-code; - .markdown_gfm-table(black); + .markdown_gfm-table(); table { margin-bottom: 1rem; } @@ -135,7 +135,7 @@ position: relative; display: none; .markdown_preformatted-code; - .markdown_gfm-table(black); + .markdown_gfm-table(); } } diff --git a/www/common/markdown.less b/www/common/markdown.less deleted file mode 100644 index 4759ea5cb..000000000 --- a/www/common/markdown.less +++ /dev/null @@ -1,27 +0,0 @@ -.markdown_preformatted-code (@color: #333) { - pre > code { - display: block; - position: relative; - border: 1px solid @color; - width: 90%; - margin: auto; - padding-left: .25vw; - overflow-x: auto; - overflow-y: hidden; - } -} - -.markdown_gfm-table (@color: black) { - table { - border-collapse: collapse; - tr { - th { - border: 3px solid @color; - padding: 15px; - } - } - } -} - -// todo ul, ol - diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index 524d414b4..ac91a9e1a 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -183,7 +183,7 @@ .markdown_main(); .markdown_cryptpad(); .markdown_preformatted-code; - .markdown_gfm-table(black); + .markdown_gfm-table(); p { margin-bottom: 5px; } @@ -197,7 +197,7 @@ border: none; padding: 5px; margin: 0; - background-color: @cryptpad_color_light_grey; + background-color: @cryptpad_color_grey; width: 100%; } table { diff --git a/www/settings/inner.js b/www/settings/inner.js index f94287b41..3171519d6 100644 --- a/www/settings/inner.js +++ b/www/settings/inner.js @@ -655,7 +655,6 @@ define([ }, { ok: Messages.register_writtenPassword, cancel: Messages.register_cancel, - cancelClass: 'btn.btn-safe', okClass: 'btn.btn-danger', reverseOrder: true, done: function($dialog) { diff --git a/www/slide/app-slide.less b/www/slide/app-slide.less index 2646df1e4..2719f4ca6 100644 --- a/www/slide/app-slide.less +++ b/www/slide/app-slide.less @@ -369,7 +369,7 @@ .markdown_main(); .markdown_preformatted-code; - .markdown_gfm-table(#ddd); + .markdown_gfm-table(); ul, ol { min-width: 50%;