From 57c8dc5942edf72ba2f4df993e1f34fc878b84ec Mon Sep 17 00:00:00 2001
From: Benjamin Sonntag <benjamin@sonntag.fr>
Date: Fri, 22 Jun 2018 17:13:43 +0200
Subject: [PATCH] [enh] css using fontawesome

---
 bureau/admin/dom_edit.inc.php |   6 +-
 bureau/admin/styles/style.css | 125 +++++++++++++++-------------------
 2 files changed, 58 insertions(+), 73 deletions(-)

diff --git a/bureau/admin/dom_edit.inc.php b/bureau/admin/dom_edit.inc.php
index bebf535f..a4a63617 100755
--- a/bureau/admin/dom_edit.inc.php
+++ b/bureau/admin/dom_edit.inc.php
@@ -139,15 +139,15 @@ $dom->unlock();
     <?php } // foreach ?>
 
         <tr class="trbtn">
-            <td colspan="2"><input type="submit" class="inb ok" name="add" onclick='return check_type_selected();' value="<?php
+            <td colspan="2"><button type="submit" class="inb ok" name="add" onclick='return check_type_selected();'><?php
    if ($isedit) {
  __("Edit this subdomain");
 } else {
  __("Add this subdomain");
 } 
-?>" />
+?></button>
 <?php if ($isedit) { ?>
-              <input type="button" class="inb cancel" name="cancel" value="<?php __("Cancel"); ?>" onclick="document.location = 'dom_edit.php?domain=<?php echo $domain; ?>'"/>
+              <button class="inb cancel" name="cancel" onclick="document.location = 'dom_edit.php?domain=<?php echo $domain; ?>'"><?php __("Cancel"); ?></button>
 <?php } ?>
 </td>
         </tr>
diff --git a/bureau/admin/styles/style.css b/bureau/admin/styles/style.css
index 832b0f38..4cdf486f 100644
--- a/bureau/admin/styles/style.css
+++ b/bureau/admin/styles/style.css
@@ -233,7 +233,7 @@ p > input#file + br + .inb, p > input#file + br + .inb + .inb {
   margin-top: 10px;
 }
 
