lambda_ml_streamlit_exercise/app/styles.css at main · hsma-programme/lambda_ml_streamlit_exercise · GitHub

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
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@200;300;700&display=swap');

html, body, [class*="css"] {
    font-family: 'Lexend', sans-serif;
    font-size: 18px;
    font-weight: 200;
    color: #091747;
}

h1, h2, h3, h4 {
    font-family: 'Lexend', sans-serif;
}

h1 {
    padding: 0.25rem 0px 1rem;
}

/* Tab headers: easy to spot and distinguish. */
[data-testid="stTabs"] [role="tab"] {
    font-family: 'Lexend', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #64748b;
    background-color: #f4f7fc;
    border: 2px solid #8c9bb5;
    border-radius: 0.4rem;
    padding: 0.65rem 1rem;
    margin: 0.2rem 0.3rem 0.3rem 0;
}

[data-testid="stTabs"] [role="tab"] p {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

[data-testid="stTabs"] [role="tab"]:hover {
    border-color: #091747;
}

[data-testid="stTabs"] [role="tab"][aria-selected="true"] {
    color: #091747;
    background-color: #fff5f5;
    border-color: #ff4b4b;
}

/* Streamlit's moving underline would duplicate the selected border. */
[data-testid="stTabs"] [data-baseweb="tab-highlight"] {
    display: none;
}

[data-testid="stTabs"] [role="tab"]:focus-visible {
    outline: 3px solid #be185d;
    outline-offset: 2px;
}

/* Stage 4 use cases: a subtle shade to set each box off from the white page. */
[class*="st-key-use_"] {
    background-color: #e9eef7;
}

/* Stage 2 timeline: the moment the model is run. */
.st-key-timeline_discharge {
    background-color: #e9eef7;
    border: 2px solid #091747 !important;
}

.block-container {
    width: 100%;
    padding: 4rem 2rem 2rem;
    min-width: auto;
    max-width: initial;
}