webui/src/lib/style/app.scss

@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';
@import '../node_modules/bootstrap/scss/variables-dark';

//@import "@fontsource/antonio/latin-400.css";
@import '@fontsource/ubuntu/latin-400.css';
@import '@fontsource/oswald/latin-400.css';
@import './satsymbol';

$color-mode-type: media-query;
$font-family-base: 'Ubuntu';
$font-size-base: 0.9rem;
$input-font-size-sm: $font-size-base * 0.875;

// $border-radius:               .675rem;

@import '../node_modules/bootstrap/scss/mixins';
@import '../node_modules/bootstrap/scss/maps';
@import '../node_modules/bootstrap/scss/utilities';

@import '../node_modules/bootstrap/scss/root';
@import '../node_modules/bootstrap/scss/reboot';
@import '../node_modules/bootstrap/scss/type';
@import '../node_modules/bootstrap/scss/containers';
@import '../node_modules/bootstrap/scss/grid';
@import '../node_modules/bootstrap/scss/forms';
@import '../node_modules/bootstrap/scss/buttons';
@import '../node_modules/bootstrap/scss/button-group';
@import '../node_modules/bootstrap/scss/pagination';

@import '../node_modules/bootstrap/scss/dropdown';

@import '../node_modules/bootstrap/scss/navbar';
@import '../node_modules/bootstrap/scss/nav';
@import '../node_modules/bootstrap/scss/card';
@import '../node_modules/bootstrap/scss/progress';
@import '../node_modules/bootstrap/scss/tooltip';
@import '../node_modules/bootstrap/scss/toasts';
@import '../node_modules/bootstrap/scss/alert';

@import '../node_modules/bootstrap/scss/helpers';
@import '../node_modules/bootstrap/scss/utilities/api';

nav {
	margin-bottom: 15px;
}

#btclock-wrapper {
	margin: 0 auto;
}

.btn-group-sm .btn {
	font-size: 0.8rem;
}

#customText {
	text-transform: uppercase;
}

.rbtclock {
	.btclock {
		background: #000;
		display: flex;
		font-size: calc(3vw + 3vh);
		font-family: 'Oswald', sans-serif;
		font-weight: 800;
		padding: 10px;
		gap: 10px;

		.digit,
		.splitText,
		.mediumText {
			border: 2px solid gold;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 10px;
			width: calc(12vw + 12vh); /* Set a dynamic width based on viewport */
			aspect-ratio: 1 / 1.5; /* Maintain a 1:1 aspect ratio */

			hr {
				width: 80%; /* Line width relative to digit square */
				border: 0;
				border-top: 2px solid #fff;
				margin: 0; /* Remove default margin */
				padding: 0;
				opacity: 1;
			}
		}

		.mediumText {
			font-size: calc(1.25vw + 1.25vh);
		}

		.splitText {
			flex-direction: column; /* Stack the text and line vertically */
			align-items: center;
			justify-content: space-around; /* Distribute items with space between */
			padding: 10px;
		}

		.splitText div:first-child::after {
			display: block;
			content: '';
			margin-top: 0px;
			border-bottom: 2px solid;
			margin-bottom: 3px;
		}

		.splitText {
			font-size: calc(1vw + 1vh);

			.top-text,
			.bottom-text {
				margin: 0;
				line-height: 1;
			}

			.top-text {
				margin-bottom: -25px;
			}

			.bottom-text {
				margin-top: -25px;
			}
		}

		.digit-blank {
			content: 'abc';
		}

		.digit.icon {
			content: 'abc';
		}
	}

	.digit.sats {
		font-family: 'Satoshi Symbol', sans-serif;
		content: 'a';
	}

	@media (max-width: 576px) {
		.btclock {
			font-size: calc(3vw + 3vh); /* Adjust for small screens if necessary */
		}
	}
}

.darkMode .btclock > div {
	color: #fff;
	border-color: #fff;
}

.darkMode .btclock > div {
	background: #000;
	color: #fff;
}

.lightMode .btclock {
	& > div {
		background: #fff;
		color: #000;
	}

	.splitText hr {
		border-top: 2px solid #000;
	}
}

.lightMode .btclock > div {
	color: #000;
}

.system_info {
	padding: 0;

	li {
		list-style: none;
	}
}

.card-title {
	margin-bottom: 0;
}

.navbar-brand {
	font-style: italic;
	font-weight: 600;
}

.firmwareUploadStatusAlert,
#firmwareUploadProgress {
	@extend .my-2;
}