fix: ui fixes for webkit-based browsers

views/sass/_abstracts.scss

@@ -10,16 +10,22 @@
 $clr-primary: #e3f6f5;
 $clr-secondary: #272343;
 $clr-highlight: #ff5277;
+$ff-default: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
+  helvetica neue, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+$ff-monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
+  monospace;
 
 $misc-vars: (
   ff-primary: (
     'Worksans',
-    sans-serif,
+    $ff-default,
   ),
   ff-alt-alpha: (
     'QuickSand',
-    sans-serif,
+    $ff-default,
   ),
+  ff-default: $ff-default,
+  ff-mono: $ff-monospace,
   fs-160: 1.6rem,
   fs-180: 1.8rem,
   fs-200: 2rem,

views/sass/_base.scss

@@ -63,6 +63,12 @@ body {
       @include get-themed-vars(dark);
     }
   }
+
+  // disabling fonts for webkit
+  @include fix-for-safari {
+    --ff-primary: var(--ff-default);
+    --ff-alt-alpha: var(--ff-default);
+  }
 }
 
 .body {

views/sass/_components.scss

@@ -302,6 +302,11 @@
     list-style-type: none;
 
     cursor: pointer;
+
+    // for hinding triangle on webkit
+     &::-webkit-details-marker {
+      display: none;
+    }
   }
   &__icon {
     height: 1em;
@@ -559,6 +564,12 @@
     background-color: transparent;
     font: inherit;
     caret-color: var(--clr-base-icon);
+
+    // fix for browsers with non-standard properties. yes, webkit and blink suck.
+    -webkit-appearance: none;
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
   }
 
   &__button {

views/sass/_mixins.scss

@@ -109,3 +109,13 @@ $breakpoints: (
     @content;
   }
 }
+
+////////////////////////////////////////////////////////////////
+//           CHECK IF BROWSER IS SAFARI(it's the new IE)
+////////////////////////////////////////////////////////////////
+
+@mixin fix-for-safari {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    @content;
+  }
+}