Template:UpdateBox/styles.css

.template-updatebox {
	display: inline-block;
	position: relative;
	
	box-sizing: border-box;
	
	border: 1px solid #305080;
	border-radius: 8px;
	margin: 0 auto;
	overflow: hidden;
	
	max-width: 230px;
	min-width: 160px;
}

.template-updatebox .update-date {
	position: absolute;
	
	top: 0;
	right: 8px;
	
	font-size: 12px;
	background: var(--paper-background, #FEF4E6);
	padding: 1px 5px;
	border-radius: 6px;
	box-shadow: 0 1px 1px var(--paper-border, #DFDCE4);
}

html.theme-dark .template-updatebox {
	border-color: #315081;
}

.template-updatebox a {
	color: #202122 !important;
}

html.theme-dark .template-updatebox a {
	color: #FFF !important;
}

.template-updatebox > a {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.template-updatebox:hover > a > img {
	transform: scale(1.075);
	filter: grayscale(0%);
}

.template-updatebox > a > img {
	width: 100%;
	height: auto;
	filter: grayscale(15%);
	transition: transform 250ms linear,
		filter 250ms linear;
}

.template-updatebox > div {
	display: flex;
	text-align: center;
	
	/*
	 * Should be wide enough to never wrap but just incase we
	 * want to keep the paragraph as one line
	 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	
	background: #FFF;
	
	margin: 0;
	padding: 0.2em;
}

.template-updatebox > div > a {
	display: block;
	align-self: center;
	flex-grow: 1;
}

html.theme-dark .template-updatebox > div {
	background: #020202;
}

.template-updatebox a:hover {
	text-decoration: none !important;
}

@media screen and (max-width: 720px) {
	.template-updatebox {
		font-size: calc(1em * 0.9);
	}
}