diff --git a/changedetectionio/__init__.py b/changedetectionio/__init__.py index 936daf4f..241f1494 100644 --- a/changedetectionio/__init__.py +++ b/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", diff --git a/changedetectionio/static/styles/scss/parts/_pagination.scss b/changedetectionio/static/styles/scss/parts/_pagination.scss index f53757c2..3624548a 100644 --- a/changedetectionio/static/styles/scss/parts/_pagination.scss +++ b/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 { - padding: 0.65rem; - margin: 3px; - border: 1px solid #fff; - background: #444; - &.is-current { - font-weight: bold; - background: #888; - } - &:hover { - background: #999; - } - } + + a { + padding: 0.65rem; + margin: 3px; + border: none; + background: #444; + border-radius: 2px; + color: var(--color-text-button); + &.disabled { + display: none; + } + &.active { + font-weight: bold; + background: #888; + } + + &:hover { + background: #999; } } + + } \ No newline at end of file diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css index 532a8630..9f9fc55a 100644 --- a/changedetectionio/static/styles/styles.css +++ b/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; - background: #444; } - nav.pagination .pagination-list li a.is-current { + border: none; + background: #444; + 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 */