v2.1.0 (#293)
* Fix wrapping when too many hosts are shown (#207) * Update npm packages, fixes CVE-2019-10757 * Revert some breaking packages * Major overhaul - Docker buildx support in CI - Cypress API Testing in CI - Restructured folder layout (insert clean face meme) - Added Swagger documentation and validate API against that (to be completed) - Use common base image for all supported archs, which includes updated nginx with ipv6 support - Updated certbot and changes required for it - Large amount of Hosts names will wrap in UI - Updated packages for frontend - Version bump 2.1.0 * Updated documentation * Fix JWT expire time going crazy. Now set to 1day * Backend JS formatting rules * Remove v1 importer, I doubt anyone is using v1 anymore * Added backend formatting rules and enforce them in Jenkins builds * Fix CI, doesn't need a tty * Thanks bcrypt. Why can't you just be normal. * Cleanup after syntax check Co-authored-by: Marcelo Castagna <margaale@users.noreply.github.com>
This commit is contained in:
jc21
GitHub
34
frontend/scss/custom.scss
Normal file
34
frontend/scss/custom.scss
Normal file
@ -0,0 +1,34 @@
|
||||
$primary-color: #2bcbba;
|
||||
|
||||
.loader {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: darken($primary-color, 10%);
|
||||
}
|
||||
|
||||
.dropdown-item.active, .dropdown-item:active {
|
||||
background-color: $primary-color;
|
||||
}
|
||||
|
||||
.custom-switch-input:checked ~ .custom-switch-indicator {
|
||||
background: $primary-color;
|
||||
}
|
||||
|
||||
.min-100 {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.card-options .dropdown-menu a:not(.btn) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
192
frontend/scss/selectize.scss
Normal file
192
frontend/scss/selectize.scss
Normal file
@ -0,0 +1,192 @@
|
||||
.selectize-dropdown-header {
|
||||
position: relative;
|
||||
padding: 5px 8px;
|
||||
background: #f8f8f8;
|
||||
border-bottom: 1px solid #d0d0d0;
|
||||
-webkit-border-radius: 3px 3px 0 0;
|
||||
-moz-border-radius: 3px 3px 0 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.selectize-dropdown-header-close {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 8px;
|
||||
margin-top: -12px;
|
||||
font-size: 20px !important;
|
||||
line-height: 20px;
|
||||
color: #303030;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.selectize-dropdown-header-close:hover {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.selectize-dropdown.plugin-optgroup_columns .optgroup {
|
||||
float: left;
|
||||
border-top: 0 none;
|
||||
border-right: 1px solid #f2f2f2;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
|
||||
border-right: 0 none;
|
||||
}
|
||||
|
||||
.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
|
||||
border-top: 0 none;
|
||||
}
|
||||
|
||||
.selectize-control.plugin-remove_button [data-value] {
|
||||
position: relative;
|
||||
padding-right: 24px !important;
|
||||
}
|
||||
|
||||
.selectize-control.plugin-remove_button [data-value] .remove {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: inline-block;
|
||||
width: 17px;
|
||||
padding: 2px 0 0 0;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
border-left: 1px solid #0073bb;
|
||||
-webkit-border-radius: 0 2px 2px 0;
|
||||
-moz-border-radius: 0 2px 2px 0;
|
||||
border-radius: 0 2px 2px 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.selectize-control.plugin-remove_button [data-value] .remove:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.selectize-control.plugin-remove_button [data-value].active .remove {
|
||||
border-left-color: #00578d;
|
||||
}
|
||||
|
||||
.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.selectize-control.plugin-remove_button .disabled [data-value] .remove {
|
||||
border-left-color: #aaaaaa;
|
||||
}
|
||||
|
||||
.selectize-control {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.selectize-dropdown {
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
-webkit-font-smoothing: inherit;
|
||||
line-height: 18px;
|
||||
color: #303030;
|
||||
}
|
||||
|
||||
.selectize-control.single {
|
||||
display: inline-block;
|
||||
cursor: text;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.selectize-dropdown {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
margin: -1px 0 0 0;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d0d0d0;
|
||||
border-top: 0 none;
|
||||
-webkit-border-radius: 0 0 3px 3px;
|
||||
-moz-border-radius: 0 0 3px 3px;
|
||||
border-radius: 0 0 3px 3px;
|
||||
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.selectize-dropdown [data-selectable] {
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selectize-dropdown [data-selectable] .highlight {
|
||||
background: rgba(125, 168, 208, 0.2);
|
||||
-webkit-border-radius: 1px;
|
||||
-moz-border-radius: 1px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.selectize-dropdown [data-selectable],
|
||||
.selectize-dropdown .optgroup-header {
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.selectize-dropdown .optgroup:first-child .optgroup-header {
|
||||
border-top: 0 none;
|
||||
}
|
||||
|
||||
.selectize-dropdown .optgroup-header {
|
||||
color: #303030;
|
||||
cursor: default;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.selectize-dropdown .active {
|
||||
color: #495c68;
|
||||
background-color: #f5fafd;
|
||||
}
|
||||
|
||||
.selectize-dropdown .active.create {
|
||||
color: #495c68;
|
||||
}
|
||||
|
||||
.selectize-dropdown .create {
|
||||
color: rgba(48, 48, 48, 0.5);
|
||||
}
|
||||
|
||||
.selectize-dropdown-content {
|
||||
max-height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.description {
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.selectize-dropdown .optgroup-header {
|
||||
padding-top: 7px;
|
||||
font-size: 0.85em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.selectize-dropdown .optgroup {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.selectize-dropdown .optgroup:first-child {
|
||||
border-top: 0 none;
|
||||
}
|
||||
16
frontend/scss/styles.scss
Normal file
16
frontend/scss/styles.scss
Normal file
@ -0,0 +1,16 @@
|
||||
@import "~tabler-ui/dist/assets/css/dashboard";
|
||||
@import "tabler-extra";
|
||||
@import "selectize";
|
||||
@import "custom";
|
||||
|
||||
/* Before any JS content is loaded */
|
||||
#app > .loader, #login > .loader, .container > .loader {
|
||||
position: absolute;
|
||||
left: 49%;
|
||||
top: 40%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.no-js-warning {
|
||||
margin-top: 100px;
|
||||
}
|
||||
165
frontend/scss/tabler-extra.scss
Normal file
165
frontend/scss/tabler-extra.scss
Normal file
@ -0,0 +1,165 @@
|
||||
$teal: #2bcbba;
|
||||
$yellow: #f1c40f;
|
||||
$blue: #467fcf;
|
||||
$pink: #f66d9b;
|
||||
|
||||
.tag {
|
||||
margin-bottom: .5em;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.tag.hover-green:hover, .tag.hover-green:active, .tag.hover-green:focus {
|
||||
background-color: #5eba00;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tag.hover-red:hover, .tag.hover-red:active, .tag.hover-red:focus {
|
||||
background-color: #cd201f;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* For Card bodies where I don't want padding */
|
||||
.card-body.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Teal Outline Buttons */
|
||||
.btn-outline-teal {
|
||||
color: $teal;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: $teal;
|
||||
}
|
||||
|
||||
.btn-outline-teal:hover {
|
||||
color: #fff;
|
||||
background-color: $teal;
|
||||
border-color: $teal;
|
||||
}
|
||||
|
||||
.btn-outline-teal:not(:disabled):not(.disabled):active, .btn-outline-teal:not(:disabled):not(.disabled).active, .show > .btn-outline-teal.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: $teal;
|
||||
border-color: $teal;
|
||||
}
|
||||
|
||||
.tag.hover-teal:hover, .tag.hover-teal:active, .tag.hover-teal:focus {
|
||||
background-color: $teal;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Yellow Outline Buttons */
|
||||
.btn-outline-yellow {
|
||||
color: $yellow;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: $yellow;
|
||||
}
|
||||
|
||||
.btn-outline-yellow:hover {
|
||||
color: #fff;
|
||||
background-color: $yellow;
|
||||
border-color: $yellow;
|
||||
}
|
||||
|
||||
.btn-outline-yellow:not(:disabled):not(.disabled):active, .btn-outline-yellow:not(:disabled):not(.disabled).active, .show > .btn-outline-yellow.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: $yellow;
|
||||
border-color: $yellow;
|
||||
}
|
||||
|
||||
.tag.hover-yellow:hover, .tag.hover-yellow:active, .tag.hover-yellow:focus {
|
||||
background-color: $yellow;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Blue Outline Buttons */
|
||||
.btn-outline-blue {
|
||||
color: $blue;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: $blue;
|
||||
}
|
||||
|
||||
.btn-outline-blue:hover {
|
||||
color: #fff;
|
||||
background-color: $blue;
|
||||
border-color: $blue;
|
||||
}
|
||||
|
||||
.btn-outline-blue:not(:disabled):not(.disabled):active, .btn-outline-blue:not(:disabled):not(.disabled).active, .show > .btn-outline-blue.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: $blue;
|
||||
border-color: $blue;
|
||||
}
|
||||
|
||||
.tag.hover-blue:hover, .tag.hover-blue:active, .tag.hover-blue:focus {
|
||||
background-color: $blue;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Pink Outline Buttons */
|
||||
.btn-outline-pink {
|
||||
color: $pink;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: $pink;
|
||||
}
|
||||
|
||||
.btn-outline-pink:hover {
|
||||
color: #fff;
|
||||
background-color: $pink;
|
||||
border-color: $pink;
|
||||
}
|
||||
|
||||
.btn-outline-pink:not(:disabled):not(.disabled):active, .btn-outline-pink:not(:disabled):not(.disabled).active, .show > .btn-outline-pink.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: $pink;
|
||||
border-color: $pink;
|
||||
}
|
||||
|
||||
.tag.hover-pink:hover, .tag.hover-pink:active, .tag.hover-pink:focus {
|
||||
background-color: $pink;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* dimmer */
|
||||
|
||||
.dimmer .loader {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
/* modal tabs */
|
||||
|
||||
.modal-body.has-tabs {
|
||||
padding: 0;
|
||||
|
||||
.nav-tabs {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* modal wide */
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.modal-dialog.wide {
|
||||
max-width: 700px;
|
||||
margin: 1.75rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Form mod */
|
||||
|
||||
textarea.form-control.text-monospace {
|
||||
font-size: 12px;
|
||||
}
|
||||
Reference in New Issue
Block a user