Template:Note/styles.css: Difference between revisions

Content added Content deleted

Inline

Revision as of 21:12, 16 May 2024

.hatnote {
	display: flex;
	align-items: center;
	padding: 10px 15px;
	margin-top: 0.6rem;
	margin-bottom: 0.8rem;
	background: var( --color-surface-2 );
	border-radius: var( --border-radius--medium );
	color: var( --color-base--subtle );
	font-size: 0.875rem;
	line-height: 1.4;
}

.hatnote-icon img {
	width: 14px;
	height: auto;
	margin-right: 10px;
	opacity: var( --opacity-icon-base );
}

/* Dark theme */
html.skin-citizen-dark .hatnote-icon img {
	filter: invert( 1 );
}

@@ Line 1: / Line 1: @@
-.note {
+.hatnote {
+	display: flex;
-	background-position: left 7px top 50%;
+	align-items: center;
-	padding: 0.5em 0.5em 0.5em 40px;
-	margin: 0.5em 0;
+	padding: 10px 15px;
+	margin-top: 0.6rem;
-	overflow: hidden;
+	margin-bottom: 0.8rem;
-	background-color: var(--color-surface-2);
+	background: var( --color-surface-2 );
-	color: #333;
+	border-radius: var( --border-radius--medium );
-	background-repeat: no-repeat;
+	color: var( --color-base--subtle );
-	border: 1px solid #ddd;
+	font-size: 0.875rem;
-}
+	line-height: 1.4;
-.note-inline {
-	display: inline-block;
-	vertical-align: middle;
-}
-.note-info {
-	background-color: var(--color-surface-2);
-	color: #333;
-	/* [[File:OOjs_UI_icon_information-progressive.svg]] */
-	background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ec/OOjs_UI_icon_information-progressive.svg);
-	background-size: 25px;
-	border-color: #a3caff;
-	padding-left: 40px;
-	min-height: 25px;
-}
-.note-reminder {
-	background-color: var(--color-surface-2);
-	color: #333;
-	/* [[File:OOjs_UI_icon_lightbulb-yellow.svg]] */
-	background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/a8/OOjs_UI_icon_lightbulb-yellow.svg);
-	background-size: 25px;
-	border-color: #fc3;
-	min-height: 25px;
-}
-.note-warn {
-	background-color: var(--color-surface-2);
-	color: #333;
-	/* [[File:OOjs_UI_icon_alert-warning.svg]] */
-	background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/3b/OOjs_UI_icon_alert-warning.svg);
-	background-size: 25px;
-	border-color: #fc3;
-	min-height: 25px;
-}
-.note-error {
-	background-color: var(--color-surface-2);
-	color: #333;
-	/* [[File:OOjs_UI_icon_notice-destructive.svg]] */
-	background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/bf/OOjs_UI_icon_notice-destructive.svg);
-	background-size: 25px;
-	border-color: #c33;
-	min-height: 25px;
 }
+.hatnote-icon img {
-html.skin-citizen-dark .note {
+	width: 14px;
-	background-color: var(--color-surface-2);
+	height: auto;
-    color: inherit;
+	margin-right: 10px;
+	opacity: var( --opacity-icon-base );
 }
+/* Dark theme */
-@media (prefers-color-scheme: dark) {
+html.skin-citizen-dark .hatnote-icon img {
-    /* automatic mode */
+	filter: invert( 1 );
-	html.skin-citizen-dark .note {
-		background-color: var(--color-surface-2);
-    	color: inherit;
-	}
 }