mirror of https://github.com/portainer/portainer
456 lines
9.4 KiB
CSS
456 lines
9.4 KiB
CSS
/* Overide Vendor CSS */
|
|
.form-control {
|
|
border: 1px solid var(--border-form-control-color);
|
|
background-color: var(--bg-inputbox);
|
|
color: var(--text-form-control-color);
|
|
}
|
|
|
|
.text-muted {
|
|
color: var(--text-muted-color);
|
|
}
|
|
|
|
.table > thead > tr > th {
|
|
border-bottom: 1px solid var(--border-table-color);
|
|
}
|
|
|
|
.table-hover > tbody > tr:hover {
|
|
background-color: var(--bg-hover-table-color);
|
|
}
|
|
|
|
.switch i,
|
|
.bootbox-form .checkbox i {
|
|
background: var(--bg-switch-box-color);
|
|
}
|
|
|
|
.table > thead > tr > th,
|
|
.table > tbody > tr > th,
|
|
.table > tfoot > tr > th,
|
|
.table > thead > tr > td,
|
|
.table > tbody > tr > td,
|
|
.table > tfoot > tr > td {
|
|
border-top: 1px solid var(--border-table-top-color);
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
a:hover,
|
|
a:focus {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.input-group-addon {
|
|
color: var(--text-input-group-addon-color);
|
|
background-color: var(--bg-input-group-addon-color);
|
|
border: 1px solid var(--border-input-group-addon-color);
|
|
}
|
|
|
|
.btn-default {
|
|
color: var(--text-btn-default-color);
|
|
background-color: var(--bg-btn-default-color);
|
|
border-color: var(--border-btn-default-color);
|
|
}
|
|
|
|
.text-danger {
|
|
color: var(--ui-error-9);
|
|
}
|
|
|
|
.table .table {
|
|
background-color: initial;
|
|
}
|
|
|
|
.table-bordered {
|
|
border-color: var(--border-table-top-color);
|
|
}
|
|
|
|
.table-bordered > thead > tr > th,
|
|
.table-bordered > tbody > tr > th,
|
|
.table-bordered > tfoot > tr > th,
|
|
.table-bordered > thead > tr > td,
|
|
.table-bordered > tbody > tr > td,
|
|
.table-bordered > tfoot > tr > td {
|
|
border-color: var(--border-table-top-color);
|
|
}
|
|
|
|
.md-checkbox input[type='checkbox']:disabled + label:before {
|
|
background: var(--bg-md-checkbox-color) !important;
|
|
border-color: var(--border-md-checkbox-color) !important;
|
|
}
|
|
|
|
.form-control[disabled],
|
|
.form-control[readonly],
|
|
fieldset[disabled] .form-control {
|
|
background-color: var(--bg-form-control-disabled-color) !important;
|
|
}
|
|
|
|
.modal.in .modal-dialog {
|
|
border: var(--border-modal);
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: var(--bg-modal-content-color);
|
|
}
|
|
|
|
.modal-header {
|
|
border-bottom: 1px solid var(--border-modal-header-color);
|
|
}
|
|
|
|
.modal-footer {
|
|
border-top: 1px solid var(--border-modal-header-color);
|
|
}
|
|
|
|
.close {
|
|
color: var(--button-close-color);
|
|
opacity: var(--button-opacity);
|
|
}
|
|
|
|
.close:hover,
|
|
.close:focus {
|
|
color: var(--button-close-color);
|
|
opacity: var(--button-opacity-hover);
|
|
}
|
|
|
|
code {
|
|
color: var(--text-code-color);
|
|
background-color: var(--bg-code-color);
|
|
}
|
|
|
|
.nav-tabs > li.active > a,
|
|
.nav-tabs > li.active > a:hover,
|
|
.nav-tabs > li.active > a:focus {
|
|
color: var(--text-navtabs-color);
|
|
background-color: var(--bg-navtabs-color);
|
|
border: 1px solid var(--border-navtabs-color);
|
|
}
|
|
|
|
.nav-tabs {
|
|
border-bottom: 1px solid var(--border-navtabs-color);
|
|
}
|
|
|
|
.nav-tabs > li > a:hover {
|
|
border-color: var(--border-navtabs-color);
|
|
}
|
|
|
|
.nav > li > a:hover,
|
|
.nav > li > a:focus {
|
|
background-color: var(--bg-navtabs-hover-color);
|
|
}
|
|
|
|
.table > thead > tr > td.active,
|
|
.table > tbody > tr > td.active,
|
|
.table > tfoot > tr > td.active,
|
|
.table > thead > tr > th.active,
|
|
.table > tbody > tr > th.active,
|
|
.table > tfoot > tr > th.active,
|
|
.table > thead > tr.active > td,
|
|
.table > tbody > tr.active > td,
|
|
.table > tfoot > tr.active > td,
|
|
.table > thead > tr.active > th,
|
|
.table > tbody > tr.active > th,
|
|
.table > tfoot > tr.active > th {
|
|
background-color: var(--bg-table-selected-color);
|
|
}
|
|
.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:hover > .active,
|
|
.table-hover > tbody > tr.active:hover > th {
|
|
background-color: var(--bg-table-selected-color);
|
|
}
|
|
|
|
.CodeMirror-gutters {
|
|
background: var(--bg-codemirror-gutters-color);
|
|
border-right: 0px;
|
|
}
|
|
|
|
.CodeMirror-linenumber {
|
|
text-align: left;
|
|
}
|
|
|
|
.CodeMirror pre.CodeMirror-line,
|
|
.CodeMirror pre.CodeMirror-line-like {
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.CodeMirror {
|
|
background: var(--bg-codemirror-color);
|
|
color: var(--text-codemirror-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.CodeMirror-selected {
|
|
background: var(--bg-codemirror-selected-color) !important;
|
|
}
|
|
|
|
.CodeMirror-cursor {
|
|
border-left: 1px solid var(--border-codemirror-cursor-color);
|
|
}
|
|
|
|
.cm-s-default .cm-atom {
|
|
color: var(--text-cm-default-color);
|
|
}
|
|
|
|
.cm-s-default .cm-meta {
|
|
color: var(--text-cm-meta-color);
|
|
}
|
|
|
|
.cm-s-default .cm-string {
|
|
color: var(--text-cm-string-color);
|
|
}
|
|
|
|
.cm-s-default .cm-number {
|
|
color: var(--text-cm-number-color);
|
|
}
|
|
|
|
.dropdown-menu {
|
|
background: var(--bg-dropdown-menu-color);
|
|
}
|
|
|
|
.dropdown-menu > li > a {
|
|
color: var(--text-dropdown-menu-color);
|
|
}
|
|
|
|
pre {
|
|
border: 1px solid var(--border-pre-color);
|
|
background-color: var(--bg-pre-color);
|
|
color: var(--text-pre-color);
|
|
}
|
|
json-tree .key {
|
|
color: var(--text-json-tree-color);
|
|
}
|
|
|
|
json-tree .leaf-value {
|
|
color: var(--text-json-tree-leaf-color);
|
|
}
|
|
|
|
json-tree .branch-preview {
|
|
color: var(--text-json-tree-branch-preview-color);
|
|
}
|
|
|
|
.progress {
|
|
background-color: var(--bg-progress-color);
|
|
}
|
|
|
|
.ui-select-search,
|
|
.ui-select-toggle {
|
|
height: 30px;
|
|
min-width: 260px;
|
|
padding: 4px 12px;
|
|
}
|
|
|
|
.ui-select-toggle {
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
.ui-select-match-text {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
}
|
|
|
|
.ui-select-match-text > a {
|
|
verical-align: middle;
|
|
}
|
|
|
|
.ui-select-bootstrap .ui-select-choices-row > span {
|
|
color: var(--text-ui-select-color);
|
|
}
|
|
|
|
.ui-select-bootstrap .ui-select-choices-row > span:hover,
|
|
.ui-select-bootstrap .ui-select-choices-row > span:focus {
|
|
background-color: var(--bg-ui-select-hover-color);
|
|
color: var(--text-ui-select-hover-color);
|
|
}
|
|
|
|
.motd-body {
|
|
background-color: var(--bg-motd-body-color) !important;
|
|
}
|
|
|
|
.panel-body {
|
|
background-color: var(--bg-panel-body-color) !important;
|
|
}
|
|
|
|
.panel {
|
|
border: 1px solid var(--border-panel-color);
|
|
background-color: var(--bg-panel-body-color);
|
|
border-radius: 8px;
|
|
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
|
|
-moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
|
|
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.theme-information .col-sm-12 {
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.theme-panel {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.bold {
|
|
color: var(--text-summary-color);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.input-sm {
|
|
background-color: var(--bg-input-sm-color);
|
|
border: 1px solid var(--border-input-sm-color);
|
|
}
|
|
|
|
.rzslider .rz-bubble {
|
|
color: var(--text-rzslider-color);
|
|
}
|
|
|
|
.rzslider .rz-bubble.rz-limit {
|
|
color: var(--text-rzslider-limit-color);
|
|
}
|
|
|
|
.rz-bubble.rz-limit.rz-ceil {
|
|
position: absolute;
|
|
right: 0;
|
|
left: auto !important;
|
|
top: -26px;
|
|
}
|
|
|
|
input,
|
|
select,
|
|
textarea {
|
|
background: var(--text-input-textarea);
|
|
}
|
|
|
|
.daterangepicker {
|
|
background-color: var(--bg-daterangepicker-color);
|
|
border: 1px solid var(--border-daterangepicker-color);
|
|
}
|
|
|
|
.daterangepicker .drp-calendar.left {
|
|
background: var(--bg-calendar-color);
|
|
}
|
|
|
|
.daterangepicker .drp-calendar.left .calendar-table {
|
|
background: var(--bg-calendar-table-color);
|
|
}
|
|
|
|
.daterangepicker .drp-calendar.right {
|
|
background: var(--bg-calendar-color);
|
|
}
|
|
|
|
.daterangepicker .drp-calendar.right .calendar-table {
|
|
background: var(--bg-calendar-table-color);
|
|
}
|
|
|
|
.daterangepicker .calendar-table {
|
|
border: 1px solid var(--border-calendar-table);
|
|
}
|
|
|
|
.daterangepicker td.off,
|
|
.daterangepicker td.off.in-range,
|
|
.daterangepicker td.off.start-date,
|
|
.daterangepicker td.off.end-date {
|
|
background-color: var(--bg-daterangepicker-end-date);
|
|
color: var(--text-daterangepicker-end-date);
|
|
}
|
|
|
|
.daterangepicker td.available:hover,
|
|
.daterangepicker th.available:hover {
|
|
background-color: var(--bg-daterangepicker-hover);
|
|
}
|
|
|
|
.daterangepicker td.in-range {
|
|
background-color: var(--bg-daterangepicker-in-range);
|
|
color: var(--text-daterangepicker-in-range);
|
|
}
|
|
|
|
.daterangepicker td.active,
|
|
.daterangepicker td.active:hover {
|
|
background-color: var(--bg-daterangepicker-active);
|
|
color: var(--text-daterangepicker-active);
|
|
}
|
|
|
|
.daterangepicker .drp-buttons {
|
|
border-top: 1px solid var(--border-daterangepicker);
|
|
}
|
|
|
|
.daterangepicker .calendar-table .next span,
|
|
.daterangepicker .calendar-table .prev span {
|
|
border-color: var(--border-pre-next-month);
|
|
}
|
|
|
|
.daterangepicker:after {
|
|
border-bottom: 6px solid var(--border-daterangepicker-after);
|
|
}
|
|
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:hover,
|
|
input:-webkit-autofill:focus,
|
|
input:-webkit-autofill:active {
|
|
-webkit-box-shadow: 0 0 0 30px var(--bg-input-autofill-color) inset !important;
|
|
box-shadow: 0 0 0 30px var(--bg-input-autofill-color) inset !important;
|
|
}
|
|
|
|
input:-webkit-autofill {
|
|
-webkit-text-fill-color: var(--text-input-autofill-color) !important;
|
|
}
|
|
|
|
.btn:hover {
|
|
color: var(--text-button-hover-color);
|
|
}
|
|
|
|
.btn-default:hover {
|
|
background-color: var(--bg-btn-default-hover-color);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
color: var(--white-color) !important;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
color: var(--white-color);
|
|
}
|
|
|
|
/* Overide Vendor CSS */
|
|
|
|
.btn.disabled,
|
|
.btn[disabled],
|
|
fieldset[disabled] .btn {
|
|
pointer-events: none;
|
|
touch-action: none;
|
|
}
|
|
|
|
.multiSelect.inlineBlock button {
|
|
margin: 0;
|
|
}
|
|
|
|
.nav-tabs > li.active > a {
|
|
border: 0px;
|
|
}
|
|
|
|
.label-default {
|
|
line-height: 11px;
|
|
}
|
|
|
|
/* Code Script Style */
|
|
.code-script {
|
|
background-color: var(--bg-code-script-color);
|
|
border-bottom-left-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.nav-container {
|
|
border: 1px solid var(--border-nav-container-color);
|
|
background-color: var(--bg-nav-container-color);
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.nav-tabs > li {
|
|
background-color: var(--bg-nav-tabs-active-color);
|
|
border-top-right-radius: 8px;
|
|
}
|