[enh] css using fontawesome

This commit is contained in:
Benjamin Sonntag 2018-06-22 17:13:43 +02:00
parent 09bb693480
commit 57c8dc5942
2 changed files with 58 additions and 73 deletions

View File

@ -139,15 +139,15 @@ $dom->unlock();
<?php } // foreach ?> <?php } // foreach ?>
<tr class="trbtn"> <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) { if ($isedit) {
__("Edit this subdomain"); __("Edit this subdomain");
} else { } else {
__("Add this subdomain"); __("Add this subdomain");
} }
?>" /> ?></button>
<?php if ($isedit) { ?> <?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 } ?> <?php } ?>
</td> </td>
</tr> </tr>

View File

@ -233,7 +233,7 @@ p > input#file + br + .inb, p > input#file + br + .inb + .inb {
margin-top: 10px; margin-top: 10px;
} }
input.inb, input.ina{ input.inb, input.ina, button.inb, button.ina {
color: black; color: black;
white-space: nowrap; white-space: nowrap;
border: 1px solid black; border: 1px solid black;
@ -249,13 +249,13 @@ input.inb, input.ina{
height: auto; height: auto;
} }
input.inb:hover, input.ina:hover { input.inb:hover, input.ina:hover, button.inb:hover, button.ina:hover {
border: 1px solid black; border: 1px solid black;
text-decoration: none; text-decoration: none;
background-color: #F0F0F0; 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); 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; border-color: #eea236;
} }
input.inb.cancel:active { .cancel:active {
color: #fff;
background-color: #f0ad4e;
border-color: #eea236;
}
.cancel:active{
color: #fff; color: #fff;
background-color: #f0ad4e; background-color: #f0ad4e;
border-color: #eea236; border-color: #eea236;
@ -291,7 +285,7 @@ input.inb.cancel:active {
border-color: #d43f3a; border-color: #d43f3a;
} }
input.inb.delete:active { .inb.delete:active {
color: #fff; color: #fff;
background-color: #d9534f; background-color: #d9534f;
border-color: #d43f3a; border-color: #d43f3a;
@ -305,7 +299,7 @@ input.inb.delete:active {
border-color: #255625; 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; color: #fff;
background-color: #449d44; background-color: #449d44;
border-color: #255625; border-color: #255625;
@ -318,12 +312,6 @@ input.inb.ok:active {
border-color: #255625; border-color: #255625;
} }
input.inb.add:active {
color: #fff;
background-color: #449d44;
border-color: #255625;
}
input.ui-state-hover { input.ui-state-hover {
font-weight: normal; font-weight: normal;
} }
@ -590,19 +578,27 @@ img {
#content .alert { #content .alert {
background-position: 12px center; background-position: 12px center;
background-repeat: no-repeat; background-repeat: no-repeat;
padding-left: 48px; padding-left: 20px;
min-height: 32px;
} }
#content .alert-danger { #content .alert:before {
background-image: url("../images/danger.png"); font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-right: 20px;
font-size: 32px;
float: left;
} }
#content .alert-info{ #content .alert-danger:before {
background-image: url("../images/info.png"); content:"\f071";
} }
#content .alert-success { #content .alert-info:before {
background-image: url("../images/success.png"); content:"\f129";
} }
#content .alert-warning { #content .alert-success:before {
background-image: url("../images/warning.png"); content:"\f058";
}
#content .alert-warning:before {
content:"\f06a";
} }
.alerte { .alerte {
@ -1070,11 +1066,11 @@ div.progress-bar div.txt {
padding-right: 6px; padding-right: 6px;
} }
.view a, a.view, input.view { .view a:before, a.view:before, input.view:before {
background-image: url(../images/code.png); font-family: "Font Awesome 5 Free";
background-repeat: no-repeat; font-weight: 900;
background-position: 8px 5px; content:"\f002";
padding-left: 30px; padding-right: 6px;
} }
.lock a, a.lock, input.lock { .lock a, a.lock, input.lock {
@ -1084,35 +1080,32 @@ div.progress-bar div.txt {
padding-left: 30px; padding-left: 30px;
} }
.settings a, a.settings, input.settings { .settings a:before, a.settings:before, input.settings:before {
background-image: url(../icon/settings.png); font-family: "Font Awesome 5 Free";
background-repeat: no-repeat; font-weight: 900;
background-position: 8px 5px; content:"\f1de";
padding-left: 30px; padding-right: 6px;
} }
.ok a, a.ok, input.ok { .ok a, a.ok, input.ok, button.ok {
background-image: url(../icon/ok.png);
background-repeat: no-repeat;
background-position: 8px 5px;
padding-left: 30px;
color: #fff; color: #fff;
background-color: #5cb85c; background-color: #5cb85c;
border-color: #4cae4c; 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 { input.ok:hover, input.ok:focus, button.ok:focus, button.ok:hover {
background-image: url(../icon/ok.png);
background-repeat: no-repeat;
background-position: 8px 5px;
padding-left: 30px;
color: #fff; color: #fff;
background-color: #449d44; background-color: #449d44;
border-color: #398439; border-color: #398439;
} }
.add a:before, a.add:before, .add a:before, a.add:before, input.add:before, span.add .ina:before {
input.add:before, span.add .ina:before {
font-family: "Font Awesome 5 Free"; font-family: "Font Awesome 5 Free";
font-weight: 900; font-weight: 900;
content:"\f067"; content:"\f067";
@ -1126,7 +1119,7 @@ div > .add a:hover, p > a.add:hover {
border-color: #4cae4c; 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-image: url(../icon/add.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 8px 5px; background-position: 8px 5px;
@ -1136,11 +1129,11 @@ input.add:hover, input.add:focus {
border-color: #398439; border-color: #398439;
} }
.delete a, a.delete, input.delete { .delete a:before, a.delete:before, input.delete:before, button.delete:before {
background-image: url(../icon/delete.png); font-family: "Font Awesome 5 Free";
background-repeat: no-repeat; font-weight: 900;
background-position: 8px 5px; content:"\f00d";
padding-left: 30px; padding-right: 6px;
} }
div.delete a:hover, div.delete a:hover,
@ -1160,26 +1153,18 @@ input.delete:hover, input.delete:focus {
border-color: #d43f3a; border-color: #d43f3a;
} }
.cancel a, a.cancel, input.cancel { .cancel a:before, a.cancel:before, input.cancel:before, button.cancel:before {
background-image: url(../icon/cancel.png); font-family: "Font Awesome 5 Free";
background-repeat: no-repeat; font-weight: 900;
background-position: 8px 5px; content:"\f00d";
padding-left: 30px; padding-right: 6px;
} }
input.cancel:hover { input.cancel:hover, button.cancel:hover {
background-image: url(../icon/cancel.png);
background-repeat: no-repeat;
background-position: 8px 5px;
padding-left: 30px;
background-color: #fcf8e3; background-color: #fcf8e3;
} }
input.cancel:active { input.cancel:active, button.cancel:active {
background-image: url(../icon/cancel.png);
background-repeat: no-repeat;
background-position: 8px 5px;
padding-left: 30px;
background-color: #f0ad4e; background-color: #f0ad4e;
border-color: #eea236; border-color: #eea236;
} }