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

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

update workout detail layout and ui

  • Property mode set to 100644
File size: 20.9 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}
666.workout-options li {
667  display: inline-block;
668  border-right: 1px solid #e1e1e1;
669}
670.workout-options li:last-child {
671  border-right: none;
672}
673.workout-options a {
674  display: block;
675  color: #959595;
676  padding: 0.5em 0.75em;
677  text-decoration: none;
678}
679.workout-options a:hover {
680  color: #151515;
681}
682.workout-options a.is-active {
683  background-color: #959595;
684  color: white;
685}
686.owo-del a:hover {
687  color: red;
688}
689.workout-aside {
690  width: 100%;
691}
692@media (min-width: 800px) {
693  .workout-aside {
694    max-width: 300px;
695    padding-left: 1.5em;
696    border-left: 1px solid #e1e1e1;
697  }
698}
699.aside-profile {
700  margin-bottom: 1em;
701}
702.aside-profile img {
703  width: 80px;
704  height: 80px;
705  object-fit: cover;
706  border-radius: 50%;
707}
708.aside-profile h2 {
709  font-weight: 400;
710  font-size: 18px;
711  font-size: 1.125rem;
712  margin: 0 0 0.5em 0;
713}
714.aside-profile ul {
715  list-style-type: none;
716  margin: 0;
717  padding: 0;
718  font-size: 13px;
719  font-size: 0.8125rem;
720  color: #555555;
721}
722/* Workout detail */
723#map {
724  height: 400px;
725}
726@media (min-width: 480px) {
727  #map {
728    height: calc(100vh - 380px);
729  }
730}
731.workout-detail {
732  padding: 0em  1em;
733}
734@media (min-width: 480px) {
735  .workout-detail {
736    max-width: 1280px;
737    margin: 0 auto;
738  }
739}
740@media (min-width: 800px) {
741  .workout-detail {
742    display: flex;
743    justify-content: space-between;
744  }
745}
746.workout-detail-resume {
747  max-width: 500px;
748  margin-bottom: 2em;
749  padding-top: 2em;
750}
751@media (min-width: 800px) {
752  .workout-detail-resume {
753    margin-right: 6em;
754  }
755}
756.workout-detail-resume h3 {
757  margin-top: 0;
758  margin-bottom: 0.5em;
759}
760.workout-detail-resume h3 + div {
761  font-size: 14px;
762  font-size: 0.875rem;
763  color: #959595;
764  line-height: 1.35em;
765}
766.workout-detail-resume .workout-options {
767  font-size: 13px;
768  font-size: 0.8125rem;
769}
770.workout-detail-info {
771  max-width: 600px;
772}
773@media (min-width: 800px) {
774  .workout-detail-info {
775    border-right: 1px solid #e1e1e1;
776    border-left: 1px solid #e1e1e1;
777    padding: 2em 1em 2em 2em;
778  }
779}
780.workout-detail-info ul {
781  list-style-type: none;
782  padding: 0;
783  margin: 0;
784  display: flex;
785  justify-content: space-between;
786  flex-flow: row wrap;
787}
788.workout-detail-info ul span {
789  display: block;
790  font-size: 13px;
791  font-size: 0.8125rem;
792  color: #959595;
793  margin-bottom: 0.25em;
794}
795.workout-detail-info ul span.min,
796.workout-detail-info ul span.avg,
797.workout-detail-info ul span.max {
798  display: inline-block;
799  color: white;
800  padding: 0.5em 0.85em;
801  border-radius: 3px;
802}
803.workout-detail-info ul span.max {
804  background-color: #EE4056;
805}
806.workout-detail-info ul span.min {
807  background-color: #1395CA;
808  margin-right: 0.5em;
809}
810.workout-detail-info ul span.avg {
811  background-color: #17C898;
812  margin-right: 0.5em;
813}
814.workout-detail-info li {
815  margin-bottom: 2em;
816  margin-right: 1em;
817  color: #959595;
818  font-size: 15px;
819  font-size: 0.9375rem;
820}
821.workout-detail-info li.important {
822  font-size: 21px;
823  font-size: 1.3125rem;
824  color: #151515;
825}
826/* Week report */
827.svg-cotent svg {
828  width: 100%;
829  height: 100%;
830}
831.svg-cotent .label {
832  font-size: 13px;
833  font-size: 0.8125rem;
834  text-anchor: middle;
835}
836.svg-cotent .tick {
837  font-size: 13px;
838  font-size: 0.8125rem;
839}
840/* dashboard graphics*/
841.x-axis path,
842.x-axis line {
843  fill: none;
844  stroke: none;
845}
846.bar {
847  fill: #f8b5be;
848}
849.bar:hover {
850  fill: #ee4056;
851}
852.current {
853  fill: #ee4056;
854}
855.week-stats {
856  border: 1px solid #e1e1e1;
857  background-color: rgba(225, 225, 225, 0.1);
858  padding: 0.75em;
859  border-radius: 4px;
860  margin-bottom: 2em;
861}
862.week-stats h3 {
863  margin: 0;
864  font-size: 14px;
865  font-size: 0.875rem;
866}
867.week-stats h3 + p {
868  margin: 0.25em 0 2em 0;
869  color: #959595;
870  font-size: 13px;
871  font-size: 0.8125rem;
872}
873.workout-activity-summary {
874  list-style-type: none;
875  padding: 0;
876  margin: 0;
877  background-color: rgba(21, 21, 21, 0.8);
878  margin-bottom: 0.75em;
879}
880.workout-activity-summary li {
881  color: #e1e1e1;
882  border-bottom: 1px solid #959595;
883  padding: 0.75em 1em;
884  display: flex;
885  justify-content: space-between;
886}
887.workout-activity-summary li:last-child {
888  margin-bottom: 0;
889  border: none;
890}
891.workout-activity-summary li span:first-child {
892  font-weight: bold;
893}
894.workout-activity-tree {
895  list-style-type: none;
896  padding: 0;
897  margin: 0;
898  transition: all 250ms ease-in-out;
899  font-size: 13px;
900  font-size: 0.8125rem;
901}
902.workout-activity-tree > li {
903  margin-bottom: 0.5em;
904  padding-bottom: 0.5em;
905  border-bottom: 1px solid #e1e1e1;
906}
907.workout-activity-tree a {
908  text-decoration: none;
909  display: block;
910  color: #EE4056;
911}
912.workout-activity-tree a:hover {
913  color: #151515;
914}
915.workout-activity-tree a.viewing-year {
916  color: #151515;
917  font-weight: 700;
918  margin-bottom: 0.5em;
919  font-size: 16px;
920  font-size: 1rem;
921}
922.workout-activity-tree a.viewing-month {
923  background-color: #e1e1e1;
924  color: #151515;
925  font-weight: 700;
926}
927.workout-activity-tree-year {
928  list-style-type: none;
929  padding: 0;
930  margin: 0;
931}
932.workout-activity-tree-year > li {
933  display: block;
934  margin-bottom: 0.5em;
935}
936.workout-activity-tree-year a {
937  display: flex;
938  justify-content: space-between;
939  padding: 0.5em;
940  background-color: #fbfbfb;
941  color: #555555;
942}
943.workout-activity-tree-year a:hover {
944  background-color: #e1e1e1;
945}
946.login-content {
947  background-image: url("../media/img/back-01.jpg");
948  background-size: cover;
949  display: flex;
950  justify-content: center;
951  align-items: center;
952  min-height: calc(100vh - 98px);
953  padding: 1em 0;
954}
955.login-content form {
956  max-width: 380px;
957  background-color: rgba(21, 21, 21, 0.6);
958  border-radius: 6px;
959  padding: 2em 1.5em;
960}
961.login-content form div {
962  margin-bottom: 1.5em;
963}
964.login-content label {
965  color: #e1e1e1;
966}
967.login-content a {
968  color: #e1e1e1;
969  font-size: 13px;
970  text-decoration: none;
971  margin-right: 0.75em;
972}
973.login-content a:hover {
974  color: white;
975}
976.login-content .button {
977  transition: all 500ms ease-in-out;
978  background-color: #EE4056;
979  color: white;
980  text-transform: uppercase;
981}
982.login-content .button:hover {
983  background-color: #e6152f;
984}
985.login-content .message {
986  padding: 0.5em;
987  margin: 0;
988  text-align: center;
989  font-size: 13px;
990  font-size: 0.8125rem;
991}
992.login-content .message.message-error {
993  color: white;
994  background-color: red;
995}
996/*
997.login-remember {
998    color: @color-main-medium;
999    .font-size(14);
1000    text-decoration: none;
1001    font-weight: 300;
1002    &:hover{
1003        color: @color-main-light;
1004    }
1005}
1006<a class="login-remember" href="#">Forgot your password?</a>
1007*/
1008.user-profile img {
1009  width: 140px;
1010  height: 140px;
1011  object-fit: cover;
1012  border-radius: 50%;
1013  margin-bottom: 0.5em;
1014}
1015.user-profile .workout-options {
1016  font-size: 13px;
1017  font-size: 0.8125rem;
1018}
1019.user-profile-account {
1020  background-color: #fbfbfb;
1021  padding: 2em  1em;
1022}
1023@media (min-width: 480px) {
1024  .user-profile-account {
1025    padding: 2em 6em;
1026  }
1027}
1028.user-profile-account h2 {
1029  margin: 0 0 0.15em 0;
1030  font-size: 21px;
1031  font-size: 1.3125rem;
1032}
1033.user-profile-account p {
1034  color: #555555;
1035  font-size: 14px;
1036  font-size: 0.875rem;
1037  margin: 0;
1038}
1039.user-profile-account p span {
1040  color: #959595;
1041}
1042.user-profile-account .workouts {
1043  font-size: 18px;
1044  font-size: 1.125rem;
1045  font-weight: bold;
1046}
1047.profile-data {
1048  list-style-type: none;
1049  padding: 0;
1050  font-size: 14px;
1051  font-size: 0.875rem;
1052}
1053.profile-data li {
1054  margin-bottom: 0.25em;
1055}
1056.profile-bio {
1057  margin: 1em 0;
1058}
1059.month-stats,
1060.latest-workouts {
1061  max-width: 40vw;
1062  margin: 0 auto;
1063}
1064.latest-workouts h4 {
1065  margin: 0;
1066}
1067.latest-workouts h4 a {
1068  color: #151515;
1069  text-decoration: none;
1070}
1071.latest-workouts > span {
1072  font-size: 13px;
1073  font-size: 0.8125rem;
1074}
1075.latest-workouts p {
1076  margin-top: 0.25em;
1077  color: #959595;
1078  font-size: 13px;
1079  font-size: 0.8125rem;
1080}
Note: See TracBrowser for help on using the repository browser.