local_spaceit/styles.css at main · learnweb/local_spaceit · 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
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
/* SpaceIt overview page. */

/* Completed-reviews chart: a full year of daily bars. The Y axis lives in a
   fixed left column (.local_spaceit-chart-yaxis) outside the scroll area, so it
   stays put while only the bars and their labels scroll horizontally. The plot
   height drives the bar percentages and the Y-tick positions, so both columns
   share it. */
.local_spaceit-chart {
    --plot-h: 300px;
}

.local_spaceit-chart-plot {
    align-items: flex-start;
}

.local_spaceit-chart-yaxis {
    position: relative;
    flex: 0 0 auto;
    width: 2.25rem;
    height: var(--plot-h);
    margin-right: 0.25rem;
}

.local_spaceit-chart-ytick {
    position: absolute;
    right: 0.25rem;
    transform: translateY(50%);
    font-size: 0.75rem;
    line-height: 1;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
}

.local_spaceit-chart-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1 1 auto;
}

.local_spaceit-chart-bars {
    display: flex;
    align-items: flex-end;
    height: var(--plot-h);
    /* Horizontal gridlines at each Y tick (one line every --grid-step). */
    background-image: repeating-linear-gradient(
        to top,
        rgba(0, 0, 0, 0.08) 0,
        rgba(0, 0, 0, 0.08) 1px,
        transparent 1px,
        transparent var(--grid-step, 20%));
}

.local_spaceit-chart-cell {
    flex: 0 0 var(--day-w, 34px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}

.local_spaceit-chart-bar {
    width: 60%;
    min-height: 0;
    background-color: var(--bs-primary, #0f6cbf);
    border-radius: 2px 2px 0 0;
}

.local_spaceit-chart-xaxis {
    display: flex;
}

.local_spaceit-chart-xlabel {
    flex: 0 0 var(--day-w, 34px);
    padding-top: 0.25rem;
    text-align: center;
    font-size: 0.7rem;
    line-height: 1.1;
    white-space: nowrap;
    color: var(--bs-secondary-color, #6c757d);
}

/* Items table: cap the height to roughly ten rows and scroll the rest, so a
   long list stays a fixed-size window. The header sticks to the top of that
   window (with a solid background, since the rows below are striped) so the
   column names — and the Recall help icon — stay in view while scrolling. */
.local_spaceit-overview-scroll {
    max-height: 32rem;
    overflow-y: auto;
}

/* Bootstrap tables collapse their borders, so cell borders are painted at the
   table level and do not travel with the sticky header — scrolling rows then
   bleed a couple of pixels past it. Separating the borders lets each header
   cell carry its own background and dividers, keeping the header opaque and
   flush against the top of the scroll window. */
.local_spaceit-overview-scroll > table {
    border-collapse: separate;
    border-spacing: 0;
}

/* A table-level top border belongs to the body flow, so it scrolls out of view
   and the header's top line vanishes as soon as you scroll. Drop it and draw
   both the top and bottom rules on the sticky cells instead, so the header
   keeps its border at rest and while scrolling alike. */
.local_spaceit-overview-scroll > table,
.local_spaceit-overview-scroll > table > thead > tr > th {
    border-top: 0;
}

.local_spaceit-overview-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bs-body-bg, #fff);
    box-shadow:
        inset 0 1px 0 0 var(--bs-border-color, #dee2e6),
        inset 0 -1px 0 0 var(--bs-border-color, #dee2e6);
}

/* Every header sits at the same height regardless of a help icon: centre the
   cell content and align the icon to the middle of the label. The help icon is
   a Bootstrap .btn (inline-block, baseline-aligned), which otherwise makes its
   column taller than the plain "Runs" header. Its trailing .me-2 margin is also
   dropped so the icon does not widen the column. */
.local_spaceit-overview thead th {
    vertical-align: middle;
}

.local_spaceit-overview thead th .btn {
    vertical-align: middle;
    margin-right: 0 !important;
}

/* Trim the horizontal cell padding so the table — a touch wider now that three
   headers carry help icons — still fits on desktop without a sideways scroll. */
.local_spaceit-overview {
    --bs-table-cell-padding-x: 0.1rem;
}