src_front/less/index.less
@import "_includes.less";
@import "fonts.less";
@import "reset.less";
@import "form.less";
@import "sidePanel.less";
@import "gameState.less";
@import "card.less";
@import "modal.less";
@import "parameterContent.less";
@import "blured-background-window.less";
@import "chatMessage.less";
@import "triggerAction.less";
@import "cssStructure.less";
@import "overlayParamsSection.less";
@import "blinkHighlight.less";

:root {
	@color-dark: #18181b;
	@color-light: #EEEEEE;
	@color-primary: #008667;
	@color-button: #57575c;
	@color-secondary: #e04e00;
	@color-alert: #b71f1f;
	@color-premium: #c400da;
	@color-text: #eee;
	@color-text-inverse: #000;
	@color-chatMessage: #f0f0f0;
	@color-twitch: #9147ff;

	--vh: 100vh;//Overridden via JS on App.vue
	--vw: 100vw;//Overridden for demoMode
	--chat-form-height: 40px;//Overridden via JS on Chat.vue
	
	--font-inter: "Inter";
	--font-nunito: "Nunito";
	--font-roboto: "Roboto";
	--font-azeret: "Azeret";

	--box-shadow: 0 0 4px 2px rgba(0, 0, 0, .5);

	--background-color-primary: #18181b;
	--background-color-secondary: #303036;
	--background-color-fade: rgba(255,255,255,.5);
	--background-color-fader: rgba(255,255,255,.15);
	--background-color-fadest: rgba(255,255,255,.05);
	--background-color-transparent: rgba(255,255,255,0);

	--grayout: fade(@color-dark, 70%);
	--grayout-fader: fade(@color-dark, 50%);
	--grayout-fadest: fade(@color-dark, 30%);

	--toggle-block-header-background: @color-button;
	--toggle-block-header-background-hover: lighten(@color-button, 10%);

	--splitter-color: rgba(255,255,255,.2);

	--text-shadow-contrast: 1px 1px 0 rgba(0,0,0,.7);

	--color-light: @color-light;
	--color-dark: @color-dark;
	--color-primary: @color-primary;
	--color-twitch: @color-twitch;
	--color-button: @color-button;
	--color-secondary: @color-secondary;
	--color-alert: @color-alert;
	--color-premium: @color-premium;
	--color-chat-message: @color-chatMessage;
	--color-text: @color-text;
	--color-text-light: #fff;
	--color-text-inverse: @color-text-inverse;
	
	--color-light-transparent: fade(@color-light, 0%);
	--color-dark-transparent: fade(@color-dark, 0%);
	--color-primary-transparent: fade(@color-primary, 0%);
	--color-twitch-transparent: fade(@color-twitch, 0%);
	--color-secondary-transparent: fade(@color-secondary, 0%);
	--color-alert-transparent: fade(@color-alert, 0%);
	--color-premium-transparent: fade(@color-premium, 0%);
	
	--color-light-fade: fade(@color-light, 30%);
	--color-dark-fade: fade(@color-dark, 80%);
	--color-primary-fade: fade(@color-primary, 70%);
	--color-twitch-fade: fade(@color-twitch, 70%);
	--color-secondary-fade: fade(@color-secondary, 70%);
	--color-alert-fade: fade(@color-alert, 70%);
	--color-premium-fade: fade(@color-premium, 70%);
	--color-text-fade: fade(@color-text, 50%);
	--color-text-inverse-fade: fade(@color-text-inverse, 50%);
	
	--color-light-fader: fade(@color-light, 10%);
	--color-dark-fader: fade(@color-dark, 40%);
	--color-primary-fader: fade(@color-primary, 40%);
	--color-twitch-fader: fade(@color-twitch, 40%);
	--color-secondary-fader: fade(@color-secondary, 40%);
	--color-alert-fader: fade(@color-alert, 40%);
	--color-premium-fader: fade(@color-premium, 40%);
	--color-text-fader: fade(@color-text, 30%);
	--color-text-inverse-fader: fade(@color-text-inverse, 30%);
	
	--color-light-fadest: fade(@color-light, 5%);
	--color-dark-fadest: fade(@color-dark, 15%);
	--color-primary-fadest: fade(@color-primary, 15%);
	--color-twitch-fadest: fade(@color-twitch, 15%);
	--color-secondary-fadest: fade(@color-secondary, 15%);
	--color-alert-fadest: fade(@color-alert, 20%);
	--color-premium-fadest: fade(@color-premium, 20%);
	--color-text-fadest: fade(@color-text, 10%);
	--color-text-inverse-fadest: fade(@color-text-inverse, 10%);
	
	--color-light-light: lighten(@color-light, 10%);
	--color-dark-light: lighten(@color-dark, 10%);
	--color-primary-light: lighten(@color-primary, 8%);
	--color-twitch-light: lighten(@color-twitch, 8%);
	--color-button-light: lighten(@color-button, 10%);
	--color-secondary-light: lighten(@color-secondary, 13%);
	--color-alert-light: lighten(@color-alert, 10%);
	--color-premium-light: lighten(@color-premium, 10%);
	
	--color-light-extralight: lighten(@color-light, 30%);
	--color-dark-extralight: lighten(@color-dark, 30%);
	--color-primary-extralight: saturate(lighten(@color-primary, 15%), 100%);
	--color-twitch-extralight: saturate(lighten(@color-twitch, 15%), 100%);
	--color-button-extralight: lighten(@color-button, 20%);
	--color-secondary-extralight: saturate(lighten(@color-secondary, 30%), 100%);
	--color-alert-extralight: saturate(lighten(@color-alert, 30%), 100%);
	--color-premium-extralight: saturate(lighten(@color-premium, 30%), 100%);
	
	--color-light-dark: darken(@color-light, 10%);
	--color-dark-dark: darken(@color-dark, 10%);
	--color-primary-dark: darken(@color-primary, 5%);
	--color-twitch-dark: darken(@color-twitch, 5%);
	--color-button-dark: darken(@color-button, 5%);
	--color-secondary-dark: darken(@color-secondary, 15%);
	--color-alert-dark: darken(@color-alert, 10%);
	--color-premium-dark: darken(@color-premium, 10%);

	--border-radius:.5rem;
	
	--highlight-suspicious: #ff8280;
	--highlight-1st: #ff75e6;
	--highlight-subs: #528bff;
	--highlight-vips: #db00b3;
	--highlight-mods: #00a865;
	--highlight-partners: #9147ff;
	--highlight-mention: #adadb8;
	--highlight-raider: #f5f500;
}

