Module:Notice/styles.css

/* START styles Notice*/

/* general styles notice box */
.notice,
.notice-small {
	border-style: solid;
	column-gap: 1em;
	display: flex;
	flex-direction: row;
	margin-top: 0;
	margin-bottom: 0.5em;
	padding: 0.5em;
}

/* additional styles standard notice box */
.notice {
	border-radius: 5px 5px 5px 5px;
	border-width: 1px 5px 1px 5px;
}

/* additional styles notice box small */
.notice-small {
	border-width: 1px 1px 1px 3px;
	clear: right;
	float: right;
	font-size: 85%;	
	margin-right: 0;
	margin-left: 0.5em;
	width: 255px;
}

/* notice box alignment */
.notice-center {
	margin-left: auto;
	margin-right: auto;
}
.notice-left {
	margin-left: 0;
	margin-right: auto;
}
.notice-right {
	margin-left: auto;
	margin-right: 0;
}

/* notice box elements */
.notice-image {
	margin: auto;
	position: relative;	
}

.notice-content {
	flex-grow: 1;
	margin: auto;
}

.notice-header {font-weight: 600;}

.notice-description {font-size: 9pt;}

.notice-text-center {text-align: center;}
.notice-text-left {text-align: left;}
.notice-text-right {text-align: right;}

/* change offset of bulletlists when used as content on a notice-small box */
.notice-small .notice-content .notice-description ul {
	margin-top: 0;
	margin-left: 2ex;
}
/* !!! Preparation for Themes !!! */
/* defined border colors, default dark */
/*
.notice-border-blue {border-color: var(--border-color-notice-blue,#187edc);}
.notice-border-gray {border-color: var(--border-color-notice-gray,#949494);}
.notice-border-green {border-color: var(--border-color-gnotice-reen,#66b814);}
.notice-border-maroon {border-color: var(--border-color-notice-maroon,#9c2b1c);}
.notice-border-orange {border-color: var(--border-color-notice-orange,#dc7e18);}
.notice-border-pink {border-color: var(--border-color-notice-pink,#ec5194);}
.notice-border-purple {border-color: var(--border-color-notice-purple,#8800f0);}
.notice-border-red {border-color: var(--border-color-notice-red,#cb1a1a);}
.notice-border-teal {border-color: var(--border-color-notice-teal,#13aeae);}
.notice-border-yellow {border-color: var(--border-color-notice-yellow,#d0d00b);}
*/
/* defined background colors, default dark */
/*
.notice-background-blue {background-color: var(--background-color-notice-blue,#0b293c);}
.notice-background-gray {background-color: var(--background-color-notice-gray,#252728);}
.notice-background-green {background-color: var(--background-color-notice-green,#1c2c0c);}
.notice-background-maroon {background-color: var(--background-color-notice-maroon,#301613);}
.notice-background-orange {background-color: var(--background-color-notice-orange,#332210);}
.notice-background-pink {background-color: var(--background-color-notice-pink,#390e20);}
.notice-background-purple {background-color: var(--background-color-notice-purple,#29103c);}
.notice-background-red {background-color: var(--background-color-notice-red,#381012);}
.notice-background-teal {background-color: var(--background-color-notice-teal,#132b2b);}
.notice-background-yellow {background-color: var(--background-color-notice-yellow,#28280b);}
/*

/* colors defined after this are just temporary until theme(-s) are finished */
/* defined border colors */
.notice-border-blue {border-color: #0a89ff;}
.notice-border-gray {border-color: #adadad;}
.notice-border-green {border-color: #73cf17;}
.notice-border-maroon {border-color: #bd3f2f;}
.notice-border-orange {border-color: #ff890a;}
.notice-border-pink {border-color: #f764a4;}
.notice-border-purple {border-color: #9c1aff;}
.notice-border-red {border-color: #e21d1d;}
.notice-border-teal {border-color: #15c1c1;}
.notice-border-yellow {border-color: #e6e600;}

/* defined background colors*/
.notice-background-blue {background-color:#e0f3ff;}
.notice-background-gray {background-color:#f0f0f0;}
.notice-background-green {background-color:#f2fce8;}
.notice-background-maroon {background-color:#fdece7;}
.notice-background-orange {background-color:#fbefe0;}
.notice-background-pink {background-color:#fdedf4;}
.notice-background-purple {background-color:#f5ecfe;}
.notice-background-red {background-color:#fce8e8;}
.notice-background-teal {background-color:#e8fcfc;}
.notice-background-yellow {background-color:#fafae0;}

/* forced nightmode */
@media screen {
	/* defined border colors dark */
	html.skin-theme-clientpref-night .notice-border-blue {border-color: #187edc;}
	html.skin-theme-clientpref-night .notice-border-gray {border-color:#949494;}
	html.skin-theme-clientpref-night .notice-border-green {border-color: #66b814;}
	html.skin-theme-clientpref-night .notice-border-maroon {border-color: #9c2b1c;}
	html.skin-theme-clientpref-night .notice-border-orange {border-color: #dc7e18;}
	html.skin-theme-clientpref-night .notice-border-pink {border-color: #ec5194;}
	html.skin-theme-clientpref-night .notice-border-purple {border-color: #8800f0;}
	html.skin-theme-clientpref-night .notice-border-red {border-color: #cb1a1a;}
	html.skin-theme-clientpref-night .notice-border-teal {border-color: #13aeae;}
	html.skin-theme-clientpref-night .notice-border-yellow {border-color: #d0d00b;}
	
	/* defined background colors dark */
	html.skin-theme-clientpref-night .notice-background-blue {background-color:#0b293c;}
	html.skin-theme-clientpref-night .notice-background-gray {background-color:#252728;}
	html.skin-theme-clientpref-night .notice-background-green {background-color:#1c2c0c;}
	html.skin-theme-clientpref-night .notice-background-maroon {background-color:#301613;}
	html.skin-theme-clientpref-night .notice-background-orange {background-color:#332210;}
	html.skin-theme-clientpref-night .notice-background-pink {background-color:#390e20;}
	html.skin-theme-clientpref-night .notice-background-purple {background-color:#29103c;}
	html.skin-theme-clientpref-night .notice-background-red {background-color:#381012;}
	html.skin-theme-clientpref-night .notice-background-teal {background-color:#132b2b;}
	html.skin-theme-clientpref-night .notice-background-yellow {background-color:#28280b;}
}

/* automatic mode */
@media screen and (prefers-color-scheme: dark) {
	/* defined border colors dark */
	html.skin-theme-clientpref-os .notice-border-blue {border-color: #187edc;}
	html.skin-theme-clientpref-os .notice-border-gray {border-color:#949494;}
	html.skin-theme-clientpref-os .notice-border-green {border-color: #66b814;}
	html.skin-theme-clientpref-os .notice-border-maroon {border-color: #9c2b1c;}
	html.skin-theme-clientpref-os .notice-border-orange {border-color: #dc7e18;}
	html.skin-theme-clientpref-os .notice-border-pink {border-color: #ec5194;}
	html.skin-theme-clientpref-os .notice-border-purple {border-color: #8800f0;}
	html.skin-theme-clientpref-os .notice-border-red {border-color: #cb1a1a;}
	html.skin-theme-clientpref-os .notice-border-teal {border-color: #13aeae;}
	html.skin-theme-clientpref-os .notice-border-yellow {border-color: #d0d00b;}
	
	/* defined background colors dark */
	html.skin-theme-clientpref-os .notice-background-blue {background-color:#0b293c;}
	html.skin-theme-clientpref-os .notice-background-gray {background-color:#252728;}
	html.skin-theme-clientpref-os .notice-background-green {background-color:#1c2c0c;}
	html.skin-theme-clientpref-os .notice-background-maroon {background-color:#301613;}
	html.skin-theme-clientpref-os .notice-background-orange {background-color:#332210;}
	html.skin-theme-clientpref-os .notice-background-pink {background-color:#390e20;}
	html.skin-theme-clientpref-os .notice-background-purple {background-color:#29103c;}
	html.skin-theme-clientpref-os .notice-background-red {background-color:#381012;}
	html.skin-theme-clientpref-os .notice-background-teal {background-color:#132b2b;}
	html.skin-theme-clientpref-os .notice-background-yellow {background-color:#28280b;}
}

/* END styles Notice */