From fbb27336f608a18f7e999e09ad4e68c9f5438230 Mon Sep 17 00:00:00 2001
From: crocodilestick <105450872+crocodilestick@users.noreply.github.com>
Date: Tue, 19 Nov 2024 15:40:15 +0000
Subject: [PATCH] Fixed CSS for both themes on CWA Settings page

---
 .../calibre-web/cps/static/css/caliBlur.css   | 25 +++++++-
 root/app/calibre-web/cps/static/css/style.css | 33 ++++++++--
 .../cps/templates/cwa_settings.html           | 62 +++++++------------
 3 files changed, 76 insertions(+), 44 deletions(-)

diff --git a/root/app/calibre-web/cps/static/css/caliBlur.css b/root/app/calibre-web/cps/static/css/caliBlur.css
index c1fc4aa..d589d2d 100644
--- a/root/app/calibre-web/cps/static/css/caliBlur.css
+++ b/root/app/calibre-web/cps/static/css/caliBlur.css
@@ -8316,7 +8316,7 @@ body h2 {
         color: #e9e9e9;
         max-width: 90rem;
         font-family: 'Open Sans Regular';
-    }    
+    }
     p:after {
         margin: 1px 4px 16px 32px;
         padding: 5px 10px;
@@ -8326,4 +8326,27 @@ body h2 {
         line-height: normal;
         background-color: #373737;
     } 
+}
+
+p.cwa-settings-explanation {
+    color: #e9e9e9;
+    font-style: italic;
+    font-size: inherit;
+    line-height: normal;
+    padding-left: 10px;
+    max-width: 90rem;
+}
+
+p.cwa-settings-disclaimer {
+    font-size: small;
+    font-style: italic;
+    color: #e9e9e9;
+    padding-left: 10px;
+}
+
+select.cwa-settings-select {
+    background-color: rgba(0, 0, 0, 0.3);
+    color: #e9e9e9;
+    text-align: center;
+    border-radius: 6px;
 }
\ No newline at end of file
diff --git a/root/app/calibre-web/cps/static/css/style.css b/root/app/calibre-web/cps/static/css/style.css
index 70eda51..2b3dd18 100644
--- a/root/app/calibre-web/cps/static/css/style.css
+++ b/root/app/calibre-web/cps/static/css/style.css
@@ -436,14 +436,39 @@
   #detailcover:fullscreen { cursor:zoom-out; border: 0; }
   
   .error-list {
-      margin-top: 5px;
-    }
-  
-  
+    margin-top: 5px;
+  }
+
+  :root {
+    --color-secondary: #45b29d;
+  }
+    
   p.cwa-settings-tooltip {
     margin: 1px 4px 16px 32px;
     padding: 5px 10px;
     line-height: normal;
     color: #444444;
     max-width: 100rem;
+  }
+
+  p.cwa-settings-explanation {
+    color: #444444;
+    font-style: italic;
+    font-size: inherit;
+    line-height: normal;
+    padding-left: 10px;
+    max-width: 90rem;
+  }
+  p.cwa-settings-disclaimer {
+    font-size: small;
+    font-style: italic;
+    color: #444444;
+    padding-left: 10px;
+  }
+
+  select.cwa-settings-select {
+    background-color: white;
+    color: #444444;
+    text-align: center;
+    border-radius: 6px;
   }
\ No newline at end of file
diff --git a/root/app/calibre-web/cps/templates/cwa_settings.html b/root/app/calibre-web/cps/templates/cwa_settings.html
index f524ba5..81247b6 100644
--- a/root/app/calibre-web/cps/templates/cwa_settings.html
+++ b/root/app/calibre-web/cps/templates/cwa_settings.html
@@ -11,55 +11,49 @@ <h2>{{title}}</h2>
       <h3>Calibre-Web Automated User Settings</h3><br>
       <form action="{{ url_for('cwa_settings.set_cwa_settings')}}" method="post"> 
         {% if cwa_settings['auto_backup_imports'] %}
-        <input type="checkbox" id="auto_backup_imports" name="auto_backup_imports" value="True" checked data-toggle="tooltip" data-placement="right" title="If deactivated, imported files can only be found in your Calibre Library" >
+        <input type="checkbox" id="auto_backup_imports" name="auto_backup_imports" value="True" checked style="accent-color: var(--color-secondary);" data-toggle="tooltip" data-placement="right" title="If deactivated, imported files can only be found in your Calibre Library" >
         {% else %}
