mirror of
https://github.com/dgtlmoon/changedetection.io.git
synced 2026-10-12 23:10:34 +00:00
Unify table styling
This commit is contained in:
dgtlmoon committed
1 parent
347539c9c4
commit
00a34516ef
7 files changed
+89
-42
No files matched your search
@@ -43,8 +43,8 @@ html[data-darkmode="true"] .watch-tag-list.tag-{{ class_name }} {
|
||||
</form>
|
||||
<!-- @todo maybe some overview matrix, 'tick' with which has notification, filter rules etc -->
|
||||
<div id="watch-table-wrapper">
|
||||
|
||||
<table class="pure-table pure-table-striped group-overview-table">
|
||||
<div class="cdio-table-clip">
|
||||
<table class="pure-table cdio-table group-overview-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
@@ -95,6 +95,7 @@ html[data-darkmode="true"] .watch-tag-list.tag-{{ class_name }} {
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -232,8 +232,8 @@ window.watchOverviewI18n = {
|
||||
{%- set table_classes = [
|
||||
'favicon-enabled' if 'favicons_enabled' not in ui_settings or ui_settings['favicons_enabled'] else 'favicon-not-enabled',
|
||||
] -%}
|
||||
<div class="watch-table-clip">
|
||||
<table class="pure-table {#pure-table-striped#} watch-table {{ table_classes | reject('equalto', '') | join(' ') }}">
|
||||
<div class="cdio-table-clip">
|
||||
<table class="pure-table cdio-table watch-table {{ table_classes | reject('equalto', '') | join(' ') }}">
|
||||
<thead>
|
||||
<tr>
|
||||
{%- set link_order = "desc" if sort_order == 'asc' else "asc" -%}
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
// Left-rail expand/collapse state.
|
||||
// Adds `action-side-bar-expanded` to <body> whenever the rail is showing its
|
||||
// labels. In pinned mode (body.actionside-bar-on) the class is already present
|
||||
// from page load; in collapsed mode (body.actionsidebar-minimal) the rail only
|
||||
// expands on hover/focus, so we toggle the class to match.
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (!document.body.classList.contains('actionsidebar-minimal')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const inner = document.querySelector('.action-sidebar-inner');
|
||||
if (!inner) {
|
||||
return;
|
||||
}
|
||||
|
||||
const expand = () => document.body.classList.add('action-side-bar-expanded');
|
||||
const collapse = () => document.body.classList.remove('action-side-bar-expanded');
|
||||
|
||||
inner.addEventListener('mouseenter', expand);
|
||||
inner.addEventListener('mouseleave', collapse);
|
||||
inner.addEventListener('focusin', expand);
|
||||
inner.addEventListener('focusout', function(e) {
|
||||
// Keep expanded while focus stays inside the rail.
|
||||
if (!inner.contains(e.relatedTarget)) {
|
||||
collapse();
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,47 @@
|
||||
@use "../settings" as *;
|
||||
|
||||
// Shared base table appearance used across the app (watch list, groups/tags
|
||||
// overview, …) so the different tables look consistent even though they show
|
||||
// different data. Page-specific tables layer their own rules on top — e.g.
|
||||
// .watch-table adds favicons, status icons, the checking-now bar and selection.
|
||||
.cdio-table {
|
||||
width: 100%;
|
||||
font-size: var(--body-main-text-size);
|
||||
|
||||
thead {
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
vertical-align: middle;
|
||||
border: none;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
color: var(--color-watch-table-row-text);
|
||||
border-bottom: 1px solid var(--color-table-line);
|
||||
background-color: var(--color-table-background);
|
||||
|
||||
td {
|
||||
background-color: var(--color-table-background);
|
||||
}
|
||||
}
|
||||
|
||||
// Row hover highlight (the app's tables don't zebra-stripe).
|
||||
tbody tr:hover > td {
|
||||
background-color: var(--watchlist-row-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Rounds a table's corners. border-radius on the <table> itself doesn't work
|
||||
// with border-collapse:collapse (and the row divider lines depend on collapse),
|
||||
// so a clip wrapper rounds + overflow-clips the square corners of the thead /
|
||||
// last-row cell backgrounds instead.
|
||||
.cdio-table-clip {
|
||||
border-radius: var(--common-round-border);
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -11,26 +11,14 @@ $title-col-stack-breakpoint: 1200px;
|
||||
background-color: var(--watchlist-row-selected);
|
||||
}
|
||||
|
||||
// Row hover: light grey background (replaces the now-disabled zebra striping)
|
||||
// and reveals the per-row action buttons (hidden at rest — see td.buttons below).
|
||||
.watch-table tbody tr:hover > td {
|
||||
background-color: var(--watchlist-row-hover);
|
||||
}
|
||||
// Reveal the per-row action buttons on hover/focus/selection (hidden at rest —
|
||||
// see td.buttons below). The row-hover background itself comes from .cdio-table.
|
||||
.watch-table tbody tr:hover td.buttons > *,
|
||||
.watch-table tbody tr:focus-within td.buttons > *,
|
||||
.watch-table tbody tr:has(input[name="uuids"]:checked) td.buttons > * {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Rounds the table's corners. border-radius on the <table> itself doesn't work
|
||||
// with border-collapse:collapse (and the row divider lines depend on collapse),
|
||||
// so a clip wrapper rounds + overflow-clips the square corners of the thead /
|
||||
// last-row cell backgrounds instead.
|
||||
.watch-table-clip {
|
||||
border-radius: var(--common-round-border);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// "Select all matching" banner shown under the bulk-operations bar when the
|
||||
// whole visible page is selected but more matching rows exist on other pages.
|
||||
.select-all-banner {
|
||||
@@ -81,10 +69,8 @@ body.has-queue {
|
||||
}
|
||||
}
|
||||
|
||||
// Watch-list-specific styling layered on top of the shared .cdio-table base.
|
||||
.watch-table {
|
||||
width: 100%;
|
||||
font-size: var(--body-main-text-size);
|
||||
|
||||
.checkbox-uuid {
|
||||
>* {
|
||||
vertical-align: middle;
|
||||
@@ -92,18 +78,6 @@ body.has-queue {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
thead {
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
vertical-align: middle;
|
||||
border: none;
|
||||
}
|
||||
@media only screen and (max-width: $title-col-stack-breakpoint) {
|
||||
.last-checked, .last-changed {
|
||||
text-align: center;
|
||||
@@ -114,14 +88,6 @@ body.has-queue {
|
||||
text-align: center;
|
||||
}
|
||||
tbody tr {
|
||||
color: var(--color-watch-table-row-text);
|
||||
border-bottom: 1px solid var(--color-table-line);
|
||||
background-color: var(--color-table-background);
|
||||
|
||||
td {
|
||||
background-color: var(--color-table-background);
|
||||
}
|
||||
|
||||
&.unviewed {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
@use "parts/menu";
|
||||
@use "parts/love";
|
||||
@use "parts/preview_text_filter";
|
||||
@use "parts/table";
|
||||
@use "parts/watch_table";
|
||||
@use "parts/watch_table-mobile";
|
||||
@use "parts/edit";
|
||||
|
||||
@@ -1 +1 @@
|
||||
.header{position:relative;color:var(--color-text-menu-heading)}.header a{color:var(--color-text-menu-heading)}.header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;background:linear-gradient(to right, rgba(200, 200, 200, 0.02), rgba(200, 200, 200, 0.6))}ul#top-right-menu{list-style:none;margin:0;margin-left:auto;padding:0;display:grid;gap:.55rem;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center}ul#top-right-menu .toggle-button{padding:0}.current-diff-url{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-align:left;margin:0 .55rem;-webkit-mask-image:linear-gradient(to right, #000 calc(100% - 2.5em), transparent);mask-image:linear-gradient(to right, #000 calc(100% - 2.5em), transparent)}.current-diff-url span{overflow:visible;white-space:nowrap}.pure-menu-horizontal{padding:.55rem;display:flex;justify-content:space-between;align-items:center}#pure-menu-horizontal-spinner{height:2px;background:linear-gradient(-75deg, #ff6000, #ff8f00, #ffdd00, #ed0000);background-size:400% 400%;width:100%;animation:gradient 200s ease infinite;opacity:.8;position:sticky;bottom:0;left:0}a.github-link{color:var(--color-text-menu-heading);margin:0;padding:0;height:1.8rem;display:block}a.github-link svg{fill:currentColor;height:100%}.top-menu-list .action-label{color:var(--color-text-menu-heading)}@media only screen and (max-width: 768px){.top-menu-list .action-label{display:none}}#inline-menu-extras-group{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center}:root{--body-main-text-size: 0.9rem;--color-white: #fff;--color-grey-50: #111;--color-grey-100: #262626;--color-grey-200: #333;--color-grey-300: #444;--color-grey-325: #555;--color-grey-350: #565d64;--color-grey-400: #666;--color-grey-500: #777;--color-grey-600: #999;--color-grey-700: #cbcbcb;--color-grey-750: #ddd;--color-grey-800: #e0e0e0;--color-grey-850: #eee;--color-grey-900: #f2f2f2;--color-black: #000;--color-dark-red: #a00;--color-light-red: #dd0000;--color-background-page: var(--color-grey-100);--color-background-gradient-first: #5ad8f7;--color-background-gradient-second: #2f50af;--color-background-gradient-third: #9150bf;--color-background: var(--color-white);--color-text: var(--color-grey-200);--color-link: #1b98f8;--color-menu-accent: #ed5900;--color-background-code: var(--color-grey-850);--color-error: var(--color-dark-red);--color-error-input: #ffebeb;--color-error-list: var(--color-light-red);--color-table-background: var(--color-background);--color-table-stripe: var(--color-grey-900);--watchlist-row-selected: #e3f0ff;--watchlist-row-hover: #f2f2f2;--color-text-tab: var(--color-white);--color-background-tab: rgba(255, 255, 255, 0.2);--color-background-tab-hover: rgba(255, 255, 255, 0.5);--color-text-tab-active: #222;--color-api-key: #0078e7;--color-background-button-primary: #0078e7;--color-background-button-green: #42dd53;--color-background-button-red: #dd4242;--color-background-button-success: rgb(28, 184, 65);--color-background-button-error: rgb(202, 60, 60);--color-text-button-error: var(--color-white);--color-background-button-warning: rgb(202, 60, 60);--color-text-button-warning: var(--color-white);--color-background-button-secondary: rgb(66, 184, 221);--color-background-button-cancel: rgb(200, 200, 200);--color-text-button: var(--color-white);--color-background-button-tag: rgb(99, 99, 99);--color-background-snapshot-age: #dfdfdf;--color-error-text-snapshot-age: var(--color-white);--color-error-background-snapshot-age: #ff0000;--color-background-button-tag-active: #9c9c9c;--color-text-messages: var(--color-white);--color-background-messages-message: rgba(255, 255, 255, .2);--color-background-messages-error: rgba(255, 1, 1, .5);--color-background-messages-notice: rgba(255, 255, 255, .5);--color-border-notification: #ccc;--color-background-checkbox-operations: rgba(0, 0, 0, 0.05);--color-warning: #ff3300;--color-border-warning: var(--color-warning);--color-text-legend: var(--color-white);--color-link-new-version: #e07171;--color-last-checked: #bbb;--color-text-footer: #444;--color-border-watch-table-cell: #eee;--color-text-watch-tag-list: rgba(231, 0, 105, 0.4);--color-background-new-watch-form: rgba(0, 0, 0, 0.05);--color-background-new-watch-input: var(--color-white);--color-background-new-watch-input-transparent: rgba(255, 255, 255, 0.1);--color-text-new-watch-input: var(--color-text);--color-border-input: var(--color-grey-500);--color-shadow-input: var(--color-grey-400);--color-background-input: var(--color-white);--color-text-input: var(--color-text);--color-text-input-description: var(--color-grey-500);--color-text-input-placeholder: var(--color-grey-600);--color-background-table-thead: var(--color-grey-800);--color-border-table-cell: var(--color-grey-700);--color-text-menu-heading: var(--color-white);--color-text-menu-link: var(--color-grey-500);--color-background-menu-link-hover: var(--color-grLine truncated
|
||||
.header{position:relative;color:var(--color-text-menu-heading)}.header a{color:var(--color-text-menu-heading)}.header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;background:linear-gradient(to right, rgba(200, 200, 200, 0.02), rgba(200, 200, 200, 0.6))}ul#top-right-menu{list-style:none;margin:0;margin-left:auto;padding:0;display:grid;gap:.55rem;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center}ul#top-right-menu .toggle-button{padding:0}.current-diff-url{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-align:left;margin:0 .55rem;-webkit-mask-image:linear-gradient(to right, #000 calc(100% - 2.5em), transparent);mask-image:linear-gradient(to right, #000 calc(100% - 2.5em), transparent)}.current-diff-url span{overflow:visible;white-space:nowrap}.pure-menu-horizontal{padding:.55rem;display:flex;justify-content:space-between;align-items:center}#pure-menu-horizontal-spinner{height:2px;background:linear-gradient(-75deg, #ff6000, #ff8f00, #ffdd00, #ed0000);background-size:400% 400%;width:100%;animation:gradient 200s ease infinite;opacity:.8;position:sticky;bottom:0;left:0}a.github-link{color:var(--color-text-menu-heading);margin:0;padding:0;height:1.8rem;display:block}a.github-link svg{fill:currentColor;height:100%}.top-menu-list .action-label{color:var(--color-text-menu-heading)}@media only screen and (max-width: 768px){.top-menu-list .action-label{display:none}}#inline-menu-extras-group{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center}:root{--body-main-text-size: 0.9rem;--color-white: #fff;--color-grey-50: #111;--color-grey-100: #262626;--color-grey-200: #333;--color-grey-300: #444;--color-grey-325: #555;--color-grey-350: #565d64;--color-grey-400: #666;--color-grey-500: #777;--color-grey-600: #999;--color-grey-700: #cbcbcb;--color-grey-750: #ddd;--color-grey-800: #e0e0e0;--color-grey-850: #eee;--color-grey-900: #f2f2f2;--color-black: #000;--color-dark-red: #a00;--color-light-red: #dd0000;--color-background-page: var(--color-grey-100);--color-background-gradient-first: #5ad8f7;--color-background-gradient-second: #2f50af;--color-background-gradient-third: #9150bf;--color-background: var(--color-white);--color-text: var(--color-grey-200);--color-link: #1b98f8;--color-menu-accent: #ed5900;--color-background-code: var(--color-grey-850);--color-error: var(--color-dark-red);--color-error-input: #ffebeb;--color-error-list: var(--color-light-red);--color-table-background: var(--color-background);--color-table-stripe: var(--color-grey-900);--watchlist-row-selected: #e3f0ff;--watchlist-row-hover: #f2f2f2;--color-text-tab: var(--color-white);--color-background-tab: rgba(255, 255, 255, 0.2);--color-background-tab-hover: rgba(255, 255, 255, 0.5);--color-text-tab-active: #222;--color-api-key: #0078e7;--color-background-button-primary: #0078e7;--color-background-button-green: #42dd53;--color-background-button-red: #dd4242;--color-background-button-success: rgb(28, 184, 65);--color-background-button-error: rgb(202, 60, 60);--color-text-button-error: var(--color-white);--color-background-button-warning: rgb(202, 60, 60);--color-text-button-warning: var(--color-white);--color-background-button-secondary: rgb(66, 184, 221);--color-background-button-cancel: rgb(200, 200, 200);--color-text-button: var(--color-white);--color-background-button-tag: rgb(99, 99, 99);--color-background-snapshot-age: #dfdfdf;--color-error-text-snapshot-age: var(--color-white);--color-error-background-snapshot-age: #ff0000;--color-background-button-tag-active: #9c9c9c;--color-text-messages: var(--color-white);--color-background-messages-message: rgba(255, 255, 255, .2);--color-background-messages-error: rgba(255, 1, 1, .5);--color-background-messages-notice: rgba(255, 255, 255, .5);--color-border-notification: #ccc;--color-background-checkbox-operations: rgba(0, 0, 0, 0.05);--color-warning: #ff3300;--color-border-warning: var(--color-warning);--color-text-legend: var(--color-white);--color-link-new-version: #e07171;--color-last-checked: #bbb;--color-text-footer: #444;--color-border-watch-table-cell: #eee;--color-text-watch-tag-list: rgba(231, 0, 105, 0.4);--color-background-new-watch-form: rgba(0, 0, 0, 0.05);--color-background-new-watch-input: var(--color-white);--color-background-new-watch-input-transparent: rgba(255, 255, 255, 0.1);--color-text-new-watch-input: var(--color-text);--color-border-input: var(--color-grey-500);--color-shadow-input: var(--color-grey-400);--color-background-input: var(--color-white);--color-text-input: var(--color-text);--color-text-input-description: var(--color-grey-500);--color-text-input-placeholder: var(--color-grey-600);--color-background-table-thead: var(--color-grey-800);--color-border-table-cell: var(--color-grey-700);--color-text-menu-heading: var(--color-white);--color-text-menu-link: var(--color-grey-500);--color-background-menu-link-hover: var(--color-grLine truncated
|
||||
Reference in new issue
Block a user