ajout css
This commit is contained in:
parent
62f33810a4
commit
273b8f1691
|
@ -0,0 +1,65 @@
|
||||||
|
/* Layout */
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
padding: 2em;
|
||||||
|
height: 90vh;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clockbox,
|
||||||
|
#clock {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Clock styles */
|
||||||
|
.circle {
|
||||||
|
fill: none;
|
||||||
|
stroke: #000;
|
||||||
|
stroke-width: 9;
|
||||||
|
stroke-miterlimit: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mid-circle {
|
||||||
|
fill: #000;
|
||||||
|
}
|
||||||
|
.hour-marks {
|
||||||
|
fill: none;
|
||||||
|
stroke: #000;
|
||||||
|
stroke-width: 9;
|
||||||
|
stroke-miterlimit: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hour-arm {
|
||||||
|
fill: none;
|
||||||
|
stroke: #000;
|
||||||
|
stroke-width: 17;
|
||||||
|
stroke-miterlimit: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minute-arm {
|
||||||
|
fill: none;
|
||||||
|
stroke: #000;
|
||||||
|
stroke-width: 11;
|
||||||
|
stroke-miterlimit: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.second-arm {
|
||||||
|
fill: none;
|
||||||
|
stroke: #000;
|
||||||
|
stroke-width: 4;
|
||||||
|
stroke-miterlimit: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Transparent box ensuring arms center properly. */
|
||||||
|
.sizing-box {
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make all arms rotate around the same center point. */
|
||||||
|
#hour,
|
||||||
|
#minute,
|
||||||
|
#second {
|
||||||
|
transform-origin: 300px 300px;
|
||||||
|
transition: transform .5s ease-in-out;
|
||||||
|
}
|
Loading…
Reference in New Issue