.tabata-timer {
font-family: "proxima-nova", sans-serif;
font-weight: normal;
margin: 0 auto;
padding: 16px;
width: calc(100% - 32px);
max-width: 863px;
width: 100%;
height: auto;
background: #f7f7f7;
}
.tabata-timer__displays {
width: 100%;
height: auto;
background: #fff;
display: grid;
grid-auto-columns: 1fr;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr auto;
gap: 16px 16px;
margin: 0 auto;
padding: 0;
}
.tabata-timer__display--paused {
animation: fadeInOut 1s infinite;
}
@keyframes fadeInOut {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
.tabata-timer__display--current-time {
text-align: center;
justify-self: stretch;
align-self: stretch;
grid-area: 1 / 1 / 2 / 3;
display: flex;
flex-direction: column;
align-items: center;
}
.tabata-timer__display--current-time time {
font-family: "redwing-bold", serif;
font-weight: 700;
font-size: 109px;
letter-spacing: 0.03em;
text-align: center;
color: #26282d;
margin: 0;
margin-top: 2px;
}
.tabata-timer__display--current-round {
justify-self: start;
align-self: stretch;
grid-area: 2 / 1 / 3 / 2;
}
.tabata-timer__display--current-round label {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
font-family: "proxima-nova", sans-serif;
font-weight: normal;
font-size: 18px;
text-align: left;
color: #26282d;
margin: 0 16px 12px 12px;
}
.tabata-timer__display--current-round label span {
font-family: redwing-bold;
font-weight: bold;
font-size: 39px;
line-height: 79px;
text-align: left;
color: #26282d;
}
.tabata-timer__display--total {
justify-self: end;
align-self: stretch;
grid-area: 2 / 2 / 3 / 3;
}
.tabata-timer__display--total label {
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
font-family: "proxima-nova", sans-serif;
font-weight: normal;
font-size: 18px;
text-align: right;
color: #26282d;
margin: 0 16px 12px 12px;
}
.tabata-timer__display--total label time {
font-family: redwing-bold;
font-weight: bold;
font-size: 39px;
line-height: 79px;
text-align: right;
color: #26282d;
}
.tabata-timer .hidden {
display: none;
}
.tabata-timer h3 {
font-family: "proxima-nova", sans-serif;
font-weight: 700;
font-size: 39.06px;
text-align: center;
color: #26282d;
margin: 0;
margin-top: 12px;
}
.tabata-timer__error {
font-family: "proxima-nova", sans-serif;
font-weight: 600;
font-size: 18px;
text-align: center;
color: #dc3545;
margin: 16px auto 0;
padding: 0;
}
.tabata-timer__buttons {
width: 100%;
height: auto;
margin: 10.7px auto 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
}
.tabata-timer .buttons__start {
font-family: "proxima-nova", sans-serif;
font-weight: bold;
font-size: 25px;
letter-spacing: 0.04em;
text-align: center;
color: #fff;
width: 100%;
height: 71.28px;
background: #1974b9;
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.15);
border: none;
margin: 0 auto;
padding: 0;
text-transform: uppercase;
}
.tabata-timer .buttons__start:hover {
filter: brightness(80%);
}
.tabata-timer .buttons__stop {
width: calc(50% - 4px);
max-width: 208px;
height: 71.28px;
background: #e31c3d;
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.15);
font-family: "proxima-nova", sans-serif;
font-weight: 700;
font-size: 25px;
letter-spacing: 0.04em;
text-align: center;
color: #fff;
text-transform: uppercase;
margin: 0 auto;
padding: 0;
border: none;
}
.tabata-timer .buttons__stop:hover {
filter: brightness(80%);
}
.tabata-timer .buttons__pause {
font-family: "proxima-nova", sans-serif;
font-weight: bold;
font-size: 25px;
letter-spacing: 0.04em;
text-align: center;
color: #252934;
width: calc(50% - 4px);
max-width: 208px;
height: 71.28px;
background: #dfdfdf;
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.15);
text-transform: uppercase;
margin: 0 auto;
padding: 0;
border: none;
}
.tabata-timer .buttons__pause:hover {
filter: brightness(80%);
}
.tabata-timer__inputs {
margin: 16.7px auto 0;
padding: 12px;
max-height: 332px;
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(4, 1fr);
background: #252934;
}
.tabata-timer .inputs__rounds,
.tabata-timer .inputs__work,
.tabata-timer .inputs__rest,
.tabata-timer .inputs__prep {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
}
.tabata-timer .inputs__rounds .inputs__label,
.tabata-timer .inputs__work .inputs__label,
.tabata-timer .inputs__rest .inputs__label,
.tabata-timer .inputs__prep .inputs__label {
display: grid;
grid-template-columns: auto 20px;
place-items: center center;
gap: 3px;
font-weight: bold;
font-size: 20px;
line-height: 26px;
text-align: left;
color: #fff;
}
.tabata-timer .inputs__rounds svg,
.tabata-timer .inputs__work svg,
.tabata-timer .inputs__rest svg,
.tabata-timer .inputs__prep svg {
width: 20px;
height: 20px;
aspect-ratio: 1 / 1;
margin: 0 auto;
padding: 0;
fill: #ffffff;
}
.tabata-timer .inputs__row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
.tabata-timer .inputs__row input {
width: 50px;
height: 56px;
background: #fff;
font-family: "redwing-bold", serif;
font-weight: 500;
font-size: 24px;
line-height: 28px;
text-align: center;
color: #26282d;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.tabata-timer .inputs__row input:focus-visible {
outline: none;
}
.tabata-timer .inputs__row span {
color: #ffffff;
font-weight: bold;
font-size: 18px;
text-align: center;
margin: 0 7.8px;
}
.tabata-timer #workTimeSeconds::before,
.tabata-timer #restTimeSeconds::before,
.tabata-timer #prepTimeSeconds::before {
content: ":";
display: inline-block;
height: auto;
width: auto;
margin-right: 5px;
color: #fff;
}
.tabata-timer .tooltip__rounds,
.tabata-timer .tooltip__work,
.tabata-timer .tooltip__rest,
.tabata-timer .tooltip__prep {
position: absolute;
width: 320px;
display: flex;
flex-direction: column;
background: #ffffff;
margin: 0;
margin-left: -12px;
margin-top: 0px;
height: 87px;
padding: 0;
text-align: left;
font-weight: normal;
width: 294px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.tabata-timer .tooltip__rounds svg,
.tabata-timer .tooltip__work svg,
.tabata-timer .tooltip__rest svg,
.tabata-timer .tooltip__prep svg {
margin: 4px 4px 0 auto;
}
.tabata-timer .tooltip__rounds.hidden,
.tabata-timer .tooltip__work.hidden,
.tabata-timer .tooltip__rest.hidden,
.tabata-timer .tooltip__prep.hidden {
display: none;
}
.tabata-timer .tooltip__text {
padding: 0;
margin: 0 16px 20px;
}
.tabata-timer .error {
background: #dc3545;
}
@media (min-width: 768px) {
.tabata-timer {
max-width: 863px;
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
}
.tabata-timer__displays {
order: 1;
display: grid;
grid-template-columns: 57% auto;
grid-template-rows: repeat(2, 1fr);
gap: 16px 16px;
margin-bottom: 16px;
background: transparent;
}
.tabata-timer__error {
order: 3;
}
.tabata-timer__buttons {
order: 4;
}
.tabata-timer__inputs {
order: 2;
}
.tabata-timer__display--current-time {
grid-area: 1 / 1 / 3 / 2;
align-items: center;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
background: #fff;
}
.tabata-timer__inputs {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
width: clamp(320px, 100%, 863px);
margin: 0 auto;
padding: 0;
}
.tabata-timer__display--current-round {
grid-area: 1 / 2 / 2 / 3;
width: 100%;
display: grid;
place-items: center center;
width: 100%;
background: #fff;
}
.tabata-timer__display--current-round label {
margin: 12px auto;
display: flex;
flex-direction: column-reverse;
align-items: center;
flex-wrap: nowrap;
}
.tabata-timer__display--total {
grid-area: 2 / 2 / 3 / 3;
display: grid;
place-items: center center;
width: 100%;
background: #fff;
}
.tabata-timer__display--total label {
margin: 12px auto;
display: flex;
flex-direction: column-reverse;
align-items: center;
flex-wrap: nowrap;
}
.tabata-timer .inputs__rounds,
.tabata-timer .inputs__work,
.tabata-timer .inputs__prep,
.tabata-timer .inputs__rest {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
width: 100%;
align-items: center;
}
.tabata-timer .inputs__rounds .inputs__label,
.tabata-timer .inputs__work .inputs__label,
.tabata-timer .inputs__rest .inputs__label,
.tabata-timer .inputs__prep .inputs__label {
width: 100%;
max-width: 134px;
display: flex;
flex-direction: row;
margin: 0;
margin-top: 25px;
}
.tabata-timer .inputs__rounds svg,
.tabata-timer .inputs__work svg,
.tabata-timer .inputs__rest svg,
.tabata-timer .inputs__prep svg {
margin: 0;
margin-left: 3px;
margin-right: auto;
}
.tabata-timer .inputs__row {
max-width: 134px;
width: auto;
margin: 0 auto 31.9px;
}
.inputs__rounds>div.inputs__row>input[type=number] {
width: 134px;
}
.tabata-timer .inputs__rounds .tabata-timer__close-icon,
.tabata-timer .inputs__work .tabata-timer__close-icon,
.tabata-timer .inputs__rest .tabata-timer__close-icon,
.tabata-timer .inputs__prep .tabata-timer__close-icon {
margin: 4px 4px 0 auto;
}
.tabata-timer .tabata-timer__displays.error {
background: transparent;
}
.tabata-timer .buttons__start {
max-width: 294px;
}
.tabata-timer__buttons {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: nowrap;
align-items: center;
gap: 16px;
}
.tabata-timer .buttons__stop {
max-width: 180px;
margin: 0;
}
.tabata-timer .buttons__pause {
max-width: 180px;
margin: 0;
}
}