1 | @font-face { |
---|
2 | font-family: 'Open Sans'; |
---|
3 | font-style: italic; |
---|
4 | font-weight: 300; |
---|
5 | src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url(https://fonts.gstatic.com/s/opensans/v17/memnYaGs126MiZpBA-UFUKWyV9hrIqY.ttf) format('truetype'); |
---|
6 | } |
---|
7 | @font-face { |
---|
8 | font-family: 'Open Sans'; |
---|
9 | font-style: italic; |
---|
10 | font-weight: 400; |
---|
11 | src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v17/mem6YaGs126MiZpBA-UFUK0Zdcg.ttf) format('truetype'); |
---|
12 | } |
---|
13 | @font-face { |
---|
14 | font-family: 'Open Sans'; |
---|
15 | font-style: italic; |
---|
16 | font-weight: 700; |
---|
17 | src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(https://fonts.gstatic.com/s/opensans/v17/memnYaGs126MiZpBA-UFUKWiUNhrIqY.ttf) format('truetype'); |
---|
18 | } |
---|
19 | @font-face { |
---|
20 | font-family: 'Open Sans'; |
---|
21 | font-style: normal; |
---|
22 | font-weight: 300; |
---|
23 | src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype'); |
---|
24 | } |
---|
25 | @font-face { |
---|
26 | font-family: 'Open Sans'; |
---|
27 | font-style: normal; |
---|
28 | font-weight: 400; |
---|
29 | src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype'); |
---|
30 | } |
---|
31 | @font-face { |
---|
32 | font-family: 'Open Sans'; |
---|
33 | font-style: normal; |
---|
34 | font-weight: 700; |
---|
35 | src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOUuhs.ttf) format('truetype'); |
---|
36 | } |
---|
37 | @font-face { |
---|
38 | font-family: 'Open Sans'; |
---|
39 | font-style: normal; |
---|
40 | font-weight: 800; |
---|
41 | src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN8rsOUuhs.ttf) format('truetype'); |
---|
42 | } |
---|
43 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ |
---|
44 | /* Document |
---|
45 | ========================================================================== */ |
---|
46 | /** |
---|
47 | * 1. Correct the line height in all browsers. |
---|
48 | * 2. Prevent adjustments of font size after orientation changes in iOS. |
---|
49 | */ |
---|
50 | html { |
---|
51 | line-height: 1.15; |
---|
52 | /* 1 */ |
---|
53 | -webkit-text-size-adjust: 100%; |
---|
54 | /* 2 */ |
---|
55 | } |
---|
56 | /* Sections |
---|
57 | ========================================================================== */ |
---|
58 | /** |
---|
59 | * Remove the margin in all browsers. |
---|
60 | */ |
---|
61 | body { |
---|
62 | margin: 0; |
---|
63 | } |
---|
64 | /** |
---|
65 | * Render the `main` element consistently in IE. |
---|
66 | */ |
---|
67 | main { |
---|
68 | display: block; |
---|
69 | } |
---|
70 | /** |
---|
71 | * Correct the font size and margin on `h1` elements within `section` and |
---|
72 | * `article` contexts in Chrome, Firefox, and Safari. |
---|
73 | */ |
---|
74 | h1 { |
---|
75 | font-size: 2em; |
---|
76 | margin: 0.67em 0; |
---|
77 | } |
---|
78 | /* Grouping content |
---|
79 | ========================================================================== */ |
---|
80 | /** |
---|
81 | * 1. Add the correct box sizing in Firefox. |
---|
82 | * 2. Show the overflow in Edge and IE. |
---|
83 | */ |
---|
84 | hr { |
---|
85 | box-sizing: content-box; |
---|
86 | /* 1 */ |
---|
87 | height: 0; |
---|
88 | /* 1 */ |
---|
89 | overflow: visible; |
---|
90 | /* 2 */ |
---|
91 | } |
---|
92 | /** |
---|
93 | * 1. Correct the inheritance and scaling of font size in all browsers. |
---|
94 | * 2. Correct the odd `em` font sizing in all browsers. |
---|
95 | */ |
---|
96 | pre { |
---|
97 | font-family: monospace, monospace; |
---|
98 | /* 1 */ |
---|
99 | font-size: 1em; |
---|
100 | /* 2 */ |
---|
101 | } |
---|
102 | /* Text-level semantics |
---|
103 | ========================================================================== */ |
---|
104 | /** |
---|
105 | * Remove the gray background on active links in IE 10. |
---|
106 | */ |
---|
107 | a { |
---|
108 | background-color: transparent; |
---|
109 | } |
---|
110 | /** |
---|
111 | * 1. Remove the bottom border in Chrome 57- |
---|
112 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. |
---|
113 | */ |
---|
114 | abbr[title] { |
---|
115 | border-bottom: none; |
---|
116 | /* 1 */ |
---|
117 | text-decoration: underline; |
---|
118 | /* 2 */ |
---|
119 | text-decoration: underline dotted; |
---|
120 | /* 2 */ |
---|
121 | } |
---|
122 | /** |
---|
123 | * Add the correct font weight in Chrome, Edge, and Safari. |
---|
124 | */ |
---|
125 | b, |
---|
126 | strong { |
---|
127 | font-weight: bolder; |
---|
128 | } |
---|
129 | /** |
---|
130 | * 1. Correct the inheritance and scaling of font size in all browsers. |
---|
131 | * 2. Correct the odd `em` font sizing in all browsers. |
---|
132 | */ |
---|
133 | code, |
---|
134 | kbd, |
---|
135 | samp { |
---|
136 | font-family: monospace, monospace; |
---|
137 | /* 1 */ |
---|
138 | font-size: 1em; |
---|
139 | /* 2 */ |
---|
140 | } |
---|
141 | /** |
---|
142 | * Add the correct font size in all browsers. |
---|
143 | */ |
---|
144 | small { |
---|
145 | font-size: 80%; |
---|
146 | } |
---|
147 | /** |
---|
148 | * Prevent `sub` and `sup` elements from affecting the line height in |
---|
149 | * all browsers. |
---|
150 | */ |
---|
151 | sub, |
---|
152 | sup { |
---|
153 | font-size: 75%; |
---|
154 | line-height: 0; |
---|
155 | position: relative; |
---|
156 | vertical-align: baseline; |
---|
157 | } |
---|
158 | sub { |
---|
159 | bottom: -0.25em; |
---|
160 | } |
---|
161 | sup { |
---|
162 | top: -0.5em; |
---|
163 | } |
---|
164 | /* Embedded content |
---|
165 | ========================================================================== */ |
---|
166 | /** |
---|
167 | * Remove the border on images inside links in IE 10. |
---|
168 | */ |
---|
169 | img { |
---|
170 | border-style: none; |
---|
171 | } |
---|
172 | /* Forms |
---|
173 | ========================================================================== */ |
---|
174 | /** |
---|
175 | * 1. Change the font styles in all browsers. |
---|
176 | * 2. Remove the margin in Firefox and Safari. |
---|
177 | */ |
---|
178 | button, |
---|
179 | input, |
---|
180 | optgroup, |
---|
181 | select, |
---|
182 | textarea { |
---|
183 | font-family: inherit; |
---|
184 | /* 1 */ |
---|
185 | font-size: 100%; |
---|
186 | /* 1 */ |
---|
187 | line-height: 1.15; |
---|
188 | /* 1 */ |
---|
189 | margin: 0; |
---|
190 | /* 2 */ |
---|
191 | } |
---|
192 | /** |
---|
193 | * Show the overflow in IE. |
---|
194 | * 1. Show the overflow in Edge. |
---|
195 | */ |
---|
196 | button, |
---|
197 | input { |
---|
198 | /* 1 */ |
---|
199 | overflow: visible; |
---|
200 | } |
---|
201 | /** |
---|
202 | * Remove the inheritance of text transform in Edge, Firefox, and IE. |
---|
203 | * 1. Remove the inheritance of text transform in Firefox. |
---|
204 | */ |
---|
205 | button, |
---|
206 | select { |
---|
207 | /* 1 */ |
---|
208 | text-transform: none; |
---|
209 | } |
---|
210 | /** |
---|
211 | * Correct the inability to style clickable types in iOS and Safari. |
---|
212 | */ |
---|
213 | button, |
---|
214 | [type="button"], |
---|
215 | [type="reset"], |
---|
216 | [type="submit"] { |
---|
217 | -webkit-appearance: button; |
---|
218 | } |
---|
219 | /** |
---|
220 | * Remove the inner border and padding in Firefox. |
---|
221 | */ |
---|
222 | button::-moz-focus-inner, |
---|
223 | [type="button"]::-moz-focus-inner, |
---|
224 | [type="reset"]::-moz-focus-inner, |
---|
225 | [type="submit"]::-moz-focus-inner { |
---|
226 | border-style: none; |
---|
227 | padding: 0; |
---|
228 | } |
---|
229 | /** |
---|
230 | * Restore the focus styles unset by the previous rule. |
---|
231 | */ |
---|
232 | button:-moz-focusring, |
---|
233 | [type="button"]:-moz-focusring, |
---|
234 | [type="reset"]:-moz-focusring, |
---|
235 | [type="submit"]:-moz-focusring { |
---|
236 | outline: 1px dotted ButtonText; |
---|
237 | } |
---|
238 | /** |
---|
239 | * Correct the padding in Firefox. |
---|
240 | */ |
---|
241 | fieldset { |
---|
242 | padding: 0.35em 0.75em 0.625em; |
---|
243 | } |
---|
244 | /** |
---|
245 | * 1. Correct the text wrapping in Edge and IE. |
---|
246 | * 2. Correct the color inheritance from `fieldset` elements in IE. |
---|
247 | * 3. Remove the padding so developers are not caught out when they zero out |
---|
248 | * `fieldset` elements in all browsers. |
---|
249 | */ |
---|
250 | legend { |
---|
251 | box-sizing: border-box; |
---|
252 | /* 1 */ |
---|
253 | color: inherit; |
---|
254 | /* 2 */ |
---|
255 | display: table; |
---|
256 | /* 1 */ |
---|
257 | max-width: 100%; |
---|
258 | /* 1 */ |
---|
259 | padding: 0; |
---|
260 | /* 3 */ |
---|
261 | white-space: normal; |
---|
262 | /* 1 */ |
---|
263 | } |
---|
264 | /** |
---|
265 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. |
---|
266 | */ |
---|
267 | progress { |
---|
268 | vertical-align: baseline; |
---|
269 | } |
---|
270 | /** |
---|
271 | * Remove the default vertical scrollbar in IE 10+. |
---|
272 | */ |
---|
273 | textarea { |
---|
274 | overflow: auto; |
---|
275 | } |
---|
276 | /** |
---|
277 | * 1. Add the correct box sizing in IE 10. |
---|
278 | * 2. Remove the padding in IE 10. |
---|
279 | */ |
---|
280 | [type="checkbox"], |
---|
281 | [type="radio"] { |
---|
282 | box-sizing: border-box; |
---|
283 | /* 1 */ |
---|
284 | padding: 0; |
---|
285 | /* 2 */ |
---|
286 | } |
---|
287 | /** |
---|
288 | * Correct the cursor style of increment and decrement buttons in Chrome. |
---|
289 | */ |
---|
290 | [type="number"]::-webkit-inner-spin-button, |
---|
291 | [type="number"]::-webkit-outer-spin-button { |
---|
292 | height: auto; |
---|
293 | } |
---|
294 | /** |
---|
295 | * 1. Correct the odd appearance in Chrome and Safari. |
---|
296 | * 2. Correct the outline style in Safari. |
---|
297 | */ |
---|
298 | [type="search"] { |
---|
299 | -webkit-appearance: textfield; |
---|
300 | /* 1 */ |
---|
301 | outline-offset: -2px; |
---|
302 | /* 2 */ |
---|
303 | } |
---|
304 | /** |
---|
305 | * Remove the inner padding in Chrome and Safari on macOS. |
---|
306 | */ |
---|
307 | [type="search"]::-webkit-search-decoration { |
---|
308 | -webkit-appearance: none; |
---|
309 | } |
---|
310 | /** |
---|
311 | * 1. Correct the inability to style clickable types in iOS and Safari. |
---|
312 | * 2. Change font properties to `inherit` in Safari. |
---|
313 | */ |
---|
314 | ::-webkit-file-upload-button { |
---|
315 | -webkit-appearance: button; |
---|
316 | /* 1 */ |
---|
317 | font: inherit; |
---|
318 | /* 2 */ |
---|
319 | } |
---|
320 | /* Interactive |
---|
321 | ========================================================================== */ |
---|
322 | /* |
---|
323 | * Add the correct display in Edge, IE 10+, and Firefox. |
---|
324 | */ |
---|
325 | details { |
---|
326 | display: block; |
---|
327 | } |
---|
328 | /* |
---|
329 | * Add the correct display in all browsers. |
---|
330 | */ |
---|
331 | summary { |
---|
332 | display: list-item; |
---|
333 | } |
---|
334 | /* Misc |
---|
335 | ========================================================================== */ |
---|
336 | /** |
---|
337 | * Add the correct display in IE 10+. |
---|
338 | */ |
---|
339 | template { |
---|
340 | display: none; |
---|
341 | } |
---|
342 | /** |
---|
343 | * Add the correct display in IE 10. |
---|
344 | */ |
---|
345 | [hidden] { |
---|
346 | display: none; |
---|
347 | } |
---|
348 | /* Leaflet-elevation openworkouts theme */ |
---|
349 | /* background color */ |
---|
350 | .openworkouts-theme.leaflet-control.elevation .background { |
---|
351 | background-color: transparent; |
---|
352 | } |
---|
353 | /* Axis x and y*/ |
---|
354 | .openworkouts-theme.leaflet-control.elevation .axis line, |
---|
355 | .openworkouts-theme.leaflet-control.elevation .axis path { |
---|
356 | stroke: #959595; |
---|
357 | } |
---|
358 | /* selected drag area*/ |
---|
359 | .openworkouts-theme.leaflet-control.elevation .mouse-drag { |
---|
360 | fill: rgba(21, 21, 21, 0.1); |
---|
361 | } |
---|
362 | /* Icon to show when the chart is collapse */ |
---|
363 | /* |
---|
364 | .openworkouts-theme.leaflet-control.elevation .elevation-toggle-icon { |
---|
365 | background: url(images/elevation-steelblue.png) no-repeat center center; |
---|
366 | } |
---|
367 | */ |
---|
368 | /* Graph color area background */ |
---|
369 | .openworkouts-theme.leaflet-control.elevation .area { |
---|
370 | fill: #f8b5be; |
---|
371 | stroke: transparent; |
---|
372 | } |
---|
373 | /* vertical line to know where are you */ |
---|
374 | .openworkouts-theme.leaflet-control.elevation .mouse-focus-line { |
---|
375 | stroke: #151515; |
---|
376 | } |
---|
377 | /* graph color line area */ |
---|
378 | /*.leaflet-control.elevation .area { |
---|
379 | fill: #f8b5be; |
---|
380 | } |
---|
381 | */ |
---|
382 | /* box with parameters */ |
---|
383 | .mouse-focus-label { |
---|
384 | opacity: 0.8; |
---|
385 | } |
---|
386 | .mouse-focus-label-text { |
---|
387 | font-size: 13px; |
---|
388 | font-size: 0.8125rem; |
---|
389 | font-family: 'Open Sans', sans-serif; |
---|
390 | font-weight: 100 !important; |
---|
391 | } |
---|
392 | /*.mouse-focus-label-y {}*/ |
---|
393 | /* Color line on map */ |
---|
394 | .leaflet-interactive { |
---|
395 | stroke: #151515; |
---|
396 | opacity: 0.6; |
---|
397 | stroke-width: 6px; |
---|
398 | stroke-linecap: round; |
---|
399 | } |
---|
400 | /* indicator on map line*/ |
---|
401 | .openworkouts-theme.height-focus.line { |
---|
402 | stroke: #151515; |
---|
403 | display: none; |
---|
404 | /*fill: #4682b4;*/ |
---|
405 | } |
---|
406 | /* txt on map */ |
---|
407 | .openworkouts-theme.height-focus-label { |
---|
408 | display: none; |
---|
409 | } |
---|
410 | /* indicator on map circle */ |
---|
411 | .openworkouts-theme.height-focus.circle-lower { |
---|
412 | fill: #151515; |
---|
413 | stroke: #EE4056; |
---|
414 | stroke-width: 10px; |
---|
415 | } |
---|
416 | .hidden, |
---|
417 | .hide { |
---|
418 | display: none; |
---|
419 | } |
---|
420 | body { |
---|
421 | font-family: 'Open Sans', sans-serif; |
---|
422 | } |
---|
423 | html { |
---|
424 | box-sizing: border-box; |
---|
425 | } |
---|
426 | *, |
---|
427 | *:before, |
---|
428 | *:after { |
---|
429 | box-sizing: inherit; |
---|
430 | } |
---|
431 | /* ========================================================================== |
---|
432 | Wrappers |
---|
433 | ========================================================================== */ |
---|
434 | /** |
---|
435 | * Common wrappers to use in Scms-site. |
---|
436 | * To reducing css size you can use extends instead of mixins |
---|
437 | * to move the selector up to the properties you wish to use. |
---|
438 | * |
---|
439 | * Example LESS: |
---|
440 | * .myclass { |
---|
441 | * &:extend(.wrapper); |
---|
442 | * } |
---|
443 | */ |
---|
444 | .wrapper, |
---|
445 | .wrapper-s, |
---|
446 | .wrapper-l, |
---|
447 | .wrapper-xl, |
---|
448 | .ow-forms, |
---|
449 | .uploading-workout { |
---|
450 | display: block; |
---|
451 | width: 100%; |
---|
452 | padding-left: 1rem; |
---|
453 | padding-right: 1rem; |
---|
454 | margin: 0 auto; |
---|
455 | } |
---|
456 | @media (min-width: 480px) { |
---|
457 | .wrapper, |
---|
458 | .wrapper-s, |
---|
459 | .wrapper-l, |
---|
460 | .wrapper-xl, |
---|
461 | .ow-forms, |
---|
462 | .uploading-workout { |
---|
463 | padding-left: 2rem; |
---|
464 | padding-right: 2rem; |
---|
465 | } |
---|
466 | } |
---|
467 | @media (min-width: 800px) { |
---|
468 | .wrapper, |
---|
469 | .wrapper-s, |
---|
470 | .wrapper-l, |
---|
471 | .wrapper-xl, |
---|
472 | .ow-forms, |
---|
473 | .uploading-workout { |
---|
474 | padding-left: 4rem; |
---|
475 | padding-right: 4rem; |
---|
476 | } |
---|
477 | } |
---|
478 | @media (min-width: 1024px) { |
---|
479 | .wrapper, |
---|
480 | .wrapper-s, |
---|
481 | .wrapper-l, |
---|
482 | .wrapper-xl, |
---|
483 | .ow-forms, |
---|
484 | .uploading-workout { |
---|
485 | padding-left: 5rem; |
---|
486 | padding-right: 5rem; |
---|
487 | } |
---|
488 | } |
---|
489 | @media (min-width: 1440px) { |
---|
490 | .wrapper, |
---|
491 | .wrapper-s, |
---|
492 | .wrapper-l, |
---|
493 | .wrapper-xl, |
---|
494 | .ow-forms, |
---|
495 | .uploading-workout { |
---|
496 | padding-left: 6rem; |
---|
497 | padding-right: 6rem; |
---|
498 | } |
---|
499 | } |
---|
500 | @media (min-width: 320px) { |
---|
501 | .wrapper-s, |
---|
502 | .ow-forms, |
---|
503 | .uploading-workout { |
---|
504 | max-width: 740px; |
---|
505 | } |
---|
506 | } |
---|
507 | @media (min-width: 320px) { |
---|
508 | .wrapper-l { |
---|
509 | max-width: 1280px; |
---|
510 | } |
---|
511 | } |
---|
512 | @media (min-width: 320px) { |
---|
513 | .wrapper-xl { |
---|
514 | max-width: 1440px; |
---|
515 | } |
---|
516 | } |
---|
517 | /* Layout */ |
---|
518 | .ly-flex { |
---|
519 | display: flex; |
---|
520 | justify-content: space-between; |
---|
521 | } |
---|
522 | .ly-flex.ly-center { |
---|
523 | align-items: center; |
---|
524 | } |
---|
525 | .ly-flex.ly-start { |
---|
526 | justify-content: flex-start; |
---|
527 | } |
---|
528 | .ly-flex.ly-2 { |
---|
529 | flex-flow: row wrap; |
---|
530 | } |
---|
531 | .ly-flex.ly-2 > div, |
---|
532 | .ly-flex.ly-2 > li, |
---|
533 | .ly-flex.ly-2 > p, |
---|
534 | .ly-flex.ly-2 > a { |
---|
535 | width: 50%; |
---|
536 | } |
---|
537 | .ly-flex.ly-2.has-gap > div, |
---|
538 | .ly-flex.ly-2.has-gap > li, |
---|
539 | .ly-flex.ly-2.has-gap > p, |
---|
540 | .ly-flex.ly-2.has-gap > a { |
---|
541 | width: 48%; |
---|
542 | } |
---|
543 | .ly-flex.ly-3 { |
---|
544 | flex-flow: row wrap; |
---|
545 | } |
---|
546 | .ly-flex.ly-3 > div, |
---|
547 | .ly-flex.ly-3 > li, |
---|
548 | .ly-flex.ly-3 > p { |
---|
549 | width: 33%; |
---|
550 | } |
---|
551 | .ly-flex.ly-3.has-gap > div, |
---|
552 | .ly-flex.ly-3.has-gap > li, |
---|
553 | .ly-flex.ly-3.has-gap > p { |
---|
554 | width: 31%; |
---|
555 | } |
---|
556 | .ly-flex.ly-4 { |
---|
557 | flex-flow: row wrap; |
---|
558 | } |
---|
559 | .ly-flex.ly-4 > div, |
---|
560 | .ly-flex.ly-4 > li, |
---|
561 | .ly-flex.ly-4 > p { |
---|
562 | width: 25%; |
---|
563 | } |
---|
564 | .ly-flex.ly-4.has-gap > div, |
---|
565 | .ly-flex.ly-4.has-gap > li, |
---|
566 | .ly-flex.ly-4.has-gap > p { |
---|
567 | width: 23%; |
---|
568 | } |
---|
569 | .ly-flex-end { |
---|
570 | align-items: flex-end; |
---|
571 | } |
---|
572 | /* Generic default forms */ |
---|
573 | form { |
---|
574 | width: 100%; |
---|
575 | } |
---|
576 | legend { |
---|
577 | display: none; |
---|
578 | } |
---|
579 | fieldset { |
---|
580 | border: none; |
---|
581 | padding: 0; |
---|
582 | } |
---|
583 | fieldset > div, |
---|
584 | fieldset > p { |
---|
585 | margin-bottom: 1.5em; |
---|
586 | } |
---|
587 | label { |
---|
588 | display: block; |
---|
589 | font-size: 13px; |
---|
590 | margin-bottom: 0.25em; |
---|
591 | } |
---|
592 | input { |
---|
593 | width: 100%; |
---|
594 | padding: 0.5em 0.75em; |
---|
595 | border: 1px solid transparent; |
---|
596 | border-radius: 2px; |
---|
597 | } |
---|
598 | .ow-forms label { |
---|
599 | display: block; |
---|
600 | margin-bottom: 0.35em; |
---|
601 | color: #959595; |
---|
602 | } |
---|
603 | .ow-forms textarea { |
---|
604 | resize: vertical; |
---|
605 | height: 200px; |
---|
606 | } |
---|
607 | .ow-forms textarea, |
---|
608 | .ow-forms input { |
---|
609 | width: 100%; |
---|
610 | padding: 0.65em; |
---|
611 | border-radius: 4px; |
---|
612 | border: 1px solid #e1e1e1; |
---|
613 | } |
---|
614 | .ow-forms select { |
---|
615 | width: 100%; |
---|
616 | } |
---|
617 | /* Generic button */ |
---|
618 | .button { |
---|
619 | box-sizing: border-box; |
---|
620 | display: inline-block; |
---|
621 | text-align: center; |
---|
622 | vertical-align: middle; |
---|
623 | cursor: pointer; |
---|
624 | border: 1px solid transparent; |
---|
625 | text-decoration: none; |
---|
626 | font-style: normal; |
---|
627 | white-space: nowrap; |
---|
628 | text-overflow: ellipsis; |
---|
629 | padding: 0.3em 1em; |
---|
630 | margin: 0; |
---|
631 | position: relative; |
---|
632 | overflow: hidden; |
---|
633 | background: #e1e1e1; |
---|
634 | color: #151515; |
---|
635 | font-size: 1em; |
---|
636 | line-height: 1.25; |
---|
637 | max-width: 100%; |
---|
638 | width: auto; |
---|
639 | } |
---|
640 | .button-normal { |
---|
641 | width: auto; |
---|
642 | } |
---|
643 | .button-normal:hover { |
---|
644 | background-color: #959595; |
---|
645 | color: white; |
---|
646 | } |
---|
647 | .button-important { |
---|
648 | background-color: #EE4056; |
---|
649 | } |
---|
650 | /* |
---|
651 | Very simple way to paint dropdown-like arrows, without |
---|
652 | using any external dependencies. |
---|
653 | |
---|
654 | To use it, add something like this to your html, to display a "down" arrow: |
---|
655 | |
---|
656 | <i class="arrow down"></i> |
---|
657 | */ |
---|
658 | i.arrow { |
---|
659 | border: solid black; |
---|
660 | border-width: 0 3px 3px 0; |
---|
661 | display: inline-block; |
---|
662 | padding: 3px; |
---|
663 | margin: 3px; |
---|
664 | margin-left: 6px; |
---|
665 | margin-right: 0px; |
---|
666 | } |
---|
667 | .right { |
---|
668 | transform: rotate(-45deg); |
---|
669 | -webkit-transform: rotate(-45deg); |
---|
670 | } |
---|
671 | .left { |
---|
672 | transform: rotate(135deg); |
---|
673 | -webkit-transform: rotate(135deg); |
---|
674 | } |
---|
675 | .up { |
---|
676 | transform: rotate(-135deg); |
---|
677 | -webkit-transform: rotate(-135deg); |
---|
678 | } |
---|
679 | .down { |
---|
680 | transform: rotate(45deg); |
---|
681 | -webkit-transform: rotate(45deg); |
---|
682 | } |
---|
683 | .header-content { |
---|
684 | padding: 1em 1.5em; |
---|
685 | } |
---|
686 | .header-content a { |
---|
687 | text-decoration: none; |
---|
688 | } |
---|
689 | .header-content .description { |
---|
690 | margin: 0; |
---|
691 | } |
---|
692 | /* logo ----------------------------------------------------------------------*/ |
---|
693 | .logo { |
---|
694 | font-size: 24px; |
---|
695 | font-size: 1.5rem; |
---|
696 | line-height: 1em; |
---|
697 | font-weight: 800; |
---|
698 | text-transform: uppercase; |
---|
699 | margin: 0; |
---|
700 | display: inline-block; |
---|
701 | } |
---|
702 | .logo span { |
---|
703 | transition: all 250ms ease-in-out; |
---|
704 | } |
---|
705 | .logo:hover span { |
---|
706 | color: #EE4056; |
---|
707 | } |
---|
708 | @media (max-width: 800px) { |
---|
709 | .logo a { |
---|
710 | content: ""; |
---|
711 | display: inline-block; |
---|
712 | width: 34px; |
---|
713 | height: 34px; |
---|
714 | background-image: url('/static/media/img/logo-openworkouts.png'); |
---|
715 | background-size: 100%; |
---|
716 | background-repeat: no-repeat; |
---|
717 | } |
---|
718 | .logo a span { |
---|
719 | display: none !important; |
---|
720 | } |
---|
721 | } |
---|
722 | .logo-open { |
---|
723 | display: block; |
---|
724 | color: #EE4056; |
---|
725 | } |
---|
726 | .logo-work, |
---|
727 | .logo-outs { |
---|
728 | color: #f8b5be; |
---|
729 | } |
---|
730 | /* menu navigation -----------------------------------------------------------*/ |
---|
731 | .nav-site { |
---|
732 | font-size: 13px; |
---|
733 | font-size: 0.8125rem; |
---|
734 | } |
---|
735 | .nav-site ul { |
---|
736 | list-style-type: none; |
---|
737 | padding: 0; |
---|
738 | margin: 0; |
---|
739 | display: flex; |
---|
740 | flex-direction: row; |
---|
741 | justify-content: space-between; |
---|
742 | align-items: center; |
---|
743 | } |
---|
744 | .nav-site li { |
---|
745 | border-left: 1px solid #e1e1e1; |
---|
746 | flex-grow: 1; |
---|
747 | text-align: center; |
---|
748 | /* this is for the dashboard li element */ |
---|
749 | } |
---|
750 | .nav-site li:first-child { |
---|
751 | display: none; |
---|
752 | } |
---|
753 | @media (min-width: 800px) { |
---|
754 | .nav-site li:first-child { |
---|
755 | display: inline-block; |
---|
756 | } |
---|
757 | } |
---|
758 | .nav-site a { |
---|
759 | color: #959595; |
---|
760 | padding: 1.25em; |
---|
761 | display: block; |
---|
762 | } |
---|
763 | .nav-site a:hover { |
---|
764 | color: #151515; |
---|
765 | } |
---|
766 | .nav-site .is-active a { |
---|
767 | color: #151515; |
---|
768 | } |
---|
769 | .icon-dashboard::before, |
---|
770 | .icon-profile::before, |
---|
771 | .icon-logout::before { |
---|
772 | content: ""; |
---|
773 | display: inline-block; |
---|
774 | } |
---|
775 | .icon-dashboard span, |
---|
776 | .icon-profile span, |
---|
777 | .icon-logout span { |
---|
778 | display: none; |
---|
779 | } |
---|
780 | @media (min-width: 800px) { |
---|
781 | .icon-dashboard::before, |
---|
782 | .icon-profile::before, |
---|
783 | .icon-logout::before { |
---|
784 | display: none; |
---|
785 | } |
---|
786 | .icon-dashboard span, |
---|
787 | .icon-profile span, |
---|
788 | .icon-logout span { |
---|
789 | display: inline-block; |
---|
790 | } |
---|
791 | } |
---|
792 | .icon-dashboard:hover, |
---|
793 | .icon-profile:hover, |
---|
794 | .icon-logout:hover { |
---|
795 | opacity: 0.5; |
---|
796 | } |
---|
797 | .icon-dashboard::before { |
---|
798 | content: "☰"; |
---|
799 | font-size: 30px; |
---|
800 | font-size: 1.875rem; |
---|
801 | line-height: 0em; |
---|
802 | position: relative; |
---|
803 | top: 3px; |
---|
804 | margin: 0; |
---|
805 | } |
---|
806 | .icon-profile { |
---|
807 | padding: 1em 1.25em !important; |
---|
808 | } |
---|
809 | .icon-profile::before { |
---|
810 | position: relative; |
---|
811 | top: 3px; |
---|
812 | width: 20px; |
---|
813 | height: 20px; |
---|
814 | background-image: url('/static/media/img/icon-user.svg'); |
---|
815 | background-size: 100%; |
---|
816 | margin: 0; |
---|
817 | } |
---|
818 | .icon-logout { |
---|
819 | padding: 1em 1.25em !important; |
---|
820 | } |
---|
821 | .icon-logout::before { |
---|
822 | position: relative; |
---|
823 | top: 3px; |
---|
824 | width: 20px; |
---|
825 | height: 20px; |
---|
826 | background-image: url('/static/media/img/icon-logout.svg'); |
---|
827 | background-size: 100%; |
---|
828 | margin: 0; |
---|
829 | } |
---|
830 | /* Add workout button with submenu -------------------------------------------*/ |
---|
831 | .add-workout { |
---|
832 | position: relative; |
---|
833 | /* submenu -------------------------------------------------------------- */ |
---|
834 | } |
---|
835 | .add-workout > a { |
---|
836 | color: #EE4056; |
---|
837 | } |
---|
838 | .add-workout > a:before { |
---|
839 | content: "+"; |
---|
840 | font-weight: 800; |
---|
841 | font-size: 32px; |
---|
842 | font-size: 2rem; |
---|
843 | line-height: 0; |
---|
844 | position: relative; |
---|
845 | top: 8px; |
---|
846 | } |
---|
847 | .add-workout > a span { |
---|
848 | display: none; |
---|
849 | } |
---|
850 | .add-workout > a:hover { |
---|
851 | background-color: #EE4056; |
---|
852 | color: white; |
---|
853 | } |
---|
854 | .add-workout:hover:after { |
---|
855 | content: ""; |
---|
856 | position: absolute; |
---|
857 | background-color: white; |
---|
858 | bottom: -1px; |
---|
859 | width: 100%; |
---|
860 | height: 1px; |
---|
861 | display: block; |
---|
862 | z-index: 20; |
---|
863 | } |
---|
864 | .add-workout:hover ul { |
---|
865 | /* This fixes some problems in the "add workout" submenu, |
---|
866 | where some elements appeared without full width and on wrong |
---|
867 | positioning */ |
---|
868 | display: flex; |
---|
869 | } |
---|
870 | .add-workout:hover ul li { |
---|
871 | width: 100%; |
---|
872 | text-align: center; |
---|
873 | } |
---|
874 | .add-workout ul { |
---|
875 | display: none; |
---|
876 | flex-direction: column; |
---|
877 | position: absolute; |
---|
878 | background-color: rgba(255, 255, 255, 0.95); |
---|
879 | right: -1px; |
---|
880 | border: 1px solid #e1e1e1; |
---|
881 | width: 153px; |
---|
882 | } |
---|
883 | .add-workout ul li { |
---|
884 | border-left: transparent; |
---|
885 | text-align: left; |
---|
886 | } |
---|
887 | .add-workout ul a:hover { |
---|
888 | background-color: #fbfbfb; |
---|
889 | } |
---|
890 | /* description ---------------------------------------------------------------*/ |
---|
891 | .description { |
---|
892 | font-size: 14px; |
---|
893 | font-size: 0.875rem; |
---|
894 | font-weight: 300; |
---|
895 | letter-spacing: 0.025em; |
---|
896 | color: #959595; |
---|
897 | } |
---|
898 | /* ------------------------------ STATES ------------------------------------ */ |
---|
899 | /* when user is login --------------------------------------------------------*/ |
---|
900 | .is-login .header-content { |
---|
901 | border-bottom: 1px solid #e1e1e1; |
---|
902 | display: flex; |
---|
903 | padding: 0em 1.5em; |
---|
904 | justify-content: space-between; |
---|
905 | align-items: center; |
---|
906 | } |
---|
907 | .is-login .description { |
---|
908 | display: none; |
---|
909 | } |
---|
910 | .is-login .logo-open { |
---|
911 | display: inline-block; |
---|
912 | } |
---|
913 | .workout-content { |
---|
914 | padding: 2em 1em; |
---|
915 | display: flex; |
---|
916 | flex-direction: column; |
---|
917 | } |
---|
918 | @media (min-width: 480px) { |
---|
919 | .workout-content { |
---|
920 | padding: 2em 6em; |
---|
921 | } |
---|
922 | } |
---|
923 | @media (min-width: 800px) { |
---|
924 | .workout-content { |
---|
925 | display: flex; |
---|
926 | flex-direction: row; |
---|
927 | justify-content: space-between; |
---|
928 | } |
---|
929 | } |
---|
930 | /* list mode */ |
---|
931 | .workout-list { |
---|
932 | margin-right: 2em; |
---|
933 | width: 100%; |
---|
934 | order: 2; |
---|
935 | /* provisional layout, replace this with grid layout system based on final content */ |
---|
936 | } |
---|
937 | .workout-list > h2 { |
---|
938 | font-weight: 300; |
---|
939 | margin: 0 0 1.5em; |
---|
940 | } |
---|
941 | @media (min-width: 800px) { |
---|
942 | .workout-list { |
---|
943 | order: 1; |
---|
944 | } |
---|
945 | } |
---|
946 | /* Module resume on dashboard workouts */ |
---|
947 | .workout-resume { |
---|
948 | padding: 1.5em 0; |
---|
949 | position: relative; |
---|
950 | max-width: 700px; |
---|
951 | } |
---|
952 | @media (min-width: 800px) { |
---|
953 | .workout-resume { |
---|
954 | padding-left: 2em; |
---|
955 | border-left: 1px solid #e1e1e1; |
---|
956 | transition: all 250ms ease-in-out; |
---|
957 | } |
---|
958 | } |
---|
959 | .workout-resume:hover { |
---|
960 | border-color: #151515; |
---|
961 | } |
---|
962 | .workout-resume:hover .workout-title:before { |
---|
963 | color: #151515; |
---|
964 | } |
---|
965 | .workout-resume ul { |
---|
966 | padding: 0; |
---|
967 | list-style-type: none; |
---|
968 | font-size: 13px; |
---|
969 | font-size: 0.8125rem; |
---|
970 | } |
---|
971 | .workout-resume ul a { |
---|
972 | display: block; |
---|
973 | text-decoration: none; |
---|
974 | } |
---|
975 | .bike:before { |
---|
976 | display: block; |
---|
977 | content: ""; |
---|
978 | width: 30px; |
---|
979 | height: 30px; |
---|
980 | background-image: url('../media/img/bike.svg'); |
---|
981 | background-size: 100%; |
---|
982 | } |
---|
983 | .workout-title { |
---|
984 | font-size: 14px; |
---|
985 | font-size: 0.875rem; |
---|
986 | margin: 0 0 0em 0; |
---|
987 | position: relative; |
---|
988 | } |
---|
989 | .workout-title:before { |
---|
990 | transition: all 250ms ease-in-out; |
---|
991 | content: "▶"; |
---|
992 | position: absolute; |
---|
993 | left: -3.25em; |
---|
994 | top: 0.35em; |
---|
995 | color: #e1e1e1; |
---|
996 | font-size: 10px; |
---|
997 | font-size: 0.625rem; |
---|
998 | } |
---|
999 | .workout-title a { |
---|
1000 | color: #151515; |
---|
1001 | text-decoration: none; |
---|
1002 | } |
---|
1003 | .workout-title a:hover { |
---|
1004 | color: #EE4056; |
---|
1005 | } |
---|
1006 | .workout-info { |
---|
1007 | display: flex; |
---|
1008 | flex-flow: row wrap; |
---|
1009 | margin: 0.25em 0; |
---|
1010 | } |
---|
1011 | .workout-info li { |
---|
1012 | color: #959595; |
---|
1013 | margin-bottom: 0.25em; |
---|
1014 | } |
---|
1015 | .workout-info li:after { |
---|
1016 | content: "|"; |
---|
1017 | margin: 0 0.5em; |
---|
1018 | } |
---|
1019 | .workout-info li:last-child:after { |
---|
1020 | content: ""; |
---|
1021 | margin: 0; |
---|
1022 | } |
---|
1023 | .workout-map { |
---|
1024 | margin-top: 1em; |
---|
1025 | } |
---|
1026 | .workout-map img { |
---|
1027 | width: 100%; |
---|
1028 | } |
---|
1029 | .workout-intro { |
---|
1030 | font-size: 13px; |
---|
1031 | font-size: 0.8125rem; |
---|
1032 | color: #151515; |
---|
1033 | } |
---|
1034 | .workout-options { |
---|
1035 | display: inline-block; |
---|
1036 | border: 1px solid #e1e1e1; |
---|
1037 | margin-bottom: 0; |
---|
1038 | border-radius: 4px; |
---|
1039 | padding: 0; |
---|
1040 | width: auto; |
---|
1041 | background-color: white; |
---|
1042 | } |
---|
1043 | .workout-options li { |
---|
1044 | display: inline-block; |
---|
1045 | border-right: 1px solid #e1e1e1; |
---|
1046 | } |
---|
1047 | .workout-options li:last-child { |
---|
1048 | border-right: none; |
---|
1049 | } |
---|
1050 | .workout-options a { |
---|
1051 | display: block; |
---|
1052 | color: #959595; |
---|
1053 | padding: 0.5em 0.75em; |
---|
1054 | text-decoration: none; |
---|
1055 | } |
---|
1056 | .workout-options a:hover { |
---|
1057 | color: #151515; |
---|
1058 | } |
---|
1059 | .workout-options a.is-active { |
---|
1060 | background-color: #959595; |
---|
1061 | color: white; |
---|
1062 | } |
---|
1063 | .owo-del a:hover { |
---|
1064 | color: red; |
---|
1065 | } |
---|
1066 | .workout-aside { |
---|
1067 | width: 100%; |
---|
1068 | order: 1; |
---|
1069 | } |
---|
1070 | @media (min-width: 800px) { |
---|
1071 | .workout-aside { |
---|
1072 | order: 2; |
---|
1073 | max-width: 300px; |
---|
1074 | padding-left: 1.5em; |
---|
1075 | border-left: 1px solid #e1e1e1; |
---|
1076 | } |
---|
1077 | } |
---|
1078 | .aside-profile { |
---|
1079 | margin-bottom: 1em; |
---|
1080 | } |
---|
1081 | .aside-profile img { |
---|
1082 | width: 80px; |
---|
1083 | height: 80px; |
---|
1084 | object-fit: cover; |
---|
1085 | border-radius: 50%; |
---|
1086 | } |
---|
1087 | .aside-profile h2 { |
---|
1088 | font-weight: 400; |
---|
1089 | font-size: 18px; |
---|
1090 | font-size: 1.125rem; |
---|
1091 | margin: 0 0 0.5em 0; |
---|
1092 | } |
---|
1093 | .aside-profile ul { |
---|
1094 | list-style-type: none; |
---|
1095 | margin: 0; |
---|
1096 | padding: 0; |
---|
1097 | font-size: 13px; |
---|
1098 | font-size: 0.8125rem; |
---|
1099 | color: #555555; |
---|
1100 | } |
---|
1101 | .aside-profile a { |
---|
1102 | text-decoration: none; |
---|
1103 | color: #151515; |
---|
1104 | } |
---|
1105 | .aside-profile a:hover { |
---|
1106 | color: #959595; |
---|
1107 | } |
---|
1108 | /* Workout detail */ |
---|
1109 | #map { |
---|
1110 | width: 100%; |
---|
1111 | height: 400px; |
---|
1112 | } |
---|
1113 | @media (min-width: 480px) { |
---|
1114 | #map { |
---|
1115 | height: calc(100vh - 465px); |
---|
1116 | } |
---|
1117 | } |
---|
1118 | .workout-detail { |
---|
1119 | padding: 0em 1em; |
---|
1120 | } |
---|
1121 | @media (min-width: 480px) { |
---|
1122 | .workout-detail { |
---|
1123 | max-width: 1280px; |
---|
1124 | margin: 0 auto; |
---|
1125 | } |
---|
1126 | } |
---|
1127 | @media (min-width: 800px) { |
---|
1128 | .workout-detail { |
---|
1129 | display: flex; |
---|
1130 | justify-content: space-between; |
---|
1131 | } |
---|
1132 | } |
---|
1133 | .workout-detail-resume { |
---|
1134 | max-width: 500px; |
---|
1135 | margin-bottom: 2em; |
---|
1136 | padding-top: 2em; |
---|
1137 | } |
---|
1138 | @media (min-width: 800px) { |
---|
1139 | .workout-detail-resume { |
---|
1140 | margin-right: 6em; |
---|
1141 | } |
---|
1142 | } |
---|
1143 | .workout-detail-resume h3 { |
---|
1144 | margin-top: 0; |
---|
1145 | margin-bottom: 0.5em; |
---|
1146 | } |
---|
1147 | .workout-detail-resume h3 + div { |
---|
1148 | font-size: 14px; |
---|
1149 | font-size: 0.875rem; |
---|
1150 | color: #959595; |
---|
1151 | line-height: 1.35em; |
---|
1152 | } |
---|
1153 | .workout-detail-resume .workout-options { |
---|
1154 | font-size: 13px; |
---|
1155 | font-size: 0.8125rem; |
---|
1156 | } |
---|
1157 | .workout-detail-info { |
---|
1158 | max-width: 600px; |
---|
1159 | } |
---|
1160 | @media (min-width: 800px) { |
---|
1161 | .workout-detail-info { |
---|
1162 | border-right: 1px solid #e1e1e1; |
---|
1163 | border-left: 1px solid #e1e1e1; |
---|
1164 | padding: 2em 1em 2em 2em; |
---|
1165 | } |
---|
1166 | } |
---|
1167 | .workout-detail-info ul { |
---|
1168 | list-style-type: none; |
---|
1169 | padding: 0; |
---|
1170 | margin: 0; |
---|
1171 | display: flex; |
---|
1172 | justify-content: space-between; |
---|
1173 | flex-flow: row wrap; |
---|
1174 | } |
---|
1175 | .workout-detail-info ul span { |
---|
1176 | display: block; |
---|
1177 | font-size: 13px; |
---|
1178 | font-size: 0.8125rem; |
---|
1179 | color: #959595; |
---|
1180 | margin-bottom: 0.25em; |
---|
1181 | /* color for future features */ |
---|
1182 | } |
---|
1183 | .workout-detail-info ul span.min, |
---|
1184 | .workout-detail-info ul span.avg, |
---|
1185 | .workout-detail-info ul span.max { |
---|
1186 | display: inline-block; |
---|
1187 | color: white; |
---|
1188 | padding: 0.5em 0.85em; |
---|
1189 | border-radius: 3px; |
---|
1190 | background-color: #e1e1e1; |
---|
1191 | color: #959595; |
---|
1192 | } |
---|
1193 | .workout-detail-info li { |
---|
1194 | margin-bottom: 1em; |
---|
1195 | margin-right: 1em; |
---|
1196 | color: #959595; |
---|
1197 | font-size: 15px; |
---|
1198 | font-size: 0.9375rem; |
---|
1199 | } |
---|
1200 | .workout-detail-info li.important { |
---|
1201 | font-size: 21px; |
---|
1202 | font-size: 1.3125rem; |
---|
1203 | color: #151515; |
---|
1204 | } |
---|
1205 | /* Week report */ |
---|
1206 | .svg-content svg { |
---|
1207 | width: 100%; |
---|
1208 | height: 100%; |
---|
1209 | } |
---|
1210 | .svg-content .label { |
---|
1211 | font-size: 13px; |
---|
1212 | font-size: 0.8125rem; |
---|
1213 | text-anchor: middle; |
---|
1214 | } |
---|
1215 | .svg-content .tick { |
---|
1216 | font-size: 13px; |
---|
1217 | font-size: 0.8125rem; |
---|
1218 | } |
---|
1219 | /* dashboard graphics*/ |
---|
1220 | .x-axis path, |
---|
1221 | .x-axis line { |
---|
1222 | fill: none; |
---|
1223 | stroke: none; |
---|
1224 | } |
---|
1225 | .bar { |
---|
1226 | fill: #f8b5be; |
---|
1227 | } |
---|
1228 | .bar:hover { |
---|
1229 | fill: #ee4056; |
---|
1230 | } |
---|
1231 | .current { |
---|
1232 | fill: #ee4056; |
---|
1233 | } |
---|
1234 | .week-stats { |
---|
1235 | border: 1px solid #e1e1e1; |
---|
1236 | background-color: rgba(225, 225, 225, 0.1); |
---|
1237 | padding: 0.75em; |
---|
1238 | border-radius: 4px; |
---|
1239 | margin-bottom: 2em; |
---|
1240 | } |
---|
1241 | .week-stats h3 { |
---|
1242 | margin: 0; |
---|
1243 | font-size: 14px; |
---|
1244 | font-size: 0.875rem; |
---|
1245 | } |
---|
1246 | .week-stats h3 + p { |
---|
1247 | margin: 0.25em 0 2em 0; |
---|
1248 | color: #959595; |
---|
1249 | font-size: 13px; |
---|
1250 | font-size: 0.8125rem; |
---|
1251 | } |
---|
1252 | .workout-activity-summary { |
---|
1253 | list-style-type: none; |
---|
1254 | padding: 0; |
---|
1255 | margin: 0; |
---|
1256 | background-color: rgba(21, 21, 21, 0.8); |
---|
1257 | margin-bottom: 0.75em; |
---|
1258 | } |
---|
1259 | .workout-activity-summary li { |
---|
1260 | color: #e1e1e1; |
---|
1261 | border-bottom: 1px solid #959595; |
---|
1262 | padding: 0.75em 1em; |
---|
1263 | display: flex; |
---|
1264 | justify-content: space-between; |
---|
1265 | } |
---|
1266 | .workout-activity-summary li:last-child { |
---|
1267 | margin-bottom: 0; |
---|
1268 | border: none; |
---|
1269 | } |
---|
1270 | .workout-activity-summary li span:first-child { |
---|
1271 | font-weight: bold; |
---|
1272 | } |
---|
1273 | .workout-activity-tree { |
---|
1274 | list-style-type: none; |
---|
1275 | padding: 0; |
---|
1276 | margin: 0; |
---|
1277 | transition: all 250ms ease-in-out; |
---|
1278 | font-size: 13px; |
---|
1279 | font-size: 0.8125rem; |
---|
1280 | } |
---|
1281 | .workout-activity-tree > li { |
---|
1282 | margin-bottom: 0.5em; |
---|
1283 | padding-bottom: 0.5em; |
---|
1284 | border-bottom: 1px solid #e1e1e1; |
---|
1285 | } |
---|
1286 | .workout-activity-tree a { |
---|
1287 | text-decoration: none; |
---|
1288 | display: block; |
---|
1289 | color: #EE4056; |
---|
1290 | } |
---|
1291 | .workout-activity-tree a:hover { |
---|
1292 | color: #151515; |
---|
1293 | } |
---|
1294 | .workout-activity-tree a.viewing-year { |
---|
1295 | color: #151515; |
---|
1296 | font-weight: 700; |
---|
1297 | margin-bottom: 0.5em; |
---|
1298 | font-size: 16px; |
---|
1299 | font-size: 1rem; |
---|
1300 | } |
---|
1301 | .workout-activity-tree a.viewing-month { |
---|
1302 | background-color: #e1e1e1; |
---|
1303 | color: #151515; |
---|
1304 | font-weight: 700; |
---|
1305 | } |
---|
1306 | .workout-activity-tree-year { |
---|
1307 | list-style-type: none; |
---|
1308 | padding: 0; |
---|
1309 | margin: 0; |
---|
1310 | } |
---|
1311 | .workout-activity-tree-year > li { |
---|
1312 | display: block; |
---|
1313 | margin-bottom: 0.5em; |
---|
1314 | } |
---|
1315 | .workout-activity-tree-year a { |
---|
1316 | display: flex; |
---|
1317 | justify-content: space-between; |
---|
1318 | padding: 0.5em; |
---|
1319 | background-color: #fbfbfb; |
---|
1320 | color: #555555; |
---|
1321 | } |
---|
1322 | .workout-activity-tree-year a:hover { |
---|
1323 | background-color: #e1e1e1; |
---|
1324 | } |
---|
1325 | .uploading-workout { |
---|
1326 | /* Extends ow-forms, as we use a div with this class to show as a |
---|
1327 | replacement of the uploading form while the form is submitting |
---|
1328 | (that could take some time when uploading bigger tracking files) */ |
---|
1329 | width: 100%; |
---|
1330 | text-align: center; |
---|
1331 | display: none; |
---|
1332 | } |
---|
1333 | .ow-forms, |
---|
1334 | .uploading-workout { |
---|
1335 | padding-top: 2em; |
---|
1336 | } |
---|
1337 | .ow-forms h2 { |
---|
1338 | border-top: 1px solid #e1e1e1; |
---|
1339 | padding-top: 0.5em; |
---|
1340 | } |
---|
1341 | .back { |
---|
1342 | color: #EE4056; |
---|
1343 | text-decoration: none; |
---|
1344 | font-weight: 700; |
---|
1345 | } |
---|
1346 | .back:before { |
---|
1347 | content: "⬅"; |
---|
1348 | margin-right: 0.5em; |
---|
1349 | } |
---|
1350 | .back:hover { |
---|
1351 | color: #151515; |
---|
1352 | } |
---|
1353 | .login-content { |
---|
1354 | background-image: url("../media/img/back-01.jpg"); |
---|
1355 | background-position: center; |
---|
1356 | background-size: cover; |
---|
1357 | display: flex; |
---|
1358 | justify-content: center; |
---|
1359 | align-items: center; |
---|
1360 | min-height: calc(100vh - 98px); |
---|
1361 | padding: 1em 0; |
---|
1362 | } |
---|
1363 | .login-content form { |
---|
1364 | max-width: 380px; |
---|
1365 | background-color: rgba(21, 21, 21, 0.6); |
---|
1366 | border-radius: 6px; |
---|
1367 | padding: 2em 1.5em; |
---|
1368 | } |
---|
1369 | .login-content form div { |
---|
1370 | margin-bottom: 1.5em; |
---|
1371 | } |
---|
1372 | .login-content label { |
---|
1373 | color: #e1e1e1; |
---|
1374 | } |
---|
1375 | .login-content a { |
---|
1376 | color: #e1e1e1; |
---|
1377 | font-size: 13px; |
---|
1378 | text-decoration: none; |
---|
1379 | margin-right: 0.75em; |
---|
1380 | } |
---|
1381 | .login-content a:hover { |
---|
1382 | color: white; |
---|
1383 | } |
---|
1384 | .login-content .button { |
---|
1385 | transition: all 500ms ease-in-out; |
---|
1386 | background-color: #EE4056; |
---|
1387 | color: white; |
---|
1388 | text-transform: uppercase; |
---|
1389 | } |
---|
1390 | .login-content .button:hover { |
---|
1391 | background-color: #e6152f; |
---|
1392 | } |
---|
1393 | .login-content .message { |
---|
1394 | padding: 0.5em; |
---|
1395 | margin: 0; |
---|
1396 | text-align: center; |
---|
1397 | font-size: 13px; |
---|
1398 | font-size: 0.8125rem; |
---|
1399 | } |
---|
1400 | .login-content .message.message-error { |
---|
1401 | color: white; |
---|
1402 | background-color: red; |
---|
1403 | } |
---|
1404 | .login-content ul.error { |
---|
1405 | list-style: none; |
---|
1406 | color: white; |
---|
1407 | padding: 5px; |
---|
1408 | margin: 0px; |
---|
1409 | } |
---|
1410 | /* |
---|
1411 | .login-remember { |
---|
1412 | color: @color-main-medium; |
---|
1413 | .font-size(14); |
---|
1414 | text-decoration: none; |
---|
1415 | font-weight: 300; |
---|
1416 | &:hover{ |
---|
1417 | color: @color-main-light; |
---|
1418 | } |
---|
1419 | } |
---|
1420 | <a class="login-remember" href="#">Forgot your password?</a> |
---|
1421 | */ |
---|
1422 | .user-profile .workout-options { |
---|
1423 | font-size: 13px; |
---|
1424 | font-size: 0.8125rem; |
---|
1425 | margin-right: 2em; |
---|
1426 | } |
---|
1427 | .user-profile-account { |
---|
1428 | background-color: #fbfbfb; |
---|
1429 | border-bottom: 1px solid #e1e1e1; |
---|
1430 | padding: 2em 1em; |
---|
1431 | } |
---|
1432 | @media (min-width: 480px) { |
---|
1433 | .user-profile-account { |
---|
1434 | padding: 2em 6em; |
---|
1435 | } |
---|
1436 | } |
---|
1437 | @media (min-width: 800px) { |
---|
1438 | .user-profile-account > div { |
---|
1439 | display: flex; |
---|
1440 | align-items: center; |
---|
1441 | } |
---|
1442 | } |
---|
1443 | .user-profile-account img { |
---|
1444 | width: 64px; |
---|
1445 | height: 64px; |
---|
1446 | object-fit: cover; |
---|
1447 | border-radius: 50%; |
---|
1448 | margin-bottom: 0.5em; |
---|
1449 | margin-right: 1em; |
---|
1450 | } |
---|
1451 | @media (min-width: 800px) { |
---|
1452 | .user-profile-account img { |
---|
1453 | width: 140px; |
---|
1454 | height: 140px; |
---|
1455 | } |
---|
1456 | } |
---|
1457 | .user-profile-account h2 { |
---|
1458 | margin: 0 0 0.15em 0; |
---|
1459 | font-size: 21px; |
---|
1460 | font-size: 1.3125rem; |
---|
1461 | font-weight: 400; |
---|
1462 | } |
---|
1463 | .user-profile-account p { |
---|
1464 | color: #555555; |
---|
1465 | font-size: 14px; |
---|
1466 | font-size: 0.875rem; |
---|
1467 | margin: 0; |
---|
1468 | } |
---|
1469 | .user-profile-account p a { |
---|
1470 | color: #EE4056; |
---|
1471 | text-decoration: none; |
---|
1472 | } |
---|
1473 | .user-profile-account p a:hover { |
---|
1474 | color: #151515; |
---|
1475 | } |
---|
1476 | .user-profile-account p span { |
---|
1477 | color: #959595; |
---|
1478 | } |
---|
1479 | .total-workouts { |
---|
1480 | font-size: 13px; |
---|
1481 | font-size: 0.8125rem; |
---|
1482 | font-weight: bold; |
---|
1483 | } |
---|
1484 | .total-workouts span { |
---|
1485 | color: #959595; |
---|
1486 | margin-right: 0.5em; |
---|
1487 | } |
---|
1488 | .total-workouts span:first-child { |
---|
1489 | color: #151515; |
---|
1490 | } |
---|
1491 | .total-workouts span:first-child:after { |
---|
1492 | content: "|"; |
---|
1493 | color: #e1e1e1; |
---|
1494 | margin-left: 0.5em; |
---|
1495 | } |
---|
1496 | .profile-data { |
---|
1497 | list-style-type: none; |
---|
1498 | padding: 0; |
---|
1499 | font-size: 14px; |
---|
1500 | font-size: 0.875rem; |
---|
1501 | background-color: white; |
---|
1502 | padding: 0.5em 0.75em; |
---|
1503 | border-radius: 4px; |
---|
1504 | border: 1px solid #e1e1e1; |
---|
1505 | } |
---|
1506 | .profile-data li { |
---|
1507 | display: flex; |
---|
1508 | justify-content: space-between; |
---|
1509 | color: #959595; |
---|
1510 | } |
---|
1511 | .profile-data li:not(:last-child) { |
---|
1512 | margin-bottom: 0.5em; |
---|
1513 | padding-bottom: 0.5em; |
---|
1514 | border-bottom: 1px solid #e1e1e1; |
---|
1515 | } |
---|
1516 | .profile-data li span { |
---|
1517 | font-weight: bold; |
---|
1518 | color: #151515; |
---|
1519 | } |
---|
1520 | .profile-data li a { |
---|
1521 | color: #EE4056; |
---|
1522 | text-decoration: none; |
---|
1523 | } |
---|
1524 | .profile-data li a:hover { |
---|
1525 | color: #151515; |
---|
1526 | } |
---|
1527 | .profile-data li a:active, |
---|
1528 | .profile-data li a:focus { |
---|
1529 | outline: 0; |
---|
1530 | border: none; |
---|
1531 | -moz-outline-style: none; |
---|
1532 | } |
---|
1533 | .profile-bio { |
---|
1534 | margin: 0.5em 0; |
---|
1535 | font-size: 14px; |
---|
1536 | font-size: 0.875rem; |
---|
1537 | } |
---|
1538 | .month-stats, |
---|
1539 | .latest-workouts { |
---|
1540 | max-width: 700px; |
---|
1541 | } |
---|
1542 | .center { |
---|
1543 | text-align: center; |
---|
1544 | } |
---|
1545 | .month-stats { |
---|
1546 | margin-bottom: 4em; |
---|
1547 | } |
---|
1548 | .latest-workouts h4 { |
---|
1549 | margin: 0; |
---|
1550 | } |
---|
1551 | .latest-workouts h4 a { |
---|
1552 | color: #151515; |
---|
1553 | text-decoration: none; |
---|
1554 | } |
---|
1555 | .latest-workouts > span { |
---|
1556 | font-size: 13px; |
---|
1557 | font-size: 0.8125rem; |
---|
1558 | } |
---|
1559 | .latest-workouts p { |
---|
1560 | margin-top: 0.25em; |
---|
1561 | color: #959595; |
---|
1562 | font-size: 13px; |
---|
1563 | font-size: 0.8125rem; |
---|
1564 | } |
---|
1565 | .profile-dropdown-sports, |
---|
1566 | .profile-dropdown-years { |
---|
1567 | color: #151515; |
---|
1568 | text-decoration: none; |
---|
1569 | } |
---|
1570 | .profile-dropdown-sports:hover, |
---|
1571 | .profile-dropdown-years:hover { |
---|
1572 | color: #151515; |
---|
1573 | } |
---|
1574 | .profile-dropdown-sports:active, |
---|
1575 | .profile-dropdown-years:active, |
---|
1576 | .profile-dropdown-sports:focus, |
---|
1577 | .profile-dropdown-years:focus { |
---|
1578 | outline: 0; |
---|
1579 | border: none; |
---|
1580 | -moz-outline-style: none; |
---|
1581 | } |
---|
1582 | /* Calendar heatmap */ |
---|
1583 | .calendar-heatmap { |
---|
1584 | margin: 20px; |
---|
1585 | } |
---|
1586 | .calendar-heatmap .month { |
---|
1587 | margin-right: 8px; |
---|
1588 | } |
---|
1589 | .calendar-heatmap .month-name { |
---|
1590 | font-size: 85%; |
---|
1591 | fill: #777; |
---|
1592 | } |
---|
1593 | .calendar-heatmap .day-name { |
---|
1594 | font-size: 85%; |
---|
1595 | fill: #777; |
---|
1596 | } |
---|
1597 | .calendar-heatmap .day:hover { |
---|
1598 | stroke: #e1e1e1; |
---|
1599 | stroke-width: 2; |
---|
1600 | } |
---|
1601 | .calendar-heatmap .day:focus { |
---|
1602 | stroke: #e1e1e1; |
---|
1603 | stroke-width: 2; |
---|
1604 | } |
---|
1605 | .calendar-heatmap-tooltip { |
---|
1606 | width: 20%; |
---|
1607 | } |
---|
1608 | .verify-account-content { |
---|
1609 | background-position: center; |
---|
1610 | background-size: cover; |
---|
1611 | display: flex; |
---|
1612 | justify-content: center; |
---|
1613 | align-items: center; |
---|
1614 | /* dynamic min-height based on window height does not work well |
---|
1615 | with premailer and generating the proper html with styles for mails */ |
---|
1616 | min-height: 400px; |
---|
1617 | padding: 1em 0; |
---|
1618 | /* RGB calculated color does not work well with premailer and |
---|
1619 | generating the proper html with styles for mails */ |
---|
1620 | color: #151515; |
---|
1621 | } |
---|
1622 | .verify-account-content .info { |
---|
1623 | max-width: 580px; |
---|
1624 | /* RGB calculated color does not work well with premailer and |
---|
1625 | generating the proper html with styles for mails */ |
---|
1626 | background-color: #e1e1e1; |
---|
1627 | border-radius: 6px; |
---|
1628 | padding: 2em 1.5em; |
---|
1629 | } |
---|
1630 | .verify-account-content .info div { |
---|
1631 | margin-bottom: 1.5em; |
---|
1632 | } |
---|
1633 | .verify-account-content a { |
---|
1634 | /* RGB calculated color does not work well with premailer and |
---|
1635 | generating the proper html with styles for mails */ |
---|
1636 | color: #151515; |
---|
1637 | font-size: 13px; |
---|
1638 | text-decoration: none; |
---|
1639 | margin-right: 0.75em; |
---|
1640 | } |
---|
1641 | .verify-account-content a:hover { |
---|
1642 | color: #151515; |
---|
1643 | } |
---|
1644 | .verify-account-content .button { |
---|
1645 | background-color: #EE4056; |
---|
1646 | background: #EE4056; |
---|
1647 | color: white; |
---|
1648 | text-transform: uppercase; |
---|
1649 | } |
---|
1650 | .verify-account-content .button:hover { |
---|
1651 | background-color: #F60002; |
---|
1652 | } |
---|