Jam CSS
:root {
--main-bg-color: #fff;
--main-text-color: #888888;
}
[data-theme="dark"] {
--main-bg-color: #1e1f26;
--main-text-color: #ccc;
}
* {
box-sizing: border-box;
/* transition: all ease 0.2s; */
}
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
font-size: 16px;
background-color: var(--main-bg-color);
position: relative;
transition: all ease 0.2s;
}
.page-header {
font-size: 2rem;
color: var(--main-text-color);
padding: 2rem 0;
font-family: monospace;
text-transform: uppercase;
letter-spacing: 4px;
transition: all ease 0.2s;
}
.clock {
min-height: 18em;
min-width: 18em;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--main-bg-color);
background-image: url("https://imvpn22.github.io/analog-clock/clock.png");
background-position: center center;
background-size: cover;
border-radius: 50%;
border: 4px solid var(--main-bg-color);
box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3),
inset 0 15px 15px rgba(0, 0, 0, 0.3);
transition: all ease 0.2s;
}
.clock:before {
content: "";
height: 0.75rem;
width: 0.75rem;
background-color: var(--main-text-color);
border: 2px solid var(--main-bg-color);
position: absolute;
border-radius: 50%;
z-index: 1000;
transition: all ease 0.2s;
}
.hour,
.min,
.sec {
position: absolute;
display: flex;
justify-content: center;
border-radius: 50%;
}
.hour {
height: 10em;
width: 10em;
}
.hour:before {
content: "";
position: absolute;
height: 50%;
width: 6px;
background-color: var(--main-text-color);
border-radius: 6px;
}
.min {
height: 12em;
width: 12em;
}
.min:before {
content: "";
height: 50%;
width: 4px;
background-color: var(--main-text-color);
border-radius: 4px;
}
.sec {
height: 13em;
width: 13em;
}
.sec:before {
content: "";
height: 60%;
width: 2px;
background-color: #f00;
border-radius: 2px;
}
/* Style for theme switch btn */
.switch-cont {
margin: 2em auto;
/* position: absolute; */
bottom: 0;
}
.switch-cont .switch-btn {
font-family: monospace;
text-transform: uppercase;
outline: none;
padding: 0.5rem 1rem;
background-color: var(--main-bg-color);
color: var(--main-text-color);
border: 1px solid var(--main-text-color);
border-radius: 0.25rem;
cursor: pointer;
transition: all ease 0.3s;
}
0 komentar: