UX: Refactor pikaday month prev/next button styling

UX: Refactor pikaday month prev/next button styling

And topic-list last poster halo effect

diff --git a/app/assets/stylesheets/color_definitions.scss b/app/assets/stylesheets/color_definitions.scss
index e8b0671..047dcd0 100644
--- a/app/assets/stylesheets/color_definitions.scss
+++ b/app/assets/stylesheets/color_definitions.scss
@@ -31,6 +31,7 @@
   --primary-low-rgb: #{hexToRGB($primary-low)};
   --secondary-rgb: #{hexToRGB($secondary)};
   --header_background-rgb: #{hexToRGB($header_background)};
+  --tertiary-rgb: #{hexToRGB($tertiary)};
 
   --primary-very-low: #{$primary-very-low};
   --primary-low: #{$primary-low};
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 0d05ee4..866a761 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -114,8 +114,8 @@
     height: $td-posters-height;
   }
   .posters a:first-child .avatar.latest:not(.single) {
-    box-shadow: 0 0 3px 1px desaturate($tertiary-medium, 35%);
-    border: 2px solid desaturate($tertiary-medium, 40%);
+    box-shadow: 0 0 3px 1px rgba(var(--tertiary-rgb), 0.35);
+    border: 2px solid rgba(var(--tertiary-rgb), 0.5);
     position: relative;
     top: -2px;
     left: -2px;
diff --git a/app/assets/stylesheets/vendor/pikaday.scss b/app/assets/stylesheets/vendor/pikaday.scss
index 0ec9a3d..0ec34e0 100644
--- a/app/assets/stylesheets/vendor/pikaday.scss
+++ b/app/assets/stylesheets/vendor/pikaday.scss
@@ -1,4 +1,5 @@
 @import "common/foundation/variables";
+@import "common/foundation/mixins";
 
 /*!
  * Pikaday
@@ -114,14 +115,9 @@ $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
     text-indent: 20px; // hide text using text-indent trick, using width value (it's enough)
     white-space: nowrap;
     overflow: hidden;
-    background-color: transparent;
-    background-position: center center;
-    background-repeat: no-repeat;
+    background-color: var(--primary); // sets color of SVG masks below
     background-size: 75% 75%;
     opacity: .5;
-    @if (lightness($secondary) < 50) { // invert the black png if the background is dark
-        filter: invert(1);
-    }
 
     &:hover {
         opacity: 1;
@@ -136,14 +132,28 @@ $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
 .pika-prev,
 .is-rtl .pika-next {
     float: left;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
+    -webkit-mask: svg-uri(
+        '<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 192 512"><path d="M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z"></path></svg>'
+      )
+      no-repeat 50% 50%;
+    mask: svg-uri(
+        '<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 192 512"><path d="M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z"></path></svg>'
+      )
+      no-repeat 50% 50%;
 }
 
 .pika-next,
 .is-rtl .pika-prev {
     float: right;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
-}
+    -webkit-mask: svg-uri(
+        '<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg>'
+      )
+      no-repeat 50% 50%;
+    mask: svg-uri(
+        '<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg>'
+      )
+      no-repeat 50% 50%;
+  }
 
 .pika-select {
     display: inline-block;

GitHub sha: fb91320c