body.light {
	@color-dark: #18181b;
	@color-light: #FFFFFF;
	@color-primary: #039372;
	@color-button: #d6d6d6;
	@color-secondary: #e04e00;
	@color-alert: #b71f1f;
	@color-premium: #c400da;
	@color-text: #101010;
	@color-text-inverse: #eee;
	@color-chatMessage: #101010;
	@color-twitch: #9147ff;

	--box-shadow: 0 0 10px 1px rgba(0, 0, 0, .5);

	--background-color-primary: #ffffff;
	--background-color-secondary: #eeeeee;
	--background-color-fade: rgba(0,0,0,.5);
	--background-color-fader: rgba(0,0,0,.15);
	--background-color-fadest: rgba(0,0,0,.075);
	--background-color-transparent: rgba(0,0,0,0);

	--grayout: fade(@color-light, 70%);
	--grayout-fader: fade(@color-light, 50%);
	--grayout-fadest: fade(@color-light, 30%);

	--toggle-block-header-background: @color-button;
	--toggle-block-header-background-hover: lighten(@color-button, 10%);

	--splitter-color: rgba(0,0,0,.2);

	--text-shadow-contrast: 1px 1px 0 rgba(255,255,255,.1);

	--color-light: @color-light;
	--color-dark: @color-dark;
	--color-primary: @color-primary;
	--color-twitch: @color-twitch;
	--color-button: @color-button;
	--color-secondary: @color-secondary;
	--color-alert: @color-alert;
	--color-chat-message: @color-chatMessage;
	--color-text: @color-text;
	--color-text-fade: fade(@color-text, 30%);
	--color-text-inverse: @color-text-inverse;
	
	--color-light-transparent: fade(@color-light, 0%);
	--color-dark-transparent: fade(@color-dark, 0%);
	--color-primary-transparent: fade(@color-primary, 0%);
	--color-twitch-transparent: fade(@color-twitch, 0%);
	--color-secondary-transparent: fade(@color-secondary, 0%);
	--color-alert-transparent: fade(@color-alert, 0%);
	
	--color-light-fade: fade(@color-light, 30%);
	--color-dark-fade: fade(@color-dark, 80%);
	--color-primary-fade: fade(@color-primary, 70%);
	--color-twitch-fade: fade(@color-twitch, 70%);
	--color-secondary-fade: fade(@color-secondary, 70%);
	--color-alert-fade: fade(@color-alert, 70%);
	--color-text-fade: fade(@color-text, 50%);
	--color-text-inverse-fade: fade(@color-text-inverse, 50%);
	
	--color-light-fader: fade(@color-light, 10%);
	--color-dark-fader: fade(@color-dark, 40%);
	--color-primary-fader: fade(@color-primary, 40%);
	--color-twitch-fader: fade(@color-twitch, 40%);
	--color-secondary-fader: fade(@color-secondary, 40%);
	--color-alert-fader: fade(@color-alert, 40%);
	--color-text-fader: fade(@color-text, 30%);
	--color-text-inverse-fader: fade(@color-text-inverse, 30%);
	
	--color-light-fadest: fade(@color-light, 5%);
	--color-dark-fadest: fade(@color-dark, 10%);
	--color-primary-fadest: fade(@color-primary, 10%);
	--color-twitch-fadest: fade(@color-twitch, 10%);
	--color-secondary-fadest: fade(@color-secondary, 10%);
	--color-alert-fadest: fade(@color-alert, 20%);
	--color-text-fadest: fade(@color-text, 10%);
	--color-text-inverse-fadest: fade(@color-text-inverse, 10%);
	
	--color-light-light: lighten(@color-light, 10%);
	--color-dark-light: lighten(@color-dark, 10%);
	--color-primary-light: lighten(@color-primary, 8%);
	--color-twitch-light: lighten(@color-twitch, 8%);
	--color-button-light: lighten(@color-button, 10%);
	--color-secondary-light: lighten(@color-secondary, 13%);
	--color-alert-light: lighten(@color-alert, 10%);
	
	--color-light-extralight: lighten(@color-light, 30%);
	--color-dark-extralight: lighten(@color-dark, 30%);
	--color-primary-extralight: saturate(lighten(@color-primary, 15%), 100%);
	--color-twitch-extralight: saturate(lighten(@color-twitch, 15%), 100%);
	--color-button-extralight: lighten(@color-button, 20%);
	--color-secondary-extralight: saturate(lighten(@color-secondary, 30%), 100%);
	--color-alert-extralight: saturate(lighten(@color-alert, 30%), 100%);
	
	--color-light-dark: darken(@color-light, 10%);
	--color-dark-dark: darken(@color-dark, 10%);
	--color-primary-dark: darken(@color-primary, 15%);
	--color-twitch-dark: darken(@color-twitch, 15%);
	--color-button-dark: darken(@color-button, 5%);
	--color-secondary-dark: darken(@color-secondary, 15%);
	--color-alert-dark: darken(@color-alert, 10%);

	--border-radius:.5rem;
	
	--highlight-suspicious: #ff8280;
	--highlight-1st: #ff75e6;
	--highlight-subs: #528bff;
	--highlight-vips: #db00b3;
	--highlight-mods: #00a865;
	--highlight-partners: #9147ff;
	--highlight-mention: #adadb8;
	--highlight-raider: #f5f500;
}

