Dark bootstrap alerts

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;
-            }
-        }
-    }
 }
 

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;
 

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;

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;
+            }
+        }
+    }
 }

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%;

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 {