-input.inb, input.ina{
+input.inb, input.ina, button.inb, button.ina {
   color: black;
   white-space: nowrap;
   border: 1px solid black;
@@ -249,13 +249,13 @@ input.inb, input.ina{
   height: auto;
 }
 
-input.inb:hover, input.ina:hover {
+input.inb:hover, input.ina:hover, button.inb:hover, button.ina:hover {
   border: 1px solid black;
   text-decoration: none;
   background-color: #F0F0F0;
 }
 
-input.inb:focus, input.ina.focus {
+input.inb:focus, input.ina:focus, button.inb:focus, button.ina:focus {
   box-shadow: 0 0 0 0.2rem inbrgba(40, 167, 69, 0.5);
 }
 
@@ -272,13 +272,7 @@ input.inb:focus, input.ina.focus {
   border-color: #eea236;
 }
 
-input.inb.cancel:active {
-  color: #fff;
-  background-color: #f0ad4e;
-  border-color: #eea236;
-}
-
-.cancel:active{
+.cancel:active {
   color: #fff;
   background-color: #f0ad4e;
   border-color: #eea236;
@@ -291,7 +285,7 @@ input.inb.cancel:active {
   border-color: #d43f3a;
 }
 
-input.inb.delete:active {
+.inb.delete:active {
   color: #fff;
   background-color: #d9534f;
   border-color: #d43f3a;
@@ -305,7 +299,7 @@ input.inb.delete:active {
   border-color: #255625;
 }
 
-input.inb.ok:active {
+input.inb.ok:active, input.inb.add:active, button.inb.ok:active, button.inb.add:active {
   color: #fff;
   background-color: #449d44;
   border-color: #255625;
@@ -318,12 +312,6 @@ input.inb.ok:active {
   border-color: #255625;
 }
 
-input.inb.add:active {
-  color: #fff;
-  background-color: #449d44;
-  border-color: #255625;
-}
-
 input.ui-state-hover {
   font-weight: normal;
 }
@@ -590,19 +578,27 @@ img {
 #content .alert {
   background-position: 12px center;
   background-repeat: no-repeat;
-  padding-left: 48px;
+  padding-left: 20px;
+  min-height: 32px;
 }
-#content .alert-danger {
-  background-image: url("../images/danger.png");
+#content .alert:before {
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    padding-right: 20px;
+    font-size: 32px;
+    float: left;
 }
-#content .alert-info{
-  background-image: url("../images/info.png");
+#content .alert-danger:before {
+    content:"\f071";
 }
-#content .alert-success {
-  background-image: url("../images/success.png");
+#content .alert-info:before {
+    content:"\f129";
 }
-#content .alert-warning {
-  background-image: url("../images/warning.png");
+#content .alert-success:before {
+    content:"\f058";
+}
+#content .alert-warning:before {
+    content:"\f06a";
 }
 
 .alerte {
@@ -1070,11 +1066,11 @@ div.progress-bar div.txt {
   padding-right: 6px;
 }
 
-.view a, a.view, input.view {
-  background-image: url(../images/code.png);
-  background-repeat: no-repeat;
-  background-position: 8px 5px;
-  padding-left: 30px;
+.view a:before, a.view:before, input.view:before {
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  content:"\f002";
+  padding-right: 6px;
 }
 
 .lock a, a.lock, input.lock {
@@ -1084,35 +1080,32 @@ div.progress-bar div.txt {
   padding-left: 30px;
 }
 
-.settings a, a.settings, input.settings {
-  background-image: url(../icon/settings.png);
-  background-repeat: no-repeat;
-  background-position: 8px 5px;
-  padding-left: 30px;
+.settings a:before, a.settings:before, input.settings:before {
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  content:"\f1de";
+  padding-right: 6px;
 }
 
-.ok a, a.ok, input.ok {
-  background-image: url(../icon/ok.png);
-  background-repeat: no-repeat;
-  background-position: 8px 5px;
-  padding-left: 30px;
+.ok a, a.ok, input.ok, button.ok {
   color: #fff;
   background-color: #5cb85c;
   border-color: #4cae4c;
 }
+.ok a:before, a.ok:before, input.ok:before, button.ok:before {
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  content:"\f00c";
+  padding-right: 6px;
+}
 
-input.ok:hover, input.ok:focus {
-  background-image: url(../icon/ok.png);
-  background-repeat: no-repeat;
-  background-position: 8px 5px;
-  padding-left: 30px;
+input.ok:hover, input.ok:focus, button.ok:focus, button.ok:hover {
   color: #fff;
   background-color: #449d44;
   border-color: #398439;
 }
 
-.add a:before, a.add:before,
-input.add:before, span.add .ina:before {
+.add a:before, a.add:before, input.add:before, span.add .ina:before {
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   content:"\f067";
@@ -1126,7 +1119,7 @@ div > .add a:hover, p > a.add:hover {
   border-color: #4cae4c;
 }
 
-input.add:hover, input.add:focus {
+input.add:hover, input.add:focus, button.add:focus {
   background-image: url(../icon/add.png);
   background-repeat: no-repeat;
   background-position: 8px 5px;
@@ -1136,11 +1129,11 @@ input.add:hover, input.add:focus {
   border-color: #398439;
 }
 
-.delete a, a.delete, input.delete {
-  background-image: url(../icon/delete.png);
-  background-repeat: no-repeat;
-  background-position: 8px 5px;
-  padding-left: 30px;
+.delete a:before, a.delete:before, input.delete:before, button.delete:before {
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  content:"\f00d";
+  padding-right: 6px;
 }
 
 div.delete a:hover,
@@ -1160,26 +1153,18 @@ input.delete:hover, input.delete:focus {
   border-color: #d43f3a;
 }
 
-.cancel a, a.cancel, input.cancel {
-  background-image: url(../icon/cancel.png);
-  background-repeat: no-repeat;
-  background-position: 8px 5px;
-  padding-left: 30px;
+.cancel a:before, a.cancel:before, input.cancel:before, button.cancel:before {
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  content:"\f00d";
+  padding-right: 6px;
 }
 
-input.cancel:hover {
-  background-image: url(../icon/cancel.png);
-  background-repeat: no-repeat;
-  background-position: 8px 5px;
-  padding-left: 30px;
+input.cancel:hover, button.cancel:hover {
   background-color: #fcf8e3;
 }
 
-input.cancel:active {
-  background-image: url(../icon/cancel.png);
-  background-repeat: no-repeat;
-  background-position: 8px 5px;
-  padding-left: 30px;
+input.cancel:active, button.cancel:active {
   background-color: #f0ad4e;
   border-color: #eea236;
 }