Further improvements on caliblur theme

cps/static/css/caliBlur.css

@@ -2314,7 +2314,7 @@ body > div.row-fluid {
 }
 
 .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
-    border-top: 1px solid rgba(0, 0, 0, .3);
+    // border-top: 1px solid rgba(0, 0, 0, .3);
     background: rgba(0, 0, 0, .15)
 }
 
@@ -7585,7 +7585,7 @@ body.mailset.admin > div.container-fluid > div > div.col-sm-10 > div.discover >
 
 body.mailset > div.container-fluid > div > div.col-sm-10 > div.discover .fixed-table-container {
     border: none;
-    padding-left: 15px;
+    padding-left: 0px;
     margin-bottom: 30px
 }
 

cps/static/css/caliBlur_override.css

@@ -60,3 +60,146 @@ input.datepicker:focus + input {color: #555}
 .top-tasks-label {
   display: none;
 }
+
+body.mailset > div.container-fluid > div > div.col-sm-10 > div.discover .editable-buttons .btn-primary {
+  background-color: var(--color-secondary);
+  border-color: var(--color-secondary);
+  color: #fff;
+}
+
+body.mailset > div.container-fluid > div > div.col-sm-10 > div.discover .editable-buttons .btn-primary:hover,
+body.mailset > div.container-fluid > div > div.col-sm-10 > div.discover .editable-buttons .btn-primary:focus,
+body.mailset > div.container-fluid > div > div.col-sm-10 > div.discover .editable-buttons .btn-primary:active {
+  background-color: var(--color-secondary-hover);
+  border-color: var(--color-secondary-hover);
+  color: #fff;
+}
+
+body.mailset > div.container-fluid > div > div.col-sm-10 > div.discover .editable-buttons .btn-default {
+  background-color: hsla(0, 0%, 100%, .25);
+  border-color: hsla(0, 0%, 100%, .25);
+  color: #fff;
+}
+
+body.mailset > div.container-fluid > div > div.col-sm-10 > div.discover .editable-buttons .btn-default:hover,
+body.mailset > div.container-fluid > div > div.col-sm-10 > div.discover .editable-buttons .btn-default:focus,
+body.mailset > div.container-fluid > div > div.col-sm-10 > div.discover .editable-buttons .btn-default:active {
+  background-color: hsla(0, 0%, 100%, .3);
+  border-color: hsla(0, 0%, 100%, .3);
+  color: #fff;
+}
+
+body.dbconfig.admin > div.container-fluid > div > div.col-sm-10 > div.discover > h2:first-of-type {
+  width: calc(100vw - 240px);
+  height: 60px;
+  margin: 0;
+  padding-left: 25px;
+  position: fixed;
+  top: 60px;
+  left: 240px;
+  background: rgba(0, 0, 0, .15);
+  color: hsla(0, 0%, 100%, .7);
+  font-family: "Open Sans Semibold", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 60px;
+  white-space: nowrap;
+  z-index: 1;
+}
+
+body.dbconfig.admin > div.container-fluid > div > div.col-sm-10 > div.discover > h2:first-of-type::before {
+  content: none;
+}
+
+body.dbconfig.admin > div.container-fluid > div > div.col-sm-10 > div.discover {
+  margin-bottom: 120px !important;
+  padding: 0 30px !important;
+}
+
+body.dbconfig.admin .caliblur-dbconfig-form .input-group-btn > .btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  margin-bottom: 0;
+  padding: 0 16px;
+}
+
+body.dbconfig.admin .caliblur-dbconfig-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 15px;
+}
+
+body.dbconfig.admin .caliblur-dbconfig-actions .pull-right {
+  display: flex;
+  gap: 10px;
+}
+
+body.dbconfig.admin .caliblur-dbconfig-actions .btn {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  margin-bottom: 0;
+}
+
+body.blur .modal-header.bg-info,
+body.blur .modal-header.bg-danger,
+body.blur #InvalidDialog .modal-header {
+  background-color: #323232;
+  border-bottom: 1px solid #222;
+  color: #eee;
+}
+
+body.blur .modal-header.bg-info .modal-title,
+body.blur .modal-header.bg-danger .modal-title,
+body.blur .modal-header.bg-info span,
+body.blur .modal-header.bg-danger span,
+body.blur #InvalidDialog .modal-header .modal-title,
+body.blur #InvalidDialog .modal-header span {
+  color: inherit;
+}
+
+body.blur #fileModal #file_confirm {
+  background-color: var(--color-secondary);
+  border-color: var(--color-secondary);
+  color: #fff;
+}
+
+body.blur #fileModal .modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+body.blur #fileModal #element_selected {
+  margin-right: auto;
+}
+
+body.blur #fileModal #file_abort,
+body.blur #fileModal #file_confirm {
+  margin: 0;
+}
+
+body.blur #fileModal #file_confirm:hover,
+body.blur #fileModal #file_confirm:focus,
+body.blur #fileModal #file_confirm:active {
+  background-color: var(--color-secondary-hover);
+  border-color: var(--color-secondary-hover);
+  color: #fff;
+}
+
+body.blur #fileModal #file_abort {
+  background-color: hsla(0, 0%, 100%, .25);
+  border-color: hsla(0, 0%, 100%, .25);
+  color: #fff;
+}
+
+body.blur #fileModal #file_abort:hover,
+body.blur #fileModal #file_abort:focus,
+body.blur #fileModal #file_abort:active {
+  background-color: hsla(0, 0%, 100%, .3);
+  border-color: hsla(0, 0%, 100%, .3);
+  color: #fff;
+}

