custom table search css

apps/home/static/home/css/tables.css

@@ -0,0 +1,78 @@
+
+.table {
+    color: var(--bs-body-color) !important;
+}
+
+.table tbody tr.selected > * {
+    box-shadow: inset 0 0 0 9999px rgba(var(--bs-secondary-bg-rgb), 0.9) !important;
+    color: var(--bs-body-color) !important;
+}
+
+.table.dataTable > tbody > tr.selected a {
+    color: var(--bs-link-color) !important;
+}
+
+/* Fuck ugly <td> height fix */
+td {
+    height: 1px;
+    text-wrap: nowrap;
+}
+td > .btn-link { padding-left: 0; }
+  
+@-moz-document url-prefix() {
+    tr { height: 100%; }
+    td { height: 100%; }
+}
+
+
+/* Table Search */
+
+.table-search-group {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    width: 100%;
+    max-width: 450px;
+    border: 1px solid var(--bs-border-color);
+    border-radius: 0.25rem;
+    background-color: var(--bs-body-bg);
+    overflow: hidden;
+}
+
+.table-search-label {
+    display: flex;
+    align-items: center;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--bs-body-color);
+    text-align: center;
+    white-space: nowrap;
+    padding-right: 0;
+    border: none;
+    background-color: inherit;
+}
+
+.table-search-input {
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--bs-body-color);
+    appearance: none;
+    background-clip: padding-box;
+    position: relative;
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0;
+    border: none;
+    border-radius: 0;
+    background-color: inherit
+}
+
+.table-search-input:focus {
+    outline: 0;
+    box-shadow: none;
+}

apps/home/static/home/js/tables.js

@@ -243,7 +243,7 @@ function bindTablePageSizer(tableId) {
 _searchTimeouts = {};
 function bindTableSearch(tableId) {
     let $tableFilters = $(tableId).closest('.js-tableBody').siblings('.js-tableFilters');
-    $tableFilters.on("input", ".search-filter", function() {
+    $tableFilters.on("input", ".table-search-input", function() {
         clearTimeout(_searchTimeouts[tableId]);
 
         let searchString = $(this).val();
@@ -303,5 +303,5 @@ function determineSelectAllState(tableId) {
     $checkbox.prop("checked", doCheck);
     $checkbox.prop("indeterminate", doIndeterminate);
 
-    // TODO: disable/enable delete button here  
-}
+    // TODO: disable/enable delete button here
+}

apps/home/templates/home/tabs/styles.html

@@ -1,10 +1,10 @@
 <div class="js-tableFilters row my-3 px-sm-3">
     <div class="col-md-6 col-lg-5 col-xl-4 col-xxl-3">
-        <div class="input-group mb-lg-0 mb-3 rounded-1">
-            <span class="input-group-text">
+        <div class="table-search-group mb-lg-0 mb-3">
+            <label for="searchForMessageStyle" class="table-search-label">
                 <i class="bi bi-search"></i>
-            </span>
-            <input type="search" class="form-control search-filter" placeholder="Search">
+            </label>
+            <input type="search" id="searchForMessageStyle" class="table-search-input" placeholder="search">
         </div>
     </div>
     <div class="col-md-6 col-lg-7 col-xl-8 col-xxl-9 text-md-end table-search-buttons">

apps/home/templates/home/tabs/subs.html

@@ -1,10 +1,10 @@
 <div class="js-tableFilters row my-3 px-sm-3">
     <div class="col-md-6 col-lg-5 col-xl-4 col-xxl-3">
-        <div class="input-group mb-lg-0 mb-3 rounded-1">
-            <span class="input-group-text">
+        <div class="table-search-group mb-lg-0 mb-3">
+            <label for="searchForSubscription" class="table-search-label">
                 <i class="bi bi-search"></i>
-            </span>
-            <input type="search" class="form-control search-filter" placeholder="Search">
+            </label>
+            <input type="search" id="searchForSubscription" class="table-search-input" placeholder="search">
         </div>
     </div>
     <div class="col-md-6 col-lg-7 col-xl-8 col-xxl-9 text-md-end table-search-buttons">