body.dark {
	font-weight:250;
}

body, html {
	padding: 0;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: var(--font-inter), Helvetica, Arial, sans-serif;
	min-width: 100%;
	min-height: var(--vh);
    min-height: -moz-available;
	min-height: -webkit-fill-available;
	min-height: fill-available;
}

body.demoMode {
	// --vw: 320px;
	* {
		cursor: none !important;
	}
}

pre {
	font-family: var(--font-inter), Helvetica, Arial, sans-serif;
}

*:focus:not(:focus-visible) {
	outline: none;
}

a {
	// text-decoration: none;
	font-weight: normal;
	color: var(--color-secondary-light);
	cursor: pointer;
	&:hover {
		color: var(--color-secondary-extralight);
	}
}

.copyBt {
	height: 1em;
	margin-right: .25em;
	vertical-align: middle;
	cursor: pointer;
}

.demoLink {
	.demo {
		.emboss();
		margin:auto;
		display: block;
		max-height: 100px;
		aspect-ratio: 16 / 9;
		border-radius: .5em;
	}
}

strong {
	font-weight: bold;
}

h1 {
	font-size: 1.5em;
}

.voiceFocus {
	border: 2px solid var(--color-secondary);
}

.errorCard {
	color: var(--color-light);
	padding: 5px 10px;
	border-radius: 5px;
	text-align: center;
	background-color: var(--color-alert);
}

