Template:Main Page news/styles.css

.news > .date {
	margin: 1.5em 0 0.5em;
	font-weight: bold;
}

.news > .item {
	margin: 0.5em 0;
	line-height: 2em;
}

.news > .item:before {
	display: inline-block;
	width: 4em;
	margin-right: 1em;
	text-align: center;
	font-variant: small-caps;
	font-weight: bold;
	line-height: 1.5em;
}

/*
 * "Light Pink":           "ffadad"
 * "Deep Champagne":       "ffd6a5"
 * "Lemon Yellow Crayola": "fdffb6"
 * "Tea Green":            "caffbf"
 * "Celeste":              "9bf6ff"
 * "Baby Blue Eyes":       "a0c4ff"
 * "Maximum Blue Purple":  "bdb2ff"
 * "Mauve":                "ffc6ff"
 * "Baby Powder":          "fffffc"
 */

.news > .item[data-type="event"]:before {
	content: 'event';
	background-color: #fdffb6;
}

.news > .item[data-type="gacha"]:before {
	content: 'gacha';
	background-color: #bdb2ff;
}

.news > .item[data-type="misc"]:before {
	content: 'misc';
	background-color: #9bf6ff;
}

.news > .item[data-type="song"]:before {
	content: 'song';
	background-color: #ffadad;
}

/*
 * Citizen skin
 */
body.skin-citizen .news > .item:before {
	color: hsl(206.7, 5.1%, 34.7%);
	border-radius: var(--border-radius--small);
}