-fixed select position/size

-extra style for text on labels for readibility
-PSR-2 style
-added classes for all styles

html/css/dark.css

@@ -98,3 +98,109 @@
   0% { transform: rotate(0deg); transform: rotate(0deg); }
   100% { transform: rotate(360deg); transform: rotate(360deg); }
 }
+
+.device-availability, .service-availability{
+  color:#000000;
+  float:left;
+  width:166px;
+  height:64px;
+  margin:10px;
+  padding:8px;
+  border-radius:5px;
+  text-align:center;
+}
+
+.device-availability.up, .service-availability.up {
+  border:1px solid #5CB85C;
+}
+
+.device-availability.down, .service-availability.down {
+  border:1px solid #D9534F;
+}
+
+.device-availability.warning {
+  border:1px solid #FFB733;
+}
+
+.availability-label{
+  float:right;
+  margin:-8px;
+}
+
+.service-name-label{
+  float:left;
+  margin:-8px;
+}
+
+.report-up {
+  color:#5CB85C;
+}
+
+.report-warning {
+  color:#FFB733;
+}
+
+.report-down {
+  color:#D9534F;
+}
+
+.page-availability-report-entry {
+  text-align:center;
+  width:50px;
+}
+
+.page-availability-title-left {
+  width:50%;
+  float:left;
+  height:60px;
+}
+
+.page-availability-title-right {
+  width:50%;
+  float:left;
+  text-align:right;
+}
+
+.page-availability-title {
+  font-size:26px;
+  font-weight: bold;
+  line-height:40px;
+}
+
+.page-availability-report-select {
+  border:none;
+  font-size:24px;
+  font-weight:bold;
+  padding-right:10px;
+  margin-left:10px;
+}
+
+.page-availability-report-host {
+  float:right;
+  text-align:right;
+  padding-left:10px;
+}
+
+.page-availability-report-service {
+  float:right;
+  text-align:right;
+}
+
+.widget-availability {
+  float:left;
+  margin:2px;
+}
+
+.widget-availability-host {
+  float:left;
+  margin-bottom: 10px;
+}
+
+.widget-availability-service {
+  float:right;
+  margin-bottom: 10px;
+}
+
+.label-font-border {
+  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+}

html/css/light.css

@@ -87,7 +87,7 @@
   100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
 }
 @-ms-keyframes pace-spinner {
- 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
+  0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
   100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
 }
 @keyframes pace-spinner {
@@ -95,7 +95,7 @@
   100% { transform: rotate(360deg); transform: rotate(360deg); }
 }
 
