Add corner button to restore default servers

This commit is contained in:
gsemaj 2021-09-18 20:29:08 -04:00
parent c2cd2d5cd6
commit 1a9c467758
2 changed files with 87 additions and 55 deletions

View File

@ -1,24 +1,27 @@
:not(input):not(textarea), :not(input):not(textarea)::after, :not(input):not(textarea)::before {
:not(input):not(textarea),
:not(input):not(textarea)::after,
:not(input):not(textarea)::before {
-webkit-user-select: none;
user-select: none;
}
#server-table > .table-striped thead th {
background-color: #34476E;
background-color: #34476e;
}
#server-table > .table-striped tbody tr:nth-of-type(odd) {
background-color: #34476E;
background-color: #34476e;
}
#server-listing-placeholder > td {
background-color: #24314D;
background-color: #24314d;
user-select: none;
-webkit-user-select: none;
}
#server-table > .table-striped tbody tr:nth-of-type(even), th {
background-color: #24314D;
#server-table > .table-striped tbody tr:nth-of-type(even),
th {
background-color: #24314d;
}
#server-table {
@ -27,8 +30,8 @@
}
#of-intro-text {
text-shadow: 1px 1px 8px #4349C4;
color: #4A76B7;
text-shadow: 1px 1px 8px #4349c4;
color: #4a76b7;
font-size: 18px;
}
@ -38,15 +41,17 @@ img {
:root {
--gray-dark: #343a40;
--primary: #6699FF;
--secondary: #384E7A;
--dark: #384E7A;
--primary: #6699ff;
--secondary: #384e7a;
--dark: #384e7a;
}
body {
user-select: none;
background-color: #000;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
#of-versionnumber {
@ -55,49 +60,61 @@ body {
right: 8px;
}
#of-restoreservers {
position: fixed;
bottom: 4px;
left: 8px;
}
.btn-primary {
background-image: url("../../assets/img/btn-primary-bg.png");
background-image: url('../../assets/img/btn-primary-bg.png');
background-repeat: repeat;
}
.btn-success {
background-image: url("../../assets/img/btn-success-bg.png");
background-image: url('../../assets/img/btn-success-bg.png');
background-repeat: repeat;
}
.btn-danger {
background-image: url("../../assets/img/btn-danger-bg.png");
background-image: url('../../assets/img/btn-danger-bg.png');
background-repeat: repeat;
}
#of-aboutmodal > .modal-dialog > .modal-content {
background-color: #093363;
border-color: #6699FF;
border-color: #6699ff;
}
#of-addservermodal > .modal-dialog > .modal-content {
background-color: #093363;
border-color: #6699FF;
border-color: #6699ff;
}
#of-editservermodal > .modal-dialog > .modal-content {
background-color: #093363;
border-color: #6699FF;
border-color: #6699ff;
}
#of-deleteservermodal > .modal-dialog > .modal-content {
background-color: #093363;
border-color: #6699FF;
border-color: #6699ff;
}
.form-control, .form-control:focus {
border-color: #0099FF;
#of-restoreserversmodal > .modal-dialog > .modal-content {
background-color: #093363;
border-color: #6699ff;
}
.form-control,
.form-control:focus {
border-color: #0099ff;
background-color: #000;
color: #fff;
}
select {
border-color: #0099FF;
border-color: #0099ff;
background-color: #000;
color: #fff;
}
@ -118,4 +135,3 @@ button > i {
#server-table .server-listing-entry {
cursor: pointer;
}

View File

@ -42,9 +42,11 @@
<div class="col-4 text-left d-inline-flex justify-content-xl-start">
<button class="btn btn-success mr-1" data-toggle="modal" data-bs-tooltip="" data-placement="bottom" id="of-addserver-button" type="button" title="Add Server" data-target="#of-addservermodal" onclick="deselectServer()"><i class="fas fa-plus"></i></button>
<button class="btn btn-primary mr-1 disabled" data-toggle="modal" data-bs-tooltip="" data-placement="bottom" id="of-editserver-button" type="button" title="Edit Server" data-target="#of-editservermodal" disabled=""><i class="fas fa-edit"></i></button>
<button class="btn btn-danger disabled" data-toggle="modal" data-bs-tooltip="" data-placement="bottom" id="of-deleteserver-button" type="button" title="Delete Server" data-target="#of-deleteservermodal" disabled=""><i class="fas fa-trash-alt"></i></button>
<button class="btn btn-danger mr-1 disabled" data-toggle="modal" data-bs-tooltip="" data-placement="bottom" id="of-deleteserver-button" type="button" title="Delete Server" data-target="#of-deleteservermodal" disabled=""><i class="fas fa-trash-alt"></i></button>
</div>
<div class="col-4 d-inline-flex justify-content-end">
<button class="btn btn-primary disabled" id="of-connect-button" type="button" onclick="connectToServer()" disabled="">Connect&nbsp;<i class="fas fa-angle-double-right"></i></button>
</div>
<div class="col-4 d-inline-flex justify-content-end"><button class="btn btn-primary disabled" id="of-connect-button" type="button" onclick="connectToServer()" disabled="">Connect&nbsp;<i class="fas fa-angle-double-right"></i></button></div>
</div>
</div>
<div class="modal fade" role="dialog" tabindex="-1" id="of-aboutmodal">
@ -105,7 +107,21 @@
</div>
</div>
</div>
<div class="modal fade" role="dialog" tabindex="-1" id="of-restoreserversmodal">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Are you sure?</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p class="lead">Do you really want to restore the default servers?</p>
</div>
<div class="modal-footer"><button class="btn btn-primary border rounded border-primary" type="button" data-dismiss="modal">Cancel</button><button class="btn btn-primary border rounded border-primary btn-danger border-danger" id="deleteserver-button" type="button" data-dismiss="modal" onclick="restoreDefaultServers();">Yes, Restore</button></div>
</div>
</div>
</div>
<div id="of-versionnumber"><a class="text-monospace text-secondary" href="#of-aboutmodal" data-toggle="modal" data-target="#of-aboutmodal">v1.3</a></div>
<div id="of-restoreservers"><a class="text-monospace text-secondary" href="#of-restoreserversmodal" data-toggle="modal" data-target="#of-restoreserversmodal">Reset to Default Servers</a></div>
</section>
<section>
<div id="client" style="width: 100%;height: 100%;margin: 0;padding: 0;background: #000;clear:both;"></div>