portainer formatting

CSS/themes/portainer/portainer-base.css

@@ -1,4 +1,3 @@
-
 /*    dP   dP                                                                  dP        */
 /*    88   88                                                                  88        */
 /*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
@@ -18,6 +17,7 @@
         width: 100%;
         overflow: hidden;
     }
+
     body {
         overflow-y: auto;
         height: 100%;
@@ -31,9 +31,11 @@
         -o-background-size: auto, cover;
     }
 }
+
 ::-webkit-scrollbar {
     width: 14px;
 }
+
 ::-webkit-scrollbar-thumb {
     min-height: 50px;
     border: 3px solid transparent;
@@ -41,9 +43,11 @@
     background-color: hsla(0, 0%, 100%, .2);
     background-clip: padding-box;
 }
+
 ::-webkit-scrollbar-track {
     background-color: transparent;
 }
+
 ::-webkit-scrollbar-thumb:hover {
     min-height: 50px;
     border: 3px solid transparent;
@@ -68,7 +72,14 @@
     outline: none !important;
 }
 
-  h1,h2,h3,h4,h5,h6,label,legend,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+label,
+legend,
 ul.sidebar .sidebar-title.endpoint-name {
     color: var(--text-hover);
 }
@@ -76,63 +87,81 @@
 ul.sidebar .sidebar-list .sidebar-sublist a {
     color: var(--text);
 }
+
 a {
     color: var(--link-color);
 }
-  a:focus, a:hover {
+
+a:focus,
+a:hover {
     color: var(--link-color-hover);
     text-decoration: none;
 }
+
 .text-danger {
     color: #f44336;
 }
+
 .fa.red-icon {
     color: #f44336;
 }
+
 .text-muted {
     color: var(--text-muted);
 }
+
 .form-section-title {
     color: var(--text);
 }
+
 ul.sidebar .sidebar-list a {
     color: var(--text);
 }
+
 /* NEWS */
 .motd-body {
     background-color: rgba(255, 255, 255, 0.15) !important;
 }
+
 /* LOGIN */
 .panel-default {
     border-color: transparent;
 }
+
 .panel {
     background-color: transparent;
     border: 1px solid transparent;
     -webkit-box-shadow: none;
     box-shadow: none;
 }
+
 .panel-body {
     background-color: transparent;
 }
+
 /* SIDEBAR */
 #sidebar-wrapper {
     background: rgba(0, 0, 0, 0.25);
 }
+
 .sidebar-header {
     background: rgba(0, 0, 0, 0.25);
 }
+
 ul.sidebar .sidebar-list a.active {
     color: rgb(var(--accent-color));
     background: rgba(255, 255, 255, 0.1);
     border-left: 3px solid rgb(var(--accent-color));
 }
+
 #page-wrapper:not(.open) ul.sidebar .sidebar-title.separator,
-  .sidebar-footer, ul.sidebar .sidebar-list a:hover:not(ul.sidebar .sidebar-list a.active),
+.sidebar-footer,
+ul.sidebar .sidebar-list a:hover:not(ul.sidebar .sidebar-list a.active),
 ul.sidebar .sidebar-main a {
     background: rgba(255, 255, 255, 0.15);
     color: var(--text-hover);
 }
+
 ul.sidebar .sidebar-list a:hover,
 #page-wrapper:not(.open) ul.sidebar .sidebar-list a:hover span {
     border-left: 3px solid rgb(var(--accent-color));
@@ -141,13 +170,16 @@
 ul.sidebar .sidebar-title {
     color: rgb(var(--accent-color));
 }
+
 ul.sidebar .sidebar-list .sidebar-sublist a.active {
     border-left: 3px solid rgb(var(--accent-color));
     background: rgba(255, 255, 255, .08);
 }
+
 ul.sidebar .sidebar-title {
     color: var(--text-hover);
 }
