This repository has no description
1/* ActivityChart.css */
2
3.activity-chart-container {
4 background-color: var(--navbar-bg);
5 border: 1px solid var(--card-border);
6 border-radius: 8px;
7 padding: 20px;
8 margin-bottom: 20px;
9}
10
11.time-period-selector {
12 display: flex;
13 justify-content: center;
14 margin-bottom: 15px;
15 flex-wrap: wrap;
16 gap: 8px;
17 max-width: 90%;
18 margin-left: auto;
19 margin-right: auto;
20}
21
22.time-period-button {
23 background-color: var(--navbar-bg);
24 color: var(--text);
25 border: 1px solid var(--card-border);
26 border-radius: 4px;
27 padding: 8px 10px;
28 font-size: 0.85rem;
29 cursor: pointer;
30 transition: all 0.2s ease;
31 flex: 1;
32 min-width: 90px;
33 white-space: nowrap;
34}
35
36.time-period-button:hover {
37 border-color: var(--button-bg);
38}
39
40.time-period-button.active {
41 background-color: var(--button-bg);
42 color: var(--button-text);
43 border-color: var(--button-bg);
44}
45
46.chart-container {
47 height: 300px;
48 position: relative;
49}
50
51.chart-summary {
52 margin-top: 15px;
53 text-align: center;
54 font-size: 0.9rem;
55 color: var(--text);
56 opacity: 0.8;
57}
58
59.activity-chart-empty,
60.activity-chart-loading {
61 height: 300px;
62 display: flex;
63 justify-content: center;
64 align-items: center;
65 color: var(--text);
66 opacity: 0.7;
67 border: 1px dashed var(--card-border);
68 border-radius: 6px;
69 margin: 15px 0;
70}
71
72.activity-chart-loading {
73 flex-direction: column;
74}
75
76.chart-loading-note {
77 font-size: 0.8rem;
78 opacity: 0.7;
79 margin-top: 5px;
80}
81
82.chart-loading-spinner {
83 border: 3px solid rgba(var(--button-bg-rgb), 0.3);
84 border-radius: 50%;
85 border-top: 3px solid var(--button-bg);
86 width: 30px;
87 height: 30px;
88 animation: spin 1s linear infinite;
89 margin-bottom: 10px;
90}
91
92@keyframes spin {
93 0% { transform: rotate(0deg); }
94 100% { transform: rotate(360deg); }
95}
96
97@media (max-width: 768px) {
98 .time-period-selector {
99 flex-direction: column;
100 align-items: stretch;
101 }
102
103 .time-period-button {
104 width: 100%;
105 }
106}