-.device-availability, .service-availability {
+.device-availability, .service-availability{
   color:#000000;
   float:left;
   width:166px;
@@ -118,12 +118,14 @@
   border:1px solid #FFB733;
 }
 
-.availability-label {
+.availability-label{
-  float:right;margin:-8px;
+  float:right;
+  margin:-8px;
 }
 
-.service-name-label {
+.service-name-label{
-  float:left;margin:-8px;
+  float:left;
+  margin:-8px;
 }
 
 .report-up {
@@ -157,14 +159,16 @@
 
 .page-availability-title {
   font-size:26px;
-  font-weight:bold;
+  font-weight: bold;
   line-height:40px;
 }
 
 .page-availability-report-select {
+  border:none;
   font-size:24px;
   font-weight:bold;
   padding-right:10px;
+  margin-left:10px;
 }
 
 .page-availability-report-host {
@@ -185,10 +189,14 @@
 
 .widget-availability-host {
   float:left;
-  margin-bottom:10px;
+  margin-bottom: 10px;
 }
 
 .widget-availability-service {
   float:right;
-  margin-bottom:10px;
+  margin-bottom: 10px;
 }
+
+.label-font-border {
+  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+}

html/css/mono.css

@@ -98,3 +98,109 @@
   0% { transform: rotate(0deg); transform: rotate(0deg); }
   100% { transform: rotate(360deg); transform: rotate(360deg); }
 }
+
+.device-availability, .service-availability{
+  color:#000000;
+  float:left;
+  width:166px;
+  height:64px;
+  margin:10px;
+  padding:8px;
+  border-radius:5px;
+  text-align:center;
+}
+
+.device-availability.up, .service-availability.up {
+  border:1px solid #5CB85C;
+}
+
+.device-availability.down, .service-availability.down {
+  border:1px solid #D9534F;
+}
+
+.device-availability.warning {
+  border:1px solid #FFB733;
+}
+
+.availability-label{
+  float:right;
+  margin:-8px;
+}
+
+.service-name-label{
+  float:left;
+  margin:-8px;
+}
+
+.report-up {
+  color:#5CB85C;
+}
+
+.report-warning {
+  color:#FFB733;
+}
+
+.report-down {
+  color:#D9534F;
+}
+
+.page-availability-report-entry {
+  text-align:center;
+  width:50px;
+}
+
+.page-availability-title-left {
+  width:50%;
+  float:left;
+  height:60px;
+}
+
+.page-availability-title-right {
+  width:50%;
+  float:left;
+  text-align:right;
+}
+
+.page-availability-title {
+  font-size:26px;
+  font-weight: bold;
+  line-height:40px;
+}
+
+.page-availability-report-select {
+  border:none;
+  font-size:24px;
+  font-weight:bold;
+  padding-right:10px;
+  margin-left:10px;
+}
+
+.page-availability-report-host {
+  float:right;
+  text-align:right;
+  padding-left:10px;
+}
+
+.page-availability-report-service {
+  float:right;
+  text-align:right;
+}
+
+.widget-availability {
+  float:left;
+  margin:2px;
+}
+
+.widget-availability-host {
+  float:left;
+  margin-bottom: 10px;
+}
+
+.widget-availability-service {
+  float:right;
+  margin-bottom: 10px;
+}
+
+.label-font-border {
+  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+}

html/includes/common/availability-map.inc.php

@@ -83,19 +83,19 @@ if (defined('show_settings')) {
                 $host_down_count++;
             }
 
-            if($directpage == "yes") {
+            if ($directpage == "yes") {
                 $deviceIcon = getImage($device);
                 $temp_output[] = '<a href="' . generate_url(array('page' => 'device', 'device' => $device['device_id'])) . '" ';
                 $temp_output[] = 'title="' . $device['hostname'] . " - " . formatUptime($device['uptime']) . '">';
                 $temp_output[] = '<div class="device-availability ' . $deviceState . '">';
-                $temp_output[] = '<label class="availability-label label ' . $deviceLabel . '">' . $deviceState . '</label>';
+                $temp_output[] = '<label class="availability-label label ' . $deviceLabel . ' label-font-border">' . $deviceState . '</label>';
                 $temp_output[] = '<span class="device-icon">' . $deviceIcon . '</span><br>';
                 $temp_output[] = '<span class="small">' . $device["hostname"] . '</span>';
                 $temp_output[] = '</div></a>';
             } else {
                 $temp_output[] = '<a href="' . generate_url(array('page' => 'device', 'device' => $device['device_id'])) . '" ';
                 $temp_output[] = 'title="' . $device['hostname'] . " - " . formatUptime($device['uptime']) . '">';
-                $temp_output[] = '<label class="label '.$deviceLabel.' widget-availability">'.$deviceState.'</label>';
+                $temp_output[] = '<label class="label '.$deviceLabel.' widget-availability label-font-border">'.$deviceState.'</label>';
                 $temp_output[] = '</a>';
             }
 
@@ -115,26 +115,26 @@ if (defined('show_settings')) {
                 $service_down_count += 1;
             }
 
-            if($directpage == "yes") {
+            if ($directpage == "yes") {
                 $deviceIcon = getImage($service);
                 $temp_output[] = '<a href="' . generate_url(array('page' => 'device', 'tab' => 'services', 'device' => $service['device_id'])) . '"';
                 $temp_output[] = 'title="' . $service['hostname'] . " - " . $service['service_type'] . " - " . $service['service_desc'] . '">';
                 $temp_output[] = '<div class="service-availability ' . $serviceState . '">';
-                $temp_output[] = '<label class="service-name-label label ' . $serviceLabel . '">' . $service["service_type"] . '</label>';
+                $temp_output[] = '<label class="service-name-label label ' . $serviceLabel . ' label-font-border">' . $service["service_type"] . '</label>';
-                $temp_output[] = '<label class="availability-label label ' . $serviceLabel . '">' . $serviceState . '</label>';
+                $temp_output[] = '<label class="availability-label label ' . $serviceLabel . ' label-font-border">' . $serviceState . '</label>';
                 $temp_output[] = '<span class="device-icon">' . $deviceIcon . '</span><br>';
                 $temp_output[] = '<span class="small">' . $service["hostname"] . '</span>';
                 $temp_output[] = '</div></a>';
             } else {
                 $temp_output[] = '<a href="' . generate_url(array('page' => 'device', 'tab' => 'services', 'device' => $service['device_id'])) . '"';
                 $temp_output[] = 'title="' . $service['hostname'] . " - " . $service['service_type'] . " - " . $service['service_desc'] . '">';
-                $temp_output[] = '<label class="label '.$serviceLabel.' widget-availability">'.$service['service_type'].' - '.$serviceState.'</label>';
+                $temp_output[] = '<label class="label '.$serviceLabel.' widget-availability label-font-border">'.$service['service_type'].' - '.$serviceState.'</label>';
                 $temp_output[] = '</a>';
             }
         }
     }
 
-    if($directpage == "yes") {
+    if ($directpage == "yes") {
         $temp_header[] = '<div class="page-availability-title-left">';
         $temp_header[] = '<span class="page-availability-title">Availability map for</span>';
         $temp_header[] = '<select id="mode" class="page-availability-report-select" name="mode">';
@@ -147,43 +147,42 @@ if (defined('show_settings')) {
 
 
     if ($mode == 0 || $mode == 2) {
-        if($directpage == "yes") {
+        if ($directpage == "yes") {
             $temp_header[] = '<div class="page-availability-report-host">';
             $temp_header[] = '<span>Hosts report:</span>';
             $temp_header[] = '<div style="float:right;">';
-            $temp_header[] = '<div class="small page-availability-report-entry"><label class="label label-success">up</label></div>';
+            $temp_header[] = '<div class="small page-availability-report-entry"><label class="label label-success label-font-border">up</label></div>';
             $temp_header[] = '<div class="small page-availability-report-entry"><span>' . $host_up_count . '</span></div>';
             $temp_header[] = '</div>';
             $temp_header[] = '<div style="float:right;">';
-            $temp_header[] = '<div class="small page-availability-report-entry"><label class="label label-warning">warning</label></div>';
+            $temp_header[] = '<div class="small page-availability-report-entry"><label class="label label-warning label-font-border">warning</label></div>';
             $temp_header[] = '<div class="small page-availability-report-entry"><span>' . $host_warn_count . '</span></div>';
             $temp_header[] = '</div>';
             $temp_header[] = '<div style="float:right;">';
-            $temp_header[] = '<div class="small page-availability-report-entry"><label class="label label-danger">down</label></div>';
+            $temp_header[] = '<div class="small page-availability-report-entry"><label class="label label-danger label-font-border">down</label></div>';
             $temp_header[] = '<div class="small page-availability-report-entry"><span>' . $host_down_count . '</span></div>';
             $temp_header[] = '</div>';
             $temp_header[] = '</div>';
         } else {
-            $temp_header[] = '<div class="widget-availability-host">Total hosts <label class="label label-success">up</label> '.$host_up_count.' <label class="label label-warning">warning</label> '.$host_warn_count.' <label class="label label-danger">down</label> '.$host_down_count.'</div>';
+            $temp_header[] = '<div class="widget-availability-host">Total hosts <label class="label label-success label-font-border">up</label> '.$host_up_count.' <label class="label label-warning label-font-border">warning</label> '.$host_warn_count.' <label class="label label-danger label-font-border">down</label> '.$host_down_count.'</div>';
         }
     }
 
     if ($mode == 1 || $mode == 2) {
-        if($directpage == "yes") {
+        if ($directpage == "yes") {
-
             $temp_header[] = '<div class="page-availability-report-service">';
             $temp_header[] = '<span>Services report:</span>';
             $temp_header[] = '<div style="float:right;">';
-            $temp_header[] = '<div class="small page-availability-report-entry"><label class="label label-success">up</label></div>';
+            $temp_header[] = '<div class="small page-availability-report-entry"><label class="label label-success label-font-border">up</label></div>';
             $temp_header[] = '<div class="small page-availability-report-entry"><span>' . $service_up_count . '</span></div>';
             $temp_header[] = '</div>';
             $temp_header[] = '<div style="float:right;">';
-            $temp_header[] = '<div class="small page-availability-report-entry"><label class="label label-danger">down</label></div>';
+            $temp_header[] = '<div class="small page-availability-report-entry"><label class="label label-danger label-font-border">down</label></div>';
             $temp_header[] = '<div class="small page-availability-report-entry"><span>' . $service_down_count . '</span></div>';
             $temp_header[] = '</div>';
             $temp_header[] = '</div>';
         } else {
-            $temp_header[] = '<div class="widget-availability-service">Total services <label class="label label-success">up</label> '.$service_up_count.' <label class="label label-danger">down</label> '.$service_down_count.'</div>';
+            $temp_header[] = '<div class="widget-availability-service">Total services <label class="label label-success label-font-border">up</label> '.$service_up_count.' <label class="label label-danger label-font-border">down</label> '.$service_down_count.'</div>';
         }
     }
 
@@ -191,4 +190,4 @@ if (defined('show_settings')) {
     $temp_header[] = '<br style="clear:both;">';
 
     $common_output = array_merge($temp_header, $temp_output);
-}
+}