cps/templates/modal_dialogs.html

@@ -96,8 +96,8 @@
         </div>
       <div class="modal-footer">
         <div class="text-left" id="element_selected"></div>
-        <input type="button" class="btn btn-primary" data-path="" data-link=""  data-folderonly="" data-filefilter="" data-newfile="" value="{{_('Select')}}" name="file_confirm" id="file_confirm" data-dismiss="modal">
         <button type="button" id="file_abort" class="btn btn-default" data-dismiss="modal">{{_('Cancel')}}</button>
+        <input type="button" class="btn btn-primary" data-path="" data-link=""  data-folderonly="" data-filefilter="" data-newfile="" value="{{_('Select')}}" name="file_confirm" id="file_confirm" data-dismiss="modal">
       </div>
     </div>
   </div>

cps/themes/caliblur/templates/config_db.html

@@ -0,0 +1,90 @@
+{% extends theme("layout.html") %}
+{% block flash %}
+<div id="spinning_success" class="row-fluid text-center" style="display:none;">
+    <div class="alert alert-info"><img id="img-spinner" src="{{ url_for('static', filename='css/libs/images/loading-icon.gif') }}" alt="" aria-hidden="true"></div>
+</div>
+{% endblock %}
+{% block body %}
+<div class="discover">
+  <h2>{{ title }}</h2>
+  <form id="db_config_form" role="form" method="POST" class="caliblur-dbconfig-form" action="{{ url_for('admin.db_configuration') }}" autocomplete="off">
+  <div class="col-md-10 col-lg-6">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+    <label for="config_calibre_dir">{{ _('Location of Calibre Database') }}</label>
+    <div class="form-group required input-group">
+      <input type="text" class="form-control" id="config_calibre_dir" name="config_calibre_dir" value="{% if config.config_calibre_dir != None %}{{ config.config_calibre_dir }}{% endif %}" autocomplete="off">
+      <span class="input-group-btn">
+        <button type="button" data-toggle="modal" id="calibre_modal_path" data-link="config_calibre_dir" data-filefilter="metadata.db" data-target="#fileModal" class="btn btn-default"><span class="glyphicon glyphicon-folder-open"></span></button>
+      </span>
+    </div>
+    <div class="form-group required">
+      <input type="checkbox" id="config_calibre_split" name="config_calibre_split" data-control="split_settings" data-t ="{{ config.config_calibre_split_dir }}" {% if config.config_calibre_split %}checked{% endif %}>
+      <label for="config_calibre_split">{{ _('Separate Book Files from Library') }}</label>
+    </div>
+    <div data-related="split_settings">
+      <div class="form-group required input-group">
+        <input type="text" class="form-control" id="config_calibre_split_dir" name="config_calibre_split_dir" value="{% if config.config_calibre_split_dir != None %}{{ config.config_calibre_split_dir }}{% endif %}" autocomplete="off">
+        <span class="input-group-btn">
+          <button type="button" data-toggle="modal" id="calibre_modal_split_path" data-link="config_calibre_split_dir" data-filefilter="" data-target="#fileModal" class="btn btn-default"><span class="glyphicon glyphicon-folder-open"></span></button>
+        </span>
+      </div>
+    </div>
+    {% if feature_support['gdrive'] %}
+      <div class="form-group required">
+        <input type="checkbox" id="config_use_google_drive" name="config_use_google_drive" data-control="gdrive_settings" {% if config.config_use_google_drive %}checked{% endif %}>
+        <label for="config_use_google_drive">{{ _('Use Google Drive?') }}</label>
+      </div>
+      {% if not gdriveError and config.config_use_google_drive %}
+        {% if show_authenticate_google_drive and config.config_use_google_drive %}
+          <div class="form-group required">
+            <a href="{{ url_for('gdrive.authenticate_google_drive') }}" id="gdrive_auth" class="btn btn-primary">{{ _('Authenticate Google Drive') }}</a>
+          </div>
+        {% else %}
+          {% if not show_authenticate_google_drive %}
+            <div class="form-group required">
+              <label for="config_google_drive_folder">{{ _('Google Drive Calibre folder') }}</label>
+              <select name="config_google_drive_folder" id="config_google_drive_folder" class="form-control">
+                {% for gdrivefolder in gdrivefolders %}
+                  <option value="{{ gdrivefolder.title }}" {% if gdrivefolder.title == config.config_google_drive_folder %}selected{% endif %}>{{ gdrivefolder.title }}</option>
+                {% endfor %}
+              </select>
+            </div>
+            {% if config.config_google_drive_watch_changes_response %}
+              <label for="config_google_drive_watch_changes_response">{{ _('Metadata Watch Channel ID') }}</label>
+              <div class="form-group input-group required">
+                <input type="text" class="form-control" name="config_google_drive_watch_changes_response" id="config_google_drive_watch_changes_response" value="{{ config.config_google_drive_watch_changes_response['id'] }} expires on {{ config.config_google_drive_watch_changes_response['expiration'] | strftime }}" autocomplete="off" disabled="">
+                <span class="input-group-btn"><a href="{{ url_for('gdrive.revoke_watch_gdrive') }}" id="watch_revoke" class="btn btn-primary">{{ _('Revoke') }}</a></span>
+              </div>
+            {% else %}
+              <a href="{{ url_for('gdrive.watch_gdrive') }}" id="enable_gdrive_watch" class="btn btn-primary">Enable watch of metadata.db</a>
+            {% endif %}
+          {% endif %}
+        {% endif %}
+      {% endif %}
+    {% endif %}
+</div>
+  <div class="col-sm-12 clearfix caliblur-dbconfig-actions">
+    <div class="pull-right">
+      <a href="{{ url_for('admin.admin') }}" id="config_back" class="btn btn-primary">{{ _('Cancel') }}</a>
+      <button id="db_submit" type="submit" form="db_config_form" class="btn btn-default">{{ _('Save') }}</button>
+    </div>
+  </div>
+</form>
+
+{% endblock %}
+{% block modal %}
+{{ filechooser_modal() }}
+{{ change_confirm_modal() }}
+<div id="InvalidDialog" class="modal fade" role="dialog">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header bg-info"></div>
+      <div class="modal-body text-center">
+        <p>{{ _('New db location is invalid, please enter valid path') }}</p>
+        <p></p>
+        <button type="button" class="btn btn-default" id="invalid_confirm" data-dismiss="modal">{{ _('OK') }}</button>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}

