improve styling

changedetectionio/__init__.py

@@ -422,7 +422,7 @@ def changedetection_app(config=None, datastore_o=None):
         existing_tags = datastore.get_all_tags()
         form = forms.quickWatchForm(request.form)
         page = request.args.get(get_page_parameter(), type=int, default=1)
-        pagination = Pagination(page=page, total=len(datastore.data['watching']), per_page=int(os.getenv('pagination_per_page', 50)), css_framework = "bulma")
+        pagination = Pagination(page=page, total=len(datastore.data['watching']), per_page=int(os.getenv('pagination_per_page', 50)), css_framework = "semantic")
 
         output = render_template(
             "watch-overview.html",

changedetectionio/static/styles/scss/parts/_pagination.scss

@@ -4,28 +4,34 @@
   text-transform: capitalize;
 }
 
-nav.pagination {
+.pagination.menu {
   > * {
     display: inline-block;
   }
+
   li {
     display: inline-block;
   }
-  .pagination-list {
+
-    li {
+  a {
-      a {
+    padding: 0.65rem;
-        padding: 0.65rem;
+    margin: 3px;
-        margin: 3px;
+    border: none;
-        border: 1px solid #fff;
+    background: #444;
-        background: #444;
+    border-radius: 2px;
-        &.is-current {
+    color: var(--color-text-button);
-          font-weight: bold;
+    &.disabled {
-          background: #888;
+      display: none;
-        }
+    }
-        &:hover {
+    &.active {
-          background: #999;
+      font-weight: bold;
-        }
+      background: #888;
-      }
+    }
+
+    &:hover {
+      background: #999;
     }
   }
+
+
 }

changedetectionio/static/styles/styles.css

@@ -100,21 +100,25 @@ ul#requests-extra_proxies {
   font-size: 0.85rem;
   text-transform: capitalize; }
 
-nav.pagination > * {
+.pagination.menu > * {
   display: inline-block; }
 
-nav.pagination li {
+.pagination.menu li {
   display: inline-block; }
 
-nav.pagination .pagination-list li a {
+.pagination.menu a {
   padding: 0.65rem;
   margin: 3px;
-  border: 1px solid #fff;
+  border: none;
-  background: #444; }
+  background: #444;
-  nav.pagination .pagination-list li a.is-current {
+  border-radius: 2px;
+  color: var(--color-text-button); }
+  .pagination.menu a.disabled {
+    display: none; }
+  .pagination.menu a.active {
     font-weight: bold;
     background: #888; }
-  nav.pagination .pagination-list li a:hover {
+  .pagination.menu a:hover {
     background: #999; }
 
 /* spinner */