@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 300;
src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url(https://fonts.gstatic.com/s/opensans/v15/memnYaGs126MiZpBA-UFUKWyV9hrIqY.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v15/mem6YaGs126MiZpBA-UFUK0Zdcg.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(https://fonts.gstatic.com/s/opensans/v15/memnYaGs126MiZpBA-UFUKWiUNhrIqY.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOUuhs.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 800;
src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN8rsOUuhs.ttf) format('truetype');
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/* Leaflet-elevation openworkouts theme */
/* background color */
.openworkouts-theme.leaflet-control.elevation .background {
background-color: transparent;
}
/* Axis x and y*/
.openworkouts-theme.leaflet-control.elevation .axis line,
.openworkouts-theme.leaflet-control.elevation .axis path {
stroke: #959595;
}
/* selected drag area*/
.openworkouts-theme.leaflet-control.elevation .mouse-drag {
fill: rgba(21, 21, 21, 0.1);
}
/* Icon to show when the chart is collapse */
/*
.openworkouts-theme.leaflet-control.elevation .elevation-toggle-icon {
background: url(images/elevation-steelblue.png) no-repeat center center;
}
*/
/* Graph color area background */
.openworkouts-theme.leaflet-control.elevation .area {
fill: #f8b5be;
stroke: transparent;
}
/* vertical line to know where are you */
.openworkouts-theme.leaflet-control.elevation .mouse-focus-line {
stroke: #151515;
}
/* graph color line area */
/*.leaflet-control.elevation .area {
fill: #f8b5be;
}
*/
/* box with parameters */
.mouse-focus-label {
opacity: 0.8;
}
.mouse-focus-label-text {
font-size: 13px;
font-size: 0.8125rem;
font-family: 'Open Sans', sans-serif;
font-weight: 100 !important;
}
/*.mouse-focus-label-y {}*/
/* Color line on map */
.leaflet-interactive {
stroke: #151515;
opacity: 0.6;
stroke-width: 6px;
stroke-linecap: round;
}
/* indicator on map line*/
.openworkouts-theme.height-focus.line {
stroke: #151515;
display: none;
/*fill: #4682b4;*/
}
/* txt on map */
.openworkouts-theme.height-focus-label {
display: none;
}
/* indicator on map circle */
.openworkouts-theme.height-focus.circle-lower {
fill: #151515;
stroke: #EE4056;
stroke-width: 10px;
}
.hidden,
.hide {
display: none;
}
body {
font-family: 'Open Sans', sans-serif;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* ==========================================================================
Wrappers
========================================================================== */
/**
* Common wrappers to use in Scms-site.
* To reducing css size you can use extends instead of mixins
* to move the selector up to the properties you wish to use.
*
* Example LESS:
* .myclass {
* &:extend(.wrapper);
* }
*/
.wrapper,
.wrapper-s,
.wrapper-l,
.wrapper-xl,
.ow-forms {
display: block;
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
margin: 0 auto;
}
@media (min-width: 480px) {
.wrapper,
.wrapper-s,
.wrapper-l,
.wrapper-xl,
.ow-forms {
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (min-width: 800px) {
.wrapper,
.wrapper-s,
.wrapper-l,
.wrapper-xl,
.ow-forms {
padding-left: 4rem;
padding-right: 4rem;
}
}
@media (min-width: 1024px) {
.wrapper,
.wrapper-s,
.wrapper-l,
.wrapper-xl,
.ow-forms {
padding-left: 5rem;
padding-right: 5rem;
}
}
@media (min-width: 1440px) {
.wrapper,
.wrapper-s,
.wrapper-l,
.wrapper-xl,
.ow-forms {
padding-left: 6rem;
padding-right: 6rem;
}
}
@media (min-width: 320px) {
.wrapper-s,
.ow-forms {
max-width: 740px;
}
}
@media (min-width: 320px) {
.wrapper-l {
max-width: 1280px;
}
}
@media (min-width: 320px) {
.wrapper-xl {
max-width: 1440px;
}
}
/* Layout */
.ly-flex {
display: flex;
justify-content: space-between;
}
.ly-flex.ly-center {
align-items: center;
}
.ly-flex.ly-start {
justify-content: flex-start;
}
.ly-flex.ly-2 {
flex-flow: row wrap;
}
.ly-flex.ly-2 > div,
.ly-flex.ly-2 > li,
.ly-flex.ly-2 > p,
.ly-flex.ly-2 > a {
width: 50%;
}
.ly-flex.ly-2.has-gap > div,
.ly-flex.ly-2.has-gap > li,
.ly-flex.ly-2.has-gap > p,
.ly-flex.ly-2.has-gap > a {
width: 48%;
}
.ly-flex.ly-3 {
flex-flow: row wrap;
}
.ly-flex.ly-3 > div,
.ly-flex.ly-3 > li,
.ly-flex.ly-3 > p {
width: 33%;
}
.ly-flex.ly-3.has-gap > div,
.ly-flex.ly-3.has-gap > li,
.ly-flex.ly-3.has-gap > p {
width: 31%;
}
.ly-flex.ly-4 {
flex-flow: row wrap;
}
.ly-flex.ly-4 > div,
.ly-flex.ly-4 > li,
.ly-flex.ly-4 > p {
width: 25%;
}
.ly-flex.ly-4.has-gap > div,
.ly-flex.ly-4.has-gap > li,
.ly-flex.ly-4.has-gap > p {
width: 23%;
}
.ly-flex-end {
align-items: flex-end;
}
/* Generic default forms */
form {
width: 100%;
}
legend {
display: none;
}
fieldset {
border: none;
padding: 0;
}
fieldset > div,
fieldset > p {
margin-bottom: 1.5em;
}
label {
display: block;
font-size: 13px;
margin-bottom: 0.25em;
}
input {
width: 100%;
padding: 0.5em 0.75em;
border: 1px solid transparent;
border-radius: 2px;
}
.ow-forms label {
display: block;
margin-bottom: 0.35em;
color: #959595;
}
.ow-forms textarea {
resize: vertical;
height: 200px;
}
.ow-forms textarea,
.ow-forms input {
width: 100%;
padding: 0.65em;
border-radius: 4px;
border: 1px solid #e1e1e1;
}
.ow-forms select {
width: 100%;
}
/* Generic button */
.button {
box-sizing: border-box;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
text-decoration: none;
font-style: normal;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0.3em 1em;
margin: 0;
position: relative;
overflow: hidden;
background: #e1e1e1;
color: #151515;
font-size: 1em;
line-height: 1.25;
max-width: 100%;
width: auto;
}
.button-normal {
width: auto;
}
.button-normal:hover {
background-color: #959595;
color: white;
}
.button-important {
background-color: #EE4056;
}
/*
Very simple way to paint dropdown-like arrows, without
using any external dependencies.
To use it, add something like this to your html, to display a "down" arrow:
*/
i.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin: 3px;
margin-left: 6px;
margin-right: 0px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.header-content {
padding: 1em 1.5em;
}
.header-content a {
text-decoration: none;
}
.header-content .description {
margin: 0;
}
/* logo ----------------------------------------------------------------------*/
.logo {
font-size: 24px;
font-size: 1.5rem;
line-height: 1em;
font-weight: 800;
text-transform: uppercase;
margin: 0;
display: inline-block;
}
.logo span {
transition: all 250ms ease-in-out;
}
.logo:hover span {
color: #EE4056;
}
@media (max-width: 800px) {
.logo a {
content: "";
display: inline-block;
width: 34px;
height: 34px;
background-image: url('/static/media/img/logo-openworkouts.png');
background-size: 100%;
background-repeat: no-repeat;
}
.logo a span {
display: none !important;
}
}
.logo-open {
display: block;
color: #EE4056;
}
.logo-work,
.logo-outs {
color: #f8b5be;
}
/* menu navigation -----------------------------------------------------------*/
.nav-site {
font-size: 13px;
font-size: 0.8125rem;
}
.nav-site ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.nav-site li {
border-left: 1px solid #e1e1e1;
flex-grow: 1;
text-align: center;
/* this is for the dashboard li element */
}
.nav-site li:first-child {
display: none;
}
@media (min-width: 800px) {
.nav-site li:first-child {
display: inline-block;
}
}
.nav-site a {
color: #959595;
padding: 1.25em;
display: block;
}
.nav-site a:hover {
color: #151515;
}
.nav-site .is-active a {
color: #151515;
}
.icon-dashboard::before,
.icon-profile::before,
.icon-logout::before {
content: "";
display: inline-block;
}
.icon-dashboard span,
.icon-profile span,
.icon-logout span {
display: none;
}
@media (min-width: 800px) {
.icon-dashboard::before,
.icon-profile::before,
.icon-logout::before {
display: none;
}
.icon-dashboard span,
.icon-profile span,
.icon-logout span {
display: inline-block;
}
}
.icon-dashboard:hover,
.icon-profile:hover,
.icon-logout:hover {
opacity: 0.5;
}
.icon-dashboard::before {
content: "☰";
font-size: 30px;
font-size: 1.875rem;
line-height: 0em;
position: relative;
top: 3px;
margin: 0;
}
.icon-profile {
padding: 1em 1.25em !important;
}
.icon-profile::before {
position: relative;
top: 3px;
width: 20px;
height: 20px;
background-image: url('/static/media/img/icon-user.svg');
background-size: 100%;
margin: 0;
}
.icon-logout {
padding: 1em 1.25em !important;
}
.icon-logout::before {
position: relative;
top: 3px;
width: 20px;
height: 20px;
background-image: url('/static/media/img/icon-logout.svg');
background-size: 100%;
margin: 0;
}
/* Add workout button with submenu -------------------------------------------*/
.add-workout {
position: relative;
/* submenu -------------------------------------------------------------- */
}
.add-workout > a {
color: #EE4056;
}
.add-workout > a:before {
content: "+";
font-weight: 800;
font-size: 32px;
font-size: 2rem;
line-height: 0;
position: relative;
top: 8px;
}
.add-workout > a span {
display: none;
}
.add-workout > a:hover {
background-color: #EE4056;
color: white;
}
.add-workout:hover:after {
content: "";
position: absolute;
background-color: white;
bottom: -1px;
width: 100%;
height: 1px;
display: block;
z-index: 20;
}
.add-workout:hover ul {
display: inline-block;
}
.add-workout ul {
display: none;
flex-direction: column;
position: absolute;
background-color: rgba(255, 255, 255, 0.95);
right: -1px;
border: 1px solid #e1e1e1;
width: 153px;
}
.add-workout ul li {
border-left: transparent;
text-align: left;
}
.add-workout ul a:hover {
background-color: #fbfbfb;
}
/* description ---------------------------------------------------------------*/
.description {
font-size: 14px;
font-size: 0.875rem;
font-weight: 300;
letter-spacing: 0.025em;
color: #959595;
}
/* ------------------------------ STATES ------------------------------------ */
/* when user is login --------------------------------------------------------*/
.is-login .header-content {
border-bottom: 1px solid #e1e1e1;
display: flex;
padding: 0em 1.5em;
justify-content: space-between;
align-items: center;
}
.is-login .description {
display: none;
}
.is-login .logo-open {
display: inline-block;
}
.workout-content {
padding: 2em 1em;
display: flex;
flex-direction: column;
}
@media (min-width: 480px) {
.workout-content {
padding: 2em 6em;
}
}
@media (min-width: 800px) {
.workout-content {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
/* list mode */
.workout-list {
margin-right: 2em;
width: 100%;
order: 2;
/* provisional layout, replace this with grid layout system based on final content */
}
.workout-list > h2 {
font-weight: 300;
margin: 0 0 1.5em;
}
@media (min-width: 800px) {
.workout-list {
order: 1;
}
}
/* Module resume on dashboard workouts */
.workout-resume {
padding: 1.5em 0;
position: relative;
max-width: 700px;
}
@media (min-width: 800px) {
.workout-resume {
padding-left: 2em;
border-left: 1px solid #e1e1e1;
transition: all 250ms ease-in-out;
}
}
.workout-resume:hover {
border-color: #151515;
}
.workout-resume:hover .workout-title:before {
color: #151515;
}
.workout-resume ul {
padding: 0;
list-style-type: none;
font-size: 13px;
font-size: 0.8125rem;
}
.workout-resume ul a {
display: block;
text-decoration: none;
}
.bike:before {
display: block;
content: "";
width: 30px;
height: 30px;
background-image: url('../media/img/bike.svg');
background-size: 100%;
}
.workout-title {
font-size: 14px;
font-size: 0.875rem;
margin: 0 0 0em 0;
position: relative;
}
.workout-title:before {
transition: all 250ms ease-in-out;
content: "▶";
position: absolute;
left: -3.25em;
top: 0.35em;
color: #e1e1e1;
font-size: 10px;
font-size: 0.625rem;
}
.workout-title a {
color: #151515;
text-decoration: none;
}
.workout-title a:hover {
color: #EE4056;
}
.workout-info {
display: flex;
flex-flow: row wrap;
margin: 0.25em 0;
}
.workout-info li {
color: #959595;
margin-bottom: 0.25em;
}
.workout-info li:after {
content: "|";
margin: 0 0.5em;
}
.workout-info li:last-child:after {
content: "";
margin: 0;
}
.workout-map {
margin-top: 1em;
}
.workout-map img {
width: 100%;
}
.workout-intro {
font-size: 13px;
font-size: 0.8125rem;
color: #151515;
}
.workout-options {
display: inline-block;
border: 1px solid #e1e1e1;
margin-bottom: 0;
border-radius: 4px;
padding: 0;
width: auto;
background-color: white;
}
.workout-options li {
display: inline-block;
border-right: 1px solid #e1e1e1;
}
.workout-options li:last-child {
border-right: none;
}
.workout-options a {
display: block;
color: #959595;
padding: 0.5em 0.75em;
text-decoration: none;
}
.workout-options a:hover {
color: #151515;
}
.workout-options a.is-active {
background-color: #959595;
color: white;
}
.owo-del a:hover {
color: red;
}
.workout-aside {
width: 100%;
order: 1;
}
@media (min-width: 800px) {
.workout-aside {
order: 2;
max-width: 300px;
padding-left: 1.5em;
border-left: 1px solid #e1e1e1;
}
}
.aside-profile {
margin-bottom: 1em;
}
.aside-profile img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
}
.aside-profile h2 {
font-weight: 400;
font-size: 18px;
font-size: 1.125rem;
margin: 0 0 0.5em 0;
}
.aside-profile ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 13px;
font-size: 0.8125rem;
color: #555555;
}
.aside-profile a {
text-decoration: none;
color: #151515;
}
.aside-profile a:hover {
color: #959595;
}
/* Workout detail */
#map {
width: 100%;
height: 400px;
}
@media (min-width: 480px) {
#map {
height: calc(100vh - 465px);
}
}
.workout-detail {
padding: 0em 1em;
}
@media (min-width: 480px) {
.workout-detail {
max-width: 1280px;
margin: 0 auto;
}
}
@media (min-width: 800px) {
.workout-detail {
display: flex;
justify-content: space-between;
}
}
.workout-detail-resume {
max-width: 500px;
margin-bottom: 2em;
padding-top: 2em;
}
@media (min-width: 800px) {
.workout-detail-resume {
margin-right: 6em;
}
}
.workout-detail-resume h3 {
margin-top: 0;
margin-bottom: 0.5em;
}
.workout-detail-resume h3 + div {
font-size: 14px;
font-size: 0.875rem;
color: #959595;
line-height: 1.35em;
}
.workout-detail-resume .workout-options {
font-size: 13px;
font-size: 0.8125rem;
}
.workout-detail-info {
max-width: 600px;
}
@media (min-width: 800px) {
.workout-detail-info {
border-right: 1px solid #e1e1e1;
border-left: 1px solid #e1e1e1;
padding: 2em 1em 2em 2em;
}
}
.workout-detail-info ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.workout-detail-info ul span {
display: block;
font-size: 13px;
font-size: 0.8125rem;
color: #959595;
margin-bottom: 0.25em;
/* color for future features */
}
.workout-detail-info ul span.min,
.workout-detail-info ul span.avg,
.workout-detail-info ul span.max {
display: inline-block;
color: white;
padding: 0.5em 0.85em;
border-radius: 3px;
background-color: #e1e1e1;
color: #959595;
}
.workout-detail-info li {
margin-bottom: 1em;
margin-right: 1em;
color: #959595;
font-size: 15px;
font-size: 0.9375rem;
}
.workout-detail-info li.important {
font-size: 21px;
font-size: 1.3125rem;
color: #151515;
}
/* Week report */
.svg-content svg {
width: 100%;
height: 100%;
}
.svg-content .label {
font-size: 13px;
font-size: 0.8125rem;
text-anchor: middle;
}
.svg-content .tick {
font-size: 13px;
font-size: 0.8125rem;
}
/* dashboard graphics*/
.x-axis path,
.x-axis line {
fill: none;
stroke: none;
}
.bar {
fill: #f8b5be;
}
.bar:hover {
fill: #ee4056;
}
.current {
fill: #ee4056;
}
.week-stats {
border: 1px solid #e1e1e1;
background-color: rgba(225, 225, 225, 0.1);
padding: 0.75em;
border-radius: 4px;
margin-bottom: 2em;
}
.week-stats h3 {
margin: 0;
font-size: 14px;
font-size: 0.875rem;
}
.week-stats h3 + p {
margin: 0.25em 0 2em 0;
color: #959595;
font-size: 13px;
font-size: 0.8125rem;
}
.workout-activity-summary {
list-style-type: none;
padding: 0;
margin: 0;
background-color: rgba(21, 21, 21, 0.8);
margin-bottom: 0.75em;
}
.workout-activity-summary li {
color: #e1e1e1;
border-bottom: 1px solid #959595;
padding: 0.75em 1em;
display: flex;
justify-content: space-between;
}
.workout-activity-summary li:last-child {
margin-bottom: 0;
border: none;
}
.workout-activity-summary li span:first-child {
font-weight: bold;
}
.workout-activity-tree {
list-style-type: none;
padding: 0;
margin: 0;
transition: all 250ms ease-in-out;
font-size: 13px;
font-size: 0.8125rem;
}
.workout-activity-tree > li {
margin-bottom: 0.5em;
padding-bottom: 0.5em;
border-bottom: 1px solid #e1e1e1;
}
.workout-activity-tree a {
text-decoration: none;
display: block;
color: #EE4056;
}
.workout-activity-tree a:hover {
color: #151515;
}
.workout-activity-tree a.viewing-year {
color: #151515;
font-weight: 700;
margin-bottom: 0.5em;
font-size: 16px;
font-size: 1rem;
}
.workout-activity-tree a.viewing-month {
background-color: #e1e1e1;
color: #151515;
font-weight: 700;
}
.workout-activity-tree-year {
list-style-type: none;
padding: 0;
margin: 0;
}
.workout-activity-tree-year > li {
display: block;
margin-bottom: 0.5em;
}
.workout-activity-tree-year a {
display: flex;
justify-content: space-between;
padding: 0.5em;
background-color: #fbfbfb;
color: #555555;
}
.workout-activity-tree-year a:hover {
background-color: #e1e1e1;
}
.ow-forms {
padding-top: 2em;
}
.ow-forms h2 {
border-top: 1px solid #e1e1e1;
padding-top: 0.5em;
}
.back {
color: #EE4056;
text-decoration: none;
font-weight: 700;
}
.back:before {
content: "⬅";
margin-right: 0.5em;
}
.back:hover {
color: #151515;
}
.login-content {
background-image: url("../media/img/back-01.jpg");
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
min-height: calc(100vh - 98px);
padding: 1em 0;
}
.login-content form {
max-width: 380px;
background-color: rgba(21, 21, 21, 0.6);
border-radius: 6px;
padding: 2em 1.5em;
}
.login-content form div {
margin-bottom: 1.5em;
}
.login-content label {
color: #e1e1e1;
}
.login-content a {
color: #e1e1e1;
font-size: 13px;
text-decoration: none;
margin-right: 0.75em;
}
.login-content a:hover {
color: white;
}
.login-content .button {
transition: all 500ms ease-in-out;
background-color: #EE4056;
color: white;
text-transform: uppercase;
}
.login-content .button:hover {
background-color: #e6152f;
}
.login-content .message {
padding: 0.5em;
margin: 0;
text-align: center;
font-size: 13px;
font-size: 0.8125rem;
}
.login-content .message.message-error {
color: white;
background-color: red;
}
/*
.login-remember {
color: @color-main-medium;
.font-size(14);
text-decoration: none;
font-weight: 300;
&:hover{
color: @color-main-light;
}
}
Forgot your password?
*/
.user-profile .workout-options {
font-size: 13px;
font-size: 0.8125rem;
margin-right: 2em;
}
.user-profile-account {
background-color: #fbfbfb;
border-bottom: 1px solid #e1e1e1;
padding: 2em 1em;
}
@media (min-width: 480px) {
.user-profile-account {
padding: 2em 6em;
}
}
@media (min-width: 800px) {
.user-profile-account > div {
display: flex;
align-items: center;
}
}
.user-profile-account img {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 0.5em;
margin-right: 1em;
}
@media (min-width: 800px) {
.user-profile-account img {
width: 140px;
height: 140px;
}
}
.user-profile-account h2 {
margin: 0 0 0.15em 0;
font-size: 21px;
font-size: 1.3125rem;
font-weight: 400;
}
.user-profile-account p {
color: #555555;
font-size: 14px;
font-size: 0.875rem;
margin: 0;
}
.user-profile-account p a {
color: #EE4056;
text-decoration: none;
}
.user-profile-account p a:hover {
color: #151515;
}
.user-profile-account p span {
color: #959595;
}
.total-workouts {
font-size: 13px;
font-size: 0.8125rem;
font-weight: bold;
}
.total-workouts span {
color: #959595;
margin-right: 0.5em;
}
.total-workouts span:first-child {
color: #151515;
}
.total-workouts span:first-child:after {
content: "|";
color: #e1e1e1;
margin-left: 0.5em;
}
.profile-data {
list-style-type: none;
padding: 0;
font-size: 14px;
font-size: 0.875rem;
background-color: white;
padding: 0.5em 0.75em;
border-radius: 4px;
border: 1px solid #e1e1e1;
}
.profile-data li {
display: flex;
justify-content: space-between;
color: #959595;
}
.profile-data li:not(:last-child) {
margin-bottom: 0.5em;
padding-bottom: 0.5em;
border-bottom: 1px solid #e1e1e1;
}
.profile-data li span {
font-weight: bold;
color: #151515;
}
.profile-data li a {
color: #EE4056;
text-decoration: none;
}
.profile-data li a:hover {
color: #151515;
}
.profile-data li a:active,
.profile-data li a:focus {
outline: 0;
border: none;
-moz-outline-style: none;
}
.profile-bio {
margin: 0.5em 0;
font-size: 14px;
font-size: 0.875rem;
}
.month-stats,
.latest-workouts {
max-width: 700px;
}
.center {
text-align: center;
}
.month-stats {
margin-bottom: 4em;
}
.latest-workouts h4 {
margin: 0;
}
.latest-workouts h4 a {
color: #151515;
text-decoration: none;
}
.latest-workouts > span {
font-size: 13px;
font-size: 0.8125rem;
}
.latest-workouts p {
margin-top: 0.25em;
color: #959595;
font-size: 13px;
font-size: 0.8125rem;
}
.profile-dropdown-sports,
.profile-dropdown-years {
color: #151515;
text-decoration: none;
}
.profile-dropdown-sports:hover,
.profile-dropdown-years:hover {
color: #151515;
}
.profile-dropdown-sports:active,
.profile-dropdown-years:active,
.profile-dropdown-sports:focus,
.profile-dropdown-years:focus {
outline: 0;
border: none;
-moz-outline-style: none;
}
/* Calendar heatmap */
.calendar-heatmap {
margin: 20px;
}
.calendar-heatmap .month {
margin-right: 8px;
}
.calendar-heatmap .month-name {
font-size: 85%;
fill: #777;
}
.calendar-heatmap .day-name {
font-size: 85%;
fill: #777;
}
.calendar-heatmap .day:hover {
stroke: #e1e1e1;
stroke-width: 2;
}
.calendar-heatmap .day:focus {
stroke: #e1e1e1;
stroke-width: 2;
}
.calendar-heatmap-tooltip {
width: 20%;
}
.verify-account-content {
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
/* dynamic min-height based on window height does not work well
with premailer and generating the proper html with styles for mails */
min-height: 400px;
padding: 1em 0;
/* RGB calculated color does not work well with premailer and
generating the proper html with styles for mails */
color: #151515;
}
.verify-account-content .info {
max-width: 580px;
/* RGB calculated color does not work well with premailer and
generating the proper html with styles for mails */
background-color: #e1e1e1;
border-radius: 6px;
padding: 2em 1.5em;
}
.verify-account-content .info div {
margin-bottom: 1.5em;
}
.verify-account-content a {
/* RGB calculated color does not work well with premailer and
generating the proper html with styles for mails */
color: #151515;
font-size: 13px;
text-decoration: none;
margin-right: 0.75em;
}
.verify-account-content a:hover {
color: #151515;
}
.verify-account-content .button {
background-color: #EE4056;
background: #EE4056;
color: white;
text-transform: uppercase;
}
.verify-account-content .button:hover {
background-color: #F60002;
}