jrd/tls-dashboard
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

Update to a dark and light style and change some of the layouts a bit.

Browse Source
This commit is contained in:
Craine Runton 2016-08-25 21:55:21 -06:00
parent 815bf5bcb6
commit c4ea1d134d
4 changed files with 548 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

265
web_service/css/tls-dashboard/styles-dark.css Normal file
View File

@ -0,0 +1,265 @@
/** Common styles **/
div.row.header > div {
padding : 10px 10px 0;
}
div.row.pinned {
position : -webkit-sticky;
position : sticky;
top : -1px;
z-index : 1000;
}
div.row.pinned > div {
padding-top : 5px;
}
.card-inverse .card-text {
color : #eee;
}
.form-group.input-parent {
margin-bottom : 0;
}
.form-inline > .form-group {
margin-right : 10px;
margin-bottom : 0;
}
.form-inline > .form-group > label {
margin-bottom : 4px;
}
/** Dark theme **/
body {
background-color : #153D63;
color : #ddd;
}
.bg-primary {
background-color : #052748;
color : #ddd;
}
.card-header {
border-bottom : .0625rem solid #052748;
background-color : #3F668D;
}
.card-footer {
border-top : .0625rem solid #052748;
background-color : #3F668D;
}
.card-header > .text-muted, .card-footer > .text-muted {
color : #eee;
}
/** Typeahead stylings **/
#hostnames, .input-parent, .twitter-typeahead {
width : 100%;
}
#hostnames, .twitter-typeahead {
background-color : #ddd;
}
.tt-menu {
max-height : 150px;
width : 100%;
border-width : 1px;
border-color : #66afe9;
border-style : solid;
background-color : #ddd;
font-size : 1.25rem;
overflow-y : scroll;
}
.tt-suggestion {
padding : .5rem .5rem;
text-align : left;
font-size : 1rem;
color : #666;
}
.tt-suggestion:hover {
background-color : #6486A7;
color : #ddd;
}
.tt-cursor {
background-color : #6486A7;
color : #ddd;
}
/** Checkbox styles **/
.checkbox {
}
.checkbox label {
display: inline-block;
vertical-align: top;
position: relative;
padding-left: 5px;
}
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
margin-top: 3px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
margin-left: -19px;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
opacity: 0;
z-index: 1;
}
.checkbox input[type="checkbox"]:focus + label::before,
.checkbox input[type="radio"]:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
margin-top: 3px;
padding-left: 3px;
content: "\2713";
}
.checkbox input[type="checkbox"]:indeterminate + label::after,
.checkbox input[type="radio"]:indeterminate + label::after {
display: block;
content: "";
width: 10px;
height: 3px;
background-color: #555555;
border-radius: 2px;
margin-left: -16.5px;
margin-top: 7px;
}
.checkbox input[type="checkbox"]:disabled + label,
.checkbox input[type="radio"]:disabled + label {
opacity: 0.65;
}
.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="radio"]:disabled + label::before {
background-color: #eeeeee;
cursor: not-allowed;
}
.checkbox.checkbox-circle label::before {
border-radius: 50%;
}
.checkbox.checkbox-inline {
margin-top: 0;
}
.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="radio"]:checked + label::before {
background-color: #337ab7;
border-color: #337ab7;
}
.checkbox-primary input[type="checkbox"]:checked + label::after,
.checkbox-primary input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-danger input[type="checkbox"]:checked + label::before,
.checkbox-danger input[type="radio"]:checked + label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:checked + label::after,
.checkbox-danger input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
background-color: #5bc0de;
border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:checked + label::after,
.checkbox-info input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-warning input[type="checkbox"]:checked + label::before,
.checkbox-warning input[type="radio"]:checked + label::before {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:checked + label::after,
.checkbox-warning input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-success input[type="checkbox"]:checked + label::before,
.checkbox-success input[type="radio"]:checked + label::before {
background-color: #5cb85c;
border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:checked + label::after,
.checkbox-success input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-primary input[type="checkbox"]:indeterminate + label::before,
.checkbox-primary input[type="radio"]:indeterminate + label::before {
background-color: #337ab7;
border-color: #337ab7;
}
.checkbox-primary input[type="checkbox"]:indeterminate + label::after,
.checkbox-primary input[type="radio"]:indeterminate + label::after {
background-color: #fff;
}
.checkbox-danger input[type="checkbox"]:indeterminate + label::before,
.checkbox-danger input[type="radio"]:indeterminate + label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:indeterminate + label::after,
.checkbox-danger input[type="radio"]:indeterminate + label::after {
background-color: #fff;
}
.checkbox-info input[type="checkbox"]:indeterminate + label::before,
.checkbox-info input[type="radio"]:indeterminate + label::before {
background-color: #5bc0de;
border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:indeterminate + label::after,
.checkbox-info input[type="radio"]:indeterminate + label::after {
background-color: #fff;
}
.checkbox-warning input[type="checkbox"]:indeterminate + label::before,
.checkbox-warning input[type="radio"]:indeterminate + label::before {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:indeterminate + label::after,
.checkbox-warning input[type="radio"]:indeterminate + label::after {
background-color: #fff;
}
.checkbox-success input[type="checkbox"]:indeterminate + label::before,
.checkbox-success input[type="radio"]:indeterminate + label::before {
background-color: #5cb85c;
border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:indeterminate + label::after,
.checkbox-success input[type="radio"]:indeterminate + label::after {
background-color: #fff;
}

242
web_service/css/tls-dashboard/styles-light.css Normal file
View File

@ -0,0 +1,242 @@
/** Common styles **/
div.row.header > div {
padding : 10px 10px 0;
}
div.row.pinned {
position : -webkit-sticky;
position : sticky;
top : -1px;
z-index : 1000;
}
div.row.pinned > div {
padding-top : 5px;
}
.card-inverse .card-text {
color : #eee;
}
.form-group.input-parent {
margin-bottom : 0;
}
.form-inline > .form-group {
margin-right : 10px;
margin-bottom : 0;
}
.form-inline > .form-group > label {
margin-bottom : 4px;
}
/** Typeahead stylings **/
#hostnames, .input-parent, .twitter-typeahead {
width : 100%;
}
.tt-menu {
max-height : 150px;
width : 100%;
border-width : 1px;
border-color : #66afe9;
border-style : solid;
background-color : #fff;
font-size : 1.25rem;
overflow-y : scroll;
}
.tt-suggestion {
padding : .5rem .5rem;
text-align : left;
font-size : 1rem;
color : #666;
}
.tt-suggestion:hover {
background-color : #6F0300;
color : #eee;
}
.tt-cursor {
background-color : #6F0300;
color : #eee;
}
/** Checkbox styles **/
.checkbox {
}
.checkbox label {
display: inline-block;
vertical-align: top;
position: relative;
padding-left: 5px;
}
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
margin-top: 3px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
margin-left: -19px;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
opacity: 0;
z-index: 1;
}
.checkbox input[type="checkbox"]:focus + label::before,
.checkbox input[type="radio"]:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
margin-top: 3px;
padding-left: 3px;
content: "\2713";
}
.checkbox input[type="checkbox"]:indeterminate + label::after,
.checkbox input[type="radio"]:indeterminate + label::after {
display: block;
content: "";
width: 10px;
height: 3px;
background-color: #555555;
border-radius: 2px;
margin-left: -16.5px;
margin-top: 7px;
}
.checkbox input[type="checkbox"]:disabled + label,
.checkbox input[type="radio"]:disabled + label {
opacity: 0.65;
}
.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="radio"]:disabled + label::before {
background-color: #eeeeee;
cursor: not-allowed;
}
.checkbox.checkbox-circle label::before {
border-radius: 50%;
}
.checkbox.checkbox-inline {
margin-top: 0;
}
.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="radio"]:checked + label::before {
background-color: #337ab7;
border-color: #337ab7;
}
.checkbox-primary input[type="checkbox"]:checked + label::after,
.checkbox-primary input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-danger input[type="checkbox"]:checked + label::before,
.checkbox-danger input[type="radio"]:checked + label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:checked + label::after,
.checkbox-danger input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
background-color: #5bc0de;
border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:checked + label::after,
.checkbox-info input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-warning input[type="checkbox"]:checked + label::before,
.checkbox-warning input[type="radio"]:checked + label::before {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:checked + label::after,
.checkbox-warning input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-success input[type="checkbox"]:checked + label::before,
.checkbox-success input[type="radio"]:checked + label::before {
background-color: #5cb85c;
border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:checked + label::after,
.checkbox-success input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-primary input[type="checkbox"]:indeterminate + label::before,
.checkbox-primary input[type="radio"]:indeterminate + label::before {
background-color: #337ab7;
border-color: #337ab7;
}
.checkbox-primary input[type="checkbox"]:indeterminate + label::after,
.checkbox-primary input[type="radio"]:indeterminate + label::after {
background-color: #fff;
}
.checkbox-danger input[type="checkbox"]:indeterminate + label::before,
.checkbox-danger input[type="radio"]:indeterminate + label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:indeterminate + label::after,
.checkbox-danger input[type="radio"]:indeterminate + label::after {
background-color: #fff;
}
.checkbox-info input[type="checkbox"]:indeterminate + label::before,
.checkbox-info input[type="radio"]:indeterminate + label::before {
background-color: #5bc0de;
border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:indeterminate + label::after,
.checkbox-info input[type="radio"]:indeterminate + label::after {
background-color: #fff;
}
.checkbox-warning input[type="checkbox"]:indeterminate + label::before,
.checkbox-warning input[type="radio"]:indeterminate + label::before {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:indeterminate + label::after,
.checkbox-warning input[type="radio"]:indeterminate + label::after {
background-color: #fff;
}
.checkbox-success input[type="checkbox"]:indeterminate + label::before,
.checkbox-success input[type="radio"]:indeterminate + label::before {
background-color: #5cb85c;
border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:indeterminate + label::after,
.checkbox-success input[type="radio"]:indeterminate + label::after {
background-color: #fff;
}

37
web_service/css/tls-dashboard/styles.css
View File

@ -1,37 +0,0 @@
/** Typeahead stylings **/
#hostnames, .input-parent, .twitter-typeahead {
width: 100%;
}
.twitter-typeahead {
}
.tt-menu {
max-height : 150px;
min-width: 325px;
border-width : 1px;
border-color : #66afe9;
border-style : solid;
background-color : #fff;
font-size : 1.25rem;
overflow-y : scroll;
}
.tt-suggestion {
padding : .5rem .5rem;
text-align: left;
font-size: 1rem;
}
.tt-suggestion:hover {
background-color: #1D44C8;
color: #eee;
}
.tt-cursor {
background-color: #1D44C8;
color: #eee;
}
.form-inline > .form-group {
margin-right: 25px;
margin-bottom: 0;
}
.form-inline > .form-group > label {
margin-bottom: 4px;
}

77
web_service/index.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="./css/tls-dashboard/styles.css" type="text/css" />
<link rel="stylesheet" href="./css/tls-dashboard/styles-dark.css" type="text/css" />
<script src="./js/jquery/jquery-2.2.2.min.js"></script>
<script src="./js/handlebars/handlebars-v4.0.5.min.js"></script>
@ -18,57 +18,62 @@
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 text-center bg-primary"><h1>TLS Certificate Expiration Dashboard</h1></div>
<div class="col-xs-12 text-center bg-primary"><h3><small>Created: <span id="created_date"></span></small></h3></div>
</div>
<div class="row" style="margin-top: 1rem;">
<div class="col-xs-12">
<h4>Filter Results</h4>
<div class="row header">
<div class="col-xs-12 bg-primary">
<h3 >TLS Certificate Expiration Dashboard</h3>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">By status:</p>
<div class="row pinned bg-primary">
<div class="col-xs-12">
<h5>Last Updated on <span id="created_date"></span></h5>
<div class="form-group input-parent">
<input type="text" id="hostnames"
name="hostnames"
class="form-control typeahead"
placeholder="Search for hostname: (e.g. www.example.com)"
autocomplete="off"
tabindex="2">
</div>
</div>
<div class="col-xs-12 hidden-xs-down">
<div class="form-inline">
<div class="form-group">
<label class="form-check-label">
<input type="checkbox" id="response_type_3" value="danger" checked="checked"> Danger
<label>Show :</label>
</div>
<div class="form-group checkbox checkbox-danger">
<input type="checkbox" id="response_type_danger" value="danger" checked="checked" class="styled">
<label for="response_type_danger">
Danger
</label>
</div>
<div class="form-group">
<label class="form-check-label">
<input type="checkbox" id="response_type_2" value="warning" checked="checked"> Warning
<div class="form-group checkbox checkbox-warning">
<input type="checkbox" id="response_type_warning" value="warning" checked="checked" class="styled">
<label for="response_type_warning">
Warning
</label>
</div>
<div class="form-group">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="response_type_1" value="normal" checked="checked"> Normal
<div class="form-group checkbox checkbox-success">
<input type="checkbox" id="response_type_success" value="normal" checked="checked" class="styled">
<label for="form-check-response_type_success">
Normal
</label>
</div>
<div class="form-group">
<label class="form-check-label">
<input type="checkbox" id="response_type_4" value="info" checked="checked"> Info
<div class="form-group checkbox checkbox-info">
<input type="checkbox" id="response_type_info" value="info" checked="checked" class="styled">
<label for="response_type_info">
Info
</label>
</div>
<div class="form-group">
<label class="form-check-label">
<input type="checkbox" id="response_type_5" value="error" checked="checked"> Error
<div class="form-group checkbox checkbox-info">
<input type="checkbox" id="response_type_error" value="error" checked="checked" class="styled">
<label for="response_type_error">
Error
</label>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<p class="lead">By hostname:</p>
<div class="form-group input-parent">
<input type="text" id="hostnames"
name="hostnames"
class="form-control typeahead"
placeholder="www.example.com"
autocomplete="off"
tabindex="2">
</div>
</div>
</div>
<div class="row">
</div>
<div class="row" style="margin-top: 1rem;">
<div class="col-xs-12">