Update appearence
This commit is contained in:
@@ -9,13 +9,8 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="timer-box">
|
||||
<div class="timer-bg">
|
||||
<div class="timer-time">
|
||||
<span class="timer-time">00:00</span>
|
||||
</div>
|
||||
<div class="timer-details">
|
||||
</div>
|
||||
<div class="timer-details">
|
||||
00:00
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
37
timer.css
37
timer.css
@@ -1,35 +1,36 @@
|
||||
:root {
|
||||
--break-color: #9020BA;
|
||||
--focus-color: #EED59F;
|
||||
--stage-color: var(--break-color);
|
||||
--clip-path: none;
|
||||
--time-color: #453960;
|
||||
--details-color: #403060;
|
||||
--background-color: transparent;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--background-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.timer-box{
|
||||
.timer-box {
|
||||
height: 175px;
|
||||
width: 397px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
|
||||
.timer-time {
|
||||
font-size: 100px;
|
||||
font-family: Inter;
|
||||
font-size: clamp(6rem, 22vw, 16rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0%;
|
||||
text-align: center;
|
||||
color: #453960;
|
||||
color: var(--time-color);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.timer-details {
|
||||
display: fill;
|
||||
font-family: Inter;
|
||||
font-weight: 600;
|
||||
color: var(--details-color);
|
||||
font-size: 16px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
width: 65%;
|
||||
margin: auto;
|
||||
color: #453960;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user