From a704e090d06a729d4f019503eaf7ec56dacd264d Mon Sep 17 00:00:00 2001
From: Brunelie Lauret <brunelie@yaal.coop>
Date: Mon, 3 Apr 2023 10:10:13 +0200
Subject: [PATCH] dark theme improvement

---
 canaille/static/css/base.css        | 36 +++++++++++++++++++++++++++--
 canaille/templates/macro/table.html |  2 +-
 canaille/templates/mail/admin.html  | 16 ++++++-------
 3 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/canaille/static/css/base.css b/canaille/static/css/base.css
index dd40ece0..e615e7b9 100644
--- a/canaille/static/css/base.css
+++ b/canaille/static/css/base.css
@@ -66,6 +66,14 @@ footer a {
     margin-top:1em;
 }
 
+.pagination {
+    border-radius: .28571429rem;
+    overflow: hidden;
+}
+.disabled.ui.button {
+    color: rgba(0,0,0,1);
+}
+
 
 /* Fix button appearance for semantic-ui on webkit */
 [type=button] {
@@ -92,15 +100,33 @@ i.massive.massive.massive.portrait.icon, i.massive.massive.massive.portrait.icon
     background: rgba(0,0,0,.05) !important;
 }
 
+.ui .menu a, .ui a:hover, .ui a i {
+    text-decoration: none;
+}
+
+.ui a {
+    text-decoration: underline;
+    color: rgba(0,0,0,.70);
+}
 
 @media (prefers-color-scheme: dark) {
+    .logo img {
+        filter: invert(.8) !important;
+    }
     body, .ui.card .bottom, .ui.toggle.checkbox label:hover::before {
         background-color: #222222;
     }
     .ui.segment, .ui.menu, .ui.table {
         background-color: #353535 !important;
     }
-    body, .ui.info.message .header, .ui.input, .ui.toggle.checkbox label, .ui.header, .ui.form .field > label, .ui.list .list > .item > .content, .ui.list > .item > .content, .ui.card, .ui.cards > .card, .ui.card .bottom.button:hover, .ui.card .bottom.button:focus {
+    .ui a:visited, .ui a:visited .icon {
+        color: rgba(255,255,255,.87) !important;
+    }
+    .ui a, .ui a .icon {
+        color: rgba(255,255,255,.87) !important;
+    }
+    
+    body, .ui.menu .active.item, .ui.form:not(.inverted) .field > label:not(.button), .ui.info.message .header, .ui.input, .ui.toggle.checkbox label, .ui.header, .ui.form .field > label, .ui.list .list > .item > .content, .ui.list > .item > .content, .ui.card, .ui.cards > .card, .ui.card .bottom.button:hover, .ui.card .bottom.button:focus {
         color: rgba(255,255,255,.87);
     }
     .ui.card .bottom, .ui.link.menu .item, .ui.menu .dropdown.item, .ui.menu .link.item, .ui.menu a.item, .ui.icon.menu .item, .ui.header .sub.header, .ui.label, table tbody tr td, .ui.card .bottom.button:hover, .ui.card .bottom.button:focus {
@@ -110,6 +136,12 @@ i.massive.massive.massive.portrait.icon, i.massive.massive.massive.portrait.icon
         background: #222222 !important;
         color: rgba(255,255,255,.87) !important;
     }
+    .ui.menu .active.item {
+        background: rgba(0,0,0,.20);
+    }
+    .ui.menu .active.item:hover {
+        background: rgba(0,0,0,.30);
+    }
     table tbody tr td .ui.label:hover {
         color: #353535 !important;
     }
@@ -150,7 +182,7 @@ i.massive.massive.massive.portrait.icon, i.massive.massive.massive.portrait.icon
     .ui.card .meta {
         color: rgba(255,255,255,.7) !important;
     }
-    .ui.attached.header, .ui.attached.segment {
+    .ui.attached.header, .ui.attached.segment, .ui.attached.menu:not(.tabular):not(.text), .ui.attached.segment:not(.basic), .ui.attached.table {
         border: 1px solid #222222;
     }
     .ui.info.message {
diff --git a/canaille/templates/macro/table.html b/canaille/templates/macro/table.html
index 1d38130f..56d3fac5 100644
--- a/canaille/templates/macro/table.html
+++ b/canaille/templates/macro/table.html
@@ -60,7 +60,7 @@
 {% endmacro %}
 
 {% macro pagination(form) %}
-    <div class="ui right floated buttons">
+    <div class="ui right floated buttons pagination">
         <span class="icon disabled ui button" style="border-radius: 0">
             {% trans %}Page{% endtrans %}
         </span>
diff --git a/canaille/templates/mail/admin.html b/canaille/templates/mail/admin.html
index dd9b5c9d..23aefc44 100644
--- a/canaille/templates/mail/admin.html
+++ b/canaille/templates/mail/admin.html
@@ -65,8 +65,8 @@
             <div class="item">
                 <div class="right floated content">
                     <div class="ui buttons">
-                        <a class="ui button" href="{{ url_for("admin.test_txt") }}">TXT</a>
-                        <a class="ui button" href="{{ url_for("admin.test_html") }}">HTML</a>
+                        <a class="ui button primary" href="{{ url_for("admin.test_txt") }}">TXT</a>
+                        <a class="ui button primary" href="{{ url_for("admin.test_html") }}">HTML</a>
                     </div>
                 </div>
                 <div class="middle aligned content">
@@ -77,8 +77,8 @@
             <div class="item">
                 <div class="right floated content">
                     <div class="ui buttons">
-                        <a class="ui button" href="{{ url_for("admin.password_init_txt") }}">TXT</a>
-                        <a class="ui button" href="{{ url_for("admin.password_init_html") }}">HTML</a>
+                        <a class="ui button primary" href="{{ url_for("admin.password_init_txt") }}">TXT</a>
+                        <a class="ui button primary" href="{{ url_for("admin.password_init_html") }}">HTML</a>
                     </div>
                 </div>
                 <div class="middle aligned content">
@@ -89,8 +89,8 @@
             <div class="item">
                 <div class="right floated content">
                     <div class="ui buttons">
-                        <a class="ui button" href="{{ url_for("admin.password_reset_txt") }}">TXT</a>
-                        <a class="ui button" href="{{ url_for("admin.password_reset_html") }}">HTML</a>
+                        <a class="ui button primary" href="{{ url_for("admin.password_reset_txt") }}">TXT</a>
+                        <a class="ui button primary" href="{{ url_for("admin.password_reset_html") }}">HTML</a>
                     </div>
                 </div>
                 <div class="middle aligned content">
@@ -101,8 +101,8 @@
             <div class="item">
                 <div class="right floated content">
                     <div class="ui buttons">
-                        <a class="ui button" href="{{ url_for("admin.invitation_txt", uid=user.uid, email=user.mail[0]) }}">TXT</a>
-                        <a class="ui button" href="{{ url_for("admin.invitation_html", uid=user.uid, email=user.mail[0]) }}">HTML</a>
+                        <a class="ui button primary" href="{{ url_for("admin.invitation_txt", uid=user.uid, email=user.mail[0]) }}">TXT</a>
+                        <a class="ui button primary" href="{{ url_for("admin.invitation_html", uid=user.uid, email=user.mail[0]) }}">HTML</a>
                     </div>
                 </div>
                 <div class="middle aligned content">