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/v15/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/v15/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/v15/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/v15/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/v15/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/v15/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/v15/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 | display: block; |
---|
450 | width: 100%; |
---|
451 | padding-left: 1rem; |
---|
452 | padding-right: 1rem; |
---|
453 | margin: 0 auto; |
---|
454 | } |
---|
455 | @media (min-width: 480px) { |
---|
456 | .wrapper, |
---|
457 | .wrapper-s, |
---|
458 | .wrapper-l, |
---|
459 | .wrapper-xl, |
---|
460 | .ow-forms { |
---|
461 | padding-left: 2rem; |
---|
462 | padding-right: 2rem; |
---|
463 | } |
---|
464 | } |
---|
465 | @media (min-width: 800px) { |
---|
466 | .wrapper, |
---|
467 | .wrapper-s, |
---|
468 | .wrapper-l, |
---|
469 | .wrapper-xl, |
---|
470 | .ow-forms { |
---|
471 | padding-left: 4rem; |
---|
472 | padding-right: 4rem; |
---|
473 | } |
---|
474 | } |
---|
475 | @media (min-width: 1024px) { |
---|
476 | .wrapper, |
---|
477 | .wrapper-s, |
---|
478 | .wrapper-l, |
---|
479 | .wrapper-xl, |
---|
480 | .ow-forms { |
---|
481 | padding-left: 5rem; |
---|
482 | padding-right: 5rem; |
---|
483 | } |
---|
484 | } |
---|
485 | @media (min-width: 1440px) { |
---|
486 | .wrapper, |
---|
487 | .wrapper-s, |
---|
488 | .wrapper-l, |
---|
489 | .wrapper-xl, |
---|
490 | .ow-forms { |
---|
491 | padding-left: 6rem; |
---|
492 | padding-right: 6rem; |
---|
493 | } |
---|
494 | } |
---|
495 | @media (min-width: 320px) { |
---|
496 | .wrapper-s, |
---|
497 | .ow-forms { |
---|
498 | max-width: 740px; |
---|
499 | } |
---|
500 | } |
---|
501 | @media (min-width: 320px) { |
---|
502 | .wrapper-l { |
---|
503 | max-width: 1280px; |
---|
504 | } |
---|
505 | } |
---|
506 | @media (min-width: 320px) { |
---|
507 | .wrapper-xl { |
---|
508 | max-width: 1440px; |
---|
509 | } |
---|
510 | } |
---|
511 | /* Layout */ |
---|
512 | .ly-flex { |
---|
513 | display: flex; |
---|
514 | justify-content: space-between; |
---|
515 | } |
---|
516 | .ly-flex.ly-center { |
---|
517 | align-items: center; |
---|
518 | } |
---|
519 | .ly-flex.ly-start { |
---|
520 | justify-content: flex-start; |
---|
521 | } |
---|
522 | .ly-flex.ly-2 { |
---|
523 | flex-flow: row wrap; |
---|
524 | } |
---|
525 | .ly-flex.ly-2 > div, |
---|
526 | .ly-flex.ly-2 > li, |
---|
527 | .ly-flex.ly-2 > p, |
---|
528 | .ly-flex.ly-2 > a { |
---|
529 | width: 50%; |
---|
530 | } |
---|
531 | .ly-flex.ly-2.has-gap > div, |
---|
532 | .ly-flex.ly-2.has-gap > li, |
---|
533 | .ly-flex.ly-2.has-gap > p, |
---|
534 | .ly-flex.ly-2.has-gap > a { |
---|
535 | width: 48%; |
---|
536 | } |
---|
537 | .ly-flex.ly-3 { |
---|
538 | flex-flow: row wrap; |
---|
539 | } |
---|
540 | .ly-flex.ly-3 > div, |
---|
541 | .ly-flex.ly-3 > li, |
---|
542 | .ly-flex.ly-3 > p { |
---|
543 | width: 33%; |
---|
544 | } |
---|
545 | .ly-flex.ly-3.has-gap > div, |
---|
546 | .ly-flex.ly-3.has-gap > li, |
---|
547 | .ly-flex.ly-3.has-gap > p { |
---|
548 | width: 31%; |
---|
549 | } |
---|
550 | .ly-flex.ly-4 { |
---|
551 | flex-flow: row wrap; |
---|
552 | } |
---|
553 | .ly-flex.ly-4 > div, |
---|
554 | .ly-flex.ly-4 > li, |
---|
555 | .ly-flex.ly-4 > p { |
---|
556 | width: 25%; |
---|
557 | } |
---|
558 | .ly-flex.ly-4.has-gap > div, |
---|
559 | .ly-flex.ly-4.has-gap > li, |
---|
560 | .ly-flex.ly-4.has-gap > p { |
---|
561 | width: 23%; |
---|
562 | } |
---|
563 | .ly-flex-end { |
---|
564 | align-items: flex-end; |
---|
565 | } |
---|
566 | /* Generic default forms */ |
---|
567 | form { |
---|
568 | width: 100%; |
---|
569 | } |
---|
570 | legend { |
---|
571 | display: none; |
---|
572 | } |
---|
573 | fieldset { |
---|
574 | border: none; |
---|
575 | padding: 0; |
---|
576 | } |
---|
577 | fieldset > div, |
---|
578 | fieldset > p { |
---|
579 | margin-bottom: 1.5em; |
---|
580 | } |
---|
581 | label { |
---|
582 | display: block; |
---|
583 | font-size: 13px; |
---|
584 | margin-bottom: 0.25em; |
---|
585 | } |
---|
586 | input { |
---|
587 | width: 100%; |
---|
588 | padding: 0.5em 0.75em; |
---|
589 | border: 1px solid transparent; |
---|
590 | border-radius: 2px; |
---|
591 | } |
---|
592 | .ow-forms label { |
---|
593 | display: block; |
---|
594 | margin-bottom: 0.35em; |
---|
595 | color: #959595; |
---|
596 | } |
---|
597 | .ow-forms textarea { |
---|
598 | resize: vertical; |
---|
599 | height: 200px; |
---|
600 | } |
---|
601 | .ow-forms textarea, |
---|
602 | .ow-forms input { |
---|
603 | width: 100%; |
---|
604 | padding: 0.65em; |
---|
605 | border-radius: 4px; |
---|
606 | border: 1px solid #e1e1e1; |
---|
607 | } |
---|
608 | .ow-forms select { |
---|
609 | width: 100%; |
---|
610 | } |
---|
611 | /* Generic button */ |
---|
612 | .button { |
---|
613 | box-sizing: border-box; |
---|
614 | display: inline-block; |
---|
615 | text-align: center; |
---|
616 | vertical-align: middle; |
---|
617 | cursor: pointer; |
---|
618 | border: 1px solid transparent; |
---|
619 | text-decoration: none; |
---|
620 | font-style: normal; |
---|
621 | white-space: nowrap; |
---|
622 | text-overflow: ellipsis; |
---|
623 | padding: 0.3em 1em; |
---|
624 | margin: 0; |
---|
625 | position: relative; |
---|
626 | overflow: hidden; |
---|
627 | background: #e1e1e1; |
---|
628 | color: #151515; |
---|
629 | font-size: 1em; |
---|
630 | line-height: 1.25; |
---|
631 | max-width: 100%; |
---|
632 | width: auto; |
---|
633 | } |
---|
634 | .button-normal { |
---|
635 | width: auto; |
---|
636 | } |
---|
637 | .button-normal:hover { |
---|
638 | background-color: #959595; |
---|
639 | color: white; |
---|
640 | } |
---|
641 | .button-important { |
---|
642 | background-color: #EE4056; |
---|
643 | } |
---|
644 | /* |
---|
645 | Very simple way to paint dropdown-like arrows, without |
---|
646 | using any external dependencies. |
---|
647 | |
---|
648 | To use it, add something like this to your html, to display a "down" arrow: |
---|
649 | |
---|
650 | <i class="arrow down"></i> |
---|
651 | */ |
---|
652 | i.arrow { |
---|
653 | border: solid black; |
---|
654 | border-width: 0 3px 3px 0; |
---|
655 | display: inline-block; |
---|
656 | padding: 3px; |
---|
657 | margin: 3px; |
---|
658 | margin-left: 6px; |
---|
659 | margin-right: 0px; |
---|
660 | } |
---|
661 | .right { |
---|
662 | transform: rotate(-45deg); |
---|
663 | -webkit-transform: rotate(-45deg); |
---|
664 | } |
---|
665 | .left { |
---|
666 | transform: rotate(135deg); |
---|
667 | -webkit-transform: rotate(135deg); |
---|
668 | } |
---|
669 | .up { |
---|
670 | transform: rotate(-135deg); |
---|
671 | -webkit-transform: rotate(-135deg); |
---|
672 | } |
---|
673 | .down { |
---|
674 | transform: rotate(45deg); |
---|
675 | -webkit-transform: rotate(45deg); |
---|
676 | } |
---|
677 | .header-content { |
---|
678 | padding: 1em 1.5em; |
---|
679 | } |
---|
680 | .header-content a { |
---|
681 | text-decoration: none; |
---|
682 | } |
---|
683 | .header-content .description { |
---|
684 | margin: 0; |
---|
685 | } |
---|
686 | /* logo ----------------------------------------------------------------------*/ |
---|
687 | .logo { |
---|
688 | font-size: 24px; |
---|
689 | font-size: 1.5rem; |
---|
690 | line-height: 1em; |
---|
691 | font-weight: 800; |
---|
692 | text-transform: uppercase; |
---|
693 | margin: 0; |
---|
694 | display: inline-block; |
---|
695 | } |
---|
696 | .logo span { |
---|
697 | transition: all 250ms ease-in-out; |
---|
698 | } |
---|
699 | .logo:hover span { |
---|
700 | color: #EE4056; |
---|
701 | } |
---|
702 | @media (max-width: 800px) { |
---|
703 | .logo a { |
---|
704 | content: ""; |
---|
705 | display: inline-block; |
---|
706 | width: 34px; |
---|
707 | height: 34px; |
---|
708 | background-image: url('/static/media/img/logo-openworkouts.png'); |
---|
709 | background-size: 100%; |
---|
710 | background-repeat: no-repeat; |
---|
711 | } |
---|
712 | .logo a span { |
---|
713 | display: none !important; |
---|
714 | } |
---|
715 | } |
---|
716 | .logo-open { |
---|
717 | display: block; |
---|
718 | color: #EE4056; |
---|
719 | } |
---|
720 | .logo-work, |
---|
721 | .logo-outs { |
---|
722 | color: #f8b5be; |
---|
723 | } |
---|
724 | /* menu navigation -----------------------------------------------------------*/ |
---|
725 | .nav-site { |
---|
726 | font-size: 13px; |
---|
727 | font-size: 0.8125rem; |
---|
728 | } |
---|
729 | .nav-site ul { |
---|
730 | list-style-type: none; |
---|
731 | padding: 0; |
---|
732 | margin: 0; |
---|
733 | display: flex; |
---|
734 | flex-direction: row; |
---|
735 | justify-content: space-between; |
---|
736 | align-items: center; |
---|
737 | } |
---|
738 | .nav-site li { |
---|
739 | border-left: 1px solid #e1e1e1; |
---|
740 | flex-grow: 1; |
---|
741 | text-align: center; |
---|
742 | /* this is for the dashboard li element */ |
---|
743 | } |
---|
744 | .nav-site li:first-child { |
---|
745 | display: none; |
---|
746 | } |
---|
747 | @media (min-width: 800px) { |
---|
748 | .nav-site li:first-child { |
---|
749 | display: inline-block; |
---|
750 | } |
---|
751 | } |
---|
752 | .nav-site a { |
---|
753 | color: #959595; |
---|
754 | padding: 1.25em; |
---|
755 | display: block; |
---|
756 | } |
---|
757 | .nav-site a:hover { |
---|
758 | color: #151515; |
---|
759 | } |
---|
760 | .nav-site .is-active a { |
---|
761 | color: #151515; |
---|
762 | } |
---|
763 | .icon-dashboard::before, |
---|
764 | .icon-profile::before, |
---|
765 | .icon-logout::before { |
---|
766 | content: ""; |
---|
767 | display: inline-block; |
---|
768 | } |
---|
769 | .icon-dashboard span, |
---|
770 | .icon-profile span, |
---|
771 | .icon-logout span { |
---|
772 | display: none; |
---|
773 | } |
---|
774 | @media (min-width: 800px) { |
---|
775 | .icon-dashboard::before, |
---|
776 | .icon-profile::before, |
---|
777 | .icon-logout::before { |
---|
778 | display: none; |
---|
779 | } |
---|
780 | .icon-dashboard span, |
---|
781 | .icon-profile span, |
---|
782 | .icon-logout span { |
---|
783 | display: inline-block; |
---|
784 | } |
---|
785 | } |
---|
786 | .icon-dashboard:hover, |
---|
787 | .icon-profile:hover, |
---|
788 | .icon-logout:hover { |
---|
789 | opacity: 0.5; |
---|
790 | } |
---|
791 | .icon-dashboard::before { |
---|
792 | content: "☰"; |
---|
793 | font-size: 30px; |
---|
794 | font-size: 1.875rem; |
---|
795 | line-height: 0em; |
---|
796 | position: relative; |
---|
797 | top: 3px; |
---|
798 | margin: 0; |
---|
799 | } |
---|
800 | .icon-profile { |
---|
801 | padding: 1em 1.25em !important; |
---|
802 | } |
---|
803 | .icon-profile::before { |
---|
804 | position: relative; |
---|
805 | top: 3px; |
---|
806 | width: 20px; |
---|
807 | height: 20px; |
---|
808 | background-image: url('/static/media/img/icon-user.svg'); |
---|
809 | background-size: 100%; |
---|
810 | margin: 0; |
---|
811 | } |
---|
812 | .icon-logout { |
---|
813 | padding: 1em 1.25em !important; |
---|
814 | } |
---|
815 | .icon-logout::before { |
---|
816 | position: relative; |
---|
817 | top: 3px; |
---|
818 | width: 20px; |
---|
819 | height: 20px; |
---|
820 | background-image: url('/static/media/img/icon-logout.svg'); |
---|
821 | background-size: 100%; |
---|
822 | margin: 0; |
---|
823 | } |
---|
824 | /* Add workout button with submenu -------------------------------------------*/ |
---|
825 | .add-workout { |
---|
826 | position: relative; |
---|
827 | /* submenu -------------------------------------------------------------- */ |
---|
828 | } |
---|
829 | .add-workout > a { |
---|
830 | color: #EE4056; |
---|
831 | } |
---|
832 | .add-workout > a:before { |
---|
833 | content: "+"; |
---|
834 | font-weight: 800; |
---|
835 | font-size: 32px; |
---|
836 | font-size: 2rem; |
---|
837 | line-height: 0; |
---|
838 | position: relative; |
---|
839 | top: 8px; |
---|
840 | } |
---|
841 | .add-workout > a span { |
---|
842 | display: none; |
---|
843 | } |
---|
844 | .add-workout > a:hover { |
---|
845 | background-color: #EE4056; |
---|
846 | color: white; |
---|
847 | } |
---|
848 | .add-workout:hover:after { |
---|
849 | content: ""; |
---|
850 | position: absolute; |
---|
851 | background-color: white; |
---|
852 | bottom: -1px; |
---|
853 | width: 100%; |
---|
854 | height: 1px; |
---|
855 | display: block; |
---|
856 | z-index: 20; |
---|
857 | } |
---|
858 | .add-workout:hover ul { |
---|
859 | display: inline-block; |
---|
860 | } |
---|
861 | .add-workout ul { |
---|
862 | display: none; |
---|
863 | flex-direction: column; |
---|
864 | position: absolute; |
---|
865 | background-color: rgba(255, 255, 255, 0.95); |
---|
866 | right: -1px; |
---|
867 | border: 1px solid #e1e1e1; |
---|
868 | width: 153px; |
---|
869 | } |
---|
870 | .add-workout ul li { |
---|
871 | border-left: transparent; |
---|
872 | text-align: left; |
---|
873 | } |
---|
874 | .add-workout ul a:hover { |
---|
875 | background-color: #fbfbfb; |
---|
876 | } |
---|
877 | /* description ---------------------------------------------------------------*/ |
---|
878 | .description { |
---|
879 | font-size: 14px; |
---|
880 | font-size: 0.875rem; |
---|
881 | font-weight: 300; |
---|
882 | letter-spacing: 0.025em; |
---|
883 | color: #959595; |
---|
884 | } |
---|
885 | /* ------------------------------ STATES ------------------------------------ */ |
---|
886 | /* when user is login --------------------------------------------------------*/ |
---|
887 | .is-login .header-content { |
---|
888 | border-bottom: 1px solid #e1e1e1; |
---|
889 | display: flex; |
---|
890 | padding: 0em 1.5em; |
---|
891 | justify-content: space-between; |
---|
892 | align-items: center; |
---|
893 | } |
---|
894 | .is-login .description { |
---|
895 | display: none; |
---|
896 | } |
---|
897 | .is-login .logo-open { |
---|
898 | display: inline-block; |
---|
899 | } |
---|
900 | .workout-content { |
---|
901 | padding: 2em 1em; |
---|
902 | display: flex; |
---|
903 | flex-direction: column; |
---|
904 | } |
---|
905 | @media (min-width: 480px) { |
---|
906 | .workout-content { |
---|
907 | padding: 2em 6em; |
---|
908 | } |
---|
909 | } |
---|
910 | @media (min-width: 800px) { |
---|
911 | .workout-content { |
---|
912 | display: flex; |
---|
913 | flex-direction: row; |
---|
914 | justify-content: space-between; |
---|
915 | } |
---|
916 | } |
---|
917 | /* list mode */ |
---|
918 | .workout-list { |
---|
919 | margin-right: 2em; |
---|
920 | width: 100%; |
---|
921 | order: 2; |
---|
922 | /* provisional layout, replace this with grid layout system based on final content */ |
---|
923 | } |
---|
924 | .workout-list > h2 { |
---|
925 | font-weight: 300; |
---|
926 | margin: 0 0 1.5em; |
---|
927 | } |
---|
928 | @media (min-width: 800px) { |
---|
929 | .workout-list { |
---|
930 | order: 1; |
---|
931 | } |
---|
932 | } |
---|
933 | /* Module resume on dashboard workouts */ |
---|
934 | .workout-resume { |
---|
935 | padding: 1.5em 0; |
---|
936 | position: relative; |
---|
937 | max-width: 700px; |
---|
938 | } |
---|
939 | @media (min-width: 800px) { |
---|
940 | .workout-resume { |
---|
941 | padding-left: 2em; |
---|
942 | border-left: 1px solid #e1e1e1; |
---|
943 | transition: all 250ms ease-in-out; |
---|
944 | } |
---|
945 | } |
---|
946 | .workout-resume:hover { |
---|
947 | border-color: #151515; |
---|
948 | } |
---|
949 | .workout-resume:hover .workout-title:before { |
---|
950 | color: #151515; |
---|
951 | } |
---|
952 | .workout-resume ul { |
---|
953 | padding: 0; |
---|
954 | list-style-type: none; |
---|
955 | font-size: 13px; |
---|
956 | font-size: 0.8125rem; |
---|
957 | } |
---|
958 | .workout-resume ul a { |
---|
959 | display: block; |
---|
960 | text-decoration: none; |
---|
961 | } |
---|
962 | .bike:before { |
---|
963 | display: block; |
---|
964 | content: ""; |
---|
965 | width: 30px; |
---|
966 | height: 30px; |
---|
967 | background-image: url('../media/img/bike.svg'); |
---|
968 | background-size: 100%; |
---|
969 | } |
---|
970 | .workout-title { |
---|
971 | font-size: 14px; |
---|
972 | font-size: 0.875rem; |
---|
973 | margin: 0 0 0em 0; |
---|
974 | position: relative; |
---|
975 | } |
---|
976 | .workout-title:before { |
---|
977 | transition: all 250ms ease-in-out; |
---|
978 | content: "▶"; |
---|
979 | position: absolute; |
---|
980 | left: -3.25em; |
---|
981 | top: 0.35em; |
---|
982 | color: #e1e1e1; |
---|
983 | font-size: 10px; |
---|
984 | font-size: 0.625rem; |
---|
985 | } |
---|
986 | .workout-title a { |
---|
987 | color: #151515; |
---|
988 | text-decoration: none; |
---|
989 | } |
---|
990 | .workout-title a:hover { |
---|
991 | color: #EE4056; |
---|
992 | } |
---|
993 | .workout-info { |
---|
994 | display: flex; |
---|
995 | flex-flow: row wrap; |
---|
996 | margin: 0.25em 0; |
---|
997 | } |
---|
998 | .workout-info li { |
---|
999 | color: #959595; |
---|
1000 | margin-bottom: 0.25em; |
---|
1001 | } |
---|
1002 | .workout-info li:after { |
---|
1003 | content: "|"; |
---|
1004 | margin: 0 0.5em; |
---|
1005 | } |
---|
1006 | .workout-info li:last-child:after { |
---|
1007 | content: ""; |
---|
1008 | margin: 0; |
---|
1009 | } |
---|
1010 | .workout-map { |
---|
1011 | margin-top: 1em; |
---|
1012 | } |
---|
1013 | .workout-map img { |
---|
1014 | width: 100%; |
---|
1015 | } |
---|
1016 | .workout-intro { |
---|
1017 | font-size: 13px; |
---|
1018 | font-size: 0.8125rem; |
---|
1019 | color: #151515; |
---|
1020 | } |
---|
1021 | .workout-options { |
---|
1022 | display: inline-block; |
---|
1023 | border: 1px solid #e1e1e1; |
---|
1024 | margin-bottom: 0; |
---|
1025 | border-radius: 4px; |
---|
1026 | padding: 0; |
---|
1027 | width: auto; |
---|
1028 | background-color: white; |
---|
1029 | } |
---|
1030 | .workout-options li { |
---|
1031 | display: inline-block; |
---|
1032 | border-right: 1px solid #e1e1e1; |
---|
1033 | } |
---|
1034 | .workout-options li:last-child { |
---|
1035 | border-right: none; |
---|
1036 | } |
---|
1037 | .workout-options a { |
---|
1038 | display: block; |
---|
1039 | color: #959595; |
---|
1040 | padding: 0.5em 0.75em; |
---|
1041 | text-decoration: none; |
---|
1042 | } |
---|
1043 | .workout-options a:hover { |
---|
1044 | color: #151515; |
---|
1045 | } |
---|
1046 | .workout-options a.is-active { |
---|
1047 | background-color: #959595; |
---|
1048 | color: white; |
---|
1049 | } |
---|
1050 | .owo-del a:hover { |
---|
1051 | color: red; |
---|
1052 | } |
---|
1053 | .workout-aside { |
---|
1054 | width: 100%; |
---|
1055 | order: 1; |
---|
1056 | } |
---|
1057 | @media (min-width: 800px) { |
---|
1058 | .workout-aside { |
---|
1059 | order: 2; |
---|
1060 | max-width: 300px; |
---|
1061 | padding-left: 1.5em; |
---|
1062 | border-left: 1px solid #e1e1e1; |
---|
1063 | } |
---|
1064 | } |
---|
1065 | .aside-profile { |
---|
1066 | margin-bottom: 1em; |
---|
1067 | } |
---|
1068 | .aside-profile img { |
---|
1069 | width: 80px; |
---|
1070 | height: 80px; |
---|
1071 | object-fit: cover; |
---|
1072 | border-radius: 50%; |
---|
1073 | } |
---|
1074 | .aside-profile h2 { |
---|
1075 | font-weight: 400; |
---|
1076 | font-size: 18px; |
---|
1077 | font-size: 1.125rem; |
---|
1078 | margin: 0 0 0.5em 0; |
---|
1079 | } |
---|
1080 | .aside-profile ul { |
---|
1081 | list-style-type: none; |
---|
1082 | margin: 0; |
---|
1083 | padding: 0; |
---|
1084 | font-size: 13px; |
---|
1085 | font-size: 0.8125rem; |
---|
1086 | color: #555555; |
---|
1087 | } |
---|
1088 | .aside-profile a { |
---|
1089 | text-decoration: none; |
---|
1090 | color: #151515; |
---|
1091 | } |
---|
1092 | .aside-profile a:hover { |
---|
1093 | color: #959595; |
---|
1094 | } |
---|
1095 | /* Workout detail */ |
---|
1096 | #map { |
---|
1097 | width: 100%; |
---|
1098 | height: 400px; |
---|
1099 | } |
---|
1100 | @media (min-width: 480px) { |
---|
1101 | #map { |
---|
1102 | height: calc(100vh - 465px); |
---|
1103 | } |
---|
1104 | } |
---|
1105 | .workout-detail { |
---|
1106 | padding: 0em 1em; |
---|
1107 | } |
---|
1108 | @media (min-width: 480px) { |
---|
1109 | .workout-detail { |
---|
1110 | max-width: 1280px; |
---|
1111 | margin: 0 auto; |
---|
1112 | } |
---|
1113 | } |
---|
1114 | @media (min-width: 800px) { |
---|
1115 | .workout-detail { |
---|
1116 | display: flex; |
---|
1117 | justify-content: space-between; |
---|
1118 | } |
---|
1119 | } |
---|
1120 | .workout-detail-resume { |
---|
1121 | max-width: 500px; |
---|
1122 | margin-bottom: 2em; |
---|
1123 | padding-top: 2em; |
---|
1124 | } |
---|
1125 | @media (min-width: 800px) { |
---|
1126 | .workout-detail-resume { |
---|
1127 | margin-right: 6em; |
---|
1128 | } |
---|
1129 | } |
---|
1130 | .workout-detail-resume h3 { |
---|
1131 | margin-top: 0; |
---|
1132 | margin-bottom: 0.5em; |
---|
1133 | } |
---|
1134 | .workout-detail-resume h3 + div { |
---|
1135 | font-size: 14px; |
---|
1136 | font-size: 0.875rem; |
---|
1137 | color: #959595; |
---|
1138 | line-height: 1.35em; |
---|
1139 | } |
---|
1140 | .workout-detail-resume .workout-options { |
---|
1141 | font-size: 13px; |
---|
1142 | font-size: 0.8125rem; |
---|
1143 | } |
---|
1144 | .workout-detail-info { |
---|
1145 | max-width: 600px; |
---|
1146 | } |
---|
1147 | @media (min-width: 800px) { |
---|
1148 | .workout-detail-info { |
---|
1149 | border-right: 1px solid #e1e1e1; |
---|
1150 | border-left: 1px solid #e1e1e1; |
---|
1151 | padding: 2em 1em 2em 2em; |
---|
1152 | } |
---|
1153 | } |
---|
1154 | .workout-detail-info ul { |
---|
1155 | list-style-type: none; |
---|
1156 | padding: 0; |
---|
1157 | margin: 0; |
---|
1158 | display: flex; |
---|
1159 | justify-content: space-between; |
---|
1160 | flex-flow: row wrap; |
---|
1161 | } |
---|
1162 | .workout-detail-info ul span { |
---|
1163 | display: block; |
---|
1164 | font-size: 13px; |
---|
1165 | font-size: 0.8125rem; |
---|
1166 | color: #959595; |
---|
1167 | margin-bottom: 0.25em; |
---|
1168 | /* color for future features */ |
---|
1169 | } |
---|
1170 | .workout-detail-info ul span.min, |
---|
1171 | .workout-detail-info ul span.avg, |
---|
1172 | .workout-detail-info ul span.max { |
---|
1173 | display: inline-block; |
---|
1174 | color: white; |
---|
1175 | padding: 0.5em 0.85em; |
---|
1176 | border-radius: 3px; |
---|
1177 | background-color: #e1e1e1; |
---|
1178 | color: #959595; |
---|
1179 | } |
---|
1180 | .workout-detail-info li { |
---|
1181 | margin-bottom: 1em; |
---|
1182 | margin-right: 1em; |
---|
1183 | color: #959595; |
---|
1184 | font-size: 15px; |
---|
1185 | font-size: 0.9375rem; |
---|
1186 | } |
---|
1187 | .workout-detail-info li.important { |
---|
1188 | font-size: 21px; |
---|
1189 | font-size: 1.3125rem; |
---|
1190 | color: #151515; |
---|
1191 | } |
---|
1192 | /* Week report */ |
---|
1193 | .svg-content svg { |
---|
1194 | width: 100%; |
---|
1195 | height: 100%; |
---|
1196 | } |
---|
1197 | .svg-content .label { |
---|
1198 | font-size: 13px; |
---|
1199 | font-size: 0.8125rem; |
---|
1200 | text-anchor: middle; |
---|
1201 | } |
---|
1202 | .svg-content .tick { |
---|
1203 | font-size: 13px; |
---|
1204 | font-size: 0.8125rem; |
---|
1205 | } |
---|
1206 | /* dashboard graphics*/ |
---|
1207 | .x-axis path, |
---|
1208 | .x-axis line { |
---|
1209 | fill: none; |
---|
1210 | stroke: none; |
---|
1211 | } |
---|
1212 | .bar { |
---|
1213 | fill: #f8b5be; |
---|
1214 | } |
---|
1215 | .bar:hover { |
---|
1216 | fill: #ee4056; |
---|
1217 | } |
---|
1218 | .current { |
---|
1219 | fill: #ee4056; |
---|
1220 | } |
---|
1221 | .week-stats { |
---|
1222 | border: 1px solid #e1e1e1; |
---|
1223 | background-color: rgba(225, 225, 225, 0.1); |
---|
1224 | padding: 0.75em; |
---|
1225 | border-radius: 4px; |
---|
1226 | margin-bottom: 2em; |
---|
1227 | } |
---|
1228 | .week-stats h3 { |
---|
1229 | margin: 0; |
---|
1230 | font-size: 14px; |
---|
1231 | font-size: 0.875rem; |
---|
1232 | } |
---|
1233 | .week-stats h3 + p { |
---|
1234 | margin: 0.25em 0 2em 0; |
---|
1235 | color: #959595; |
---|
1236 | font-size: 13px; |
---|
1237 | font-size: 0.8125rem; |
---|
1238 | } |
---|
1239 | .workout-activity-summary { |
---|
1240 | list-style-type: none; |
---|
1241 | padding: 0; |
---|
1242 | margin: 0; |
---|
1243 | background-color: rgba(21, 21, 21, 0.8); |
---|
1244 | margin-bottom: 0.75em; |
---|
1245 | } |
---|
1246 | .workout-activity-summary li { |
---|
1247 | color: #e1e1e1; |
---|
1248 | border-bottom: 1px solid #959595; |
---|
1249 | padding: 0.75em 1em; |
---|
1250 | display: flex; |
---|
1251 | justify-content: space-between; |
---|
1252 | } |
---|
1253 | .workout-activity-summary li:last-child { |
---|
1254 | margin-bottom: 0; |
---|
1255 | border: none; |
---|
1256 | } |
---|
1257 | .workout-activity-summary li span:first-child { |
---|
1258 | font-weight: bold; |
---|
1259 | } |
---|
1260 | .workout-activity-tree { |
---|
1261 | list-style-type: none; |
---|
1262 | padding: 0; |
---|
1263 | margin: 0; |
---|
1264 | transition: all 250ms ease-in-out; |
---|
1265 | font-size: 13px; |
---|
1266 | font-size: 0.8125rem; |
---|
1267 | } |
---|
1268 | .workout-activity-tree > li { |
---|
1269 | margin-bottom: 0.5em; |
---|
1270 | padding-bottom: 0.5em; |
---|
1271 | border-bottom: 1px solid #e1e1e1; |
---|
1272 | } |
---|
1273 | .workout-activity-tree a { |
---|
1274 | text-decoration: none; |
---|
1275 | display: block; |
---|
1276 | color: #EE4056; |
---|
1277 | } |
---|
1278 | .workout-activity-tree a:hover { |
---|
1279 | color: #151515; |
---|
1280 | } |
---|
1281 | .workout-activity-tree a.viewing-year { |
---|
1282 | color: #151515; |
---|
1283 | font-weight: 700; |
---|
1284 | margin-bottom: 0.5em; |
---|
1285 | font-size: 16px; |
---|
1286 | font-size: 1rem; |
---|
1287 | } |
---|
1288 | .workout-activity-tree a.viewing-month { |
---|
1289 | background-color: #e1e1e1; |
---|
1290 | color: #151515; |
---|
1291 | font-weight: 700; |
---|
1292 | } |
---|
1293 | .workout-activity-tree-year { |
---|
1294 | list-style-type: none; |
---|
1295 | padding: 0; |
---|
1296 | margin: 0; |
---|
1297 | } |
---|
1298 | .workout-activity-tree-year > li { |
---|
1299 | display: block; |
---|
1300 | margin-bottom: 0.5em; |
---|
1301 | } |
---|
1302 | .workout-activity-tree-year a { |
---|
1303 | display: flex; |
---|
1304 | justify-content: space-between; |
---|
1305 | padding: 0.5em; |
---|
1306 | background-color: #fbfbfb; |
---|
1307 | color: #555555; |
---|
1308 | } |
---|
1309 | .workout-activity-tree-year a:hover { |
---|
1310 | background-color: #e1e1e1; |
---|
1311 | } |
---|
1312 | .ow-forms { |
---|
1313 | padding-top: 2em; |
---|
1314 | } |
---|
1315 | .ow-forms h2 { |
---|
1316 | border-top: 1px solid #e1e1e1; |
---|
1317 | padding-top: 0.5em; |
---|
1318 | } |
---|
1319 | .back { |
---|
1320 | color: #EE4056; |
---|
1321 | text-decoration: none; |
---|
1322 | font-weight: 700; |
---|
1323 | } |
---|
1324 | .back:before { |
---|
1325 | content: "⬅"; |
---|
1326 | margin-right: 0.5em; |
---|
1327 | } |
---|
1328 | .back:hover { |
---|
1329 | color: #151515; |
---|
1330 | } |
---|
1331 | .login-content { |
---|
1332 | background-image: url("../media/img/back-01.jpg"); |
---|
1333 | background-position: center; |
---|
1334 | background-size: cover; |
---|
1335 | display: flex; |
---|
1336 | justify-content: center; |
---|
1337 | align-items: center; |
---|
1338 | min-height: calc(100vh - 98px); |
---|
1339 | padding: 1em 0; |
---|
1340 | } |
---|
1341 | .login-content form { |
---|
1342 | max-width: 380px; |
---|
1343 | background-color: rgba(21, 21, 21, 0.6); |
---|
1344 | border-radius: 6px; |
---|
1345 | padding: 2em 1.5em; |
---|
1346 | } |
---|
1347 | .login-content form div { |
---|
1348 | margin-bottom: 1.5em; |
---|
1349 | } |
---|
1350 | .login-content label { |
---|
1351 | color: #e1e1e1; |
---|
1352 | } |
---|
1353 | .login-content a { |
---|
1354 | color: #e1e1e1; |
---|
1355 | font-size: 13px; |
---|
1356 | text-decoration: none; |
---|
1357 | margin-right: 0.75em; |
---|
1358 | } |
---|
1359 | .login-content a:hover { |
---|
1360 | color: white; |
---|
1361 | } |
---|
1362 | .login-content .button { |
---|
1363 | transition: all 500ms ease-in-out; |
---|
1364 | background-color: #EE4056; |
---|
1365 | color: white; |
---|
1366 | text-transform: uppercase; |
---|
1367 | } |
---|
1368 | .login-content .button:hover { |
---|
1369 | background-color: #e6152f; |
---|
1370 | } |
---|
1371 | .login-content .message { |
---|
1372 | padding: 0.5em; |
---|
1373 | margin: 0; |
---|
1374 | text-align: center; |
---|
1375 | font-size: 13px; |
---|
1376 | font-size: 0.8125rem; |
---|
1377 | } |
---|
1378 | .login-content .message.message-error { |
---|
1379 | color: white; |
---|
1380 | background-color: red; |
---|
1381 | } |
---|
1382 | /* |
---|
1383 | .login-remember { |
---|
1384 | color: @color-main-medium; |
---|
1385 | .font-size(14); |
---|
1386 | text-decoration: none; |
---|
1387 | font-weight: 300; |
---|
1388 | &:hover{ |
---|
1389 | color: @color-main-light; |
---|
1390 | } |
---|
1391 | } |
---|
1392 | <a class="login-remember" href="#">Forgot your password?</a> |
---|
1393 | */ |
---|
1394 | .user-profile .workout-options { |
---|
1395 | font-size: 13px; |
---|
1396 | font-size: 0.8125rem; |
---|
1397 | margin-right: 2em; |
---|
1398 | } |
---|
1399 | .user-profile-account { |
---|
1400 | background-color: #fbfbfb; |
---|
1401 | border-bottom: 1px solid #e1e1e1; |
---|
1402 | padding: 2em 1em; |
---|
1403 | } |
---|
1404 | @media (min-width: 480px) { |
---|
1405 | .user-profile-account { |
---|
1406 | padding: 2em 6em; |
---|
1407 | } |
---|
1408 | } |
---|
1409 | @media (min-width: 800px) { |
---|
1410 | .user-profile-account > div { |
---|
1411 | display: flex; |
---|
1412 | align-items: center; |
---|
1413 | } |
---|
1414 | } |
---|
1415 | .user-profile-account img { |
---|
1416 | width: 64px; |
---|
1417 | height: 64px; |
---|
1418 | object-fit: cover; |
---|
1419 | border-radius: 50%; |
---|
1420 | margin-bottom: 0.5em; |
---|
1421 | margin-right: 1em; |
---|
1422 | } |
---|
1423 | @media (min-width: 800px) { |
---|
1424 | .user-profile-account img { |
---|
1425 | width: 140px; |
---|
1426 | height: 140px; |
---|
1427 | } |
---|
1428 | } |
---|
1429 | .user-profile-account h2 { |
---|
1430 | margin: 0 0 0.15em 0; |
---|
1431 | font-size: 21px; |
---|
1432 | font-size: 1.3125rem; |
---|
1433 | font-weight: 400; |
---|
1434 | } |
---|
1435 | .user-profile-account p { |
---|
1436 | color: #555555; |
---|
1437 | font-size: 14px; |
---|
1438 | font-size: 0.875rem; |
---|
1439 | margin: 0; |
---|
1440 | } |
---|
1441 | .user-profile-account p a { |
---|
1442 | color: #EE4056; |
---|
1443 | text-decoration: none; |
---|
1444 | } |
---|
1445 | .user-profile-account p a:hover { |
---|
1446 | color: #151515; |
---|
1447 | } |
---|
1448 | .user-profile-account p span { |
---|
1449 | color: #959595; |
---|
1450 | } |
---|
1451 | .total-workouts { |
---|
1452 | font-size: 13px; |
---|
1453 | font-size: 0.8125rem; |
---|
1454 | font-weight: bold; |
---|
1455 | } |
---|
1456 | .total-workouts span { |
---|
1457 | color: #959595; |
---|
1458 | margin-right: 0.5em; |
---|
1459 | } |
---|
1460 | .total-workouts span:first-child { |
---|
1461 | color: #151515; |
---|
1462 | } |
---|
1463 | .total-workouts span:first-child:after { |
---|
1464 | content: "|"; |
---|
1465 | color: #e1e1e1; |
---|
1466 | margin-left: 0.5em; |
---|
1467 | } |
---|
1468 | .profile-data { |
---|
1469 | list-style-type: none; |
---|
1470 | padding: 0; |
---|
1471 | font-size: 14px; |
---|
1472 | font-size: 0.875rem; |
---|
1473 | background-color: white; |
---|
1474 | padding: 0.5em 0.75em; |
---|
1475 | border-radius: 4px; |
---|
1476 | border: 1px solid #e1e1e1; |
---|
1477 | } |
---|
1478 | .profile-data li { |
---|
1479 | display: flex; |
---|
1480 | justify-content: space-between; |
---|
1481 | color: #959595; |
---|
1482 | } |
---|
1483 | .profile-data li:not(:last-child) { |
---|
1484 | margin-bottom: 0.5em; |
---|
1485 | padding-bottom: 0.5em; |
---|
1486 | border-bottom: 1px solid #e1e1e1; |
---|
1487 | } |
---|
1488 | .profile-data li span { |
---|
1489 | font-weight: bold; |
---|
1490 | color: #151515; |
---|
1491 | } |
---|
1492 | .profile-data li a { |
---|
1493 | color: #EE4056; |
---|
1494 | text-decoration: none; |
---|
1495 | } |
---|
1496 | .profile-data li a:hover { |
---|
1497 | color: #151515; |
---|
1498 | } |
---|
1499 | .profile-data li a:active, |
---|
1500 | .profile-data li a:focus { |
---|
1501 | outline: 0; |
---|
1502 | border: none; |
---|
1503 | -moz-outline-style: none; |
---|
1504 | } |
---|
1505 | .profile-bio { |
---|
1506 | margin: 0.5em 0; |
---|
1507 | font-size: 14px; |
---|
1508 | font-size: 0.875rem; |
---|
1509 | } |
---|
1510 | .month-stats, |
---|
1511 | .latest-workouts { |
---|
1512 | max-width: 700px; |
---|
1513 | } |
---|
1514 | .center { |
---|
1515 | text-align: center; |
---|
1516 | } |
---|
1517 | .month-stats { |
---|
1518 | margin-bottom: 4em; |
---|
1519 | } |
---|
1520 | .latest-workouts h4 { |
---|
1521 | margin: 0; |
---|
1522 | } |
---|
1523 | .latest-workouts h4 a { |
---|
1524 | color: #151515; |
---|
1525 | text-decoration: none; |
---|
1526 | } |
---|
1527 | .latest-workouts > span { |
---|
1528 | font-size: 13px; |
---|
1529 | font-size: 0.8125rem; |
---|
1530 | } |
---|
1531 | .latest-workouts p { |
---|
1532 | margin-top: 0.25em; |
---|
1533 | color: #959595; |
---|
1534 | font-size: 13px; |
---|
1535 | font-size: 0.8125rem; |
---|
1536 | } |
---|
1537 | .profile-dropdown-sports, |
---|
1538 | .profile-dropdown-years { |
---|
1539 | color: #151515; |
---|
1540 | text-decoration: none; |
---|
1541 | } |
---|
1542 | .profile-dropdown-sports:hover, |
---|
1543 | .profile-dropdown-years:hover { |
---|
1544 | color: #151515; |
---|
1545 | } |
---|
1546 | .profile-dropdown-sports:active, |
---|
1547 | .profile-dropdown-years:active, |
---|
1548 | .profile-dropdown-sports:focus, |
---|
1549 | .profile-dropdown-years:focus { |
---|
1550 | outline: 0; |
---|
1551 | border: none; |
---|
1552 | -moz-outline-style: none; |
---|
1553 | } |
---|
1554 | /* Calendar heatmap */ |
---|
1555 | .calendar-heatmap { |
---|
1556 | margin: 20px; |
---|
1557 | } |
---|
1558 | .calendar-heatmap .month { |
---|
1559 | margin-right: 8px; |
---|
1560 | } |
---|
1561 | .calendar-heatmap .month-name { |
---|
1562 | font-size: 85%; |
---|
1563 | fill: #777; |
---|
1564 | } |
---|
1565 | .calendar-heatmap .day-name { |
---|
1566 | font-size: 85%; |
---|
1567 | fill: #777; |
---|
1568 | } |
---|
1569 | .calendar-heatmap .day:hover { |
---|
1570 | stroke: #e1e1e1; |
---|
1571 | stroke-width: 2; |
---|
1572 | } |
---|
1573 | .calendar-heatmap .day:focus { |
---|
1574 | stroke: #e1e1e1; |
---|
1575 | stroke-width: 2; |
---|
1576 | } |
---|
1577 | .verify-account-content { |
---|
1578 | background-position: center; |
---|
1579 | background-size: cover; |
---|
1580 | display: flex; |
---|
1581 | justify-content: center; |
---|
1582 | align-items: center; |
---|
1583 | /* dynamic min-height based on window height does not work well |
---|
1584 | with premailer and generating the proper html with styles for mails */ |
---|
1585 | min-height: 400px; |
---|
1586 | padding: 1em 0; |
---|
1587 | /* RGB calculated color does not work well with premailer and |
---|
1588 | generating the proper html with styles for mails */ |
---|
1589 | color: #151515; |
---|
1590 | } |
---|
1591 | .verify-account-content .info { |
---|
1592 | max-width: 580px; |
---|
1593 | /* RGB calculated color does not work well with premailer and |
---|
1594 | generating the proper html with styles for mails */ |
---|
1595 | background-color: #e1e1e1; |
---|
1596 | border-radius: 6px; |
---|
1597 | padding: 2em 1.5em; |
---|
1598 | } |
---|
1599 | .verify-account-content .info div { |
---|
1600 | margin-bottom: 1.5em; |
---|
1601 | } |
---|
1602 | .verify-account-content a { |
---|
1603 | /* RGB calculated color does not work well with premailer and |
---|
1604 | generating the proper html with styles for mails */ |
---|
1605 | color: #151515; |
---|
1606 | font-size: 13px; |
---|
1607 | text-decoration: none; |
---|
1608 | margin-right: 0.75em; |
---|
1609 | } |
---|
1610 | .verify-account-content a:hover { |
---|
1611 | color: #151515; |
---|
1612 | } |
---|
1613 | .verify-account-content .button { |
---|
1614 | background-color: #EE4056; |
---|
1615 | background: #EE4056; |
---|
1616 | color: white; |
---|
1617 | text-transform: uppercase; |
---|
1618 | } |
---|
1619 | .verify-account-content .button:hover { |
---|
1620 | background-color: #F60002; |
---|
1621 | } |
---|