1* {
2 box-sizing: border-box;
3}
4
5body {
6 margin: 0;
7 font-family: system-ui, sans-serif;
8 font-size: 18px;
9 color: #333;
10}
11
12h1,
13h2,
14h3,
15h4,
16h5,
17h6 {
18 font-family: sans-serif;
19 font-weight: 500;
20 text-transform: lowercase;
21 border-bottom: 1px solid #ededed;
22}
23
24.container {
25 margin: 15px auto;
26 padding: 0 10px;
27 max-width: 650px;
28}
29
30nav {
31 background-color: #e9e9e9;
32 font-size: 2rem;
33 padding: 5px;
34 position: fixed;
35 bottom: 0;
36 left: 0;
37 width: 100%;
38 overflow: hidden;
39}
40
41.nav-items-wrapper {
42 display: flex;
43 justify-content: space-between;
44 max-width: 1000px;
45 margin: auto;
46}
47
48nav a {
49 text-decoration: none;
50 text-align: center;
51 padding: 3px;
52}
53
54nav input[type="text"] {
55 padding: 5px;
56 font-size: 1.1rem;
57}
58
59ol > li {
60 margin-top: 1rem;
61}
62
63small {
64 font-size: small;
65}
66
67.empty-height {
68 padding-top: 2em;
69 padding-bottom: 2em;
70}
71
72.d-none {
73 display: none;
74}
75
76.cursor-pointer {
77 cursor: pointer;
78}
79
80.h6 {
81 font-size: 17px;
82 font-weight: 700;
83}
84
85.small {
86 font-size: small;
87}
88
89.upi-icon {
90 font-style: italic;
91 color: #097537;
92 display: inline-grid; /* Or 'grid' if you want a block-level container */
93 grid-template-areas: "overlay";
94}
95
96.upi-icon > :first-child {
97 color: #e5712d;
98 margin-right: 20px;
99}
100
101.upi-icon-bottom,
102.upi-icon-top {
103 grid-area: overlay; /* Forces both spans into the exact same grid space */
104}
105
106.upi-icon-top {
107 z-index: 2; /* Ensures this span stays on top */
108}
109
110.nav-link.active {
111 padding: 0px 3px;
112 border-top: 5px solid #a4a5a6;
113}
114
115.muted {
116 color: #bcbcbc;
117}
118
119.text-center {
120 text-align: center;
121}
122
123.text-right {
124 text-align: right;
125}
126
127.h-100 {
128 height: 100%;
129}
130
131.d-flex {
132 display: flex;
133}
134
135.flex-grow {
136 flex-grow: 1;
137}
138
139.page-loader {
140 display: flex;
141 justify-content: center;
142 align-items: center;
143 font-size: 3em;
144 height: 320px;
145}
146
147/* activity cards */
148.activity-card {
149 border: 1px solid #dfdfdf;
150 padding: 2px;
151 margin-bottom: 5px;
152 display: flex;
153 border-radius: 3px;
154 box-shadow: 3px 3px #efefef;
155}
156
157.activity-card p {
158 margin: 0px;
159 padding: 0px;
160}
161
162.activity-card-completed {
163 color: #ccc;
164 border-color: #eee;
165}
166
167.activity-card > * {
168 padding: 3px;
169}
170
171.info-box {
172 padding: 10px;
173 border: 2px dashed #ddd;
174}
175
176.info-box-danger {
177 border-color: #a61200;
178}
179
180/* buttons */
181.btn {
182 background: #46b00d;
183 border-radius: 5px; /* rounded corners */
184 border: 0;
185 color: #fff;
186 cursor: pointer;
187 display: inline-block; /* Enables non-inline-block elements like <div>s to be buttons */
188 margin: 2px 0;
189 padding: 6px 15px 7px;
190}
191
192.btn:disabled {
193 background: #cdcdcd;
194 cursor: not-allowed;
195}
196
197.btn:hover {
198 background: #379c00;
199}
200
201.btn[type="submit"],
202.btn-big {
203 font-size: 1.3rem;
204 padding: 12px 30px 14px;
205}
206
207.btn-danger {
208 background-color: #a61200;
209}
210
211.btn-danger:hover {
212 background: #7b1003;
213}
214
215.btn-text {
216 background: none;
217 color: inherit;
218 padding: 0px;
219}
220.btn-text:hover {
221 background: inherit;
222 font-weight: bold;
223}
224.btn-text:disabled {
225 background: inherit;
226 cursor: not-allowed;
227 color: #cdcdcd;
228}
229
230.btn-b {
231 background-color: #0787a7;
232}
233
234.btn-b:hover {
235 background: #056a83;
236}
237
238
239/* forms */
240label {
241 font-size: 16px;
242}
243
244label > * {
245 display: inline;
246}
247
248form > * {
249 display: block;
250 margin-bottom: 10px;
251}
252
253textarea,
254input,
255select {
256 border: 1px solid #ccc;
257 padding: 8px;
258 width: 100%;
259 display: block;
260 box-sizing: border-box;
261 border-radius: 3px;
262 font-size: 18px;
263}
264input[type="checkbox"] {
265 display: inline-block;
266 width: inherit;
267}
268
269textarea:focus,
270input:focus,
271select:focus {
272 border-color: #5ab;
273}
274
275textarea,
276input[type="text"] {
277 -webkit-appearance: none; /* make iOS inputs pretty */
278 outline: 0;
279}
280
281.multi-select > option {
282 padding: 6px 15px 7px;
283}
284
285fieldset {
286 border: 2px dashed #ddd;
287}
288
289/* tables */
290.table th,
291.table td {
292 padding: 0.5em;
293 text-align: left;
294}
295
296.table tbody > :nth-child(2n-1) {
297 /* We use tbody to ensure that we don't shade the heading - this preserves the order of the shading */
298 background: #ddd; /* Shade every other table row */
299}
300
301.b-t {
302 border-top: 1px solid #ddd;
303}
304.b-l {
305 border-left: 1px solid #ddd;
306}
307.b-b {
308 border-bottom: 1px solid #ddd;
309}
310
311.nohover:hover {
312 text-decoration: none;
313 font-weight: inherit;
314}
315
316.force-initial-color {
317 color: #333;
318}