btclock/btclock_v3
3
1
Fork 2
Code Issues Pull requests 1 Projects Releases 14 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

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

@ -5,6 +5,8 @@
@import "../node_modules/bootstrap/scss/variables-dark";
$form-range-track-bg: #fff;
$color-mode-type: media-query;
// $border-radius: .675rem;
@import "../node_modules/bootstrap/scss/mixins";
@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+ */
}
@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 {
margin-bottom: 15px;
}
@ -65,11 +87,18 @@ div#output .btclock {
margin: 0 auto;
.digit,
.splitText
{
.splitText {
border: 2px solid gold;
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;
}
}
@ -116,22 +145,36 @@ div#output .btclock {
}
.splitText {
font-size: 1.8rem;
padding-top: 19px !important;
padding-bottom: 20px !important;
@include media-breakpoint-up(sm) {
font-size: 1.0rem;
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;
}
.mediumText {
font-size: 3rem;
padding-left: 5px;
padding-right: 5px;
padding-right: 5px;
padding-top: 20px !important;
padding-bottom: 20px !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;
}
@ -150,6 +193,7 @@ div#output .btclock {
#system_info {
padding: 0;
li {
list-style: none;
}

16
data/src/index.html
View file

@ -13,16 +13,16 @@
</head>
<body>
<nav class="navbar navbar-light bg-light">
<nav class="navbar">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">&#8383;TClock</span>
</div>
</nav>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>Status</h1>
<h2>Status</h2>
<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 }}
<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>
@ -97,8 +97,8 @@
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="p-3 border bg-light">
<h1>Custom text</h1>
<div class="p-3 border rounded-2">
<h2>Custom text</h2>
<form name="customText" id="customTextForm">
<div class="row">
<label for="customText" class="col-sm-4 col-form-label">Text</label>
@ -137,11 +137,11 @@
</div>
<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 class="col-sm-4">
<div class="h-100 p-3 border bg-light">
<h1>Settings</h1>
<div class="h-100 p-3 border rounded-2">
<h2>Settings</h2>
<form method="post" action="/api/settings" name="settings" id="settingsForm">
<div class="row">
<label for="fgColor" class="col-sm-6 col-form-label col-form-label-sm">Text color</label>