Interaface. All entities. Making perfect all the small things; 'adding mode' visually sepatated from 'editing'

web/css/main.css

@@ -23,6 +23,14 @@ label {
     cursor: pointer;
 }
 
+label:hover {
+    color: #469DC5;
+}
+
+label:active {
+    color: #F79B44;
+}
+
 .hidden {
     display: none;
 }
@@ -35,7 +43,6 @@ label {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10);
 }
 
-
 .top .nav-logo .logo-container{
     background-color: #fff;
     width: 167px;
@@ -113,7 +120,7 @@ label {
 }
 
 .top-user:hover {
-    color: #fff;
+    color: #6DB8D3;
 }
 
 .top-user:active {
@@ -189,7 +196,8 @@ label {
     padding-bottom: 0;
     font-family: Arial, Helvetica, sans-serif;
     margin: 0;
-    color: #4a82be;
+    color: #3A89AE;
+/*    color: #1677A5;*/
     height: 108px;
     width: 119px;
     float: left;
@@ -263,10 +271,10 @@ label {
     line-height: 1.4em;
     font-size: 9pt;
     font-family: Arial, Helvetica, sans-serif;
-    color: #333;
+//    color: #333;
+    color: #7E7D7F;
     decoration: none;
     overflow: hidden;
-    opacity: 0.8;
 }
 
 .submenu {
@@ -355,8 +363,8 @@ label {
 }
 
 .submenu-button-main:hover {
-    border: 1px solid #aaa;
-    background-color: #adaeae;
+    border: 1px solid #6DB8D3;
+    background-color: #6DB8D3;
 
     -webkit-transition: background .1s ease-in-out;
     -moz-transition: background .1s ease-in-out;
@@ -365,16 +373,15 @@ label {
 }
 
 .submenu-button-select:hover {
-    border: 1px solid #adaeae;
-    background-color: #adaeae;
+    border: 1px solid #6DB8D3;
+    background-color: #6DB8D3;
     color: #fff;
 }
 
 .submenu-button-search:hover {
-    border: 1px solid #adaeae;
-    background-color: #adaeae;
+    border: 1px solid #6DB8D3;
+    background-color: #6DB8D3;
     color: #fff;
-
 }
 
 .submenu-button-main:active {
@@ -384,14 +391,13 @@ label {
 
 .submenu-button-select:active {
     color: #fff;
-    border: 1px solid #f79b44;
-    background-color: #f79b44;
+    border: 1px solid #ccc;
+    background-color: #ccc;
 }
 
 .submenu-button-search:active {
-    color: #fff;
-    border: 1px solid #f79b44;
-    background-color: #f79b44;
+    border: 1px solid #ccc;
+    background-color: #ccc;
 }
 
 .submenu-select-block {
@@ -432,7 +438,7 @@ label {
     background-color: #fff;
     border: 1px solid #ccc;
     border-radius: 3px 3px 3px 3px;
-    padding: 4px 5px;
+    padding: 0px 0px 2px 4px;
 }
 
 
@@ -464,7 +470,7 @@ label {
     font-size: 14px;
     background-color: #fff;
     float: left;
-    padding: 0px 3px 0px 3px;
+    padding: 0px 5px 0px 5px;
     height: 26px;
     width: 232px;
     margin: 0 4px 0 0;
@@ -511,8 +517,8 @@ label {
 }
 
 .vst {
-    padding: 5px 7px 0 7px;
-    margin: 0;
+    padding: 0px 2px 0 2px;
+    margin: 5px 7px 0 7px;
     text-decoration: none;
     color: #999;
     font-size: 11pt;
@@ -520,6 +526,7 @@ label {
 }
 
 .vst:hover {
+    color: #f79b44;
     text-decoration: underline;
 }
 
@@ -587,10 +594,14 @@ label {
 
 .data-add {
     margin: 0;
-    background-color: #f7f6ed;
+    background-color: #D3E1D1;
     border-bottom: 1px solid #e9e9e9;
 }
 
+.mode-add .data-add {
+    background-color: #f7f6ed;
+}
+
 .data-dotted {
     text-align: left;
     vertical-align:top;
@@ -632,7 +643,7 @@ label {
 }
 
 .data-date {
-    letter-spacing: 0.3em;
+    letter-spacing: 0.1em;
     font-size: 8pt;
     color: #333;
 }
@@ -672,6 +683,10 @@ label {
     border-left: 1px solid #f79b44;
 }
 
+.data-controls.do_delete:hover {
+    background-color: #FF6947;
+}
+
 .data-controls:active {
     background-color: #999;
 }
@@ -778,7 +793,7 @@ label {
     vertical-align: top;
     line-height: 1.2em;
     font-size: 10pt;
-    color: #222;
+    color: #7E7D7F;
     padding: 2px 4px 1px 0;
     white-space: nowrap;
 }
@@ -788,28 +803,28 @@ label {
     line-height: 0.8em;
     font-size: 8pt;
     padding: 4px 0 0 0;
-    color: #222;
+    color: #7E7D7F;
 }
 
 .counter-value {
     vertical-align: top;
     line-height: 1.2em;
     font-size: 10pt;
-    color: #222;
+    color: #626163;
     padding: 2px 0 1px 2px;
 }
 
 .log-counter-value {
     vertical-align:top;
     font-size: 12pt;
-    color: #484243;
+    color: #7E7D7F;
 }
 
 .cron-counter-value {
     vertical-align:top;
     line-height: 1.2em;
     font-size: 12pt;
-    color: #484243;
+    color: #7E7D7F;
 }
 
 .name {
@@ -855,6 +870,7 @@ label {
     width: 360px;
     height: 90px;
     font-family:Arial, Helvetica, sans-serif;
+    padding: 9px 1px 6px 14px;
 }
 
 .vst-textinput:hover {
@@ -877,10 +893,11 @@ label {
     border-radius: 3px 3px 3px 3px;
     color: #555;
     font-size: 14pt;
-    padding: 5px;
+    padding: 7px 3px 9px 14px;
     width: 360px;
     height: 28px;
     margin: 2px 6px 0 0;
+    font-family: Arial;
 }
 
 .vst-input:hover {
@@ -905,16 +922,23 @@ label {
     font-family:Arial, Helvetica, sans-serif;
     font-size: 12pt;
     color: #555;
-    height: 30px;
+    height: 43px;
     min-width: 138px;
     margin: 2px 6px 0 0;
+    padding: 8px 1px 6px 10px;
+}
+
+.vst-list option {
+    padding: 6px 1px 6px 15px;
 }
 
+/*
 @-moz-document url-prefix() {
     .vst-list {
         padding-top: 2px;
     }
 }
+*/
 
 .vst-checkbox {
     padding: 5px;
@@ -943,8 +967,11 @@ label {
 
 .button:hover {
     color: #fff;
-    border: 1px solid #999;
-    background-color: #999;
+    border: 1px solid #6DB8D3;
+    background-color: #6DB8D3;
+//    font-size: 14px;
+//    line-height: 28px;
+//    color: #FFF;
 }
 
 .button:active {
@@ -983,9 +1010,11 @@ label {
 }
 
 .generate {
-    color: #2361a1;
+    color: #3A89AE;
     text-decoration: underline;
     cursor: pointer;
+    margin-left: -3px;
+    padding: 0 3px;
 }
 
 .generate:hover {
@@ -998,7 +1027,7 @@ label {
 }
 
 .vst-advanced {
-    color: #2361a1;
+    color: #3A89AE;
     font-size: 10pt;
     letter-spacing: 0.1em;
     text-decoration: none;
@@ -1075,8 +1104,9 @@ label {
 }
 
 .hint {
-    font-size: 14pt;
-    color: #7fa1cb;
+    font-size: 12pt;
+    color: #777;
+    font-style: italic;
 }
 
 .step-top { 
@@ -1096,7 +1126,7 @@ label {
 }
 
 .additional-control {
-    margin-left: 20px;
+    margin-left: 17px;
     color: #2361a1;
     border-bottom: 1px solid #f79b44;
     font-size: 10pt;
@@ -1105,12 +1135,21 @@ label {
 }
 
 .additional-control:hover {
-    color: #7fa1cb;
+    background-color: #f79b44;
+    color: #fff;
 }
 
 .additional-control:active {
     color: #fff;
-    background-color: #f79b44;
+    background-color: #aaa;
+}
+
+.additional-control.do_delete:hover{
+    background-color: #FF6D3C;
+}
+
+.additional-control.do_delete:active{
+    background-color: #aaa;
 }
 
 .ftp-path-prefix {

web/templates/admin/add_cron.html

@@ -24,7 +24,7 @@
         </div>
 
         <form id="vstobjects" name="v_add_cron" method="post">
-            <table class='data'>
+            <table class="data mode-add">
                 <tr class="data-add">
                     <td class="data-dotted">
                         <table class="data-col1">

web/templates/admin/add_db.html

@@ -44,7 +44,7 @@
                     document.v_add_db.v_password.value = randomstring;
                 }
             </script>
-            <table class='data'>
+            <table class="data mode-add">
                 <tr class="data-add">
                     <td class="data-dotted">
                         <table class="data-col1">
@@ -54,7 +54,7 @@
                     <td class="data-dotted">
                         <table class="data-col2" width="600px">
                             <tr>
-                                <td class="step-top" style="color:#777;" >
+                                <td class="step-top hint" style="color:#777;" >
                                     <?php print __('Prefix will be automaticaly added to database name and database user',$user."_");?>
                                 </td>
                             </tr>

web/templates/admin/add_dns.html

@@ -35,7 +35,7 @@
                 }
             </script>
 
-            <table class="data">
+            <table class="data mode-add">
                 <tr class="data-add">
                     <td class="data-dotted">
                         <table class="data-col1">

web/templates/admin/add_dns_rec.html

@@ -24,7 +24,7 @@
         </div>
 
         <form id="vstobjects" name="v_add_dns_rec" method="post">
-            <table class='data'>
+            <table class="data mode-add">
                 <tr class="data-add">
                     <td class="data-dotted">
                         <table class="data-col1">

web/templates/admin/add_firewall.html

@@ -35,7 +35,7 @@
                 }
             </script>
 
-            <table class='data'>
+            <table class="data mode-add">
                 <tr class="data-add">
                     <td class="data-dotted">
                         <table class="data-col1">

web/templates/admin/add_ip.html

@@ -35,7 +35,7 @@
                 }
             </script>
 
-            <table class='data'>
+            <table class="data mode-add">
                 <tr class="data-add">
                     <td class="data-dotted">
                         <table class="data-col1">

web/templates/admin/add_mail.html

@@ -24,7 +24,7 @@
         </div>
 
         <form id="vstobjects" name="v_add_mail" method="post">
-            <table class='data'>
+            <table class="data mode-add">
                 <tr class="data-add">
                     <td class="data-dotted">
                         <table class="data-col1">

web/templates/admin/add_mail_acc.html

@@ -45,7 +45,7 @@
                   }
             </script>
 
-            <table class='data'>
+            <table class="data mode-add">
             <tr class="data-add">
                 <td class="data-dotted">
                     <table class="data-col1">

web/templates/admin/add_package.html

@@ -25,7 +25,7 @@
         </div>
 
         <form id="vstobjects" name="v_add_package" method="post">
-            <table class='data'>
+            <table class="data mode-add">
                 <tr class="data-add">
                     <td class="data-dotted">
                         <table class="data-col1">

web/templates/admin/add_user.html

@@ -43,7 +43,7 @@
                 }
             </script>
 
-            <table class="data">
+            <table class="data mode-add">
                 <tr class="data-add">
                     <td class="data-dotted">
                         <table class="data-col1">

web/templates/admin/add_web.html

@@ -63,7 +63,7 @@
                 }
             </script>
 
-            <table class='data'>
+            <table class="data mode-add">
                 <tr class="data-add">
                 <td class="data-dotted">
                     <table class="data-col1">
@@ -284,7 +284,7 @@
                                     <table <?php echo (!empty($v_ftp)) ? "style='display: block'" : "style='display:none;'"  ?> class="ftptable ftptable-nrm" name="v_add_domain_ftp">
                                         <tr>
                                             <td class="vst-text input-label">
-                                                <?php print __('FTP') ?> #<span class="ftp-user-number"><?php print $i + 1; ?></span> <a class="ftp-remove-user additional-control" onCLick="App.Actions.WEB.remove_ftp_user(this)">(<?php print __('remove') ?>)</a>
+                                                <?php print __('FTP') ?> #<span class="ftp-user-number"><?php print $i + 1; ?></span> <a class="ftp-remove-user additional-control do_delete" onCLick="App.Actions.WEB.remove_ftp_user(this)">(<?php print __('remove') ?>)</a>
                                                 <input type="hidden" class="v-ftp-user-deleted" name="v_ftp_user[<?php print $i ?>][delete]" value="0" />
                                                 <input type="hidden" class="v-ftp-user-is-new" name="v_ftp_user[<?php print $i ?>][is_new]" value="<?php print $ftp_user['is_new'] ?>" />
                                             </td>
@@ -365,7 +365,7 @@
             <table class="ftptable ftptable-nrm" name="v_add_domain_ftp">
                 <tr>
                     <td class="vst-text input-label">
-                        <?php print __('FTP') ?> #<span class="ftp-user-number"></span> <a class="ftp-remove-user additional-control" onCLick="App.Actions.WEB.remove_ftp_user(this)">(<?php print __('remove') ?>)</a>
+                        <?php print __('FTP') ?> #<span class="ftp-user-number"></span> <a class="ftp-remove-user additional-control do_delete" onCLick="App.Actions.WEB.remove_ftp_user(this)">(<?php print __('remove') ?>)</a>
                         <input type="hidden"  class="v-ftp-user-deleted" name="v_ftp_user[%INDEX%][delete]" value="0" />
                         <input type="hidden" class="v-ftp-user-is-new" name="v_ftp_user[%INDEX%][is_new]" value="1" />
                     </td>

web/templates/admin/edit_web.html

@@ -316,7 +316,7 @@
                                     <table style="display:<?php if (empty($v_ftp_user)) { echo 'none';} else {echo 'block';}?> ;" class="ftptable ftptable-nrm" name="v_add_domain_ftp">
                                         <tr>
                                             <td class="vst-text input-label">
-                                                <?php print __('FTP') ?> #<span class="ftp-user-number"><?php print $i + 1; ?></span> <a class="ftp-remove-user additional-control" onCLick="App.Actions.WEB.remove_ftp_user(this)">(<?php print __('remove') ?>)</a>
+                                                <?php print __('FTP') ?> #<span class="ftp-user-number"><?php print $i + 1; ?></span> <a class="ftp-remove-user additional-control do_delete" onCLick="App.Actions.WEB.remove_ftp_user(this)">(<?php print __('remove') ?>)</a>
                                                 <input type="hidden" class="v-ftp-user-deleted" name="v_ftp_user[<?php print $i ?>][delete]" value="0" />
                                                 <input type="hidden" class="v-ftp-user-is-new" name="v_ftp_user[<?php print $i ?>][is_new]" value="<?php print $ftp_user['is_new'] ?>" />
                                             </td>
@@ -398,7 +398,7 @@
             <table class="ftptable ftptable-nrm" name="v_add_domain_ftp">
                 <tr> 
                     <td class="vst-text input-label">
-                        <?php print __('FTP') ?> #<span class="ftp-user-number"></span> <a class="ftp-remove-user additional-control" onCLick="App.Actions.WEB.remove_ftp_user(this)">(<?php print __('remove') ?>)</a>
+                        <?php print __('FTP') ?> #<span class="ftp-user-number"></span> <a class="ftp-remove-user additional-control do_delete" onCLick="App.Actions.WEB.remove_ftp_user(this)">(<?php print __('remove') ?>)</a>
                         <input type="hidden"  class="v-ftp-user-deleted" name="v_ftp_user[%INDEX%][delete]" value="0" />
                         <input type="hidden" class="v-ftp-user-is-new" name="v_ftp_user[%INDEX%][is_new]" value="1" />
                     </td>