-        <input type="checkbox" id="auto_backup_imports" name="auto_backup_imports" value="True" data-toggle="tooltip" data-placement="right" title="If deactivated, imported files can only be found in your Calibre Library" >
+        <input type="checkbox" id="auto_backup_imports" name="auto_backup_imports" value="True" style="accent-color: var(--color-secondary);" data-toggle="tooltip" data-placement="right" title="If deactivated, imported files can only be found in your Calibre Library" >
         {% endif %}
         <label for="auto_backup_imports" style="padding-left: 10px;">Enable CWA Import Auto-Backup</label><br>
         <p class="cwa-settings-tooltip">When active, a copy of all imported files will be stored in /config/processed_books/imported</p>
 
         {% if cwa_settings['auto_backup_conversions'] %}
-        <input type="checkbox" id="auto_backup_conversions" name="auto_backup_conversions" value="True" checked data-toggle="tooltip" data-placement="right" title="If deactivated, the originals of converted files will not be stored (except in the case of a failed conversion)">
+        <input type="checkbox" id="auto_backup_conversions" name="auto_backup_conversions" value="True" checked style="accent-color: var(--color-secondary);" data-toggle="tooltip" data-placement="right" title="If deactivated, the originals of converted files will not be stored (except in the case of a failed conversion)">
         {% else %}
-        <input type="checkbox" id="auto_backup_conversions" name="auto_backup_conversions" value="True" data-toggle="tooltip" data-placement="right" title="If deactivated, the originals of converted files will not be stored (except in the case of a failed conversion)">
+        <input type="checkbox" id="auto_backup_conversions" name="auto_backup_conversions" value="True" style="accent-color: var(--color-secondary);" data-toggle="tooltip" data-placement="right" title="If deactivated, the originals of converted files will not be stored (except in the case of a failed conversion)">
         {% endif %}
         <label for="auto_backup_conversions" style="padding-left: 10px;">Enable CWA Conversion Auto-Backup</label><br>
         <p class="cwa-settings-tooltip">When active, the originals of ingested files that undergo conversion will be stored in /config/processed_books/converted</p>
 
         {% if cwa_settings['auto_zip_backups'] %}
-        <input type="checkbox" id="auto_zip_backups" name="auto_zip_backups" value="True" checked data-toggle="tooltip" data-placement="right" data-html="true" title="If deactivated, backed up files will be left alone in their respective folders">
+        <input type="checkbox" id="auto_zip_backups" name="auto_zip_backups" value="True" checked style="accent-color: var(--color-secondary);" data-toggle="tooltip" data-placement="right" data-html="true" title="If deactivated, backed up files will be left alone in their respective folders">
         {% else %}
-        <input type="checkbox" id="auto_zip_backups" name="auto_zip_backups" value="True" data-toggle="tooltip" data-placement="right" data-html="true" title="If deactivated, backed up files will be left alone in their respective folders">
+        <input type="checkbox" id="auto_zip_backups" name="auto_zip_backups" value="True" style="accent-color: var(--color-secondary);" data-toggle="tooltip" data-placement="right" data-html="true" title="If deactivated, backed up files will be left alone in their respective folders">
         {% endif %}
         <label for="auto_zip_backups" style="padding-left: 10px;">Enable CWA Auto Zip Backups</label><br>
         <p class="cwa-settings-tooltip">When active, just before midnight each day, the cwa-auto-zipper service will make zip archives of all the backed up converted, imported and failed files from that day. This is to help keep the subdirectories of /config/processed_books organised and to minimise disk space usage</p>
 
         {% if cwa_settings['cwa_update_notifications'] %}
-        <input type="checkbox" id="cwa_update_notifications" name="cwa_update_notifications" value="True" checked data-toggle="tooltip" data-placement="right" title="Does NOT require restart for changes to take effect">
+        <input type="checkbox" id="cwa_update_notifications" name="cwa_update_notifications" value="True" checked style="accent-color: var(--color-secondary);" data-toggle="tooltip" data-placement="right" title="Does NOT require restart for changes to take effect">
         {% else %}
-        <input type="checkbox" id="cwa_update_notifications" name="cwa_update_notifications" value="True" data-toggle="tooltip" data-placement="right" title="Does NOT require restart for changes to take effect">
+        <input type="checkbox" id="cwa_update_notifications" name="cwa_update_notifications" value="True" style="accent-color: var(--color-secondary);" data-toggle="tooltip" data-placement="right" title="Does NOT require restart for changes to take effect">
         {% endif %}
         <label for="cwa_update_notifications" style="padding-left: 10px;">Enable CWA Update Notifications</label><br>
         <p class="cwa-settings-tooltip">When active, you will no longer receive notifications in the Web UI when a new version of CWA is released</p>
 
         {% if cwa_settings['auto_convert'] %}
-        <input type="checkbox" id="auto_convert" name="auto_convert" value="True" checked data-toggle="tooltip" data-placement="right" data-html="true" title="Placeholder">
+        <input type="checkbox" id="auto_convert" name="auto_convert" value="True" checked style="accent-color: var(--color-secondary);" data-toggle="tooltip" data-placement="right" data-html="true" title="Placeholder">
         {% else %}
-        <input type="checkbox" id="auto_convert" name="auto_convert" value="True" data-toggle="tooltip" data-placement="right" data-html="true" title="Placeholder">
+        <input type="checkbox" id="auto_convert" name="auto_convert" value="True" style="accent-color: var(--color-secondary);" data-toggle="tooltip" data-placement="right" data-html="true" title="Placeholder">
         {% endif %}
         <label for="auto_convert" style="padding-left: 10px;">Enable CWA Auto-Convert</label><br>
         <p class="cwa-settings-tooltip">On by default, when active all ingested books will automatically be converted to the target format specified below (epub by default)</p>
 
         <h3>CWA Auto-Convert - Choose Target Format for CWA Functions <i>(epub by default)</i></h3>
-        <p style="color: whitesmoke;
-        font-style: italic;
-        font-size: inherit;
-        line-height: normal;
-        padding-left: 10px;
-        max-width: 90rem;">When the Auto-Convert feature is active, all ingested books will be automatically converted to the format chosen here (except those formats selected in the ignore list below)</p>
+        <p class="cwa-settings-explanation">When the Auto-Convert feature is active, all ingested books will be automatically converted to the format chosen here (except those formats selected in the ignore list below)</p>
         <label for="auto_convert_target_format" style="padding-right: 10px; padding-left: 10px;">Choose a target format:</label>
-        <select name="auto_convert_target_format" id="auto_convert_target_format" style="background-color: rgba(0, 0, 0, 0.3); color: whitesmoke; text-align: center; border-radius: 6px;">
-          <!-- <option value="" disabled selected>Select a new target format</option> -->
+        <select class="cwa-settings-select" name="auto_convert_target_format" id="auto_convert_target_format">
           {% for format in target_formats -%}
             {% if cwa_settings['auto_convert_target_format'] == format %}
               <option value="{{ format }}" selected>{{ format }}</option>
