Add the new variable `FileProcessorFormField::$bigPreview` with getter and setter.

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / ui / notification.scss

.notificationSettings {
	margin-top: 30px;
}

.notificationSettingsCategory,
.notificationSettingsItem {
	display: flex;
}

.notificationSettingsCategory {
	border-bottom: 2px solid currentColor;
	color: var(--wcfTabularBoxHeadline);
	font-weight: 600;
	padding: 5px 0;
}

.notificationSettingsItem {
	align-items: center;
	padding: 5px 0;
}

.notificationSettingsItem:not(:last-child) {
	border-bottom: 1px solid var(--wcfContentBorderInner);
}

.notificationSettingsEvent {
	flex: 1 auto;

	> label {
		cursor: pointer;
		display: block;
	}
}

.notificationSettingsEvent:hover + .notificationSettingsState,
.notificationSettingsState > label:hover {
	fa-icon {
		transform: scale(1.2);
	}
}

.notificationSettingsState {
	align-items: center;
	display: flex;
	flex: 0 0 34px;
	justify-content: center;

	@include screen-sm-up {
		margin: 0 20px;
	}

	@include screen-xs {
		margin: 0 10px;
	}

	label {
		cursor: pointer;
	}

	input[type="checkbox"] {
		opacity: 0;
		position: absolute;
		z-index: -1;

		&:focus-visible ~ .icon {
			transform: scale(1.2);
		}

		&:not(:checked) + fa-icon[name="bell"] {
			display: none;
		}

		&:checked ~ fa-icon[name="bell-slash"] {
			display: none;
		}
	}

	fa-icon[name="bell"] {
		color: rgba(0, 153, 0, 1);
	}

	fa-icon[name="bell-slash"] {
		color: rgba(204, 0, 0, 1);
	}
}

.notificationSettingsEmail {
	align-items: center;
	display: flex;
	flex: 0 0 50px;
	justify-content: flex-end;
}
.notificationSettingsEmailType {
	align-items: center;
	display: flex;

	&.disabled fa-icon {
		color: var(--wcfContentDimmedText) !important;
	}

	fa-icon[name="xmark"] {
		color: rgba(204, 0, 0, 1);
	}

	fa-icon[name="bolt"],
	fa-icon[name="clock"] {
		color: rgba(0, 153, 0, 1);
	}
}