FrankerFaceZ/styles/widgets.scss

@import "./widgets/container.scss";

@import "./widgets/main-menu.scss";
@import "./widgets/menu-container.scss";
@import "./widgets/tab-container.scss";

@import "./widgets/key-picker.scss";
@import "./widgets/menu-tree.scss";
@import "./widgets/profile-selector.scss";
@import "./widgets/badge-visibility.scss";
@import "./widgets/add-ons.scss";

@import "./widgets/color-picker.scss";
@import "./widgets/icon-picker.scss";

@import "./widgets/check-box.scss";

.tw-display-inline { display: inline !important }
.tw-width-auto { width: auto !important }

.ffz--notice {
	a {
		color: var(--color-text-overlay-link);

		&:hover, &:hover:focus {
			color: var(--color-text-overlay-link-hover);
		}

		&:focus {
			color: var(--color-text-overlay-link-focus);
		}
	}
}

.ffz-unmatched-item { opacity: 0.25 }
.ffz-monospace { font-family: monospace }
.ffz-bottom-100 { bottom: 100% }

.ffz--badge-term-image {
	height: 3.6rem;
	width: 3.6rem;
}

.ffz--autocomplete {
	.scrollable-area {
		max-height: 20rem;
	}
}

.ffz-radio-top {
	.ffz-radio__input:checked+.ffz-radio__label:after,
	.ffz-radio__label:before {
		top: 1rem;
	}
}

.ffz--i18n-entry {
	&:nth-child(2n+1) {
		background-color: var(--color-background-alt-2);
	}

	.ffz--i18n-sub-entry {
		width: 33%;
	}

	textarea {
		min-height: 100%;
	}

	code {
		white-space: pre-wrap;
	}
}

textarea.ffz-input {
	height: unset;
}

.ffz--widget {
	.tw-pill {
		border-radius: 1000px;
		padding: 0.3rem 0.8em;
		font-size: 75%;
		background-color: var(--color-background-pill);
		color: var(--color-text-overlay);
		white-space: nowrap;
	}

	input, select {
		min-width: 20rem;
	}

	label {
		min-width: 15rem;
	}
}

.ffz--link-tester {
	code {
		tab-size: 4;
	}

	label {
		min-width: 15rem;
	}
}


.ffz-min-width-unset {
	min-width: unset !important;
}


.ffz--color-widget input,
.ffz--inline label {
	min-width: unset;
}

.ffz--reset-button {
	height: 2.6rem;

	.tw-button__text {
		padding: 0.1rem 0.4rem !important;
	}
}


.ffz-color-preview {
	margin: 1px;

	figure.ffz-i-eyedropper {
		opacity: 0.5;
	}

	&:hover, &:focus {
		figure {
			opacity: 1
		}
	}

	figure {
		width: 3rem;
		margin: .4rem;
		text-align: center;

		height: calc(100% - .8rem);
	}
}


.ffz--menu-page {
	padding: 1rem;

	header {
		a {
			font-weight: bold;
			color: inherit !important;
		}
	}
}


.ffz--profile-editor {
	.tw-button:disabled:not(:hover):not(:focus) {
		opacity: 0.5;
	}

	label {
		width: 10rem;
	}
}


.ffz--chat-actions,
.ffz--profile-manager {
	.ffz--action,
	.ffz--profile {
		outline: none;

		&:focus {
			box-shadow:
				inset 0 0 0 1px var(--ffz-color-accent-8),
				0 0 6px -2px var(--ffz-color-accent-8) !important;
		}

		.handle {
			opacity: 0.3;
			margin: -0.5rem 0;
			font-size: 2rem;
		}

		.ffz--profile__icon {
			font-size: 2rem;
		}
	}

	.sortable-ghost {
		opacity: 0.25
	}
}

.ffz--profile-row__icon,
.ffz--profile__icon {
	&.ffz-i-ok,
	.ffz-i-ok {
		color: var(--color-green-darker);
	}

	&.ffz-i-minus,
	.ffz-i-minus {
		color: var(--color-text-alt-2);
	}

	&.ffz-i-cancel,
	.ffz-i-cancel {
		color: var(--color-red);
	}
}


