From 44229f87027b1b15d38c2739b9d85bec40a36bd8 Mon Sep 17 00:00:00 2001
From: zyachel <aricla@protonmail.com>
Date: Sun, 15 Jan 2023 21:36:57 +0530
Subject: [PATCH] fix: ui fixes for webkit-based browsers

---
 views/sass/_abstracts.scss  | 10 ++++++++--
 views/sass/_base.scss       |  6 ++++++
 views/sass/_components.scss | 11 +++++++++++
 views/sass/_mixins.scss     | 10 ++++++++++
 4 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/views/sass/_abstracts.scss b/views/sass/_abstracts.scss
index f49485c..2e68d26 100644
--- a/views/sass/_abstracts.scss
+++ b/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,
diff --git a/views/sass/_base.scss b/views/sass/_base.scss
index 9fa94cd..8a81e4d 100644
--- a/views/sass/_base.scss
+++ b/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 {
diff --git a/views/sass/_components.scss b/views/sass/_components.scss
index f265541..4cc231d 100644
--- a/views/sass/_components.scss
+++ b/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 {
diff --git a/views/sass/_mixins.scss b/views/sass/_mixins.scss
index 8af644d..450d49f 100644
--- a/views/sass/_mixins.scss
+++ b/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;
+  }
+}
\ No newline at end of file