From 4c27bb28a1d95ba836b86037847810359b27270a Mon Sep 17 00:00:00 2001
From: Terry Geng <terry@terriex.com>
Date: Tue, 12 May 2020 19:30:04 +0800
Subject: [PATCH] fix: color of filter section on dark theme

---
 templates/index.html | 234 ++++++++++++++++++++++---------------------
 1 file changed, 118 insertions(+), 116 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index ea685a0..84b624b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -153,8 +153,8 @@
     <div class="container mb-3">
         <h2 id="forms">Music Library</h2>
 
-        <div class="card mb-3 bg-light">
-            <div class="card-body">
+        <div class="card mb-3">
+            <div class="card-header">
                 <h5 class="card-title">Filters</h5>
                 <hr>
                 <div class="row">
@@ -205,128 +205,130 @@
                     </div>
                 </div>
             </div>
-        </div>
-
-        <div id="library-group" class="list-group library-group" style="overflow: auto;">
-            <div id="library-item-loading" class="list-group-item library-item">
-                <img style="margin: auto; width: 35px;" src="static/image/loading.svg" />
-            </div>
-            <div id="library-item-empty" style="display: none" class="list-group-item library-item">
-                <img style="margin: auto; width: 35px;" src="static/image/empty_box.svg" />
-            </div>
-            <div id="library-item" style="display: none;" class="list-group-item library-item">
-                <input hidden type="text" class="library-item-id" value="" />
-
-                <div class="library-thumb-col">
-                    <div class="library-thumb-img">
-                        <img class="library-item-thumb library-thumb-img" src="static/image/unknown-album.png" />
+            <div class="card-body">
+                <div id="library-group" class="list-group library-group" style="overflow: auto;">
+                    <div id="library-item-loading" class="list-group-item library-item">
+                        <img style="margin: auto; width: 35px;" src="static/image/loading.svg" />
                     </div>
-                    <div class="btn-group-vertical library-thumb-grp">
-                        <div class="library-item-play btn btn-secondary library-thumb-btn-up" title="Play">
-                            <i class="fas fa-play" aria-hidden="true"></i>
+                    <div id="library-item-empty" style="display: none" class="list-group-item library-item">
+                        <img style="margin: auto; width: 35px;" src="static/image/empty_box.svg" />
+                    </div>
+                    <div id="library-item" style="display: none;" class="list-group-item library-item">
+                        <input hidden type="text" class="library-item-id" value="" />
+
+                        <div class="library-thumb-col">
+                            <div class="library-thumb-img">
+                                <img class="library-item-thumb library-thumb-img" src="static/image/unknown-album.png" />
+                            </div>
+                            <div class="btn-group-vertical library-thumb-grp">
+                                <div class="library-item-play btn btn-secondary library-thumb-btn-up" title="Play">
+                                    <i class="fas fa-play" aria-hidden="true"></i>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="library-info-col library-info-title col-5" style="padding: 12px 0;">
+                            <div>
+                                <span class="library-item-type lead text-muted btn-space">[File]</span>
+                                <span class="library-item-title lead btn-space">This is my title</span>
+                                <span class="library-item-artist text-muted"> - Artist</span>
+                            </div>
+                        </div>
+
+                        <div class="library-info-col col-4 d-none d-md-flex" style="padding: 3px;">
+                            <span class="library-item-path text-muted path">Path/to/the/file</span>
+                            <div class="library-item-tags">
+                                <a class="tag-space tag-click library-item-edit"><i class="fas fa-edit"
+                                                                                    style="color: #AAAAAA"></i></a>
+                                <span class="library-item-notag badge badge-light text-muted font-italic">No
+                            tag</span>
+                                <span class="library-item-tag tag-space badge">Tag</span>
+                            </div>
+                        </div>
+
+                        <div class="btn-group library-action">
+                            <button class="library-item-add-next btn btn-info btn-sm btn-space" type="button"
+                                    title="Next to play">
+                                <svg class="library-btn-svg" style="width: 1rem; fill: currentColor;" viewBox="5 5 17 17">
+                                    <path d="m5.700245,3.92964l0,14.150376l11.451127,-7.075188l-11.451127,-7.075188z" />
+                                    <path
+                                            d="m20.942859,18.221072l-3.323292,0l0,3.323292l-1.107764,0l0,-3.323292l-3.323292,0l0,-1.107764l3.323292,0l0,-3.323292l1.107764,0l0,3.323292l3.323292,0l0,1.107764z" />
+                                </svg>
+
+                            </button>
+                            <button class="library-item-add-bottom library-btn btn btn-info btn-sm btn-space" type="button"
+                                    title="Add to bottom">
+                                <svg class="library-btn-svg" style="width: 1rem; fill: currentColor;" viewBox="2 2 20 20">
+                                    <path
+                                            d="M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z" />
+                                </svg>
+
+                            </button>
+                            <button class="library-item-download btn btn-primary btn-sm btn-space" type="button">
+                                <i class="fas fa-download" aria-hidden="true"></i>
+                            </button>
+                            <button class="library-item-trash btn btn-danger btn-sm btn-space" type="button">
+                                <i class="fas fa-trash-alt"></i>
+                            </button>
+                        </div>
+                    </div>
+
+                </div>
+
+                <div class="list-group">
+                    <div id="library-pagination" style="margin-left: auto; margin-top: 10px;">
+                        <ul id="library-page-ul" class="pagination pagination">
+                            <li class="library-page-li page-item active">
+                                <a class="library-page-no page-link">1</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="btn-group" role="group" class="mb-2">
+                    <button type="submit" class="btn btn-secondary mr-1" onclick="addAllResults()"><i class="fas fa-plus"
+                                                                                                      aria-hidden="true"></i> Add All
+                    </button>
+                    <button type="submit" class="btn btn-secondary mr-1"
+                            onclick="request('post', {action : 'rescan'}); updateResults()">
+                        <i class="fas fa-sync-alt" aria-hidden="true"></i> Rescan Files
+                    </button>
+                    <button type="submit" class="btn btn-secondary mr-1" onclick="downloadAllResults()"><i
+                            class="fas fa-download" aria-hidden="true"></i> Download All
+                    </button>
+                    <button type="button" class="btn btn-danger mr-1" data-toggle="modal" data-target="#deleteWarningModal"><i
+                            class="fas fa-trash-alt" aria-hidden="true"></i>
+                        Delete All
+                    </button>
+                </div>
+
+                <div class="modal fade" id="deleteWarningModal" tabindex="-1" role="dialog"
+                     aria-labelledby="Warning-Delete-File" aria-hidden="true">
+                    <div class="modal-dialog" role="document">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h5 class="modal-title" id="deleteWarningModalLabel">Are you really sure?</h5>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true">&times;</span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                All files listed here, include files on other pages, will be deleted from your
+                                hard-drive.
+                                Is that what you want?
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                                <button type="button" class="btn btn-danger" data-dismiss="modal"
+                                        onclick="deleteAllResults()">Delete All Listed Files</button>
+                            </div>
                         </div>
                     </div>
                 </div>
