btclock/btclock_v3
3
1
Fork 2
Code Issues Pull requests 1 Projects Releases 15 Wiki Activity Actions

Added dark mode for WebUI and make more responsive

Browse source
This commit is contained in:
Djuri Baars 2023-11-14 00:59:05 +01:00
parent 59f9b29df3
commit 3836a9937d
2 changed files with 59 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
data/src/css/style.scss
View file

@ -5,6 +5,8 @@
@import "../node_modules/bootstrap/scss/variables-dark"; @import "../node_modules/bootstrap/scss/variables-dark";
$form-range-track-bg: #fff; $form-range-track-bg: #fff;
$color-mode-type: media-query;
// $border-radius: .675rem;
@import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/maps"; @import "../node_modules/bootstrap/scss/maps";
@ -40,6 +42,26 @@ $form-range-track-bg: #fff;
/* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
} }
@include media-breakpoint-down(xl) {
html {
font-size: 85%;
}
button.btn,
input[type="button"].btn,
input[type="submit"].btn,
input[type="reset"].btn {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
}
}
@include media-breakpoint-down(lg) {
html {
font-size: 75%;
}
}
nav { nav {
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -65,11 +87,18 @@ div#output .btclock {
margin: 0 auto; margin: 0 auto;
.digit, .digit,
.splitText .splitText {
{
border: 2px solid gold; border: 2px solid gold;
border-radius: 8px; border-radius: 8px;
min-width: 70px;
@include media-breakpoint-up(sm) {
min-width: 10px;
}
@include media-breakpoint-up(xxl) {
min-width: 70px;
}
text-align: center; text-align: center;
} }
} }
@ -116,9 +145,17 @@ div#output .btclock {
} }
.splitText { .splitText {
font-size: 1.8rem; @include media-breakpoint-up(sm) {
padding-top: 19px !important; font-size: 1.0rem;
padding-bottom: 20px !important; padding-top: 8px !important;
padding-bottom: 9px !important;
}
@include media-breakpoint-up(xxl) {
font-size: 1.8rem;
padding-top: 19px !important;
padding-bottom: 20px !important;
}
text-align: center; text-align: center;
} }
@ -132,6 +169,12 @@ div#output .btclock {
.digit { .digit {
font-size: 5rem; font-size: 5rem;
@include media-breakpoint-up(sm) {
font-size: 2.5rem;
}
@include media-breakpoint-up(xxl) {
font-size: 5rem;
}
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
} }
@ -150,6 +193,7 @@ div#output .btclock {
#system_info { #system_info {
padding: 0; padding: 0;
li { li {
list-style: none; list-style: none;
} }

16
data/src/index.html
View file

@ -13,16 +13,16 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-light bg-light"> <nav class="navbar">
<div class="container-fluid"> <div class="container-fluid">
<span class="navbar-brand mb-0 h1">&#8383;TClock</span> <span class="navbar-brand mb-0 h1">&#8383;TClock</span>
</div> </div>
</nav> </nav>
<script id="entry-template" type="text/x-handlebars-template"> <script id="entry-template" type="text/x-handlebars-template">
<div class="entry"> <div class="entry">
<h1>Status</h1> <h2>Status</h2>
<div class="body"> <div class="body">
<div class="btn-group btn-group-sm"" role="group" aria-label="Screens toggle button group"> <div class="btn-group btn-group-sm" role="group" aria-label="Screens toggle button group">
{{#each screens }} {{#each screens }}
<input type="radio" class="btn-check" name="btnradio" id="btnradio{{ @index }}" autocomplete="off" {{#ifEquals @index ../currentScreen }} checked {{/ifEquals}} onclick="changeScreen({{ @index }})"> <input type="radio" class="btn-check" name="btnradio" id="btnradio{{ @index }}" autocomplete="off" {{#ifEquals @index ../currentScreen }} checked {{/ifEquals}} onclick="changeScreen({{ @index }})">
<label class="btn btn-outline-primary" for="btnradio{{ @index }}">{{ this }}</label> <label class="btn btn-outline-primary" for="btnradio{{ @index }}">{{ this }}</label>
@ -97,8 +97,8 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-sm-3"> <div class="col-sm-3">
<div class="p-3 border bg-light"> <div class="p-3 border rounded-2">
<h1>Custom text</h1> <h2>Custom text</h2>
<form name="customText" id="customTextForm"> <form name="customText" id="customTextForm">
<div class="row"> <div class="row">
<label for="customText" class="col-sm-4 col-form-label">Text</label> <label for="customText" class="col-sm-4 col-form-label">Text</label>
@ -137,11 +137,11 @@
</div> </div>
<div class="col-sm-5"> <div class="col-sm-5">
<div id="output" class="p-3 border bg-light">Loading, please wait...</div> <div id="output" class="p-3 border rounded-2">Loading, please wait...</div>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<div class="h-100 p-3 border bg-light"> <div class="h-100 p-3 border rounded-2">
<h1>Settings</h1> <h2>Settings</h2>
<form method="post" action="/api/settings" name="settings" id="settingsForm"> <form method="post" action="/api/settings" name="settings" id="settingsForm">
<div class="row"> <div class="row">
<label for="fgColor" class="col-sm-6 col-form-label col-form-label-sm">Text color</label> <label for="fgColor" class="col-sm-6 col-form-label col-form-label-sm">Text color</label>