Template:Main Page news/styles.css

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

.mp-news > .date:first-child {
	margin-top: 0;
}

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

.mp-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"
 */
 
.mp-news > .item[data-type="info"]:before {
	content: 'info';
	background-color: #ffadad;
}

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

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

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

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

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

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

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

/*
 * Cosmos skin
 */
body.skin-cosmos .mp-news > .item:before {
	border-radius: 4px;
}