added theme
This commit is contained in:
parent
a2892c2c45
commit
ead4678559
203
theme/main.css
Normal file
203
theme/main.css
Normal file
@ -0,0 +1,203 @@
|
||||
.pf-c-button {
|
||||
--pf-c-button--m-primary--hover--Color: var(--color-frappe-surface0) !important;
|
||||
--pf-c-button--m-primary--Color: var(--color-frappe-surface1) !important;
|
||||
--pf-c-button--m-danger--Color: var(--pf-c-button--m-primary--Color)!important;
|
||||
--pf-c-button--m-danger--hover--Color: var(--pf-c-button--m-primary--hover--Color)!important;
|
||||
}
|
||||
|
||||
.pf-c-card {
|
||||
--pf-c-card--BackgroundColor: var(--color-frappe-mantle);
|
||||
}
|
||||
|
||||
.pf-c-toolbar {
|
||||
--pf-c-toolbar--BackgroundColor: var(--color-frappe-mantle) !important;
|
||||
}
|
||||
|
||||
.pf-c-table {
|
||||
--pf-c-table--BackgroundColor: var(--color-frappe-mantle) !important;
|
||||
}
|
||||
|
||||
.pf-c-pagination.pf-m-bottom {
|
||||
background-color: var(--color-frappe-mantle) !important;
|
||||
}
|
||||
|
||||
#graph .flowchart-link {
|
||||
stroke: var(--color-frappe-flamingo) !important;
|
||||
}
|
||||
|
||||
|
||||
.pf-c-nav__link.pf-m-current::after, .pf-c-nav__link.pf-m-current:hover::after, .pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link::after {
|
||||
--pf-c-nav__link--m-current--after--BorderColor: var(--color-frappe-red);
|
||||
}
|
||||
|
||||
:host([theme="dark"]) .background-default-slant {
|
||||
background-color: var(--color-frappe-mantle) !important;
|
||||
}
|
||||
|
||||
:host([theme="light"]) .background-default-slant {
|
||||
background-color: var(--color-frappe-surface1) !important;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-frappe-rosewater: #f2d5cf;
|
||||
--color-frappe-flamingo: #eebebe;
|
||||
--color-frappe-pink: #f4b8e4;
|
||||
--color-frappe-mauve: #ca9ee6;
|
||||
--color-frappe-red: #e78284;
|
||||
--color-frappe-maroon: #ea999c;
|
||||
--color-frappe-peach: #ef9f76;
|
||||
--color-frappe-yellow: #e5c890;
|
||||
--color-frappe-green: #a6d189;
|
||||
--color-frappe-teal: #81c8be;
|
||||
--color-frappe-sky: #99d1db;
|
||||
--color-frappe-sapphire: #85c1dc;
|
||||
--color-frappe-blue: #8caaee;
|
||||
--color-frappe-lavender: #babbf1;
|
||||
--color-frappe-text: #c6d0f5;
|
||||
--color-frappe-subtext1: #b5bfe2;
|
||||
--color-frappe-subtext0: #a5adce;
|
||||
--color-frappe-overlay2: #949cbb;
|
||||
--color-frappe-overlay1: #838ba7;
|
||||
--color-frappe-overlay0: #737994;
|
||||
--color-frappe-surface2: #626880;
|
||||
--color-frappe-surface1: #51576d;
|
||||
--color-frappe-surface0: #414559;
|
||||
--color-frappe-base: #303446;
|
||||
--color-frappe-mantle: #292c3c;
|
||||
--color-frappe-crust: #232634;
|
||||
|
||||
--ak-accent: var(--color-frappe-red) !important;
|
||||
--ak-dark-foreground: var( --color-frappe-text) !important;
|
||||
--ak-dark-foreground-darker: var(--color-frappe-subtext1) !important;
|
||||
--ak-dark-foreground-link: var(--color-frappe-blue) !important;
|
||||
--ak-dark-background: var( --color-frappe-base) !important;
|
||||
--ak-dark-background-darker: var( --color-frappe-crust) !important;
|
||||
--ak-dark-background-light: var(--color-frappe-surface1) !important;
|
||||
--ak-dark-background-light-ish: var(--color-frappe-surface0) !important;
|
||||
--ak-dark-background-lighter: var(--color-frappe-surface2) !important;
|
||||
|
||||
--pf-global--link--Color: var(--color-frappe-sapphire) !important;
|
||||
--pf-global--link--Color--hover: color-mix(in srgb, var(--color-frappe-sapphire) 95%, black) !important;
|
||||
--pf-global--link--Color--light: color-mix(in srgb, var(--color-frappe-sapphire) 95%, white) !important;
|
||||
--pf-global--link--Color--light--hover: color-mix(in srgb, var(--color-frappe-sapphire) 90%, white) !important;
|
||||
--pf-global--link--Color--dark: var(--color-frappe-blue) !important;
|
||||
--pf-global--link--Color--dark--hover: color-mix(in srgb, var(--color-frappe-blue) 95%, black) !important;
|
||||
--pf-global--link--Color--visited: var(--color-frappe-mauve) !important;
|
||||
|
||||
--pf-global--BorderColor--100: var(--color-frappe-overlay1) !important;
|
||||
--pf-global--BorderColor--200: var(--color-frappe-overlay0) !important;
|
||||
--pf-global--BorderColor--300: var(--color-frappe-overlay2) !important;
|
||||
--pf-global--BorderColor--dark-100: color-mix(in srgb, var(--color-frappe-overlay1) 95%, black) !important;
|
||||
--pf-global--BorderColor--light-100: color-mix(in srgb, var(--color-frappe-overlay1) 95%, white) !important;
|
||||
--pf-global--icon--Color--light: var(--color-frappe-surface2) !important;
|
||||
--pf-global--icon--Color--dark: var(--color-frappe-mantle) !important;
|
||||
|
||||
--pf-global--Color--100: var(--ak-dark-foreground) !important;
|
||||
--ak-global--Color--100: var(--ak-dark-foreground) !important;
|
||||
--pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker) !important;
|
||||
--pf-global--BorderColor--100: var(--ak-dark-background-lighter) !important;
|
||||
--pf-global--link--Color: var(--pf-global--link--Color--light) !important;
|
||||
--pf-global--link--Color--hover: var(--pf-global--link--Color--light--hover) !important;
|
||||
|
||||
--ak-flow-background-color-contrast: var(--pf-global--Color--100);
|
||||
--ak-flow-footer-color: var(--pf-global--Color--light-100);
|
||||
--ak-global--Color--100: var(--pf-global--Color--100);
|
||||
--ak-sidebar--minimum-auto-width: 80rem;
|
||||
--ak-navbar--height: 7rem;
|
||||
--pf-global--disabled-color--100: GrayText;
|
||||
--pf-global--disabled-color--200: color-mix(in srgb, GrayText 100%, CanvasText 75%);
|
||||
--pf-global--disabled-color--300: color-mix(in srgb, GrayText 100%, CanvasText 100%);
|
||||
|
||||
/* ---------- White ---------- */
|
||||
--pf-global--palette--white: var(--color-frappe-text) !important;
|
||||
|
||||
/* ---------- Backgrounds (generic) ---------- */
|
||||
--pf-global--BackgroundColor--100: var(--color-frappe-base) !important;
|
||||
--pf-global--BackgroundColor--150: var(--color-frappe-surface0) !important;
|
||||
--pf-global--BackgroundColor--200: var(--color-frappe-surface1) !important;
|
||||
|
||||
/* ---------- Backgrounds (light) ---------- */
|
||||
--pf-global--BackgroundColor--light-100: var(--color-frappe-surface0) !important;
|
||||
--pf-global--BackgroundColor--light-200: var(--color-frappe-surface1) !important;
|
||||
--pf-global--BackgroundColor--light-300: var(--color-frappe-surface2) !important;
|
||||
|
||||
/* ---------- Backgrounds (dark) ---------- */
|
||||
--pf-global--BackgroundColor--dark-100: var(--color-frappe-base) !important;
|
||||
--pf-global--BackgroundColor--dark-200: var(--color-frappe-mantle) !important;
|
||||
--pf-global--BackgroundColor--dark-300: var(--color-frappe-crust) !important;
|
||||
--pf-global--BackgroundColor--dark-400: color-mix(in srgb, var(--color-frappe-crust) 95%, black) !important;
|
||||
|
||||
/* ---------- Backgrounds (dark transparent) ---------- */
|
||||
--pf-global--BackgroundColor--dark-transparent-100: color-mix(
|
||||
in srgb,
|
||||
var(--color-frappe-crust) 62%,
|
||||
transparent
|
||||
) !important;
|
||||
|
||||
--pf-global--BackgroundColor--dark-transparent-200: color-mix(
|
||||
in srgb,
|
||||
var(--color-frappe-crust) 32%,
|
||||
transparent
|
||||
) !important;
|
||||
|
||||
/* ---------- Text / Foreground colors ---------- */
|
||||
--pf-global--Color--100: var(--color-frappe-text) !important;
|
||||
--pf-global--Color--200: var(--color-frappe-subtext1) !important;
|
||||
--pf-global--Color--300: var(--color-frappe-subtext0) !important;
|
||||
--pf-global--Color--400: var(--color-frappe-overlay2) !important;
|
||||
|
||||
/* ---------- Light text ---------- */
|
||||
--pf-global--Color--light-100: var(--color-frappe-text) !important;
|
||||
--pf-global--Color--light-200: var(--color-frappe-subtext1) !important;
|
||||
--pf-global--Color--light-300: var(--color-frappe-subtext0) !important;
|
||||
|
||||
/* ---------- Dark text ---------- */
|
||||
--pf-global--Color--dark-100: var(--color-frappe-text) !important;
|
||||
--pf-global--Color--dark-200: var(--color-frappe-subtext1) !important;
|
||||
|
||||
/* ---------- Active / Focus ---------- */
|
||||
--pf-global--active-color--100: var(--color-frappe-blue) !important;
|
||||
--pf-global--active-color--200: color-mix(in srgb, var(--color-frappe-blue) 90%, var(--color-frappe-base)) !important;
|
||||
--pf-global--active-color--300: var(--color-frappe-sapphire) !important;
|
||||
--pf-global--active-color--400: color-mix(in srgb, var(--color-frappe-blue) 85%, var(--color-frappe-surface0)) !important;
|
||||
|
||||
/* ---------- Disabled ---------- */
|
||||
--pf-global--disabled-color--100: var(--color-frappe-overlay1) !important;
|
||||
--pf-global--disabled-color--200: var(--color-frappe-surface2) !important;
|
||||
--pf-global--disabled-color--300: var(--color-frappe-surface1) !important;
|
||||
|
||||
/* ---------- Primary ---------- */
|
||||
--pf-global--primary-color--100: var(--color-frappe-blue) !important;
|
||||
--pf-global--primary-color--200: color-mix(in srgb, var(--color-frappe-blue) 85%, var(--color-frappe-crust)) !important;
|
||||
--pf-global--primary-color--light-100: var(--color-frappe-sky) !important;
|
||||
--pf-global--primary-color--dark-100: var(--color-frappe-sapphire) !important;
|
||||
|
||||
/* ---------- Secondary ---------- */
|
||||
--pf-global--secondary-color--100: var(--color-frappe-overlay1) !important;
|
||||
|
||||
/* ---------- Default / Neutral accent ---------- */
|
||||
--pf-global--default-color--100: var(--color-frappe-teal) !important;
|
||||
--pf-global--default-color--200: color-mix(in srgb, var(--color-frappe-teal) 90%, var(--color-frappe-crust)) !important;
|
||||
--pf-global--default-color--300: color-mix(in srgb, var(--color-frappe-teal) 80%, var(--color-frappe-crust)) !important;
|
||||
|
||||
/* ---------- Success ---------- */
|
||||
--pf-global--success-color--100: var(--color-frappe-green) !important;
|
||||
--pf-global--success-color--200: color-mix(in srgb, var(--color-frappe-green) 85%, var(--color-frappe-crust)) !important;
|
||||
|
||||
/* ---------- Info ---------- */
|
||||
--pf-global--info-color--100: var(--color-frappe-blue) !important;
|
||||
--pf-global--info-color--200: color-mix(in srgb, var(--color-frappe-blue) 85%, var(--color-frappe-crust)) !important;
|
||||
|
||||
/* ---------- Warning ---------- */
|
||||
--pf-global--warning-color--100: var(--color-frappe-yellow) !important;
|
||||
--pf-global--warning-color--200: color-mix(in srgb, var(--color-frappe-yellow) 85%, var(--color-frappe-crust)) !important;
|
||||
|
||||
/* ---------- Danger ---------- */
|
||||
--pf-global--danger-color--100: var(--color-frappe-red) !important;
|
||||
--pf-global--danger-color--200: var(--color-frappe-maroon) !important;
|
||||
--pf-global--danger-color--300: color-mix(in srgb, var(--color-frappe-maroon) 90%, var(--color-frappe-crust)) !important;
|
||||
|
||||
|
||||
--pf-global--palette--black-100: var(--color-frappe-text) !important;
|
||||
--pf-global--palette--black-150: color-mix(in srgb, var(--color-frappe-text) 85%, var(--color-frappe-base)) !important;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user