mark {
	font-weight: bold;
	background-color: var(--background-color-fader);
	padding: .1em .25em;
	border-radius: var(--border-radius);
	&.primary {
		background-color: var(--color-primary);
	}
	&.secondary {
		background-color: var(--color-secondary);
	}
}

.home-gradient-bg {
	background: linear-gradient(180deg, var(--color-primary-fader) 0%, transparent 100%);
	background-size: 100% 100vh;
	background-repeat: no-repeat;
	background-position: top center;
	width: 100%;
	height: 100vh;
	position: absolute;
	top:0;
	left:0;
}
	
.quote {
	font-style: italic;
	word-break: break-word;
	display: block;
	color: var(--color-text);
	line-height: 1.2em;
	border-radius: var(--border-radius);
	border-left: 2px solid var(--background-color-fader);
	background-image: linear-gradient(90deg, var(--background-color-fadest), var(--background-color-transparent));
	padding: .5em;
	&.primary {
		border-left-color: var(--color-primary-fade);
		background-image: linear-gradient(90deg, var(--color-primary-fadest), var(--background-color-transparent));
	}
	&.secondary {
		border-left-color: var(--color-secondary-fade);
		background-image: linear-gradient(90deg, var(--color-secondary-fadest), var(--background-color-transparent));
	}
}

.youtubeTutorialBt {
	padding: .5em;
	gap: .5em;
	display: flex;
	flex-direction: row;
	color: var(--color-light) !important;
	text-decoration: none;
	background-color: #cc0000;
	border-radius: var(--border-radius);
	margin: 0 auto;
	align-items: center;
	transition: background-color .25s;
	.icon {
		height: 1em;
		min-height: 20px;
		width: auto;
	}
	&:hover {
		background-color: #ee0000;
	}
}

.tippy-box[data-theme~='twitchat'] {
	@color: var(--color-secondary);
	color:var(--color-text-light);
    background-color: @color;
	font-size: 1rem;
	word-wrap: break-word;
	white-space: pre-line;
	&[data-placement^='top']  > .tippy-arrow::before {
		border-top-color: @color;
	}
	&[data-placement^='left']  > .tippy-arrow::before {
		border-left-color: @color;
	}
	&[data-placement^='bottom']  > .tippy-arrow::before {
		border-bottom-color: @color;
	}
	&[data-placement^='right']  > .tippy-arrow::before {
		border-right-color: @color;
	}
}

.tippy-box[data-theme~='light'] {
	@color: var(--color-light);
	color:var(--color-text-light);
    background-color: @color;
	font-size: 1rem;
	word-wrap: break-word;
	white-space: pre-line;
	&[data-placement^='top']  > .tippy-arrow::before {
		border-top-color: @color;
	}
	&[data-placement^='left']  > .tippy-arrow::before {
		border-left-color: @color;
	}
	&[data-placement^='bottom']  > .tippy-arrow::before {
		border-bottom-color: @color;
	}
	&[data-placement^='right']  > .tippy-arrow::before {
		border-right-color: @color;
	}
}

.tippy-box[data-theme~='dark'] {
	@color: var(--color-dark);
	color:var(--color-text-light);
    background-color: @color;
	font-size: 1rem;
	word-wrap: break-word;
	white-space: pre-line;
	&[data-placement^='top']  > .tippy-arrow::before {
		border-top-color: @color;
	}
	&[data-placement^='left']  > .tippy-arrow::before {
		border-left-color: @color;
	}
	&[data-placement^='bottom']  > .tippy-arrow::before {
		border-bottom-color: @color;
	}
	&[data-placement^='right']  > .tippy-arrow::before {
		border-right-color: @color;
	}
}

