source: OpenWorkouts-current/ow/static/css/main.css @ 3ac70ca

current
Last change on this file since 3ac70ca was 3ac70ca, checked in by Borja Lopez <borja@…>, 5 years ago

(#7) Improved tooltip that shows per-day workout stats when hovering a day
on the calendar heatmap chart in the user profile page.

  • Property mode set to 100644
File size: 31.3 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(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 */
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.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/*
645Very simple way to paint dropdown-like arrows, without
646using any external dependencies.
647
648To use it, add something like this to your html, to display a "down" arrow:
649
650  <i class="arrow down"></i>
651*/
652i.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.calendar-heatmap-tooltip {
1578  width: 20%;
1579}
1580.verify-account-content {
1581  background-position: center;
1582  background-size: cover;
1583  display: flex;
1584  justify-content: center;
1585  align-items: center;
1586  /* dynamic min-height based on window height does not work well
1587     with premailer and generating the proper html with styles for mails */
1588  min-height: 400px;
1589  padding: 1em 0;
1590  /* RGB calculated color does not work well with premailer and
1591       generating the proper html with styles for mails */
1592  color: #151515;
1593}
1594.verify-account-content .info {
1595  max-width: 580px;
1596  /* RGB calculated color does not work well with premailer and
1597         generating the proper html with styles for mails */
1598  background-color: #e1e1e1;
1599  border-radius: 6px;
1600  padding: 2em 1.5em;
1601}
1602.verify-account-content .info div {
1603  margin-bottom: 1.5em;
1604}
1605.verify-account-content a {
1606  /* RGB calculated color does not work well with premailer and
1607           generating the proper html with styles for mails */
1608  color: #151515;
1609  font-size: 13px;
1610  text-decoration: none;
1611  margin-right: 0.75em;
1612}
1613.verify-account-content a:hover {
1614  color: #151515;
1615}
1616.verify-account-content .button {
1617  background-color: #EE4056;
1618  background: #EE4056;
1619  color: white;
1620  text-transform: uppercase;
1621}
1622.verify-account-content .button:hover {
1623  background-color: #F60002;
1624}
Note: See TracBrowser for help on using the repository browser.