MediaWiki:Gadget-LiveClock.css

@keyframes clock-hand-spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

#clockContainer {
	position: fixed;
	top: 100px;
	left: 16px;
	width: 48px;
	height: 48px;
	border: 1px solid var(--color-primary1);
	background: white;
	border-radius: 25px;
    z-index: 650000;
	overflow: hidden;
	transition: all 300ms;
}

#clockInnerContainer {
	display: flex;
	width: 192px;
	height: 48px;
	align-items: center;
}

#clockAnalogContainer {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin: -2px;
	position: relative;
	border: 1px solid var(--color-primary1);
	transition: all 300ms;
}

#clockAnalogHour {
	width: 2px;
	border-radius: 2px;
	background: black;
	height: 35%;
	position: absolute;
	top: 25%;
	left: calc(50% - 1px);
	transform-origin: 50% 71.4%;
	animation: clock-hand-spin 43200s infinite linear;
}

#clockAnalogMinute {
	width: 2px;
	border-radius: 2px;
	background: black;
	height: 45%;
	position: absolute;
	top: 15%;
	left: calc(50% - 1px);
	transform-origin: 50% 77.8%;
	animation: clock-hand-spin 3600s infinite linear;
}

#clockAnalogSecond {
	width: 2px;
	background: var(--color-primary1);
	-webkit-mask-image: linear-gradient(to right, transparent 25%, red 25%, red 75%, transparent 75%);
	mask-image: linear-gradient(to right, transparent 25%, red 25%, red 75%, transparent 75%);
	height: 50%;
	position: absolute;
	top: 10%;
	left: calc(50% - 1px);
	transform-origin: 50% 80%;
	animation: clock-hand-spin 60s infinite linear;
}

#clockDigitalContainer {
	flex: 1;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	font-size: 1.5rem;
	text-align: center;
}

#clockContainer:hover {
	width: 192px;
	border-radius: 4px;
}

#clockContainer:hover #clockAnalogContainer {
	width: 38px;
	height: 38px;
	margin: 4px;
}

@media screen and (max-width: 750px) {
	#clockContainer {
		top: 75px;
	}
}