/* * -- BASE STYLES -- */ .arrow { border: solid #1b98f8; border-width: 0 2px 2px 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, .arrow.asc { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } .arrow.down, .arrow.desc { transform: rotate(45deg); -webkit-transform: rotate(45deg); } #browser_steps { /* convert rows to horizontal cells */ } #browser_steps th { display: none; } #browser_steps li { list-style: decimal; padding: 5px; } #browser_steps li.browser-step-with-error { background-color: #ffd6d6; border-radius: 4px; } #browser_steps li:not(:first-child):hover { opacity: 1.0; } #browser_steps li .control { padding-left: 5px; padding-right: 5px; } #browser_steps li .control a { font-size: 70%; } #browser_steps li.empty { padding: 0px; opacity: 0.35; } #browser_steps li.empty .control { display: none; } #browser_steps li:hover { background: #eee; } #browser_steps li > label { display: none; } @media only screen and (min-width: 760px) { #browser-steps .flex-wrapper { display: flex; flex-flow: row; height: 70vh; font-size: 80%; } #browser-steps .flex-wrapper #browser-steps-ui { flex-grow: 1; /* Allow it to grow and fill the available space */ flex-shrink: 1; /* Allow it to shrink if needed */ flex-basis: 0; /* Start with 0 base width so it stretches as much as possible */ background-color: #eee; border-radius: 5px; } #browser-steps-fieldlist { flex-grow: 0; /* Don't allow it to grow */ flex-shrink: 0; /* Don't allow it to shrink */ flex-basis: auto; /* Base width is determined by the content */ max-width: 400px; /* Set a max width to prevent overflow */ padding-left: 1rem; overflow-y: scroll; } /* this is duplicate :( */ #browsersteps-selector-wrapper { height: 100% !important; } } /* this is duplicate :( */ #browsersteps-selector-wrapper { width: 100%; overflow-y: scroll; position: relative; height: 80vh; /* nice tall skinny one */ } #browsersteps-selector-wrapper > img { position: absolute; max-width: 100%; } #browsersteps-selector-wrapper > canvas { position: relative; max-width: 100%; } #browsersteps-selector-wrapper > canvas:hover { cursor: pointer; } #browsersteps-selector-wrapper .loader { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 100; max-width: 350px; text-align: center; } #browsersteps-selector-wrapper .spinner, #browsersteps-selector-wrapper .spinner:after { width: 80px; height: 80px; font-size: 3px; } #browsersteps-selector-wrapper #browsersteps-click-start { color: var(--color-grey-400); } #browsersteps-selector-wrapper #browsersteps-click-start:hover { cursor: pointer; } ul#requests-extra_proxies { list-style: none; /* tidy up the table to look more "inline" */ /* each proxy entry is a `table` */ } ul#requests-extra_proxies li > label { display: none; } ul#requests-extra_proxies table tr { display: table-row; } ul#requests-extra_proxies table tr input[type=text] { width: 100%; } @media only screen and (min-width: 1024px) { ul#requests-extra_proxies table tr { display: inline; } } #request { /* Auto proxy scan/checker */ } #request label[for=proxy] { display: inline-block; } body.proxy-check-active #request { /* .proxy-status { width: 2em; } */ } body.proxy-check-active #request .proxy-check-details { font-size: 80%; color: #555; display: block; padding-left: 2em; max-width: 500px; } body.proxy-check-active #request .proxy-timing { font-size: 80%; padding-left: 1rem; color: var(--color-link); } #recommended-proxy { display: grid; gap: 2rem; padding-bottom: 1em; } @media (min-width: 991px) { #recommended-proxy { grid-template-columns: repeat(2, 1fr); } } #recommended-proxy > div { border: 1px #aaa solid; border-radius: 4px; padding: 1em; } #extra-proxies-setting { border: 1px solid var(--color-grey-800); border-radius: 4px; margin: 1em; padding: 1em; } ul#requests-extra_browsers { list-style: none; /* tidy up the table to look more "inline" */ /* each proxy entry is a `table` */ } ul#requests-extra_browsers li > label { display: none; } ul#requests-extra_browsers table tr { display: table-row; } ul#requests-extra_browsers table tr input[type=text] { width: 100%; } @media only screen and (min-width: 1280px) { ul#requests-extra_browsers table tr { display: inline; } ul#requests-extra_browsers table tr input[type=text] { width: 100%; } } #extra-browsers-setting { border: 1px solid var(--color-grey-800); border-radius: 4px; margin: 1em; padding: 1em; } .pagination-page-info { color: #fff; font-size: 0.85rem; text-transform: capitalize; } .pagination.menu > * { display: inline-block; } .pagination.menu li { display: inline-block; } .pagination.menu a { padding: 0.65rem; margin: 3px; 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; } .pagination.menu a:hover { background: #999; } /* spinner */ .spinner, .spinner:after { border-radius: 50%; width: 10px; height: 10px; } .spinner { margin: 0px auto; font-size: 3px; vertical-align: middle; display: inline-block; text-indent: -9999em; border-top: 1.1em solid rgba(38, 104, 237, 0.2); border-right: 1.1em solid rgba(38, 104, 237, 0.2); border-bottom: 1.1em solid rgba(38, 104, 237, 0.2); border-left: 1.1em solid #2668ed; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; } @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /** * 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-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); --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-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); --color-watch-table-error: var(--color-dark-red); --color-watch-table-row-text: var(--color-grey-100); } 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: rgba(250, 62, 146, 0.4); --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); --color-watch-table-error: var(--color-light-red); --color-watch-table-row-text: var(--color-grey-800); } 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); } html[data-darkmode="true"] .watch-table .status-browsersteps { filter: invert(0.5) hue-rotate(10deg) brightness(1.5); } html[data-darkmode="true"] .watch-table .watch-controls .state-off img { opacity: 0.3; } html[data-darkmode="true"] .watch-table .watch-controls .state-on img { opacity: 1.0; } html[data-darkmode="true"] .watch-table .unviewed { color: #fff; } html[data-darkmode="true"] .watch-table .unviewed.error { color: var(--color-watch-table-error); } #toggle-light-mode { /* width: 3rem;*/ /* default */ } #toggle-light-mode .icon-dark { display: none; } html[data-darkmode="true"] #toggle-light-mode .icon-light { display: none; } html[data-darkmode="true"] #toggle-light-mode .icon-dark { display: block; } .pure-menu-link { padding: 0.5rem 1em; line-height: 1.2rem; } .pure-menu-item svg { height: 1.2rem; } .pure-menu-item * { vertical-align: middle; } .pure-menu-item .github-link { height: 1.8rem; display: block; } .pure-menu-item .github-link svg { height: 100%; } .pure-menu-item .bi-heart:hover { cursor: pointer; } #overlay { opacity: 0.95; position: fixed; width: 350px; max-width: 100%; height: 100%; top: 0; right: -350px; background-color: var(--color-table-stripe); z-index: 2; transform: translateX(0); transition: transform .5s ease; } #overlay.visible { transform: translateX(-100%); } #overlay .content { font-size: 0.875rem; padding: 1rem; margin-top: 5rem; max-width: 400px; color: var(--color-watch-table-row-text); } #heartpath { transition: all ease 0.3s !important; } #heartpath:hover { fill: #ff0000 !important; transition: all ease 0.3s !important; } .minitabs-wrapper { width: 100%; } .minitabs-wrapper > div[id] { padding: 20px; border: 1px solid #ccc; border-top: none; } .minitabs-wrapper .minitabs-content { width: 100%; display: flex; } .minitabs-wrapper .minitabs-content > div { flex: 1 1 auto; min-width: 0; overflow: scroll; } .minitabs-wrapper .minitabs { display: flex; border-bottom: 1px solid #ccc; } .minitabs-wrapper .minitab { flex: 1; text-align: center; padding: 12px 0; text-decoration: none; color: #333; background-color: #f1f1f1; border: 1px solid #ccc; border-bottom: none; cursor: pointer; transition: background-color 0.3s; } .minitabs-wrapper .minitab:hover { background-color: #ddd; } .minitabs-wrapper .minitab.active { background-color: #fff; font-weight: bold; } body.preview-text-enabled { /* layout of the page */ /* actual preview area */ } @media (min-width: 800px) { body.preview-text-enabled #filters-and-triggers > div { display: flex; /* Establishes Flexbox layout */ gap: 20px; /* Adds space between the columns */ position: relative; /* Ensures the sticky positioning is relative to this parent */ } } body.preview-text-enabled #edit-text-filter, body.preview-text-enabled #text-preview { flex: 1; /* Each column takes an equal amount of available space */ align-self: flex-start; /* Aligns the right column to the start, allowing it to maintain its content height */ } body.preview-text-enabled #edit-text-filter #pro-tips { display: none; } body.preview-text-enabled #text-preview { position: sticky; top: 20px; padding-top: 1rem; padding-bottom: 1rem; display: block !important; } body.preview-text-enabled #activate-text-preview { background-color: var(--color-grey-500); } body.preview-text-enabled .monospace-preview { background: var(--color-background-input); border: 1px solid var(--color-grey-600); padding: 1rem; color: var(--color-text-input); font-family: "Courier New", Courier, monospace; /* Sets the font to a monospace type */ font-size: 70%; word-break: break-word; white-space: pre-wrap; /* Preserves whitespace and line breaks like
*/ }
#activate-text-preview {
right: 0;
position: absolute;
z-index: 3;
box-shadow: 1px 1px 4px var(--color-shadow-jump); }
/* table related */
.watch-table {
width: 100%;
font-size: 80%;
/* Row with 'checking-now' */ }
.watch-table tr {
color: var(--color-watch-table-row-text); }
.watch-table tr.unviewed {
font-weight: bold; }
.watch-table td {
white-space: nowrap; }
.watch-table td.title-col {
word-break: break-all;
white-space: normal; }
.watch-table th {
white-space: nowrap; }
.watch-table th a {
font-weight: normal; }
.watch-table th a.active {
font-weight: bolder; }
.watch-table th a.inactive .arrow {
display: none; }
.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-table tr.checking-now td:first-child {
position: relative; }
.watch-table tr.checking-now td:first-child::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 3px;
background-color: #293eff; }
.watch-table tr.checking-now td.last-checked .spinner-wrapper {
display: inline-block !important; }
.watch-table tr.checking-now td.last-checked .innertext {
display: none !important; }
.watch-table tr.queued a.recheck {
display: none !important; }
.watch-table tr.queued a.already-in-queue-button {
display: inline-block !important; }
.watch-table tr.paused a.pause-toggle.state-on {
display: inline !important; }
.watch-table tr.paused a.pause-toggle.state-off {
display: none !important; }
.watch-table tr.notification_muted a.mute-toggle.state-on {
display: inline !important; }
.watch-table tr.notification_muted a.mute-toggle.state-off {
display: none !important; }
.watch-table tr.has-error {
color: var(--color-watch-table-error); }
.watch-table tr.has-error .error-text {
display: block !important; }
ul#conditions_match_logic {
list-style: none; }
ul#conditions_match_logic input, ul#conditions_match_logic label, ul#conditions_match_logic li {
display: inline-block; }
ul#conditions_match_logic li {
padding-right: 1em; }
/* Styles for the flexbox-based table replacement for conditions */
.fieldlist_formfields {
width: 100%;
background-color: var(--color-background, #fff);
border-radius: 4px;
border: 1px solid var(--color-border-table-cell, #cbcbcb);
/* Header row */
/* Body rows */
/* Error styling */
/* Responsive styles */ }
.fieldlist_formfields .fieldlist-header {
display: flex;
background-color: var(--color-background-table-thead, #e0e0e0);
font-weight: bold;
border-bottom: 1px solid var(--color-border-table-cell, #cbcbcb); }
.fieldlist_formfields .fieldlist-header-cell {
flex: 1;
padding: 0.5em 1em;
text-align: left; }
.fieldlist_formfields .fieldlist-header-cell:last-child {
flex: 0 0 120px;
/* Fixed width for actions column */ }
.fieldlist_formfields .fieldlist-body {
display: flex;
flex-direction: column; }
.fieldlist_formfields .fieldlist-row {
display: flex;
border-bottom: 1px solid var(--color-border-table-cell, #cbcbcb); }
.fieldlist_formfields .fieldlist-row:last-child {
border-bottom: none; }
.fieldlist_formfields .fieldlist-row:nth-child(2n-1) {
background-color: var(--color-table-stripe, #f2f2f2); }
.fieldlist_formfields .fieldlist-row.error-row {
background-color: var(--color-error-input, #ffdddd); }
.fieldlist_formfields .fieldlist-cell {
flex: 1;
padding: 0.5em 1em;
display: flex;
flex-direction: column;
justify-content: center;
/* Make inputs take up full width of their cell */ }
.fieldlist_formfields .fieldlist-cell input, .fieldlist_formfields .fieldlist-cell select {
width: 100%; }
.fieldlist_formfields .fieldlist-cell.fieldlist-actions {
flex: 0 0 120px;
/* Fixed width for actions column */
display: flex;
flex-direction: row;
align-items: center;
gap: 4px; }
.fieldlist_formfields ul.errors {
margin-top: 0.5em;
margin-bottom: 0;
padding: 0.5em;
background-color: var(--color-error-background-snapshot-age, #ffdddd);
border-radius: 4px;
list-style-position: inside; }
@media only screen and (max-width: 760px) {
.fieldlist_formfields {
/* Add some spacing between fields on mobile */
/* Label each cell on mobile view */ }
.fieldlist_formfields .fieldlist-header, .fieldlist_formfields .fieldlist-row {
flex-direction: column; }
.fieldlist_formfields .fieldlist-header-cell {
display: none; }
.fieldlist_formfields .fieldlist-row {
padding: 0.5em 0;
border-bottom: 2px solid var(--color-border-table-cell, #cbcbcb); }
.fieldlist_formfields .fieldlist-cell {
padding: 0.25em 0.5em; }
.fieldlist_formfields .fieldlist-cell.fieldlist-actions {
flex: 1;
justify-content: flex-start;
padding-top: 0.5em; }
.fieldlist_formfields .fieldlist-cell:not(:last-child) {
margin-bottom: 0.5em; }
.fieldlist_formfields .fieldlist-cell::before {
content: attr(data-label);
font-weight: bold;
margin-bottom: 0.25em; } }
/* Button styling */
.fieldlist_formfields .addRuleRow, .fieldlist_formfields .removeRuleRow, .fieldlist_formfields .verifyRuleRow {
cursor: pointer;
border: none;
padding: 4px 8px;
border-radius: 3px;
font-weight: bold;
background-color: #aaa;
color: var(--color-foreground-text, #fff); }
.fieldlist_formfields .addRuleRow:hover, .fieldlist_formfields .removeRuleRow:hover, .fieldlist_formfields .verifyRuleRow:hover {
background-color: #999; }
body.checking-now #checking-now-fixed-tab {
display: block !important; }
#checking-now-fixed-tab {
background: #ccc;
border-radius: 5px;
bottom: 0;
color: var(--color-text);
display: none;
font-size: 0.8rem;
left: 0;
padding: 5px;
position: fixed; }
body {
color: var(--color-text);
background: var(--color-background-page);
font-family: Helvetica Neue, Helvetica, Lucida Grande, Arial, Ubuntu, Cantarell, Fira Sans, sans-serif; }
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px; }
.status-icon {
display: inline-block;
height: 1rem;
vertical-align: middle; }
.pure-table-even {
background: var(--color-background); }
/* Some styles from https://css-tricks.com/ */
a {
text-decoration: none;
color: var(--color-link); }
a.github-link {
color: var(--color-icon-github);
margin: 0 1rem 0 0.5rem; }
a.github-link svg {
fill: currentColor; }
a.github-link:hover {
color: var(--color-icon-github-hover); }
#search-q {
opacity: 0;
-webkit-transition: all .9s ease;
-moz-transition: all .9s ease;
transition: all .9s ease;
width: 0;
display: none; }
#search-q.expanded {
width: auto;
display: inline-block;
opacity: 1; }
#search-result-info {
color: #fff; }
button.toggle-button {
vertical-align: middle;
background: transparent;
border: none;
cursor: pointer;
color: var(--color-icon-github); }
button.toggle-button:hover {
color: var(--color-icon-github-hover); }
button.toggle-button svg {
fill: currentColor; }
button.toggle-button .icon-light {
display: block; }
.pure-menu-horizontal {
background: var(--color-background);
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center; }
#pure-menu-horizontal-spinner {
height: 3px;
background: linear-gradient(-75deg, #ff6000, #ff8f00, #ffdd00, #ed0000);
background-size: 400% 400%;
width: 100%;
animation: gradient 200s ease infinite; }
body.spinner-active #pure-menu-horizontal-spinner {
animation: gradient 1s ease infinite; }
@keyframes gradient {
0% {
background-position: 0% 50%; }
50% {
background-position: 100% 50%; }
100% {
background-position: 0% 50%; } }
.pure-menu-heading {
color: var(--color-text-menu-heading); }
.pure-menu-link {
color: var(--color-text-menu-link); }
.pure-menu-link:hover {
background-color: var(--color-background-menu-link-hover);
color: var(--color-text-menu-link-hover); }
.tab-pane-inner {
scroll-margin-top: 200px; }
section.content {
padding-top: 100px;
padding-bottom: 1em;
flex-direction: column;
display: flex;
align-items: center;
justify-content: center; }
code {
background: var(--color-background-code);
color: var(--color-text); }
.inline-tag, .watch-tag-list, .tracking-ldjson-price-data, .restock-label {
white-space: nowrap;
border-radius: 5px;
padding: 2px 5px;
margin-right: 4px; }
.watch-tag-list {
color: var(--color-white);
background: var(--color-text-watch-tag-list); }
.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, var(--color-background-gradient-first), var(--color-background-gradient-second) 41.07%, var(--color-background-gradient-third) 84.05%); }
body:after,
body:before {
display: block;
height: 650px;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1; }
body::after {
opacity: 0.91; }
body::before {
content: ""; }
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%); }
.button-small {
font-size: 85%; }
.button-xsmall {
font-size: 70%; }
.fetch-error {
padding-top: 1em;
font-size: 80%;
max-width: 400px;
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: var(--color-text-button);
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
.button-success {
background: var(--color-background-button-success); }
.button-tag {
background: var(--color-background-button-tag);
color: var(--color-text-button);
font-size: 65%;
border-bottom-left-radius: initial;
border-bottom-right-radius: initial; }
.button-tag.active {
background: var(--color-background-button-tag-active);
font-weight: bold; }
.button-error {
background: var(--color-background-button-error);
color: var(--color-text-button-error); }
.button-warning {
background: var(--color-background-button-warning);
color: var(--color-text-button-warning); }
.button-secondary {
background: var(--color-background-button-secondary); }
.button-cancel {
background: var(--color-background-button-cancel); }
.messages li {
list-style: none;
padding: 1em;
border-radius: 10px;
color: var(--color-text-messages);
font-weight: bold; }
.messages li.message {
background: var(--color-background-messages-message); }
.messages li.error {
background: var(--color-background-messages-error); }
.messages li.notice {
background: var(--color-background-messages-notice); }
.messages.with-share-link > *:hover {
cursor: pointer; }
.notifications-wrapper {
padding-top: 0.5rem; }
.notifications-wrapper #notification-test-log {
padding-top: 1rem;
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: break-word;
max-width: 100%;
box-sizing: border-box; }
label:hover {
cursor: pointer; }
#notification-customisation {
border: 1px solid var(--color-border-notification);
padding: 0.5rem;
border-radius: 5px; }
#notification-error-log {
border: 1px solid var(--color-border-notification);
padding: 1rem;
border-radius: 5px;
overflow-wrap: break-word; }
#token-table.pure-table td,
#token-table.pure-table th {
font-size: 80%; }
#new-watch-form {
background: var(--color-background-new-watch-form);
padding: 1em;
border-radius: 10px;
margin-bottom: 1em; }
#new-watch-form input {
display: inline-block;
margin-bottom: 5px; }
#new-watch-form input:not(.pure-button) {
background-color: var(--color-background-new-watch-input);
color: var(--color-text-new-watch-input); }
#new-watch-form .label {
display: none; }
#new-watch-form legend {
color: var(--color-text-legend);
font-weight: bold; }
#new-watch-form #watch-add-wrapper-zone {
/* URL field grows always, other stay static in width */ }
@media only screen and (min-width: 760px) {
#new-watch-form #watch-add-wrapper-zone {
display: flex;
gap: 0.3rem;
flex-direction: row; } }
#new-watch-form #watch-add-wrapper-zone > span {
flex-grow: 0; }
#new-watch-form #watch-add-wrapper-zone > span input {
width: 100%;
padding-right: 1em; }
#new-watch-form #watch-add-wrapper-zone > span:first-child {
flex-grow: 1; }
@media only screen and (max-width: 760px) {
#new-watch-form #watch-add-wrapper-zone #url {
width: 100%; } }
#diff-col {
padding-left: 40px; }
#diff-jump {
position: fixed;
left: 0px;
top: 120px;
background: var(--color-background);
padding: 10px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 1px 1px 4px var(--color-shadow-jump); }
#diff-jump a {
color: var(--color-link);
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-o-user-select: none; }
footer {
padding: 10px;
background: var(--color-background);
color: var(--color-text-footer);
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: 60px;
font-size: 65%;
background: var(--color-background);
padding: 10px; }
.sticky-tab#left-sticky {
left: 0;
position: fixed;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 1px 1px 4px var(--color-shadow-jump); }
.sticky-tab#right-sticky {
right: 0px; }
.sticky-tab#hosted-sticky {
right: 0px;
top: 100px;
font-weight: bold; }
#new-version-text a {
color: var(--color-link-new-version); }
.watch-controls {
color: #f8321b;
/* default */ }
.watch-controls .state-on img {
opacity: 0.8; }
.watch-controls img {
opacity: 0.2; }
.watch-controls img:hover {
transition: opacity 0.3s;
opacity: 0.8; }
.monospaced-textarea textarea {
width: 100%;
font-family: monospace;
white-space: pre;
overflow-wrap: normal;
overflow-x: auto; }
.pure-form {
/* The input fields with errors */
/* The list of errors */ }
.pure-form fieldset {
padding-top: 0px; }
.pure-form fieldset ul {
padding-bottom: 0px;
margin-bottom: 0px; }
.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 .pure-control-group .checkbox > *,
.pure-form .pure-group .checkbox > *,
.pure-form .pure-controls .checkbox > * {
display: inline;
vertical-align: middle; }
.pure-form .pure-control-group .checkbox > label,
.pure-form .pure-group .checkbox > label,
.pure-form .pure-controls .checkbox > label {
padding-left: 5px; }
.pure-form .pure-control-group legend,
.pure-form .pure-group legend,
.pure-form .pure-controls legend {
color: var(--color-text-legend); }
.pure-form .error input {
background-color: var(--color-error-input); }
.pure-form ul.errors {
padding: .5em .6em;
border: 1px solid var(--color-error-list);
border-radius: 4px;
vertical-align: middle;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.pure-form ul.errors li {
margin-left: 1em;
color: var(--color-error-list); }
.pure-form label {
font-weight: bold; }
.pure-form textarea {
width: 100%; }
.pure-form .inline-radio ul {
margin: 0px;
list-style: none; }
.pure-form .inline-radio ul li {
display: flex;
align-items: center;
gap: 1em; }
@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) {
div.sticky-tab#hosted-sticky {
top: 60px;
left: 0px;
right: auto; }
section.content {
padding-top: 110px; }
div.tabs.collapsable ul li {
display: block;
border-radius: 0px;
margin-right: 0px; }
input[type='text'] {
width: 100%; }
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
.watch-table {
/* make headings work on mobile */
/* Force table to not be like tables anymore */
/* Force table to not be like tables anymore */ }
.watch-table thead {
display: block; }
.watch-table thead tr th {
display: inline-block; } }
@media only screen and (max-width: 760px) and (max-width: 768px), (min-device-width: 768px) and (max-device-width: 800px) and (max-width: 768px) {
.watch-table thead tr th .hide-on-mobile {
display: none; } }
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 800px) {
.watch-table thead .empty-cell {
display: none; }
.watch-table tbody td,
.watch-table tbody tr {
display: block; }
.watch-table tbody tr {
display: flex;
flex-wrap: wrap; }
.watch-table tbody tr :nth-child(3) {
flex-grow: 1; }
.watch-table tbody tr :nth-last-child(-n+3) {
flex-basis: 100%; }
.watch-table .last-checked > span {
vertical-align: middle; }
.watch-table .last-checked::before {
color: var(--color-last-checked);
content: "Last Checked "; }
.watch-table .last-changed::before {
color: var(--color-last-checked);
content: "Last Changed "; }
.watch-table td.inline {
display: inline-block; }
.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 var(--color-border-watch-table-cell);
vertical-align: middle; }
.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: var(--color-table-background); }
.watch-table.pure-table-striped tr:nth-child(2n-1) {
background-color: var(--color-table-stripe); }
.watch-table.pure-table-striped tr:nth-child(2n-1) td {
background-color: inherit; } }
.pure-table {
border-color: var(--color-border-table-cell); }
.pure-table thead {
background-color: var(--color-background-table-thead);
color: var(--color-text);
border-bottom: 1px solid var(--color-background-table-thead); }
.pure-table td,
.pure-table 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); }
.pure-form input[type=color]:active,
.pure-form input[type=date]:active,
.pure-form input[type=datetime-local]:active,
.pure-form input[type=datetime]:active,
.pure-form input[type=email]:active,
.pure-form input[type=month]:active,
.pure-form input[type=number]:active,
.pure-form input[type=password]:active,
.pure-form input[type=search]:active,
.pure-form input[type=tel]:active,
.pure-form input[type=text]:active,
.pure-form input[type=time]:active,
.pure-form input[type=url]:active,
.pure-form input[type=week]:active,
.pure-form select:active,
.pure-form textarea: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 because `size` is too unreliable to override, and will often push-out
- Rely always on width in CSS
*/
/** Set max width for input field */
.m-d {
min-width: 100%; }
@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: var(--color-text-tab);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: var(--color-background-tab); }
.tabs ul li:not(.active):hover {
background-color: var(--color-background-tab-hover); }
.tabs ul li.active,
.tabs ul li :target {
background-color: var(--color-background); }
.tabs ul li.active a,
.tabs ul li :target a {
color: var(--color-text-tab-active);
font-weight: bold; }
.tabs ul li a {
display: block;
padding: 0.8em;
color: var(--color-text-tab); }
.pure-form-stacked > div:first-child {
display: block; }
.login-form .inner {
background: var(--color-background);
padding: 20px;
border-radius: 5px; }
.tab-pane-inner {
padding: 0px; }
.tab-pane-inner:not(:target) {
display: none; }
.tab-pane-inner:target {
display: block; }
.beta-logo {
height: 50px;
right: -3px;
top: -3px;
position: absolute; }
#selector-header {
padding-bottom: 1em; }
body.full-width .edit-form {
width: 95%; }
.edit-form {
min-width: 70%;
/* so it cant overflow */
max-width: 95%;
/* Make action buttons have consistent size and spacing */ }
.edit-form .box-wrap {
position: relative; }
.edit-form .inner {
background: var(--color-background);
padding: 20px; }
.edit-form #actions {
display: block;
background: var(--color-background); }
.edit-form #actions .pure-control-group {
display: flex;
gap: 0.625em;
flex-wrap: wrap; }
.edit-form .pure-form-message-inline {
padding-left: 0;
color: var(--color-text-input-description); }
.edit-form .pure-form-message-inline code {
font-size: .875em; }
.border-fieldset {
border: 1px solid #ccc;
padding: 1rem;
border-radius: 5px;
margin-bottom: 1rem; }
.border-fieldset h3 {
margin-top: 0; }
.border-fieldset fieldset:last-of-type {
padding-bottom: 0; }
.border-fieldset fieldset:last-of-type .pure-control-group {
padding-bottom: 0; }
ul {
padding-left: 1em;
padding-top: 0px;
margin-top: 4px; }
.time-check-widget tr {
display: inline; }
.time-check-widget tr input[type="number"] {
width: 5em; }
@media only screen and (max-width: 760px) {
.time-check-widget tbody {
display: grid;
grid-template-columns: auto 1fr auto 1fr;
gap: 0.625em 0.3125em;
align-items: center; }
.time-check-widget tr {
display: contents; }
.time-check-widget tr th {
text-align: right;
padding-right: 5px; }
.time-check-widget tr input[type="number"] {
width: 100%;
max-width: 5em; } }
#selector-wrapper {
height: 100%;
text-align: center;
max-height: 70vh;
overflow-y: scroll;
position: relative; }
#selector-wrapper > img {
position: absolute;
z-index: 4;
max-width: 100%; }
#selector-wrapper > canvas {
position: relative;
z-index: 5;
max-width: 100%; }
#selector-wrapper > canvas:hover {
cursor: pointer; }
#selector-current-xpath {
font-size: 80%; }
#webdriver_delay {
width: 5em; }
#api-key:hover {
cursor: pointer; }
#api-key-copy {
color: var(--color-api-key); }
.button-green {
background-color: var(--color-background-button-green); }
.button-red {
background-color: var(--color-background-button-red); }
.noselect {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-moz-user-select: none;
/* Old versions of Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */ }
.snapshot-age {
padding: 4px;
margin: 0.5rem 0;
background-color: var(--color-background-snapshot-age);
border-radius: 3px;
font-weight: bold;
margin-bottom: 4px; }
.snapshot-age.error {
background-color: var(--color-error-background-snapshot-age);
color: var(--color-error-text-snapshot-age); }
#checkbox-operations {
background: var(--color-background-checkbox-operations);
padding: 1em;
border-radius: 10px;
margin-bottom: 1em;
display: none; }
#checkbox-operations button {
/* some space if they wrap the page */
margin-bottom: 3px;
margin-top: 3px; }
.checkbox-uuid > * {
vertical-align: middle; }
.inline-warning {
border: 1px solid var(--color-border-warning);
padding: 0.5rem;
border-radius: 5px;
color: var(--color-warning); }
.inline-warning > span {
display: inline-block;
vertical-align: middle; }
.inline-warning img.inline-warning-icon {
display: inline;
height: 26px;
vertical-align: middle; }
/* automatic price following helpers */
.tracking-ldjson-price-data {
background-color: var(--color-background-button-green);
color: #000;
opacity: 0.6; }
.ldjson-price-track-offer {
font-weight: bold;
font-style: italic; }
.ldjson-price-track-offer a.pure-button {
border-radius: 3px;
padding: 3px;
background-color: var(--color-background-button-green); }
.price-follow-tag-icon {
display: inline-block;
height: 0.8rem;
vertical-align: middle; }
#quick-watch-processor-type {
color: #fff; }
#quick-watch-processor-type ul {
padding: 0.3rem; }
#quick-watch-processor-type ul li {
list-style: none;
font-size: 0.8rem; }
#quick-watch-processor-type ul li > * {
display: inline-block; }
.restock-label.in-stock {
background-color: var(--color-background-button-green);
color: #fff; }
.restock-label.not-in-stock {
background-color: var(--color-background-button-cancel);
color: #777; }
.restock-label.error {
background-color: var(--color-background-button-error);
color: #fff;
opacity: 0.7; }
.restock-label svg {
vertical-align: middle; }
#chrome-extension-link {
padding: 9px;
border: 1px solid var(--color-grey-800);
border-radius: 10px;
vertical-align: middle; }
#chrome-extension-link img {
height: 21px;
padding: 2px;
vertical-align: middle; }