Updated User Interface (markdown)

User-Interface.md

@@ -376,4 +376,191 @@ This layer shows the icons of the burgs. When this layer is on, when hovering a
 
 This layer shows the topographical map. When this layer is on, when hovering a cell, its height will be displayed in the tooltip. A topographic map describes the height (relative to sea level) of the map at the various points (cells). All secondary data (rivers, cities, countries, markers, etc.) depend on the topographical map, so it is of great importance.
 
-Each cell is associated with a height, which is a number between 0 and 100.
+Each cell is associated with a height, which is a number between 0 and 100.
+
+# Style tab
+
+The style tab allows applying design settings, both in general to the entire map, and privately to certain elements, such as the color of elements, their degree of opacity, etc.
+
+This is the final stage in the preparation of the map, after all its logic is ready.
+
+After choosing an element for design (eg Anchor Icons or biomes), you can customize its design with a variety of controls.
+
+For many of the elements there are the same design controls with the same functionality, below is their breakdown:
+
+![image](https://github.com/user-attachments/assets/f4277f5d-e45a-440c-83f6-52f2e02cab71)
+
+Sometimes, elements are divided into groups. For example, by default, lakes are divided into 6 groups: fresh water, salt water, dry, etc.
+
+You can customize the display of each of the groups separately, for example, a freshwater lake can be drawn in blue, and a saltwater lake can be drawn in red.
+
+Note that next to the group, there is a number that records how many elements there are from the group.
+
+
+### Opacity 
+
+![image](https://github.com/user-attachments/assets/df451f6d-70f1-4ee7-9599-31f5f4839d23)
+
+A slider that determines the degree of opacity of the element (value between 0 and 1).
+
+If equal to 0, the color of the element will (mostly) be the color of what is below it, for example the color of the river will be the color of the land on which it flows (and if there is a layer that colors the land, it will be the army). Note that there are exceptions, for example for a lake, the color of the element will be the color of the sea.
+
+### Shift by axes
+
+![image](https://github.com/user-attachments/assets/e15a2e67-e9b0-4778-a2ef-11911d69b982)
+
+Allows you to shift the layer on the x-axis and the y-axis.
+
+For example, for texture styling, if we choose this:
+
+70, 10
+
+The map will look like this:
+
+<details>
+<summary>Show Image</summary>
+
+![image](https://github.com/user-attachments/assets/52c8cf26-4677-4505-b578-7f58e7b035d6)
+You see that the texture layer moves to the right by 50 units, and moves down by 70 units.
+</details>
+
+### Filter 
+
+![image](https://github.com/user-attachments/assets/9ae43d89-f729-4ef2-b554-653d295afd5a)
+
+Contains additional display settings on the element, according to a filter. Each filter has certain display settings.
+
+For example, Blur 1 creates a light blur around the element, while Blur 3 creates a heavier blur, while Blur 10 completely blurs the element, effectively hiding it.
+
+This is known as a filter, because you put a "lens" over the object that makes a visual effect on it, for example a blur, or a wrinkled look. It could be called "effect" (on the element).
+
+TODO - add explain for each filter
+
+#### None
+#### Blur 0.2
+#### Blur 1
+#### Blur 3
+#### Blur 5
+#### Blur 7
+#### Blur 10
+#### Splotch
+#### Blurred Splotch
+#### Shadow 2
+#### Shadow 0.1
+#### Shadow 0.5
+#### Outline
+#### Pencil
+#### Turbulence
+#### Paper
+#### Crumpled
+#### Grayscale
+#### Sepia
+#### Dingy
+
+### Clipping 
+
+![image](https://github.com/user-attachments/assets/333f4c01-e7b6-4282-9518-b7f2da6433a2)
+
+Dropdown that allows you to choose whether the layer will apply to the land, the sea, or both.
+#### No clipping 
+The layer will apply to the entire map, including the sea and including the land.
+#### Clip water 
+The layer will only apply to the land.
+#### Clip land 
+The layer will only apply to the sea.
+
+### Common style controls (Fill related)
+
+#### Fill color
+
+![image](https://github.com/user-attachments/assets/d4a949b7-2336-4ac7-a50f-fbc402be9bb7)
+
+Sets the element's fill color.
+
+### Common style controls (Stroke related)
+
+Stroke is the line that surrounds the element.
+
+#### Stroke color
+
+![image](https://github.com/user-attachments/assets/7890332c-1d38-402a-b1c5-6967ee451142)
+
+Sets the fill color of the stroke.
+
+#### Stroke width 
+
+![image](https://github.com/user-attachments/assets/9b3cf590-42ec-4f4b-adce-952aae223698)
+
+Slider that determines the width of the stroke.
+
+The lower the value, the thinner the line will be, to the point of non-existence, and conversely, the higher the value, the thicker the line will be.
+
+### Common style controls (Font related)
+
+#### Font size
+
+![image](https://github.com/user-attachments/assets/347bad04-5b45-451f-8f29-d6c58c0844db)
+
+Determines the font of the text relevant to the element.
+
+### Common style controls (dotted lines related)
+
+#### Stroke dash
+
+![image](https://github.com/user-attachments/assets/6d467a97-a379-4e5a-9d69-d775ab850b23)
+
+This style control contains 2 parts of data.
+
+The number determines the spacing between the dash marks that make up the dashed line.
+
+Value 0 determines that there will be no spaces. The higher the value, the greater the distance between dashes.
+
+The dropdown allows you to determine the appearance of the ends of the dash endcaps that make up the dashed line.
+
+Butt – The dashes have no effect. The line ends exactly at the ends of its starting and ending points, without extending the line beyond these ends.
+
+Square - There is a small addition along the line. More precisely, adds a rectangle at the end of the line, where the width of the rectangle is half the width of the line and the height is equal to the width of the line.
+
+Round - Expand the line at its end using a semicircle, whose diameter is equal to the width of the line.
+
+Inherit - takes the varian of its parent elements, basically a default value.
+
+## Style presets
+
+
+![image](https://github.com/user-attachments/assets/0fd99cd1-5e52-4d70-b137-379bda19ecb3)
+
+Dropdown that allows you to choose a set of design settings for all elements.
+
+Each of those sets defines its design settings for each of the elements, for example the ancient preset defines the texture of the land to be with the image setting to be ancient small, and the Clipping setting to be No clipping.
+
+## Presets
+
+### Default
+### Ancient
+### Gloom
+### Pale
+### Light
+### Watercolor
+### Clean
+### Atlas
+### DarkSeas
+### Cyberpunk
+### Night
+### Monochrome
+
+**+ button** Allows you to add your own set of settings.
+
+## Global filters
+![image](https://github.com/user-attachments/assets/15994c62-1bed-4068-a99d-7d32008892a2)
+
+Allows global filters to be applied to all map elements.
+
+For example, clicking tint will apply the tint filter to all elements.
+
+* Grayscale 
+* Sepia
+* Dingy  
+* Tint  
+
+