more docs

docs/examples/styles/scrollbar_size.py

@@ -0,0 +1,38 @@
+from textual.app import App
+from textual import layout
+from textual.widgets import Static
+
+TEXT = """I must not fear.
+Fear is the mind-killer.
+Fear is the little-death that brings total obliteration.
+I will face my fear.
+I will permit it to pass over me and through me.
+And when it has gone past, I will turn the inner eye to see its path.
+Where the fear has gone there will be nothing. Only I will remain.
+"""
+
+
+class ScrollbarApp(App):
+    CSS = """
+    Screen {
+        background: white;
+        color: blue 80%;
+        layout: horizontal;
+    }
+    
+    Static {
+        padding: 1 2;
+        width: 200;
+    }
+
+    .panel {
+        scrollbar-size: 10 4;
+        padding: 1 2;        
+    }     
+    """
+
+    def compose(self):
+        yield layout.Vertical(Static(TEXT * 5), classes="panel")
+
+
+app = ScrollbarApp()

docs/examples/styles/scrollbars.py

@@ -0,0 +1,49 @@
+from textual.app import App
+from textual import layout
+from textual.widgets import Static
+
+TEXT = """I must not fear.
+Fear is the mind-killer.
+Fear is the little-death that brings total obliteration.
+I will face my fear.
+I will permit it to pass over me and through me.
+And when it has gone past, I will turn the inner eye to see its path.
+Where the fear has gone there will be nothing. Only I will remain.
+"""
+
+
+class ScrollbarApp(App):
+    CSS = """
+
+    Screen {
+        background: #212121;
+        color: white 80%;
+        layout: horizontal;
+    }
+    
+    Static {
+        padding: 1 2;
+    }
+
+    .panel1 {
+        width: 1fr;
+        scrollbar-color: green;
+        scrollbar-background: #bbb;
+        padding: 1 2;        
+    } 
+
+    .panel2 {
+        width: 1fr;
+        scrollbar-color: yellow;
+        scrollbar-background: purple;
+        padding: 1 2;
+    }   
+    
+    """
+
+    def compose(self):
+        yield layout.Vertical(Static(TEXT * 5), classes="panel1")
+        yield layout.Vertical(Static(TEXT * 5), classes="panel2")
+
+
+app = ScrollbarApp()

docs/styles/height.md

@@ -1,10 +1,10 @@
 # Height
 
-The `height` style sets a widget's height. By default, it sets the height of the content area, but if `box-sizing` is set to `border-box` it sets the height of the border area.
+The `height` rule sets a widget's height. By default, it sets the height of the content area, but if `box-sizing` is set to `border-box` it sets the height of the border area.
 
 ## Example
 
-=== "width.py"
+=== "height.py"
 
     ```python
     --8<-- "docs/examples/styles/height.py"

docs/styles/overflow.md

@@ -42,9 +42,9 @@ overflow-x: scroll;
 
 ```python
 # Hide the vertical scrollbar
-self.styles.overflow_y = "hidden"
+widget.styles.overflow_y = "hidden"
 
 # Always show the horizontal scrollbar
-self.styles.overflow_x = "scroll"
+widget.styles.overflow_x = "scroll"
 
 ```

docs/styles/scrollbar.md

@@ -0,0 +1,43 @@
+# Scrollbar colors
+
+There are a number of rules to set the colors used in Textual scrollbars. You won't typically need to do this, as the default themes have carefully chosen colors, but you can if you want to.
+
+| Rule                         | Color                                                   |
+| ---------------------------- | ------------------------------------------------------- |
+| `scrollbar-color`            | Scrollbar "thumb" (movable part)                        |
+| `scrollbar-color-hover`      | Scrollbar thumb when the mouse is hovering over it      |
+| `scrollbar-color-active`     | Scrollbar thumb when it is active (being dragged)       |
+| `scrollbar-background`       | Scrollbar background                                    |
+| `scrollbar-background-hover` | Scrollbar background when the mouse is hovering over it |
+| `scrollbar-color-active`     | Scrollbar background when the thumb is being dragged    |
+
+## Example
+
+In this example we have two panels, with different scrollbar colors set for each.
+
+=== "scrollbars.py"
+
+    ```python
+    --8<-- "docs/examples/styles/scrollbars.py"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/scrollbars.py"}
+    ```
+
+## CSS
+
+```sass
+/* Set widget scrollbar color to yellow */
+Widget {
+    scrollbar-color: yellow;
+}
+```
+
+## Python
+
+```python
+# Set the scrollbar color to yellow
+widget.styles.scrollbar_color = "yellow"
+```

docs/styles/scrollbar_size.md

@@ -0,0 +1,37 @@
+# Scrollbar-size
+
+The `scrollbar-size` rule changes the size of the scrollbars. It takes 2 integers for horizontal and vertical scrollbar size respectively.
+
+The scrollbar dimensions may also be set individually with `scrollbar-size-horizontal` and `scrollbar-size-vertical`.
+
+## Example
+
+In this example we modify the size of the widgets scrollbar to be _much_ larger than usual.
+
+=== "scrollbar_size.py"
+
+    ```python
+    --8<-- "docs/examples/styles/scrollbar_size.py"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/scrollbar_size.py"}
+    ```
+
+## CSS
+
+```sass
+/* Set horizontal scrollbar to 10, and vertical scrollbar to 4 */
+Widget {
+    scrollbar-size: 10 4;
+}
+```
+
+## Python
+
+```python
+# Set horizontal scrollbar to 10, and vertical scrollbar to 4
+widget.styles.horizontal_scrollbar = 10
+widget.styles.vertical_scrollbar = 10
+```

docs/styles/width.md

@@ -1,6 +1,6 @@
 # Width
 
-The `width` style sets a widget's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box` it sets the width of the border area.
+The `width` rule sets a widget's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box` it sets the width of the border area.
 
 ## Example