revert changes

changedetectionio/static/styles/diff.css

@@ -88,9 +88,7 @@
   --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);
+  --color-watch-table-row-text: var(--color-grey-100); }
-  --color-change-highlight-rgb: 255, 215, 0;
-  /* Gold color for socket.io highlight */ }
 
 html[data-darkmode="true"] {
   --color-link: #59bdfb;

changedetectionio/static/styles/scss/parts/_variables.scss

@@ -101,7 +101,6 @@
 
   --color-watch-table-error: var(--color-dark-red);
   --color-watch-table-row-text: var(--color-grey-100);
-  --color-change-highlight-rgb: 255, 215, 0; /* Gold color for socket.io highlight */
 }
 
 html[data-darkmode="true"] {

changedetectionio/static/styles/scss/styles.scss

@@ -6,7 +6,6 @@
 @import "parts/_browser-steps";
 @import "parts/_extra_proxies";
 @import "parts/_extra_browsers";
-@import "parts/_watch_table";
 @import "parts/_pagination";
 @import "parts/_spinners";
 @import "parts/_variables";
@@ -170,6 +169,56 @@ code {
   color: var(--color-text);
 }
 
+/* table related */
+.watch-table {
+  width: 100%;
+  font-size: 80%;
+
+  tr {
+    &.unviewed {
+      font-weight: bold;
+    }
+    &.error {
+      color: var(--color-watch-table-error);
+    }
+    color: var(--color-watch-table-row-text);
+  }
+
+
+  td {
+    white-space: nowrap;
+    &.title-col {
+      word-break: break-all;
+      white-space: normal;
+    }
+  }
+
+
+  th {
+    white-space: nowrap;
+
+    a {
+      font-weight: normal;
+
+      &.active {
+        font-weight: bolder;
+      }
+
+      &.inactive {
+        .arrow {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .title-col a[target="_blank"]::after,
+  .current-diff-url::after {
+    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
+    margin: 0 3px 0 5px;
+  }
+}
+
 .inline-tag {
   white-space: nowrap;
   border-radius: 5px;
@@ -657,6 +706,115 @@ footer {
   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 */
+    thead {
+      display: block;
+      tr {
+        th {
+          display: inline-block;
+          // Hide the "Last" text for smaller screens
+          @media (max-width: 768px) {
+            .hide-on-mobile {
+              display: none; 
+            }
+          }
+        }
+      }
+      .empty-cell {
+        display: none;
+      }
+    }
+
+    /* Force table to not be like tables anymore */
+    tbody {
+      td,
+      tr {
+        display: block;
+      }
+    }
+
+    tbody {
+      tr {
+        display: flex;
+        flex-wrap: wrap;
+
+        // The third child of each row will take up the remaining space
+        // This is useful for the URL column, which should expand to fill the remaining space
+        :nth-child(3) {
+          flex-grow: 1;
+        }
+        // The last three children (from the end) of each row will take up the full width
+        // This is useful for the "Last Checked", "Last Changed", and the action buttons columns, which should each take up the full width
+        :nth-last-child(-n+3) {
+          flex-basis: 100%;
+        }
+      }
+    }
+
+    .last-checked {
+      >span {
+        vertical-align: middle;
+      }
+    }
+
+    .last-checked::before {
+      color: var(--color-last-checked);
+      content: "Last Checked ";
+    }
+
+    .last-changed::before {
+      color: var(--color-last-checked);
+      content: "Last Changed ";
+    }
+
+    /* Force table to not be like tables anymore */
+    td.inline {
+      display: inline-block;
+    }
+
+    .pure-table td,
+    .pure-table th {
+      border: none;
+    }
+
+    td {
+      /* Behave  like a "row" */
+      border: none;
+      border-bottom: 1px solid var(--color-border-watch-table-cell);
+      vertical-align: middle;
+
+      &:before {
+        /* Top/left values mimic padding */
+        top: 6px;
+        left: 6px;
+        width: 45%;
+        padding-right: 10px;
+        white-space: nowrap;
+      }
+    }
+
+    &.pure-table-striped {
+      tr {
+        background-color: var(--color-table-background);
+      }
+
+      tr:nth-child(2n-1) {
+        background-color: var(--color-table-stripe);
+      }
+
+      tr:nth-child(2n-1) td {
+        background-color: inherit;
+      }
+    }
+
+  }
 }
 
 .pure-table {
@@ -912,7 +1070,6 @@ ul {
 }
 
 @import "parts/_visualselector";
-@import "parts/_socket";
 
 #webdriver_delay {
     width: 5em;

changedetectionio/static/styles/styles.css

@@ -184,105 +184,6 @@ ul#requests-extra_browsers {
   margin: 1em;
   padding: 1em; }
 
-/* table related */
-.watch-table {
-  width: 100%;
-  font-size: 80%; }
-  .watch-table tr {
-    color: var(--color-watch-table-row-text); }
-    .watch-table tr.unviewed {
-      font-weight: bold; }
-    .watch-table tr.has-history a.preview {
-      display: none !important; }
-    .watch-table tr.has-history.history {
-      display: inline-block !important; }
-    .watch-table tr.error {
-      color: var(--color-watch-table-error); }
-    .watch-table tr.queued a.queue {
-      display: inline-block !important; }
-    .watch-table tr.queued a.recheck {
-      display: none !important; }
-  .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; }
-
-@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 800px) {
-  /*
-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; } }
-
 .pagination-page-info {
   color: #fff;
   font-size: 0.85rem;
@@ -438,9 +339,7 @@ and also iPads specifically.
   --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);
+  --color-watch-table-row-text: var(--color-grey-100); }
-  --color-change-highlight-rgb: 255, 215, 0;
-  /* Gold color for socket.io highlight */ }
 
 html[data-darkmode="true"] {
   --color-link: #59bdfb;
@@ -836,6 +735,34 @@ code {
   background: var(--color-background-code);
   color: var(--color-text); }
 
+/* table related */
+.watch-table {
+  width: 100%;
+  font-size: 80%; }
+  .watch-table tr {
+    color: var(--color-watch-table-row-text); }
+    .watch-table tr.unviewed {
+      font-weight: bold; }
+    .watch-table tr.error {
+      color: var(--color-watch-table-error); }
+  .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; }
+
 .inline-tag, .watch-tag-list, .tracking-ldjson-price-data, .restock-label {
   white-space: nowrap;
   border-radius: 5px;
@@ -1170,7 +1097,68 @@ footer {
     border-radius: 0px;
     margin-right: 0px; }
   input[type='text'] {
-    width: 100%; } }
+    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); }
@@ -1372,29 +1360,6 @@ ul {
 #selector-current-xpath {
   font-size: 80%; }
 
-@keyframes socket-highlight-flash {
-  0% {
-    background-color: rgba(var(--color-change-highlight-rgb), 0); }
-  50% {
-    background-color: rgba(var(--color-change-highlight-rgb), 0.4); }
-  100% {
-    background-color: rgba(var(--color-change-highlight-rgb), 0); } }
-
-.socket-highlight {
-  animation: socket-highlight-flash 2s ease-in-out; }
-
-@keyframes checking-progress {
-  0% {
-    background-size: 0% 100%; }
-  100% {
-    background-size: 100% 100%; } }
-
-tr.checking-now .last-checked {
-  background-image: linear-gradient(to right, rgba(0, 120, 255, 0.2) 0%, rgba(0, 120, 255, 0.1) 100%);
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  animation: checking-progress 10s linear; }
-
 #webdriver_delay {
   width: 5em; }