feat: add style assets

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]
 

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");
+    }
+}

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;
+}

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;
+}

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");
-    }
-}