From d5e855cf4024afce26217d47ca906da627b7672e Mon Sep 17 00:00:00 2001
From: Serghey Rodin <serghey.rodin@gmail.com>
Date: Mon, 22 Apr 2013 11:57:00 +0300
Subject: [PATCH] highlited active status

---
 web/templates/admin/list_rrd.html   |  8 ++--
 web/templates/admin/list_stats.html |  2 +-
 web/templates/header.html           | 63 ++++++++++++++++++++++++-----
 3 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/web/templates/admin/list_rrd.html b/web/templates/admin/list_rrd.html
index fa8f931b7..7686264a6 100644
--- a/web/templates/admin/list_rrd.html
+++ b/web/templates/admin/list_rrd.html
@@ -2,10 +2,10 @@
                                     <tr>
                                         <td style="padding: 2px 0 0 6px">
                                             <div style="submenu-button-block">
-                                                <a class="vst" <?php if ((empty($_GET['period'])) || ($_GET['period'] == 'daily')) echo "style='color: #174f82'" ?> href="?period=daily"><?php print _('Daily');?></a>
-                                                <a class="vst" <?php if ((!empty($_GET['period'])) && ($_GET['period'] == 'weekly')) echo "style='color: #174f82'" ?> href="?period=weekly"><?php print _('Weekly');?></a>
-                                                <a class="vst" <?php if ((!empty($_GET['period'])) && ($_GET['period'] == 'monthly')) echo "style='color: #174f82'" ?> href="?period=monthly"><?php print _('Monthly');?></a>
-                                                <a class="vst" <?php if ((!empty($_GET['period'])) && ($_GET['period'] == 'yearly')) echo "style='color: #174f82'" ?> href="?period=yearly"><?php print _('Yearly');?></a>
+                                                <a class="vst<?php if ((empty($_GET['period'])) || ($_GET['period'] == 'daily')) echo "-selected" ?>" href="?period=daily"><?php print _('Daily');?></a>
+                                                <a class="vst<?php if ((!empty($_GET['period'])) && ($_GET['period'] == 'weekly')) echo "-selected" ?>" href="?period=weekly"><?php print _('Weekly');?></a>
+                                                <a class="vst<?php if ((!empty($_GET['period'])) && ($_GET['period'] == 'monthly')) echo "-selected" ?>" href="?period=monthly"><?php print _('Monthly');?></a>
+                                                <a class="vst<?php if ((!empty($_GET['period'])) && ($_GET['period'] == 'yearly')) echo "-selected" ?>" href="?period=yearly"><?php print _('Yearly');?></a>
                                             </div>
                                             <div class="submenu-search-block">
                                                 <form action="/search/" method="get">
diff --git a/web/templates/admin/list_stats.html b/web/templates/admin/list_stats.html
index 89c981819..ec07aa791 100644
--- a/web/templates/admin/list_stats.html
+++ b/web/templates/admin/list_stats.html
@@ -3,7 +3,7 @@
                                         <td style="padding: 2px 0 0 6px">
                                             <div class="submenu-button-block">
                                                 <form action="/list/stats/" method="get" id="objects">
-                                                <a class="vst" <?php if (empty($_GET['user'])) echo "style='color: #174f82'"; ?> href='/list/stats/'><?php print _('Overall Statistics');?></a>
+                                                <a class="vst<?php if (empty($_GET['user'])) echo "-selected"; ?>" href='/list/stats/'><?php print _('Overall Statistics');?></a>
                                                 <div class="submenu-select-block">
                                                 <select class="submenu-select-dropdown" name="user">
                                                     <option value=""><?php print _('show per user');?></option>
diff --git a/web/templates/header.html b/web/templates/header.html
index 2e5e46ed7..e72ed87bb 100644
--- a/web/templates/header.html
+++ b/web/templates/header.html
@@ -70,8 +70,8 @@
             }
 
             .top-link:active{
-                color: #ccc;
-                background: #999;
+                color: #fff;
+                background: #f79b44;
             }
 
             .top-selected-link {
@@ -94,7 +94,12 @@
             }
 
             .top-logout:hover {
-                color: white;
+                color: #;
+            }
+
+            .top-logout:active {
+                color: #fff;
+                background-color: #f79b44;
             }
 
             .nav-logo {
@@ -194,7 +199,7 @@
             }
 
             .submenu-button {
-                width: 120px;
+                width: 130px;
                 height: 24px;
                 cursor: pointer;
                 color: #333;
@@ -217,12 +222,14 @@
             }
 
             .submenu-button:active {
-                background-color: #e6e6e6;
+                color: #fff;
+                border: 1px solid #f79b44;
+                background-color: #f79b44;
             }
 
             .submenu-select-block {
                 float:left;
-                padding-left: 28px;
+                padding-left: 18px;
             }
 
             .submenu-select-link {
@@ -240,6 +247,12 @@
                 text-decoration: underline;
             }
 
+            .submenu-select-link:active {
+                color: #fff;
+                background-color: #f79b44;
+                text-decoration: underline;
+            }
+
             .submenu-select-dropdown {
                 font-family:Arial, Helvetica, sans-serif;
                 color: #333333;
@@ -300,7 +313,7 @@
             }
 
             .vst {
-                padding: 0 8px 0 0;
+                padding: 0 4px 0 4px;
                 margin: 0;
                 text-decoration: none;
                 color: #999;
@@ -313,7 +326,26 @@
             }
 
             .vst:active {
+                color: #fff;
+                background-color: #f79b44;
+            }
+
+            .vst-selected {
+                padding: 0 4px 0 4px;
+                margin: 0;
+                text-decoration: none;
                 color: #174f82;
+                font-size: 12pt;
+                float: left;
+            }
+
+            .vst-selected:hover {
+                text-decoration: underline;
+            }
+
+            .vst-selected:active {
+                color: #fff;
+                background-color: #f79b44;
             }
 
             .data {
@@ -656,13 +688,15 @@
             }
 
             .button:active {
-                background-color: #e6e6e6;
+                color: #fff;
+                border: 1px solid #f79b44;
+                background-color: #f79b44;
             }
 
             .genpass {
                 color: #34536a;
                 font-size: 8pt;
-                padding: 0 5px 0 8px;
+                padding: 0 5px;
                 letter-spacing: 0.1em;
                 text-decoration: underline;
             }
@@ -671,11 +705,17 @@
                 color: #7fa1cb;
             }
 
+            .genpass:active {
+                background-color: #f79b44;
+                color: #fff;
+            }
+
             .vst-advanced {
                 color: #34536a;
                 font-size: 10pt;
                 letter-spacing: 0.1em;
                 text-decoration: none;
+                padding: 0 2px;
                 border-bottom: 1px solid #f79b44;
             }
 
@@ -683,6 +723,11 @@
                 color: #7fa1cb;
             }
 
+            .vst-advanced:active {
+                color: #fff;
+                background-color: #f79b44;
+            }
+
             .fixed{
                 position: fixed;
                 border: none;