Chris Chen
271 lines
8.3 KiB
SCSS
271 lines
8.3 KiB
SCSS
/* Shared UI Utility Classes */
|
|
@use "app/shared/styles/ui-utils.scss";
|
|
|
|
/* Site-wide layout (unified system header, etc.) */
|
|
@use "app/shared/styles/site.scss";
|
|
|
|
@import "https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";
|
|
|
|
/* Kendo UI Theme */
|
|
//@import "@progress/kendo-theme-default/dist/all.css";
|
|
|
|
/* Override Kendo UI Card default width */
|
|
.k-card {
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Reset styles */
|
|
*,
|
|
::before,
|
|
::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
p,
|
|
ul,
|
|
ol,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p,
|
|
pre,
|
|
blockquote {
|
|
margin: 0;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
ol,
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
hr {
|
|
height: 0;
|
|
border-top-width: 1px;
|
|
border-bottom-width: 0;
|
|
}
|
|
/* End of Reset styles */
|
|
|
|
:root {
|
|
/* Color System */
|
|
/* Ink tones (shared by the unified system header and finance pages) */
|
|
--ink: #1c2a38;
|
|
--ink-soft: #50647c;
|
|
/* Misc */
|
|
--kendo-color-app-surface: #fff;
|
|
--kendo-color-surface: #f2f4f7;
|
|
--kendo-color-surface-alt: #fff;
|
|
--kendo-color-on-app-surface: #28323e;
|
|
--kendo-color-subtle: #50647c;
|
|
--kendo-color-border: rgba(23, 65, 99, 0.12);
|
|
--kendo-color-border-alt: rgba(23, 65, 99, 0.24);
|
|
/* Base */
|
|
--kendo-color-base-subtle: #e6eaef;
|
|
--kendo-color-base-subtle-hover: #dae0e7;
|
|
--kendo-color-base-subtle-active: #c1cbd7;
|
|
--kendo-color-base: #ffffff;
|
|
--kendo-color-base-hover: #e6eaef;
|
|
--kendo-color-base-active: #dae0e7;
|
|
--kendo-color-base-emphasis: #405063;
|
|
--kendo-color-on-base: #202832;
|
|
--kendo-color-base-on-surface: #28323e;
|
|
--kendo-color-base-on-subtle: #181e25;
|
|
/* Primary */
|
|
--kendo-color-primary-subtle: #daecfb;
|
|
--kendo-color-primary-subtle-hover: #c7e3f9;
|
|
--kendo-color-primary-subtle-active: #a2d0f6;
|
|
--kendo-color-primary: #0279cf;
|
|
--kendo-color-primary-hover: #136db9;
|
|
--kendo-color-primary-active: #1767ab;
|
|
--kendo-color-primary-emphasis: #15588e;
|
|
--kendo-color-on-primary: #ffffff;
|
|
--kendo-color-primary-on-surface: #136db9;
|
|
--kendo-color-primary-on-subtle: #174163;
|
|
/* Secondary */
|
|
--kendo-color-secondary-subtle: #a8b6c7;
|
|
--kendo-color-secondary-subtle-hover: #8fa1b7;
|
|
--kendo-color-secondary-subtle-active: #768ca7;
|
|
--kendo-color-secondary: #607895;
|
|
--kendo-color-secondary-hover: #50647c;
|
|
--kendo-color-secondary-active: #405063;
|
|
--kendo-color-secondary-emphasis: #202832;
|
|
--kendo-color-on-secondary: #ffffff;
|
|
--kendo-color-secondary-on-surface: #50647c;
|
|
--kendo-color-secondary-on-subtle: #101419;
|
|
/* Tertiary */
|
|
--kendo-color-tertiary-subtle: #dafbf9;
|
|
--kendo-color-tertiary-subtle-hover: #c7f9f7;
|
|
--kendo-color-tertiary-subtle-active: #a2f6f1;
|
|
--kendo-color-tertiary: #16d4cb;
|
|
--kendo-color-tertiary-hover: #13b9b0;
|
|
--kendo-color-tertiary-active: #16a29b;
|
|
--kendo-color-tertiary-emphasis: #137c77;
|
|
--kendo-color-on-tertiary: #000000;
|
|
--kendo-color-tertiary-on-surface: #13b9b0;
|
|
--kendo-color-tertiary-on-subtle: #104240;
|
|
/* Error */
|
|
--kendo-color-error-subtle: #fcdcd9;
|
|
--kendo-color-error-subtle-hover: #fcc4c0;
|
|
--kendo-color-error-subtle-active: #faa9a3;
|
|
--kendo-color-error: #e71b0d;
|
|
--kendo-color-error-hover: #d41a0c;
|
|
--kendo-color-error-active: #c1170b;
|
|
--kendo-color-error-emphasis: #911108;
|
|
--kendo-color-on-error: #ffffff;
|
|
--kendo-color-error-on-surface: #d41a0c;
|
|
--kendo-color-error-on-subtle: #4d0904;
|
|
/* Success */
|
|
--kendo-color-success-subtle: #d9fce8;
|
|
--kendo-color-success-subtle-hover: #c2fad9;
|
|
--kendo-color-success-subtle-active: #a6f7c8;
|
|
--kendo-color-success: #32ed7f;
|
|
--kendo-color-success-hover: #14e069;
|
|
--kendo-color-success-active: #12ce60;
|
|
--kendo-color-success-emphasis: #0c8d42;
|
|
--kendo-color-on-success: #000;
|
|
--kendo-color-success-on-surface: #14e069;
|
|
--kendo-color-success-on-subtle: #074b23;
|
|
/* Warning */
|
|
--kendo-color-warning-subtle: #fcf6d9;
|
|
--kendo-color-warning-subtle-hover: #faf0c2;
|
|
--kendo-color-warning-subtle-active: #f7eaa6;
|
|
--kendo-color-warning: #edcd32;
|
|
--kendo-color-warning-hover: #e0be14;
|
|
--kendo-color-warning-active: #ceaf12;
|
|
--kendo-color-warning-emphasis: #8d770c;
|
|
--kendo-color-on-warning: #000000;
|
|
--kendo-color-warning-on-surface: #e0be14;
|
|
--kendo-color-warning-on-subtle: #4b4007;
|
|
/* Info */
|
|
--kendo-color-info-subtle: #d9f6fc;
|
|
--kendo-color-info-subtle-hover: #c2f0fa;
|
|
--kendo-color-info-subtle-active: #a6eaf7;
|
|
--kendo-color-info: #32ceed;
|
|
--kendo-color-info-hover: #14bee0;
|
|
--kendo-color-info-active: #12afce;
|
|
--kendo-color-info-emphasis: #0c778d;
|
|
--kendo-color-on-info: #000000;
|
|
--kendo-color-info-on-surface: #14bee0;
|
|
--kendo-color-info-on-subtle: #07404b;
|
|
/* Light */
|
|
--kendo-color-light-subtle: #e6eaef;
|
|
--kendo-color-light-subtle-hover: #dae0e7;
|
|
--kendo-color-light-subtle-active: #c1cbd7;
|
|
--kendo-color-light: #f2f4f7;
|
|
--kendo-color-light-hover: #e6eaef;
|
|
--kendo-color-light-active: #dae0e7;
|
|
--kendo-color-light-emphasis: #a8b6c7;
|
|
--kendo-color-on-light: #181e25;
|
|
--kendo-color-light-on-surface: #e6eaef;
|
|
--kendo-color-light-on-subtle: #303c4a;
|
|
/* Dark */
|
|
--kendo-color-dark-subtle: #202832;
|
|
--kendo-color-dark-subtle-hover: #28323e;
|
|
--kendo-color-dark-subtle-active: #303c4a;
|
|
--kendo-color-dark: #101419;
|
|
--kendo-color-dark-hover: #181e25;
|
|
--kendo-color-dark-active: #202832;
|
|
--kendo-color-dark-emphasis: #50647c;
|
|
--kendo-color-on-dark: #ffffff;
|
|
--kendo-color-dark-on-surface: #181e25;
|
|
--kendo-color-dark-on-subtle: #f2f4f7;
|
|
/* Series A */
|
|
--kendo-color-series-a-subtler: #e4b4c1;
|
|
--kendo-color-series-a: #c35573;
|
|
--kendo-color-series-a-bold: #a63a57;
|
|
--kendo-color-series-a-subtle: #d5869b;
|
|
--kendo-color-series-a-bolder: #792a3f;
|
|
/* Series B */
|
|
--kendo-color-series-b-subtler: #accfec;
|
|
--kendo-color-series-b: #4493d5;
|
|
--kendo-color-series-b-bold: #2975b3;
|
|
--kendo-color-series-b-subtle: #7ab3e1;
|
|
--kendo-color-series-b-bolder: #1d5481;
|
|
/* Series C */
|
|
--kendo-color-series-c-subtler: #b1d2c2;
|
|
--kendo-color-series-c: #62a583;
|
|
--kendo-color-series-c-bold: #4a8266;
|
|
--kendo-color-series-c-subtle: #8abca3;
|
|
--kendo-color-series-c-bolder: #345b47;
|
|
/* Series D */
|
|
--kendo-color-series-d-subtler: #69bed8;
|
|
--kendo-color-series-d: #28829d;
|
|
--kendo-color-series-d-bold: #1c5b6d;
|
|
--kendo-color-series-d-subtle: #38a9cc;
|
|
--kendo-color-series-d-bolder: #10323d;
|
|
/* Series E */
|
|
--kendo-color-series-e-subtler: #eed57c;
|
|
--kendo-color-series-e: #d6ad1c;
|
|
--kendo-color-series-e-bold: #a28415;
|
|
--kendo-color-series-e-subtle: #e7c446;
|
|
--kendo-color-series-e-bolder: #6c580e;
|
|
/* SERIES F */
|
|
--kendo-color-series-f-subtler: #c5c0d8;
|
|
--kendo-color-series-f: #7f76a9;
|
|
--kendo-color-series-f-bold: #60568a;
|
|
--kendo-color-series-f-subtle: #a29bc0;
|
|
--kendo-color-series-f-bolder: #463f64;
|
|
|
|
/* Typography */
|
|
--kendo-font-family: "Fira Sans", sans-serif;
|
|
|
|
--kendo-font-size: 14px;
|
|
--kendo-font-size-sm: 12px;
|
|
--kendo-font-size-md: var(--kendo-font-size);
|
|
--kendo-font-size-lg: 16px;
|
|
--kendo-font-size-xl: 20px;
|
|
|
|
--kendo-h1-font-size: 56px;
|
|
--kendo-h2-font-size: 42px;
|
|
--kendo-h3-font-size: 35px;
|
|
--kendo-h4-font-size: 28px;
|
|
--kendo-h5-font-size: 21px;
|
|
--kendo-h6-font-size: 14px;
|
|
|
|
--kendo-line-height-xs: 1.2;
|
|
--kendo-line-height-sm: 1.25;
|
|
--kendo-line-height-md: 1.42;
|
|
--kendo-line-height-lg: 1.5;
|
|
|
|
--kendo-h1-line-height: calc((var(--kendo-font-size) * 4) * 1.25);
|
|
--kendo-h2-line-height: calc((var(--kendo-font-size) * 3) * 1.2);
|
|
--kendo-h3-line-height: calc((var(--kendo-font-size) * 2.5) * 1.2);
|
|
--kendo-h4-line-height: calc((var(--kendo-font-size) * 2) * 1.2);
|
|
--kendo-h5-line-height: calc((var(--kendo-font-size) * 1.5) * 1.25);
|
|
--kendo-h6-line-height: calc((var(--kendo-font-size) * 1) * 1.25);
|
|
|
|
--kendo-h1-font-weight: 400;
|
|
--kendo-h2-font-weight: 400;
|
|
--kendo-h3-font-weight: 400;
|
|
--kendo-h4-font-weight: 500;
|
|
--kendo-h5-font-weight: 500;
|
|
--kendo-h6-font-weight: 500;
|
|
|
|
/* Border radius */
|
|
--k-border-radius-null: 0px;
|
|
--kendo-border-radius-xs: 4px;
|
|
--kendo-border-radius-sm: 6px;
|
|
--kendo-border-radius-md: 12px;
|
|
--kendo-border-radius-lg: 24px;
|
|
--kendo-border-radius-xl: 36px;
|
|
--kendo-border-radius-xxl: 48px;
|
|
--kendo-border-radius-xxxl: 60px;
|
|
--kendo-border-radius-full: 9999px;
|
|
|
|
/* Panel Gradient */
|
|
--panel-gradient: linear-gradient(to bottom, white 60%, #fafafa 0%);
|
|
}
|