Template:RichiestaCU/Sandbox/styles.css

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

.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;
	}
}

@media screen {
	html.skin-theme-clientpref-night .cu-request {
		background-color: var(--background-color-neutral);
	}
	
	html.skin-theme-clientpref-night .cu-request > div + div {
		background-color: var(--background-color-neutral-subtle);
	}

	html.skin-theme-clientpref-night .cu-request-block + .cu-request-block {
		border-top: 1px solid var(--border-color-subtle);
	}
	html.skin-theme-clientpref-night .cu-request-users-heading {
		border-bottom: 1px solid var(--border-color-subtle);
	}
	html.skin-theme-clientpref-night .cu-request-date {
		border-left: 1px solid var(--border-color-subtle);
	}
	@media all and ( min-width: 900px ) {
		html.skin-theme-clientpref-night .cu-request-users {
			border-right: 1px solid var(--border-color-subtle);
		}
	}
	@media all and ( max-width: 899px ) {
		html.skin-theme-clientpref-night .cu-request-text {
			border-top: 1px solid var(--border-color-subtle);
		}
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .cu-request {
		background-color: var(--background-color-neutral);
	}
	
	html.skin-theme-clientpref-os .cu-request > div + div {
		background-color: var(--background-color-neutral-subtle);
	}

	html.skin-theme-clientpref-os .cu-request-block + .cu-request-block {
		border-top: 1px solid var(--border-color-subtle);
	}
	html.skin-theme-clientpref-os .cu-request-users-heading {
		border-bottom: 1px solid var(--border-color-subtle);
	}
	html.skin-theme-clientpref-os .cu-request-date {
		border-left: 1px solid var(--border-color-subtle);
	}
	@media all and ( min-width: 900px ) {
		html.skin-theme-clientpref-os .cu-request-users {
			border-right: 1px solid var(--border-color-subtle);
		}
	}
	@media all and ( max-width: 899px ) {
		html.skin-theme-clientpref-os .cu-request-text {
			border-top: 1px solid var(--border-color-subtle);
		}
	}
}