theme.scss

// Color system
$white: #f9f9f9;
$black: #22242d;
$red: #ff1654;
$orange: #fb5607;
$yellow: #ffe66d;
$green: #06d6a0;
$blue: #00abe7;
$teal: #7bdff2;
$pink: #ff60b5;
$purple: #c24bea;
$theme-colors: (
	"secondary": $blue,
);

// Window
$window-border: #211f30;
$body-bg: #22242d;
$body-bg2: #0d0e11;
$body-bg3: #363740;
$body-color: $white;
$font-family-sans-serif: "Source Sans Pro";
$font-size-base: 12rem / 16;

// Nav Tabs
$nav-tabs-border-color: $blue;
$nav-tabs-border-width: 1px;
$nav-tabs-border-radius: 0;
$nav-tabs-link-hover-border-color: $white;
$nav-tabs-link-active-color: $white;
$nav-tabs-link-active-bg: $blue;
$nav-tabs-link-active-border-color: darken($blue, 30%);

// Buttons
$button-hover-bg: rgba(255, 255, 255, 0.05);
$button-active-bg: rgba(255, 255, 255, 0.1);
$border-radius: 0;

// Input
$input-bg: #111;
$input-bg-disabled: #333;
$input-color: $body-color;
$input-box-shadow: none !important;
$input-border-radius: 0;
$input-bg-focus: $input-bg;
$input-color-focus: $input-color;
$input-btn-focus-box-shadow: none !important;

// Modal
$modal-content-bg: $body-bg;
$modal-content-border-color: $body-bg2;
$modal-header-border-color: $body-bg2;
$modal-footer-border-color: $body-bg2;

$popover-bg: $body-bg2;

// Dropdown
$dropdown-bg: $body-bg2;
$dropdown-link-color: $body-color;
$dropdown-link-hover-color: #333;
$dropdown-link-hover-bg: $body-bg3;
$dropdown-link-disabled-color: #333;
$dropdown-header-color: #333;

// List Group
$list-group-color: $body-color;
$list-group-bg: rgba(255, 255, 255, 0.05);
$list-group-border-color: rgba(255, 255, 255, 0.1);
$list-group-hover-bg: rgba(255, 255, 255, 0.1);
$list-group-action-hover-color: $white;
$list-group-action-active-color: $white;
$list-group-action-active-bg: $body-bg3;

$pre-bg: $dropdown-bg;
$pre-color: $dropdown-link-color;

// Alerts
$alert-danger-bg: $body-bg2;
$alert-danger-text: $red;
$alert-danger-border: $red;

@import "~bootstrap/scss/bootstrap.scss";

@keyframes topactivity {
	from,
	to {
		border-top: 1px solid transparent;
	}
	50% {
		border-top: 1px solid $yellow;
		color: $yellow;
	}
}

@keyframes bottomactivity {
	from,
	to {
		border-bottom: 1px solid transparent;
	}
	50% {
		border-bottom: 1px solid $yellow;
		color: $yellow;
	}
}

ngb-tabset .tab-content {
	margin-right: 5px !important;
}

[ngbradiogroup] > label.active {
	background: $blue;
}

[_nghost-c7]:active,
[_nghost-c8]:active {
	background: none !important;
}

.active[_nghost-c7] .body[_ngcontent-c7],
.active[_nghost-c8] .body[_ngcontent-c8] {
	border: 2px solid $blue;
}

svg {
	transition: 0.25s fill;
	fill: $white;
}

window-controls {
	.btn:hover {
		background-color: transparent;
	}

	.btn:active svg {
		fill: white !important;
	}

	.btn-minimize:hover svg {
		fill: $yellow;
	}

	.btn-maximize:hover svg {
		fill: $green;
	}

	.btn-close:hover svg {
		fill: $red;
	}
}

.xterm-viewport::-webkit-scrollbar {
	width: 1.25%;
}

.tab-content::-webkit-scrollbar {
	width: 6px;
}

.tab-content::-webkit-scrollbar-track {
	margin: 6px 0;
}

.tab-content::-webkit-scrollbar-thumb {
	background-color: $blue;
	border-radius: 16px;
}

.tab-content::-webkit-scrollbar-button {
	display: none;
}

.vibrant {
	background: rgba(34, 36, 45, 0.5);
	app-root {
		background: rgba(34, 36, 45, 0.5);
	}
	tab-header {
		background: rgba(54, 55, 64, 0.5) !important;
	}
	.tabs-on-top .tab-bar {
		background: rgba(13, 14, 17, 0.5) !important;
	}
	tab-header.active {
		background: rgba(34, 36, 45, 0.5) !important;
	}
	.content:not(.tabs-on-top) .tab-bar {
		background: rgba(13, 14, 17, 0.5) !important;
	}
	tab-body {
		background: rgba(34, 36, 45, 0.5) !important;
	}
	.nav {
		background: rgba(54, 55, 64, 0.5) !important;
	}
	multi-hotkey-input .item {
		background: rgba(54, 55, 64, 0.5) !important;
	}
}

