diff --git a/changedetectionio/static/js/settings.js b/changedetectionio/static/js/settings.js index 27b07dcc..9ce51d07 100644 --- a/changedetectionio/static/js/settings.js +++ b/changedetectionio/static/js/settings.js @@ -9,9 +9,5 @@ window.addEventListener("load", (event) => { x.style.display = "block"; } } - - document.getElementById("toggle-customise-notifications").onclick = function () { - toggleVisible("notification-customisation"); - }; }); diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css index f59ccd39..f2850226 100644 --- a/changedetectionio/static/styles/styles.css +++ b/changedetectionio/static/styles/styles.css @@ -1,403 +1 @@ -/* - * -- BASE STYLES -- - * Most of these are inherited from Base, but I want to change a few. - * npm run scss - */ -body { - color: #333; - background: #262626; } - -.pure-table-even { - background: #fff; } - -/* Some styles from https://css-tricks.com/ */ -a { - text-decoration: none; - color: #1b98f8; } - -a.github-link { - color: #fff; } - -.pure-menu-horizontal { - background: #fff; - padding: 5px; - display: flex; - justify-content: space-between; - border-bottom: 2px solid #ed5900; - align-items: center; } - -section.content { - padding-top: 5em; - padding-bottom: 5em; - flex-direction: column; - display: flex; - align-items: center; - justify-content: center; } - -/* table related */ -.watch-table { - width: 100%; } - .watch-table tr.unviewed { - font-weight: bold; } - .watch-table .error { - color: #a00; } - .watch-table td { - font-size: 80%; - white-space: nowrap; } - .watch-table td.title-col { - word-break: break-all; - white-space: normal; } - .watch-table th { - white-space: nowrap; } - .watch-table .title-col a[target="_blank"]::after, .watch-table .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; - white-space: nowrap; } - -.box { - max-width: 80%; - flex-direction: column; - display: flex; - justify-content: center; } - -#post-list-buttons { - text-align: right; - padding: 0px; - margin: 0px; } - #post-list-buttons li { - display: inline-block; } - #post-list-buttons a { - border-top-left-radius: initial; - border-top-right-radius: initial; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; } - -body:after { - content: ""; - background: linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%); } - -body:after, body:before { - display: block; - height: 600px; - position: absolute; - top: 0; - left: 0; - width: 100%; - z-index: -1; } - -body::after { - opacity: 0.91; } - -body::before { - content: ""; - background-image: url(/static/images/gradient-border.png); } - -body:before { - background-size: cover; } - -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%); } - -.arrow { - border: solid black; - border-width: 0 3px 3px 0; - display: inline-block; - padding: 3px; } - .arrow.right { - transform: rotate(-45deg); - -webkit-transform: rotate(-45deg); } - .arrow.left { - transform: rotate(135deg); - -webkit-transform: rotate(135deg); } - .arrow.up { - transform: rotate(-135deg); - -webkit-transform: rotate(-135deg); } - .arrow.down { - transform: rotate(45deg); - -webkit-transform: rotate(45deg); } - -.button-small { - font-size: 85%; } - -.fetch-error { - padding-top: 1em; - font-size: 60%; - max-width: 400px; - display: block; } - -.button-secondary { - color: white; - border-radius: 4px; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } - -.button-success { - background: #1cb841; - /* this is a green */ } - -.button-tag { - background: #636363; - color: #fff; - font-size: 65%; - border-bottom-left-radius: initial; - border-bottom-right-radius: initial; } - .button-tag.active { - background: #9c9c9c; - font-weight: bold; } - -.button-error { - background: #ca3c3c; - /* this is a maroon */ } - -.button-warning { - background: #df7514; - /* this is an orange */ } - -.button-secondary { - background: #42b8dd; - /* this is a light blue */ } - -.button-cancel { - background: #c8c8c8; - /* this is a green */ } - -.messages li { - list-style: none; - padding: 1em; - border-radius: 10px; - color: #fff; - font-weight: bold; } - .messages li.message { - background: rgba(255, 255, 255, 0.2); } - .messages li.error { - background: rgba(255, 1, 1, 0.5); } - .messages li.notice { - background: rgba(255, 255, 255, 0.5); } - -#notification-customisation { - display: block; - border: 1px solid #ccc; - padding: 1rem; - border-radius: 5px; } - -#toggle-customise-notifications { - cursor: pointer; } - -#token-table.pure-table td, #token-table.pure-table th { - font-size: 80%; } - -#new-watch-form { - background: rgba(0, 0, 0, 0.05); - padding: 1em; - border-radius: 10px; - margin-bottom: 1em; } - #new-watch-form input { - width: auto !important; - display: inline-block; } - #new-watch-form .label { - display: none; } - #new-watch-form legend { - color: #fff; } - -#diff-col { - padding-left: 40px; } - -#diff-jump { - position: fixed; - left: 0px; - top: 120px; - background: #fff; - padding: 10px; - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; - box-shadow: 5px 0 5px -2px #888; } - #diff-jump a { - color: #1b98f8; - cursor: grabbing; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - -o-user-select: none; } - -footer { - padding: 10px; - background: #fff; - color: #444; - text-align: center; } - -#feed-icon { - vertical-align: middle; } - -#top-right-menu { - /* - position: absolute; - right: 0px; - background: linear-gradient(to right, #fff0, #fff 10%); - padding-left: 20px; - padding-right: 10px; - */ } - -.sticky-tab { - position: absolute; - top: 80px; - font-size: 8px; - background: #fff; - padding: 10px; } - .sticky-tab#left-sticky { - left: 0px; } - .sticky-tab#right-sticky { - right: 0px; } - -#new-version-text a { - color: #e07171; } - -.paused-state.state-False img { - opacity: 0.2; } - -.paused-state.state-False:hover img { - opacity: 0.8; } - -.monospaced-textarea textarea { - width: 100%; - font-family: monospace; - white-space: pre; - overflow-wrap: normal; - overflow-x: scroll; } - -.pure-form { - /* The input fields with errors */ - /* The list of errors */ } - .pure-form .pure-control-group, .pure-form .pure-group, .pure-form .pure-controls { - padding-bottom: 1em; } - .pure-form .pure-control-group div, .pure-form .pure-group div, .pure-form .pure-controls div { - margin: 0px; } - .pure-form .error input { - background-color: #ffebeb; } - .pure-form ul.errors { - padding: .5em .6em; - border: 1px solid #dd0000; - border-radius: 4px; - vertical-align: middle; - -webkit-box-sizing: border-box; - box-sizing: border-box; } - .pure-form ul.errors li { - margin-left: 1em; - color: #dd0000; } - .pure-form label { - font-weight: bold; } - .pure-form textarea { - width: 100%; } - .pure-form ul#fetch_backend { - margin: 0px; - list-style: none; } - .pure-form ul#fetch_backend > li > * { - display: inline-block; } - -@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; } } - -/* -Max width before this PARTICULAR table gets nasty -This query will take effect for any screen smaller than 760px -and also iPads specifically. -*/ -@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { - input[type='text'] { - width: 100%; } - .watch-table { - /* Force table to not be like tables anymore */ - /* Force table to not be like tables anymore */ - /* Hide table headers (but not display: none;, for accessibility) */ } - .watch-table thead, .watch-table tbody, .watch-table th, .watch-table td, .watch-table tr { - display: block; } - .watch-table .last-checked::before { - color: #555; - content: "Last Checked "; } - .watch-table .last-changed::before { - color: #555; - content: "Last Changed "; } - .watch-table td.inline { - display: inline-block; } - .watch-table thead tr { - position: absolute; - top: -9999px; - left: -9999px; } - .watch-table .pure-table td, .watch-table .pure-table th { - border: none; } - .watch-table td { - /* Behave like a "row" */ - border: none; - border-bottom: 1px solid #eee; } - .watch-table td:before { - /* Top/left values mimic padding */ - top: 6px; - left: 6px; - width: 45%; - padding-right: 10px; - white-space: nowrap; } - .watch-table.pure-table-striped tr { - background-color: #fff; } - .watch-table.pure-table-striped tr:nth-child(2n-1) { - background-color: #eee; } - .watch-table.pure-table-striped tr:nth-child(2n-1) td { - background-color: inherit; } } - -/** Desktop vs mobile input field strategy -- We dont use 'size' with because `size` is too unreliable to override, and will often push-out -- Rely always on width in CSS -*/ -@media only screen and (min-width: 761px) { - /* m-d is medium-desktop */ - .m-d { - min-width: 80%; } } - -.tabs ul { - margin: 0px; - padding: 0px; - display: block; } - .tabs ul li { - margin-right: 3px; - display: inline-block; - color: #fff; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - background-color: rgba(255, 255, 255, 0.2); } - .tabs ul li.active, .tabs ul li :target { - background-color: #fff; } - .tabs ul li.active a, .tabs ul li :target a { - color: #222; - font-weight: bold; } - .tabs ul li a { - display: block; - padding: 0.8em; - color: #fff; } - -.pure-form-stacked > div:first-child { - display: block; } - -.edit-form { - min-width: 70%; } - .edit-form .tab-pane-inner { - padding: 0px; } - .edit-form .tab-pane-inner:not(:target) { - display: none; } - .edit-form .tab-pane-inner:target { - display: block; } - .edit-form .box-wrap { - position: relative; } - .edit-form .inner { - background: #fff; - padding: 20px; } - .edit-form #actions { - display: block; - background: #fff; } +body{color:#333;background:#262626}.pure-table-even{background:#fff}a{text-decoration:none;color:#1b98f8}a.github-link{color:#fff}.pure-menu-horizontal{background:#fff;padding:5px;display:flex;justify-content:space-between;border-bottom:2px solid #ed5900;align-items:center}section.content{padding-top:5em;padding-bottom:5em;flex-direction:column;display:flex;align-items:center;justify-content:center}.watch-table{width:100%}.watch-table tr.unviewed{font-weight:bold}.watch-table .error{color:#a00}.watch-table td{font-size:80%;white-space:nowrap}.watch-table td.title-col{word-break:break-all;white-space:normal}.watch-table th{white-space:nowrap}.watch-table .title-col a[target="_blank"]::after,.watch-table .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;white-space:nowrap}.box{max-width:80%;flex-direction:column;display:flex;justify-content:center}#post-list-buttons{text-align:right;padding:0;margin:0}#post-list-buttons li{display:inline-block}#post-list-buttons a{border-top-left-radius:initial;border-top-right-radius:initial;border-bottom-left-radius:5px;border-bottom-right-radius:5px}body:after{content:"";background:linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%)}body:after,body:before{display:block;height:600px;position:absolute;top:0;left:0;width:100%;z-index:-1}body::after{opacity:.91}body::before{content:"";background-image:url(/static/images/gradient-border.png)}body:before{background-size:cover}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%)}.arrow{border:solid #000;border-width:0 3px 3px 0;display:inline-block;padding:3px}.arrow.right{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.arrow.left{transform:rotate(135deg);-webkit-transform:rotate(135deg)}.arrow.up{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}.arrow.down{transform:rotate(45deg);-webkit-transform:rotate(45deg)}.button-small{font-size:85%}.fetch-error{padding-top:1em;font-size:60%;max-width:400px;display:block}.button-secondary{color:#fff;border-radius:4px;text-shadow:0 1px 1px rgba(0,0,0,0.2)}.button-success{background:#1cb841}.button-tag{background:#636363;color:#fff;font-size:65%;border-bottom-left-radius:initial;border-bottom-right-radius:initial}.button-tag.active{background:#9c9c9c;font-weight:bold}.button-error{background:#ca3c3c}.button-warning{background:#df7514}.button-secondary{background:#42b8dd}.button-cancel{background:#c8c8c8}.messages li{list-style:none;padding:1em;border-radius:10px;color:#fff;font-weight:bold}.messages li.message{background:rgba(255,255,255,0.2)}.messages li.error{background:rgba(255,1,1,0.5)}.messages li.notice{background:rgba(255,255,255,0.5)}#notification-customisation{border:1px solid #ccc;padding:1rem;border-radius:5px}#token-table.pure-table td,#token-table.pure-table th{font-size:80%}#new-watch-form{background:rgba(0,0,0,0.05);padding:1em;border-radius:10px;margin-bottom:1em}#new-watch-form input{width:auto !important;display:inline-block}#new-watch-form .label{display:none}#new-watch-form legend{color:#fff}#diff-col{padding-left:40px}#diff-jump{position:fixed;left:0;top:120px;background:#fff;padding:10px;border-top-right-radius:5px;border-bottom-right-radius:5px;box-shadow:5px 0 5px -2px #888}#diff-jump a{color:#1b98f8;cursor:grabbing;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-o-user-select:none}footer{padding:10px;background:#fff;color:#444;text-align:center}#feed-icon{vertical-align:middle}.sticky-tab{position:absolute;top:80px;font-size:8px;background:#fff;padding:10px}.sticky-tab#left-sticky{left:0}.sticky-tab#right-sticky{right:0}#new-version-text a{color:#e07171}.paused-state.state-False img{opacity:.2}.paused-state.state-False:hover img{opacity:.8}.monospaced-textarea textarea{width:100%;font-family:monospace;white-space:pre;overflow-wrap:normal;overflow-x:scroll}.pure-form .pure-control-group,.pure-form .pure-group,.pure-form .pure-controls{padding-bottom:1em}.pure-form .pure-control-group div,.pure-form .pure-group div,.pure-form .pure-controls div{margin:0}.pure-form .error input{background-color:#ffebeb}.pure-form ul.errors{padding:.5em .6em;border:1px solid #d00;border-radius:4px;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box}.pure-form ul.errors li{margin-left:1em;color:#d00}.pure-form label{font-weight:bold}.pure-form textarea{width:100%}.pure-form ul#fetch_backend{margin:0;list-style:none}.pure-form ul#fetch_backend > li > *{display:inline-block}@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px){.box{max-width:95%}.edit-form{padding:.5em;margin:0}#nav-menu{overflow-x:scroll}}@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px){input[type='text']{width:100%}.watch-table thead,.watch-table tbody,.watch-table th,.watch-table td,.watch-table tr{display:block}.watch-table .last-checked::before{color:#555;content:"Last Checked "}.watch-table .last-changed::before{color:#555;content:"Last Changed "}.watch-table td.inline{display:inline-block}.watch-table thead tr{position:absolute;top:-9999px;left:-9999px}.watch-table .pure-table td,.watch-table .pure-table th{border:none}.watch-table td{border:none;border-bottom:1px solid #eee}.watch-table td:before{top:6px;left:6px;width:45%;padding-right:10px;white-space:nowrap}.watch-table.pure-table-striped tr{background-color:#fff}.watch-table.pure-table-striped tr:nth-child(2n-1){background-color:#eee}.watch-table.pure-table-striped tr:nth-child(2n-1) td{background-color:inherit}}@media only screen and (min-width: 761px){.m-d{min-width:80%}}.tabs ul{margin:0;padding:0;display:block}.tabs ul li{margin-right:3px;display:inline-block;color:#fff;border-top-left-radius:5px;border-top-right-radius:5px;background-color:rgba(255,255,255,0.2)}.tabs ul li.active,.tabs ul li :target{background-color:#fff}.tabs ul li.active a,.tabs ul li :target a{color:#222;font-weight:bold}.tabs ul li a{display:block;padding:.8em;color:#fff}.pure-form-stacked > div:first-child{display:block}.edit-form{min-width:70%}.edit-form .tab-pane-inner{padding:0}.edit-form .tab-pane-inner:not(:target){display:none}.edit-form .tab-pane-inner:target{display:block}.edit-form .box-wrap{position:relative}.edit-form .inner{background:#fff;padding:20px}.edit-form #actions{display:block;background:#fff} diff --git a/changedetectionio/static/styles/styles.scss b/changedetectionio/static/styles/styles.scss index 4a4b3b83..06d27934 100644 --- a/changedetectionio/static/styles/styles.scss +++ b/changedetectionio/static/styles/styles.scss @@ -236,16 +236,11 @@ body:after, body:before { } #notification-customisation { - display: block; border: 1px solid #ccc; padding: 1rem; border-radius: 5px; } -#toggle-customise-notifications { - cursor: pointer; -} - #token-table { &.pure-table td, &.pure-table th { diff --git a/changedetectionio/templates/settings.html b/changedetectionio/templates/settings.html index 941760a4..5f6c9107 100644 --- a/changedetectionio/templates/settings.html +++ b/changedetectionio/templates/settings.html @@ -50,12 +50,9 @@
Use AppRise URLs for notification to just about any service! - Customise notification body:
-