.tippy-box[data-theme~='alert'] {
	@color: var(--color-alert);
	color:var(--color-text-light);
    background-color: @color;
	font-size: 1rem;
	word-wrap: break-word;
	white-space: pre-line;
	&[data-placement^='top']  > .tippy-arrow::before {
		border-top-color: @color;
	}
	&[data-placement^='left']  > .tippy-arrow::before {
		border-left-color: @color;
	}
	&[data-placement^='bottom']  > .tippy-arrow::before {
		border-bottom-color: @color;
	}
	&[data-placement^='right']  > .tippy-arrow::before {
		border-right-color: @color;
	}
}

.newFlag {
	position: relative;
	border: 1px solid var(--color-secondary);
	&::before {
		content: "";
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: var(--color-secondary);
		position: absolute;
		z-index: 100;
		top: 0;
		left: 0;
		transform: translate(0, -50%);
		transition: transform .2s;
		transform-origin: center center;
		filter: drop-shadow(1px 1px 0px rgba(0,0,0,.5));
	}
	&:hover::before {
		transform: translate(0, -50%) scale(1.5);
	}
}

#mx-menu-default-container {
	top: 0;//necessery for shit old safari -_-
	overflow: unset;//necessery for shit old safari -_-
	&.mx-menu-ghost-host{
		overflow: unset;//necessery for shit old safari -_-
		.mx-context-menu {
			padding-top: 0 !important;
			padding-bottom: 0 !important;
			box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 2px 2px;
			// .mx-context-menu-scroll {
			// 	display: none;
			// }
			.mx-context-menu-items {
				cursor: pointer;
				.mx-context-menu-item.alert {
					background-image: linear-gradient(90deg, var(--color-alert-fadest) 0%, rgba(255,0,0,0) 100%);
				}
				.mx-context-menu-item.alert.open,
				.mx-context-menu-item.alert:hover {
					background: var(--color-alert);
				}
				.mx-context-menu-item-wrapper {
					&:first-child {
						position: sticky;
						top: 0;
						z-index: 1000;
					}
					.mx-context-menu-item {
						.label {
							max-width: 180px;
						}
						&:not(.noWrap) .label {
							white-space: normal;
							line-height: 1.2em;
						}
					}
					.mx-context-menu-item.disabled {
						.mx-icon-placeholder {
							opacity: .35;
						}
					}
					.mx-context-menu-item.header {
						color:var(--color-light);
						background: rgba(255,255,255,.2);
						background: var(--color-primary);
						margin: 0;
						border-bottom-left-radius: 0;
						border-bottom-right-radius: 0;
						padding: .5em;
						cursor: default;
						.mx-item-row:nth-child(1) {
							flex-grow: 1;
							.label {
								flex-grow: 1;
								font-size: 1.1em;
								font-weight: bold;
								text-align: center;
							}
						}
					}
				}
			}

			&:not(.dark) {
				.mx-icon-placeholder {
					img {
						filter: invert();
					}
				}
			}
		}
	}
}

*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

*::-webkit-scrollbar-track {
	background: transparent;
	background-color: var(--color-dark-fadest);
}

*::-webkit-scrollbar-thumb {
	border-radius: 20px;
	background-color: var(--color-dark-extralight);
}

body.light {
	a:not(.button, button) {
		color: var(--color-secondary);
		&:hover {
			color: var(--color-secondary-light);
		}
	}
}
.flag {
	width: 52px;
	height: 39px;
	background-size: 52px 39px;

	&.normal-flag {
		@scale: .4;
		transform: scale(@scale) !important;
		margin: ((-39px * (1-@scale)) / 2) ((-52px * (1-@scale)) / 2) !important;
		vertical-align: bottom !important;
		// width: 52px * @scale;
		// height: 39px * @scale;
		// background-size: 52px * @scale 10660px * @scale;
	}

	&.small-flag {
		@scale: .25;
		transform: scale(@scale) !important;
		margin: ((-39px * (1-@scale)) / 2) ((-52px * (1-@scale)) / 2) !important;
		// vertical-align: bottom !important;
		// width: 52px * @scale;
		// height: 39px * @scale;
		// background-size: 52px * @scale 10660px * @scale;
	}
}