cps/themes/caliblur/templates/email_edit.html

@@ -6,9 +6,8 @@
 {% block body %}
 <div class="discover">
   <h1>{{title}}</h1>
-  <form role="form" method="POST" autocomplete="off">
+  <form role="form" class="col-md-10 col-lg-6" method="POST" autocomplete="off">
     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-    <div class="col-md-10 col-lg-6">
       {% if feature_support['gmail'] %}
       <div>
         <div class="form-group">
@@ -68,16 +67,17 @@
         {% if feature_support['gmail'] %}
       </div>
       {% endif %}
-    </div>
-    <div class="col-sm-12 clearfix">
-      <a href="{{ url_for('admin.admin') }}" id="config_back" class="btn btn-default">{{_('Cancel')}}</a>
-      <button type="submit" name="submit" value="submit" class="btn btn-default">{{_('Save')}}</button>
-      <button type="submit" name="test" value="test" class="btn btn-default">{{_('Save and Send Test Email')}}</button>
+    <div class="clearfix">
+      <div class="pull-right">
+        <a href="{{ url_for('admin.admin') }}" id="config_back" class="btn btn-primary" style="margin-bottom: 10px;">{{_('Cancel')}}</a>
+        <button type="submit" name="submit" value="submit" class="btn btn-default">{{_('Save')}}</button>
+        <button type="submit" name="test" value="test" class="btn btn-default">{{_('Save and Send Test Email')}}</button>
+      </div>
     </div>
   </form>
   {% if g.allow_registration and not simple%}
   <div class="col-md-10 col-lg-6">
