From b37f390529becb7a1478bac5e4c100db7ffa20f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Fri, 5 Feb 2021 17:23:04 +0000 Subject: [PATCH] Dark bootstrap alerts --- .../src/less2/include/alertify.less | 31 ----------- .../src/less2/include/colortheme-dark.less | 21 ++++++- .../src/less2/include/colortheme.less | 19 ++++++- customize.dist/src/less2/include/forms.less | 55 +++++++++++++++++++ customize.dist/src/less2/include/icons.less | 2 +- .../src/less2/pages/page-index.less | 4 ++ 6 files changed, 97 insertions(+), 35 deletions(-) diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index 7f35ca09d..2f95a637e 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/customize.dist/src/less2/include/alertify.less @@ -471,36 +471,5 @@ overflow-x: auto; } } - // Bootstrap Alerts - .alert { - margin: 0px 0px @alertify_padding-base 0px; - font-size: 12px; - padding: 5px; - border-radius: 0px; - i { - margin-right: 10px; - } - &.cp-alert-top { - margin-top: @alertify_padding-base; - } - &.alert-primary { - background-color: @cp_alertify-bg; - color: @cp_alertify-fg; - border-color: @cp_alertify-fg; - a { - color: @cp_alertify-fg; - text-decoration: underline; - } - } - &.dismissable { - display: flex; - align-items: center; - span.fa-times { - font-size: @colortheme_app-font-size; - margin-left: 20px; - cursor: pointer; - } - } - } } diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index ac82bb356..31943db29 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -61,15 +61,18 @@ @cryptpad_color_light_blue: #00b7d8; @cryptpad_color_red: #ff1100; @cryptpad_color_red_fade: fade(@cryptpad_color_red, 50%); +@cryptpad_color_red_fader: fade(@cryptpad_color_red, 25%); @cryptpad_color_warn_red: @cryptpad_color_red_fade; @cryptpad_color_dark_red: #9e0000; @cryptpad_color_light_red: #FFD4D4; +@cryptpad_color_light_red_fade: fade(@cryptpad_color_light_red, 20%); @cryptpad_color_orange: #f49842; @cryptpad_color_green: #5cb85c; @cryptpad_color_green_fade: fade(@cryptpad_color_green, 50%); @cryptpad_color_light_green: #c5ffa8; +@cryptpad_color_light_green_fade: fade(@cryptpad_color_light_green, 20%); @cryptpad_color_light_yellow: #FFE69C; -@cryptpad_color_yellow_fade: fade(#FFE69C, 50%); +@cryptpad_color_yellow_fade: fade(#FFE69C, 15%); @cryptpad_color_lighter_blue: #d2e1f2; // XXX replace with @cryptpad_color_brand_fadest @cryptpad_color_link:@cryptpad_color_brand_300; @@ -118,6 +121,20 @@ @cp_forms-readonly-border: @cryptpad_color_brand; @cp_forms-disabled: @cryptpad_color_grey_500; +// Bootstrap alerts +@cp_alerts-warning-bg: @cryptpad_color_yellow_fade; +@cp_alerts-warning-fg: @cryptpad_color_light_yellow; +@cp_alerts-warning-text: @cryptpad_color_light_yellow; +@cp_alerts-danger-bg: @cryptpad_color_red_fader; +@cp_alerts-danger-fg: @cryptpad_color_light_red; +@cp_alerts-danger-text: @cryptpad_color_light_red; +@cp_alerts-info-bg: @cryptpad_color_brand_fadest; +@cp_alerts-info-text: @cryptpad_color_brand_300; +@cp_alerts-info-fg: @cryptpad_color_brand_300; +@cp_alerts-success-bg: @cryptpad_color_light_green_fade; +@cp_alerts-success-fg: @cryptpad_color_green; +@cp_alerts-success-text: @cryptpad_color_light_green; + // Buttons @cp_buttons-fg: @cryptpad_color_brand_300; @cp_buttons-hover: @cryptpad_color_brand_fadest; @@ -216,7 +233,7 @@ @cp_upload-progress: @cryptpad_color_grey_700; // Help -@cp_help-bg: @cryptpad_color_grey_700; +@cp_help-bg: @cryptpad_color_grey_800; @cp_help-fg: @cryptpad_text_col; @cp_help-link: @cryptpad_color_link; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 55f881bdf..92f0ab85c 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -61,15 +61,18 @@ @cryptpad_color_light_blue: #00b7d8; @cryptpad_color_red: #ff1100; @cryptpad_color_red_fade: fade(@cryptpad_color_red, 50%); +@cryptpad_color_red_fader: fade(@cryptpad_color_red, 25%); @cryptpad_color_warn_red: @cryptpad_color_red_fade; @cryptpad_color_dark_red: #9e0000; @cryptpad_color_light_red: #FFD4D4; +@cryptpad_color_light_red_fade: fade(@cryptpad_color_light_red, 75%); @cryptpad_color_orange: #f49842; @cryptpad_color_green: #5cb85c; @cryptpad_color_green_fade: fade(@cryptpad_color_green, 50%); @cryptpad_color_light_green: #c5ffa8; +@cryptpad_color_light_green_fade: fade(@cryptpad_color_light_green, 20%); @cryptpad_color_light_yellow: #FFE69C; -@cryptpad_color_yellow_fade: fade(#FFE69C, 50%); +@cryptpad_color_yellow_fade: fade(#FFE69C, 50%); // XXX diff from dark @cryptpad_color_lighter_blue: #d2e1f2; @cryptpad_color_link: #0275D8; @@ -118,6 +121,20 @@ @cp_forms-readonly-border: @cryptpad_color_brand; @cp_forms-disabled: @cryptpad_color_grey_500; +// Bootstrap alerts +@cp_alerts-warning-bg: @cryptpad_color_yellow_fade; +@cp_alerts-warning-fg: @cryptpad_color_light_yellow; +@cp_alerts-warning-text: darken(@cp_alerts-warning-fg, 55%); +@cp_alerts-danger-bg: @cryptpad_color_light_red_fade; +@cp_alerts-danger-fg: @cryptpad_color_light_red; +@cp_alerts-danger-text: darken(@cp_alerts-danger-fg, 55%); +@cp_alerts-info-bg: fade(@cryptpad_color_brand, 15%); +@cp_alerts-info-text: @cryptpad_color_brand; +@cp_alerts-info-fg: @cryptpad_color_brand; +@cp_alerts-success-bg: @cryptpad_color_light_green_fade; +@cp_alerts-success-fg: @cryptpad_color_green; +@cp_alerts-success-text: darken(@cryptpad_color_green, 20%); + // Buttons @cp_buttons-fg: @cryptpad_color_brand; @cp_buttons-hover: @cryptpad_color_brand_fadest; diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less index b8abac491..0f5a6193b 100644 --- a/customize.dist/src/less2/include/forms.less +++ b/customize.dist/src/less2/include/forms.less @@ -207,4 +207,59 @@ } } } + // Bootstrap Alerts + .alert { + margin: 0px 0px @alertify_padding-base 0px; + font-size: 12px; + padding: 5px; + border-radius: 0px; + i { + margin-right: 10px; + } + &.cp-alert-top { + margin-top: @alertify_padding-base; + } + a { + color: @cryptpad_text_col; + text-decoration: underline; + } + &.alert-primary { + background-color: fade(@cryptpad_color_brand, 15%); + color: @cp_alertify-fg; + border-color: @cp_alertify-fg; + a { + color: @cp_alertify-fg; + text-decoration: underline; + } + } + &.alert-warning { + background-color: @cp_alerts-warning-bg; + color: @cp_alerts-warning-text; + border-color: @cp_alerts-warning-fg; + } + &.alert-danger { + background-color: @cp_alerts-danger-bg; + color: @cp_alerts-danger-text; + border-color: @cp_alerts-danger-fg; + } + &.alert-info { + background-color: @cp_alerts-info-bg; + color: @cp_alerts-info-text; + border-color: @cp_alerts-info-fg; + } + &.alert-success { + background-color: @cp_alerts-success-bg; + color: @cp_alerts-success-text; + border-color: @cp_alerts-success-fg; + } + &.dismissable { + display: flex; + align-items: center; + span.fa-times { + font-size: @colortheme_app-font-size; + margin-left: 20px; + cursor: pointer; + } + } + } } diff --git a/customize.dist/src/less2/include/icons.less b/customize.dist/src/less2/include/icons.less index 118367b56..9ee12b1fd 100644 --- a/customize.dist/src/less2/include/icons.less +++ b/customize.dist/src/less2/include/icons.less @@ -11,7 +11,7 @@ padding-top: 5px; padding-bottom: 5px; border: 1px solid transparent; - background: @cp_drive-bg; + background: fade(@cryptpad_text_col, 5%); .cp-icons-name { width: 100%; diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less index cada76870..8c5fdc164 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/customize.dist/src/less2/pages/page-index.less @@ -21,6 +21,10 @@ flex-flow: column; justify-content: space-around; justify-content: space-evenly; + .alert-info { + font-size: 16px; + border-radius: 0px; + } } } body {