Merge pull request #115 from alexbelgium/patch-5

Fix : improve darkmode
This commit is contained in:
Nachtzuster
2024-06-28 18:33:29 +02:00
committed by GitHub
12 changed files with 101 additions and 62 deletions
+41 -14
View File
@@ -8,7 +8,6 @@
box-sizing: border-box;
font-size: medium;
color: #f5f5f5;
background-color: transparent;
}
a {
@@ -31,6 +30,7 @@ iframe {
height: 85%;
width: 100%;
position: fixed;
background-color: grey;
}
body {
@@ -137,12 +137,26 @@ button:hover {
font-size: x-large;
}
.chartdiv {
position: fixed;
top: 0%;
left: 50%;
width: calc(40% - 2px);
height: calc(25% - 2px);
background-color: #2b2b2b;
z-index: 9999;
overflow: auto;
border-radius: 5px;
box-shadow: 0 4px 8px #f5f5f5;
}
.logo img {
position: absolute;
top: 0;
left: 0;
padding: 10px;
opacity: 0.7;
filter: none !important;
}
.modal {
@@ -187,7 +201,6 @@ button:hover {
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
box-shadow: 0px 0px 28px 1px rgba(255, 255, 255, 0.10) !important;
border-radius: 4px;
}
@@ -195,6 +208,7 @@ button:hover {
width:175px;
display:initial !important;
margin-left: 60px;
filter: drop-shadow(0px 0px 20px rgba(255, 255, 255, 1.0));
}
.topnav form {
@@ -467,7 +481,7 @@ button:hover {
width: 25px;
height: 25px;
border-radius: 50%;
background: #04AA6D;
background: #f5f5f5;
cursor: pointer;
}
@@ -475,7 +489,7 @@ button:hover {
width: 25px;
height: 25px;
border-radius: 50%;
background: #04AA6D;
background: #f5f5f5;
cursor: pointer;
}
@@ -554,6 +568,7 @@ button:hover {
display: block;
width: 60px;
height: 60px;
filter: drop-shadow(0px 0px 20px rgba(255, 255, 255, 1.0));
}
.topnav.responsive {position: relative;}
.topnav.responsive button {
@@ -597,6 +612,7 @@ button:hover {
display: block;
width: 60px;
height: 60px;
filter: drop-shadow(0px 0px 20px rgba(255, 255, 255, 1.0));
}
.play table,.overview table,.stats table {
width: 100%;
@@ -651,11 +667,21 @@ button:hover {
.sortbutton {
margin-top:10px;
font-size:x-large;
background:#3b3b3b;
background: #3b3b3b;
padding:5px;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10);
}
.sortbutton:hover {
background-color: #AAAAAA;
color: white;
}
.sortbutton.active {
background-color: #777777;
color: white;
}
button.legacyview {
display: none;
color:gray;
@@ -730,7 +756,7 @@ dt {
width: auto;
text-align: left;
font-weight: bold;
color: gray;
color: #b2b2b2;
}
dd::before {
content: ": ";
@@ -738,23 +764,24 @@ dd::before {
input {
box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.10);
background-color: #333;
color: #fff;
background-color: #3b3b3b;
color: #f5f5f5;
}
dialog {
border:none;
background-color:rgba(59, 59, 59, 0.9);
}
dialog::backdrop {
background: repeating-linear-gradient(
30deg,
rgba(24, 194, 236, 0.2),
rgba(24, 194, 236, 0.2) 1px,
rgba(24, 194, 236, 0.3) 1px,
rgba(24, 194, 236, 0.3) 20px
rgba(30, 50, 80, 0.2),
rgba(30, 50, 80, 0.2) 1px,
rgba(30, 50, 80, 0.3) 1px,
rgba(30, 50, 80, 0.3) 20px
);
backdrop-filter: blur(1px);
backdrop-filter: blur(3px);
}
.centered_image_container {
@@ -818,7 +845,7 @@ dialog::backdrop {
position:absolute;
display:inline-block;
background-color:#c8191a;
color:white;
color:#f5f5f5;
width:20px;
line-height:20px;
border-radius:12px;
+25 -2
View File
@@ -132,6 +132,19 @@ button:hover {
font-size: x-large;
}
.chartdiv {
position: fixed;
top: 0%;
left: 50%;
width: calc(40% - 2px);
height: calc(25% - 2px);
background-color: #fff;
z-index: 9999;
overflow: auto;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.logo img {
position: absolute;
top: 0;
@@ -623,11 +636,21 @@ button:hover {
.sortbutton {
margin-top:10px;
font-size:x-large;
background:#dbffeb;
background:#77c487;
padding:5px;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10);
}
.sortbutton:hover {
background-color: #dbffeb;
color: white;
}
.sortbutton.active {
background-color: #dbffeb;
color: white;
}
button.legacyview {
display: none;
color:gray;
@@ -845,7 +868,7 @@ form#views button .updatenumber {
}
.testbtn {
background:#77c487 !important;
background: white !important;
}
pre.bash {
+5 -5
View File
@@ -297,7 +297,7 @@ $newconfig = get_config();
<input name="extraction_length" oninput="this.setAttribute('max', document.getElementsByName('recording_length')[0].value);" type="number" style="width:3em;" min="3" value="<?php print($newconfig['EXTRACTION_LENGTH']);?>" /><br>
<p>Set Extraction Length to something less than your Recording Length. Min=3 Max=Recording Length</p>
<label for="audiofmt">Extractions Audio Format</label>
<select name="audiofmt">
<select name="audiofmt" class="testbtn">
<option selected="<?php print($newconfig['AUDIOFMT']);?>"><?php print($newconfig['AUDIOFMT']);?></option>
<?php
$formats = array("8svx", "aif", "aifc", "aiff", "aiffc", "al", "amb", "amr-nb", "amr-wb", "anb", "au", "avr", "awb", "caf", "cdda", "cdr", "cvs", "cvsd", "cvu", "dat", "dvms", "f32", "f4", "f64", "f8", "fap", "flac", "fssd", "gsm", "gsrt", "hcom", "htk", "ima", "ircam", "la", "lpc", "lpc10", "lu", "mat", "mat4", "mat5", "maud", "mp2", "mp3", "nist", "ogg", "paf", "prc", "pvf", "raw", "s1", "s16", "s2", "s24", "s3", "s32", "s4", "s8", "sb", "sd2", "sds", "sf", "sl", "sln", "smp", "snd", "sndfile", "sndr", "sndt", "sou", "sox", "sph", "sw", "txw", "u1", "u16", "u2", "u24", "u3", "u32", "u4", "u8", "ub", "ul", "uw", "vms", "voc", "vorbis", "vox", "w64", "wav", "wavpcm", "wv", "wve", "xa", "xi");
@@ -460,7 +460,7 @@ foreach($formats as $format){
<p style="margin-left: 40px">
<label for="freqshift_tool">Shifting tool: </label>
<select name="freqshift_tool">
<select name="freqshift_tool" class="testbtn">
<option selected="<?php print($newconfig['FREQSHIFT_TOOL']);?>"><?php print($newconfig['FREQSHIFT_TOOL']);?></option>
<?php
$formats = array("sox","ffmpeg");
@@ -511,7 +511,7 @@ foreach($formats as $format){
</tr>
<tr>
<td>Birdnet Recording:
<select id="LogLevel_BirdnetRecordingService" name="LogLevel_BirdnetRecordingService">
<select class="testbtn" id="LogLevel_BirdnetRecordingService" name="LogLevel_BirdnetRecordingService">
<option value="error" <?php echo $newconfig['LogLevel_BirdnetRecordingService'] == "error" || !array_key_exists('LogLevel_BirdnetRecordingService', $newconfig) ? "selected=''" : "" ?>>
Errors Only
</option>
@@ -529,7 +529,7 @@ foreach($formats as $format){
</tr>
<tr>
<td>Live Audio Stream:
<select id="LogLevel_LiveAudioStreamService" name="LogLevel_LiveAudioStreamService">
<select class="testbtn" id="LogLevel_LiveAudioStreamService" name="LogLevel_LiveAudioStreamService">
<option value="error" <?php echo $newconfig['LogLevel_LiveAudioStreamService'] == "error" || !array_key_exists('LogLevel_LiveAudioStreamService', $newconfig) ? "selected=''" : "" ?>>
Errors Only
</option>
@@ -547,7 +547,7 @@ foreach($formats as $format){
</tr>
<tr>
<td>Spectrogram Service:
<select id="LogLevel_SpectrogramViewerService" name="LogLevel_SpectrogramViewerService">
<select class="testbtn" id="LogLevel_SpectrogramViewerService" name="LogLevel_SpectrogramViewerService">
<option value="error" <?php echo $newconfig['LogLevel_SpectrogramViewerService'] == "error" || !array_key_exists('LogLevel_SpectrogramViewerService', $newconfig) ? "selected=''" : "" ?>>
Errors Only
</option>
+6 -6
View File
@@ -324,7 +324,7 @@ function sendTestNotification(e) {
<h2>Model</h2>
<label for="model">Select a Model: </label>
<select id="modelsel" name="model">
<select id="modelsel" name="model" class="testbtn">
<?php
$models = array("BirdNET_GLOBAL_6K_V2.4_Model_FP16", "BirdNET_6K_GLOBAL_MODEL");
foreach($models as $modelName){
@@ -496,7 +496,7 @@ function runProcess() {
tgram://{bot_token}/{chat_id}
twitter://{ConsumerKey}/{ConsumerSecret}/{AccessToken}/{AccessSecret}
https://discordapp.com/api/webhooks/{WebhookID}/{WebhookToken}
..." style="vertical-align: top" name="apprise_input" rows="5" type="text" ><?php print($apprise_config);?></textarea>
..." style="vertical-align: top" class="testbtn" name="apprise_input" rows="5" type="text" ><?php print($apprise_config);?></textarea>
<dl>
<dt>$sciname</dt>
<dd>Scientific Name</dd>
@@ -569,7 +569,7 @@ https://discordapp.com/api/webhooks/{WebhookID}/{WebhookToken}
<table class="settingstable"><tr><td>
<h2>Localization</h2>
<label for="language">Database Language: </label>
<select name="language">
<select name="language" class="testbtn">
<?php
$langs = array(
'not-selected' => 'Not Selected',
@@ -623,7 +623,7 @@ https://discordapp.com/api/webhooks/{WebhookID}/{WebhookToken}
<table class="settingstable"><tr><td>
<h2>Additional Info </h2>
<label for="info_site">Site to pull additional species info from: </label>
<select name="info_site">
<select name="info_site" class="testbtn">
<?php
$info_site = array(
'ALLABOUTBIRDS' => 'allaboutbirds.org',
@@ -650,7 +650,7 @@ https://discordapp.com/api/webhooks/{WebhookID}/{WebhookToken}
<table class="settingstable"><tr><td>
<h2>Color scheme </h2>
<label for="color_scheme">Color scheme for the site : </label>
<select name="color_scheme">
<select name="color_scheme" class="testbtn">
<?php
$scheme = array("light", "dark");
foreach($scheme as $color_scheme){
@@ -700,7 +700,7 @@ https://discordapp.com/api/webhooks/{WebhookID}/{WebhookToken}
<input onclick="this.showPicker()" type="time" id="time" name="time" value="<?php echo $date->format('H:i'); ?>" <?php echo $disabledvalue; ?>><br>
<br>
<label for="timezone">Select a Timezone: </label>
<select name="timezone">
<select name="timezone" class="testbtn">
<option disabled selected>
Select a timezone
</option>
+4 -1
View File
@@ -1,6 +1,9 @@
<?php
//Default Configuration
$CONFIG = '{"lang":"en","error_reporting":false,"show_hidden":true,"hide_Cols":false,"calc_folder":false,"theme":"light"}';
require_once '../../scripts/common.php';
$config = get_config();
$color_scheme = $config['COLOR_SCHEME'];
$CONFIG = "{\"lang\":\"en\",\"error_reporting\":false,\"show_hidden\":true,\"hide_Cols\":false,\"calc_folder\":false,\"theme\":\"$color_scheme\"}";
/**
* H3K | Tiny File Manager V2.4.6
-11
View File
@@ -427,17 +427,6 @@ function generateMiniGraph(elem, comname) {
}
var chartWindow = document.createElement('div');
chartWindow.className = "chartdiv"
chartWindow.style.position = 'fixed';
chartWindow.style.top = '0%';
chartWindow.style.left = '50%';
chartWindow.style.width = window.innerWidth < 700 ? '40%' : '20%';
chartWindow.style.height = window.innerWidth < 700 ? '25%' : '16%';
chartWindow.style.backgroundColor = '#fff';
chartWindow.style.zIndex = '9999';
chartWindow.style.overflow = 'auto';
chartWindow.style.borderRadius = '5px';
chartWindow.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
document.body.appendChild(chartWindow);
+4 -4
View File
@@ -404,10 +404,10 @@ if(!isset($_GET['species']) && !isset($_GET['filename'])){
<form action="views.php" method="GET">
<input type="hidden" name="view" value="Recordings">
<input type="hidden" name="<?php echo $view; ?>" value="<?php echo $_GET['date']; ?>">
<button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "alphabetical"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="alphabetical">
<button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "alphabetical"){ echo "class='sortbutton active'";} else { echo "class='sortbutton'"; }?> type="submit" name="sort" value="alphabetical">
<img src="images/sort_abc.svg" title="Sort by alphabetical" alt="Sort by alphabetical">
</button>
<button <?php if(isset($_GET['sort']) && $_GET['sort'] == "occurrences"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="occurrences">
<button <?php if(isset($_GET['sort']) && $_GET['sort'] == "occurrences"){ echo "class='sortbutton active'";} else { echo "class='sortbutton'"; }?> type="submit" name="sort" value="occurrences">
<img src="images/sort_occ.svg" title="Sort by occurrences" alt="Sort by occurrences">
</button>
</form>
@@ -517,10 +517,10 @@ if(isset($_GET['species'])){ ?>
<input type="hidden" name="view" value="Recordings">
<input type="hidden" name="species" value="<?php echo $_GET['species']; ?>">
<input type="hidden" name="sort" value="<?php echo $_GET['sort']; ?>">
<button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "" || $_GET['sort'] == "date"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="date">
<button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "" || $_GET['sort'] == "date"){ echo "class='sortbutton active'";} else { echo "class='sortbutton'"; }?> type="submit" name="sort" value="date">
<img width=35px src="images/sort_date.svg" title="Sort by date" alt="Sort by date">
</button>
<button <?php if(isset($_GET['sort']) && $_GET['sort'] == "confidence"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="confidence">
<button <?php if(isset($_GET['sort']) && $_GET['sort'] == "confidence"){ echo "class='sortbutton active'";} else { echo "class='sortbutton'"; }?> type="submit" name="sort" value="confidence">
<img src="images/sort_occ.svg" title="Sort by confidence" alt="Sort by confidence">
</button><br>
<input style="margin-top:10px" <?php if(isset($_GET['only_excluded'])){ echo "checked"; }?> type="checkbox" name="only_excluded" onChange="submit()">
+1 -1
View File
@@ -413,7 +413,7 @@ h1 {
?>
<div style="display:inline" id="RTSP_streams">
<label>RTSP Stream: </label>
<select id="rtsp_stream_select" name="RTSP Streams">
<select id="rtsp_stream_select" class="testbtn" name="RTSP Streams">
<?php
//The setting representing which livestream to stream is more than the number of RTSP streams available
//maybe the list of streams has been modified
+3 -3
View File
@@ -60,15 +60,15 @@ if (get_included_files()[0] === __FILE__) {
<div class="stats">
<div class="column">
<div style="width: auto;
<div style="width: auto;
text-align: center">
<form action="views.php" method="GET">
<input type="hidden" name="sort" value="<?php if(isset($_GET['sort'])){echo $_GET['sort'];}?>">
<input type="hidden" name="view" value="Species Stats">
<button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "alphabetical"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="alphabetical">
<button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "alphabetical"){ echo "class='sortbutton active'";} else { echo "class='sortbutton'"; }?> type="submit" name="sort" value="alphabetical">
<img src="images/sort_abc.svg" title="Sort by alphabetical" alt="Sort by alphabetical">
</button>
<button <?php if(isset($_GET['sort']) && $_GET['sort'] == "occurrences"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="occurrences">
<button <?php if(isset($_GET['sort']) && $_GET['sort'] == "occurrences"){ echo "class='sortbutton active'";} else { echo "class='sortbutton'"; }?> type="submit" name="sort" value="occurrences">
<img src="images/sort_occ.svg" title="Sort by occurrences" alt="Sort by occurrences">
</button>
</form>
-11
View File
@@ -575,17 +575,6 @@ function generateMiniGraph(elem, comname) {
}
var chartWindow = document.createElement('div');
chartWindow.className = "chartdiv"
chartWindow.style.position = 'fixed';
chartWindow.style.top = '0%';
chartWindow.style.left = '50%';
chartWindow.style.width = window.innerWidth < 700 ? '40%' : '20%';
chartWindow.style.height = window.innerWidth < 700 ? '25%' : '16%';
chartWindow.style.backgroundColor = '#fff';
chartWindow.style.zIndex = '9999';
chartWindow.style.overflow = 'auto';
chartWindow.style.borderRadius = '5px';
chartWindow.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
document.body.appendChild(chartWindow);
+2 -2
View File
@@ -163,7 +163,7 @@ while($detection=$result1->fetchArray(SQLITE3_ASSOC))
?>
<br>
<?php // TODO: fix the box shadows, maybe make them a bit smaller on the tr ?>
<table align="center" style="box-shadow:unset"><tr><td style="background-color:#77c487">
<table align="center" style="box-shadow:unset"><tr><td style="background-color:transparent">
<table>
<thead>
<tr>
@@ -197,7 +197,7 @@ while($detection=$result1->fetchArray(SQLITE3_ASSOC))
?>
</tbody>
</table>
</td><td style="background-color:#77c487">
</td><td style="background-color:transparent">
<table >
<thead>
+10 -2
View File
@@ -58,8 +58,16 @@
<div id="tempblock" style="display:none;">
<span class="lang_044"></span>
<select class="template" id="template">
<option value="green" selected="selected">green</option>
</select>
<?php
require_once '../BirdNET-Pi/scripts/common.php';
$config = get_config();
$color_scheme = $config['COLOR_SCHEME'];
if ($color_scheme == 'dark') {
echo '<option value="dark" selected="selected">Dark</option>';
} else {
echo '<option value="green" selected="selected">Green</option>';
}
?>
</select>
</div>
<div id="langblock" style="display:none;">