modal close button thinner, some icons changed, vertical alignment changed to middle
This commit is contained in:
parent
805d151eea
commit
918e13bf91
6 changed files with 83 additions and 85 deletions
|
@ -2,19 +2,18 @@
|
||||||
{% load i18n %}
|
{% load i18n %}
|
||||||
|
|
||||||
<div class="modal fade bs-example-modal-sm" style="color:black;" id="successModal" tabindex="-1" role="dialog">
|
<div class="modal fade bs-example-modal-sm" style="color:black;" id="successModal" tabindex="-1" role="dialog">
|
||||||
<div class="vertical-alignment-helper">
|
<div class="modal-dialog">
|
||||||
<div class="modal-dialog vertical-align-center">
|
<div class="modal-content">
|
||||||
<div class="modal-content">
|
<div class="modal-header">
|
||||||
<div class="modal-header">
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
</div>
|
||||||
<h4 class="modal-title">{% trans "Request Sent" %}</h4>
|
<div class="modal-body">
|
||||||
</div>
|
<div class="modal-icon"><i class="fa fa-check" aria-hidden="true"></i></div>
|
||||||
<div class="modal-body">
|
<h4 class="modal-title">{% trans "Request Sent" %}</h4>
|
||||||
<p>{% trans "Thank you for your subscription! You will receive a confirmation mail from our team" %}</p>
|
<p class="modal-text">{% trans "Thank you for your subscription! You will receive a confirmation mail from our team" %}</p>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /.modal-content -->
|
</div><!-- /.modal-content -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div><!-- /.modal -->
|
</div><!-- /.modal -->
|
||||||
<script>
|
<script>
|
||||||
// Show modal
|
// Show modal
|
||||||
|
|
|
@ -1,22 +1,22 @@
|
||||||
.dashboard-container {
|
.dashboard-container {
|
||||||
padding-top:70px; padding-bottom: 70px;
|
padding-top:70px; padding-bottom: 70px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 768px;
|
max-width: 768px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-dashboard{
|
.content-dashboard{
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 1120px;
|
max-width: 1120px;
|
||||||
}
|
}
|
||||||
.container-table{
|
.container-table{
|
||||||
margin-top: 35px;
|
margin-top: 35px;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
}
|
}
|
||||||
.container-table table{
|
.container-table table{
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
.borderless td {
|
.borderless td {
|
||||||
border: none !important;
|
border: none !important;
|
||||||
|
@ -36,38 +36,40 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.space-above {
|
.space-above {
|
||||||
margin-top: 4%;
|
margin-top: 4%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.space-above-big {
|
.space-above-big {
|
||||||
margin-top: 20%;
|
margin-top: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table>tbody>tr>td{
|
.table>tbody>tr>td{
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
.fa-separate{
|
.fa-separate{
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
}
|
}
|
||||||
@media (max-width: 540px) {
|
@media (max-width: 540px) {
|
||||||
select {
|
select {
|
||||||
width: 280px;
|
width: 280px;
|
||||||
}
|
}
|
||||||
.content-dashboard {
|
.content-dashboard {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/***********Styles for Model********************/
|
/***********Styles for Model********************/
|
||||||
.modal-content {
|
.modal-content {
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
font-family: 'Lato', sans-serif;
|
font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
float: left;
|
float: left;
|
||||||
|
border-radius: 0;
|
||||||
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-header {
|
.modal-header {
|
||||||
min-height: 25px;
|
min-height: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-header .close {
|
.modal-header .close {
|
||||||
|
@ -86,8 +88,8 @@
|
||||||
.modal-body {
|
.modal-body {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
float: left;
|
float: left;
|
||||||
padding: 0px 30px 15px 30px;
|
padding: 0px 30px 15px 30px;
|
||||||
}
|
}
|
||||||
.modal-body .modal-icon i {
|
.modal-body .modal-icon i {
|
||||||
font-size: 80px;
|
font-size: 80px;
|
||||||
|
@ -113,28 +115,31 @@
|
||||||
padding: 15px 15px;
|
padding: 15px 15px;
|
||||||
}
|
}
|
||||||
@media (min-width: 1300px) {
|
@media (min-width: 1300px) {
|
||||||
.modal-dialog {/* top: 30%; */width: 30%;}
|
.modal-dialog {/* top: 30%; */width: 35%;}
|
||||||
}
|
}
|
||||||
@media (max-width: 1299px) {
|
@media (max-width: 1299px) {
|
||||||
.modal-dialog {
|
.modal-dialog {
|
||||||
/* top: 20%; */
|
/* top: 20%; */
|
||||||
width: 43%;
|
width: 43%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.modal-dialog {
|
.modal-dialog {
|
||||||
/* top: 20%; */
|
/* top: 20%; */
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
.modal-dialog {
|
.modal-dialog {
|
||||||
/* top: 30%; */
|
/* top: 30%; */
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin: 0 auto !important;
|
margin: 0 auto !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* ========= */
|
||||||
@media(min-width: 320px) {
|
@media(min-width: 320px) {
|
||||||
.modal:before {
|
.modal:before {
|
||||||
content: '';
|
content: '';
|
||||||
|
@ -162,9 +167,3 @@
|
||||||
text-align: left;
|
text-align: left;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
border-radius: 0;
|
|
||||||
font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
|
@ -27,7 +27,7 @@
|
||||||
<!-- Custom Fonts -->
|
<!-- Custom Fonts -->
|
||||||
<link href='//fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
|
<link href='//fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
|
||||||
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
||||||
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
<link href="//fonts.googleapis.com/css?family=Lato:100,300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
||||||
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
|
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
|
||||||
<link rel="stylesheet" href="{% static 'hosting/css/owl.carousel.min.css' %}">
|
<link rel="stylesheet" href="{% static 'hosting/css/owl.carousel.min.css' %}">
|
||||||
<link rel="stylesheet" href="{% static 'hosting/css/owl.theme.default.min.css' %}">
|
<link rel="stylesheet" href="{% static 'hosting/css/owl.theme.default.min.css' %}">
|
||||||
|
|
|
@ -52,6 +52,7 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
|
<div class="modal-icon"><i class="fa fa-trash" aria-hidden="true"></i></div>
|
||||||
<h4 class="modal-title" id="ModalLabel">{% trans "Do You want to delete your order?"%}</h4>
|
<h4 class="modal-title" id="ModalLabel">{% trans "Do You want to delete your order?"%}</h4>
|
||||||
|
|
||||||
<form method="post"
|
<form method="post"
|
||||||
|
@ -71,7 +72,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
|
@ -53,7 +53,7 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="modal-icon"><i class="fa fa-question" aria-hidden="true"></i></div>
|
<div class="modal-icon"><i class="fa fa-trash" aria-hidden="true"></i></div>
|
||||||
<h4 class="modal-title" id="ModalLabel">{% trans "Delete SSH Key"%}</h4>
|
<h4 class="modal-title" id="ModalLabel">{% trans "Delete SSH Key"%}</h4>
|
||||||
<p class="modal-text">{% trans "Do You want to delete this key?"%}</p>
|
<p class="modal-text">{% trans "Do You want to delete this key?"%}</p>
|
||||||
<form method="post" action="{% url 'hosting:delete_ssh_key' user_key.id %}">
|
<form method="post" action="{% url 'hosting:delete_ssh_key' user_key.id %}">
|
||||||
|
|
|
@ -166,7 +166,7 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="modal-icon"><i class="fa fa-question" aria-hidden="true"></i></div>
|
<div class="modal-icon"><i class="fa fa-ban" aria-hidden="true"></i></div>
|
||||||
<h4 class="modal-title" id="ModalLabel">{% trans "Terminate your Virtual Machine"%}</h4>
|
<h4 class="modal-title" id="ModalLabel">{% trans "Terminate your Virtual Machine"%}</h4>
|
||||||
<p class="modal-text">{% trans "Are you sure do you want to cancel your Virtual Machine "%} {{virtual_machine.name}} ?</p>
|
<p class="modal-text">{% trans "Are you sure do you want to cancel your Virtual Machine "%} {{virtual_machine.name}} ?</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue