Template:RichiestaCU/styles.css

/* {{Protetta}} */

.cu-request {
	background: #ffdead;
	border: 3px solid #ffdead;
	margin: .5em 0;
	width: 99%;
}

.cu-request > div + div {
	background: #f0fff0;
}

.cu-request-block {
	display: flex;
}

.cu-request-block + .cu-request-block {
	border-top: 1px solid black;
}

.cu-request > .cu-request-block {
	justify-content: space-between;
}

.cu-request-users > .cu-request-block {
	align-items: center;
	margin: 0 .4em;
	padding: .4em 0;
}

.cu-request-symbol {
	flex: 0 0 130px;
	font-weight: bold;
}

.cu-request-list {
	flex-grow: 1;
	line-height: 1.8em;
}

.cu-request-users-heading {
	border-bottom: 1px solid black;
	font-weight: bold;
	padding: .4em 0;
	text-align: center;
}

.cu-request-reason,
.cu-request-result {
	padding: .6em .4em;
}

.cu-request-reason {
	border-bottom: 3px solid #ffdead;
}

.cu-request-date {
	border-left: 1px solid black;
	flex-basis: 10%;
	font-size: smaller;
}

.cu-request-by,
.cu-request-date {
	font-weight: bold;
	padding: .4em;
}

.cu-request-links,
.cu-request-text {
	align-self: center;
	padding: .4em;
}

.cu-request-by + .cu-request-date {
	text-align: center;
}

@media all and ( min-width: 900px ) {
	.cu-request-text {
		flex-basis: 55%;
	}

	.cu-request-users {
		border-right: 1px solid black;
		flex-basis: 45%;
	}
}

@media all and ( max-width: 899px ) {
	.cu-request > .cu-request-block:nth-child(2) {
		flex-wrap: wrap;
	}

	.cu-request-text,
	.cu-request-users {
		flex-basis: 100%;
	}

	.cu-request-text {
		border-top: 1px solid black;
	}
}

@media all and ( max-width: 599px ) {
	.cu-request-users > .cu-request-block {
		flex-wrap: wrap;
	}

	.cu-request-list,
	.cu-request-symbol {
		flex-basis: 100%;
	}

	.cu-request-symbol {
		text-align: center;
	}
}
/* Compatibilità dark mode */
@media screen {
	html.skin-theme-clientpref-night .cu-request{
		background-color: var(--background-color-neutral-subtle, #f8f9fa);
		color: var(--color-base, #202122);
		border: 3px solid var(--border-color-base, #a2a9b1);
	}
	html.skin-theme-clientpref-night .cu-request > div + div {
		 background-color: var( --background-color-base, #fff );
		 color: var(--color-base, #202122);
	}
	html.skin-theme-clientpref-night .cu-request-date {
		border-left-color: var(--border-color-base, #a2a9b1);
	}
	html.skin-theme-clientpref-night .cu-request-users-heading,
	html.skin-theme-clientpref-night .cu-request-reason {
		border-bottom-color: var(--border-color-base, #a2a9b1);
	}
	html.skin-theme-clientpref-night .cu-request-users {
		border-right-color: var(--border-color-base, #a2a9b1);
	}
	html.skin-theme-clientpref-night .cu-request-block + .cu-request-block {
		border-top-color: var(--border-color-base, #a2a9b1);
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .cu-request {
		background-color: var(--background-color-neutral-subtle, #f8f9fa);
		color: var(--color-base, #202122);
		border: 3px solid var(--border-color-base, #a2a9b1);
	}
	html.skin-theme-clientpref-os .cu-request > div + div {
		  background-color: var( --background-color-base, #fff );
		  color: var(--color-base, #202122);
	}
	html.skin-theme-clientpref-os .cu-request-date {
		border-left-color: var(--border-color-base, #a2a9b1);
	}
	html.skin-theme-clientpref-os .cu-request-users-heading,
	html.skin-theme-clientpref-os .cu-request-reason {
		border-bottom-color: var(--border-color-base, #a2a9b1);
	}
	html.skin-theme-clientpref-os .cu-request-users {
		border-right-color: var(--border-color-base, #a2a9b1);
	}
	html.skin-theme-clientpref-os .cu-request-block + .cu-request-block {
		border-top-color: var(--border-color-base, #a2a9b1);
	}
}