.ffz--filter-editor {
	label {
		width: auto;
		min-width: unset;
	}

	.ffz--rule {
		outline: none;

		&:focus {
			box-shadow:
				inset 0 0 0 1px var(--ffz-color-accent-8),
				0 0 6px -2px var(--ffz-color-accent-8) !important;
		}

		.handle {
			opacity: 0.3;
			margin: -0.5rem 0;
			font-size: 2rem;
		}

		.ffz--filter__icon {
			font-size: 2rem;
		}

		.ffz-i-ok { color: var(--color-green) }
	}

	.sortable-ghost {
		opacity: 0.25
	}
}


.ffz--cursor {
	cursor: pointer;
}


.ffz--home {
	h2, p {
		margin-bottom: 1rem;
	}

	ul {
		list-style-type: disc;
		margin: 1em 0;
	}

	.tweet-column {
		width: 300px;
	}
}

.ffz--discord-button {
	border: 0 !important;
	background-color: #7289DA !important;
	color: #fff !important;

	> * {
		pointer-events: none;
	}

	&:hover, &:focus {
		background-color: #546bbf !important;
	}
}

.ffz--ffz-button {
	border: 0 !important;
	background-color: #463954 !important;
	color: #fff !important;

	> * {
		pointer-events: none;
	}

	&:hover, &:focus {
		background-color: #594370 !important;
	}
}

.ffz--twitter-button {
	border: 0 !important;
	background-color: #1da1f2 !important;
	color: #fff !important;

	> * {
		pointer-events: none;
	}

	&:hover, &:focus {
		background-color: #2b96d9 !important;
	}
}


.ffz--changelog {
	ul, p {
		margin-bottom: 1rem;
	}

	p {
		white-space: pre-line;
	}
}

.ffz--clear-settings code,
.ffz--experiments code {
	user-select: none;
	padding: 2px 5px;
	border-radius: 2px;
	background-color: rgba(0,0,0,0.2);
	font-family: monospace;
	white-space: pre;

	.tw-root--theme-dark & {
		background-color:rgba(255,255,255,0.1);
	}
}

.ffz--clear-settings code {
	font-size: 1.2em;
}

.ffz--changelog,
.ffz--widget {
	code {
		user-select: all;
		padding: 2px 5px;
		border-radius: 2px;
		background-color: rgba(0,0,0,0.1);

		.tw-root--theme-dark & {
			background-color: rgba(255,255,255,0.05);
		}
	}
}

@mixin button-colors($color, $border, $text, $shadow) {
	&:hover, &:focus, &:active {
		background: $color !important;
		border-color: $border !important;
		color: $text !important;
	}

	&:focus, &:active {
		box-shadow: 0 0 $shadow $color !important;
	}
}

.ffz--pill-enabled {
	background-color: #007600 !important;
	color: #fff !important;
}

.ffz-button--hollow {
	border-color: #dad8de !important;
	background-color: transparent !important;
	color: #000 !important;

	@include button-colors(
		var(--color-background-button-hover),
		var(--color-border-button-hover),
		var(--color-text-button-hover),
		var(--color-border-button-hover)
	);

	.tw-root--theme-dark & {
		border-color: #424242 !important;
		color: #dadada !important;

		//@include button-colors(#7d5bbe, #9a7fcc, #eeeeee, #7d5bbe)
	}
}

.ffz--button-enable,
.ffz--button-disable {
	border-color: #dad8de !important;
	background-color: transparent !important;
	color: #000 !important;

	.tw-root--theme-dark & {
		border-color: #424242 !important;
		color: #dadada !important;
	}
}

.ffz--button-enable {
	&, .tw-root--theme-dark & {
		@include button-colors(#007600, #007600, #fff, 6px);
	}
}

.ffz--button-disable {
	&, .tw-root--theme-dark & {
		@include button-colors(#bd0f0f, #bd0f0f, #fff, 6px);
	}
}

.ffz--example-report {
	div {
		max-height: 30rem;
		overflow-y: auto;

		code {
			font-family: monospace;
			white-space: pre-wrap;
			word-break: break-all;
		}
	}
}

.ffz-override-editor {
	label {
		min-width: 5rem;
	}

	.ffz--color-widget {
		flex-grow: 1;
	}
}

.ffz--report-upload {
	z-index: 1;
	position: absolute;
	top: 1rem;
	right: 3rem;
}


.ffz-mh-30 {
	max-height: 30rem;
}