diff --git a/changedetectionio/__init__.py b/changedetectionio/__init__.py index 5d22a280..5648cb53 100644 --- a/changedetectionio/__init__.py +++ b/changedetectionio/__init__.py @@ -202,7 +202,9 @@ def changedetection_app(config=None, datastore_o=None): watch_api.add_resource(api_v1.SystemInfo, '/api/v1/systeminfo', resource_class_kwargs={'datastore': datastore, 'update_q': update_q}) - + def getDarkModeSetting(): + css_dark_mode = request.cookies.get('css_dark_mode') + return True if (css_dark_mode == 'true' or css_dark_mode == True) else False # Setup cors headers to allow all domains # https://flask-cors.readthedocs.io/en/latest/ @@ -403,6 +405,7 @@ def changedetection_app(config=None, datastore_o=None): form = forms.quickWatchForm(request.form) output = render_template("watch-overview.html", + dark_mode=getDarkModeSetting(), form=form, watches=sorted_watches, tags=existing_tags, @@ -661,6 +664,7 @@ def changedetection_app(config=None, datastore_o=None): browser_steps_config=browser_step_ui_config, current_base_url=datastore.data['settings']['application']['base_url'], emailprefix=os.getenv('NOTIFICATION_MAIL_BUTTON_PREFIX', False), + dark_mode=getDarkModeSetting(), form=form, has_default_notification_urls=True if len(datastore.data['settings']['application']['notification_urls']) else False, has_empty_checktime=using_default_check_time, @@ -748,6 +752,7 @@ def changedetection_app(config=None, datastore_o=None): output = render_template("settings.html", form=form, + dark_mode=getDarkModeSetting(), current_base_url = datastore.data['settings']['application']['base_url'], hide_remove_pass=os.getenv("SALTED_PASS", False), api_key=datastore.data['settings']['application'].get('api_access_token'), @@ -788,6 +793,7 @@ def changedetection_app(config=None, datastore_o=None): # Could be some remaining, or we could be on GET output = render_template("import.html", + dark_mode=getDarkModeSetting(), import_url_list_remaining="\n".join(remaining_urls), original_distill_json='' ) @@ -865,6 +871,7 @@ def changedetection_app(config=None, datastore_o=None): newest=newest_version_file_contents, previous=previous_version_file_contents, extra_stylesheets=extra_stylesheets, + dark_mode=getDarkModeSetting(), versions=dates[:-1], # All except current/last uuid=uuid, newest_version_timestamp=dates[-1], @@ -912,6 +919,7 @@ def changedetection_app(config=None, datastore_o=None): content=content, history_n=watch.history_n, extra_stylesheets=extra_stylesheets, + dark_mode=getDarkModeSetting(), # current_diff_url=watch['url'], watch=watch, uuid=uuid, @@ -958,6 +966,7 @@ def changedetection_app(config=None, datastore_o=None): content=content, history_n=watch.history_n, extra_stylesheets=extra_stylesheets, + dark_mode=getDarkModeSetting(), ignored_line_numbers=ignored_line_numbers, triggered_line_numbers=trigger_line_numbers, current_diff_url=watch['url'], @@ -976,6 +985,7 @@ def changedetection_app(config=None, datastore_o=None): def notification_logs(): global notification_debug_log output = render_template("notification-log.html", + dark_mode=getDarkModeSetting(), logs=notification_debug_log if len(notification_debug_log) else ["Notification logs are empty - no notifications sent yet."]) return output diff --git a/changedetectionio/forms.py b/changedetectionio/forms.py index 5a42251d..e12b6917 100644 --- a/changedetectionio/forms.py +++ b/changedetectionio/forms.py @@ -207,9 +207,9 @@ class ValidateTokensList(object): if not p.strip('{}') in notification.valid_tokens: message = field.gettext('Token \'%s\' is not a valid token.') raise ValidationError(message % (p)) - + class validateURL(object): - + """ Flask wtform validators wont work with basic auth """ diff --git a/changedetectionio/model/App.py b/changedetectionio/model/App.py index daedde1b..df9393d6 100644 --- a/changedetectionio/model/App.py +++ b/changedetectionio/model/App.py @@ -27,6 +27,7 @@ class model(dict): 'base_url' : None, 'extract_title_as_title': False, 'empty_pages_are_a_change': False, + 'css_dark_mode': False, 'fetch_backend': getenv("DEFAULT_FETCH_BACKEND", "html_requests"), 'filter_failure_notification_threshold_attempts': _FILTER_FAILURE_THRESHOLD_ATTEMPTS_DEFAULT, 'global_ignore_text': [], # List of text to ignore when calculating the comparison checksum diff --git a/changedetectionio/static/images/bell-off.svg b/changedetectionio/static/images/bell-off.svg index 0bbe2765..f12f9c3d 100644 --- a/changedetectionio/static/images/bell-off.svg +++ b/changedetectionio/static/images/bell-off.svg @@ -1,42 +1,4 @@ - - - - + + diff --git a/changedetectionio/static/images/spread.svg b/changedetectionio/static/images/spread.svg index 757cb631..969f9c12 100644 --- a/changedetectionio/static/images/spread.svg +++ b/changedetectionio/static/images/spread.svg @@ -1,46 +1,5 @@ - - - - - + + + diff --git a/changedetectionio/static/js/diff-render.js b/changedetectionio/static/js/diff-render.js index 8d5e7a82..faff34b4 100644 --- a/changedetectionio/static/js/diff-render.js +++ b/changedetectionio/static/js/diff-render.js @@ -1,112 +1,110 @@ -var a = document.getElementById('a'); -var b = document.getElementById('b'); -var result = document.getElementById('result'); +var a = document.getElementById("a"); +var b = document.getElementById("b"); +var result = document.getElementById("result"); function changed() { - // https://github.com/kpdecker/jsdiff/issues/389 - // I would love to use `{ignoreWhitespace: true}` here but it breaks the formatting - options = {ignoreWhitespace: document.getElementById('ignoreWhitespace').checked}; - - var diff = Diff[window.diffType](a.textContent, b.textContent, options); - var fragment = document.createDocumentFragment(); - for (var i = 0; i < diff.length; i++) { - - if (diff[i].added && diff[i + 1] && diff[i + 1].removed) { - var swap = diff[i]; - diff[i] = diff[i + 1]; - diff[i + 1] = swap; - } - - var node; - if (diff[i].removed) { - node = document.createElement('del'); - node.classList.add("change"); - node.appendChild(document.createTextNode(diff[i].value)); - - } else if (diff[i].added) { - node = document.createElement('ins'); - node.classList.add("change"); - node.appendChild(document.createTextNode(diff[i].value)); - } else { - node = document.createTextNode(diff[i].value); - } - fragment.appendChild(node); + // https://github.com/kpdecker/jsdiff/issues/389 + // I would love to use `{ignoreWhitespace: true}` here but it breaks the formatting + options = { + ignoreWhitespace: document.getElementById("ignoreWhitespace").checked, + }; + + var diff = Diff[window.diffType](a.textContent, b.textContent, options); + var fragment = document.createDocumentFragment(); + for (var i = 0; i < diff.length; i++) { + if (diff[i].added && diff[i + 1] && diff[i + 1].removed) { + var swap = diff[i]; + diff[i] = diff[i + 1]; + diff[i + 1] = swap; } - result.textContent = ''; - result.appendChild(fragment); + var node; + if (diff[i].removed) { + node = document.createElement("del"); + node.classList.add("change"); + const wrapper = node.appendChild(document.createElement("span")); + wrapper.appendChild(document.createTextNode(diff[i].value)); + } else if (diff[i].added) { + node = document.createElement("ins"); + node.classList.add("change"); + const wrapper = node.appendChild(document.createElement("span")); + wrapper.appendChild(document.createTextNode(diff[i].value)); + } else { + node = document.createTextNode(diff[i].value); + } + fragment.appendChild(node); + } - // Jump at start - inputs.current = 0; - next_diff(); + result.textContent = ""; + result.appendChild(fragment); + + // Jump at start + inputs.current = 0; + next_diff(); } window.onload = function () { - - - /* Convert what is options from UTC time.time() to local browser time */ - var diffList = document.getElementById("diff-version"); - if (typeof (diffList) != 'undefined' && diffList != null) { - for (var option of diffList.options) { - var dateObject = new Date(option.value * 1000); - option.label = dateObject.toLocaleString(); - } + /* Convert what is options from UTC time.time() to local browser time */ + var diffList = document.getElementById("diff-version"); + if (typeof diffList != "undefined" && diffList != null) { + for (var option of diffList.options) { + var dateObject = new Date(option.value * 1000); + option.label = dateObject.toLocaleString(); } - - /* Set current version date as local time in the browser also */ - var current_v = document.getElementById("current-v-date"); - var dateObject = new Date(newest_version_timestamp*1000); - current_v.innerHTML = dateObject.toLocaleString(); - onDiffTypeChange(document.querySelector('#settings [name="diff_type"]:checked')); - changed(); + } + + /* Set current version date as local time in the browser also */ + var current_v = document.getElementById("current-v-date"); + var dateObject = new Date(newest_version_timestamp * 1000); + current_v.innerHTML = dateObject.toLocaleString(); + onDiffTypeChange( + document.querySelector('#settings [name="diff_type"]:checked'), + ); + changed(); }; -a.onpaste = a.onchange = - b.onpaste = b.onchange = changed; +a.onpaste = a.onchange = b.onpaste = b.onchange = changed; -if ('oninput' in a) { - a.oninput = b.oninput = changed; +if ("oninput" in a) { + a.oninput = b.oninput = changed; } else { - a.onkeyup = b.onkeyup = changed; + a.onkeyup = b.onkeyup = changed; } function onDiffTypeChange(radio) { - window.diffType = radio.value; -// Not necessary -// document.title = "Diff " + radio.value.slice(4); + window.diffType = radio.value; + // Not necessary + // document.title = "Diff " + radio.value.slice(4); } -var radio = document.getElementsByName('diff_type'); +var radio = document.getElementsByName("diff_type"); for (var i = 0; i < radio.length; i++) { - radio[i].onchange = function (e) { - onDiffTypeChange(e.target); - changed(); - } -} - -document.getElementById('ignoreWhitespace').onchange = function (e) { + radio[i].onchange = function (e) { + onDiffTypeChange(e.target); changed(); + }; } +document.getElementById("ignoreWhitespace").onchange = function (e) { + changed(); +}; -var inputs = document.getElementsByClassName('change'); +var inputs = document.getElementsByClassName("change"); inputs.current = 0; - function next_diff() { - - var element = inputs[inputs.current]; - var headerOffset = 80; - var elementPosition = element.getBoundingClientRect().top; - var offsetPosition = elementPosition - headerOffset + window.scrollY; - - window.scrollTo({ - top: offsetPosition, - behavior: "smooth" - }); - - inputs.current++; - if (inputs.current >= inputs.length) { - inputs.current = 0; - } + var element = inputs[inputs.current]; + var headerOffset = 80; + var elementPosition = element.getBoundingClientRect().top; + var offsetPosition = elementPosition - headerOffset + window.scrollY; + + window.scrollTo({ + top: offsetPosition, + behavior: "smooth", + }); + + inputs.current++; + if (inputs.current >= inputs.length) { + inputs.current = 0; + } } diff --git a/changedetectionio/static/js/toggle-theme.js b/changedetectionio/static/js/toggle-theme.js new file mode 100644 index 00000000..5147edd9 --- /dev/null +++ b/changedetectionio/static/js/toggle-theme.js @@ -0,0 +1,24 @@ +/** + * @file + * Toggles theme between light and dark mode. + */ +$(document).ready(function () { + const button = document.getElementsByClassName("toggle-theme")[0]; + + button.onclick = () => { + const htmlElement = document.getElementsByTagName("html"); + const isDarkMode = htmlElement[0].dataset.darkmode === "true"; + htmlElement[0].dataset.darkmode = !isDarkMode; + if (isDarkMode) { + button.classList.remove("dark"); + setCookieValue(false); + } else { + button.classList.add("dark"); + setCookieValue(true); + } + }; + + const setCookieValue = (value) => { + document.cookie = `css_dark_mode=${value};max-age=31536000` + } +}); diff --git a/changedetectionio/static/styles/diff.css b/changedetectionio/static/styles/diff.css index f655bbc7..394aa4fc 100644 --- a/changedetectionio/static/styles/diff.css +++ b/changedetectionio/static/styles/diff.css @@ -1,5 +1,130 @@ +/** + * CSS custom properties (aka variables). + */ +:root { + --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-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: #a00; + --color-error-input: #ffebeb; + --color-error-list: #dd0000; + --color-table-background: var(--color-background); + --color-table-stripe: var(--color-grey-900); + --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: #e70069; + --color-background-new-watch-form: rgba(0, 0, 0, 0.05); + --color-background-new-watch-input: var(--color-white); + --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-grey-350); + --color-text-menu-link: var(--color-grey-500); + --color-background-menu-link-hover: var(--color-grey-850); + --color-text-menu-link-hover: var(--color-grey-300); + --color-shadow-jump: var(--color-grey-500); + --color-icon-github: var(--color-black); + --color-icon-github-hover: var(--color-grey-300); } + +html[data-darkmode="true"] { + --color-link: #59bdfb; + --color-text: var(--color-white); + --color-background-gradient-first: #3f90a5; + --color-background-gradient-second: #1e316c; + --color-background-gradient-third: #4d2c64; + --color-background-new-watch-input: var(--color-grey-100); + --color-text-new-watch-input: var(--color-text); + --color-background-table-thead: var(--color-grey-200); + --color-table-background: var(--color-grey-300); + --color-table-stripe: var(--color-grey-325); + --color-background: var(--color-grey-300); + --color-text-menu-heading: var(--color-grey-850); + --color-text-menu-link: var(--color-grey-800); + --color-border-table-cell: var(--color-grey-400); + --color-text-tab-active: var(--color-text); + --color-border-input: var(--color-grey-400); + --color-shadow-input: var(--color-grey-50); + --color-background-input: var(--color-grey-350); + --color-text-input-description: var(--color-grey-600); + --color-text-input-placeholder: var(--color-grey-600); + --color-text-watch-tag-list: #fa3e92; + --color-background-code: var(--color-grey-200); + --color-background-tab: rgba(0, 0, 0, 0.2); + --color-background-tab-hover: rgba(0, 0, 0, 0.5); + --color-background-snapshot-age: var(--color-grey-200); + --color-shadow-jump: var(--color-grey-200); + --color-icon-github: var(--color-white); + --color-icon-github-hover: var(--color-grey-700); } + html[data-darkmode="true"] .watch-controls img { + opacity: 0.4; } + html[data-darkmode="true"] .icon-spread { + filter: hue-rotate(-10deg) brightness(1.5); } + html[data-darkmode="true"] .watch-table .title-col a[target="_blank"]::after, + html[data-darkmode="true"] .watch-table .current-diff-url::after { + filter: invert(0.5) hue-rotate(10deg) brightness(2); } + #diff-ui { - background: #fff; + background: var(--color-background); padding: 2em; margin-left: 1em; margin-right: 1em; @@ -45,6 +170,10 @@ ins { margin-left: 1em; display: inline-block; font-weight: normal; } + #settings del { + padding: 0.5em; } + #settings ins { + padding: 0.5em; } .source { position: absolute; diff --git a/changedetectionio/static/styles/diff.scss b/changedetectionio/static/styles/diff.scss deleted file mode 100644 index 08ae4bdb..00000000 --- a/changedetectionio/static/styles/diff.scss +++ /dev/null @@ -1,96 +0,0 @@ -#diff-ui { - - background: #fff; - padding: 2em; - margin-left: 1em; - margin-right: 1em; - border-radius: 5px; - font-size: 11px; - - table { - table-layout: fixed; - width: 100%; - } - td { - padding: 3px 4px; - border: 1px solid transparent; - vertical-align: top; - font: 1em monospace; - text-align: left; - } - pre { - white-space: pre-wrap; - } -} -h1 { - display: inline; - font-size: 100%; -} -del { - text-decoration: none; - color: #b30000; - background: #fadad7; -} - -ins { - background: #eaf2c2; - color: #406619; - text-decoration: none; -} - -#result { - white-space: pre-wrap; -} - -#settings { - background: rgba(0,0,0,.05); - padding: 1em; - border-radius: 10px; - margin-bottom: 1em; - color: #fff; - font-size: 80%; - label { - margin-left: 1em; - display: inline-block; - font-weight: normal; - } -} - -.source { - position: absolute; - right: 1%; - top: .2em; -} - -@-moz-document url-prefix() { - body { - height: 99%; /* Hide scroll bar in Firefox */ - } -} - -td#diff-col div { - text-align: justify; - white-space: pre-wrap; -} - -.ignored { - background-color: #ccc; - /* border: #0d91fa 1px solid; */ - opacity: 0.7; -} - -.triggered { - background-color: #1b98f8; -} - -/* ignored and triggered? make it obvious error */ -.ignored.triggered { - background-color: #ff0000; -} - -.tab-pane-inner#screenshot { - text-align: center; - img { - max-width: 99%; - } -} \ No newline at end of file diff --git a/changedetectionio/static/styles/package.json b/changedetectionio/static/styles/package.json index 92862d71..e83a71d3 100644 --- a/changedetectionio/static/styles/package.json +++ b/changedetectionio/static/styles/package.json @@ -4,7 +4,8 @@ "description": "", "main": "index.js", "scripts": { - "build": "node-sass styles.scss -o .;node-sass diff.scss -o ." + "watch": "node-sass -w scss -o .", + "build": "node-sass scss -o ." }, "author": "", "license": "ISC", diff --git a/changedetectionio/static/styles/scss/diff.scss b/changedetectionio/static/styles/scss/diff.scss new file mode 100644 index 00000000..7c219f20 --- /dev/null +++ b/changedetectionio/static/styles/scss/diff.scss @@ -0,0 +1,117 @@ +@import "parts/_variables.scss"; + +#diff-ui { + + background: var(--color-background); + padding: 2em; + margin-left: 1em; + margin-right: 1em; + border-radius: 5px; + font-size: 11px; + + table { + table-layout: fixed; + width: 100%; + } + + td { + padding: 3px 4px; + border: 1px solid transparent; + vertical-align: top; + font: 1em monospace; + text-align: left; + } + + pre { + white-space: pre-wrap; + } +} + +h1 { + display: inline; + font-size: 100%; +} + +del { + text-decoration: none; + color: #b30000; + background: #fadad7; +} + +ins { + background: #eaf2c2; + color: #406619; + text-decoration: none; +} + +#result { + white-space: pre-wrap; + + .change { + span {} + } +} + +#settings { + background: rgba(0, 0, 0, .05); + padding: 1em; + border-radius: 10px; + margin-bottom: 1em; + color: #fff; + font-size: 80%; + + label { + margin-left: 1em; + display: inline-block; + font-weight: normal; + } + + del { + padding: 0.5em; + } + + ins { + padding: 0.5em; + } +} + +.source { + position: absolute; + right: 1%; + top: .2em; +} + +@-moz-document url-prefix() { + body { + height: 99%; + /* Hide scroll bar in Firefox */ + } +} + +td#diff-col div { + text-align: justify; + white-space: pre-wrap; +} + +.ignored { + background-color: #ccc; + /* border: #0d91fa 1px solid; */ + opacity: 0.7; +} + +.triggered { + background-color: #1b98f8; +} + +/* ignored and triggered? make it obvious error */ +.ignored.triggered { + background-color: #ff0000; +} + +.tab-pane-inner#screenshot { + text-align: center; + + img { + max-width: 99%; + } +} diff --git a/changedetectionio/static/styles/parts/_arrows.scss b/changedetectionio/static/styles/scss/parts/_arrows.scss similarity index 100% rename from changedetectionio/static/styles/parts/_arrows.scss rename to changedetectionio/static/styles/scss/parts/_arrows.scss diff --git a/changedetectionio/static/styles/parts/browser-steps.scss b/changedetectionio/static/styles/scss/parts/_browser-steps.scss similarity index 97% rename from changedetectionio/static/styles/parts/browser-steps.scss rename to changedetectionio/static/styles/scss/parts/_browser-steps.scss index fda60bbe..d43720cc 100644 --- a/changedetectionio/static/styles/parts/browser-steps.scss +++ b/changedetectionio/static/styles/scss/parts/_browser-steps.scss @@ -90,5 +90,6 @@ &:hover { cursor: pointer; } + color: var(--color-grey-400); } } \ No newline at end of file diff --git a/changedetectionio/static/styles/parts/spinners.scss b/changedetectionio/static/styles/scss/parts/_spinners.scss similarity index 100% rename from changedetectionio/static/styles/parts/spinners.scss rename to changedetectionio/static/styles/scss/parts/_spinners.scss diff --git a/changedetectionio/static/styles/scss/parts/_variables.scss b/changedetectionio/static/styles/scss/parts/_variables.scss new file mode 100644 index 00000000..ba6c8423 --- /dev/null +++ b/changedetectionio/static/styles/scss/parts/_variables.scss @@ -0,0 +1,155 @@ +/** + * CSS custom properties (aka variables). + */ + +:root { + --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-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: #a00; + --color-error-input: #ffebeb; + --color-error-list: #dd0000; + --color-table-background: var(--color-background); + --color-table-stripe: var(--color-grey-900); + --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: #e70069; + --color-background-new-watch-form: rgba(0, 0, 0, 0.05); + --color-background-new-watch-input: var(--color-white); + --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-grey-350); + --color-text-menu-link: var(--color-grey-500); + --color-background-menu-link-hover: var(--color-grey-850); + --color-text-menu-link-hover: var(--color-grey-300); + + --color-shadow-jump: var(--color-grey-500); + --color-icon-github: var(--color-black); + --color-icon-github-hover: var(--color-grey-300); +} + +html[data-darkmode="true"] { + --color-link: #59bdfb; + --color-text: var(--color-white); + + --color-background-gradient-first: #3f90a5; + --color-background-gradient-second: #1e316c; + --color-background-gradient-third: #4d2c64; + + --color-background-new-watch-input: var(--color-grey-100); + --color-text-new-watch-input: var(--color-text); + --color-background-table-thead: var(--color-grey-200); + --color-table-background: var(--color-grey-300); + --color-table-stripe: var(--color-grey-325); + --color-background: var(--color-grey-300); + --color-text-menu-heading: var(--color-grey-850); + --color-text-menu-link: var(--color-grey-800); + --color-border-table-cell: var(--color-grey-400); + --color-text-tab-active: var(--color-text); + + --color-border-input: var(--color-grey-400); + --color-shadow-input: var(--color-grey-50); + --color-background-input: var(--color-grey-350); + --color-text-input-description: var(--color-grey-600); + --color-text-input-placeholder: var(--color-grey-600); + --color-text-watch-tag-list: #fa3e92; + + --color-background-code: var(--color-grey-200); + + --color-background-tab: rgba(0, 0, 0, 0.2); + --color-background-tab-hover: rgba(0, 0, 0, 0.5); + + --color-background-snapshot-age: var(--color-grey-200); + --color-shadow-jump: var(--color-grey-200); + --color-icon-github: var(--color-white); + --color-icon-github-hover: var(--color-grey-700); + + // Anything that can't be manipulated through variables follows. + .watch-controls { + img { + opacity: 0.4; + } + } + + .icon-spread { + filter: hue-rotate(-10deg) brightness(1.5); + } + + .watch-table { + + .title-col a[target="_blank"]::after, + .current-diff-url::after { + filter: invert(.5) hue-rotate(10deg) brightness(2); + } + } +} diff --git a/changedetectionio/static/styles/styles.scss b/changedetectionio/static/styles/scss/styles.scss similarity index 63% rename from changedetectionio/static/styles/styles.scss rename to changedetectionio/static/styles/scss/styles.scss index f1ce0f25..82c11010 100644 --- a/changedetectionio/static/styles/styles.scss +++ b/changedetectionio/static/styles/scss/styles.scss @@ -1,42 +1,107 @@ /* * -- BASE STYLES -- - * Most of these are inherited from Base, but I want to change a few. -nvm use v14.18.1 && npm install && npm run build - * or npm run watch */ -@import "parts/spinners"; -@import "parts/browser-steps"; -@import "parts/_arrows.scss"; +@import "parts/_variables"; +@import "parts/_spinners"; +@import "parts/_browser-steps"; +@import "parts/_arrows"; body { - color: #333; - background: #262626; + color: var(--color-text); + background: var(--color-background-page); +} + +.visually-hidden { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; } .pure-table-even { - background: #fff; + background: var(--color-background); } /* Some styles from https://css-tricks.com/ */ a { text-decoration: none; - color: #1b98f8; + color: var(--color-link); } a.github-link { - color: #fff; + color: var(--color-icon-github); + margin: 0 1rem 0 0.5rem; + + svg { + fill: currentColor; + } + + &:hover { + color: var(--color-icon-github-hover); + } +} + +button.toggle-theme { + width: 4rem; + background: transparent; + border: none; + cursor: pointer; + + color: var(--color-icon-github); + + &:hover { + color: var(--color-icon-github-hover); + } + + svg { + fill: currentColor; + } + + .icon-light { + display: block; + } + + .icon-dark { + display: none; + } + + &.dark { + .icon-light { + display: none; + } + + .icon-dark { + display: block; + } + } } .pure-menu-horizontal { - background: #fff; + background: var(--color-background); padding: 5px; display: flex; justify-content: space-between; - border-bottom: 2px solid #ed5900; + border-bottom: 2px solid var(--color-menu-accent); align-items: center; } +.pure-menu-heading { + color: var(--color-text-menu-heading); +} + +.pure-menu-link { + color: var(--color-text-menu-link); + + &:hover { + background-color: var(--color-background-menu-link-hover); + color: var(--color-text-menu-link-hover); + } +} + section.content { padding-top: 5em; padding-bottom: 1em; @@ -47,7 +112,8 @@ section.content { } code { - background: #eee; + background: var(--color-background-code); + color: var(--color-text); } /* table related */ @@ -60,7 +126,7 @@ code { } .error { - color: #a00; + color: var(--color-error); } td { @@ -74,11 +140,14 @@ code { th { white-space: nowrap; + a { font-weight: normal; + &.active { font-weight: bolder; } + &.inactive { .arrow { display: none; @@ -87,14 +156,15 @@ code { } } - .title-col a[target="_blank"]::after, .current-diff-url::after { + .title-col a[target="_blank"]::after, + .current-diff-url::after { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==); margin: 0 3px 0 5px; } } .watch-tag-list { - color: #e70069; + color: var(--color-text-watch-tag-list); white-space: nowrap; } @@ -126,10 +196,11 @@ code { body:after { content: ""; - background: linear-gradient(130deg, #5ad8f7, #2f50af 41.07%, #9150bf 84.05%); + background: linear-gradient(130deg, var(--color-background-gradient-first), var(--color-background-gradient-second) 41.07%, var(--color-background-gradient-third) 84.05%); } -body:after, body:before { +body:after, +body:before { display: block; height: 650px; position: absolute; @@ -149,7 +220,8 @@ body::before { background-size: cover } -body:after, body:before { +body:after, +body:before { -webkit-clip-path: polygon(100% 0, 0 0, 0 77.5%, 1% 77.4%, 2% 77.1%, 3% 76.6%, 4% 75.9%, 5% 75.05%, 6% 74.05%, 7% 72.95%, 8% 71.75%, 9% 70.55%, 10% 69.3%, 11% 68.05%, 12% 66.9%, 13% 65.8%, 14% 64.8%, 15% 64%, 16% 63.35%, 17% 62.85%, 18% 62.6%, 19% 62.5%, 20% 62.65%, 21% 63%, 22% 63.5%, 23% 64.2%, 24% 65.1%, 25% 66.1%, 26% 67.2%, 27% 68.4%, 28% 69.65%, 29% 70.9%, 30% 72.15%, 31% 73.3%, 32% 74.35%, 33% 75.3%, 34% 76.1%, 35% 76.75%, 36% 77.2%, 37% 77.45%, 38% 77.5%, 39% 77.3%, 40% 76.95%, 41% 76.4%, 42% 75.65%, 43% 74.75%, 44% 73.75%, 45% 72.6%, 46% 71.4%, 47% 70.15%, 48% 68.9%, 49% 67.7%, 50% 66.55%, 51% 65.5%, 52% 64.55%, 53% 63.75%, 54% 63.15%, 55% 62.75%, 56% 62.55%, 57% 62.5%, 58% 62.7%, 59% 63.1%, 60% 63.7%, 61% 64.45%, 62% 65.4%, 63% 66.45%, 64% 67.6%, 65% 68.8%, 66% 70.05%, 67% 71.3%, 68% 72.5%, 69% 73.6%, 70% 74.65%, 71% 75.55%, 72% 76.35%, 73% 76.9%, 74% 77.3%, 75% 77.5%, 76% 77.45%, 77% 77.25%, 78% 76.8%, 79% 76.2%, 80% 75.4%, 81% 74.45%, 82% 73.4%, 83% 72.25%, 84% 71.05%, 85% 69.8%, 86% 68.55%, 87% 67.35%, 88% 66.2%, 89% 65.2%, 90% 64.3%, 91% 63.55%, 92% 63%, 93% 62.65%, 94% 62.5%, 95% 62.55%, 96% 62.8%, 97% 63.3%, 98% 63.9%, 99% 64.75%, 100% 65.7%); clip-path: polygon(100% 0, 0 0, 0 77.5%, 1% 77.4%, 2% 77.1%, 3% 76.6%, 4% 75.9%, 5% 75.05%, 6% 74.05%, 7% 72.95%, 8% 71.75%, 9% 70.55%, 10% 69.3%, 11% 68.05%, 12% 66.9%, 13% 65.8%, 14% 64.8%, 15% 64%, 16% 63.35%, 17% 62.85%, 18% 62.6%, 19% 62.5%, 20% 62.65%, 21% 63%, 22% 63.5%, 23% 64.2%, 24% 65.1%, 25% 66.1%, 26% 67.2%, 27% 68.4%, 28% 69.65%, 29% 70.9%, 30% 72.15%, 31% 73.3%, 32% 74.35%, 33% 75.3%, 34% 76.1%, 35% 76.75%, 36% 77.2%, 37% 77.45%, 38% 77.5%, 39% 77.3%, 40% 76.95%, 41% 76.4%, 42% 75.65%, 43% 74.75%, 44% 73.75%, 45% 72.6%, 46% 71.4%, 47% 70.15%, 48% 68.9%, 49% 67.7%, 50% 66.55%, 51% 65.5%, 52% 64.55%, 53% 63.75%, 54% 63.15%, 55% 62.75%, 56% 62.55%, 57% 62.5%, 58% 62.7%, 59% 63.1%, 60% 63.7%, 61% 64.45%, 62% 65.4%, 63% 66.45%, 64% 67.6%, 65% 68.8%, 66% 70.05%, 67% 71.3%, 68% 72.5%, 69% 73.6%, 70% 74.65%, 71% 75.55%, 72% 76.35%, 73% 76.9%, 74% 77.3%, 75% 77.5%, 76% 77.45%, 77% 77.25%, 78% 76.8%, 79% 76.2%, 80% 75.4%, 81% 74.45%, 82% 73.4%, 83% 72.25%, 84% 71.05%, 85% 69.8%, 86% 68.55%, 87% 67.35%, 88% 66.2%, 89% 65.2%, 90% 64.3%, 91% 63.55%, 92% 63%, 93% 62.65%, 94% 62.5%, 95% 62.55%, 96% 62.8%, 97% 63.3%, 98% 63.9%, 99% 64.75%, 100% 65.7%) } @@ -165,51 +237,57 @@ body:after, body:before { display: block; } +.pure-button-primary, +a.pure-button-primary, +.pure-button-selected, +a.pure-button-selected { + background-color: var(--color-background-button-primary); +} .button-secondary { - color: white; + color: var(--color-text-button); border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-success { - background: rgb(28, 184, 65); - /* this is a green */ + background: var(--color-background-button-success); } .button-tag { - background: rgb(99, 99, 99); - color: #fff; + background: var(--color-background-button-tag); + color: var(--color-text-button); font-size: 65%; border-bottom-left-radius: initial; border-bottom-right-radius: initial; &.active { - background: #9c9c9c; + background: var(--color-background-button-tag-active); font-weight: bold; } } .button-error { - background: rgb(202, 60, 60); - /* this is a maroon */ + background: var(--color-background-button-error); + color: var(--color-text-button-error); } .button-warning { - background: rgb(223, 117, 20); - /* this is an orange */ + background: var(--color-background-button-warning); + color: var(--color-text-button-warning); } .button-secondary { - background: rgb(66, 184, 221); - /* this is a light blue */ + background: var(--color-background-button-secondary); } - .button-cancel { - background: rgb(200, 200, 200); - /* this is a green */ + background: var(--color-background-button-cancel); +} + +#save_button { + margin-right: 1rem; } .messages { @@ -217,50 +295,56 @@ body:after, body:before { list-style: none; padding: 1em; border-radius: 10px; - color: #fff; + color: var(--color-text-messages); font-weight: bold; &.message { - background: rgba(255, 255, 255, .2); + background: var(--color-background-messages-message); } &.error { - background: rgba(255, 1, 1, .5); + background: var(--color-background-messages-error); } &.notice { - background: rgba(255, 255, 255, .5); + background: var(--color-background-messages-notice); } } &.with-share-link { - > *:hover { + >*:hover { cursor: pointer; } } } +.notifications-wrapper { + padding: 0.5rem 0 1rem 0; +} + #notification-customisation { - border: 1px solid #ccc; + border: 1px solid var(--color-border-notification); padding: 0.5rem; border-radius: 5px; } #notification-error-log { - border: 1px solid #ccc; + border: 1px solid var(--color-border-notification); padding: 1rem; border-radius: 5px; overflow-wrap: break-word; } #token-table { - &.pure-table td, &.pure-table th { + + &.pure-table td, + &.pure-table th { font-size: 80%; } } #new-watch-form { - background: rgba(0, 0, 0, .05); + background: var(--color-background-new-watch-form); padding: 1em; border-radius: 10px; margin-bottom: 1em; @@ -270,19 +354,25 @@ body:after, body:before { margin-bottom: 5px; } + input:not(.pure-button) { + background-color: var(--color-background-new-watch-input); + color: var(--color-text-new-watch-input); + } + .label { display: none; } legend { - color: #fff; + color: var(--color-text-legend); font-weight: bold; } #watch-add-wrapper-zone { - > div { + >div { display: inline-block; } + @media only screen and (max-width: 760px) { #url { width: 100%; @@ -300,15 +390,15 @@ body:after, body:before { position: fixed; left: 0px; top: 120px; - background: #fff; + background: var(--color-background); padding: 10px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; - box-shadow: 5px 0 5px -2px #888; + box-shadow: 1px 1px 4px var(--color-shadow-jump); a { - color: #1b98f8; - cursor: grabbing; + color: var(--color-link); + cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; @@ -319,8 +409,8 @@ body:after, body:before { footer { padding: 10px; - background: #fff; - color: #444; + background: var(--color-background); + color: var(--color-text-footer); text-align: center; } @@ -343,7 +433,7 @@ footer { position: absolute; top: 60px; font-size: 65%; - background: #fff; + background: var(--color-background); padding: 10px; &#left-sticky { @@ -362,10 +452,12 @@ footer { } #new-version-text a { - color: #e07171; + color: var(--color-link-new-version); } .watch-controls { + color: #f8321b; + .state-on { img { opacity: 0.8; @@ -383,7 +475,6 @@ footer { opacity: 0.8; } } - } .monospaced-textarea { @@ -392,7 +483,8 @@ footer { font-family: monospace; white-space: pre; overflow-wrap: normal; - overflow-x: scroll; + // No scrollbars until needed. + overflow-x: auto; } } @@ -407,7 +499,9 @@ footer { } } - .pure-control-group, .pure-group, .pure-controls { + .pure-control-group, + .pure-group, + .pure-controls { padding-bottom: 1em; div { @@ -415,28 +509,32 @@ footer { } .checkbox { - > * { + >* { display: inline; vertical-align: middle; } - > label { + >label { padding-left: 5px; } } + + legend { + color: var(--color-text-legend); + } } /* The input fields with errors */ .error { input { - background-color: #ffebeb; + background-color: var(--color-error-input); } } /* The list of errors */ ul.errors { padding: .5em .6em; - border: 1px solid #dd0000; + border: 1px solid var(--color-error-list); border-radius: 4px; vertical-align: middle; -webkit-box-sizing: border-box; @@ -444,7 +542,7 @@ footer { li { margin-left: 1em; - color: #dd0000; + color: var(--color-error-list); } } @@ -462,7 +560,7 @@ footer { list-style: none; li { - > * { + >* { display: inline-block; } } @@ -471,21 +569,25 @@ footer { } -@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { +@media only screen and (max-width: 760px), +(min-device-width: 768px) and (max-device-width: 1024px) { .box { max-width: 95% } + .edit-form { padding: 0.5em; margin: 0; } + #nav-menu { overflow-x: scroll; } } -@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 800px) { +@media only screen and (max-width: 760px), +(min-device-width: 768px) and (max-device-width: 800px) { div.sticky-tab#hosted-sticky { top: 60px; @@ -514,24 +616,29 @@ footer { and also iPads specifically. */ .watch-table { + /* Force table to not be like tables anymore */ - thead, tbody, th, td, tr { + thead, + tbody, + th, + td, + tr { display: block; } .last-checked { - > span { + >span { vertical-align: middle; } } .last-checked::before { - color: #555; + color: var(--color-last-checked); content: "Last Checked "; } .last-changed::before { - color: #555; + color: var(--color-last-checked); content: "Last Changed "; } @@ -547,15 +654,17 @@ footer { left: -9999px; } - .pure-table td, .pure-table th { + .pure-table td, + .pure-table th { border: none; } td { /* Behave like a "row" */ border: none; - border-bottom: 1px solid #eee; + border-bottom: 1px solid var(--color-border-watch-table-cell); vertical-align: middle; + &:before { /* Top/left values mimic padding */ top: 6px; @@ -568,11 +677,11 @@ footer { &.pure-table-striped { tr { - background-color: #fff; + background-color: var(--color-table-background); } tr:nth-child(2n-1) { - background-color: #eee; + background-color: var(--color-table-stripe); } tr:nth-child(2n-1) td { @@ -583,12 +692,66 @@ footer { } } +.pure-table { + border-color: var(--color-border-table-cell); + + thead { + background-color: var(--color-background-table-thead); + color: var(--color-text); + } + + td, + th { + border-left-color: var(--color-border-table-cell); + } +} + +.pure-table-striped { + tr:nth-child(2n-1) { + td { + background-color: var(--color-table-stripe); + } + } +} + +.pure-form input[type=color], +.pure-form input[type=date], +.pure-form input[type=datetime-local], +.pure-form input[type=datetime], +.pure-form input[type=email], +.pure-form input[type=month], +.pure-form input[type=number], +.pure-form input[type=password], +.pure-form input[type=search], +.pure-form input[type=tel], +.pure-form input[type=text], +.pure-form input[type=time], +.pure-form input[type=url], +.pure-form input[type=week], +.pure-form select, +.pure-form textarea { + border: var(--color-border-input); + box-shadow: inset 0 1px 3px var(--color-shadow-input); + background-color: var(--color-background-input); + color: var(--color-text-input); + + &:active { + background-color: var(--color-background-input); + } +} + +input::placeholder, +textarea::placeholder { + color: var(--color-text-input-placeholder); +} + /** Desktop vs mobile input field strategy - We dont use 'size' with
  • tgram:// only supports very limited HTML and can fail when extra tags are sent, read more here (or use plaintext/markdown format)
    • -
    - Send test notification -{% if emailprefix %} - Add email -{% endif %} - Notification debug logs +
    + Send test notification + {% if emailprefix %} + Add email + {% endif %} + Notification debug logs +
    diff --git a/changedetectionio/templates/base.html b/changedetectionio/templates/base.html index c9543259..e67f8df8 100644 --- a/changedetectionio/templates/base.html +++ b/changedetectionio/templates/base.html @@ -1,121 +1,152 @@ - - - - - - + + + + + + + Change Detection{{extra_title}} - - - + + + {% if extra_stylesheets %} - {% for m in extra_stylesheets %} - - {% endfor %} + {% for m in extra_stylesheets %} + + {% endfor %} {% endif %} - - - - - - - - - + + + + + + + + + + - - - - -
    - - -{% if hosted_sticky %}{% endif %} -{% if left_sticky %} {% endif %} -{% if right_sticky %}
    {{ right_sticky }}
    {% endif %} -
    -
    + {% if hosted_sticky %} + + {% endif %} + {% if left_sticky %} + + {% endif %} + {% if right_sticky %} +
    {{ right_sticky }}
    + {% endif %} +
    +
    {% block header %}{% endblock %} -
    +
    - {% with messages = get_flashed_messages(with_categories=true) %} - {% if messages %} -
      - {% for category, message in messages %} -
    • {{ message }}
      • - {% endfor %} + {% with messages = get_flashed_messages(with_categories = true) %} + {% if + messages %} +
        + {% for category, message in messages %} +
      • {{ message }}
        • + {% endfor %}
      {% endif %} - {% endwith %} - - {% if session['share-link'] %} + {% endwith %} + {% if session['share-link'] %}
        -
      • Share this link: {{ session['share-link'] }}
        • +
      • + Share this link: + {{ session['share-link'] }} + +
      - {% endif %} - - {% block content %} - - {% endblock %} -
    + {% endif %} + {% block content %}{% endblock %} + + + - diff --git a/changedetectionio/templates/clear_all_history.html b/changedetectionio/templates/clear_all_history.html index 379b0b7c..a1a18d29 100644 --- a/changedetectionio/templates/clear_all_history.html +++ b/changedetectionio/templates/clear_all_history.html @@ -1,32 +1,49 @@ -{% extends 'base.html' %} - -{% block content %} +{% extends 'base.html' %} {% block content %}
    -
    -
    - -
    -
    - This will remove version history (snapshots) for ALL watches, but keep your list of URLs!
    - You may like to use the BACKUP link first.
    -
    -
    -
    - - - Type in the word clear to confirm that you understand. -
    -
    -
    - -
    -
    -
    - Cancel -
    -
    +
    + + +
    +
    + This will remove version history (snapshots) for ALL watches, but keep + your list of URLs!
    + You may like to use the BACKUP link first.
    +
    +
    +
    + + + Type in the word clear to confirm that you + understand. +
    +
    +
    + +
    +
    +
    + Cancel +
    +
    -
    +
    {% endblock %} diff --git a/changedetectionio/templates/svgs/dark-mode-toggle-icon.svg b/changedetectionio/templates/svgs/dark-mode-toggle-icon.svg new file mode 100644 index 00000000..e83c83a2 --- /dev/null +++ b/changedetectionio/templates/svgs/dark-mode-toggle-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/changedetectionio/templates/svgs/github.svg b/changedetectionio/templates/svgs/github.svg new file mode 100644 index 00000000..31eef6df --- /dev/null +++ b/changedetectionio/templates/svgs/github.svg @@ -0,0 +1,3 @@ + diff --git a/changedetectionio/templates/svgs/light-mode-toggle-icon.svg b/changedetectionio/templates/svgs/light-mode-toggle-icon.svg new file mode 100644 index 00000000..4fa0e4ca --- /dev/null +++ b/changedetectionio/templates/svgs/light-mode-toggle-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/changedetectionio/templates/watch-overview.html b/changedetectionio/templates/watch-overview.html index b1cb87ab..5338b949 100644 --- a/changedetectionio/templates/watch-overview.html +++ b/changedetectionio/templates/watch-overview.html @@ -80,15 +80,15 @@ {{ loop.index }} {% if not watch.paused %} - Pause checks + Pause checks {% else %} - UnPause checks + UnPause checks {% endif %} - Mute notifications + Mute notifications {{watch.title if watch.title is not none and watch.title|length > 0 else watch.url}} - + {%if watch.fetch_backend == "html_webdriver" %}{% endif %} @@ -111,13 +111,13 @@ {% if watch.uuid in queued_uuids %}Queued{% else %}Recheck{% endif %} - Edit + class="recheck pure-button pure-button-primary">{% if watch.uuid in queued_uuids %}Queued{% else %}Recheck{% endif %} + Edit {% if watch.history_n >= 2 %} - Diff + Diff {% else %} {% if watch.history_n == 1 or (watch.history_n ==0 and watch.error_text_ctime )%} - Preview + Preview {% endif %} {% endif %}