mirror of
https://github.com/portainer/portainer.git
synced 2025-08-06 06:15:22 +02:00
feat(ui): Rebranding - r8s-374 (#840)
This commit is contained in:
James Player
GitHub
parent
cf5990ccba
commit
c6ee9a5a52
41 changed files with 821 additions and 342 deletions
|
|
@ -29,43 +29,79 @@ fieldset[disabled] .btn {
|
|||
}
|
||||
|
||||
.btn.btn-primary {
|
||||
@apply border-blue-8 bg-blue-8 text-white;
|
||||
@apply hover:border-blue-9 hover:bg-blue-9 hover:text-white;
|
||||
@apply th-dark:hover:border-blue-7 th-dark:hover:bg-blue-7;
|
||||
@apply border-graphite-700 bg-graphite-700 text-mist-100;
|
||||
@apply hover:border-graphite-700/90 hover:bg-graphite-700/90 hover:text-mist-100;
|
||||
@apply focus:border-blue-5 focus:shadow-graphite-700/80 focus:text-mist-100;
|
||||
|
||||
@apply th-dark:border-mist-100 th-dark:bg-mist-100 th-dark:text-graphite-700;
|
||||
@apply th-dark:hover:border-mist-100/90 th-dark:hover:bg-mist-100/90 th-dark:hover:text-graphite-700;
|
||||
@apply th-dark:focus:border-blue-5 th-dark:focus:shadow-white/80 th-dark:focus:text-graphite-700;
|
||||
|
||||
@apply th-highcontrast:border-mist-100 th-highcontrast:bg-mist-100 th-highcontrast:text-graphite-700;
|
||||
@apply th-highcontrast:hover:border-mist-100/90 th-highcontrast:hover:bg-mist-100/90 th-highcontrast:hover:text-graphite-700;
|
||||
@apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:shadow-white/80 th-highcontrast:focus:text-graphite-700;
|
||||
}
|
||||
|
||||
/* Sidebar background is always dark, so we need to override the primary button styles */
|
||||
.btn.btn-primary.sidebar {
|
||||
@apply border-mist-100 bg-mist-100 text-graphite-700;
|
||||
@apply hover:border-mist-100/90 hover:bg-mist-100/90 hover:text-graphite-700;
|
||||
@apply focus:border-blue-5 focus:shadow-white/80 focus:text-graphite-700;
|
||||
}
|
||||
|
||||
.btn.btn-primary:active,
|
||||
.btn.btn-primary.active,
|
||||
.open > .dropdown-toggle.btn-primary {
|
||||
@apply border-blue-5 bg-blue-9;
|
||||
@apply border-graphite-700/80 bg-graphite-700 text-mist-100;
|
||||
@apply th-dark:border-white/80 th-dark:bg-mist-100 th-dark:text-graphite-700;
|
||||
@apply th-highcontrast:border-white/80 th-highcontrast:bg-mist-100 th-highcontrast:text-graphite-700;
|
||||
}
|
||||
|
||||
.nav-pills > li.active > a,
|
||||
.nav-pills > li.active > a:hover,
|
||||
.nav-pills > li.active > a:focus {
|
||||
@apply bg-blue-8;
|
||||
@apply bg-graphite-700 text-mist-100;
|
||||
@apply th-dark:bg-mist-100 th-dark:text-graphite-700;
|
||||
@apply th-highcontrast:bg-mist-100 th-highcontrast:text-graphite-700;
|
||||
}
|
||||
|
||||
/* Button Secondary */
|
||||
.btn.btn-secondary {
|
||||
@apply border border-solid;
|
||||
|
||||
@apply border-blue-8 bg-blue-2 text-blue-9;
|
||||
@apply hover:bg-blue-3;
|
||||
@apply border-graphite-700 bg-mist-100 text-graphite-700;
|
||||
@apply hover:border-graphite-700 hover:bg-graphite-700/10 hover:text-graphite-700;
|
||||
@apply focus:border-blue-5 focus:shadow-graphite-700/20 focus:text-graphite-700;
|
||||
|
||||
@apply th-dark:border-blue-7 th-dark:bg-gray-10 th-dark:text-blue-3;
|
||||
@apply th-dark:hover:bg-blue-11;
|
||||
@apply th-dark:border-mist-100 th-dark:bg-graphite-700 th-dark:text-mist-100;
|
||||
@apply th-dark:hover:border-mist-100 th-dark:hover:bg-mist-100/20 th-dark:hover:text-mist-100;
|
||||
@apply th-dark:focus:border-blue-5 th-dark:focus:shadow-white/80 th-dark:focus:text-mist-100;
|
||||
|
||||
@apply th-highcontrast:border-mist-100 th-highcontrast:bg-graphite-700 th-highcontrast:text-mist-100;
|
||||
@apply th-highcontrast:hover:border-mist-100 th-highcontrast:hover:bg-mist-100/20 th-highcontrast:hover:text-mist-100;
|
||||
@apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:shadow-white/80 th-highcontrast:focus:text-mist-100;
|
||||
}
|
||||
|
||||
.btn.btn-secondary:active,
|
||||
.btn.btn-secondary.active,
|
||||
.open > .dropdown-toggle.btn-secondary {
|
||||
@apply border-graphite-700 bg-graphite-700/10 text-graphite-700;
|
||||
@apply th-dark:border-mist-100 th-dark:bg-mist-100/20 th-dark:text-mist-100;
|
||||
@apply th-highcontrast:border-mist-100 th-highcontrast:bg-mist-100/20 th-highcontrast:text-mist-100;
|
||||
}
|
||||
|
||||
.btn.btn-danger {
|
||||
@apply border-error-8 bg-error-8;
|
||||
@apply hover:border-error-7 hover:bg-error-7 hover:text-white;
|
||||
@apply focus:border-blue-5 focus:shadow-error-8/20 focus:text-white;
|
||||
@apply th-dark:focus:border-blue-5 th-dark:focus:shadow-white/80 th-dark:focus:text-white;
|
||||
@apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:shadow-white/80 th-highcontrast:focus:text-white;
|
||||
}
|
||||
|
||||
.btn.btn-danger:active,
|
||||
.btn.btn-danger.active,
|
||||
.open > .dropdown-toggle.btn-danger {
|
||||
@apply border-blue-5 bg-error-8 text-white;
|
||||
@apply border-error-5 bg-error-8 text-white;
|
||||
}
|
||||
|
||||
.btn.btn-dangerlight {
|
||||
|
|
@ -74,6 +110,10 @@ fieldset[disabled] .btn {
|
|||
@apply hover:bg-error-2 th-dark:hover:bg-error-11;
|
||||
@apply border-error-5 th-highcontrast:border-error-7 th-dark:border-error-7;
|
||||
@apply border border-solid;
|
||||
|
||||
@apply focus:border-blue-5 focus:shadow-error-8/20 focus:text-error-9;
|
||||
@apply th-dark:focus:border-blue-5 th-dark:focus:shadow-white/80 th-dark:focus:text-white;
|
||||
@apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:shadow-white/80;
|
||||
}
|
||||
.btn.btn-icon.btn-dangerlight {
|
||||
@apply hover:text-error-11 th-dark:hover:text-error-7;
|
||||
|
|
@ -90,15 +130,18 @@ fieldset[disabled] .btn {
|
|||
/* secondary-grey */
|
||||
.btn.btn-default,
|
||||
.btn.btn-light {
|
||||
@apply border-gray-5 bg-white text-gray-7;
|
||||
@apply hover:border-gray-5 hover:bg-gray-3 hover:text-gray-9;
|
||||
@apply border-gray-5 bg-white text-gray-8;
|
||||
@apply hover:border-gray-5 hover:bg-gray-3 hover:text-gray-10;
|
||||
@apply focus:border-blue-5 focus:shadow-graphite-700/20 focus:text-gray-8;
|
||||
|
||||
/* dark mode */
|
||||
@apply th-dark:border-gray-warm-7 th-dark:bg-gray-iron-10 th-dark:text-gray-warm-4;
|
||||
@apply th-dark:hover:border-gray-6 th-dark:hover:bg-gray-iron-9 th-dark:hover:text-gray-warm-4;
|
||||
@apply th-dark:focus:border-blue-5 th-dark:focus:shadow-white/80 th-dark:focus:text-gray-warm-4;
|
||||
|
||||
@apply th-highcontrast:border-gray-2 th-highcontrast:bg-black th-highcontrast:text-white;
|
||||
@apply th-highcontrast:hover:border-gray-6 th-highcontrast:hover:bg-gray-9 th-highcontrast:hover:text-gray-warm-4;
|
||||
@apply th-highcontrast:focus:border-blue-5 th-highcontrast:focus:shadow-white/80 th-highcontrast:focus:text-white;
|
||||
}
|
||||
|
||||
.btn.btn-light:active,
|
||||
|
|
@ -119,42 +162,17 @@ fieldset[disabled] .btn {
|
|||
|
||||
.input-group-btn .btn.active,
|
||||
.btn-group .btn.active {
|
||||
@apply border-blue-5 bg-blue-2 text-blue-10;
|
||||
@apply th-dark:border-blue-9 th-dark:bg-blue-11 th-dark:text-blue-2;
|
||||
}
|
||||
|
||||
/* focus */
|
||||
|
||||
.btn.btn-primary:focus,
|
||||
.btn.btn-secondary:focus,
|
||||
.btn.btn-light:focus {
|
||||
@apply border-blue-5;
|
||||
}
|
||||
|
||||
.btn.btn-danger:focus,
|
||||
.btn.btn-dangerlight:focus {
|
||||
@apply border-blue-6;
|
||||
}
|
||||
|
||||
.btn.btn-primary:focus,
|
||||
.btn.btn-secondary:focus,
|
||||
.btn.btn-light:focus,
|
||||
.btn.btn-danger:focus,
|
||||
.btn.btn-dangerlight:focus {
|
||||
--btn-focus-color: var(--ui-blue-3);
|
||||
box-shadow: 0px 0px 0px 4px var(--btn-focus-color);
|
||||
@apply border-graphite-700/80 bg-graphite-700 text-mist-100;
|
||||
@apply th-dark:border-white/80 th-dark:bg-mist-100 th-dark:text-graphite-700;
|
||||
@apply th-highcontrast:border-white/80 th-highcontrast:bg-mist-100 th-highcontrast:text-graphite-700;
|
||||
}
|
||||
|
||||
.btn.btn-icon:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
[theme='dark'] .btn.btn-primary:focus,
|
||||
[theme='dark'] .btn.btn-secondary:focus,
|
||||
[theme='dark'] .btn.btn-light:focus,
|
||||
[theme='dark'] .btn.btn-danger:focus,
|
||||
[theme='dark'] .btn.btn-dangerlight:focus {
|
||||
--btn-focus-color: var(--ui-blue-11);
|
||||
.btn:focus {
|
||||
box-shadow: 0px 0px 0px 2px var(--tw-shadow-color);
|
||||
}
|
||||
|
||||
a.no-link,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,31 @@
|
|||
{
|
||||
"black": "#000000",
|
||||
"white": "#ffffff",
|
||||
"graphite": {
|
||||
"10": "#f5f5f6",
|
||||
"50": "#e5e6e8",
|
||||
"100": "#ced0d3",
|
||||
"200": "#abafb5",
|
||||
"300": "#7b8089",
|
||||
"400": "#5c6066",
|
||||
"500": "#484a4e",
|
||||
"600": "#3a3b3f",
|
||||
"700": "#2e2f33",
|
||||
"800": "#222326",
|
||||
"900": "#161719"
|
||||
},
|
||||
"mist": {
|
||||
"50": "#fcfbfa",
|
||||
"100": "#f7f6f3",
|
||||
"200": "#f0f0ec",
|
||||
"300": "#e8e7e2",
|
||||
"400": "#e2e1db",
|
||||
"500": "#d9d8d2",
|
||||
"600": "#ceccc4",
|
||||
"700": "#bebcb4",
|
||||
"800": "#a7a6a0",
|
||||
"900": "#8b8983"
|
||||
},
|
||||
"gray": {
|
||||
"1": "#fcfcfd",
|
||||
"2": "#f9fafb",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,16 @@
|
|||
--black-color: var(--ui-black);
|
||||
--white-color: var(--ui-white);
|
||||
|
||||
--graphite-600: #3a3b3f;
|
||||
--graphite-700: #2e2f33;
|
||||
--graphite-800: #222326;
|
||||
--graphite-900: #161719;
|
||||
|
||||
--mist-50: #fcfbfa;
|
||||
--mist-100: #f7f6f3;
|
||||
--mist-200: #f0f0ec;
|
||||
--mist-300: #e8e7e2;
|
||||
|
||||
--grey-1: #212121;
|
||||
--grey-2: #181818;
|
||||
--grey-3: #383838;
|
||||
|
|
@ -58,6 +68,8 @@
|
|||
--grey-58: #ebf4f8;
|
||||
--grey-59: #e6e6e6;
|
||||
--grey-61: rgb(231, 231, 231);
|
||||
--grey-62: #fdfdfd;
|
||||
--grey-63: #121212;
|
||||
|
||||
--blue-1: #219;
|
||||
--blue-2: #337ab7;
|
||||
|
|
@ -99,17 +111,16 @@
|
|||
/* Default Theme */
|
||||
--bg-card-color: var(--white-color);
|
||||
--bg-main-color: var(--white-color);
|
||||
--bg-body-color: var(--grey-9);
|
||||
--bg-body-color: var(--grey-62);
|
||||
--bg-checkbox-border-color: var(--grey-49);
|
||||
--bg-sidebar-color: var(--ui-blue-10);
|
||||
--bg-sidebar-nav-color: var(--ui-blue-11);
|
||||
--bg-sidebar-color: var(--graphite-700);
|
||||
--bg-sidebar-nav-color: var(--graphite-600);
|
||||
--bg-widget-color: var(--white-color);
|
||||
--bg-widget-header-color: var(--grey-10);
|
||||
--bg-widget-table-color: var(--ui-gray-3);
|
||||
--bg-header-color: var(--white-color);
|
||||
--bg-hover-table-color: var(--grey-14);
|
||||
--bg-input-group-addon-color: var(--ui-gray-3);
|
||||
--bg-btn-default-color: var(--ui-blue-10);
|
||||
--bg-blocklist-hover-color: var(--ui-blue-2);
|
||||
--bg-table-color: var(--white-color);
|
||||
--bg-md-checkbox-color: var(--grey-12);
|
||||
|
|
@ -128,7 +139,8 @@
|
|||
--border-pagination-color: var(--ui-white);
|
||||
--bg-pagination-span-color: var(--white-color);
|
||||
--bg-pagination-hover-color: var(--ui-blue-3);
|
||||
--bg-motd-body-color: var(--grey-20);
|
||||
--bg-motd-body-color: var(--mist-50);
|
||||
--bg-motd-btn-color: var(--graphite-700);
|
||||
--bg-item-highlighted-color: var(--grey-21);
|
||||
--bg-item-highlighted-null-color: var(--grey-14);
|
||||
--bg-panel-body-color: var(--white-color);
|
||||
|
|
@ -144,8 +156,6 @@
|
|||
--bg-daterangepicker-in-range: var(--grey-58);
|
||||
--bg-daterangepicker-active: var(--blue-14);
|
||||
--bg-input-autofill-color: var(--bg-inputbox);
|
||||
--bg-btn-default-hover-color: var(--ui-blue-9);
|
||||
--bg-btn-focus: var(--grey-59);
|
||||
--bg-small-select-color: var(--white-color);
|
||||
--bg-stepper-item-active: var(--white-color);
|
||||
--bg-stepper-item-counter: var(--grey-61);
|
||||
|
|
@ -177,7 +187,6 @@
|
|||
--text-navtabs-color: var(--grey-7);
|
||||
--text-navtabs-hover-color: var(--grey-6);
|
||||
--text-nav-tab-active-color: var(--grey-25);
|
||||
|
||||
--text-dropdown-menu-color: var(--grey-6);
|
||||
--text-log-viewer-color: var(--black-color);
|
||||
--text-json-tree-color: var(--blue-3);
|
||||
|
|
@ -189,6 +198,8 @@
|
|||
--text-pagination-color: var(--grey-26);
|
||||
--text-pagination-span-color: var(--grey-3);
|
||||
--text-pagination-span-hover-color: var(--grey-3);
|
||||
--text-motd-body-color: var(--black-color);
|
||||
--text-motd-btn-color: var(--mist-100);
|
||||
--text-summary-color: var(--black-color);
|
||||
--text-tooltip-color: var(--white-color);
|
||||
--text-rzslider-color: var(--grey-36);
|
||||
|
|
@ -203,6 +214,7 @@
|
|||
--text-button-group-color: var(--ui-gray-9);
|
||||
--text-button-dangerlight-color: var(--ui-error-5);
|
||||
--text-stepper-active-color: var(--ui-blue-8);
|
||||
|
||||
--border-color: var(--grey-42);
|
||||
--border-widget-color: var(--grey-43);
|
||||
--border-sidebar-color: var(--ui-blue-9);
|
||||
|
|
@ -218,7 +230,8 @@
|
|||
--border-pre-color: var(--grey-43);
|
||||
--border-pagination-span-color: var(--ui-white);
|
||||
--border-pagination-hover-color: var(--ui-white);
|
||||
--border-panel-color: var(--white-color);
|
||||
--border-motd-body-color: var(--mist-300);
|
||||
--border-panel-color: var(--mist-300);
|
||||
--border-input-sm-color: var(--grey-47);
|
||||
--border-daterangepicker-color: var(--grey-19);
|
||||
--border-calendar-table: var(--white-color);
|
||||
|
|
@ -265,8 +278,7 @@
|
|||
--text-log-viewer-color-json-red: var(--text-log-viewer-color);
|
||||
--text-log-viewer-color-json-blue: var(--text-log-viewer-color);
|
||||
|
||||
--bg-body-color: var(--grey-2);
|
||||
--bg-btn-default-color: var(--grey-3);
|
||||
--bg-body-color: var(--grey-63);
|
||||
--bg-blocklist-hover-color: var(--ui-gray-iron-10);
|
||||
--bg-blocklist-item-selected-color: var(--ui-gray-iron-10);
|
||||
--bg-card-color: var(--grey-1);
|
||||
|
|
@ -274,8 +286,6 @@
|
|||
--bg-code-color: var(--grey-2);
|
||||
--bg-dropdown-menu-color: var(--ui-gray-warm-8);
|
||||
--bg-main-color: var(--grey-2);
|
||||
--bg-sidebar-color: var(--grey-1);
|
||||
--bg-sidebar-nav-color: var(--grey-2);
|
||||
--bg-widget-color: var(--grey-1);
|
||||
--bg-widget-header-color: var(--grey-3);
|
||||
--bg-widget-table-color: var(--grey-3);
|
||||
|
|
@ -296,7 +306,8 @@
|
|||
--bg-pagination-color: var(--grey-3);
|
||||
--bg-pagination-span-color: var(--grey-1);
|
||||
--bg-pagination-hover-color: var(--grey-3);
|
||||
--bg-motd-body-color: var(--grey-1);
|
||||
--bg-motd-body-color: var(--graphite-800);
|
||||
--bg-motd-btn-color: var(--mist-100);
|
||||
--bg-item-highlighted-color: var(--grey-2);
|
||||
--bg-item-highlighted-null-color: var(--grey-2);
|
||||
--bg-panel-body-color: var(--grey-1);
|
||||
|
|
@ -316,8 +327,6 @@
|
|||
--bg-daterangepicker-in-range: var(--ui-gray-warm-11);
|
||||
--bg-daterangepicker-active: var(--blue-14);
|
||||
--bg-input-autofill-color: var(--bg-inputbox);
|
||||
--bg-btn-default-hover-color: var(--grey-4);
|
||||
--bg-btn-focus: var(--grey-3);
|
||||
--bg-small-select-color: var(--grey-2);
|
||||
--bg-stepper-item-active: var(--grey-1);
|
||||
--bg-stepper-item-counter: var(--grey-7);
|
||||
|
|
@ -348,7 +357,6 @@
|
|||
--text-navtabs-color: var(--grey-8);
|
||||
--text-navtabs-hover-color: var(--grey-9);
|
||||
--text-nav-tab-active-color: var(--white-color);
|
||||
|
||||
--text-dropdown-menu-color: var(--white-color);
|
||||
--text-log-viewer-color: var(--white-color);
|
||||
--text-json-tree-color: var(--grey-40);
|
||||
|
|
@ -360,6 +368,8 @@
|
|||
--text-pagination-color: var(--white-color);
|
||||
--text-pagination-span-color: var(--ui-white);
|
||||
--text-pagination-span-hover-color: var(--ui-white);
|
||||
--text-motd-body-color: var(--mist-100);
|
||||
--text-motd-btn-color: var(--graphite-700);
|
||||
--text-summary-color: var(--white-color);
|
||||
--text-tooltip-color: var(--white-color);
|
||||
--text-rzslider-color: var(--white-color);
|
||||
|
|
@ -374,6 +384,7 @@
|
|||
--text-button-group-color: var(--ui-white);
|
||||
--text-button-dangerlight-color: var(--ui-error-7);
|
||||
--text-stepper-active-color: var(--ui-white);
|
||||
|
||||
--border-color: var(--grey-3);
|
||||
--border-widget-color: var(--grey-1);
|
||||
--border-sidebar-color: var(--ui-gray-8);
|
||||
|
|
@ -391,6 +402,7 @@
|
|||
--border-blocklist-item-selected-color: var(--grey-31);
|
||||
--border-pagination-span-color: var(--grey-1);
|
||||
--border-pagination-hover-color: var(--grey-3);
|
||||
--border-motd-body-color: var(--graphite-800);
|
||||
--border-panel-color: var(--grey-2);
|
||||
--border-input-sm-color: var(--grey-3);
|
||||
--border-daterangepicker-color: var(--grey-3);
|
||||
|
|
@ -450,6 +462,7 @@
|
|||
--bg-panel-body-color: var(--black-color);
|
||||
--bg-dropdown-menu-color: var(--ui-gray-warm-8);
|
||||
--bg-motd-body-color: var(--black-color);
|
||||
--bg-motd-btn-color: var(--white-color);
|
||||
--bg-blocklist-hover-color: var(--black-color);
|
||||
--bg-blocklist-item-selected-color: var(--black-color);
|
||||
--bg-input-group-addon-color: var(--grey-3);
|
||||
|
|
@ -481,11 +494,8 @@
|
|||
|
||||
--bg-navtabs-hover-color: var(--grey-3);
|
||||
--bg-nav-tab-active-color: var(--ui-black);
|
||||
--bg-btn-default-color: var(--black-color);
|
||||
--bg-input-autofill-color: var(--bg-inputbox);
|
||||
--bg-code-color: var(--ui-black);
|
||||
--bg-btn-default-hover-color: var(--grey-4);
|
||||
--bg-btn-focus: var(--black-color);
|
||||
--bg-small-select-color: var(--black-color);
|
||||
--bg-stepper-item-active: var(--black-color);
|
||||
--bg-stepper-item-counter: var(--grey-3);
|
||||
|
|
@ -523,6 +533,8 @@
|
|||
--text-daterangepicker-end-date: var(--ui-white);
|
||||
--text-daterangepicker-in-range: var(--white-color);
|
||||
--text-daterangepicker-active: var(--white-color);
|
||||
--text-motd-body-color: var(--white-color);
|
||||
--text-motd-btn-color: var(--black-color);
|
||||
--text-json-tree-color: var(--white-color);
|
||||
--text-json-tree-leaf-color: var(--white-color);
|
||||
--text-json-tree-branch-preview-color: var(--white-color);
|
||||
|
|
@ -553,6 +565,7 @@
|
|||
--border-input-sm-color: var(--white-color);
|
||||
--border-pagination-color: var(--grey-1);
|
||||
--border-pagination-span-color: var(--grey-1);
|
||||
--border-motd-body-color: var(--white-color);
|
||||
--border-daterangepicker-color: var(--white-color);
|
||||
--border-calendar-table: var(--black-color);
|
||||
--border-daterangepicker: var(--black-color);
|
||||
|
|
|
|||
|
|
@ -201,8 +201,18 @@ pre {
|
|||
background-color: var(--bg-progress-color);
|
||||
}
|
||||
|
||||
.motd-body {
|
||||
background-color: var(--bg-motd-body-color) !important;
|
||||
.widget-body.motd-body {
|
||||
border: 1px solid var(--border-motd-body-color);
|
||||
color: var(--text-motd-body-color);
|
||||
background: var(--bg-motd-body-color) url(../images/purple-gradient.svg) top right / 40% no-repeat;
|
||||
}
|
||||
|
||||
.widget-body.motd-body .btn.btn-link,
|
||||
.widget-body.motd-body .btn.btn-link:hover {
|
||||
padding: 0 5px 0 4px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--bg-motd-btn-color);
|
||||
color: var(--text-motd-btn-color);
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
|
|
@ -408,14 +418,10 @@ input:-webkit-autofill {
|
|||
}
|
||||
|
||||
.sidebar.tippy-box[data-placement^='right'] > .tippy-arrow:before {
|
||||
border-right: 8px solid var(--ui-blue-9);
|
||||
border-right: 8px solid var(--graphite-600);
|
||||
border-width: 6px 8px 6px 0;
|
||||
}
|
||||
|
||||
[theme='dark'] .sidebar.tippy-box[data-placement^='right'] > .tippy-arrow:before {
|
||||
border-right: 8px solid var(--ui-gray-true-9);
|
||||
}
|
||||
|
||||
[theme='highcontrast'] .sidebar.tippy-box[data-placement^='right'] > .tippy-arrow:before {
|
||||
border-right: 8px solid var(--ui-white);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue