matous-volf/todo-baggins
matous-volf/todo-baggins
1
0
Fork 0
Code Issues 23 Pull Requests Actions Projects 1 Activity

feat: add style assets

Browse Source
This commit is contained in:
Matouš Volf 2024-08-31 10:44:55 +02:00
parent c08cba9459
commit 765e0a1770
5 changed files with 97 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
Dioxus.toml
View File

@ -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]

17
assets/styles/fonts.css Normal file
View File

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

10
assets/styles/input_number_arrows.css Normal file
View File

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

63
assets/styles/input_range.css Normal file
View File

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

18
src/styles/tailwind.css
View File

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