| @@ -2,6 +2,47 @@ | |||||
| <html lang="en"> | <html lang="en"> | ||||
| <head> | <head> | ||||
| <meta charset="utf-8" /> | <meta charset="utf-8" /> | ||||
| <!-- Preload critical Public Sans webfont files and declare @font-face so the browser | |||||
| uses the custom font immediately on page render, eliminating the flash of the | |||||
| default/fallback font (FOIT/FOUT). --> | |||||
| <link rel="preload" as="font" href="%PUBLIC_URL%/public-sans-latin-400-normal.woff2" type="font/woff2" crossorigin="anonymous" /> | |||||
| <link rel="preload" as="font" href="%PUBLIC_URL%/public-sans-latin-500-normal.woff2" type="font/woff2" crossorigin="anonymous" /> | |||||
| <link rel="preload" as="font" href="%PUBLIC_URL%/public-sans-latin-600-normal.woff2" type="font/woff2" crossorigin="anonymous" /> | |||||
| <link rel="preload" as="font" href="%PUBLIC_URL%/public-sans-latin-700-normal.woff2" type="font/woff2" crossorigin="anonymous" /> | |||||
| <style> | |||||
| @font-face { | |||||
| font-family: 'Public Sans'; | |||||
| font-style: normal; | |||||
| font-display: swap; | |||||
| font-weight: 400; | |||||
| src: url(%PUBLIC_URL%/public-sans-latin-400-normal.woff2) format('woff2'); | |||||
| unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; | |||||
| } | |||||
| @font-face { | |||||
| font-family: 'Public Sans'; | |||||
| font-style: normal; | |||||
| font-display: swap; | |||||
| font-weight: 500; | |||||
| src: url(%PUBLIC_URL%/public-sans-latin-500-normal.woff2) format('woff2'); | |||||
| unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; | |||||
| } | |||||
| @font-face { | |||||
| font-family: 'Public Sans'; | |||||
| font-style: normal; | |||||
| font-display: swap; | |||||
| font-weight: 600; | |||||
| src: url(%PUBLIC_URL%/public-sans-latin-600-normal.woff2) format('woff2'); | |||||
| unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; | |||||
| } | |||||
| @font-face { | |||||
| font-family: 'Public Sans'; | |||||
| font-style: normal; | |||||
| font-display: swap; | |||||
| font-weight: 700; | |||||
| src: url(%PUBLIC_URL%/public-sans-latin-700-normal.woff2) format('woff2'); | |||||
| unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; | |||||
| } | |||||
| </style> | |||||
| <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png"> | <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png"> | ||||
| <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png"> | <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png"> | ||||
| <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#5bbad5"> | <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#5bbad5"> | ||||
| @@ -1,19 +1,20 @@ | |||||
| /* Self-hosted fonts (bundled via @fontsource; no Google Fonts CDN — CSP-friendly). */ | /* Self-hosted fonts (bundled via @fontsource; no Google Fonts CDN — CSP-friendly). */ | ||||
| /* All @fontsource v5 packages already use font-display: swap by default. */ | |||||
| /* Public Sans — MUI theme (`themeConst.js`), charts, config */ | /* Public Sans — MUI theme (`themeConst.js`), charts, config */ | ||||
| @import "@fontsource/public-sans/400.css"; | |||||
| @import "@fontsource/public-sans/500.css"; | |||||
| @import "@fontsource/public-sans/600.css"; | |||||
| @import "@fontsource/public-sans/700.css"; | |||||
| @import url("@fontsource/public-sans/400.css"); | |||||
| @import url("@fontsource/public-sans/500.css"); | |||||
| @import url("@fontsource/public-sans/600.css"); | |||||
| @import url("@fontsource/public-sans/700.css"); | |||||
| /* Noto Sans HK — `styles.css` / navbar (Latin + Hong Kong glyphs) */ | |||||
| @import "@fontsource/noto-sans-hk/latin-400.css"; | |||||
| @import "@fontsource/noto-sans-hk/chinese-hongkong-400.css"; | |||||
| @import "@fontsource/noto-sans-hk/latin-600.css"; | |||||
| @import "@fontsource/noto-sans-hk/chinese-hongkong-600.css"; | |||||
| /* Noto Sans HK — navbar (Latin + Hong Kong glyphs) */ | |||||
| @import url("@fontsource/noto-sans-hk/latin-400.css"); | |||||
| @import url("@fontsource/noto-sans-hk/chinese-hongkong-400.css"); | |||||
| @import url("@fontsource/noto-sans-hk/latin-600.css"); | |||||
| @import url("@fontsource/noto-sans-hk/chinese-hongkong-600.css"); | |||||
| /* Noto Sans SC — fallback for simplified Chinese */ | /* Noto Sans SC — fallback for simplified Chinese */ | ||||
| @import "@fontsource/noto-sans-sc/latin-400.css"; | |||||
| @import "@fontsource/noto-sans-sc/chinese-simplified-400.css"; | |||||
| @import "@fontsource/noto-sans-sc/latin-600.css"; | |||||
| @import "@fontsource/noto-sans-sc/chinese-simplified-600.css"; | |||||
| @import url("@fontsource/noto-sans-sc/latin-400.css"); | |||||
| @import url("@fontsource/noto-sans-sc/chinese-simplified-400.css"); | |||||
| @import url("@fontsource/noto-sans-sc/latin-600.css"); | |||||
| @import url("@fontsource/noto-sans-sc/chinese-simplified-600.css"); | |||||
| @@ -20,7 +20,7 @@ export const PNSPS_BUTTON_THEME = createTheme({ | |||||
| }, | }, | ||||
| save:{ | save:{ | ||||
| main: '#448DF2', | |||||
| main: '#0c489e', | |||||
| contrastText: '#FFFFFF', | contrastText: '#FFFFFF', | ||||
| }, | }, | ||||
| export:{ | export:{ | ||||
| @@ -44,7 +44,7 @@ export const PNSPS_BUTTON_THEME = createTheme({ | |||||
| contrastText: '#FFFFFF', | contrastText: '#FFFFFF', | ||||
| }, | }, | ||||
| success:{ | success:{ | ||||
| main: '#448DF2', | |||||
| main: '#0c489e', | |||||
| contrastText: '#FFFFFF', | contrastText: '#FFFFFF', | ||||
| }, | }, | ||||
| green:{ | green:{ | ||||
| @@ -194,7 +194,7 @@ export const PNSPS_LONG_BUTTON_THEME = createTheme({ | |||||
| }, | }, | ||||
| save:{ | save:{ | ||||
| main: '#448DF2', | |||||
| main: '#0c489e', | |||||
| contrastText: '#FFFFFF', | contrastText: '#FFFFFF', | ||||
| }, | }, | ||||
| export:{ | export:{ | ||||
| @@ -28,7 +28,7 @@ export const piechartColor2 = [ | |||||
| ]; | ]; | ||||
| export const cardBorderColor = [ | export const cardBorderColor = [ | ||||
| '#efb142', '#4bb641', '#448df2', '#e03c04' | |||||
| '#efb142', '#4bb641', '#0c489e', '#e03c04' | |||||
| ]; | ]; | ||||
| export const chartLineColor = [ | export const chartLineColor = [ | ||||
| @@ -39,7 +39,7 @@ export const GENERAL_RED_COLOR = '#e03c04'; | |||||
| export const TABLE_HEADER_TEXT_COLOR = "#1565C0"; | export const TABLE_HEADER_TEXT_COLOR = "#1565C0"; | ||||
| export const GENERAL_INFO_COLOR = '#448df2'; | |||||
| export const GENERAL_INFO_COLOR = '#0c489e'; | |||||
| export const GENERAL_SETTING_COLOR = '#666666'; | export const GENERAL_SETTING_COLOR = '#666666'; | ||||