app-root {
	background: $body-bg;
	border: 1px solid $window-border;

	& > .content {
		.tab-bar {
			.btn-tab-bar {
				background: transparent;
				&:hover {
					background: $button-hover-bg !important;
				}
				&:active {
					background: $button-active-bg !important;
				}
			}

			& > .tabs {
				tab-header {
					background: $body-bg3;

					.index {
						color: #555;
					}

					.name {
						text-align: center;
					}

					button {
						color: $body-color;
						border: none;
						transition: 0.25s all;
					}
				}
			}
		}

		&.tabs-on-top .tab-bar {
			margin-top: -1px;
			height: 42px;
			border-bottom: 1px solid $window-border;
			background: $body-bg2;

			tab-header {
				margin-bottom: -1px;

				&.active {
					border-bottom: 1px solid $blue;
					background: $body-bg;
				}

				&.has-activity:not(.active) {
					animation: bottomactivity 2s linear infinite;
				}
			}
		}

		&:not(.tabs-on-top) .tab-bar {
			margin-bottom: -1px;
			height: 42px;
			border-top: 1px solid $window-border;
			background: $body-bg2;

			tab-header {
				margin-top: -1px;

				&.active {
					border-top: 1px solid $blue;
					background: $body-bg;
				}

				&.has-activity:not(.active) {
					animation: topactivity 2s linear infinite;
				}
			}
		}
	}
}

tab-body {
	background: $body-bg;
}

settings-tab > ngb-tabset {
	& > .nav {
		background: $body-bg3;
		flex-shrink: 0;

		& > .nav-item > .nav-link {
			border-left: none;
			border-right: none;
			border-top: 1px solid transparent;
			border-bottom: 1px solid transparent;
			padding: 10px 50px 10px 20px;
			font-size: 14px;

			&.active {
				border-top-color: $nav-tabs-link-active-border-color;
				border-bottom-color: $nav-tabs-link-active-border-color;
			}
		}
	}
}

multi-hotkey-input {
	.item {
		background: $body-bg3;
		border: 1px solid $blue;
		margin-right: 5px;

		.body {
			padding: 3px 0 2px;

			.stroke {
				padding: 0 6px;
				border-right: 1px solid $body-bg;
			}
		}

		.remove {
			padding: 3px 8px 2px;
		}
	}

	.add {
		color: #777;
		padding: 4px 10px 0;
	}

	.add,
	.item .body,
	.item .remove {
		&:hover {
			background: darken($body-bg3, 5%);
		}
		&:active {
			background: darken($body-bg3, 15%);
		}
	}
}

hotkey-input-modal {
	.input {
		background: $input-bg;
		padding: 10px;
		font-size: 24px;
		line-height: 27px;
		height: 55px;

		.stroke {
			background: $body-bg3;
			border: 1px solid $blue;
			border-radius: 3px;
			margin-right: 10px;
			padding: 3px 10px;
		}
	}

	.timeout {
		background: $input-bg;

		div {
			background: $blue;
		}
	}
}

input[type="range"] {
	@mixin thumb() {
		height: 14px;
		width: 14px;
		background: $blue;
		margin-top: -6px;
		box-shadow: none;
		&:hover {
			background: darken($blue, 10%);
		}
		&:active {
			background: lighten($blue, 10%);
		}
	}
	&::-webkit-slider-thumb {
		@include thumb();
	}
	&::-moz-range-thumb {
		@include thumb();
	}
	&::-ms-thumb {
		@include thumb();
	}
	&::thumb {
		@include thumb();
	}
	@mixin track() {
		height: 1px;
		background: $white;
	}
	&::-webkit-slider-runnable-track {
		@include track();
	}
	&:focus::-webkit-slider-runnable-track {
		@include track();
	}
	&::-moz-range-track {
		@include track();
	}
	&::-ms-track {
		@include track();
	}
}

.form-control {
	border: 1px solid $body-bg3;
	background-color: $body-bg3;
	&:focus {
		border: 1px solid $blue;
		background-color: $body-bg3;
	}
	&:disabled,
	&[readonly] {
		background-color: $body-bg2;
	}
}

.form-group label {
	margin-bottom: 2px;
}

.form-line > .form-control,
.form-line > .input-group {
	width: 53%;
}

.list-group-item {
	background-color: transparent;
	i.text-success {
		display: inline-block;
		padding-right: 0;
	}
}

.btn {
	cursor: pointer;
}

.btn-secondary {
	background-color: transparent;
	border-color: $blue;
	&:hover {
		background-color: $blue;
		border-color: $blue;
	}
}

.btn-outline-warning {
	text-transform: uppercase;
}

.btn-secondary:focus,
.btn-secondary.focus {
	box-shadow: none;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
	box-shadow: none;
}

.btn-sm,
.btn-group-sm > .btn {
	border-radius: 0;
}

button span {
	padding-left: 8px;
}

.input-group-text {
	background-color: $body-bg3;
	border: none;
}

.input-group-btn {
	margin-left: -1px;
	z-index: 1;
}

b,
strong {
	font-weight: 500;
	font-size: 0.8rem;
}

.mr-2,
.mx-2 {
	margin-right: 1rem !important;
}