FrankerFaceZ/styles/widgets.scss

@import "./widgets/container.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/color-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--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-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--changelog {
	ul, p {
		margin-bottom: 1rem;
	}

	code {
		padding: 2px 5px;
		border-radius: 2px;
		background-color: rgba(0,0,0,0.1);

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