diff --git a/README.md b/README.md
index 034b433..5498d38 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,24 @@ This screen is scripted using ImproperUI Script:
+### Recent Changes
+```yml
+Version: 0.0.2-BETA
+
+Added:
+ - property child-constraint: [padding, border, ...]
+ - position saving (use `positionable` tag)
+ - full transparent color: NONE
+ - tag label
+ - tag h1, h2, h3, h4, h5, h6
+
+Patches:
+ - fix slider hitbox
+
+Tweaks:
+ - remake home page
+```
+
### Adding ImproperUI to your Project
To add ImproperUI, you download it as a jar and then add it to gradle manually.
I didn't want to create an online repository and I didn't want to make it a separate mod. Womp Womp.
@@ -144,17 +162,24 @@ This creates a slider that sets and saves values do the config.
### Tags
-| | | | | | |
-| ----------- | ---------------------------- | ---------------- | -------------- | -------- | ---------------------------------------------------------------------------- |
-| Element Tag | Dynamic Hover, Select, Focus | Children Support | Config Support | Aliases | Specific Properties: type |
-| element | ✅ | ✅ | ✅ | e, div | |
-| checkbox | ✅ | ❌ | ✅ | | active:boolean |
-| radio | ✅ | ❌ | ✅ | | active:boolean |
-| button | ✅ | ❌ | ❌ | | |
-| link | ✅ | ❌ | ❌ | a | href:string |
-| slider | ❌ | ❌ | ✅ | | min:double max:double value:double range:double,double decimal-places:integer |
-| input | ❌ | ❌ | ✅ | textbox | pattern:quote placeholder:quote |
-| textfield | ❌ | ❌ | ✅ | textarea | |
+| Element Tag | Dynamic Hover, Select, Focus | Children Support | Config Support | Aliases | Specific Properties: type |
+|--------------|------------------------------|------------------|----------------|-----------|-------------------------------------------------------------------------------|
+| element | ✅ | ✅ | ✅ | e, div | |
+| checkbox | ✅ | ❌ | ✅ | | active:boolean |
+| radio | ✅ | ❌ | ✅ | | active:boolean |
+| button | ✅ | ❌ | ❌ | | |
+| link | ✅ | ❌ | ❌ | a | href:string |
+| slider | ❌ | ❌ | ✅ | | min:double max:double value:double range:double,double decimal-places:integer |
+| input | ❌ | ❌ | ✅ | textbox | pattern:quote placeholder:quote |
+| textfield | ❌ | ❌ | ✅ | textarea | |
+| label | ✅ | ❌ | ❌ | textlabel | |
+| header1 | ✅ | ❌ | ❌ | h1 | |
+| header2 | ✅ | ❌ | ❌ | h2 | |
+| header3 | ✅ | ❌ | ❌ | h3 | |
+| header4 | ✅ | ❌ | ❌ | h4 | |
+| header5 | ✅ | ❌ | ❌ | h5 | |
+| header6 | ✅ | ❌ | ❌ | h6 | |
+| positionable | ✅ | ✅ | ✅ | | |
@@ -171,159 +196,291 @@ Star us to receive latest interesting updates/pull requests!
Liked the home screen? This is the script!
```
-element {
- size: 100%
- background-color: #40000000
-}
-
-element {
+div #background-gradient {
size: 100%
margin-top: 100%
shadow-distance: 50%
- shadow-color: white
- opacity: 0.5
+ shadow-color: #9775a6
}
-element {
- background-color: black
- background-clip: padding
+div #display {
+ size: 420 240
+ center: both
+ border-radius: 10
border-thickness: 1
- border-color: white
- border-radius: 5
+ border-color: #412752
+ background-color: #2d162c
shadow-distance: 5
+ shadow-color: #683a68
- width: 200
- height: 100
- padding: 10
- padding-left: 50
- padding-right: 50
-
- draggable: true
- center: both
-
+ child-align: grid
+ grid-columns: 1
-
- element {
- inner-text: "ImproperUI Interactives v0.0.1"
- width: 100%
+ div #title {
+ inner-text: "ImproperUI Interactives"
+ size: 100% 10
text-align: center
- center: both
+ text-scale: 1.69
+ text-color: #9775a6
+ background-color: none
+ margin-top: 15
}
- element {
- inner-text: "The Ultimate Solution to Rendering Being Too Difficult to Learn"
- text-scale: 0.8
- margin-top: 15
- width: 100%
+ div #motto {
+ inner-text: "We got CSS in Minecraft before GTA 6"
+ size: 100% 10
text-align: center
- center: both
- }
- element {
- inner-text: ">> &7Click Me to send Hello World&r <<"
text-scale: 0.8
-
- margin-top: 45
- width: 150
- border-radius: 5
- background-color: green
- padding: 7
+ background-color: none
+ margin-top: 10
+ }
+ div #motto {
+ inner-text: "The Ultimate Solution To Minecraft Rendering Being Too Difficult"
+ size: 100% 10
text-align: center
- center: both
-
- on-click: sendHelloWorld
- draggable: true
+ text-scale: 0.8
+ background-color: none
+ margin-bottom: 10
}
+ div #navbar {
+ size: 100% 15
+ margin-top: 10
+ background-color: none
- element {
- width: 100%
- height: 40
- opacity: 0
child-align: grid
- grid-columns: 10
- background-clip: padding
- scrollable: true
+ grid-columns: 100
- element {
- size: 20
- border-radius: 50
- background-color: red
- center: horizontal
- background-image: minecraft:textures/item/iron_pickaxe.png
- draggable: true
- }
- element {
- size: 20
- border-radius: 50
- background-color: aqua
- center: horizontal
- background-image: minecraft:textures/item/diamond_sword.png
- draggable: true
- }
- element {
- size: 20
- border-radius: 50
- background-color: yellow
- center: horizontal
- background-image: minecraft:textures/item/golden_axe.png
- draggable: true
- }
- element {
- size: 20
- border-radius: 50
- background-color: lime
- center: horizontal
- background-image: minecraft:textures/item/apple.png
- draggable: true
- }
- element {
- size: 20
- border-radius: 50
- background-color: white
- center: horizontal
- background-image: minecraft:textures/item/arrow.png
- draggable: true
- }
- element {
- size: 20
- border-radius: 50
- background-color: orange
- center: horizontal
- background-image: minecraft:textures/block/bedrock.png
- draggable: true
+ button #discord {
+ inner-text: "Discord"
+ background-color: #9775a6
+ border-radius: 0
+ margin: 0
+ width: 20%
+ padding-left: 0
+ padding-right: 0
+
+ on-click: openDiscord
+
+ hovered => { padding: 3; border-thickness: 0; border-radius: 2; shadow-distance: 2; }
}
- element {
- size: 20
- border-radius: 50
- background-color: orange
- center: horizontal
- background-image: minecraft:textures/block/torch.png
- draggable: true
+ button #github {
+ inner-text: "GitHub"
+ background-color: #9775a6
+ border-radius: 0
+ margin: 0
+ width: 20%
+ padding-left: 0
+ padding-right: 0
+
+ on-click: openGithub
+
+ hovered => { padding: 3; border-thickness: 0; border-radius: 2; shadow-distance: 2; }
}
- element {
- size: 20
- border-radius: 50
- background-color: white
- center: horizontal
- background-image: minecraft:textures/block/diamond_ore.png
- draggable: true
+ button #modrinth {
+ inner-text: "Modrinth"
+ background-color: #9775a6
+ border-radius: 0
+ margin: 0
+ width: 20%
+ padding-left: 0
+ padding-right: 0
+
+ on-click: openModrinth
+
+ hovered => { padding: 3; border-thickness: 0; border-radius: 2; shadow-distance: 2; }
}
- element {
- size: 20
- border-radius: 50
- background-color: lime
- center: horizontal
- background-image: minecraft:textures/block/gold_block.png
- draggable: true
+ button #wiki {
+ inner-text: "Wiki"
+ background-color: #9775a6
+ border-radius: 0
+ margin: 0
+ width: 20%
+ padding-left: 0
+ padding-right: 0
+
+ on-click: openWiki
+
+ hovered => { padding: 3; border-thickness: 0; border-radius: 2; shadow-distance: 2; }
}
- element {
- size: 20
- border-radius: 50
- background-color: lime
- center: horizontal
- background-image: minecraft:textures/block/netherrack.png
- draggable: true
+ button #wiki {
+ inner-text: "Example"
+ background-color: #9775a6
+ border-radius: 0
+ margin: 0
+ width: 20%
+ padding-left: 0
+ padding-right: 0
+
+ on-click: openExampleScreen
+
+ hovered => { padding: 3; border-thickness: 0; border-radius: 2; shadow-distance: 2; }
}
}
+
+ div #mini-world {
+ size: 100% 140
+ background-color: none
+
+ child-align: grid
+ grid-columns: 21
+
+ scrollable: true
+ background-clip: padding
+
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/oak_leaves.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } div #greenshade { size: 100%; background-color: green; opacity: 0.5; click-through: true; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/oak_leaves.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } div #greenshade { size: 100%; background-color: green; opacity: 0.5; click-through: true; } }
+ div #block { background-image: textures/block/oak_leaves.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } div #greenshade { size: 100%; background-color: green; opacity: 0.5; click-through: true; } }
+ div #block { background-image: textures/block/oak_leaves.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } div #greenshade { size: 100%; background-color: green; opacity: 0.5; click-through: true; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/stone.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/oak_leaves.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } div #greenshade { size: 100%; background-color: green; opacity: 0.5; click-through: true; } }
+ div #block { background-image: textures/block/oak_leaves.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } div #greenshade { size: 100%; background-color: green; opacity: 0.5; click-through: true; } }
+ div #block { background-image: textures/block/oak_leaves.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } div #greenshade { size: 100%; background-color: green; opacity: 0.5; click-through: true; } }
+ div #block { background-image: textures/block/oak_leaves.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } div #greenshade { size: 100%; background-color: green; opacity: 0.5; click-through: true; } }
+ div #block { background-image: textures/block/oak_leaves.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } div #greenshade { size: 100%; background-color: green; opacity: 0.5; click-through: true; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/stone.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/stone.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/oak_leaves.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } div #greenshade { size: 100%; background-color: green; opacity: 0.5; click-through: true; } }
+ div #block { background-image: textures/block/oak_leaves.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } div #greenshade { size: 100%; background-color: green; opacity: 0.5; click-through: true; } }
+ div #block { background-image: textures/block/oak_leaves.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } div #greenshade { size: 100%; background-color: green; opacity: 0.5; click-through: true; } }
+ div #block { background-image: textures/block/oak_leaves.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } div #greenshade { size: 100%; background-color: green; opacity: 0.5; click-through: true; } }
+ div #block { background-image: textures/block/oak_leaves.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } div #greenshade { size: 100%; background-color: green; opacity: 0.5; click-through: true; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/stone.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/stone.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/stone.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/stone.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/oak_log.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/stone.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/stone.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/stone.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/stone.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/stone.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/stone.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/oak_log.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/ice.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ div #block { background-image: textures/block/grass_block_side.png; size: 20; draggable: true; hovered => { border-thickness: 1; border-color: white; } }
+ }
}
```
diff --git a/assets/demo.png b/assets/demo.png
index 8dcf488..f865ad9 100644
Binary files a/assets/demo.png and b/assets/demo.png differ