source: OpenWorkouts-current/ow/static/css/main.css @ 2a71053

currentfeature/docs
Last change on this file since 2a71053 was 2a71053, checked in by Segundo Fdez <segun.2@…>, 5 years ago

update favicon and responsive navigation

  • Property mode set to 100644
File size: 27.6 KB
Line 
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(http://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(http://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(http://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(http://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(http://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(http://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(http://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 */
50html {
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 */
61body {
62  margin: 0;
63}
64/**
65 * Render the `main` element consistently in IE.
66 */
67main {
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 */
74h1 {
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 */
84hr {
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 */
96pre {
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 */
107a {
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 */
114abbr[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 */
125b,
126strong {
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 */
133code,
134kbd,
135samp {
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 */
144small {
145  font-size: 80%;
146}
147/**
148 * Prevent `sub` and `sup` elements from affecting the line height in
149 * all browsers.
150 */
151sub,
152sup {
153  font-size: 75%;
154  line-height: 0;
155  position: relative;
156  vertical-align: baseline;
157}
158sub {
159  bottom: -0.25em;
160}
161sup {
162  top: -0.5em;
163}
164/* Embedded content
165   ========================================================================== */
166/**
167 * Remove the border on images inside links in IE 10.
168 */
169img {
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 */
178button,
179input,
180optgroup,
181select,
182textarea {
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 */
196button,
197input {
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 */
205button,
206select {
207  /* 1 */
208  text-transform: none;
209}
210/**
211 * Correct the inability to style clickable types in iOS and Safari.
212 */
213button,
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 */
222button::-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 */
232button:-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 */
241fieldset {
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 */
250legend {
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 */
267progress {
268  vertical-align: baseline;
269}
270/**
271 * Remove the default vertical scrollbar in IE 10+.
272 */
273textarea {
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 */
325details {
326  display: block;
327}
328/*
329 * Add the correct display in all browsers.
330 */
331summary {
332  display: list-item;
333}
334/* Misc
335   ========================================================================== */
336/**
337 * Add the correct display in IE 10+.
338 */
339template {
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}
420body {
421  font-family: 'Open Sans', sans-serif;
422}
423html {
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 */
567form {
568  width: 100%;
569}
570legend {
571  display: none;
572}
573fieldset {
574  border: none;
575  padding: 0;
576}
577fieldset > div,
578fieldset > p {
579  margin-bottom: 1.5em;
580}
581label {
582  display: block;
583  font-size: 13px;
584  margin-bottom: 0.25em;
585}
586input {
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/* Generic button */
609.button {
610  box-sizing: border-box;
611  display: inline-block;
612  text-align: center;
613  vertical-align: middle;
614  cursor: pointer;
615  border: 1px solid transparent;
616  text-decoration: none;
617  font-style: normal;
618  white-space: nowrap;
619  text-overflow: ellipsis;
620  padding: 0.3em 1em;
621  margin: 0;
622  position: relative;
623  overflow: hidden;
624  background: #e1e1e1;
625  color: #151515;
626  font-size: 1em;
627  line-height: 1.25;
628  max-width: 100%;
629  width: auto;
630}
631.button-normal {
632  width: auto;
633}
634.button-normal:hover {
635  background-color: #959595;
636  color: white;
637}
638.button-important {
639  background-color: #EE4056;
640}
641.header-content {
642  padding: 1em 1.5em;
643}
644.header-content a {
645  text-decoration: none;
646}
647.header-content .description {
648  margin: 0;
649}
650/* logo ----------------------------------------------------------------------*/
651.logo {
652  font-size: 24px;
653  font-size: 1.5rem;
654  line-height: 1em;
655  font-weight: 800;
656  text-transform: uppercase;
657  margin: 0;
658  display: inline-block;
659}
660.logo span {
661  transition: all 250ms ease-in-out;
662}
663.logo:hover span {
664  color: #EE4056;
665}
666@media (max-width: 800px) {
667  .logo a {
668    content: "";
669    display: inline-block;
670    width: 34px;
671    height: 34px;
672    background-image: url('/static/media/img/logo-openworkouts.png');
673    background-size: 100%;
674    background-repeat: no-repeat;
675  }
676  .logo a span {
677    display: none !important;
678  }
679}
680.logo-open {
681  display: block;
682  color: #EE4056;
683}
684.logo-work,
685.logo-outs {
686  color: #f8b5be;
687}
688/* menu navigation -----------------------------------------------------------*/
689.nav-site {
690  font-size: 13px;
691  font-size: 0.8125rem;
692}
693.nav-site ul {
694  list-style-type: none;
695  padding: 0;
696  margin: 0;
697  display: flex;
698  flex-direction: row;
699  justify-content: space-between;
700  align-items: center;
701}
702.nav-site li {
703  border-left: 1px solid #e1e1e1;
704  flex-grow: 1;
705  text-align: center;
706}
707.nav-site a {
708  color: #959595;
709  padding: 1.25em;
710  display: block;
711}
712.nav-site a:hover {
713  color: #151515;
714}
715.nav-site .is-active a {
716  color: #151515;
717}
718.icon-dashboard::before,
719.icon-profile::before,
720.icon-logout::before {
721  content: "";
722  display: inline-block;
723}
724.icon-dashboard span,
725.icon-profile span,
726.icon-logout span {
727  display: none;
728}
729@media (min-width: 800px) {
730  .icon-dashboard::before,
731  .icon-profile::before,
732  .icon-logout::before {
733    display: none;
734  }
735  .icon-dashboard span,
736  .icon-profile span,
737  .icon-logout span {
738    display: inline-block;
739  }
740}
741.icon-dashboard:hover,
742.icon-profile:hover,
743.icon-logout:hover {
744  opacity: 0.5;
745}
746.icon-dashboard::before {
747  content: "☰";
748  font-size: 30px;
749  font-size: 1.875rem;
750  line-height: 0em;
751  position: relative;
752  top: 3px;
753  margin: 0;
754}
755.icon-profile {
756  padding: 1em 1.25em !important;
757}
758.icon-profile::before {
759  position: relative;
760  top: 3px;
761  width: 20px;
762  height: 20px;
763  background-image: url('/static/media/img/icon-user.svg');
764  background-size: 100%;
765  margin: 0;
766}
767.icon-logout {
768  padding: 1em 1.25em !important;
769}
770.icon-logout::before {
771  position: relative;
772  top: 3px;
773  width: 20px;
774  height: 20px;
775  background-image: url('/static/media/img/icon-logout.svg');
776  background-size: 100%;
777  margin: 0;
778}
779/* Add workout button with submenu -------------------------------------------*/
780.add-workout {
781  position: relative;
782  /* submenu -------------------------------------------------------------- */
783}
784.add-workout > a {
785  color: #EE4056;
786}
787.add-workout > a:before {
788  content: "+";
789  font-weight: 800;
790  font-size: 32px;
791  font-size: 2rem;
792  line-height: 0;
793  position: relative;
794  top: 8px;
795}
796.add-workout > a span {
797  display: none;
798}
799.add-workout > a:hover {
800  background-color: #EE4056;
801  color: white;
802}
803.add-workout:hover:after {
804  content: "";
805  position: absolute;
806  background-color: white;
807  bottom: -1px;
808  width: 100%;
809  height: 1px;
810  display: block;
811  z-index: 20;
812}
813.add-workout:hover ul {
814  display: inline-block;
815}
816.add-workout ul {
817  display: none;
818  flex-direction: column;
819  position: absolute;
820  background-color: rgba(255, 255, 255, 0.95);
821  right: -1px;
822  border: 1px solid #e1e1e1;
823  width: 153px;
824}
825.add-workout ul li {
826  border-left: transparent;
827  text-align: left;
828}
829.add-workout ul a:hover {
830  background-color: #fbfbfb;
831}
832/* description ---------------------------------------------------------------*/
833.description {
834  font-size: 14px;
835  font-size: 0.875rem;
836  font-weight: 300;
837  letter-spacing: 0.025em;
838  color: #959595;
839}
840/* ------------------------------ STATES ------------------------------------ */
841/* when user is login --------------------------------------------------------*/
842.is-login .header-content {
843  border-bottom: 1px solid #e1e1e1;
844  display: flex;
845  padding: 0em 1.5em;
846  justify-content: space-between;
847  align-items: center;
848}
849.is-login .description {
850  display: none;
851}
852.is-login .logo-open {
853  display: inline-block;
854}
855.workout-content {
856  padding: 2em  1em;
857}
858@media (min-width: 480px) {
859  .workout-content {
860    padding: 2em 6em;
861  }
862}
863@media (min-width: 800px) {
864  .workout-content {
865    display: flex;
866    justify-content: space-between;
867  }
868}
869/* list mode */
870.workout-list {
871  margin-right: 2em;
872  width: 100%;
873  /* provisional layout, replace this with grid layout system based on final content */
874}
875.workout-list > h2 {
876  font-weight: 300;
877  margin: 0 0 1.5em;
878}
879/* Module resume on dashboard workouts */
880.workout-resume {
881  padding: 1.5em 0;
882  position: relative;
883  max-width: 700px;
884}
885@media (min-width: 800px) {
886  .workout-resume {
887    padding-left: 2em;
888    border-left: 1px solid #e1e1e1;
889    transition: all 250ms ease-in-out;
890  }
891}
892.workout-resume:hover {
893  border-color: #151515;
894}
895.workout-resume:hover .workout-title:before {
896  color: #151515;
897}
898.workout-resume ul {
899  padding: 0;
900  list-style-type: none;
901  font-size: 13px;
902  font-size: 0.8125rem;
903}
904.workout-resume ul a {
905  display: block;
906  text-decoration: none;
907}
908.bike:before {
909  display: block;
910  content: "";
911  width: 30px;
912  height: 30px;
913  background-image: url('../media/img/bike.svg');
914  background-size: 100%;
915}
916.workout-title {
917  font-size: 14px;
918  font-size: 0.875rem;
919  margin: 0 0 0em 0;
920  position: relative;
921}
922.workout-title:before {
923  transition: all 250ms ease-in-out;
924  content: "▶";
925  position: absolute;
926  left: -3.25em;
927  top: 0.35em;
928  color: #e1e1e1;
929  font-size: 10px;
930  font-size: 0.625rem;
931}
932.workout-title a {
933  color: #151515;
934  text-decoration: none;
935}
936.workout-title a:hover {
937  color: #EE4056;
938}
939.workout-info {
940  display: flex;
941  align-items: center;
942  margin: 0.25em 0;
943}
944.workout-info li {
945  color: #959595;
946}
947.workout-info li:after {
948  content: "|";
949  margin: 0 0.5em;
950}
951.workout-info li:last-child:after {
952  content: "";
953  margin: 0;
954}
955.workout-map {
956  margin-top: 1em;
957}
958.workout-map img {
959  width: 100%;
960}
961.workout-intro {
962  font-size: 13px;
963  font-size: 0.8125rem;
964  color: #151515;
965}
966.workout-options {
967  display: inline-block;
968  border: 1px solid #e1e1e1;
969  margin-bottom: 0;
970  border-radius: 4px;
971  padding: 0;
972  width: auto;
973  background-color: white;
974}
975.workout-options li {
976  display: inline-block;
977  border-right: 1px solid #e1e1e1;
978}
979.workout-options li:last-child {
980  border-right: none;
981}
982.workout-options a {
983  display: block;
984  color: #959595;
985  padding: 0.5em 0.75em;
986  text-decoration: none;
987}
988.workout-options a:hover {
989  color: #151515;
990}
991.workout-options a.is-active {
992  background-color: #959595;
993  color: white;
994}
995.owo-del a:hover {
996  color: red;
997}
998.workout-aside {
999  width: 100%;
1000}
1001@media (min-width: 800px) {
1002  .workout-aside {
1003    max-width: 300px;
1004    padding-left: 1.5em;
1005    border-left: 1px solid #e1e1e1;
1006  }
1007}
1008.aside-profile {
1009  margin-bottom: 1em;
1010}
1011.aside-profile img {
1012  width: 80px;
1013  height: 80px;
1014  object-fit: cover;
1015  border-radius: 50%;
1016}
1017.aside-profile h2 {
1018  font-weight: 400;
1019  font-size: 18px;
1020  font-size: 1.125rem;
1021  margin: 0 0 0.5em 0;
1022}
1023.aside-profile ul {
1024  list-style-type: none;
1025  margin: 0;
1026  padding: 0;
1027  font-size: 13px;
1028  font-size: 0.8125rem;
1029  color: #555555;
1030}
1031/* Workout detail */
1032#map {
1033  width: 100%;
1034  height: 400px;
1035}
1036@media (min-width: 480px) {
1037  #map {
1038    height: calc(100vh - 465px);
1039  }
1040}
1041.workout-detail {
1042  padding: 0em  1em;
1043}
1044@media (min-width: 480px) {
1045  .workout-detail {
1046    max-width: 1280px;
1047    margin: 0 auto;
1048  }
1049}
1050@media (min-width: 800px) {
1051  .workout-detail {
1052    display: flex;
1053    justify-content: space-between;
1054  }
1055}
1056.workout-detail-resume {
1057  max-width: 500px;
1058  margin-bottom: 2em;
1059  padding-top: 2em;
1060}
1061@media (min-width: 800px) {
1062  .workout-detail-resume {
1063    margin-right: 6em;
1064  }
1065}
1066.workout-detail-resume h3 {
1067  margin-top: 0;
1068  margin-bottom: 0.5em;
1069}
1070.workout-detail-resume h3 + div {
1071  font-size: 14px;
1072  font-size: 0.875rem;
1073  color: #959595;
1074  line-height: 1.35em;
1075}
1076.workout-detail-resume .workout-options {
1077  font-size: 13px;
1078  font-size: 0.8125rem;
1079}
1080.workout-detail-info {
1081  max-width: 600px;
1082}
1083@media (min-width: 800px) {
1084  .workout-detail-info {
1085    border-right: 1px solid #e1e1e1;
1086    border-left: 1px solid #e1e1e1;
1087    padding: 2em 1em 2em 2em;
1088  }
1089}
1090.workout-detail-info ul {
1091  list-style-type: none;
1092  padding: 0;
1093  margin: 0;
1094  display: flex;
1095  justify-content: space-between;
1096  flex-flow: row wrap;
1097}
1098.workout-detail-info ul span {
1099  display: block;
1100  font-size: 13px;
1101  font-size: 0.8125rem;
1102  color: #959595;
1103  margin-bottom: 0.25em;
1104  /* color for future features */
1105}
1106.workout-detail-info ul span.min,
1107.workout-detail-info ul span.avg,
1108.workout-detail-info ul span.max {
1109  display: inline-block;
1110  color: white;
1111  padding: 0.5em 0.85em;
1112  border-radius: 3px;
1113  background-color: #e1e1e1;
1114  color: #959595;
1115}
1116.workout-detail-info li {
1117  margin-bottom: 1em;
1118  margin-right: 1em;
1119  color: #959595;
1120  font-size: 15px;
1121  font-size: 0.9375rem;
1122}
1123.workout-detail-info li.important {
1124  font-size: 21px;
1125  font-size: 1.3125rem;
1126  color: #151515;
1127}
1128/* Week report */
1129.svg-cotent svg {
1130  width: 100%;
1131  height: 100%;
1132}
1133.svg-cotent .label {
1134  font-size: 13px;
1135  font-size: 0.8125rem;
1136  text-anchor: middle;
1137}
1138.svg-cotent .tick {
1139  font-size: 13px;
1140  font-size: 0.8125rem;
1141}
1142/* dashboard graphics*/
1143.x-axis path,
1144.x-axis line {
1145  fill: none;
1146  stroke: none;
1147}
1148.bar {
1149  fill: #f8b5be;
1150}
1151.bar:hover {
1152  fill: #ee4056;
1153}
1154.current {
1155  fill: #ee4056;
1156}
1157.week-stats {
1158  border: 1px solid #e1e1e1;
1159  background-color: rgba(225, 225, 225, 0.1);
1160  padding: 0.75em;
1161  border-radius: 4px;
1162  margin-bottom: 2em;
1163}
1164.week-stats h3 {
1165  margin: 0;
1166  font-size: 14px;
1167  font-size: 0.875rem;
1168}
1169.week-stats h3 + p {
1170  margin: 0.25em 0 2em 0;
1171  color: #959595;
1172  font-size: 13px;
1173  font-size: 0.8125rem;
1174}
1175.workout-activity-summary {
1176  list-style-type: none;
1177  padding: 0;
1178  margin: 0;
1179  background-color: rgba(21, 21, 21, 0.8);
1180  margin-bottom: 0.75em;
1181}
1182.workout-activity-summary li {
1183  color: #e1e1e1;
1184  border-bottom: 1px solid #959595;
1185  padding: 0.75em 1em;
1186  display: flex;
1187  justify-content: space-between;
1188}
1189.workout-activity-summary li:last-child {
1190  margin-bottom: 0;
1191  border: none;
1192}
1193.workout-activity-summary li span:first-child {
1194  font-weight: bold;
1195}
1196.workout-activity-tree {
1197  list-style-type: none;
1198  padding: 0;
1199  margin: 0;
1200  transition: all 250ms ease-in-out;
1201  font-size: 13px;
1202  font-size: 0.8125rem;
1203}
1204.workout-activity-tree > li {
1205  margin-bottom: 0.5em;
1206  padding-bottom: 0.5em;
1207  border-bottom: 1px solid #e1e1e1;
1208}
1209.workout-activity-tree a {
1210  text-decoration: none;
1211  display: block;
1212  color: #EE4056;
1213}
1214.workout-activity-tree a:hover {
1215  color: #151515;
1216}
1217.workout-activity-tree a.viewing-year {
1218  color: #151515;
1219  font-weight: 700;
1220  margin-bottom: 0.5em;
1221  font-size: 16px;
1222  font-size: 1rem;
1223}
1224.workout-activity-tree a.viewing-month {
1225  background-color: #e1e1e1;
1226  color: #151515;
1227  font-weight: 700;
1228}
1229.workout-activity-tree-year {
1230  list-style-type: none;
1231  padding: 0;
1232  margin: 0;
1233}
1234.workout-activity-tree-year > li {
1235  display: block;
1236  margin-bottom: 0.5em;
1237}
1238.workout-activity-tree-year a {
1239  display: flex;
1240  justify-content: space-between;
1241  padding: 0.5em;
1242  background-color: #fbfbfb;
1243  color: #555555;
1244}
1245.workout-activity-tree-year a:hover {
1246  background-color: #e1e1e1;
1247}
1248.ow-forms {
1249  padding-top: 2em;
1250}
1251.ow-forms h2 {
1252  border-top: 1px solid #e1e1e1;
1253  padding-top: 0.5em;
1254}
1255.back {
1256  color: #EE4056;
1257  text-decoration: none;
1258  font-weight: 700;
1259}
1260.back:before {
1261  content: "⬅";
1262  margin-right: 0.5em;
1263}
1264.back:hover {
1265  color: #151515;
1266}
1267.login-content {
1268  background-image: url("../media/img/back-01.jpg");
1269  background-size: cover;
1270  display: flex;
1271  justify-content: center;
1272  align-items: center;
1273  min-height: calc(100vh - 98px);
1274  padding: 1em 0;
1275}
1276.login-content form {
1277  max-width: 380px;
1278  background-color: rgba(21, 21, 21, 0.6);
1279  border-radius: 6px;
1280  padding: 2em 1.5em;
1281}
1282.login-content form div {
1283  margin-bottom: 1.5em;
1284}
1285.login-content label {
1286  color: #e1e1e1;
1287}
1288.login-content a {
1289  color: #e1e1e1;
1290  font-size: 13px;
1291  text-decoration: none;
1292  margin-right: 0.75em;
1293}
1294.login-content a:hover {
1295  color: white;
1296}
1297.login-content .button {
1298  transition: all 500ms ease-in-out;
1299  background-color: #EE4056;
1300  color: white;
1301  text-transform: uppercase;
1302}
1303.login-content .button:hover {
1304  background-color: #e6152f;
1305}
1306.login-content .message {
1307  padding: 0.5em;
1308  margin: 0;
1309  text-align: center;
1310  font-size: 13px;
1311  font-size: 0.8125rem;
1312}
1313.login-content .message.message-error {
1314  color: white;
1315  background-color: red;
1316}
1317/*
1318.login-remember {
1319    color: @color-main-medium;
1320    .font-size(14);
1321    text-decoration: none;
1322    font-weight: 300;
1323    &:hover{
1324        color: @color-main-light;
1325    }
1326}
1327<a class="login-remember" href="#">Forgot your password?</a>
1328*/
1329.user-profile .workout-options {
1330  font-size: 13px;
1331  font-size: 0.8125rem;
1332  margin-right: 2em;
1333}
1334.user-profile-account {
1335  background-color: #fbfbfb;
1336  border-bottom: 1px solid #e1e1e1;
1337  padding: 2em  1em;
1338}
1339@media (min-width: 480px) {
1340  .user-profile-account {
1341    padding: 2em 6em;
1342  }
1343}
1344.user-profile-account > div {
1345  display: flex;
1346  align-items: center;
1347}
1348.user-profile-account img {
1349  width: 140px;
1350  height: 140px;
1351  object-fit: cover;
1352  border-radius: 50%;
1353  margin-bottom: 0.5em;
1354  margin-right: 1em;
1355}
1356.user-profile-account h2 {
1357  margin: 0 0 0.15em 0;
1358  font-size: 21px;
1359  font-size: 1.3125rem;
1360  font-weight: 400;
1361}
1362.user-profile-account p {
1363  color: #555555;
1364  font-size: 14px;
1365  font-size: 0.875rem;
1366  margin: 0;
1367}
1368.user-profile-account p span {
1369  color: #959595;
1370}
1371.total-workouts {
1372  font-size: 13px;
1373  font-size: 0.8125rem;
1374  font-weight: bold;
1375}
1376.total-workouts span {
1377  color: #959595;
1378  margin-right: 0.5em;
1379}
1380.total-workouts span:first-child {
1381  color: #151515;
1382}
1383.total-workouts span:first-child:after {
1384  content: "|";
1385  color: #e1e1e1;
1386  margin-left: 0.5em;
1387}
1388.profile-data {
1389  list-style-type: none;
1390  padding: 0;
1391  font-size: 14px;
1392  font-size: 0.875rem;
1393  background-color: white;
1394  padding: 0.5em 0.75em;
1395  border-radius: 4px;
1396  border: 1px solid #e1e1e1;
1397}
1398.profile-data li {
1399  display: flex;
1400  justify-content: space-between;
1401  color: #959595;
1402}
1403.profile-data li:not(:last-child) {
1404  margin-bottom: 0.5em;
1405  padding-bottom: 0.5em;
1406  border-bottom: 1px solid #e1e1e1;
1407}
1408.profile-data li span {
1409  font-weight: bold;
1410  color: #151515;
1411}
1412.profile-bio {
1413  margin: 0.5em 0;
1414  font-size: 14px;
1415  font-size: 0.875rem;
1416}
1417.month-stats,
1418.latest-workouts {
1419  max-width: 700px;
1420}
1421.center {
1422  text-align: center;
1423}
1424.month-stats {
1425  margin-bottom: 4em;
1426}
1427.latest-workouts h4 {
1428  margin: 0;
1429}
1430.latest-workouts h4 a {
1431  color: #151515;
1432  text-decoration: none;
1433}
1434.latest-workouts > span {
1435  font-size: 13px;
1436  font-size: 0.8125rem;
1437}
1438.latest-workouts p {
1439  margin-top: 0.25em;
1440  color: #959595;
1441  font-size: 13px;
1442  font-size: 0.8125rem;
1443}
Note: See TracBrowser for help on using the repository browser.