textual 1.0.0-dev

A reactive TUI framework inspired by the Python Textual library
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

// Base/shared widget defaults: Screen, ModalScreen, ScrollView, Widget, Label, Spacer
// DC-01: Screen aligned with Python Textual _screen.py DEFAULT_CSS
// DC-03: ModalScreen aligned with Python Textual _screen.py DEFAULT_CSS
// DC-04: Widget base aligned with Python Textual widget.py DEFAULT_CSS
// DC-05: Label aligned with Python Textual _label.py DEFAULT_CSS

pub(super) const DEFAULT_CSS: &str = r#"
Screen {
    layout: vertical;
    overflow-y: auto;
    overflow-x: hidden;
    bg: $background;

    &:inline {
        height: auto;
        min-height: 1;
        border-top: tall $background;
        border-bottom: tall $background;
    }

    &:ansi {
        background: ansi_default;
        color: ansi_default;
    }

    & .screen--selection {
        background: $primary 50%;
    }
}

Screen:ansi.-screen-suspended {
    text-style: dim;
}

Screen:ansi.-screen-suspended ScrollBar {
    text-style: not dim;
}

ModalScreen {
    layout: vertical;
    overflow-y: auto;
    bg: $background 60%;

    &:ansi {
        background: transparent;
    }
}

Widget {
    scrollbar-background: $scrollbar-background;
    scrollbar-background-hover: $scrollbar-background-hover;
    scrollbar-background-active: $scrollbar-background-active;
    scrollbar-color: $scrollbar;
    scrollbar-color-active: $scrollbar-active;
    scrollbar-color-hover: $scrollbar-hover;
    scrollbar-corner-color: $scrollbar-corner-color;
    scrollbar-size-vertical: 2;
    scrollbar-size-horizontal: 1;
    link-color: $link-color;
    link-background: $link-background;
    link-background-hover: $link-background-hover;
    link-color-hover: $link-color-hover;
    link-style: $link-style;
    link-style-hover: $link-style-hover;
    background: transparent;
}

ScrollView {
    overflow-y: auto;
    overflow-x: auto;
}

ScrollView > .scrollview--content { transition: scrollview.offset 140ms ease-out; }

Label {
    width: auto;
    height: auto;
    min-height: 1;
    fg: $foreground;

    &.success {
        color: $text-success;
        bg: $success-muted;
    }
    &.error {
        color: $text-error;
        bg: $error-muted;
    }
    &.warning {
        color: $text-warning;
        bg: $warning-muted;
    }
    &.primary {
        color: $text-primary;
        bg: $primary-muted;
    }
    &.secondary {
        color: $text-secondary;
        bg: $secondary-muted;
    }
    &.accent {
        color: $text-accent;
        bg: $accent-muted;
    }
}

Spacer { bg: $background; }

*:disabled:can-focus {
    opacity: 70%;
}
"#;