-
-                <div class="library-info-col library-info-title col-5" style="padding: 12px 0;">
-                    <div>
-                        <span class="library-item-type lead text-muted btn-space">[File]</span>
-                        <span class="library-item-title lead btn-space">This is my title</span>
-                        <span class="library-item-artist text-muted"> - Artist</span>
-                    </div>
-                </div>
-
-                <div class="library-info-col col-4 d-none d-md-flex" style="padding: 3px;">
-                    <span class="library-item-path text-muted path">Path/to/the/file</span>
-                    <div class="library-item-tags">
-                        <a class="tag-space tag-click library-item-edit"><i class="fas fa-edit"
-                                style="color: #AAAAAA"></i></a>
-                        <span class="library-item-notag badge badge-light text-muted font-italic">No
-                            tag</span>
-                        <span class="library-item-tag tag-space badge">Tag</span>
-                    </div>
-                </div>
-
-                <div class="btn-group library-action">
-                    <button class="library-item-add-next btn btn-info btn-sm btn-space" type="button"
-                        title="Next to play">
-                        <svg class="library-btn-svg" style="width: 1rem; fill: currentColor;" viewBox="5 5 17 17">
-                            <path d="m5.700245,3.92964l0,14.150376l11.451127,-7.075188l-11.451127,-7.075188z" />
-                            <path
-                                d="m20.942859,18.221072l-3.323292,0l0,3.323292l-1.107764,0l0,-3.323292l-3.323292,0l0,-1.107764l3.323292,0l0,-3.323292l1.107764,0l0,3.323292l3.323292,0l0,1.107764z" />
-                        </svg>
-
-                    </button>
-                    <button class="library-item-add-bottom library-btn btn btn-info btn-sm btn-space" type="button"
-                        title="Add to bottom">
-                        <svg class="library-btn-svg" style="width: 1rem; fill: currentColor;" viewBox="2 2 20 20">
-                            <path
-                                d="M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z" />
-                        </svg>
-
-                    </button>
-                    <button class="library-item-download btn btn-primary btn-sm btn-space" type="button">
-                        <i class="fas fa-download" aria-hidden="true"></i>
-                    </button>
-                    <button class="library-item-trash btn btn-danger btn-sm btn-space" type="button">
-                        <i class="fas fa-trash-alt"></i>
-                    </button>
-                </div>
             </div>
-
-        </div>
-
-        <div class="list-group">
-            <div id="library-pagination" style="margin-left: auto; margin-top: 10px;">
-                <ul id="library-page-ul" class="pagination pagination">
-                    <li class="library-page-li page-item active">
-                        <a class="library-page-no page-link">1</a>
-                    </li>
-                </ul>
             </div>
         </div>
 
-        <div class="btn-group" role="group" class="mb-2">
-            <button type="submit" class="btn btn-secondary mr-1" onclick="addAllResults()"><i class="fas fa-plus"
-                    aria-hidden="true"></i> Add All
-            </button>
-            <button type="submit" class="btn btn-secondary mr-1"
-                onclick="request('post', {action : 'rescan'}); updateResults()">
-                <i class="fas fa-sync-alt" aria-hidden="true"></i> Rescan Files
-            </button>
-            <button type="submit" class="btn btn-secondary mr-1" onclick="downloadAllResults()"><i
-                    class="fas fa-download" aria-hidden="true"></i> Download All
-            </button>
-            <button type="button" class="btn btn-danger mr-1" data-toggle="modal" data-target="#deleteWarningModal"><i
-                    class="fas fa-trash-alt" aria-hidden="true"></i>
-                Delete All
-            </button>
-        </div>
-
-        <div class="modal fade" id="deleteWarningModal" tabindex="-1" role="dialog"
-            aria-labelledby="Warning-Delete-File" aria-hidden="true">
-            <div class="modal-dialog" role="document">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title" id="deleteWarningModalLabel">Are you really sure?</h5>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                            <span aria-hidden="true">&times;</span>
-                        </button>
-                    </div>
-                    <div class="modal-body">
-                        All files listed here, include files on other pages, will be deleted from your
-                        hard-drive.
-                        Is that what you want?
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                        <button type="button" class="btn btn-danger" data-dismiss="modal"
-                            onclick="deleteAllResults()">Delete All Listed Files</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
 
 
     <div id="upload" class="container mb-3">