|
* { |
|
box-sizing: border-box; |
|
outline: none; |
|
user-select: none; |
|
} |
|
body { |
|
align-items: center; |
|
background: radial-gradient(ellipse at center, rgba(255,179,206,0) 0%, rgba(255,180,199,0) 43%, rgba(255,181,189,0.43) 100%); |
|
background-attachment: fixed; |
|
background-repeat: no-repeat; |
|
display: flex; |
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffb3ce', endColorstr='#6effb5bd', GradientType=1); |
|
flex-direction: column; |
|
font-family: "Open Sans", sans-serif; |
|
height: 100vh; |
|
justify-content: center; |
|
min-width: 184px; |
|
overflow-x: hidden; |
|
transition: background-color .2s; |
|
} |
|
#pomodoro { |
|
margin-bottom: 43px; |
|
max-width: 512px; |
|
width: 100%; |
|
#clock { |
|
background: url(https://joeweaver.me/codepenassets/freecodecamp/challenges/build-a-pomodoro-clock/bg.png) no-repeat center center; |
|
background-size: contain; |
|
display: flex; |
|
justify-content: center; |
|
margin-bottom: -6.25vw; |
|
padding: 40vw 0; |
|
@media all and (min-width: 512px){ |
|
margin-bottom: -32px; |
|
padding: 204px 0; |
|
} |
|
@media all and (max-width: 184px){ |
|
margin-bottom: -20px; |
|
margin-bottom: -11.5px; |
|
padding: 73px 0; |
|
} |
|
#timer { |
|
$hover: 5; |
|
align-items: center; |
|
cursor: pointer; |
|
display: flex; |
|
flex-direction: column; |
|
#title { |
|
color: #FF8B8A; |
|
font-size: 28px; |
|
line-height: 28px; |
|
margin: 3px 0 1px; |
|
@media all and (max-width: 512px){ |
|
font-size: 5.5vw; |
|
line-height: 5.5vw; |
|
} |
|
@media all and (max-width: 184px){ |
|
font-size: 10px; |
|
line-height: 10px; |
|
} |
|
} |
|
#countdown { |
|
color: #ff778d; |
|
display: flex; |
|
font-size: 43px; |
|
font-weight: 600; |
|
line-height: 43px; |
|
@media all and (max-width: 512px){ |
|
font-size: 8.4vw; |
|
line-height: 8.4vw; |
|
} |
|
@media all and (max-width: 184px){ |
|
font-size: 15.4px; |
|
line-height: 15.4px; |
|
} |
|
#minutes::after { |
|
content: ":"; |
|
} |
|
} |
|
#controls { |
|
align-items: center; |
|
display: flex; |
|
color: #FF6292; |
|
flex-direction: column; |
|
font-size: 15px; |
|
font-weight: 700; |
|
line-height: 15px; |
|
margin-top: 5px; |
|
text-align: center; |
|
text-transform: uppercase; |
|
.fas, .svg-inline--fa { |
|
position: relative; |
|
} |
|
#start, #pause, #reset { |
|
white-space: nowrap; |
|
} |
|
#start { |
|
.fa-play { |
|
font-size: 77%; |
|
top: -1px; |
|
} |
|
&:hover { |
|
color: darken(#FF6292, $hover); |
|
} |
|
} |
|
#pause { |
|
.fa-pause { |
|
font-size: 90%; |
|
top: -1px; |
|
transform: scaleX(.84); |
|
} |
|
&:hover { |
|
color: darken(#FF6292, $hover); |
|
} |
|
} |
|
#reset { |
|
position: absolute; |
|
margin-top: 17.56px; |
|
transition: margin-top .43s, opacity .43s; |
|
.fa-sync-alt { |
|
font-size: 84%; |
|
} |
|
&:hover { |
|
color: darken(#FF6292, $hover); |
|
} |
|
} |
|
&.reset { |
|
#pause { |
|
display: none; |
|
} |
|
#reset { |
|
margin-top: 0; |
|
opacity: 0; |
|
z-index: -1; |
|
} |
|
} |
|
&.started { |
|
#start { |
|
display: none; |
|
} |
|
#reset { |
|
opacity: 0; |
|
} |
|
} |
|
&.paused { |
|
#pause { |
|
display: none; |
|
} |
|
} |
|
@media all and (max-width: 512px){ |
|
font-size: 5.5vw; |
|
line-height: 5.5vw; |
|
#start, #pause, #reset { |
|
font-size: 3vw; |
|
line-height: 3vw; |
|
} |
|
#reset { |
|
margin-top: 3.43vw; |
|
} |
|
} |
|
@media all and (max-width: 184px){ |
|
font-size: 10px; |
|
line-height: 10px; |
|
#start, #pause, #reset { |
|
font-size: 5.5px; |
|
line-height: 5.5px; |
|
} |
|
#reset { |
|
margin-top: 6.31px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
#options { |
|
color: #FF6292; |
|
display: flex; |
|
font-size: 28px; |
|
font-weight: normal; |
|
justify-content: center; |
|
margin-bottom: 28px; |
|
text-align: center; |
|
.option-title { |
|
color: #FF6F8A; |
|
font-size: 14px; |
|
font-weight: bold; |
|
margin-top: 8px; |
|
margin-bottom: -6px; |
|
text-transform: uppercase; |
|
} |
|
.fa-angle-double-up { |
|
color: #FF848A; |
|
cursor: pointer; |
|
} |
|
.fa-angle-double-down { |
|
color: #FF5792; |
|
cursor: pointer; |
|
} |
|
#session, #break { |
|
align-items: center; |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
input[type=number]{ |
|
background: linear-gradient(lighten(#FF8B8A, 20), lighten(#FF6292, 22)); |
|
border: 0; |
|
border-bottom: calc(3px + .28vw) solid #FF6292; |
|
border-radius: 10px; |
|
color: #FF6292; |
|
font: bold calc(21px + 1.43vw) "Open Sans", sans-serif; |
|
margin: calc(5px + .43vw) calc(3px + .43vw); |
|
padding: calc(3px + .43vw) calc(5px + .43vw); |
|
text-align: center; |
|
&::-webkit-inner-spin-button, |
|
&::-webkit-outer-spin-button { |
|
-webkit-appearance: none; |
|
} |
|
@media all and (min-width: 512px){ |
|
border-bottom: 4.43px solid #FF6292; |
|
font: bold 28.43px "Open Sans", sans-serif; |
|
margin: 7.2px 5.2px; |
|
padding: 5.2px 7.2px; |
|
} |
|
@media all and (max-width: 184px){ |
|
border-bottom: 3.5px solid #FF6292; |
|
font: bold 23.6px "Open Sans", sans-serif; |
|
margin: 5.7px 3.7px; |
|
padding: 3.7px 5.7px; |
|
} |
|
} |
|
} |
|
} |
|
audio { |
|
display: none; |
|
} |
|
#audio-selector { |
|
display: flex; |
|
left: 0; |
|
position: fixed; |
|
top: 0; |
|
width: 100vw; |
|
.theme { |
|
background: linear-gradient(to bottom, rgba(255,99,127,0.28) 0%, rgba(255,99,127,0.28) 1%, rgba(255,98,143,0) 84%, rgba(255,98,146,0) 100%); |
|
color: darken(desaturate(#FF7B8A, 30), 10); |
|
cursor: pointer; |
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#47ff637f', endColorstr='#00ff6292', GradientType=0); |
|
flex: 1 1 25%; |
|
font: 600 calc(9px + 1vw) "Open Sans", sans-serif; |
|
margin: 0 2px 0 0; |
|
padding: 2vw 1vw 5vw; |
|
text-align: center; |
|
transition: all .43s; |
|
white-space: nowrap; |
|
&:last-child { |
|
margin-right: 0; |
|
} |
|
&:hover, &.selected { |
|
background: linear-gradient(to bottom, rgba(255,99,127,0.43) 0%, rgba(255,99,127,0.43) 1%, rgba(255,98,143,0) 84%, rgba(255,98,146,0) 100%); |
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6eff637f', endColorstr='#00ff6292', GradientType=0); |
|
} |
|
@media all and (min-width: 512px){ |
|
font-size: 15.33px; |
|
padding: 9px 5px 25px; |
|
} |
|
} |
|
@media all and (max-width: 300px){ |
|
flex-wrap: wrap; |
|
.theme { |
|
flex: 1 0 100%; |
|
font-size: 14px; |
|
padding: 7px; |
|
} |
|
} |
|
} |