Template:Infobox service/styles.css: Difference between revisions

Newer edit →

@@ Line 1: / Line 1: @@
-.infobox-service-status {
+.infobox.infobox-service {
-	display: inline-block;
+	box-sizing: border-box;
-	padding: 0.15em 0.55em;
+	width: 280px;
-	border: 1px solid transparent;
+	border: 2px solid #a2a9b1;
-	border-radius: 999px;
+	border-collapse: collapse;
-	font-size: 0.875em;
+	border-spacing: 0;
-	font-weight: 600;
+	clear: right;
-	line-height: 1.4;
+	float: right;
-	white-space: nowrap;
+	margin: 0 0 0.5em 0.5em;
+	background-color: #fff;
+	color: #333;
 }
-.infobox-service-status--planned,
+.infobox-service caption {
-.infobox-service-status--unknown {
+	padding: 0.2em 0.5em;
-	border-color: #a2a9b1;
+	text-align: center;
-	background: #eaecf0;
+}
+.infobox-service th,
+.infobox-service td {
+	padding: 0.2em 0.5em;
+	border: 0;
+	vertical-align: top;
+	overflow-wrap: anywhere;
+}
+.infobox-service th[scope="row"] {
+	min-width: 7em;
+	text-align: left;
+}
+.infobox-service .infobox-service-header {
+	padding: 0.5em;
+	background-color: #72777d;
+	color: #fff;
+	text-align: center;
+}
+.infobox-service .infobox-service-header a {
+	color: #fff;
+}
+.infobox-service-header__inner {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5em;
+}
+.infobox-service-header__logo {
+	flex: none;
+}
+.infobox-service-header__logo img {
+	display: block;
+	width: auto;
+	height: auto;
+	max-width: 48px;
+	max-height: 48px;
+	padding: 0 0.2em 0 0.5em;
+}
+.infobox-service-header__copy,
+.infobox-service-header__name,
+.infobox-service-header__status {
+	display: block;
+}
+.infobox-service-header__name {
+	font-size: 130%;
+	line-height: 1;
+}
+.infobox-service-header__status {
+	margin-top: 0.25em;
+	line-height: 1.2;
+}
+.infobox-service-tagline {
+	padding: 0.35em 0.5em;
+	text-align: center;
+	font-style: italic;
+	font-weight: normal;
+}
+.infobox-service-status-stable {
+	border-color: #00af89;
+}
+.infobox-service-status-stable .infobox-service-header {
+	background-color: #068468;
+}
+.infobox-service-status-beta {
+	border-color: #fc3;
+}
+.infobox-service-status-beta .infobox-service-header {
+	background-color: #fc3;
+	color: #202122;
+}
+.infobox-service-status-beta .infobox-service-header a {
 	color: #202122;
 }
-.infobox-service-status--experimental {
+.infobox-service-status-experimental {
-	border-color: #ac6600;
+	border-color: #ff4500;
-	background: #fef6e7;
+}
-	color: #6b4e00;
+.infobox-service-status-experimental .infobox-service-header {
+	background-color: #c43e00;
+}
+.infobox-service-status-alpha,
+.infobox-service-status-unstable {
+	border-color: #d33;
 }
-.infobox-service-status--alpha,
+.infobox-service-status-alpha .infobox-service-header,
-.infobox-service-status--unstable {
+.infobox-service-status-unstable .infobox-service-header {
-	border-color: #b32424;
+	background-color: #b32424;
-	background: #fde8e8;
-	color: #8b1e1e;
 }
-.infobox-service-status--beta {
+.infobox-service-status-maintenance {
 	border-color: #36c;
-	background: #eaf3ff;
-	color: #164d7a;
 }
-.infobox-service-status--stable {
+.infobox-service-status-maintenance .infobox-service-header {
-	border-color: #14866d;
+	background-color: #36c;
-	background: #e6f6ea;
-	color: #176b2c;
 }
-.infobox-service-status--maintenance {
+.infobox-service-status-deprecated,
-	border-color: #6744b1;
+.infobox-service-status-unmaintained {
-	background: #f1edff;
+	border-color: #ac6600;
-	color: #553c9a;
 }
-.infobox-service-status--deprecated {
+.infobox-service-status-deprecated .infobox-service-header,
-	border-color: #ac6600;
+.infobox-service-status-unmaintained .infobox-service-header {
-	background: #fff1d6;
+	background-color: #8a5200;
-	color: #7a4d00;
 }
-.infobox-service-status--unmaintained,
+.infobox-service-status-planned,
-.infobox-service-status--discontinued {
+.infobox-service-status-discontinued,
+.infobox-service-status-unknown {
 	border-color: #72777d;
-	background: #eaecf0;
+}
-	color: #54595d;
+.infobox-service-status-planned .infobox-service-header,
+.infobox-service-status-discontinued .infobox-service-header,
+.infobox-service-status-unknown .infobox-service-header {
+	background-color: #54595d;
+}
+@media screen {
+	html.skin-theme-clientpref-night .infobox-service {
+		background-color: inherit;
+		color: inherit;
+	}
+}
+@media screen and (prefers-color-scheme: dark) {
+	html.skin-theme-clientpref-os .infobox-service {
+		background-color: inherit;
+		color: inherit;
+	}
+}
+@media (max-width: 719px) {
+	body.mediawiki .infobox.infobox-service {
+		float: none;
+		clear: both;
+		width: 100% !important;
+		margin: 0 0 0.5em;
+	}
 }

CodexBot (talk | contribs)