+
 /* Header */
 .row.header {
     background: var(--main-bg-color);
@@ -165,9 +197,11 @@
     background: rgba(0, 0, 0, 0.25);
     border-color: transparent;
 }
+
 .widget .widget-body table thead {
     background: rgba(0, 0, 0, 0.25);
 }
+
 .widget .widget-header {
     color: var(--text-hover);
     background-color: rgba(0, 0, 0, .25);
@@ -178,17 +212,23 @@
 .datatable .toolBar {
     background: rgba(0, 0, 0, 0.25);
 }
+
 .datatable .footer {
     background: rgba(0, 0, 0, 0.25);
     color: var(--text);
 }
-  .blocklist-item--selected, .blocklist-item:hover {
+
+.blocklist-item--selected,
+.blocklist-item:hover {
     background-color: rgba(255, 255, 255, 0.15);
     color: var(--text);
 }
-  .datatable .actionBar, .datatable .toolBar {
+
+.datatable .actionBar,
+.datatable .toolBar {
     color: var(--text);
 }
+
 .datatable .searchIcon {
     color: var(--text);
 }
@@ -196,19 +236,39 @@
 
 /* TABLE */
 
-  .table-hover>tbody>tr:hover, .table>tbody>tr.active>td, .table>tbody>tr.active>th, .table>tbody>tr>td.active, .table>tbody>tr>th.active, .table>tfoot>tr.active>td, .table>tfoot>tr.active>th, .table>tfoot>tr>td.active, .table>tfoot>tr>th.active, .table>thead>tr.active>td, .table>thead>tr.active>th, .table>thead>tr>td.active, .table>thead>tr>th.active {
+.table-hover>tbody>tr:hover,
+.table>tbody>tr.active>td,
+.table>tbody>tr.active>th,
+.table>tbody>tr>td.active,
+.table>tbody>tr>th.active,
+.table>tfoot>tr.active>td,
+.table>tfoot>tr.active>th,
+.table>tfoot>tr>td.active,
+.table>tfoot>tr>th.active,
+.table>thead>tr.active>td,
+.table>thead>tr.active>th,
+.table>thead>tr>td.active,
+.table>thead>tr>th.active {
     background-color: rgba(255, 255, 255, 0.1);
 }
-  .table-hover>tbody>tr.active:hover>td, .table-hover>tbody>tr.active:hover>th, .table-hover>tbody>tr:hover>.active, .table-hover>tbody>tr>td.active:hover, .table-hover>tbody>tr>th.active:hover {
+
+.table-hover>tbody>tr.active:hover>td,
+.table-hover>tbody>tr.active:hover>th,
+.table-hover>tbody>tr:hover>.active,
+.table-hover>tbody>tr>td.active:hover,
+.table-hover>tbody>tr>th.active:hover {
     background-color: rgba(255, 255, 255, 0.1);
 }
+
 .table .table {
     background-color: rgba(255, 255, 255, 0.08);
 }
+
 .label-default {
     color: var(--label-text-color);
     background-color: rgb(var(--accent-color));
 }
+
 /* BUTTONS */
 
 .btn-danger:hover {
@@ -216,79 +276,146 @@
     background-color: #c9302c !important;
     border-color: #ac2925 !important;
 }
-  .btn-primary, .btn-default {
+
+.btn-primary,
+.btn-default {
     color: var(--button-text);
     background-color: var(--button-color);
     border-color: var(--button-color);
 }
-  .btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default,.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
+
+.btn-default.active,
+.btn-default:active,
+.open>.dropdown-toggle.btn-default,
+.btn-default.active.focus,
+.btn-default.active:focus,
+.btn-default.active:hover,
+.btn-default:active.focus,
+.btn-default:active:focus,
+.btn-default:active:hover,
+.open>.dropdown-toggle.btn-default.focus,
+.open>.dropdown-toggle.btn-default:focus,
+.open>.dropdown-toggle.btn-default:hover {
     color: var(--button-text-hover);
     background-color: var(--button-color-hover);
     border-color: var(--button-color-hover);
 }
+
 .btn-link {
     font-weight: 400;
     color: var(--button-color);
     border-radius: 0;
 }
-  .btn-primary:hover, .btn-default:hover {
+
+.btn-primary:hover,
+.btn-default:hover {
     color: var(--button-text-hover);
     background-color: var(--button-color-hover);
     border-color: var(--button-color-hover);
 }
-  .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
+
+.btn.active.focus,
+.btn.active:focus,
+.btn.focus,
+.btn:active.focus,
+.btn:active:focus,
+.btn:focus {
     outline: none;
 }
-  .btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled].focus, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
+
+.btn-primary.disabled.focus,
+.btn-primary.disabled:focus,
+.btn-primary.disabled:hover,
+.btn-primary[disabled].focus,
+.btn-primary[disabled]:focus,
+.btn-primary[disabled]:hover,
+fieldset[disabled] .btn-primary.focus,
+fieldset[disabled] .btn-primary:focus,
+fieldset[disabled] .btn-primary:hover {
     background-color: var(--button-color-hover);
     border-color: var(--button-color-hover);
 }
-  .bootbox-form .checkbox i, .switch i {
+
+.bootbox-form .checkbox i,
+.switch i {
     background: rgba(255, 255, 255, 0.15);
 }
-.btn.focus, .btn:focus, .btn:hover {
+
+.btn.focus,
+.btn:focus,
+.btn:hover {
     color: var(--button-text-hover);
     background-color: var(--button-color-hover);
     border-color: var(--button-color-hover);
 }
-.btn-link:focus, .btn-link:hover {
+
+.btn-link:focus,
+.btn-link:hover {
     background: transparent;
     color: var(--button-color-hover);
     border-color: transparent;
 }
 
-.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
+.btn-primary.active.focus,
+.btn-primary.active:focus,
+.btn-primary.active:hover,
+.btn-primary:active.focus,
+.btn-primary:active:focus,
+.btn-primary:active:hover,
+.open>.dropdown-toggle.btn-primary.focus,
+.open>.dropdown-toggle.btn-primary:focus,
+.open>.dropdown-toggle.btn-primary:hover {
     color: var(--button-text-hover);
     background-color: var(--button-color-hover);
     border-color: var(--button-color-hover);
 }
-.ui-select-bootstrap>.ui-select-match>.btn:hover, .ui-select-bootstrap>.ui-select-match>.btn:focus {
+
+.ui-select-bootstrap>.ui-select-match>.btn:hover,
+.ui-select-bootstrap>.ui-select-match>.btn:focus {
     text-align: left !important;
     color: var(--button-text-hover);
     background-color: rgba(255, 255, 255, 0.25);
     border-color: #00000000;
 }
+
 /* PAGINATION */
-  .pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
+.pagination>.disabled>a,
+.pagination>.disabled>a:focus,
+.pagination>.disabled>a:hover,
+.pagination>.disabled>span,
+.pagination>.disabled>span:focus,
+.pagination>.disabled>span:hover {
     color: var(--text-muted);
     cursor: not-allowed;
     background-color: rgba(255, 255, 255, 0.1);
     border-color: transparent;
 }
-  .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
+
+.pagination>.active>a,
+.pagination>.active>a:focus,
+.pagination>.active>a:hover,
+.pagination>.active>span,
+.pagination>.active>span:focus,
+.pagination>.active>span:hover {
     z-index: 2;
     color: var(--button-text);
     cursor: default;
     background-color: var(--button-color-hover);
     border-color: var(--button-color-hover);
 }
-  .pagination>li>a, .pagination>li>span {
+
+.pagination>li>a,
+.pagination>li>span {
     text-decoration: none;
     color: var(--button-text);
     background-color: var(--button-color);
     border-color: var(--button-color);
 }
-  .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
+
+.pagination>li>a:focus,
+.pagination>li>a:hover,
+.pagination>li>span:focus,
+.pagination>li>span:hover {
     color: var(--button-text-hover);
     background-color: var(--button-color-hover);
     border-color: var(--button-color-hover);
@@ -301,20 +428,24 @@
     border: 1px solid transparent;
 }
 
-  .form-control:not([disabled]):not(select), output {
+.form-control:not([disabled]):not(select),
+output {
     color: var(--text-hover);
 }
+
 .form-control:focus {
     border-color: rgb(var(--accent-color));
     outline: 0;
     -webkit-box-shadow: none;
     box-shadow: none;
 }
+
 .input-group-addon {
     color: var(--button-text);
     background-color: rgba(255, 255, 255, 0.15);
     border: 1px solid transparent;
 }
+
 /* DROPDOWN MENU */
 
 .dropdown-menu {
@@ -328,15 +459,21 @@
     -o-background-size: auto, cover;
     color: var(--text);
 }
+
 .dropdown-menu>li>a,
 .ui-select-bootstrap .ui-select-choices-row>span {
     color: var(--text);
 }
-  .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover,
+
+.dropdown-menu>.active>a,
+.dropdown-menu>.active>a:focus,
+.dropdown-menu>.active>a:hover,
 .ui-select-bootstrap .ui-select-choices-row.active>span {
     background-color: rgba(0, 0, 0, 0.25);
 }
-  .ui-select-bootstrap .ui-select-choices-row>span:focus, .ui-select-bootstrap .ui-select-choices-row>span:hover,
+
+.ui-select-bootstrap .ui-select-choices-row>span:focus,
+.ui-select-bootstrap .ui-select-choices-row>span:hover,
 .ui-select-choices-row:hover {
     color: var(--text-hover);
     background-color: rgba(255, 255, 255, 0.15);
@@ -364,96 +501,129 @@
     background: rgba(0, 0, 0, 0.15);
     border: 1px solid transparent;
 }
+
 .boxselector_wrapper input[type=radio]:checked+label:after {
     color: rgb(var(--accent-color));
     border: 2px solid rgb(var(--accent-color));
     background: var(--label-text-color);
 }
-  .bootbox-form .checkbox :checked~i, .switch :checked+i {
+
+.bootbox-form .checkbox :checked~i,
+.switch :checked+i {
     -webkit-box-shadow: inset 0 0 1px rgb(0 0 0 / 50%), inset 0 0 40px rgb(var(--accent-color));
     box-shadow: inset 0 0 1px rgb(0 0 0 / 50%), inset 0 0 40px rgb(var(--accent-color));
 }
+
 .md-checkbox input[type=checkbox]:checked+label:before {
     background: rgb(var(--accent-color));
     border: none;
 }
+
 .md-checkbox input[type=checkbox]:checked+label:after {
     border-color: var(--label-text-color);
 }
-.fa.blue-icon, .fab.blue-icon {
+
+.fa.blue-icon,
+.fab.blue-icon {
     color: rgb(var(--accent-color));
 }
+
 /* PLACEHOLDER TEXT */
-  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+::-webkit-input-placeholder {
+    /* Chrome/Opera/Safari */
     color: #bbb;
 }
-  ::-moz-placeholder { /* Firefox 19+ */
+
+::-moz-placeholder {
+    /* Firefox 19+ */
     color: #bbb;
 }
-  :-ms-input-placeholder { /* IE 10+ */
+
+:-ms-input-placeholder {
+    /* IE 10+ */
     color: #bbb;
 }
-  :-moz-placeholder { /* Firefox 18- */
+
+:-moz-placeholder {
+    /* Firefox 18- */
     color: #bbb;
 }
+
 /* STACKS */
 .CodeMirror {
     background: rgba(255, 255, 255, 0.10);
     color: white;
 }
+
 .CodeMirror-gutters {
     border-right: 1px solid rgba(255, 255, 255, 0.25);
     background-color: rgba(0, 0, 0, 0.25);
     caret-color: white;
 }
+
 .CodeMirror-linenumber {
     color: rgb(var(--accent-color));
 }
-    .CodeMirror-line::selection, .CodeMirror-line>span::selection, .CodeMirror-line>span>span::selection {
+
+.CodeMirror-line::selection,
+.CodeMirror-line>span::selection,
+.CodeMirror-line>span>span::selection {
     background: #d7d4f0;
 }
+
 .cm-s-default .cm-atom {
     color: rgb(var(--accent-color));
 }
+
 /* NAVIGATION */
-    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
+.nav-tabs>li.active>a,
+.nav-tabs>li.active>a:focus,
+.nav-tabs>li.active>a:hover {
     color: #fff;
     cursor: default;
     background-color: rgba(255, 255, 255, 0.15);
     border: 1px solid #ddd0;
     border-bottom-color: transparent;
 }
+
 .nav-tabs>li>a:hover {
     border-color: transparent;
 }
 
-    .nav>li>a:focus, .nav>li>a:hover {
+.nav>li>a:focus,
+.nav>li>a:hover {
     text-decoration: none;
     background-color: rgba(0, 0, 0, 0.25);
 }
+
 .nav-tabs>li>a {
     border: 1px solid rgba(0, 0, 0, 0);
     background: rgba(0, 0, 0, 0.15);
 }
+
 /* LOGS */
 .log_viewer {
     color: #fff;
     background-color: rgba(255, 255, 255, 0.1);
     border: 1px solid transparent;
 }
+
 /* JSON TREE */
 json-tree {
     color: #eee;
 }
+
 json-tree .key {
     color: rgb(var(--accent-color));
     padding-right: 5px;
 }
+
 pre {
     color: #fff;
     background-color: rgba(255, 255, 255, .1);
     border: 1px solid transparent;
 }
+
 /* MODAL */
 .close {
     float: right;
@@ -465,13 +635,16 @@
     filter: alpha(opacity=100);
     opacity: 1;
 }
-    .close:focus, .close:hover {
+
+.close:focus,
+.close:hover {
     color: var(--text-hover);
     text-decoration: none;
     cursor: pointer;
     filter: alpha(opacity=100);
     opacity: 1;
 }
+
 .modal-content {
     background: var(--modal-bg-color);
     background-repeat: repeat, no-repeat;
@@ -482,6 +655,7 @@
     -moz-background-size: auto, cover;
     -o-background-size: auto, cover;
 }
+
 .modal-header {
     background: var(--modal-header-color);
     background-repeat: repeat, no-repeat;
@@ -493,6 +667,7 @@
     -o-background-size: auto, cover;
     border-bottom: 1px solid rgb(var(--accent-color));
 }
+
 .modal-footer {
     background: var(--modal-footer-color);
     background-repeat: repeat, no-repeat;
@@ -504,29 +679,34 @@
     -o-background-size: auto, cover;
     border-top: 1px solid rgb(var(--accent-color));
 }
+
 /* STACKS / SERVICES TABLES */
 .widget .widget-body table tbody {
     background-color: transparent !important;
     background: transparent !important;
 }
+
 .widget .widget-body table .ng-scope tr {
     background: rgba(0, 0, 0, .25) !important;
     background-color: rgba(0, 0, 0, .25) !important;
 }
+
 .widget .widget-body table thead {
     background-color: rgba(0, 0, 0, .25) !important;
     background: rgba(0, 0, 0, .25) !important;
 }
+
 .widget .widget-body table tbody .ng-isolate-scope div {
     background-color: rgba(0, 0, 0, .25) !important;
     background: rgba(0, 0, 0, 0) !important;
 }
+
 .widget .widget-body table tbody tr:hover {
     background-color: #0000 !important;
     background: rgba(0, 0, 0, 0) !important;
 }
+
 .widget .widget-body table thead tr:hover {
     background-color: rgba(0, 0, 0, .35) !important;
     background: rgba(0, 0, 0, .35) !important;
 }
-