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

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

update profile header ui

  • Property mode set to 100644
File size: 21.4 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.hidden,
349.hide {
350  display: none;
351}
352body {
353  font-family: 'Open Sans', sans-serif;
354}
355html {
356  box-sizing: border-box;
357}
358*,
359*:before,
360*:after {
361  box-sizing: inherit;
362}
363/* Generic default forms */
364form {
365  width: 100%;
366}
367legend {
368  display: none;
369}
370fieldset {
371  border: none;
372  padding: 0;
373}
374fieldset > div {
375  margin-bottom: 1.5em;
376}
377label {
378  display: block;
379  font-size: 13px;
380  margin-bottom: 0.25em;
381}
382input {
383  width: 100%;
384  padding: 0.5em 0.75em;
385  border: 1px solid transparent;
386  border-radius: 2px;
387}
388/* Generic button */
389.button {
390  box-sizing: border-box;
391  display: inline-block;
392  text-align: center;
393  vertical-align: middle;
394  cursor: pointer;
395  border: 1px solid transparent;
396  text-decoration: none;
397  font-style: normal;
398  white-space: nowrap;
399  text-overflow: ellipsis;
400  padding: 0.3em 1em;
401  margin: 0;
402  position: relative;
403  overflow: hidden;
404  background: #e1e1e1;
405  color: #151515;
406  font-size: 1em;
407  line-height: 1.25;
408  max-width: 100%;
409}
410.header-content {
411  padding: 1em 1.5em;
412}
413.header-content a {
414  text-decoration: none;
415}
416.header-content .description {
417  margin: 0;
418}
419/* logo ----------------------------------------------------------------------*/
420.logo {
421  font-size: 24px;
422  font-size: 1.5rem;
423  line-height: 1em;
424  font-weight: 800;
425  text-transform: uppercase;
426  margin: 0;
427  display: inline-block;
428}
429.logo span {
430  transition: all 250ms ease-in-out;
431}
432.logo:hover span {
433  color: #EE4056;
434}
435.logo-open {
436  display: block;
437  color: #EE4056;
438}
439.logo-work,
440.logo-outs {
441  color: #f8b5be;
442}
443/* menu navigation -----------------------------------------------------------*/
444.nav-site {
445  font-size: 13px;
446  font-size: 0.8125rem;
447}
448.nav-site ul {
449  list-style-type: none;
450  padding: 0;
451  margin: 0;
452  display: flex;
453  flex-direction: row;
454  justify-content: space-between;
455}
456.nav-site li {
457  border-left: 1px solid #e1e1e1;
458  flex-grow: 1;
459  text-align: center;
460}
461.nav-site a {
462  color: #959595;
463  padding: 1.25em;
464  display: block;
465}
466.nav-site a:hover {
467  color: #151515;
468}
469.nav-site .is-active a {
470  color: #151515;
471}
472/* Add workout button with submenu -------------------------------------------*/
473.add-workout {
474  position: relative;
475  /* submenu -------------------------------------------------------------- */
476}
477.add-workout > a {
478  color: #EE4056;
479}
480.add-workout > a:before {
481  content: "+";
482  font-weight: 800;
483  font-size: 32px;
484  font-size: 2rem;
485  line-height: 0;
486  position: relative;
487  top: 8px;
488}
489.add-workout > a span {
490  display: none;
491}
492.add-workout > a:hover {
493  background-color: #EE4056;
494  color: white;
495}
496.add-workout:hover:after {
497  content: "";
498  position: absolute;
499  background-color: white;
500  bottom: -1px;
501  width: 100%;
502  height: 1px;
503  display: block;
504  z-index: 20;
505}
506.add-workout:hover ul {
507  display: inline-block;
508}
509.add-workout ul {
510  display: none;
511  flex-direction: column;
512  position: absolute;
513  background-color: rgba(255, 255, 255, 0.95);
514  right: -1px;
515  border: 1px solid #e1e1e1;
516  width: 153px;
517}
518.add-workout ul li {
519  border-left: transparent;
520  text-align: left;
521}
522.add-workout ul a:hover {
523  background-color: #fbfbfb;
524}
525/* description ---------------------------------------------------------------*/
526.description {
527  font-size: 14px;
528  font-size: 0.875rem;
529  font-weight: 300;
530  letter-spacing: 0.025em;
531  color: #959595;
532}
533/* ------------------------------ STATES ------------------------------------ */
534/* when user is login --------------------------------------------------------*/
535.is-login .header-content {
536  border-bottom: 1px solid #e1e1e1;
537  display: flex;
538  padding: 0em 1.5em;
539  justify-content: space-between;
540  align-items: center;
541}
542.is-login .description {
543  display: none;
544}
545.is-login .logo-open {
546  display: inline-block;
547}
548.workout-content {
549  padding: 2em  1em;
550}
551@media (min-width: 480px) {
552  .workout-content {
553    padding: 2em 6em;
554  }
555}
556@media (min-width: 800px) {
557  .workout-content {
558    display: flex;
559    justify-content: space-between;
560  }
561}
562/* list mode */
563.workout-list {
564  margin-right: 2em;
565  width: 100%;
566  /* provisional layout, replace this with grid layout system based on final content */
567}
568.workout-list > h2 {
569  font-weight: 300;
570  margin: 0 0 1.5em;
571}
572/* Module resume on dashboard workouts */
573.workout-resume {
574  padding: 1.5em 0;
575  position: relative;
576  max-width: 700px;
577}
578@media (min-width: 800px) {
579  .workout-resume {
580    padding-left: 2em;
581    border-left: 1px solid #e1e1e1;
582    transition: all 250ms ease-in-out;
583  }
584}
585.workout-resume:hover {
586  border-color: #151515;
587}
588.workout-resume:hover .workout-title:before {
589  color: #151515;
590}
591.workout-resume ul {
592  padding: 0;
593  list-style-type: none;
594  font-size: 13px;
595  font-size: 0.8125rem;
596}
597.workout-resume ul a {
598  display: block;
599  text-decoration: none;
600}
601.bike:before {
602  display: block;
603  content: "";
604  width: 30px;
605  height: 30px;
606  background-image: url('../media/img/bike.svg');
607  background-size: 100%;
608}
609.workout-title {
610  font-size: 14px;
611  font-size: 0.875rem;
612  margin: 0 0 0em 0;
613  position: relative;
614}
615.workout-title:before {
616  transition: all 250ms ease-in-out;
617  content: "▶";
618  position: absolute;
619  left: -3.25em;
620  top: 0.35em;
621  color: #e1e1e1;
622  font-size: 10px;
623  font-size: 0.625rem;
624}
625.workout-title a {
626  color: #151515;
627  text-decoration: none;
628}
629.workout-title a:hover {
630  color: #EE4056;
631}
632.workout-info {
633  display: flex;
634  align-items: center;
635  margin: 0.25em 0;
636}
637.workout-info li {
638  color: #959595;
639}
640.workout-info li:after {
641  content: "|";
642  margin: 0 0.5em;
643}
644.workout-info li:last-child:after {
645  content: "";
646  margin: 0;
647}
648.workout-map {
649  margin-top: 1em;
650}
651.workout-map img {
652  width: 100%;
653}
654.workout-intro {
655  font-size: 13px;
656  font-size: 0.8125rem;
657  color: #151515;
658}
659.workout-options {
660  display: inline-block;
661  border: 1px solid #e1e1e1;
662  margin-bottom: 0;
663  border-radius: 4px;
664  padding: 0;
665  width: auto;
666}
667.workout-options li {
668  display: inline-block;
669  border-right: 1px solid #e1e1e1;
670}
671.workout-options li:last-child {
672  border-right: none;
673}
674.workout-options a {
675  display: block;
676  color: #959595;
677  padding: 0.5em 0.75em;
678  text-decoration: none;
679}
680.workout-options a:hover {
681  color: #151515;
682}
683.workout-options a.is-active {
684  background-color: #959595;
685  color: white;
686}
687.owo-del a:hover {
688  color: red;
689}
690.workout-aside {
691  width: 100%;
692}
693@media (min-width: 800px) {
694  .workout-aside {
695    max-width: 300px;
696    padding-left: 1.5em;
697    border-left: 1px solid #e1e1e1;
698  }
699}
700.aside-profile {
701  margin-bottom: 1em;
702}
703.aside-profile img {
704  width: 80px;
705  height: 80px;
706  object-fit: cover;
707  border-radius: 50%;
708}
709.aside-profile h2 {
710  font-weight: 400;
711  font-size: 18px;
712  font-size: 1.125rem;
713  margin: 0 0 0.5em 0;
714}
715.aside-profile ul {
716  list-style-type: none;
717  margin: 0;
718  padding: 0;
719  font-size: 13px;
720  font-size: 0.8125rem;
721  color: #555555;
722}
723/* Workout detail */
724#map {
725  height: 400px;
726}
727@media (min-width: 480px) {
728  #map {
729    height: calc(100vh - 380px);
730  }
731}
732.workout-detail {
733  padding: 0em  1em;
734}
735@media (min-width: 480px) {
736  .workout-detail {
737    max-width: 1280px;
738    margin: 0 auto;
739  }
740}
741@media (min-width: 800px) {
742  .workout-detail {
743    display: flex;
744    justify-content: space-between;
745  }
746}
747.workout-detail-resume {
748  max-width: 500px;
749  margin-bottom: 2em;
750  padding-top: 2em;
751}
752@media (min-width: 800px) {
753  .workout-detail-resume {
754    margin-right: 6em;
755  }
756}
757.workout-detail-resume h3 {
758  margin-top: 0;
759  margin-bottom: 0.5em;
760}
761.workout-detail-resume h3 + div {
762  font-size: 14px;
763  font-size: 0.875rem;
764  color: #959595;
765  line-height: 1.35em;
766}
767.workout-detail-resume .workout-options {
768  font-size: 13px;
769  font-size: 0.8125rem;
770}
771.workout-detail-info {
772  max-width: 600px;
773}
774@media (min-width: 800px) {
775  .workout-detail-info {
776    border-right: 1px solid #e1e1e1;
777    border-left: 1px solid #e1e1e1;
778    padding: 2em 1em 2em 2em;
779  }
780}
781.workout-detail-info ul {
782  list-style-type: none;
783  padding: 0;
784  margin: 0;
785  display: flex;
786  justify-content: space-between;
787  flex-flow: row wrap;
788}
789.workout-detail-info ul span {
790  display: block;
791  font-size: 13px;
792  font-size: 0.8125rem;
793  color: #959595;
794  margin-bottom: 0.25em;
795}
796.workout-detail-info ul span.min,
797.workout-detail-info ul span.avg,
798.workout-detail-info ul span.max {
799  display: inline-block;
800  color: white;
801  padding: 0.5em 0.85em;
802  border-radius: 3px;
803}
804.workout-detail-info ul span.max {
805  background-color: #EE4056;
806}
807.workout-detail-info ul span.min {
808  background-color: #1395CA;
809  margin-right: 0.5em;
810}
811.workout-detail-info ul span.avg {
812  background-color: #17C898;
813  margin-right: 0.5em;
814}
815.workout-detail-info li {
816  margin-bottom: 2em;
817  margin-right: 1em;
818  color: #959595;
819  font-size: 15px;
820  font-size: 0.9375rem;
821}
822.workout-detail-info li.important {
823  font-size: 21px;
824  font-size: 1.3125rem;
825  color: #151515;
826}
827/* Week report */
828.svg-cotent svg {
829  width: 100%;
830  height: 100%;
831}
832.svg-cotent .label {
833  font-size: 13px;
834  font-size: 0.8125rem;
835  text-anchor: middle;
836}
837.svg-cotent .tick {
838  font-size: 13px;
839  font-size: 0.8125rem;
840}
841/* dashboard graphics*/
842.x-axis path,
843.x-axis line {
844  fill: none;
845  stroke: none;
846}
847.bar {
848  fill: #f8b5be;
849}
850.bar:hover {
851  fill: #ee4056;
852}
853.current {
854  fill: #ee4056;
855}
856.week-stats {
857  border: 1px solid #e1e1e1;
858  background-color: rgba(225, 225, 225, 0.1);
859  padding: 0.75em;
860  border-radius: 4px;
861  margin-bottom: 2em;
862}
863.week-stats h3 {
864  margin: 0;
865  font-size: 14px;
866  font-size: 0.875rem;
867}
868.week-stats h3 + p {
869  margin: 0.25em 0 2em 0;
870  color: #959595;
871  font-size: 13px;
872  font-size: 0.8125rem;
873}
874.workout-activity-summary {
875  list-style-type: none;
876  padding: 0;
877  margin: 0;
878  background-color: rgba(21, 21, 21, 0.8);
879  margin-bottom: 0.75em;
880}
881.workout-activity-summary li {
882  color: #e1e1e1;
883  border-bottom: 1px solid #959595;
884  padding: 0.75em 1em;
885  display: flex;
886  justify-content: space-between;
887}
888.workout-activity-summary li:last-child {
889  margin-bottom: 0;
890  border: none;
891}
892.workout-activity-summary li span:first-child {
893  font-weight: bold;
894}
895.workout-activity-tree {
896  list-style-type: none;
897  padding: 0;
898  margin: 0;
899  transition: all 250ms ease-in-out;
900  font-size: 13px;
901  font-size: 0.8125rem;
902}
903.workout-activity-tree > li {
904  margin-bottom: 0.5em;
905  padding-bottom: 0.5em;
906  border-bottom: 1px solid #e1e1e1;
907}
908.workout-activity-tree a {
909  text-decoration: none;
910  display: block;
911  color: #EE4056;
912}
913.workout-activity-tree a:hover {
914  color: #151515;
915}
916.workout-activity-tree a.viewing-year {
917  color: #151515;
918  font-weight: 700;
919  margin-bottom: 0.5em;
920  font-size: 16px;
921  font-size: 1rem;
922}
923.workout-activity-tree a.viewing-month {
924  background-color: #e1e1e1;
925  color: #151515;
926  font-weight: 700;
927}
928.workout-activity-tree-year {
929  list-style-type: none;
930  padding: 0;
931  margin: 0;
932}
933.workout-activity-tree-year > li {
934  display: block;
935  margin-bottom: 0.5em;
936}
937.workout-activity-tree-year a {
938  display: flex;
939  justify-content: space-between;
940  padding: 0.5em;
941  background-color: #fbfbfb;
942  color: #555555;
943}
944.workout-activity-tree-year a:hover {
945  background-color: #e1e1e1;
946}
947.login-content {
948  background-image: url("../media/img/back-01.jpg");
949  background-size: cover;
950  display: flex;
951  justify-content: center;
952  align-items: center;
953  min-height: calc(100vh - 98px);
954  padding: 1em 0;
955}
956.login-content form {
957  max-width: 380px;
958  background-color: rgba(21, 21, 21, 0.6);
959  border-radius: 6px;
960  padding: 2em 1.5em;
961}
962.login-content form div {
963  margin-bottom: 1.5em;
964}
965.login-content label {
966  color: #e1e1e1;
967}
968.login-content a {
969  color: #e1e1e1;
970  font-size: 13px;
971  text-decoration: none;
972  margin-right: 0.75em;
973}
974.login-content a:hover {
975  color: white;
976}
977.login-content .button {
978  transition: all 500ms ease-in-out;
979  background-color: #EE4056;
980  color: white;
981  text-transform: uppercase;
982}
983.login-content .button:hover {
984  background-color: #e6152f;
985}
986.login-content .message {
987  padding: 0.5em;
988  margin: 0;
989  text-align: center;
990  font-size: 13px;
991  font-size: 0.8125rem;
992}
993.login-content .message.message-error {
994  color: white;
995  background-color: red;
996}
997/*
998.login-remember {
999    color: @color-main-medium;
1000    .font-size(14);
1001    text-decoration: none;
1002    font-weight: 300;
1003    &:hover{
1004        color: @color-main-light;
1005    }
1006}
1007<a class="login-remember" href="#">Forgot your password?</a>
1008*/
1009.user-profile .workout-options {
1010  font-size: 13px;
1011  font-size: 0.8125rem;
1012  margin-right: 2em;
1013}
1014.user-profile-account {
1015  background-color: #fbfbfb;
1016  padding: 2em  1em;
1017}
1018@media (min-width: 480px) {
1019  .user-profile-account {
1020    padding: 2em 6em;
1021  }
1022}
1023.user-profile-account > div {
1024  display: flex;
1025  align-items: center;
1026}
1027.user-profile-account img {
1028  width: 140px;
1029  height: 140px;
1030  object-fit: cover;
1031  border-radius: 50%;
1032  margin-bottom: 0.5em;
1033  margin-right: 1em;
1034}
1035.user-profile-account h2 {
1036  margin: 0 0 0.15em 0;
1037  font-size: 21px;
1038  font-size: 1.3125rem;
1039}
1040.user-profile-account p {
1041  color: #555555;
1042  font-size: 14px;
1043  font-size: 0.875rem;
1044  margin: 0;
1045}
1046.user-profile-account p span {
1047  color: #959595;
1048}
1049.total-workouts {
1050  font-size: 13px;
1051  font-size: 0.8125rem;
1052  font-weight: bold;
1053}
1054.profile-data {
1055  list-style-type: none;
1056  padding: 0;
1057  font-size: 14px;
1058  font-size: 0.875rem;
1059  background-color: white;
1060  padding: 0.5em 0.75em;
1061  border-radius: 4px;
1062  border: 1px solid #e1e1e1;
1063  max-width: 200px;
1064}
1065.profile-data li {
1066  display: flex;
1067  justify-content: space-between;
1068  color: #959595;
1069}
1070.profile-data li:not(:last-child) {
1071  margin-bottom: 0.5em;
1072  padding-bottom: 0.5em;
1073  border-bottom: 1px solid #e1e1e1;
1074}
1075.profile-data li span {
1076  font-weight: bold;
1077  color: #151515;
1078}
1079.profile-bio {
1080  margin: 0.5em 0;
1081  font-size: 14px;
1082  font-size: 0.875rem;
1083}
1084.month-stats,
1085.latest-workouts {
1086  max-width: 700px;
1087}
1088.month-stats {
1089  margin-bottom: 4em;
1090}
1091.latest-workouts h4 {
1092  margin: 0;
1093}
1094.latest-workouts h4 a {
1095  color: #151515;
1096  text-decoration: none;
1097}
1098.latest-workouts > span {
1099  font-size: 13px;
1100  font-size: 0.8125rem;
1101}
1102.latest-workouts p {
1103  margin-top: 0.25em;
1104  color: #959595;
1105  font-size: 13px;
1106  font-size: 0.8125rem;
1107}
Note: See TracBrowser for help on using the repository browser.