From 532c2484183ca673afed1f6e5ef7ac0a9b71702c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <mail@davidbenque.com>
Date: Tue, 16 Mar 2021 17:04:05 +0000
Subject: [PATCH] start flatpickr theme

---
 .../src/less2/include/colortheme-dark.less    |  2 +-
 .../src/less2/include/colortheme.less         |  2 +-
 customize.dist/src/less2/include/forms.less   | 36 +++++++++++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less
index c2312b236..0a275dc19 100644
--- a/customize.dist/src/less2/include/colortheme-dark.less
+++ b/customize.dist/src/less2/include/colortheme-dark.less
@@ -416,5 +416,5 @@
 @cp_whiteboard-fg: @cryptpad_text_col;
 
 // Flatpickr
-@cp_flatpickr-bg: @cp_app-bg;
+@cp_flatpickr-bg: @cryptpad_color_grey_800;
 
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index 0256fc034..72ac264ab 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -416,4 +416,4 @@
 @cp_whiteboard-fg: @cryptpad_text_col;
 
 // Flatpickr
-@cp_flatpickr-bg:  @cp_app-bg;
+@cp_flatpickr-bg:  @cryptpad_color_grey_200;
diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less
index 8aa1b2e6d..f996feeea 100644
--- a/customize.dist/src/less2/include/forms.less
+++ b/customize.dist/src/less2/include/forms.less
@@ -284,6 +284,42 @@
     body {
         .flatpickr-calendar {
             background: @cp_flatpickr-bg;
+            color: @cryptpad_text_col;
+            .flatpickr-months {
+                .flatpickr-month, .flatpickr-months, .flatpickr-next-month,  .flatpickr-prev-month {
+                    color: @cryptpad_text_col;
+                    fill: @cryptpad_text_col;
+                }
+                .flatpickr-current-month {
+                    span.cur-month:hover {
+                        background: fade(@cryptpad_text_col, 25%); // XXX hover on current month?
+                      }
+                    .numInputWrapper span.arrowUp:after {
+                        border-bottom-color: @cryptpad_text_col;
+                    }
+                    .numInputWrapper span.arrowDown:after {
+                        border-top-color: @cryptpad_text_col;
+                    }
+                }
+            }
+            .flatpickr-innerContainer {
+                .flatpickr-weekdays {
+                    span.flatpickr-weekday {
+                        color: @cryptpad_text_col;
+                    }
+                }
+                .flatpickr-days {
+                    .flatpickr-day {
+                        color: @cryptpad_text_col;
+                        &:hover {
+                            background-color: fade(@cryptpad_text_col, 25%);
+                        }
+                    }
+                    .flatpickr-disabled {
+                        color: fade(@cryptpad_text_col, 25%);
+                    }
+                }
+            }
         }
     }
 }