mirror of
https://github.com/dgtlmoon/changedetection.io.git
synced 2026-08-24 07:06:37 +00:00
dgtlmoon
71d332d5a0
Build and push containers / metadata (push) Has been cancelled
Build and push containers / build-push-containers (push) Has been cancelled
Publish Python 🐍distribution 📦 to PyPI and TestPyPI / Build distribution 📦 (push) Has been cancelled
ChangeDetection.io App Test / lint-code (push) Has been cancelled
ChangeDetection.io App Test / lint-translations (push) Has been cancelled
ChangeDetection.io App Test / lint-template-i18n (push) Has been cancelled
Publish Python 🐍distribution 📦 to PyPI and TestPyPI / Test the built package works basically. (push) Has been cancelled
Publish Python 🐍distribution 📦 to PyPI and TestPyPI / Publish Python 🐍 distribution 📦 to PyPI (push) Has been cancelled
ChangeDetection.io App Test / test-application-3-10 (push) Has been cancelled
ChangeDetection.io App Test / test-application-3-11 (push) Has been cancelled
ChangeDetection.io App Test / test-application-3-12 (push) Has been cancelled
ChangeDetection.io App Test / test-application-3-13 (push) Has been cancelled
ChangeDetection.io App Test / test-application-3-14 (push) Has been cancelled
1155 lines
22 KiB
SCSS
1155 lines
22 KiB
SCSS
/*
|
|
* -- BASE STYLES --
|
|
*/
|
|
@use "settings" as *;
|
|
@use "parts/top_menu";
|
|
@use "parts/variables";
|
|
@use "parts/arrows";
|
|
@use "parts/browser-steps";
|
|
@use "parts/extra_proxies";
|
|
@use "parts/extra_browsers";
|
|
@use "parts/pagination";
|
|
@use "parts/spinners";
|
|
@use "parts/darkmode";
|
|
@use "parts/menu";
|
|
@use "parts/love";
|
|
@use "parts/preview_text_filter";
|
|
@use "parts/table";
|
|
@use "parts/seg";
|
|
@use "parts/button";
|
|
@use "parts/watch_table";
|
|
@use "parts/watch_table-mobile";
|
|
@use "parts/edit";
|
|
@use "parts/conditions_table";
|
|
@use "parts/socket";
|
|
@use "parts/visualselector";
|
|
@use "parts/add-watch";
|
|
@use "parts/widgets";
|
|
@use "parts/diff_image";
|
|
@use "parts/modal";
|
|
@use "parts/language";
|
|
@use "parts/action_sidebar";
|
|
@use "parts/queue";
|
|
@use "parts/hamburger_menu";
|
|
@use "parts/search_modal";
|
|
@use "parts/llm";
|
|
@use "parts/notification_bubble";
|
|
@use "parts/notifications";
|
|
@use "parts/restock_graph";
|
|
@use "parts/toast";
|
|
@use "parts/login_form";
|
|
@use "parts/tabs";
|
|
@use "parts/sub_tabs";
|
|
|
|
// Smooth transitions for theme switching
|
|
body,
|
|
.pure-table,
|
|
.pure-table thead,
|
|
.pure-table td,
|
|
.pure-table th,
|
|
.pure-form input,
|
|
.pure-form textarea,
|
|
.pure-form select,
|
|
.edit-form .inner,
|
|
.pure-menu-horizontal,
|
|
footer,
|
|
.sticky-tab,
|
|
#diff-jump,
|
|
.button-tag,
|
|
#new-watch-form,
|
|
#new-watch-form input:not(.pure-button),
|
|
code,
|
|
.messages li,
|
|
#checkbox-operations,
|
|
.inline-warning,
|
|
a,
|
|
.watch-controls img {
|
|
transition: color 0.4s ease, background-color 0.4s ease, background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
|
|
}
|
|
|
|
body {
|
|
color: var(--color-text);
|
|
background: var(--color-background-page);
|
|
font-family: Helvetica Neue, Helvetica, Lucida Grande, Arial, Ubuntu, Cantarell, Fira Sans, sans-serif;
|
|
}
|
|
|
|
// Page-level layout primitive: holds the fixed left rail and the main content
|
|
// column side-by-side on desktop, stacked on mobile. Not sidebar-specific — the
|
|
// rail's parts/_action_sidebar.scss styles target the rail itself, this is the
|
|
// outer wrapper any future side-column layout could share.
|
|
// App shell — the demo's `.app`: a full-height flex row whose left column is the
|
|
// navigation rail and whose right column (`.app-main`) stacks the top menu over
|
|
// the page content. `min-height: 100vh` guarantees the rail's gutter runs the
|
|
// full window height even when the page content is short.
|
|
.app {
|
|
display: flex;
|
|
align-items: stretch;
|
|
min-height: 100vh;
|
|
// No gap here on purpose: the top menu (.header) should sit flush against the
|
|
// rail. The content's breathing room from the rail is applied to
|
|
// section.content alone (padding-left below), not the whole right column.
|
|
}
|
|
|
|
// Right-hand column: top menu (.header) above the scrolling content.
|
|
.app-main {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// Space between the top menu and the page content below it.
|
|
gap: $common-gap;
|
|
}
|
|
|
|
.content-wrapper {
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
position: relative;
|
|
align-items: flex-start;
|
|
|
|
@media only screen and (max-width: $desktop-wide-breakpoint) {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
// Right-hand column that hosts the page content (header, flash messages, the
|
|
// page body block). `align-items: center` centers each child horizontally
|
|
// — child blocks render at their intrinsic width and sit in the middle of
|
|
// the column regardless of viewport size.
|
|
.content-main {
|
|
flex: 1 1 auto;
|
|
width: 100%;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
@media only screen and (min-width: $desktop-wide-breakpoint) {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.visually-hidden {
|
|
clip: rect(0 0 0 0);
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
width: 1px;
|
|
}
|
|
|
|
// Row icons like chrome, pdf, share, etc
|
|
.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);
|
|
}
|
|
|
|
#search-result-info {
|
|
color: #fff;
|
|
}
|
|
|
|
button.toggle-button {
|
|
vertical-align: middle;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
|
|
color: var(--color-text-menu-heading);
|
|
|
|
|
|
svg {
|
|
fill: currentColor;
|
|
}
|
|
|
|
// Feather icons (light/dark sun/moon) are stroke-based — don't fill them.
|
|
svg.feather {
|
|
fill: none;
|
|
stroke: currentColor;
|
|
}
|
|
|
|
.icon-light {
|
|
display: block;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
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%;
|
|
}
|
|
}
|
|
|
|
#cdio-logo {
|
|
color: var(--color-white);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.pure-menu-link {
|
|
color: var(--color-text-menu-link);
|
|
|
|
&:hover {
|
|
background-color: var(--color-background-menu-link-hover);
|
|
color: var(--color-text-menu-link-hover);
|
|
}
|
|
}
|
|
|
|
|
|
.tab-pane-inner {
|
|
// .tab-pane-inner will have the #id that the tab button jumps/anchors to
|
|
scroll-margin-top: 200px;
|
|
}
|
|
|
|
section.content {
|
|
// The top menu (.header) now sits in-flow above this section inside .app-main,
|
|
// so the old fixed-header clearance (padding-top: 80px) is no longer needed.
|
|
// Inset the content from the rail (and the window's right edge) so it doesn't
|
|
// butt against the left action bar — the header above stays flush to the rail.
|
|
padding-bottom: 1em;
|
|
padding-left: $common-gap;
|
|
padding-right: $common-gap;
|
|
flex-direction: column;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
details summary {
|
|
cursor: pointer;
|
|
// Make disclosures clearly clickable: bold + link-coloured so they invite a click,
|
|
// not just a faint arrow + plain text.
|
|
font-weight: 600;
|
|
color: var(--color-link);
|
|
width: fit-content;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
code {
|
|
background: var(--color-background-code);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.inline-tag {
|
|
white-space: nowrap;
|
|
border-radius: 5px;
|
|
padding: 2px 5px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/* Processor type badges - colors auto-generated from processor names */
|
|
.processor-badge {
|
|
@extend .inline-tag;
|
|
font-weight: 900;
|
|
|
|
/* Used as a link to filter the watchlist by processor */
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
opacity: 0.8;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Highlight the processor currently used as a filter */
|
|
&.active {
|
|
outline: 2px solid var(--color-link);
|
|
outline-offset: 1px;
|
|
}
|
|
}
|
|
|
|
.watch-tag-list {
|
|
color: var(--color-white);
|
|
background: var(--color-text-watch-tag-list);
|
|
@extend .inline-tag;
|
|
|
|
/* Remove default anchor styling when used as links */
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
opacity: 0.8;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:visited {
|
|
color: var(--color-white);
|
|
}
|
|
}
|
|
|
|
|
|
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;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
z-index: -1;
|
|
}
|
|
|
|
body::after {
|
|
opacity: 0.91;
|
|
}
|
|
|
|
body::before {
|
|
// background-image set in base.html so it works with reverse proxies etc
|
|
content: "";
|
|
}
|
|
|
|
/* Wave clip-path removed — flat colored band looks cleaner */
|
|
|
|
.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: 75%;
|
|
border-radius: 6px;
|
|
margin-right: 4px;
|
|
&.active {
|
|
background: var(--color-background-button-tag-active);
|
|
font-weight: bold;
|
|
}
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.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;
|
|
|
|
&.message {
|
|
background: var(--color-background-messages-message);
|
|
}
|
|
|
|
&.error {
|
|
background: var(--color-background-messages-error);
|
|
}
|
|
|
|
&.notice {
|
|
background: var(--color-background-messages-notice);
|
|
}
|
|
}
|
|
|
|
&.with-share-link {
|
|
>*:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
label {
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.grey-form-border {
|
|
border: 1px solid var(--color-border-notification);
|
|
padding: 0.5rem;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
|
|
#token-table {
|
|
|
|
&.pure-table td,
|
|
&.pure-table th {
|
|
font-size: 80%;
|
|
}
|
|
}
|
|
|
|
// Some field colouring for transperant field
|
|
.pure-form input[type=text].transparent-field {
|
|
background-color: var(--color-background-new-watch-input-transparent) !important;
|
|
color: var(--color-white) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
|
box-shadow: none !important;
|
|
-webkit-box-shadow: none !important;
|
|
&::placeholder {
|
|
opacity: 0.5;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-weight: lighter;
|
|
}
|
|
}
|
|
|
|
#new-watch-form {
|
|
background: var(--color-background-new-watch-form);
|
|
padding: 1em;
|
|
border-radius: 10px;
|
|
max-width: 100%;
|
|
|
|
#url {
|
|
&::placeholder {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
input {
|
|
display: inline-block;
|
|
}
|
|
|
|
input:not(.pure-button) {
|
|
background-color: var(--color-background-new-watch-input);
|
|
color: var(--color-text-new-watch-input);
|
|
}
|
|
|
|
.label {
|
|
display: none;
|
|
}
|
|
|
|
legend {
|
|
color: var(--color-text-legend);
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
#watch-add-wrapper-zone {
|
|
@media only screen and (min-width: 760px) {
|
|
display: flex;
|
|
gap: 0.3rem;
|
|
flex-direction: row;
|
|
min-width: 70vw;
|
|
}
|
|
/* URL field grows always, other stay static in width */
|
|
> span {
|
|
flex-grow: 0;
|
|
|
|
input {
|
|
width: 100%;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
&:first-child {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 760px) {
|
|
#url {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
#watch-group-tag {
|
|
font-size: 0.9rem;
|
|
padding: 0.3rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--color-white);
|
|
label, input {
|
|
margin: 0;
|
|
}
|
|
|
|
input {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
#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);
|
|
|
|
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 {
|
|
// Just let flex overflow the x axis for now
|
|
/*
|
|
position: absolute;
|
|
right: 0px;
|
|
background: linear-gradient(to right, #fff0, #fff 10%);
|
|
padding-left: 20px;
|
|
padding-right: 10px;
|
|
*/
|
|
}
|
|
|
|
#new-version-text a {
|
|
color: var(--color-link-new-version);
|
|
}
|
|
|
|
.watch-controls {
|
|
color: #f8321b;
|
|
|
|
.state-on {
|
|
img {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
/* default */
|
|
img {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
img {
|
|
&:hover {
|
|
transition: opacity 0.3s;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
|
|
.monospaced-textarea {
|
|
textarea {
|
|
width: 100%;
|
|
font-family: monospace;
|
|
white-space: pre;
|
|
overflow-wrap: normal;
|
|
// No scrollbars until needed.
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
|
|
|
|
.pure-form {
|
|
fieldset {
|
|
padding-top: 0px;
|
|
|
|
ul {
|
|
padding-bottom: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
|
|
.pure-control-group,
|
|
.pure-group,
|
|
.pure-controls {
|
|
padding-bottom: 1em;
|
|
|
|
div {
|
|
margin: 0px;
|
|
}
|
|
|
|
.checkbox {
|
|
>* {
|
|
display: inline;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
>label {
|
|
padding-left: 5px;
|
|
}
|
|
}
|
|
|
|
legend {
|
|
color: var(--color-text-legend);
|
|
}
|
|
}
|
|
|
|
/* The input fields with errors */
|
|
.error {
|
|
input {
|
|
background-color: var(--color-error-input);
|
|
}
|
|
}
|
|
|
|
/* The list of errors */
|
|
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;
|
|
|
|
li {
|
|
margin-left: 1em;
|
|
color: var(--color-error-list);
|
|
}
|
|
}
|
|
|
|
label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
}
|
|
|
|
.inline-radio {
|
|
ul {
|
|
margin: 0px;
|
|
list-style: none;
|
|
|
|
li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@media only screen and (max-width: 760px),
|
|
(min-device-width: 768px) and (max-device-width: $desktop-wide-breakpoint) {
|
|
.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: $desktop-wide-breakpoint) {
|
|
input[type='text'] {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.pure-table {
|
|
border-color: var(--color-border-table-cell);
|
|
|
|
thead {
|
|
background-color: var(--color-background-table-thead);
|
|
color: var(--color-text);
|
|
border-bottom: 1px solid var(--color-background-table-thead);
|
|
}
|
|
|
|
td,
|
|
th {
|
|
border-left-color: var(--color-border-table-cell);
|
|
}
|
|
}
|
|
|
|
// Temporarily disabled: zebra striping on odd rows. Row distinction now comes
|
|
// from the :hover highlight (see .watch-table tr:hover in parts/_watch_table.scss).
|
|
//.pure-table-striped {
|
|
// tr:nth-child(2n-1) {
|
|
// td {
|
|
// background-color: var(--color-table-stripe);
|
|
// }
|
|
// }
|
|
//}
|
|
|
|
.pure-form input[type=color],
|
|
.pure-form input[type=date],
|
|
.pure-form input[type=datetime-local],
|
|
.pure-form input[type=datetime],
|
|
.pure-form input[type=email],
|
|
.pure-form input[type=month],
|
|
.pure-form input[type=number],
|
|
.pure-form input[type=password],
|
|
.pure-form input[type=search],
|
|
.pure-form input[type=tel],
|
|
.pure-form input[type=text],
|
|
.pure-form input[type=time],
|
|
.pure-form input[type=url],
|
|
.pure-form input[type=week],
|
|
.pure-form select,
|
|
.pure-form textarea {
|
|
border: var(--color-border-input);
|
|
box-shadow: inset 0 1px 3px var(--color-shadow-input);
|
|
background-color: var(--color-background-input);
|
|
color: var(--color-text-input);
|
|
|
|
&:active {
|
|
background-color: var(--color-background-input);
|
|
}
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: var(--color-text-input-placeholder);
|
|
}
|
|
|
|
|
|
/** Desktop vs mobile input field strategy
|
|
- We dont use 'size' with <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%;
|
|
}
|
|
}
|
|
|
|
.pure-form-stacked {
|
|
>div:first-child {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// Login form styles moved to parts/_login_form.scss
|
|
|
|
.tab-pane-inner {
|
|
|
|
&:not(:target) {
|
|
display: none;
|
|
}
|
|
|
|
&:target {
|
|
display: block;
|
|
}
|
|
|
|
// doesnt need padding because theres another row of buttons/activity
|
|
padding: 0px;
|
|
}
|
|
|
|
.beta-logo {
|
|
height: 50px;
|
|
// looks better when it's hanging off a little
|
|
right: -3px;
|
|
top: -3px;
|
|
position: absolute;
|
|
}
|
|
|
|
#selector-header {
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
|
|
.edit-form {
|
|
max-width: 95%;
|
|
|
|
.box-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.inner {
|
|
background: var(--color-background);
|
|
padding: $common-gap*2;
|
|
}
|
|
|
|
#actions {
|
|
display: block;
|
|
background: var(--color-background);
|
|
}
|
|
|
|
/* Make action buttons have consistent size and spacing */
|
|
#actions .pure-control-group {
|
|
display: flex;
|
|
gap: 0.625em;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.pure-form-message-inline {
|
|
padding-left: 0;
|
|
color: var(--color-text-input-description);
|
|
code {
|
|
font-size: .875em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.border-fieldset {
|
|
h3 {
|
|
margin-top: 0;
|
|
}
|
|
border: 1px solid #ccc;
|
|
padding: 1rem;
|
|
border-radius: 5px;
|
|
margin-bottom: 1rem;
|
|
fieldset:last-of-type {
|
|
padding-bottom: 0;
|
|
.pure-control-group {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
ul {
|
|
padding-left: 1em;
|
|
padding-top: 0px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.time-check-widget {
|
|
tr {
|
|
display: inline;
|
|
|
|
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;
|
|
}
|
|
tr {
|
|
display: contents;
|
|
th {
|
|
text-align: right;
|
|
padding-right: 5px;
|
|
}
|
|
input[type="number"] {
|
|
width: 100%;
|
|
max-width: 5em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#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 */
|
|
}
|
|
|
|
[type=checkbox], [type=radio] {
|
|
width: 17px;
|
|
height: 17px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.inline-warning {
|
|
>span {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
img.inline-warning-icon {
|
|
display: inline;
|
|
height: 26px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
border: 1px solid var(--color-border-warning);
|
|
padding: 0.5rem;
|
|
border-radius: 5px;
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
/* automatic price following helpers */
|
|
.tracking-ldjson-price-data {
|
|
background-color: var(--color-background-button-green);
|
|
color: #000;
|
|
opacity: 0.6;
|
|
@extend .inline-tag;
|
|
}
|
|
|
|
.ldjson-price-track-offer {
|
|
a.pure-button {
|
|
border-radius: 3px;
|
|
padding: 3px;
|
|
background-color: var(--color-background-button-green);
|
|
}
|
|
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
.price-follow-tag-icon {
|
|
display: inline-block;
|
|
height: 0.8rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
|
|
#quick-watch-processor-type {
|
|
ul#processor {
|
|
color: #fff;
|
|
padding-left: 0px;
|
|
li {
|
|
list-style: none;
|
|
font-size: 0.9rem;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
label, input {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.restock-label {
|
|
&.in-stock {
|
|
background-color: #7a0cc5;
|
|
color: #fff;
|
|
}
|
|
&.not-in-stock {
|
|
background-color: var(--color-background-button-cancel);
|
|
color: #777;
|
|
}
|
|
&.error {
|
|
background-color: var(--color-background-button-error);
|
|
color: #fff;
|
|
opacity: 0.7;
|
|
}
|
|
&.price {
|
|
border: 1px solid var(--color-background-button-cancel);
|
|
}
|
|
|
|
svg {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
@extend .inline-tag;
|
|
}
|
|
|
|
/* Price up/down indicator next to the restock price, e.g. "▼ -18%" */
|
|
.price-change {
|
|
white-space: nowrap;
|
|
font-weight: 700;
|
|
font-size: 90%;
|
|
margin-left: 4px;
|
|
vertical-align: middle;
|
|
|
|
/* Price dropped = good for a shopper = green; price rose = red */
|
|
&.down {
|
|
color: var(--color-background-button-green);
|
|
}
|
|
|
|
&.up {
|
|
color: var(--color-background-button-error);
|
|
}
|
|
}
|
|
|
|
#chrome-extension-link {
|
|
img {
|
|
height: 21px;
|
|
padding: 2px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
padding: 9px;
|
|
border: 1px solid var(--color-grey-800);
|
|
border-radius: 10px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#realtime-conn-error {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: var(--color-warning);
|
|
padding: 10px;
|
|
font-size: 0.8rem;
|
|
color: #fff;
|
|
opacity: 0.8;
|
|
z-index: 100;
|
|
}
|
|
|
|
#bottom-horizontal-offscreen {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
min-height: 50px;
|
|
max-height: 50vh; // Don't take more than 50% of viewport height
|
|
background: #ffffffb8;
|
|
border-top: 1px solid var(--color-border-table-cell);
|
|
padding: 10px;
|
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
|
|
z-index: 100;
|
|
overflow-y: auto; // Allow scrolling if content exceeds max-height
|
|
|
|
// Smooth transition when shown/hidden
|
|
transition: opacity 0.3s ease-in-out;
|
|
|
|
// When JavaScript removes display:none, ensure it scrolls into view
|
|
scroll-margin-bottom: 10px;
|
|
|
|
// Center contents horizontally
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
ul#highlightSnippetActions {
|
|
list-style: none;
|
|
li {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 768px) {
|
|
.box {
|
|
padding: 0.25rem !important;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
color: var(--color-white);
|
|
border-width: 1px;
|
|
border-style: dashed;
|
|
border-color: rgba(255, 255, 255, 0.25);
|
|
border-image: initial;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border-radius: var(--common-round-border);
|
|
padding: $common-gap*2;
|
|
}
|
|
|
|
header {
|
|
color: var(--color-white);
|
|
}
|
|
|
|
#heart-us {
|
|
svg {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
width: 1.4rem; /*it's slightly more wider than square so default auto will trim it slightly */
|
|
}
|
|
} |