Merge pull request #115 from alexbelgium/patch-5

Fix : improve darkmode

homepage/static/dark-style.css

@@ -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;
+  background-color: #3b3b3b;
-  color: #fff;
+  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(30, 50, 80, 0.2),
-    rgba(24, 194, 236, 0.2) 1px,
+    rgba(30, 50, 80, 0.2) 1px,
-    rgba(24, 194, 236, 0.3) 1px,
+    rgba(30, 50, 80, 0.3) 1px,
-    rgba(24, 194, 236, 0.3) 20px
+    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;

homepage/style.css

@@ -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 {

scripts/advanced.php

@@ -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>

scripts/config.php

@@ -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>

scripts/filemanager/filemanager.php

@@ -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

scripts/overview.php

@@ -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);
 
 

scripts/play.php

@@ -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()">

scripts/spectrogram.php

@@ -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

scripts/stats.php

@@ -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>

scripts/todays_detections.php

@@ -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);
 
 

scripts/weekly_report.php

@@ -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>

templates/index_bootstrap.html

@@ -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>
+                    <?php 
-                </select>
+                    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;">