@@ -68,29 +62,24 @@ <h3>CWA Auto-Convert - Choose Target Format for CWA Functions <i>(epub by defaul
             {% endif %}
           {% endfor %}
         </select>
-        <p style="font-size: small; font-style: italic;color: whitesmoke; padding-left: 10px;">* CWA's metadata enforcement is only supported for epub and azw3 as target formats</p>
+        <p class="cwa-settings-disclaimer">* CWA's metadata enforcement is only supported for epub and azw3 as target formats</p>
         
         <h3>CWA Auto-Convert - Ignored Formats</h3>
-        <p style="color: whitesmoke;
-        font-style: italic;
-        font-size: inherit;
-        line-height: normal;
-        padding-left: 10px;
-        max-width: 90rem;">The formats selected here will be ignored by CWA's Auto-Conversion feature when it's active</p>
+        <p class="cwa-settings-explanation">The formats selected here will be ignored by CWA's Auto-Conversion feature when it's active</p>
         <div style="max-width: 90rem; padding-left: 30px;">
           {% for format in ignorable_formats -%}
             <label for="ignore_convert_{{ format }}" style="width: 75px; padding-right: 6px;">
               {% if format in cwa_settings['auto_convert_ignored_formats'] %}
                 {% if format == cwa_settings['auto_convert_target_format'] %}
-                  <input type="checkbox" id="ignore_convert_{{ format }}" name="ignore_convert_{{ format }}" value="{{ format }}" disabled style="vertical-align: middle;">
+                  <input type="checkbox" id="ignore_convert_{{ format }}" name="ignore_convert_{{ format }}" value="{{ format }}" disabled style="vertical-align: middle; accent-color: var(--color-secondary);">
                 {% else %}
-                  <input type="checkbox" id="ignore_convert_{{ format }}" name="ignore_convert_{{ format }}" value="{{ format }}" checked style="vertical-align: middle;">
+                  <input type="checkbox" id="ignore_convert_{{ format }}" name="ignore_convert_{{ format }}" value="{{ format }}" checked style="vertical-align: middle; accent-color: var(--color-secondary);">
                 {% endif %}
               {% else %}
                 {% if format == cwa_settings['auto_convert_target_format'] %}
-                  <input type="checkbox" id="ignore_convert_{{ format }}" name="ignore_convert_{{ format }}" value="{{ format }}" disabled style="vertical-align: middle;">
+                  <input type="checkbox" id="ignore_convert_{{ format }}" name="ignore_convert_{{ format }}" value="{{ format }}" disabled style="vertical-align: middle; accent-color: var(--color-secondary);">
                 {% else %}
-                  <input type="checkbox" id="ignore_convert_{{ format }}" name="ignore_convert_{{ format }}" value="{{ format }}" style="vertical-align: middle;">
+                  <input type="checkbox" id="ignore_convert_{{ format }}" name="ignore_convert_{{ format }}" value="{{ format }}" style="vertical-align: middle; accent-color: var(--color-secondary);">
                 {% endif %}
               {% endif %}
               <span style="padding-left: 4px; vertical-align: middle;">{{ format }}</span>
@@ -99,26 +88,21 @@ <h3>CWA Auto-Convert - Ignored Formats</h3>
         </div>
 
         <h3>CWA Auto-Ingest - Ignored Formats</h3>
-        <p style="color: whitesmoke;
-        font-style: italic;
-        font-size: inherit;
-        line-height: normal;
-        padding-left: 10px;
-        max-width: 90rem;">The formats selected here will be ignored by CWA's Auto-Ingest feature</p>
+        <p class="cwa-settings-explanation">The formats selected here will be ignored by CWA's Auto-Ingest feature</p>
         <div style="max-width: 90rem; padding-left: 30px;">
           {% for format in ignorable_formats -%}
             <label for="ignore_ingest_{{ format }}" style="width: 75px; padding-right: 6px;">
               {% if format in cwa_settings['auto_ingest_ignored_formats'] %}
                 {% if format == cwa_settings['auto_convert_target_format'] %}
-                  <input type="checkbox" id="ignore_ingest_{{ format }}" name="ignore_ingest_{{ format }}" value="{{ format }}" disabled style="vertical-align: middle;">
+                  <input type="checkbox" id="ignore_ingest_{{ format }}" name="ignore_ingest_{{ format }}" value="{{ format }}" disabled style="vertical-align: middle; accent-color: var(--color-secondary);">
                 {% else %}
-                  <input type="checkbox" id="ignore_ingest_{{ format }}" name="ignore_ingest_{{ format }}" value="{{ format }}" checked style="vertical-align: middle;">
+                  <input type="checkbox" id="ignore_ingest_{{ format }}" name="ignore_ingest_{{ format }}" value="{{ format }}" checked style="vertical-align: middle; accent-color: var(--color-secondary);">
                 {% endif %}
               {% else %}
                 {% if format == cwa_settings['auto_convert_target_format'] %}
-                  <input type="checkbox" id="ignore_ingest_{{ format }}" name="ignore_ingest_{{ format }}" value="{{ format }}" disabled style="vertical-align: middle;">
+                  <input type="checkbox" id="ignore_ingest_{{ format }}" name="ignore_ingest_{{ format }}" value="{{ format }}" disabled style="vertical-align: middle; accent-color: var(--color-secondary);">
                 {% else %}
-                  <input type="checkbox" id="ignore_ingest_{{ format }}" name="ignore_ingest_{{ format }}" value="{{ format }}" style="vertical-align: middle;">
+                  <input type="checkbox" id="ignore_ingest_{{ format }}" name="ignore_ingest_{{ format }}" value="{{ format }}" style="vertical-align: middle; accent-color: var(--color-secondary);">
                 {% endif %}
               {% endif %}
               <span style="padding-left: 4px; vertical-align: middle;">{{ format }}</span>