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/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";


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

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

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

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

	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 #7d5bbe,
				0 0 6px -2px #7d5bbe !important;
		}

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

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

	.ffz--profile {
		.ffz-i-ok { color: green }
	}

	.sortable-ghost {
		opacity: 0.25
	}
}


.ffz--filter-editor {
	.ffz--rule {
		outline: none;

		&:focus {
			box-shadow:
				inset 0 0 0 1px #7d5bbe,
				0 0 6px -2px #7d5bbe !important;
		}

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

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

		.ffz-i-ok { color: green }
	}

	.sortable-ghost {
		opacity: 0.25
	}
}


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

	code {
		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, $text, $shadow) {
	&:hover, &:focus {
		background: $color !important;
		border-color: $color !important;
		color: $text !important;
	}

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

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

.ffz--button-enable {
	@include button-colors(#007600, #fff, 6px);
}

.ffz--button-disable {
	@include button-colors(#bd0f0f, #fff, 6px);
}