Skip to content

Commit

Permalink
Fixed CSS for both themes on CWA Settings page
Browse files Browse the repository at this point in the history
  • Loading branch information
@crocodilestick
crocodilestick committed Nov 19, 2024
1 parent a8eb49a commit fbb2733
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 44 deletions.
25 changes: 24 additions & 1 deletion root/app/calibre-web/cps/static/css/caliBlur.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

33 changes: 29 additions & 4 deletions root/app/calibre-web/cps/static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
62 changes: 23 additions & 39 deletions root/app/calibre-web/cps/templates/cwa_settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit fbb2733

Please sign in to comment.