webui/src/lib/style/app.scss

199 lines
3.9 KiB
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;
}
.splitText div:first-child::after {
display: block;
content: '';
margin-top: 0px;
border-bottom: 2px solid;
margin-bottom: 3px;
}
#btclock-wrapper {
margin: 0 auto;
}
//@include media-breakpoint-down(xl) {
.btn-group-sm .btn {
font-size: 0.8rem;
}
//}
.btclock {
border: 1px solid darkgray;
background: #000;
border-radius: 5px;
padding: 10px;
max-width: 700px;
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
font-family: 'Oswald', sans-serif;
font-size: 1vw;
> div {
padding: 5px;
}
.digit,
.splitText,
.mediumText {
border: 2px solid gold;
border-radius: 8px;
@include media-breakpoint-up(sm) {
min-width: 10px;
}
@include media-breakpoint-up(xxl) {
min-width: 70px;
}
text-align: center;
color: #fff;
}
}
.darkMode .btclock > div {
color: #fff;
border-color: #fff;
}
.lightMode .btclock > div {
background: #fff;
}
.lightMode .btclock > div {
color: #000;
}
.darkMode .btclock > div {
background: #000;
}
.splitText {
@include media-breakpoint-up(sm) {
font-size: 1rem;
padding-top: 8px !important;
padding-bottom: 9px !important;
}
@include media-breakpoint-up(xxl) {
font-size: 1.2rem;
padding-top: 2.1rem !important;
padding-bottom: 2.1rem !important;
}
text-align: center;
}
.mediumText {
font-size: 3rem;
padding-left: 5px;
padding-right: 5px;
@include media-breakpoint-up(sm) {
font-size: 1.8rem;
padding-top: 13px !important;
padding-bottom: 13px !important;
}
@include media-breakpoint-up(xxl) {
font-size: 3rem;
padding-top: 29px !important;
padding-bottom: 29px !important;
}
}
.digit {
font-size: 5rem;
@include media-breakpoint-up(sm) {
font-size: 2.5rem;
}
@include media-breakpoint-up(xxl) {
font-size: 5rem;
}
padding-left: 10px;
padding-right: 10px;
}
.digit.sats {
padding-top: 15px;
padding-bottom: 5px;
font-size: 4.5rem;
font-family: 'Satoshi Symbol', sans-serif;
content: 'a';
}
.digit-blank {
content: 'abc';
}
#customText {
text-transform: uppercase;
}
.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;
}