Spaces:
Paused
Paused
| /* | |
| * -- 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% ; } } | |
| /* 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 ; } | |
| #heartpath:hover { | |
| fill: #ff0000 ; | |
| transition: all ease 0.3s ; } | |
| .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 ; } | |
| 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 <pre> */ } | |
| #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 td.title-col a::after { | |
| content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==); | |
| margin: 0 3px 0 5px; } | |
| .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 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 ; } | |
| .watch-table tr.checking-now td.last-checked .innertext { | |
| display: none ; } | |
| .watch-table tr.queued a.recheck { | |
| display: none ; } | |
| .watch-table tr.queued a.already-in-queue-button { | |
| display: inline-block ; } | |
| .watch-table tr.paused a.pause-toggle.state-on { | |
| display: inline ; } | |
| .watch-table tr.paused a.pause-toggle.state-off { | |
| display: none ; } | |
| .watch-table tr.notification_muted a.mute-toggle.state-on { | |
| display: inline ; } | |
| .watch-table tr.notification_muted a.mute-toggle.state-off { | |
| display: none ; } | |
| .watch-table tr.has-error { | |
| color: var(--color-watch-table-error); } | |
| .watch-table tr.has-error .error-text { | |
| display: block ; } | |
| .watch-table tr.single-history a.preview-link { | |
| display: inline-block ; } | |
| .watch-table tr.multiple-history a.history-link { | |
| display: inline-block ; } | |
| 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 ; } | |
| #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; } | |
| #post-list-buttons #post-list-with-errors.has-error { | |
| display: inline-block ; } | |
| #post-list-buttons #post-list-mark-views.has-unviewed { | |
| display: inline-block ; } | |
| 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 <input> 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; | |
| /* vertically center icon and text */ | |
| display: inline-flex; | |
| align-items: center; } | |
| .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; } | |
| #realtime-conn-error { | |
| position: absolute; | |
| bottom: 0; | |
| left: 30px; | |
| background: var(--color-warning); | |
| padding: 10px; | |
| font-size: 0.8rem; | |
| color: #fff; } | |