-    <h2>{{_('Allowed Domains (Whitelist)')}}</h2>
+    <h2 style="color: hsla(0, 0%, 100%, .7);">{{_('Allowed Domains (Whitelist)')}}</h2>
     <form id="domain_add_allow" action="{{ url_for('admin.add_domain',allow=1)}}" method="POST">
     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
     <div class="form-group required">
@@ -95,7 +95,7 @@
     </tr>
     </thead>
   </table>
-  <h2>{{_('Denied Domains (Blacklist)')}}</h2>
+  <h2 style="color: hsla(0, 0%, 100%, .7);">{{_('Denied Domains (Blacklist)')}}</h2>
     <table class="table table-no-bordered" id="domain-deny-table" data-url="{{url_for('admin.list_domain', allow=0)}}" data-id-field="id" data-show-header="false" data-editable-mode="inline" data-locale="{{ current_user.locale }}">
       <thead>
         <tr>
@@ -114,7 +114,6 @@
       <button id="domain_deny_submit" class="btn btn-default">{{_('Add')}}</button>
     </form>
     </div>
-
     {% endif %}
 </div>
 {% endblock %}

cps/themes/caliblur/templates/layout.html

@@ -21,7 +21,7 @@
     <link href="{{ url_for('static', filename='css/caliBlur.css') }}" rel="stylesheet" media="screen">
     <link href="{{ url_for('static', filename='css/caliBlur_override.css') }}" rel="stylesheet" media="screen">
   </head>
-  <body class="{{ page }} {{ bodyClass }} blur{% if page == 'stat' %} stats{% endif %}{% if page in ['config', 'uiconfig', 'newuser', 'edituser', 'mailset', 'usertable'] %} admin{% endif %}{% if page == 'advsearch' %} advanced_search{% endif %}" data-readmore-more="{{_('Read more')}}" data-readmore-less="{{_('Read less')}}">
+  <body class="{{ page }} {{ bodyClass }} blur{% if page == 'stat' %} stats{% endif %}{% if page in ['config', 'uiconfig', 'newuser', 'edituser', 'mailset', 'usertable', 'dbconfig'] %} admin{% endif %}{% if page == 'advsearch' %} advanced_search{% endif %}" data-readmore-more="{{_('Read more')}}" data-readmore-less="{{_('Read less')}}">
     <!-- Static navbar -->
     <div class="navbar navbar-default navbar-static-top" role="navigation">
       <div class="container-fluid">