mirror of
https://github.com/portainer/portainer.git
synced 2025-08-07 23:05:26 +02:00
feat(app): ui additional css class [EE-3594] (#7157)
* feat(app): ui additional css class [EE-3594]
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
cd66e32912
commit
6fe26a52dd
33 changed files with 419 additions and 181 deletions
|
|
@ -90,6 +90,7 @@ body,
|
|||
margin-bottom: 15px;
|
||||
color: var(--text-form-section-title-color);
|
||||
padding-left: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-horizontal .control-label.text-left {
|
||||
|
|
|
|||
312
app/assets/css/bootstrap-override.css
vendored
312
app/assets/css/bootstrap-override.css
vendored
|
|
@ -1,14 +1,45 @@
|
|||
/* Main Color UI Override*/
|
||||
/* Label, Section Title */
|
||||
|
||||
.control-label {
|
||||
color: var(--ui-gray-7);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-section-title {
|
||||
color: var(--ui-gray-9);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: var(--bg-dashboard-item) !important;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.btn {
|
||||
border-radius: 5px;
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
pr-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Button Primary */
|
||||
.btn-primary {
|
||||
background-color: var(--ui-blue-8);
|
||||
}
|
||||
|
|
@ -16,7 +47,19 @@
|
|||
.btn-primary:hover,
|
||||
.btn-primary:focus,
|
||||
.btn-primary:active .active {
|
||||
background-color: var(--ui-blue-2);
|
||||
background-color: var(--ui-blue-9);
|
||||
}
|
||||
|
||||
.btn-primary:active,
|
||||
.btn-primary.active,
|
||||
.open > .dropdown-toggle.btn-primary {
|
||||
background-color: var(--ui-blue-9);
|
||||
}
|
||||
|
||||
.nav-pills > li.active > a,
|
||||
.nav-pills > li.active > a:hover,
|
||||
.nav-pills > li.active > a:focus {
|
||||
background-color: var(--ui-blue-8);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
|
|
@ -27,6 +70,69 @@
|
|||
background-color: var(--ui-success-7);
|
||||
}
|
||||
|
||||
.btn-dangerlight {
|
||||
background-color: var(--ui-error-2) !important;
|
||||
border: 1px solid var(--border-button-group);
|
||||
color: var(--ui-error-8);
|
||||
}
|
||||
|
||||
.btn-dangerlight:hover {
|
||||
color: var(--ui-error-9) !important;
|
||||
background-color: var(--ui-error-3) !important;
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
background-color: var(--bg-button-group);
|
||||
border: 1px solid var(--border-button-group);
|
||||
color: var(--text-button-group);
|
||||
}
|
||||
|
||||
.btn-light:hover {
|
||||
background-color: var(--ui-gray-2) !important;
|
||||
}
|
||||
|
||||
.btn-light:active,
|
||||
.btn-light.active,
|
||||
.open > .dropdown-toggle.btn-light {
|
||||
background-color: var(--ui-gray-3);
|
||||
}
|
||||
|
||||
/* Button Secondary */
|
||||
.btn-secondary {
|
||||
background-color: var(--ui-blue-2);
|
||||
border: 1px solid var(--ui-blue-8);
|
||||
color: var(--ui-blue-9);
|
||||
}
|
||||
|
||||
.btn-secondary:hover,
|
||||
.btn-secondary:focus,
|
||||
.btn-secondary:active .active {
|
||||
background-color: var(--ui-blue-3) !important;
|
||||
color: var(--ui-blue-9) !important;
|
||||
}
|
||||
|
||||
.btn-secondary:disabled {
|
||||
background-color: var(--ui-blue-1);
|
||||
border: 1px solid var(--ui-blue-1);
|
||||
color: var(--ui-blue-5);
|
||||
}
|
||||
|
||||
/* Input Group Addon */
|
||||
.input-group-addon:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
.input-group .form-control:not(:first-child):not(:last-child) {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.input-group-btn:last-child .btn {
|
||||
margin-left: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Toggle switch */
|
||||
.switch {
|
||||
position: relative;
|
||||
|
|
@ -41,6 +147,10 @@
|
|||
height: 0;
|
||||
}
|
||||
|
||||
.switch input[type='checkbox']:disabled + .slider {
|
||||
background-color: var(--ui-gray-3);
|
||||
}
|
||||
|
||||
/* Toggle */
|
||||
|
||||
.slider {
|
||||
|
|
@ -196,6 +306,7 @@ input:checked + .slider:before {
|
|||
|
||||
.toolBar > .settings {
|
||||
width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.datatable .toolBar .settings {
|
||||
|
|
@ -212,48 +323,6 @@ input:checked + .slider:before {
|
|||
border-top: 1px solid var(--border-table-color);
|
||||
}
|
||||
|
||||
/* Button Group */
|
||||
.input-group-addon:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
.input-group .form-control:not(:first-child):not(:last-child) {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.input-group-btn:last-child .btn {
|
||||
margin-left: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
|
||||
background-color: var(--bg-button-group);
|
||||
border: 1px solid var(--border-button-group);
|
||||
color: var(--text-button-group);
|
||||
}
|
||||
|
||||
.btn-group .btn-light {
|
||||
background-color: var(--bg-button-group);
|
||||
border: 1px solid var(--border-button-group);
|
||||
color: var(--text-button-group);
|
||||
}
|
||||
|
||||
.btn-group .btn-dangerlight {
|
||||
background-color: var(--ui-error-2);
|
||||
border: 1px solid var(--border-button-group);
|
||||
color: var(--ui-error-8);
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Toaster */
|
||||
|
||||
#toast-container > .toast-success {
|
||||
|
|
@ -375,33 +444,6 @@ input:checked + .slider:before {
|
|||
border: 0px;
|
||||
}
|
||||
|
||||
/* Boxselector */
|
||||
|
||||
.boxselector_wrapper input[type='radio']:checked + label,
|
||||
.box-selector-item input[type='radio']:checked + label {
|
||||
background: var(--ui-blue-3) !important;
|
||||
color: black !important;
|
||||
border-radius: 8px;
|
||||
border-color: var(--ui-blue-7);
|
||||
padding: 15px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.boxselector_wrapper input[type='radio']:not(:disabled) + label,
|
||||
.box-selector-item input[type='radio']:not(:disabled) + label {
|
||||
background: var(--ui-gray-2);
|
||||
color: var(--black-color) !important;
|
||||
border-radius: 8px;
|
||||
border-color: var(--ui-gray-5);
|
||||
padding: 15px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.row.header {
|
||||
background-color: var(--bg-body-color) !important;
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
/* Databatle Setting Menu */
|
||||
|
||||
.tableMenu {
|
||||
|
|
@ -421,48 +463,112 @@ input:checked + .slider:before {
|
|||
border: 0px;
|
||||
}
|
||||
|
||||
/* Myaccount Dropdown Menu */
|
||||
|
||||
.myaccount-dropdown {
|
||||
color: var(--text-body-color);
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.myaccount-container {
|
||||
margin-top: -25px;
|
||||
}
|
||||
|
||||
.myaccount-icon {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.myaccount-link {
|
||||
display: inline;
|
||||
border: 0px;
|
||||
background: none;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
||||
/* Status Indicator Label Style */
|
||||
.label {
|
||||
/* Status Indicator Inside Table Section Label Style */
|
||||
.table .label {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.label-danger {
|
||||
.table .label .label-danger {
|
||||
background-color: var(--ui-error-8);
|
||||
}
|
||||
|
||||
.label-success {
|
||||
.table .label .label-success {
|
||||
background-color: var(--ui-success-7);
|
||||
}
|
||||
|
||||
/* Feather Icon */
|
||||
/* Feather Icon Variants */
|
||||
|
||||
.feather {
|
||||
display: block;
|
||||
color: var(--text-body-color);
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
margin-right: 5px;
|
||||
color: var(--text-body-color);
|
||||
}
|
||||
|
||||
.icon-xs {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.icon-sm {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.icon-md {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.icon-xl {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
.icon-primary {
|
||||
color: var(--ui-blue-8);
|
||||
}
|
||||
|
||||
.icon-white {
|
||||
color: var(--white-color);
|
||||
}
|
||||
|
||||
.icon-dark {
|
||||
color: var(--ui-black);
|
||||
}
|
||||
|
||||
.icon-secondary {
|
||||
color: var(--ui-gray-8);
|
||||
}
|
||||
|
||||
.icon-warning {
|
||||
color: var(--ui-warning-8);
|
||||
}
|
||||
|
||||
.icon-danger {
|
||||
color: var(--ui-error-8);
|
||||
}
|
||||
|
||||
.icon-success {
|
||||
color: var(--ui-success-6);
|
||||
}
|
||||
|
||||
.icon-nested-gray {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background-color: var(--ui-gray-4);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.icon-nested-blue {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background-color: var(--ui-blue-3);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
/* Required Label with asterisk */
|
||||
|
||||
.required:after {
|
||||
content: '*';
|
||||
color: var(--ui-error-9);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -98,6 +98,7 @@ div.input-mask {
|
|||
color: var(--text-widget-header-color);
|
||||
padding: 10px 15px;
|
||||
line-height: 30px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.widget .widget-header i {
|
||||
margin-right: 5px;
|
||||
|
|
|
|||
|
|
@ -165,8 +165,7 @@
|
|||
|
||||
--text-main-color: var(--grey-7);
|
||||
--text-body-color: var(--grey-6);
|
||||
--text-sidebar-title-color: var(--blue-3);
|
||||
--text-widget-header-color: var(--grey-7);
|
||||
--text-widget-header-color: var(--ui-gray-11);
|
||||
--text-form-control-color: var(--grey-25);
|
||||
--text-muted-color: var(--grey-26);
|
||||
--text-link-color: var(--blue-2);
|
||||
|
|
@ -346,7 +345,6 @@
|
|||
|
||||
--text-main-color: var(--white-color);
|
||||
--text-body-color: var(--white-color);
|
||||
--text-sidebar-title-color: var(--grey-8);
|
||||
--text-widget-header-color: var(--white-color);
|
||||
--text-form-control-color: var(--white-color);
|
||||
--text-muted-color: var(--grey-8);
|
||||
|
|
@ -526,7 +524,6 @@
|
|||
|
||||
--text-main-color: var(--white-color);
|
||||
--text-body-color: var(--white-color);
|
||||
--text-sidebar-title-color: var(--grey-8);
|
||||
--text-widget-header-color: var(--white-color);
|
||||
--text-link-color: var(--blue-9);
|
||||
--text-link-hover-color: var(--blue-9);
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ a:focus {
|
|||
}
|
||||
|
||||
.text-danger {
|
||||
color: var(--text-danger-color);
|
||||
color: var(--ui-error-9);
|
||||
}
|
||||
|
||||
.table .table {
|
||||
|
|
@ -373,6 +373,10 @@ input:-webkit-autofill {
|
|||
color: var(--white-color);
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
color: var(--white-color);
|
||||
}
|
||||
|
||||
/* Overide Vendor CSS */
|
||||
|
||||
.btn.disabled,
|
||||
|
|
|
|||
5
app/assets/ico/checked.svg
Normal file
5
app/assets/ico/checked.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1.21426" y="0.5" width="15" height="15" rx="7.5" fill="#0086C9"/>
|
||||
<path d="M12.0474 5.5L7.4641 10.0833L5.38077 8" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="1.21426" y="0.5" width="15" height="15" rx="7.5" stroke="#0086C9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 390 B |
6
app/assets/ico/ldap.svg
Normal file
6
app/assets/ico/ldap.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="79" height="44" viewBox="0 0 79 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M45.3224 11.3193L54.6351 27.3044L63.9515 43.2856H45.3224H26.6934L36.006 27.3044L45.3224 11.3193Z" fill="#CB2026"/>
|
||||
<path d="M64.1569 38.7032H79.0003L69.6839 22.7181L60.3713 6.73692L52.9496 19.4733L59.1631 30.1388L64.1569 38.7032Z" fill="#CB2026"/>
|
||||
<path d="M31.9306 29.5575L27.9455 22.7181L18.6291 6.73692L9.31645 22.7181L0 38.7032H18.6291H26.5993L29.2151 34.2158L31.9306 29.5575Z" fill="#CB2026"/>
|
||||
<path d="M33.2951 27.2245L33.763 26.4228L40.4214 15.0011L31.78 0.174988L24.6575 12.3984L30.5258 22.4674L33.2951 27.2245Z" fill="#CB2026"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 650 B |
6
app/assets/ico/microsoft.svg
Normal file
6
app/assets/ico/microsoft.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24.6796 0.74147H0V25.1903H24.6796V0.74147Z" fill="#F35325"/>
|
||||
<path d="M52.0165 0.741547H27.3369V25.1904H52.0165V0.741547Z" fill="#81BC06"/>
|
||||
<path d="M24.6796 27.8229H0V52.2718H24.6796V27.8229Z" fill="#05A6F0"/>
|
||||
<path d="M52.0165 27.8229H27.3369V52.2718H52.0165V27.8229Z" fill="#FFBA08"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 401 B |
4
app/assets/ico/oauth.svg
Normal file
4
app/assets/ico/oauth.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="51" height="57" viewBox="0 0 51 57" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M49.4176 17.75L43.882 0.819107H7.28089L1.74531 17.75C1.74531 17.75 -4.79215 34.8935 10.4787 45.4348C24.3922 55.0404 25.5814 56.2077 25.5814 56.2077C25.5814 56.2077 26.7707 55.038 40.6842 45.4348C55.955 34.8935 49.4176 17.75 49.4176 17.75Z" fill="#F4552A"/>
|
||||
<path d="M25.5851 0.984695L31.4835 17.6745L49.4453 18.0361L35.1283 28.7097L40.3323 45.6217L25.5851 35.5293L10.838 45.6217L16.042 28.7097L1.72498 18.0361L19.6868 17.6745L25.5851 0.984695Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 572 B |
Loading…
Add table
Add a link
Reference in a new issue