mirror of
https://github.com/portainer/portainer.git
synced 2025-08-05 22:05:23 +02:00
feat(ui): css tidy up for ui change EE-3795 (#7354)
* css tidy up for ui change
This commit is contained in:
Richard Wei
GitHub
parent
03590d46e6
commit
75c1b485ab
51 changed files with 151 additions and 140 deletions
22
app/assets/css/bootstrap-override.css
vendored
22
app/assets/css/bootstrap-override.css
vendored
|
|
@ -345,6 +345,8 @@ input:checked + .slider:before {
|
|||
/* Status Indicator Inside Table Section Label Style */
|
||||
.table .label {
|
||||
border-radius: 8px !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table .label .label-danger {
|
||||
|
|
@ -387,3 +389,23 @@ input:checked + .slider:before {
|
|||
font-size: 85%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.datatable .footer .paginationControls .pagination {
|
||||
border: 1px solid var(--border-pagination-color);
|
||||
}
|
||||
|
||||
.pagination li button {
|
||||
color: var(--ui-gray-9) !important;
|
||||
}
|
||||
|
||||
.pagination li:active button,
|
||||
.pagination li:focus button {
|
||||
border: 1px solid var(--ui-gray-5) !important;
|
||||
}
|
||||
|
||||
.pagination li a {
|
||||
text-decoration: none !important;
|
||||
cursor: pointer;
|
||||
color: var(--ui-gray-9) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,20 +45,19 @@
|
|||
}
|
||||
|
||||
.btn-dangerlight {
|
||||
background-color: var(--ui-error-2) !important;
|
||||
border: 1px solid var(--border-button-group);
|
||||
color: var(--ui-error-8);
|
||||
border: 1px solid var(--text-button-dangerlight-color);
|
||||
color: var(--ui-error-9);
|
||||
}
|
||||
|
||||
.btn-dangerlight:hover {
|
||||
color: var(--ui-error-9) !important;
|
||||
background-color: var(--ui-error-3) !important;
|
||||
background-color: var(--ui-error-2) !important;
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
background-color: var(--bg-button-group);
|
||||
background-color: var(--bg-button-group-color);
|
||||
border: 1px solid var(--border-button-group);
|
||||
color: var(--text-button-group);
|
||||
color: var(--text-button-group-color);
|
||||
}
|
||||
|
||||
.btn-light:hover {
|
||||
|
|
@ -73,9 +72,9 @@
|
|||
|
||||
/* Button Secondary */
|
||||
.btn-secondary {
|
||||
background-color: var(--ui-blue-2);
|
||||
border: 1px solid var(--ui-blue-8);
|
||||
color: var(--ui-blue-9);
|
||||
background-color: var(--ui-blue-2) !important;
|
||||
border: 1px solid var(--ui-blue-8) !important;
|
||||
color: var(--ui-blue-9) !important;
|
||||
}
|
||||
|
||||
.btn-secondary:hover,
|
||||
|
|
@ -90,3 +89,21 @@
|
|||
border: 1px solid var(--ui-blue-1);
|
||||
color: var(--ui-blue-5);
|
||||
}
|
||||
|
||||
form a,
|
||||
.form-group a,
|
||||
.hyperlink {
|
||||
color: var(--ui-blue-8);
|
||||
}
|
||||
|
||||
form a:hover,
|
||||
.form-group a:hover,
|
||||
.hyperlink:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--ui-blue-9);
|
||||
}
|
||||
|
||||
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
|
||||
background: var(--bg-button-group-color) !important;
|
||||
color: var(--text-button-group-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,8 @@ pr-icon {
|
|||
stroke: var(--white-color);
|
||||
}
|
||||
|
||||
.icon-primary {
|
||||
.icon-primary,
|
||||
.icon-blue {
|
||||
color: var(--ui-blue-8);
|
||||
}
|
||||
|
||||
|
|
@ -63,7 +64,8 @@ pr-icon {
|
|||
stroke: var(--black-color);
|
||||
}
|
||||
|
||||
.icon-warning {
|
||||
.icon-warning,
|
||||
.icon-orange {
|
||||
color: var(--ui-warning-8);
|
||||
}
|
||||
|
||||
|
|
@ -73,11 +75,11 @@ pr-icon {
|
|||
}
|
||||
|
||||
.icon-danger {
|
||||
color: var(--ui-error-8);
|
||||
color: var(--ui-error-9);
|
||||
}
|
||||
|
||||
.icon.icon-danger-alt {
|
||||
fill: var(--ui-error-8);
|
||||
fill: var(--ui-error-9);
|
||||
stroke: var(--white-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -119,9 +119,10 @@
|
|||
--bg-pre-color: var(--grey-14);
|
||||
--bg-blocklist-item-selected-color: var(--grey-12);
|
||||
--bg-progress-color: var(--grey-14);
|
||||
--bg-pagination-color: var(--white-color);
|
||||
--bg-pagination-color: var(--ui-blue-3);
|
||||
--border-pagination-color: var(--ui-white);
|
||||
--bg-pagination-span-color: var(--white-color);
|
||||
--bg-pagination-hover-color: var(--grey-11);
|
||||
--bg-pagination-hover-color: var(--ui-blue-3);
|
||||
--bg-ui-select-hover-color: var(--grey-14);
|
||||
--bg-motd-body-color: var(--grey-20);
|
||||
--bg-item-highlighted-color: var(--grey-21);
|
||||
|
|
@ -162,6 +163,8 @@
|
|||
--bg-inputbox: var(--ui-gray-2);
|
||||
--bg-dropdown-hover: var(--ui-gray-3);
|
||||
--bg-webeditor-color: var(--ui-gray-3);
|
||||
--bg-button-group-color: var(--ui-white);
|
||||
--bg-pagination-disabled-color: var(--ui-white);
|
||||
|
||||
--text-main-color: var(--grey-7);
|
||||
--text-body-color: var(--grey-6);
|
||||
|
|
@ -192,8 +195,8 @@
|
|||
--text-blocklist-item-selected-color: var(--grey-37);
|
||||
--text-progress-bar-color: var(--grey-27);
|
||||
--text-pagination-color: var(--grey-26);
|
||||
--text-pagination-span-color: var(--ui-gray-3);
|
||||
--text-pagination-span-hover-color: var(--blue-4);
|
||||
--text-pagination-span-color: var(--grey-3);
|
||||
--text-pagination-span-hover-color: var(--grey-3);
|
||||
--text-ui-select-color: var(--grey-6);
|
||||
--text-ui-select-hover-color: var(--grey-28);
|
||||
--text-summary-color: var(--black-color);
|
||||
|
|
@ -207,6 +210,8 @@
|
|||
--text-button-hover-color: var(--grey-6);
|
||||
--text-small-select-color: var(--grey-25);
|
||||
--text-bootbox: var(--ui-gray-7);
|
||||
--text-button-group-color: var(--ui-gray-9);
|
||||
--text-button-dangerlight-color: var(--ui-error-5);
|
||||
|
||||
--border-color: var(--grey-42);
|
||||
--border-widget-color: var(--grey-43);
|
||||
|
|
@ -227,9 +232,9 @@
|
|||
--border-codemirror-gutters-color: var(--grey-19);
|
||||
--border-pre-color: var(--grey-43);
|
||||
--border-blocklist-item-selected-color: var(--grey-46);
|
||||
--border-pagination-color: var(--grey-19);
|
||||
--border-pagination-span-color: var(--grey-19);
|
||||
--border-pagination-hover-color: var(--grey-19);
|
||||
--border-pagination-color: var(--ui-white);
|
||||
--border-pagination-span-color: var(--ui-white);
|
||||
--border-pagination-hover-color: var(--ui-white);
|
||||
--border-multiselect-button-color: var(--grey-48);
|
||||
--border-searchbar-color: var(--grey-10);
|
||||
--border-panel-color: var(--white-color);
|
||||
|
|
@ -309,8 +314,8 @@
|
|||
--bg-blocklist-item-selected-color: var(--grey-3);
|
||||
--bg-progress-color: var(--grey-3);
|
||||
--bg-pagination-color: var(--grey-3);
|
||||
--bg-pagination-span-color: var(--grey-3);
|
||||
--bg-pagination-hover-color: var(--grey-4);
|
||||
--bg-pagination-span-color: var(--grey-1);
|
||||
--bg-pagination-hover-color: var(--grey-3);
|
||||
--bg-ui-select-hover-color: var(--grey-3);
|
||||
--bg-motd-body-color: var(--grey-1);
|
||||
--bg-item-highlighted-color: var(--grey-2);
|
||||
|
|
@ -346,6 +351,8 @@
|
|||
--bg-inputbox: var(--grey-2);
|
||||
--bg-dropdown-hover: var(--grey-3);
|
||||
--bg-webeditor-color: var(--ui-gray-warm-9);
|
||||
--bg-button-group-color: var(--ui-black);
|
||||
--bg-pagination-disabled-color: var(--grey-1);
|
||||
|
||||
--text-main-color: var(--white-color);
|
||||
--text-body-color: var(--white-color);
|
||||
|
|
@ -376,8 +383,8 @@
|
|||
--text-blocklist-item-selected-color: var(--white-color);
|
||||
--text-progress-bar-color: var(--white-color);
|
||||
--text-pagination-color: var(--white-color);
|
||||
--text-pagination-span-color: var(--ui-gray-3);
|
||||
--text-pagination-span-hover-color: var(--white-color);
|
||||
--text-pagination-span-color: var(--ui-white);
|
||||
--text-pagination-span-hover-color: var(--ui-white);
|
||||
--text-ui-select-color: var(--white-color);
|
||||
--text-ui-select-hover-color: var(--white-color);
|
||||
--text-summary-color: var(--white-color);
|
||||
|
|
@ -393,6 +400,8 @@
|
|||
--text-button-hover-color: var(--white-color);
|
||||
--text-small-select-color: var(--grey-7);
|
||||
--text-bootbox: var(--white-color);
|
||||
--text-button-group-color: var(--ui-white);
|
||||
--text-button-dangerlight-color: var(--ui-error-7);
|
||||
|
||||
--border-color: var(--grey-3);
|
||||
--border-widget-color: var(--grey-1);
|
||||
|
|
@ -413,8 +422,7 @@
|
|||
--border-codemirror-gutters-color: var(--grey-26);
|
||||
--border-pre-color: var(--grey-3);
|
||||
--border-blocklist-item-selected-color: var(--grey-38);
|
||||
--border-pagination-color: var(--grey-3);
|
||||
--border-pagination-span-color: var(--grey-3);
|
||||
--border-pagination-span-color: var(--grey-1);
|
||||
--border-pagination-hover-color: var(--grey-3);
|
||||
--border-boxselector-wrapper-hover: 3px solid var(--blue-8);
|
||||
--border-panel-color: var(--grey-2);
|
||||
|
|
@ -429,6 +437,7 @@
|
|||
--border-bootbox: var(--ui-gray-9);
|
||||
--border-blocklist: var(--ui-gray-9);
|
||||
--border-widget: var(--ui-gray-9);
|
||||
--border-pagination-color: var(--grey-1);
|
||||
|
||||
--blue-color: var(--blue-2);
|
||||
--button-close-color: var(--white-color);
|
||||
|
|
@ -494,7 +503,7 @@
|
|||
--bg-inner-datatable-thead: var(--black-color);
|
||||
--bg-service-datatable-tbody: var(--black-color);
|
||||
--bg-pagination-color: var(--grey-3);
|
||||
--bg-pagination-span-color: var(--grey-3);
|
||||
--bg-pagination-span-color: var(--ui-black);
|
||||
--bg-multiselect-color: var(--grey-1);
|
||||
--bg-daterangepicker-color: var(--black-color);
|
||||
--bg-calendar-color: var(--black-color);
|
||||
|
|
@ -529,6 +538,8 @@
|
|||
--bg-searchbar: var(--black-color);
|
||||
--bg-dropdown-hover: var(--black-color);
|
||||
--bg-webeditor-color: var(--ui-gray-warm-9);
|
||||
--bg-pagination-disabled-color: var(--ui-black);
|
||||
--bg-pagination-hover-color: var(--ui-black);
|
||||
|
||||
--text-main-color: var(--white-color);
|
||||
--text-body-color: var(--white-color);
|
||||
|
|
@ -569,8 +580,10 @@
|
|||
--text-btn-default-color: var(--white-color);
|
||||
--text-small-select-color: var(--white-color);
|
||||
--text-multiselect-item-color: var(--white-color);
|
||||
--text-pagination-span-color: var(--ui-gray-3);
|
||||
--text-pagination-span-color: var(--ui-white);
|
||||
--text-bootbox: var(--white-color);
|
||||
--text-button-dangerlight-color: var(--ui-error-7);
|
||||
--text-pagination-span-hover-color: var(--ui-white);
|
||||
|
||||
--border-color: var(--grey-55);
|
||||
--border-widget-color: var(--white-color);
|
||||
|
|
@ -587,8 +600,8 @@
|
|||
--border-input-group-addon-color: var(--grey-54);
|
||||
--border-modal-header-color: var(--grey-3);
|
||||
--border-input-sm-color: var(--white-color);
|
||||
--border-pagination-color: var(--grey-3);
|
||||
--border-pagination-span-color: var(--grey-3);
|
||||
--border-pagination-color: var(--grey-1);
|
||||
--border-pagination-span-color: var(--grey-1);
|
||||
--border-daterangepicker-color: var(--white-color);
|
||||
--border-calendar-table: var(--black-color);
|
||||
--border-daterangepicker: var(--black-color);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue