From 765e0a1770d372672c1fb614e6c8ee967ae10600 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matou=C5=A1=20Volf?= <git@matousvolf.cz>
Date: Sat, 31 Aug 2024 10:44:55 +0200
Subject: [PATCH] feat: add style assets

---
 Dioxus.toml                           |  9 +++-
 assets/styles/fonts.css               | 17 ++++++++
 assets/styles/input_number_arrows.css | 10 +++++
 assets/styles/input_range.css         | 63 +++++++++++++++++++++++++++
 src/styles/tailwind.css               | 18 --------
 5 files changed, 97 insertions(+), 20 deletions(-)
 create mode 100644 assets/styles/fonts.css
 create mode 100644 assets/styles/input_number_arrows.css
 create mode 100644 assets/styles/input_range.css

diff --git a/Dioxus.toml b/Dioxus.toml
index e396b3a..44e6de0 100644
--- a/Dioxus.toml
+++ b/Dioxus.toml
@@ -31,10 +31,15 @@ watch_path = ["src", "assets"]
 
 # CSS style file
 
-style = ["/styles/tailwind_output.css"]
+style = [
+    "/styles/tailwind_output.css",
+    "/styles/fonts.css",
+    "/styles/input_number_arrows.css",
+    "/styles/input_range.css"
+]
 
 # Javascript code file
-script = []
+script = ["https://kit.fontawesome.com/3c1b409f8f.js"]
 
 [web.resource.dev]
 
diff --git a/assets/styles/fonts.css b/assets/styles/fonts.css
new file mode 100644
index 0000000..e2cb5c0
--- /dev/null
+++ b/assets/styles/fonts.css
@@ -0,0 +1,17 @@
+@layer base {
+    @font-face {
+        font-family: Inter;
+        font-style: normal;
+        font-weight: 100 900;
+        font-display: swap;
+        src: url("/fonts/inter_variable.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: Inter;
+        font-style: italic;
+        font-weight: 100 900;
+        font-display: swap;
+        src: url("/fonts/inter_variable_italic.woff2") format("woff2");
+    }
+}
diff --git a/assets/styles/input_number_arrows.css b/assets/styles/input_number_arrows.css
new file mode 100644
index 0000000..7c952dc
--- /dev/null
+++ b/assets/styles/input_number_arrows.css
@@ -0,0 +1,10 @@
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    display: none;
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type=number] {
+    -moz-appearance:textfield;
+}
diff --git a/assets/styles/input_range.css b/assets/styles/input_range.css
new file mode 100644
index 0000000..4c56e50
--- /dev/null
+++ b/assets/styles/input_range.css
@@ -0,0 +1,63 @@
+input[type=range],
+input[type=range]::-webkit-slider-runnable-track,
+input[type=range]::-webkit-slider-thumb {
+    appearance: none;
+}
+
+input[type=range] {
+    background: transparent;
+}
+
+input[type=range]::-moz-range-thumb {
+    width: 1.25rem;
+    height: 1.25rem;
+    background: rgba(228, 228, 231);
+    border: 0;
+    border-radius: 0.5rem;
+}
+
+input[type=range]::-moz-range-progress {
+    background: #525259;
+    height: 0.5rem;
+    border-radius: 0.25rem;
+}
+
+input[type=range]::-moz-range-track {
+    background: rgba(39, 39, 42, 0.5);
+    height: 0.5rem;
+    border-radius: 0.25rem;
+}
+
+input[type=range].input-range-reverse::-moz-range-progress {
+    background: #2d2d31;
+    height: 0.5rem;
+    border-radius: 0.25rem;
+}
+
+input[type=range].input-range-reverse::-moz-range-track {
+    background: rgba(113, 113, 122, 0.5);
+    height: 0.5rem;
+    border-radius: 0.25rem;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    width: 1.25rem;
+    height: 1.25rem;
+    background: rgba(228, 228, 231);
+    border: 0;
+    border-radius: 0.5rem;
+    position: relative;
+    top: -0.4rem;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+    background: rgba(39, 39, 42, 0.5);
+    height: 0.5rem;
+    border-radius: 0.25rem;
+}
+
+input[type=range].input-range-reverse::-webkit-slider-runnable-track {
+    background: rgba(39, 39, 42, 0.5);
+    height: 0.5rem;
+    border-radius: 0.25rem;
+}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index e671a7c..4f70d83 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -13,21 +13,3 @@ html, body, #main {
 }
 
 /* stylelint-enable */
-
-@layer base {
-    @font-face {
-        font-family: Inter;
-        font-style: normal;
-        font-weight: 100 900;
-        font-display: swap;
-        src: url("/fonts/inter_variable.woff2") format("woff2");
-    }
-
-    @font-face {
-        font-family: Inter;
-        font-style: italic;
-        font-weight: 100 900;
-        font-display: swap;
-        src: url("/fonts/inter_variable_italic.woff2") format("woff2");
-    }
-}