11174-Background diagnostic info graphs

pandora_console/include/styles/diagnostics.css

@@ -8,7 +8,7 @@
   text-align: center;
   font-size: 1.5em;
   font-weight: bolder;
-  color: #000;
+  color: var(--text-color);
   background: var(--secondary-color);
   padding: 8px;
 }
@@ -47,16 +47,36 @@
   font-size: 1.2em;
 }
 
+.title-self-monitoring {
+  border-top: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
+  border-left: 1px solid var(--border-color);
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
 .container-self-monitoring {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  background-color: var(--secondary-color);
+  border-right: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  border-left: 1px solid var(--border-color);
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  padding-bottom: 15px;
 }
 
 .element-self-monitoring {
   flex: 2 1 600px;
 }
 
+.element-self-monitoring > img[data-title="No data"] {
+  margin-top: 5%;
+  margin-left: 20%;
+}
+
 .footer-self-monitoring {
   margin: 30px;
   font-style: italic;

pandora_console/include/styles/pandora.css

@@ -31,6 +31,8 @@
   --primary-color: #14524f;
   --secondary-color: #ffffff;
   --input-border: #c0ccdc;
+  --border-color: #eee;
+  --text-color: #333;
 }
 
 /*

pandora_console/include/styles/pandora_black.css

@@ -20,6 +20,13 @@ Description: The default Pandora FMS theme layout
 // along with this program; if not, write to the Free Software
 // Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
+:root {
+  /* --primary-color: #14524f; */
+  --secondary-color: #222;
+  --text-color: #fff;
+  /* --input-border: #c0ccdc; */
+  --border-color: #484848;
+}
 
 /* General styles */
 body,