/* ------------------------ MAIN.CSS ------------------------ */ :root { /* ======= [ COLOURS ] ======= */ /* === COLOURS: BASE === */ /* --midground-color: #3027ad; */ --primary-lite: #e0efff; /* --primary-color: #007AFF; */ --primary-color: #ADDFFF; /* --primary-color: #BDEDFF; */ --secondary-color: #7B68EE; --success-lite: #b5ffc7; --success-color: #1aac3e; --warning-lite: #fff3e3; --warning-color: #FF9500; --danger-lite: #ffbdb9; --danger-color: #E42217; /* --background-color: transparent; */ --background-color: #5CB3FF; --background-color-lite: #BDEDFF; --active-color: #FFD801; --outlier-color: #FF00FF; /* === COLOURS: BLACK N WHITE === */ --text-primary: #000000; --text-shadow-color: #c4c4c5; --text-secondary: #3C3C43; --text-tertiary: #8E8E93; --secondary-background-color: #FFFFFF; --tertiary-background-color: #d8d8d8; --lite-background: rgb(0 122 255 / 0.1); --modal-background: rgb(0 0 0 / 0.5); --surface-color: #FFFFFF; --surface-color-lite: #e9e9e9; --surface-color-muted: #e9e9e9; --border-color: #c5c4c4; --border-fullfat: #8E8E93; /* === COLOURS: SHADOW === */ /* --shadow-sm: 0.0675rem 0.0675rem 0.0675rem rgb(0 0 0 / 1); */ --shadow-sm: 0.0675rem 0.0675rem 0.0675rem rgb(0 0 0 / 0.5); --shadow-md: 0 0.25rem 0.75rem rgb(0 0 0 / 0.2); --shadow-lg: 0 0.375rem 1.125rem rgb(0 0 0 / 0.3); --shadow-xl: 0 0.5rem 1.5rem rgb(0 0 0 / 0.5); --shadow-txt-sm: none; /* 0px 0px 0px var(--text-shadow-color); */ --shadow-txt-lg: 2px 2px 0px var(--text-shadow-color); --shadow-txt-xl: 0.125rem 0.125rem 0.625rem #000000, -0.125rem 0.125rem 0.625rem #000000, 0.125rem -0.125rem 0.625rem #000000, -0.125rem -0.125rem 0.625rem #000000; /* === COLOURS: INSULIN === */ --rapid-insulin-color: #4F97C8; --medium-insulin-color: #339BA7; --slow-insulin-color: #216781; /* === COLOURS: CHARTS === */ --chart-color-plain: #808080; --chart-color-1: #007AFF; --chart-color-2: #FF6700; --chart-color-3: #01b41f; --chart-color-4: #00FFFF; --chart-color-bright: #ffffff; --chart-color-contrast: #ffffff; /* === COLOURS: TIME OF DAY === */ --color-timezone-0: rgb(150 100 255); --color-timezone-1: rgb(75 85 255); --color-timezone-2: rgb(0 100 255); --color-timezone-3: rgb(255 125 0); --color-timezone-4: rgb(255 90 0); --color-timezone-5: rgb(255 50 0); --color-timezone-6: rgb(0 175 255); --color-timezone-7: rgb(0 205 255); --color-timezone-8: rgb(0 175 200); --color-timezone-9: rgb(0 200 100); --color-timezone-10: rgb(45 90 255); --color-timezone-11: rgb(70 50 205); --color-timezone-12: rgb(115 65 255); /* === COLOURS: TIME OF DAY CALCS === */ --color-timezone-0-lite: 150, 100, 255; --color-timezone-1-lite: 75, 85, 255; --color-timezone-2-lite: 0, 100, 255; --color-timezone-3-lite: 255, 125, 0; --color-timezone-4-lite: 255, 90, 0; --color-timezone-5-lite: 255, 50, 0; --color-timezone-6-lite: 0, 175, 255; --color-timezone-7-lite: 0, 205, 255; --color-timezone-8-lite: 0, 175, 200; --color-timezone-9-lite: 0, 200, 100; --color-timezone-10-lite: 45, 90, 255; --color-timezone-11-lite: 70, 50, 205; --color-timezone-12-lite: 115, 65, 255; /* === COLOURS: EXERCISE INTENSITY === */ --color-exercise-0: #999999; --color-exercise-1: #1fcddd; --color-exercise-2: #4ea3ce; --color-exercise-3: #e78b00; --color-exercise-4: #fa634f; --color-exercise-5: #810541; /* === COLOURS: SEASON === */ --color-Summer: #fa0303; --color-Spring: #1AA260; --color-Autumn: #d35106; --color-Winter: #306EFF; /* === COLOURS: GLYCEMIC INDEX === */ --color-gi-vslow: #1f9c5c; --color-gi-slow: #16ca6d; --color-gi-medium: #05df6e; --color-gi-fast: #ff78b0; --color-gi-vfast: #ff1778; /* === COLOURS: MISCELLANEOUS === */ --opacity-vlite: 0.1; --opacity-lite: 0.2; /* ======= [ BORDERS ] ======= */ --border-dashed: 1px dashed var(--text-secondary); --border-xs: none; --border-sm: 1px solid var(--border-color); --border-md: 2px solid var(--border-color); --border-lg: 4px solid var(--border-color); --border-sm-in: 1px solid var(--border-color); --border-md-in: 2px solid var(--border-color); --border-lg-in: 4px solid var(--border-color); --border-sm-out: 1px solid var(--border-color); --border-md-out: 2px solid var(--border-color); --border-lg-out: 4px solid var(--border-color); --border-primary: 4px solid var(--primary-color); --border-dashboard: 3px solid var(--border-fullfat); --border-secondary: 4px solid var(--warning-color); --border-tertiary: 4px solid var(--secondary-color); --border-danger: 4px solid var(--danger-color); --border-primary-thin: 2px solid var(--primary-color); --border-secondary-thin: 2px solid var(--warning-color); --border-tertiary-thin: 2px solid var(--secondary-color); /* ======= [ PADDING/SPACING ] ======= */ --spacing-xxs: 0.25vw; --spacing-xs: 0.5vw; --spacing-sm: 1vw; --spacing-smd: 1.5vw; --spacing-md: 2vw; --spacing-lg: 3vw; --spacing-xl: 4vw; --padding-md-tlr: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md); /* ======= [ BOX CORNERS ] ======= */ --radius-sm: 0.25rem; --radius-md: 0.625rem; --radius-lg: 1rem; --radius-xl: 1.5rem; /* ======= [ FONT ] ======= */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --font-xxxs: 0.375rem; --font-xxs: 0.5rem; --font-xs: 0.75rem; --font-sm: 0.875rem; --font-md: 0.9375rem; --font-nav: 1rem; --font-lg: 1.25rem; --font-xl: 1.5rem; --font-xxl: 1.75rem; --font-xxxl: 2.25rem; --font-graph-sm: 0.375rem; --font-graph-md: 0.5rem; --font-graph-lg: 1.5rem; /* ======= [ ICONS ] ======= */ --icon-button-font: inherit; --icon-bin: url('../images/bin_large.png'); --icon-tick: url('../images/cat_awake.png'); --icon-edit: url('../images/pencil_large.png'); --icon-chart-lg: url('../images/chart_large.png'); /* ======= [ CELL SIZE ] ======= */ --cell-wide-xxs: 1rem; --cell-wide-xs: 2rem; --cell-wide-xsm: 3rem; --cell-wide-sm: 4rem; --cell-wide-md: 5rem; --cell-wide-lg: 6rem; --cell-wide-xl: 10rem; --cell-wide-xxl: 12rem; --cell-high-xs: 2.5rem; --cell-high-sm: 3rem; --cell-high-md: 5rem; --cell-high-lg: 6rem; --cell-high-xl: 10rem; --cell-high-xxl: 12rem; --cell-high-xxxl: 15rem; --cell-high-xxxxl: 30rem; /* ======= [ CURSOR ] ======= */ --mouse-default: default; --mouse-pointer: pointer; --mouse-text: text; } /* ============= [ THEME TWEAKS ] =============== */ [data-theme="lightModern"] { /* eslint-disable-next-line css/no-important */ --display-eighties: none !important; --display-modern: block; --icon-button-font: inherit; } [data-theme="dark"] { /* eslint-disable-next-line css/no-important */ --display-eighties: none !important; --display-modern: block; /* ======= [ COLOURS ] ======= */ /* === COLOURS: BASE === */ --primary-color: #0059FF; --secondary-color: #5E5CE6; --success-color: #00b45a; --warning-color: #FF9F0A; --danger-color: #ad0900cb; --background-color: #000000; --background-color-lite: #000000; --active-color: #393991; /* not changed from here */ --primary-lite: #e0efff; --success-lite: #b5ffc7; --warning-lite: #fff3e3; --danger-lite: #ffbdb9; --outlier-color: #DA1884; /* === COLOURS: BLACK N WHITE === */ --text-primary: #FFFFFF; --text-shadow-color: #38383A; --text-secondary: #CACACA; --text-tertiary: #8E8E93; --secondary-background-color: #3a3a3ae0; --tertiary-background-color: #000000; --surface-color: #1C1C1E; --surface-color-lite: #060607; --border-color: #38383A; --border-fullfat: #8E8E93; /* === COLOURS: INSULIN === */ --rapid-insulin-color: #ACCDE4; --medium-insulin-color: #4F97C8; --slow-insulin-color: #339BA7; /* === COLOURS: SHADOW === */ --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.3); --shadow-txt-sm: none; /* 0px 0px 0px var(--text-shadow-color); */ --shadow-txt-lg: 2px 2px 0px var(--text-shadow-color); --shadow-md: 0 4px 12px rgb(0 0 0 / 0.2); --shadow-lg: 0 6px 18px rgb(0 0 0 / 0.3); --shadow-xl: 0 8px 24px rgb(0 0 0 / 0.5); /* === COLOURS: CHARTS === */ --chart-color-plain: #808080; --chart-color-1: #52a6ff; --chart-color-2: #ffa600ff; --chart-color-3: #01b41f; --chart-color-4: #00FFFF; --chart-color-bright: #ffffff; --chart-color-contrast: #ffffff; /* NOT ALTERED YET */ /* === COLOURS: TIME OF DAY === */ --color-timezone-0: rgb(150 100 255); --color-timezone-1: rgb(75 85 255); --color-timezone-2: rgb(0 100 255); --color-timezone-3: rgb(255 175 0); --color-timezone-4: rgb(255 130 0); --color-timezone-5: rgb(255 75 0); --color-timezone-6: rgb(0 175 255); --color-timezone-7: rgb(0 255 255); --color-timezone-8: rgb(0 175 200); --color-timezone-9: rgb(0 200 100); --color-timezone-10: rgb(45 90 255); --color-timezone-11: rgb(70 50 205); --color-timezone-12: rgb(115 65 255); /* === COLOURS: TIME OF DAY CALCS === */ --color-timezone-0-lite: 150, 100, 255; --color-timezone-1-lite: 75, 85, 255; --color-timezone-2-lite: 0, 100, 255; --color-timezone-3-lite: 255, 175, 0; --color-timezone-4-lite: 255, 130, 0; --color-timezone-5-lite: 255, 75, 0; --color-timezone-6-lite: 0, 175, 255; --color-timezone-7-lite: 0, 255, 255; --color-timezone-8-lite: 0, 175, 200; --color-timezone-9-lite: 0, 200, 100; --color-timezone-10-lite: 45, 90, 255; --color-timezone-11-lite: 70, 50, 205; --color-timezone-12-lite: 115, 65, 255; /* === COLOURS: EXERCISE INTENSITY === */ --color-exercise-0: #999999; --color-exercise-1: #75d7e0; --color-exercise-2: #ABCAD9; --color-exercise-3: #F3B75E; --color-exercise-4: #F79082; --color-exercise-5: #9F000F; /* === COLOURS: SEASON === */ /* --color-Summer: #fa0303; --color-Spring: #03fa0f93; --color-Autumn: #ad4000; --color-Winter: #0480b1; */ /* === COLOURS: GLYCEMIC INDEX === */ --color-gi-vslow: #5DCA92; --color-gi-slow: #78DFAA; --color-gi-medium: #CFFFE6; --color-gi-fast: #FFCCE1; --color-gi-vfast: #FFA8CC; /* === COLOURS: MISCELLANEOUS === */ --opacity-vlite: 0.1; --opacity-lite: 0.2; } [data-theme="dark80s"] { --display-eighties: flex; /* eslint-disable-next-line css/no-important */ --display-modern: none !important; /* === COLOURS: BASE === */ /* --midground-color: #3027ad; */ --primary-color: #1589FF; --secondary-color: #c900c9; --success-color: #00b400; --danger-color: #ff0000; --background-color: #000000; --background-color-lite: #000000; --active-color: #800080; /* might not be changed from here */ --primary-lite: #e0efff; --success-lite: #b5ffc7; --warning-lite: #fff3e3; --warning-color: #FF9500; --danger-lite: #ffbdb9; --outlier-color: #FF00FF; /* === COLOURS: BLACK N WHITE === */ --text-primary: #FFFFFF; --text-secondary: #cacaca; --text-tertiary: #8E8E93; --secondary-background-color: #3a3a3ae0; --tertiary-background-color: #000000; --surface-color: #1C1C1E; --border-color: #38383A; --border-fullfat: #8E8E93; --surface-color-lite: #111010; --text-shadow-color: #000000; /* === COLOURS: SHADOW === */ --shadow-sm: 2px 2px 0 rgb(0 0 0 / 0.3); --shadow-txt-sm: none; /* 0px 0px 0px var(--text-shadow-color); */ --shadow-txt-lg: 4px 4px 0px var(--text-shadow-color); --shadow-md: 0 4px 12px rgb(0 0 0 / 0.2); --shadow-lg: 0 6px 18px rgb(0 0 0 / 0.3); --shadow-xl: 0 8px 24px rgb(0 0 0 / 0.5); /* === COLOURS: INSULIN === */ --rapid-insulin-color: #00FFFF; --medium-insulin-color: #339BA7; --slow-insulin-color: #83bee7; /* === COLOURS: CHARTS === */ --chart-color-plain: #8f8f8f; --chart-color-1: #00ccff; --chart-color-2: #FFA500; --chart-color-3: #00e000; --chart-color-4: #ff00ea; --chart-color-bright: #FFFFFF; --chart-color-contrast: #00FFFF; /* === COLOURS: TIME OF DAY === */ /* === COLOURS: TIME OF DAY CALCS === */ /* === COLOURS: EXERCISE INTENSITY === */ /* === COLOURS: SEASON === */ /* === COLOURS: GLYCEMIC INDEX === */ /* === COLOURS: MISCELLANEOUS === */ /* ======= [ BORDERS ] ======= */ --border-dashed: 1px dashed var(--text-primary); --border-xs: none; --border-sm: 2px solid var(--border-color); --border-md: 4px solid var(--border-color); --border-lg: 8px solid var(--border-color); --border-sm-in: 2px inset var(--border-color); --border-md-in: 4px inset var(--border-color); --border-lg-in: 6px inset var(--border-color); --border-sm-out: 2px outset var(--border-color); --border-md-out: 6px outset var(--border-color); --border-lg-out: 10px outset var(--border-color); --border-primary: 8px solid var(--primary-color); --border-secondary: 8px solid var(--warning-color); --border-tertiary: 8px solid var(--secondary-color); --border-primary-thin: 4px solid var(--primary-color); --border-secondary-thin: 4px solid var(--warning-color); --border-tertiary-thin: 4px solid var(--secondary-color); --border-dashboard: 3px solid var(--border-fullfat); /* not changed from */ --border-danger: 4px solid var(--danger-color); /* ======= [ BOX CORNERS ] ======= */ --radius-sm: 0px; --radius-md: 2px; --radius-lg: 4px; --radius-xl: 8px; /* ======= [ FONT ] ======= */ font-family: Casale, Courier, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; /* --font-xs: 12px; --font-sm: 14px; --font-md: 16px; --font-lg: 20px; --font-xl: 24px; --font-xxl: 28px; --font-xxxl: 56px; */ /* ======= [ ICONS ] ======= */ --icon-button-font: Atari; --icon-bin: url('../images/bin_small.png'); --icon-edit: url('../images/pencil_small.png'); --icon-chart-lg: url('../images/chart_small_summer_night.png'); /* NOT ALTERED YET */ /* === COLOURS: TIME OF DAY === */ --color-timezone-0: rgb(150 100 255); --color-timezone-1: rgb(75 85 255); --color-timezone-2: rgb(0 100 255); --color-timezone-3: rgb(255 175 0); --color-timezone-4: rgb(255 130 0); --color-timezone-5: rgb(255 75 0); --color-timezone-6: rgb(0 175 255); --color-timezone-7: rgb(0 255 255); --color-timezone-8: rgb(0 175 200); --color-timezone-9: rgb(0 200 100); --color-timezone-10: rgb(45 90 255); --color-timezone-11: rgb(70 50 205); --color-timezone-12: rgb(115 65 255); /* === COLOURS: TIME OF DAY CALCS === */ --color-timezone-0-lite: 150, 100, 255; --color-timezone-1-lite: 75, 85, 255; --color-timezone-2-lite: 0, 100, 255; --color-timezone-3-lite: 255, 175, 0; --color-timezone-4-lite: 255, 130, 0; --color-timezone-5-lite: 255, 75, 0; --color-timezone-6-lite: 0, 175, 255; --color-timezone-7-lite: 0, 255, 255; --color-timezone-8-lite: 0, 175, 200; --color-timezone-9-lite: 0, 200, 100; --color-timezone-10-lite: 45, 90, 255; --color-timezone-11-lite: 70, 50, 205; --color-timezone-12-lite: 115, 65, 255; /* === COLOURS: EXERCISE INTENSITY === */ --color-exercise-0: #999999; --color-exercise-1: #52D017; --color-exercise-2: #F6BE00; --color-exercise-3: #F87217; --color-exercise-4: #FF2400; --color-exercise-5: #810541; /* === COLOURS: SEASON === */ --color-Summer: #FF0000; --color-Spring: #00FF00; --color-Autumn: #C24641; --color-Winter: #00FFFF; /* === COLOURS: GLYCEMIC INDEX === */ --color-gi-vslow: #5DCA92; --color-gi-slow: #78DFAA; --color-gi-medium: #CFFFE6; --color-gi-fast: #FFCCE1; --color-gi-vfast: #FFA8CC; /* === COLOURS: MISCELLANEOUS === */ --opacity-vlite: 0.1; --opacity-lite: 0.2; /* ======= [ PADDING/SPACING ] ======= */ /* --spacing-xxs: 2px; --spacing-xs: 4px; --spacing-sm: 8px; --spacing-smd: 12px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --padding-md-tlr: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md); */ /* ======= [ CELL SIZE ] ======= */ /* --cell-wide-xxs: 30px; --cell-wide-xs: 60px; --cell-wide-sm: 100px; --cell-wide-md: 150px; --cell-wide-lg: 200px; --cell-wide-xl: 300px; --cell-wide-xxl: 400px; --cell-high-xs: 75px; --cell-high-sm: 100px; --cell-high-md: 150px; --cell-high-lg: 200px; --cell-high-xl: 300px; --cell-high-xxl: 400px; --cell-high-xxxl: 500px; --cell-high-xxxxl: 600px; */ /* ======= [ CURSOR ] ======= */ /* --mouse-default: url('/images/mouse_default.png'), auto; --mouse-pointer: url('/images/mouse_pointer.png'), auto; --mouse-text: url('/images/mouse_text.png'), auto; */ } [data-theme="light80s"] { --display-eighties: flex; /* eslint-disable-next-line css/no-important */ --display-modern: none !important; /* === COLOURS: BASE === */ --primary-color: #3f9cfa; --success-color: #00ff00; --secondary-color: #ff00ff; --danger-color: #ff0000; --active-color: #ffff00; --background-color: #00BFFF; --background-color-lite: #7FFFD4; /* --tertiary-background-color: #C0C0C0; --text-tertiary: #C0C0C0; */ --primary-lite: #e0efff; --success-lite: #b5ffc7; --warning-lite: #fff3e3; --warning-color: #FF9500; --danger-lite: #ffbdb9; --outlier-color: #FF00FF; /* === COLOURS: BLACK N WHITE === */ --text-primary: #000000; --border-color: #c5c4c4; --text-secondary: #3C3C43; --text-tertiary: #8E8E93; --secondary-background-color: #FFFFFF; --tertiary-background-color: #d8d8d8; --surface-color: #f8f8f8; --surface-color-lite: #e9e9e9; --text-shadow-color: #c4c4c5; --border-fullfat: #8E8E93; /* === COLOURS: INSULIN === */ /* === COLOURS: CHARTS === */ --chart-color-plain: #747474; --chart-color-1: #0099ff; --chart-color-2: #EB5406; --chart-color-3: #00a700; --chart-color-4: #FF00FF; --chart-color-bright: #000000; --chart-color-contrast: #ffffff; /* === COLOURS: TIME OF DAY === */ /* === COLOURS: TIME OF DAY CALCS === */ /* === COLOURS: EXERCISE INTENSITY === */ /* === COLOURS: SEASON === */ /* === COLOURS: GLYCEMIC INDEX === */ /* === COLOURS: MISCELLANEOUS === */ /* ======= [ BORDERS ] ======= */ --radius-sm: 0px; --radius-md: 2px; --radius-lg: 4px; --radius-xl: 8px; --border-xs: none; --border-sm: 2px solid var(--border-color); --border-md: 4px solid var(--border-color); --border-lg: 8px solid var(--border-color); --border-primary: 8px solid var(--primary-color); --border-secondary: 8px solid var(--warning-color); --border-tertiary: 8px solid var(--secondary-color); --border-primary-thin: 4px solid var(--primary-color); --border-secondary-thin: 4px solid var(--warning-color); --border-tertiary-thin: 4px solid var(--secondary-color); --border-sm-in: 2px inset var(--border-color); --border-md-in: 4px inset var(--border-color); --border-lg-in: 6px inset var(--border-color); --border-sm-out: 2px outset var(--border-color); --border-md-out: 4px outset var(--border-color); --border-lg-out: 6px outset var(--border-color); --border-dashed: 1px dashed var(--text-primary); --border-dashboard: 3px solid var(--border-fullfat); --border-danger: 4px solid var(--danger-color); /* ======= [ ICONS ] ======= */ font-family: Casale, Courier, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --icon-button-font: Atari; --icon-bin: url('../images/bin_small.png'); --icon-edit: url('../images/pencil_small.png'); --icon-chart-lg: url('../images/chart_small_summer_day.png'); /* ROOT STUFF */ /* NOT ALTERED YET */ /* === COLOURS: SHADOW === */ --shadow-sm: 0.0675rem 0.0675rem 0.0675rem rgb(0 0 0 / 0.3); --shadow-md: 6px 6px 0 rgb(0 0 0 / 0.3); --shadow-lg: 8px 8px 0 rgb(0 0 0 / 0.3); --shadow-xl: 0 8px 24px rgb(0 0 0 / 0.3); --shadow-txt-sm: none; /* 0px 0px 0px var(--text-shadow-color); */ --shadow-txt-lg: 0px 0px 4px var(--text-shadow-color); /* === COLOURS: INSULIN === */ --rapid-insulin-color: #00008B; --medium-insulin-color: #800080; --slow-insulin-color: #0000FF; /* === COLOURS: TIME OF DAY === */ --color-timezone-0: rgb(150 100 255); --color-timezone-1: rgb(75 85 255); --color-timezone-2: rgb(0 100 255); --color-timezone-3: rgb(255 125 0); --color-timezone-4: rgb(255 90 0); --color-timezone-5: rgb(255 50 0); --color-timezone-6: rgb(0 175 255); --color-timezone-7: rgb(0 205 255); --color-timezone-8: rgb(0 175 200); --color-timezone-9: rgb(0 200 100); --color-timezone-10: rgb(45 90 255); --color-timezone-11: rgb(70 50 205); --color-timezone-12: rgb(115 65 255); /* === COLOURS: TIME OF DAY CALCS === */ --color-timezone-0-lite: 150, 100, 255; --color-timezone-1-lite: 75, 85, 255; --color-timezone-2-lite: 0, 100, 255; --color-timezone-3-lite: 255, 125, 0; --color-timezone-4-lite: 255, 90, 0; --color-timezone-5-lite: 255, 50, 0; --color-timezone-6-lite: 0, 175, 255; --color-timezone-7-lite: 0, 205, 255; --color-timezone-8-lite: 0, 175, 200; --color-timezone-9-lite: 0, 200, 100; --color-timezone-10-lite: 45, 90, 255; --color-timezone-11-lite: 70, 50, 205; --color-timezone-12-lite: 115, 65, 255; /* === COLOURS: EXERCISE INTENSITY === */ /* --color-exercise-0: #999; --color-exercise-1: #15d815ff; --color-exercise-2: #4beec5ff; --color-exercise-3: #0ea88fff; --color-exercise-4: #006aa8ff; --color-exercise-5: #f86437ff; */ /* === COLOURS: SEASON === */ --color-Summer: #FF0000; --color-Spring: #008000; --color-Autumn: #A52A2A; --color-Winter: #0000FF; /* === COLOURS: GLYCEMIC INDEX === */ --color-gi-vslow: #1f9c5c; --color-gi-slow: #16ca6d; --color-gi-medium: #05df6e; --color-gi-fast: #ff78b0; --color-gi-vfast: #ff1778; /* === COLOURS: MISCELLANEOUS === */ --opacity-vlite: 0.1; --opacity-lite: 0.2; /* ======= [ CURSOR ] ======= */ /* --mouse-default: url('/images/mouse_default.png'), auto; --mouse-pointer: url('/images/mouse_pointer.png'), auto; --mouse-text: url('/images/mouse_text.png'), auto; */ } /* ===== HTML FONT COLOUR ===== */ .color-main {color: var(--primary-color);} .color-primary {color: var(--chart-color-1);} .color-secondary {color: var(--chart-color-2);} .color-tertiary {color: var(--chart-color-3);} .color-quaternary {color: var(--chart-color-4);} .color-plain {color: var(--chart-color-plain);} .color-exercise-0 {color: var(--color-exercise-0);} .color-exercise-1 {color: var(--color-exercise-1);} .color-exercise-2 {color: var(--color-exercise-2);} .color-exercise-3 {color: var(--color-exercise-3);} .color-exercise-4 {color: var(--color-exercise-4);} .color-exercise-5 {color: var(--color-exercise-5);} .color-timezone-0 {color: var(--color-timezone-0);} .color-timezone-1 {color: var(--color-timezone-1);} .color-timezone-2 {color: var(--color-timezone-2);} .color-timezone-3 {color: var(--color-timezone-3);} .color-timezone-4 {color: var(--color-timezone-4);} .color-timezone-5 {color: var(--color-timezone-5);} .color-timezone-6 {color: var(--color-timezone-6);} .color-timezone-7 {color: var(--color-timezone-7);} .color-timezone-8 {color: var(--color-timezone-8);} .color-timezone-9 {color: var(--color-timezone-9);} .color-timezone-10 {color: var(--color-timezone-10);} .color-timezone-11 {color: var(--color-timezone-11);} .color-timezone-12 {color: var(--color-timezone-12);} .color-Summer {color: var(--color-Summer);} .color-Spring {color: var(--color-Spring);} .color-Autumn {color: var(--color-Autumn);} .color-Winter {color: var(--color-Winter);} /* ===== CHART COMPONENT CLASSES ===== */ /* TEXT */ g[component="bars"] text { fill: var(--chart-color-bright); } g[component="time-now"] text { fill: var(--chart-color-plain); } g[component="bgl-lines"] text { fill: var(--chart-color-plain); } g[component="axes"] text, g[component="ticks"] text { text-anchor: middle; fill: var(--chart-color-plain); } /* LINES */ g line, path { stroke-width: 2; fill: var(--chart-color-1); stroke: var(--chart-color-1); } /* AXES */ g[component="axes"] line, g[component="ticks"] line { fill: var(--chart-color-plain); stroke: var(--chart-color-plain); } g[component="axes"] .size-lg, g[component="ticks"] .size-lg{ stroke-width: 0.1875rem; font-size: 1rem; } g[component="axes"] .size-md, g[component="ticks"] .size-md { stroke-width: 0.125rem; font-size: var(--font-graph-md); } g[component="axes"] .size-sm, g[component="ticks"] .size-sm { stroke-width: 0.0625rem; font-size: var(--font-graph-sm); } g text.size-sm { font-size: var(--font-graph-sm); text-anchor: middle; } g text.size-md { font-size: var(--font-graph-md); text-anchor: middle; } g text.size-lg { font-size: var(--font-graph-lg); text-anchor: middle; } /* PATHS (NO FILL) */ g path { /* eslint-disable-next-line css/no-important */ fill: none !important; } g path.thick, g line.thick { stroke-width: 0.375rem; } g line.thick.size-md { stroke-width: 0.1875rem; } g line.thick.size-sm { stroke-width: 0.125rem; } g path.dashed, g line.dashed { stroke-dasharray: 5,5 } g path .past { fill: var(--chart-color-1); /* for rect and circle */ stroke: var(--chart-color-1); /* for path and line */ } g path .future { fill: var(--chart-color-2); /* for rect and circle */ stroke: var(--chart-color-2); /* for path and line */ } /* CIRCLE */ g circle { r: 0.25rem; opacity: 1; /* fill: var(--chart-color-1); */ } g circle.radius-lg { r: 0.375rem; } g circle.radius-sm { r: 0.1875rem; } g circle.radius-xs { r: 0.0625rem; } g circle.opacity-lite { opacity: 0.7; } g circle.outlier { r: 0.3125rem; stroke: var(--outlier-color); stroke-width: 0.125rem; opacity: 0.8; } g circle.radius-xs.outlier { r: 0.125rem; stroke: var(--outlier-color); stroke-width: 0.0675rem; opacity: 0.8; } g circle.radius-sm.outlier { r: 0.25rem; stroke: var(--outlier-color); stroke-width: 0.0675rem; opacity: 0.8; } g circle.radius-lg.outlier { r: 0.4375rem; stroke: var(--outlier-color); stroke-width: 0.125rem; opacity: 0.8; } /* GRAPH COLORS */ g circle, rect {fill: var(--chart-color-1); stroke: var(--chart-color-1);} g .opacity-lite {opacity: var(--opacity-vlite);} /* fill for rect/circle; stroke for path/line */ g .chart-color-1 {fill: var(--chart-color-1); stroke: var(--chart-color-1);} g .chart-color-2 {fill: var(--chart-color-2); stroke: var(--chart-color-2);} g .chart-color-3 {fill: var(--chart-color-3); stroke: var(--chart-color-3);} g .chart-color-4 {fill: var(--chart-color-4); stroke: var(--chart-color-4);} g .color-primary {fill: var(--chart-color-1); stroke: var(--chart-color-1);} g .color-secondary {fill: var(--chart-color-2); stroke: var(--chart-color-2);} g .color-tertiary {fill: var(--chart-color-3); stroke: var(--chart-color-3);} g .color-quaternary {fill: var(--chart-color-4); stroke: var(--chart-color-4);} g .color-plain {fill: var(--chart-color-plain); stroke: var(--chart-color-plain);} g .color-bright {fill: var(--chart-color-bright); stroke: var(--chart-color-bright);} g .color-contrast {fill: var(--chart-color-contrast); stroke: var(--chart-color-contrast);} g .color-exercise-0 {fill: var(--color-exercise-0); stroke: var(--color-exercise-0);} g .color-exercise-1 {fill: var(--color-exercise-1); stroke: var(--color-exercise-1);} g .color-exercise-2 {fill: var(--color-exercise-2); stroke: var(--color-exercise-2);} g .color-exercise-3 {fill: var(--color-exercise-3); stroke: var(--color-exercise-3);} g .color-exercise-4 {fill: var(--color-exercise-4); stroke: var(--color-exercise-4);} g .color-exercise-5 {fill: var(--color-exercise-5); stroke: var(--color-exercise-5);} g .color-timezone-0 {fill: var(--color-timezone-0); stroke: var(--color-timezone-0);} g .color-timezone-1 {fill: var(--color-timezone-1); stroke: var(--color-timezone-1);} g .color-timezone-2 {fill: var(--color-timezone-2); stroke: var(--color-timezone-2);} g .color-timezone-3 {fill: var(--color-timezone-3); stroke: var(--color-timezone-3);} g .color-timezone-4 {fill: var(--color-timezone-4); stroke: var(--color-timezone-4);} g .color-timezone-5 {fill: var(--color-timezone-5); stroke: var(--color-timezone-5);} g .color-timezone-6 {fill: var(--color-timezone-6); stroke: var(--color-timezone-6);} g .color-timezone-7 {fill: var(--color-timezone-7); stroke: var(--color-timezone-7);} g .color-timezone-8 {fill: var(--color-timezone-8); stroke: var(--color-timezone-8);} g .color-timezone-9 {fill: var(--color-timezone-9); stroke: var(--color-timezone-9);} g .color-timezone-10 {fill: var(--color-timezone-10); stroke: var(--color-timezone-10);} g .color-timezone-11 {fill: var(--color-timezone-11); stroke: var(--color-timezone-11);} g .color-timezone-12 {fill: var(--color-timezone-12); stroke: var(--color-timezone-12);} g .color-Summer {fill: var(--color-Summer); stroke: var(--color-Summer);} g .color-Spring {fill: var(--color-Spring); stroke: var(--color-Spring);} g .color-Autumn {fill: var(--color-Autumn); stroke: var(--color-Autumn);} g .color-Winter {fill: var(--color-Winter); stroke: var(--color-Winter);} .color-sleep.good { background-color: var(--success-color); color: var(--text-primary); text-shadow: var(--shadow-txt-sm); } .color-sleep.okay { background-color: var(--warning-color); color: var(--text-primary); text-shadow: var(--shadow-txt-sm); } .color-sleep.poor { background-color: var(--danger-color); color: var(--text-primary); text-shadow: var(--shadow-txt-sm); } /* ----------- input BOX ----------- */ input, select, textarea { font-family: inherit; font-size: var(--font-md); padding: var(--spacing-sm); border: var(--border-sm-in); border-radius: var(--radius-sm); /* background-color: var(--surface-color); */ background: transparent; color: var(--text-primary); max-width: var(--cell-wide-sm); width: 100%; text-align: center; } /* --- CURSOR --- */ input, textarea { cursor: var(--mouse-text); /* 'I' beam */ } select { cursor: var(--mouse-pointer); } input[type="date"]{ max-width: var(--cell-wide-xl); } input[type="time"] { max-width: var(--cell-wide-lg); } input[type="text"] { max-width: var(--cell-wide-xl); } /* ============= [ *****FORM ] =============== */ form { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-md); } form input, form select { margin-bottom: var(--spacing-lg); max-width: var(--cell-wide-xl); } form.shorter-grid { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } /* --- FOCUS --- */ input:focus, select:focus, textarea:focus { outline: none; /* ie doesn't draw outline around box */ /* border-color: var(--primary-color); */ background: var(--active-color); /* border-color: #dfdf15; */ } .select-wrapper { } select.big-select:focus { } input:read-only { cursor: var(--mouse-default); color: var(--text-tertiary); background-color: var(--tertiary-background-color); } /* --- RANDOM INSERTS: FORM - insert here for descending specificity --- */ form[data-index="test"] input { margin-bottom: var(--spacing-xs); } form label { display: block; margin-top: var(--spacing-lg); margin-bottom: var(--spacing-xs); font-weight: 500; color: var(--text-secondary); margin-right: var(--spacing-md); margin-left: var(--spacing-md); } form fieldset { border: 2px solid #999999; /* Custom border */ padding: var(--spacing-md); margin: 5% 35%; width: 100%; border-radius: var(--radius-md); display: flex; /* padding: 30px; */ /* or */ /* display: inline-block; Make it fit its content width */ } /* --- RANDOM INSERTS: TABLE INPUT - insert here for descending specificity --- */ /* table.log-entry-table input { width: var(--cell-wide-xxl); } */ /* --- BACK TO FOCUS --- */ input:read-only:focus { background: inherit; } /* ============= [ TH TD TR ] =============== */ /* COLORS */ th.color-timezone-0 {background-color: rgb(var(--color-timezone-0-lite) , var(--opacity-lite));} th.color-timezone-1 {background-color: rgb(var(--color-timezone-1-lite) , var(--opacity-lite));} th.color-timezone-2 {background-color: rgb(var(--color-timezone-2-lite) , var(--opacity-lite));} th.color-timezone-3 {background-color: rgb(var(--color-timezone-3-lite) , var(--opacity-lite));} th.color-timezone-4 {background-color: rgb(var(--color-timezone-4-lite) , var(--opacity-lite));} th.color-timezone-5 {background-color: rgb(var(--color-timezone-5-lite) , var(--opacity-lite));} th.color-timezone-6 {background-color: rgb(var(--color-timezone-6-lite) , var(--opacity-lite));} th.color-timezone-7 {background-color: rgb(var(--color-timezone-7-lite) , var(--opacity-lite));} th.color-timezone-8 {background-color: rgb(var(--color-timezone-8-lite) , var(--opacity-lite));} th.color-timezone-9 {background-color: rgb(var(--color-timezone-9-lite) , var(--opacity-lite));} th.color-timezone-10 {background-color: rgb(var(--color-timezone-10-lite) , var(--opacity-lite));} th.color-timezone-11 {background-color: rgb(var(--color-timezone-11-lite) , var(--opacity-lite));} th.color-timezone-12 {background-color: rgb(var(--color-timezone-12-lite) , var(--opacity-lite));} td.chart-color-1 {color: var(--chart-color-1)} td.chart-color-2 {color: var(--chart-color-2)} td.chart-color-3 {color: var(--chart-color-3)} th, td { padding: var(--spacing-sm); text-align: center; border-bottom: 1px solid var(--border-color); font-weight: 500; font-size: var(--font-sm); } th { background-color: var(--surface-color-lite); font-weight: 600; color: var(--text-secondary); } tr:hover { background-color: var(--background-color-lite); } /* -- RANDOM INSERT: for descending specificity of just below -- */ .about-section table tbody tr { border-bottom: var(--border-lg); } .borders-everywhere th, .borders-everywhere td { border: var(--border-sm); /* padding: 6px; */ } .center-content th, .center-content td { text-align: center; } table.log-entry-table th { width: var(--cell-wide-xs); font-size: var(--font-xxs); padding: var(--spacing-xxs); } table.log-entry-table th.wider-head { width: var(--cell-wide-sm); font-size: var(--font-xxs); padding: var(--spacing-xxs); } table.log-entry-table th.narrower-head { width: var(--cell-wide-xs); font-size: var(--font-xxs); padding: var(--spacing-xxs); word-break: break-all; word-wrap: break-word; overflow-wrap: break-word; /* display: block; */ } table.log-entry-table td { width: var(--cell-wide-xxs); font-size: var(--font-xxs); padding: var(--spacing-xxs); } /* table.log-entry-table input { width: var(--cell-wide-xxl); } */ table.log-entry-table .badge { font-size: var(--font-xs); padding: var(--spacing-xxs) var(--spacing-xxs); } table.log-entry-table input[type="time"] { max-width: var(--cell-wide-md); font-size: var(--font-xs); } table.log-entry-table input[type="text"] { max-width: var(--cell-wide-xl); font-size: var(--font-xs); } table.log-entry-table input[type="number"] { max-width: var(--cell-wide-md); font-size: var(--font-xs); } table.log-entry-table input[type="number"]::placeholder { font-size: var(--font-xxs); word-break: break-all; word-wrap: break-word; overflow-wrap: break-word; } table.log-entry-table select { max-width: var(--cell-wide-md); font-size: var(--font-xs); } table.food-database .toggle-option { font-size: var(--font-xxs); padding: 0.75vh 0.75vw; } table.smallish-table { font-size: var(--font-xs); } td:read-only { cursor: var(--mouse-default); } /* -- RANDOM INSERT: for descending specificity of just below -- */ .info-dash-table td{ z-index: 11; color: white; /* font-size: 1.5vw; */ font-size: 1.5cqw; border-bottom: none; white-space: nowrap; /* Use % for height/width to ensure shrink/grow */ width: 25%; /* Example: 4 columns */ height: 50%; /* Example: 2 rows */ } tr:last-child td { border-bottom: none; } table.vertical-lined td { border-right: var(--border-sm); border-bottom: none; } table.vertical-lined th { border-bottom: none; border-right: var(--border-sm); } table.border-ad-hoc tr td{ border-bottom: none; } /* ============= [ H2 & H3 ] =============== */ h1 { font-size: var(--font-xxl); } h2 { font-size: var(--font-xl); } h3 { font-size: var(--font-lg); } h4 { font-size: var(--font-md); } /* === H2 === */ h2.modern-theme { /* text-shadow: var(--shadow-txt-lg); */ color: var(--background-color-lite); } h2.modern-theme span.shadow-text{ text-shadow: var(--shadow-txt-lg); } .page-header h2 { font-size: var(--font-xxxl); color: var(--text-primary); white-space: nowrap; align-items: center; gap: var(--spacing-lg); /* text-shadow: var(--shadow-txt); */ /* width: 100%; */ } .modal-header h3 { font-size: var(--font-lg); white-space: nowrap; } .chart h3 { text-align: center; } .chart-container h3 { text-align: center; } .multi-box-container h3 { text-align: left; } .card.chart h3 { text-align: center; } /* === Paragraph P === */ .page-header p { color: var(--text-secondary); font-size: var(--font-sm); } .card p { color: var(--text-secondary); font-size: var(--font-sm); } /* === COMBINED === */ .multi-box-container p, .multi-box-container h2 { text-align: left; } /* stops wrapping of headings etc */ .card .wrapper h2, .card .wrapper h3, .card .wrapper p { display: block; width: 100%; } /* === H3 === */ .chart.small h3 { font-size: var(--font-lg); margin-bottom: var(--spacing-sm); } .chart.medium h3 { font-size: var(--font-lg); margin-bottom: var(--spacing-sm); } .chart.large h3 { font-size: var(--font-xxl); margin-bottom: var(--spacing-sm); } .chart.xlarge h3 { font-size: var(--font-xxl); margin-bottom: var(--spacing-sm); } .card h3.no-para { margin-bottom: var(--spacing-md); } .card h3.with-para { margin-bottom: var(--spacing-xs); } .card .side-by-side h3 { max-width: 37.5rem; } .card.section-divider h3{ text-align: center; } .card .side-by-side.chart h3 { text-align: center; } /* ============= [ THEMES ] =============== */ .eighties-theme { display: var(--display-eighties); } .modern-theme { display: var(--display-modern); } /* ============= [ HIDDEN ] =============== */ .hidden { /* eslint-disable-next-line css/no-important */ display: none !important; } /* ============= [ FONT AND COLOURING ] =============== */ @font-face { font-family: Casale; src: url('../fonts/CasaletwoNbp-Bp4V.ttf'); font-weight: bold; } @font-face { font-family: Atari; src: url('../fonts/AtariClassicChunky-PxXP.ttf'); } @font-face { font-family: Phoenix; src: url('../fonts/Ac437_Phoenix_BIOS.ttf'); } @font-face { font-family: Megamax; src: url('../fonts/MegamaxJonathanToo-YqOq2.ttf'); } @font-face { font-family: Epson; src: url('../fonts/Ac437_EpsonMGA_Alt.ttf'); } @font-face { font-family: IBM; src: url('../fonts/Ac437_IBM_CGAthin.ttf'); } .rapid-text { color: var(--rapid-insulin-color); } .medium-text { color: var(--medium-insulin-color); } .slow-text { color: var(--slow-insulin-color); } .interpolated-figure { color: var(--chart-color-2); } .calculated-figure { color: var(--chart-color-1); } .real-figure { color: var(--chart-color-3); } /* ============= [ MAIN CONTENT STYLE ] =============== */ * { margin: 0; padding: 0; box-sizing: border-box; /* width: 100%; */ /* outline: 1px solid green; */ } html { scrollbar-gutter: stable; } .main-content { flex: 1; padding: var(--spacing-sm); max-width: 100%; /* margin: 0; */ width: 100%; overflow-x: hidden; } body { background-color: var(--background-color); color: var(--text-primary); /* margin: 0; */ /* width: 100%; */ line-height: 1.6; /* unitless instead of 1.6em */ /* overflow-y: scroll; */ overflow-x: hidden; } /* --------------- PAGE HEADER ----------------- */ .page-header { margin-bottom: var(--spacing-lg); } /* --------------- CARDS ----------------- */ .card { background-color: var(--surface-color); border-radius: var(--radius-md); padding: var(--spacing-md); /* padding: var(--padding-md-tlr); */ box-shadow: var(--shadow-sm); /* box-shadow: 20px 20px 20px black; */ /* filter: drop-shadow(20px 20px 20px black); */ margin-bottom: var(--spacing-lg); justify-content: center; align-items: center; object-fit: contain; overflow: hidden; } .card.squeezed { padding: var(--spacing-xs); } .card .last-piece { margin-bottom: 0; } /* ----------- TOP ----------- */ /* card all by itself */ .card.show-no-content { /* text-align: center; */ padding: var(--spacing-md); margin: inherit; /* border-radius: inherit; */ border: none; box-shadow: none; margin-bottom: 0; } /* .card .solo-piece { text-align: center; padding: var(--spacing-md); margin: inherit; border-radius: inherit; border: none; margin-bottom: 0; } */ .card ul { margin-left: var(--spacing-lg); color: var(--text-secondary); } .card p.start-para { margin-bottom: var(--spacing-md); } .card p.end-para { margin-bottom: var(--spacing-sm); } /* ----------- WRAPPER ----------- */ /* usual container - also works with side-by-side content to spread out */ .card .wrapper { display: flex; flex-wrap: wrap; gap: var(--spacing-md); justify-content: center; box-shadow: inherit; margin: inherit; } .card .wrapper.last-piece{ margin-bottom: 0; } .card .wrapper.unshadowed{ box-shadow: none; } .card .wrapper.shadowed{ box-shadow: var(--shadow-md); } /* ----------- SIDE-BY-SIDE ----------- */ /* smaller cards within to flex stuff */ .card .side-by-side { text-align: center; padding: var(--spacing-md); margin: inherit; box-shadow: none; /* background-color: var(--midground-color); */ } .card .side-by-side.last-piece{ margin-bottom: 0; } .card .side-by-side.shadowed{ box-shadow: var(--shadow-md); } .card .side-by-side.unshadowed{ box-shadow: none; } .card .side-by-side.width-xxl { width: var(--cell-wide-xxl); } .card .side-by-side.width-xl { width: var(--cell-wide-xxl); } .card .side-by-side.width-lg { width: var(--cell-wide-lg); } .card .side-by-side.width-md { width: var(--cell-wide-md); } .card .side-by-side th { max-width: var(--cell-wide-md); } /* ----------- section-divider ----------- */ .card.section-divider { background-color: var(--tertiary-background-color); text-align: center; } .card .input-box { display: flex; /* display: block; */ white-space: nowrap; margin-top: 16px; gap: var(--spacing-sm); align-items: flex-end; } .card .input-box input { flex: 1; } select.width-md { max-width: var(--cell-wide-md); } select.width-lg { max-width: var(--cell-wide-lg); } select.width-xl { max-width: var(--cell-wide-xl); } select.width-xxl { max-width: var(--cell-wide-xxl); } input.width-md { max-width: var(--cell-wide-md); } input.width-lg { max-width: var(--cell-wide-lg); } input.width-xl { max-width: var(--cell-wide-xl); } input.width-xxl { max-width: var(--cell-wide-xxl); } input::placeholder { font-size: var(--font-xs); } /* when function exists for any element */ .copy-function { cursor: var(--mouse-pointer); } .nav-function { cursor: var(--mouse-pointer); } /* 2 images in front of each other */ .images-container { position: relative; /* establishes positioning for slaves */ width: 400px; height: 300px; } .image-background { position: absolute; top: 0; left: 0; z-index: 1; } .image-foreground { position: absolute; top: 0; left: 0; z-index: 10; } /* ============= [ BUTTONS ] =============== */ /* seasonal toggle colours */ button.toggle-option.active[data-season="Summer"] { background-color: var(--color-Summer); color: #FFFFFF; } button.toggle-option.active[data-season="Spring"] { background-color: var(--color-Spring); color: #FFFFFF; } button.toggle-option.active[data-season="Autumn"] { background-color: var(--color-Autumn); color: #FFFFFF; } button.toggle-option.active[data-season="Winter"] { background-color: var(--color-Winter); color: #FFFFFF; } button.toggle-option.active.color-timezone-0 {background-color: var(--color-timezone-0); color: #FFFFFF;} button.toggle-option.active.color-timezone-1 {background-color: var(--color-timezone-1); color: #FFFFFF;} button.toggle-option.active.color-timezone-2 {background-color: var(--color-timezone-2); color: #FFFFFF;} button.toggle-option.active.color-timezone-3 {background-color: var(--color-timezone-3); color: #FFFFFF;} button.toggle-option.active.color-timezone-4 {background-color: var(--color-timezone-4); color: #FFFFFF;} button.toggle-option.active.color-timezone-5 {background-color: var(--color-timezone-5); color: #FFFFFF;} button.toggle-option.active.color-timezone-6 {background-color: var(--color-timezone-6); color: #FFFFFF;} button.toggle-option.active.color-timezone-7 {background-color: var(--color-timezone-7); color: #FFFFFF;} button.toggle-option.active.color-timezone-8 {background-color: var(--color-timezone-8); color: #FFFFFF;} button.toggle-option.active.color-timezone-9 {background-color: var(--color-timezone-9); color: #FFFFFF;} button.toggle-option.active.color-timezone-10 {background-color: var(--color-timezone-10); color: #FFFFFF;} button.toggle-option.active.color-timezone-11 {background-color: var(--color-timezone-11); color: #FFFFFF;} button.toggle-option.active.color-timezone-12 {background-color: var(--color-timezone-12); color: #FFFFFF;} .badge.background.color-timezone-0 {color: var(--color-timezone-0);} .badge.background.color-timezone-1 {color: var(--color-timezone-1);} .badge.background.color-timezone-2 {color: var(--color-timezone-2);} .badge.background.color-timezone-3 {color: var(--color-timezone-3);} .badge.background.color-timezone-4 {color: var(--color-timezone-4);} .badge.background.color-timezone-5 {color: var(--color-timezone-5);} .badge.background.color-timezone-6 {color: var(--color-timezone-6);} .badge.background.color-timezone-7 {color: var(--color-timezone-7);} .badge.background.color-timezone-8 {color: var(--color-timezone-8);} .badge.background.color-timezone-9 {color: var(--color-timezone-9);} .badge.background.color-timezone-10 {color: var(--color-timezone-10);} .badge.background.color-timezone-11 {color: var(--color-timezone-11);} .badge.background.color-timezone-12 {color: var(--color-timezone-12);} /* badge colours */ .background[data-season="Summer"] {color: var(--color-Summer) !important;} .background[data-season="Spring"] {color: var(--color-Spring) !important;} .background[data-season="Autumn"] {color: var(--color-Autumn) !important;} .background[data-season="Winter"] {color: var(--color-Winter) !important;} .badge.background[data-level="0 none"] {color: var(--color-exercise-0) !important;} .badge.background[data-level="1 slow"] {color: var(--color-exercise-1) !important;} .badge.background[data-level="2 lite"] {color: var(--color-exercise-2) !important;} .badge.background[data-level="3 midi"] {color: var(--color-exercise-3) !important;} .badge.background[data-level="4 fast"] {color: var(--color-exercise-4) !important;} .badge.background[data-level="5 HUGE"] {color: var(--color-exercise-5) !important;} .badge.icon-style[data-level="0 none"] {color: var(--color-exercise-0) !important;} .badge.icon-style[data-level="1 slow"] {color: var(--color-exercise-1) !important;} .badge.icon-style[data-level="2 lite"] {color: var(--color-exercise-2) !important;} .badge.icon-style[data-level="3 midi"] {color: var(--color-exercise-3) !important;} .badge.icon-style[data-level="4 fast"] {color: var(--color-exercise-4) !important;} .badge.icon-style[data-level="5 HUGE"] {color: var(--color-exercise-5) !important;} .badge.background[data-level="very slow"] {color: var(--color-gi-vslow) !important;} .badge.background[data-level="slow"] {color: var(--color-gi-slow) !important;} .badge.background[data-level="medium"] {color: var(--color-gi-medium) !important;} .badge.background[data-level="fast"] {color: var(--color-gi-fast) !important;} .badge.background[data-level="very fast"] {color: var(--color-gi-vfast) !important;} .badge.icon-style[value="very slow"] {color: var(--color-gi-vslow) !important;} .badge.icon-style[value="slow"] {color: var(--color-gi-slow) !important;} .badge.icon-style[value="medium"] {color: var(--color-gi-medium) !important;} .badge.icon-style[value="fast"] {color: var(--color-gi-fast) !important;} .badge.icon-style[value="very fast"] {color: var(--color-gi-vfast) !important;} option[value="very slow"] {color: var(--color-gi-vslow) !important;} option[value="slow"] {color: var(--color-gi-slow) !important;} option[value="medium"] {color: var(--color-gi-medium) !important;} option[value="fast"] {color: var(--color-gi-fast) !important;} option[value="very fast"] {color: var(--color-gi-vfast) !important;} button { background-color: var(--primary-color); color: var(--text-primary); border: var(--border-xs); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); font-size: var(--font-md); cursor: var(--mouse-pointer); /* margin: var(--spacing-lg); */ /* transition: opacity 0.2s; */ transition: all 0.2s; font-family: inherit; /* should be set for button, input, select, textarea as doesn't inherit by default */ line-height: 1.4; /* ensures html or text doesn't make button too big */ /* align-items: center; justify-content: center; */ } button.separated-centre { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); } button.outset-md { border: var(--border-md-out); } button.long-text { max-width: var(--cell-wide-md); } button.outset-lg { border: var(--border-lg-out); } button:hover { opacity: 0.5; } button:disabled { opacity: 0.5; cursor: not-allowed; } button.secondary, button.data-flagged { background-color: var(--secondary-color); } button.success { background-color: var(--success-color); } button.danger { background-color: var(--danger-color); } button.background { background-color: var(--background-color); color: var(--primary-color); } .button-container { /* padding-top: 10px; */ display: flex; justify-content: space-between; /* pushes items to far-left and right */ width: 100%; margin-bottom: var(--spacing-lg); box-shadow: none; } .button-container.narrow { margin-bottom: var(--spacing-xs); } .button-container.squashed { justify-content: left; gap: var(--spacing-xl); } button.big-and-wide { width: 100%; height: 10%; margin-top: var(--spacing-sm); transition: all 0.2s; font-size: var(--font-xxl); padding: var(--spacing-xxs); line-height: 0.7; } button.dashed { border: var(--border-dashed); } /* ----------- toggle ----------- */ /* container for toggle-options to make a slider */ .toggle-switch { display: inline-flex; gap: 0; border: var(--border-md); border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--spacing-sm); align-items: center; font-family: inherit; /* margin: auto; */ } /* like a radio/only 1 selector */ .toggle-option { padding: 1vh 2vw; background: transparent; border: var(--border-xs); color: var(--text-secondary); cursor: var(--mouse-pointer); transition: all 0.2s; font-size: var(--font-sm); font-weight: 500; font-family: inherit; } .toggle-option:hover { background: var(--lite-background); } .toggle-option.active { background: var(--primary-color); color: var(--text-primary); } .toggle-option.unavailable { /* background: var(--background-color); */ cursor: var(--mouse-default); } .toggle-option.available { background: var(--background-color); /* cursor: ; */ } .toggle-option.unavailable:hover { background: var(--surface-color); color: var(--text-primary); } .toggle-option .available { background: var(--background-color); cursor: var(--mouse-pointer) !important; } .toggle-option .available:hover { background: var(--surface-color); color: var(--text-primary); } /* ----------- badge ----------- */ .badge { display: inline-block; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-lg); font-size: var(--font-sm); font-weight: 600; font-family: inherit; } .badge.primary { background-color: var(--primary-lite); color: var(--primary-color); } .badge.background { background-color: var(--tertiary-background-color); border-radius: var(--radius-md); } .badge.background.secondary { color: var(--secondary-color); } .badge.icon-style { background-color: var(--tertiary-background-color); border-radius: var(--radius-xl); } .badge.icon-style.small { font-size: var(--font-sm); padding: var(--spacing-xs) var(--spacing-smd); } .badge.icon-style.small.active { border: var(--border-primary-thin); } .badge.success { background-color: var(--success-lite); color: var(--success-color); } .badge.warning { background-color: var(--warning-lite); color: var(--warning-color); } .badge.danger { background-color: var(--danger-lite); color: var(--danger-color); } .badge.active { border: var(--border-primary); } /* ----------- icon button - normal ----------- */ button.icon-button { width: var(--cell-wide-xsm); height: var(--cell-wide-xsm); margin: auto; border-radius: var(--radius-sm); padding: var(--spacing-xs); font-size: var(--font-xl); line-height: 1.1; font-family: var(--icon-button-font); /* border: var(--border-md-out); */ } tr.available button { background-color: var(--tertiary-background-color); } tr.outlier.available button { border: var(--border-lg-out); border-color: var(--outlier-color)!important; } button.non-symbol { font-family: inherit; } .icon-button.small { width: var(--cell-wide-xxs); height: var(--cell-wide-xxs); font-size: var(--font-xs); } .icon-button.medium { width: var(--cell-wide-xs); height: var(--cell-wide-xs); font-size: var(--font-lg); } .icon-button.danger { color: var(--text-primary); background: var(--danger-color); } .icon-button.delete { background: var(--danger-color); background-image: var(--icon-bin); background-origin: content-box; background-size: 100% 100%; background-repeat: no-repeat; } .icon-button.edit { background-image: var(--icon-edit); background-origin: content-box; background-size: 100% 100%; background-repeat: no-repeat; } .icon-button.badge-style { background-color: #ffffff; color: #000000; border-radius: var(--radius-xl); font-size: var(--font-lg); font-weight: 600; border: var(--border-primary); cursor: var(--mouse-pointer); opacity: 1; } .icon-button.tick-style { background-color: var(--secondary-background-color); border-radius: var(--radius-xs); border: var(--border-sm-in); cursor: var(--mouse-pointer); opacity: 1; } .icon-button.tick-style.active { background-color: var(--primary-color); background-image: var(--icon-tick); border-radius: var(--radius-xs); border: var(--border-sm-in); cursor: var(--mouse-pointer); opacity: 1; background-origin: content-box; background-size: 120% 120%; background-repeat: no-repeat; } .icon-button.badge-style.fullfat { background-color: var(--surface-color-lite); /* color: #ffffff; */ } .icon-button.badge-style.active { background-color: var(--success-color); color: #ffffff; } .icon-button.badge-style.fullfat.color-timezone-0 {color: var(--color-timezone-0); border: 4px solid var(--color-timezone-0)} .icon-button.badge-style.fullfat.color-timezone-1 {color: var(--color-timezone-1); border: 4px solid var(--color-timezone-1)} .icon-button.badge-style.fullfat.color-timezone-2 {color: var(--color-timezone-2); border: 4px solid var(--color-timezone-2)} .icon-button.badge-style.fullfat.color-timezone-3 {color: var(--color-timezone-3); border: 4px solid var(--color-timezone-3)} .icon-button.badge-style.fullfat.color-timezone-4 {color: var(--color-timezone-4); border: 4px solid var(--color-timezone-4)} .icon-button.badge-style.fullfat.color-timezone-5 {color: var(--color-timezone-5); border: 4px solid var(--color-timezone-5)} .icon-button.badge-style.fullfat.color-timezone-6 {color: var(--color-timezone-6); border: 4px solid var(--color-timezone-6)} .icon-button.badge-style.fullfat.color-timezone-7 {color: var(--color-timezone-7); border: 4px solid var(--color-timezone-7)} .icon-button.badge-style.fullfat.color-timezone-8 {color: var(--color-timezone-8); border: 4px solid var(--color-timezone-8)} .icon-button.badge-style.fullfat.color-timezone-9 {color: var(--color-timezone-9); border: 4px solid var(--color-timezone-9)} .icon-button.badge-style.fullfat.color-timezone-10 {color: var(--color-timezone-10); border: 4px solid var(--color-timezone-10)} .icon-button.badge-style.fullfat.color-timezone-11 {color: var(--color-timezone-11); border: 4px solid var(--color-timezone-11)} .icon-button.badge-style.fullfat.color-timezone-12 {color: var(--color-timezone-12); border: 4px solid var(--color-timezone-12)} /* ============= [ DASHBOARD ] =============== */ /* ----------- dashboard ----------- */ .dashboard-info-container { position: relative; width: 100%; container-type: inline-size; /* Dashboard restricts to 512px */ /* max-width: 512px; */ /* Ensures it shrinks */ height: auto; margin: 0 auto; aspect-ratio: 512/256; margin-top: var(--spacing-lg); border: none; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--spacing-lg); } .dashboard-info-container .dashboard-table { /* background-image: url('/images/star_128x.png'); Path to your image */ /* background-repeat: no-repeat; Prevents image from repeating */ /* background-repeat: repeat; */ /* background-position: center; Centers image */ background-size: cover; /* Ensures image covers entire element */ /* z-index: 1; */ /* background-color: transparent !important; Use !important if necessary to override frameworks */ /* background-size: contain; */ /* contain means contained within element */ width: 100%; /* Adjust table width as needed */ height: 100%; /* Adjust table height as needed */ border-bottom: none; position: absolute; margin-top: 0; top: 0; left: 0; z-index: 1; } .dashboard-info-container .info-dash-table { width: 100%; height: 100%; /* desired height */ table-layout: fixed; /* ensures proportional resizing - column widths respected */ border-collapse: collapse; border-bottom: none; background-color: transparent !important; position: absolute; margin-top: 0; top: 0; left: 0; z-index: 10; font-family: Atari, Courier, sans-serif; } .star-repeat { /* background-image: url('/images/star_less_128_128.png'); */ background-image: url('../images/star_less_128_512.png'); border-bottom: none; background-position: center; /* Centers image */ /* background-size: cover; Ensures image covers entire element */ z-index: 2; background-color: transparent !important; } .blue-repeat { /* background-image: url('/images/star_less_128_128.png'); */ border-bottom: none; background-position: center; /* Centers image */ /* background-size: cover; Ensures image covers entire element */ z-index: 2; background-color: #00008B; } /* for drawing clock time */ .image-double-container { position: relative; width: 35px; height: 35px; container-type: inline-size; /* Dashboard restricts to 512px */ /* max-width: 512px; */ /* Ensures it shrinks */ margin: 0 auto; /* aspect-ratio: 512/256; */ margin-top: var(--spacing-lg); border: none; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--spacing-lg); } .dashboard-table tr:hover { background-color: #00008B; pointer-events: none; transform: none !important; cursor: var(--mouse-default) !important; } .season-pic { width: 5%; background-position: center; /* Centers image */ background-size: cover; /* ensures image covers entire element */ z-index: 5; background-color: #00008B; background-repeat: no-repeat; border-bottom: var(--border-dashboard); border-left: var(--border-dashboard); border-right: var(--border-dashboard); border-top: var(--border-dashboard); } .season-pic.summer { background-image: url('../images/yacht.png'); } .season-pic.spring { background-image: url('../images/flowers.png'); } .season-pic.winter { background-image: url('../images/snowman.png'); } .season-pic.autumn { background-image: url('../images/treeFall.png'); } .info-dash-table td.x32y32 { width: 6.25%; height: 12.5%; } .info-dash-table td.x64y64 { width: 12.5%; height: 25%; } .info-dash-table td.x64y16 { width: 12.5%; height: 6.25%; padding: 4px; } .info-dash-table td.x128y16 { width: 25%; height: 6.25%; padding: 4px; } .info-dash-table td.x112y16 { width: 21.875%; height: 6.25%; padding: 4px; } .info-dash-table td.x64y144 { width: 12.5%; height: 68.75%; border-bottom: var(--border-dashboard); } .info-dash-table td.left { text-align: left; } .info-dash-table td.right { text-align: right; } .info-dash-table td.chart-xl { height: auto; width: 31.125%; z-index: 30; display: block; } .info-dash-table td.chart-lg { height: auto; width: 28.125%; z-index: 30; display: block; } .info-dash-table td.chart-md { height: auto; width: 12.5%; z-index: 30; display: block; } .info-dash-table td.chart-sm { height: auto; width: 12.5%; z-index: 30; display: block; } .info-dash-table.blue-bg tr:hover { background-color: #00008B; } .info-dash-table.black-bg tr:hover { background-color: black; } /* Optional: Set a fallback background color */ /* .dashboard-table { background-color: #f0f0f0; } */ /* ============= [ TABLES ] =============== */ /* ---------------- tweaks from main table style ---------------- */ th.divider { border-left: 1px solid var(--border-color); } .borders-everywhere tr:last-child td { border-bottom: var(--border-sm); } td.active { background: var(--active-color); } td .active { background: var(--active-color); } tr.active { background: var(--active-color); } td.has-data { background: var(--lite-background); } th.untinted { background: var(--surface-color); } th.one-button-column { max-width: var(--cell-wide-xs); } th.two-button-column { max-width: var(--cell-wide-sm); } td.width-sm, th.width-sm { width: var(--cell-wide-sm); } td.width-md, th.width-md { width: var(--cell-wide-md); } td.width-lg, th.width-lg { width: var(--cell-wide-lg); } /* ---------- [ MULTIPLE BOXES IN 1 CELL ] ---------- */ .multi-box-container { display: flex; align-items: center; gap: var(--spacing-sm); text-align: center; justify-content: space-between; } .multi-box-container.left { justify-content: left; } .multi-box-container.column { flex-direction: column; gap: var(--spacing-xs) var(--spacing-lg); } .multi-box-container.row { flex-direction: row; gap: var(--spacing-lg) var(--spacing-xs); } .multi-box-container.wrap { flex-wrap: wrap; } .multi-box-container.fullfat { background: var(--surface-color-lite); } .multi-box-container.solo { border-radius: var(--radius-md); } .multi-box-container.squashed { flex: 1; gap: 0; } .multi-box-container.squished input { font-size: var(--font-xs); padding: var(--spacing-xxs); } .multi-box-container.squished input[type="number"] { max-width: var(--cell-wide-xsm); } /* ----------- table ----------- */ .table-container { overflow-x: auto; display: flex; justify-content: space-around; /* box-shadow: var(--shadow-sm); */ align-items: flex-start; gap: 1.25rem; } table { width: 100%; border-collapse: collapse; background-color: var(--surface-color); border-radius: var(--radius-md); flex: 1 1 45%; /* flex-grow:1 flex-shrink:1 flex-basis:45% */ /* min-width: 150px; */ box-sizing: border-box; margin-top: 1rem; /* overflow: hidden; */ /* was causing tooltip to get cut off */ } table.border-ad-hoc tr.border-row td{ border-top: var(--border-lg); } table.border-ad-hoc tr.border-row{ border-top: var(--border-lg); } /* for the about page */ .about-section table { table-layout: fixed; } .about-section button[data-action="navigate"] { width: var(--cell-wide-xl); } .about-section button[data-action="unavailable"] { width: var(--cell-wide-xl); cursor: var(--mouse-default); opacity: 1; } .about-section .badge.active[data-action="show"] { border: var(--border-primary-thin); } .about-section .badge.secondary.active[data-action="show"] { border: var(--border-tertiary-thin); } .about-section table tr th:nth-child(1), .about-section table tr td:nth-child(1) { font-size: var(--font-md); color: var(--text-secondary); width: 35%; /* border-right: var(--border-lg); */ } .about-section table tr th:nth-child(2), .about-section table tr td:nth-child(2) { width: 65%; text-align: left; font-size: var(--font-xs); } .about-section table.log-info-table tr th, .about-section table.log-info-table tr td { font-size: var(--font-xs); width: 35%; border-right: var(--border-sm); text-align: left; } .about-section table tbody tr td:nth-child(1) { border-right: var(--border-md); } .about-section table.log-info-table tbody tr td { border-right: var(--border-sm); text-align: left; } /* ============= [ MODAL ] =============== */ .modal-table-header { background: var(--primary-color); /* min-width was at 140px */ min-width: 5rem; padding: 0.5rem; text-align: left; vertical-align: top; } .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--modal-background); z-index: 1000; justify-content: center; align-items: center; } .modal.active { display: flex; } .modal-content { background-color: var(--surface-color); border-radius: var(--radius-md); padding: var(--spacing-lg); max-width: 37.5rem; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-md); } .modal-close { background: none; border: var(--border-xs); font-size: var(--font-xxl); cursor: var(--mouse-pointer); color: var(--text-tertiary); padding: 0; width: 3rem; height: 3rem; } .modal-close:hover { color: var(--text-primary); } /* ============= [ MESSAGES ] =============== */ /* ----------- loading ----------- */ .loading { display: var(--display-modern); text-align: center; padding: var(--spacing-xl); color: var(--text-tertiary); } /* ----------- messages ----------- */ .error { background-color: var(--danger-lite); color: var(--danger-color); padding: var(--spacing-md); border-radius: var(--radius-md); margin-bottom: var(--spacing-md); } .error-message { background-color: var(--danger-lite); color: var(--danger-color); padding: var(--spacing-md); border-radius: var(--radius-md); margin-bottom: var(--spacing-md); } .success-message { background-color: var(--success-lite); color: var(--success-color); padding: var(--spacing-md); border-radius: var(--radius-md); margin-bottom: var(--spacing-md); } .warning-message{ background-color: var(--warning-lite); color: var(--warning-color); padding: var(--spacing-md); border-radius: var(--radius-md); margin-bottom: var(--spacing-md); } .southern-message{ background-image: url('../images/Aus_flag.png'); color: #FFD801; font-size: var(--font-xl); text-shadow: var(--shadow-txt-xl); /* background-origin: content-box; */ background-size: 100% 100%; background-repeat: no-repeat; padding: var(--spacing-lg); border-radius: var(--radius-md); margin: var(--spacing-md); /* margin-bottom: var(--spacing-md); */ } .northern-message{ background-image: url('../images/Canada_flag.png'); color: #d3d3d3; font-size: var(--font-xxl); text-shadow: var(--shadow-txt-xl); /* background-origin: content-box; */ background-size: 100% 100%; background-repeat: no-repeat; padding: var(--spacing-lg); border-radius: var(--radius-md); margin-bottom: var(--spacing-md); } .message-toaster { position: fixed; top: 1.25rem; right: 1.25rem; padding: 1rem 1.5rem; border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 2000; animation: slide-in 0.3s ease; } .message-toasted { position: fixed; top: 1.25rem; right: 1.25rem; padding: 1rem 1.5rem; border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 2000; animation: slide-in 0.3s ease; } .message-toaster-out { position: fixed; top: 200px; right: 200px; padding: 1rem 1.5rem; border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 2000; animation: slide-out 0.3s ease; } .message-toasted-out { position: fixed; top: 200px; right: 200px; padding: 16px 24px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 2000; animation: slide-out 0.3s ease; } /* ============= [ ANIMATIONS ] =============== */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes slide-in { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 0.5; } } @keyframes slide-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(400px); opacity: 0; } } @keyframes augment {to{background-size: 100% 0.5rem}} .spinner { display: var(--display-modern); border: 3px solid var(--border-color); border-top-color: var(--primary-color); border-radius: 50%; width: 2.5rem; height: 2.5rem; animation: spin 1s linear infinite; margin: var(--spacing-xl) auto; } /* HTML:
*/ .eighties-loader { display: var(--display-eighties); width: fit-content; font-size: var(--font-xl); background: linear-gradient(#4caf50 0 0) no-repeat; background-position: 0 100%; /* x and y coordinate */ background-size: 0% 0.5rem; /* width and height */ animation: augment 2s forwards; /* animation-duration: 10s; */ /* animation-fill-mode: forwards; */ } .eighties-loader::before { content:"loading..." } /* ============= [ MEDIA ] =============== */ /* designed for: 361-480px / 22.5rem -> 30rem */ /* ----------- for v small phones ----------- */ @media (width <= 22.5rem ) { :root { /* ======= [ FONT SIZE ] ======= */ --font-xxxs: 0.375rem; --font-xxs: 0.4375rem; --font-xs: 0.4375rem; --font-sm: 0.5625rem; --font-md: 0.5625rem; --font-nav: 0.875rem; --font-lg: 1rem; --font-xl: 1.5rem; --font-xxl: 1rem; --font-xxxl: 1.5rem; --font-graph-sm: 0.375rem; --font-graph-md: 0.5rem; --font-graph-lg: 1.5rem; /* ======= [ CELL SIZE ] ======= */ --cell-wide-xxs: 1rem; --cell-wide-xs: 2rem; --cell-wide-xsm: 2.25rem; --cell-wide-sm: 4rem; --cell-wide-md: 5rem; --cell-wide-lg: 6rem; --cell-wide-xl: 10rem; --cell-wide-xxl: 15rem; --cell-high-xs: 2.5rem; --cell-high-sm: 3rem; --cell-high-md: 5rem; --cell-high-lg: 6rem; --cell-high-xl: 10rem; --cell-high-xxl: 12rem; --cell-high-xxxl: 15rem; --cell-high-xxxxl: 30rem; } } /* ----------- for landscape mobile ----------- */ @media (30rem < width <= 48rem ) { /* 481 - 768px */ /* .main-content { padding: var(--spacing-sm); } */ /* .form-row { grid-template-columns: 1fr; } */ :root { /* ======= [ FONT SIZE ] ======= */ --font-xxxs: 0.675rem; --font-xxs: 0.75rem; --font-xs: 0.8125rem; --font-sm: 0.875rem; --font-md: 0.9375rem; --font-nav: 1rem; --font-lg: 1.25rem; --font-xl: 1.5rem; --font-xxl: 1.75rem; --font-xxxl: 2.25rem; --font-graph-sm: 0.375rem; --font-graph-md: 0.5rem; --font-graph-lg: 1.75rem; } } /* ----------- for tablets ----------- */ @media (48rem < width <= 64rem ) { :root { /* ======= [ FONT SIZE ] ======= */ --font-xxxs: 0.675rem; --font-xxs: 0.75rem; --font-xs: 1rem; --font-sm: 1.25rem; --font-md: 1.25rem; --font-nav: 1.5rem; --font-lg: 1.25rem; --font-xl: 1.5rem; --font-xxl: 1.75rem; --font-xxxl: 4rem; --font-graph-sm: 0.375rem; --font-graph-md: 0.5rem; --font-graph-lg: 1.75rem; /* ======= [ CELL SIZE ] ======= */ --cell-wide-xxs: 2rem; --cell-wide-xs: 3rem; --cell-wide-xsm: 4rem; --cell-wide-sm: 6rem; --cell-wide-md: 7rem; --cell-wide-lg: 8rem; --cell-wide-xl: 15rem; --cell-wide-xxl: 12rem; --cell-high-xs: 2.5rem; --cell-high-sm: 3rem; --cell-high-md: 5rem; --cell-high-lg: 6rem; --cell-high-xl: 10rem; --cell-high-xxl: 12rem; --cell-high-xxxl: 15rem; --cell-high-xxxxl: 30rem; } } /* ----------- for desktops ----------- */ @media (64rem < width <= 75rem ) { :root { /* ======= [ FONT SIZE ] ======= */ --font-xxxs: 0.675rem; --font-xxs: 0.875rem; --font-xs: 1.25rem; --font-sm: 1.25rem; --font-md: 1.25rem; --font-nav: 1.5rem; --font-lg: 1.25rem; --font-xl: 1.5rem; --font-xxl: 1.75rem; --font-xxxl: 4rem; --font-graph-sm: 0.375rem; --font-graph-md: 0.5rem; --font-graph-lg: 1.75rem; /* ======= [ CELL SIZE ] ======= */ --cell-wide-xxs: 2rem; --cell-wide-xs: 3rem; --cell-wide-xsm: 4rem; --cell-wide-sm: 6rem; --cell-wide-md: 9rem; --cell-wide-lg: 12rem; --cell-wide-xl: 15rem; --cell-wide-xxl: 12rem; --cell-high-xs: 2.5rem; --cell-high-sm: 3rem; --cell-high-md: 5rem; --cell-high-lg: 6rem; --cell-high-xl: 10rem; --cell-high-xxl: 12rem; --cell-high-xxxl: 15rem; --cell-high-xxxxl: 30rem; } } /* ----------- for desktops ----------- */ @media (75rem < width) { :root { /* ======= [ FONT SIZE ] ======= */ --font-xxxs: 0.675rem; --font-xxs: 0.875rem; --font-xs: 1.25rem; --font-sm: 1.25rem; --font-md: 1.25rem; --font-nav: 1.5rem; --font-lg: 1.25rem; --font-xl: 1.5rem; --font-xxl: 1.75rem; --font-xxxl: 4rem; --font-graph-sm: 0.375rem; --font-graph-md: 0.5rem; --font-graph-lg: 1.75rem; } } /* ----------- @media, changed max-width from 768px so can be horizontal ----------- */ @media (width <= 40px) { .main-nav { padding: var(--spacing-sm); } .nav-links { flex-direction: column; gap: var(--spacing-xxs); } .dropdown-menu { position: static; display: none; box-shadow: none; margin-left: var(--spacing-md); margin-top: 0; /* margin-top: var(--spacing-xs); */ } .nav-dropdown.active .dropdown-menu { display: block; } } /* --------- [ ________: DROPDOWN ] ----------- */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background-color: var(--surface-color); box-shadow: var(--shadow-sm); border-radius: var(--radius-md); min-width: var(--cell-wide-lg); margin-top: 0; /* was xs which caused it to disappear */ z-index: 1000; } .dropdown-menu li { list-style: none; } .dropdown-menu a { display: block; padding: var(--spacing-sm) var(--spacing-md); } /* ============= [ NAVIGATION BAR ] =============== */ /* ----------- nav bar ----------- */ .main-nav { background-color: var(--surface-color); box-shadow: var(--shadow-sm); padding: var(--spacing-md) var(--spacing-lg); position: sticky; width: 100%; top: 0; z-index: 100; /* overflow-x: hidden; */ } .nav-header h1 { font-size: var(--font-xxl); color: var(--primary-color); margin-bottom: var(--spacing-sm); white-space: nowrap; } .nav-links { list-style: none; display: flex; gap: var(--spacing-xs); /* flex-direction: row; flex-wrap: wrap; */ flex-flow: row wrap; justify-content: space-between; } /* a = anchor */ .nav-links a { text-decoration: none; color: var(--primary-color); text-shadow: var(--shadow-sm); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); transition: background-color 0.2s; font-size: var(--font-nav); } .nav-links a:hover { background-color: var(--background-color); } .nav-links a.active { background-color: var(--primary-color); color: var(--text-primary); } .nav-dropdown { position: relative; } .nav-dropdown:hover .dropdown-menu { display: block; min-width: max-content; } /* ============= [ CHARTS ] =============== */ .chart { width: 100%; /* height: var(--cell-high-xxl); */ height: auto; margin: var(--spacing-md) 0; background-color: var(--surface-color); border-radius: var(--radius-md); padding: var(--spacing-md); flex: 1 1 10%; /* flex-grow:1 flex-shrink:1 flex-basis:45% */ min-width: var(--cell-wide-xl); box-sizing: border-box; /* max-width: 500px; */ } .chart .full-state { padding: var(--spacing-md); } .chart.small { /* height: var(--cell-high-lg); */ /* width: var(--cell-wide-lg); */ } .chart.medium { /* height: var(--cell-high-xl); */ /* min-width: var(--cell-wide-xl); */ } /* ****** probably to auto ****** */ .chart.large { /* height: var(--cell-high-xxxl); */ /* min-width: var(--cell-wide-xl); */ } .chart.xlarge { /* height: auto; */ /* min-width: var(--cell-wide-xl); */ } /* ----------- empty state ----------- */ .chart .empty-state { text-align: center; color: var(--text-primary); display: flex; align-items: center; } .chart .empty-state.icon { margin: auto; /* background-image: var(--icon-chart-lg); */ background-origin: content-box; background-size: 100% 100%; background-repeat: no-repeat; /* aspect-ratio: 1/1; */ /* height: 100%; */ /* width: 100%; */ opacity: 0.75; } .chart.large .empty-state.icon { height: 200px; width: 100%; max-width: 100%; font-size: var(--font-xxl); padding: var(--spacing-xxs); background-image: var(--icon-chart-lg); } /* .chart.xlarge { height: 300px; width: 100%; max-width: 100%; padding: var(--spacing-md); } */ .chart.xlarge .empty-state.icon { height: 300px; width: 100%; max-width: 100%; padding: var(--spacing-md); font-size: var(--font-xxl); background-image: var(--icon-chart-lg); /* object-fit: cover; */ } .chart.medium .empty-state.icon { height: 150px; width: 100%; max-width: 100%; font-size: var(--font-xl); padding: var(--spacing-xxs); background-image: var(--icon-chart-lg); } .chart.small .empty-state.icon { height: 100px; width: 100%; max-width: 100%; font-size: var(--font-lg); padding: var(--spacing-xxs); background-image: var(--icon-chart-lg); } td.empty-state { font-size: var(--font-sm); color: var(--text-secondary); } /* ----------- chart ----------- */ .chart-container { width: 100%; height: var(--cell-high-xxxl); margin: var(--spacing-md) 0; background-color: var(--surface-color); border-radius: var(--radius-md); padding: var(--spacing-md); font-size: var(--font-lg); flex: 1 1 10%; /* flex-grow:1 flex-shrink:1 flex-basis:45% */ min-width: var(--cell-wide-lg); box-sizing: border-box; } .chart-container.small { height: var(--cell-high-sm); } .chart-container.medium { height: var(--cell-high-lg); } /* ============= [ TOOLTIPS ] =============== */ .input-with-tooltip { position: relative; } .tooltip { position: absolute; left: 120%; top: 120%; padding: 0.5rem 1rem; background-color: blue; color: white; border-radius: var(--radius-sm); font-size: 0.875rem; opacity: 0; visibility: hidden; transition: opacity 0.5s ease; z-index: 1000; pointer-events: none; } .tooltip.adjust-right { top: 0; left: 120%; } .tooltip.adjust-left { top: 120%; left: 0; } .input-with-tooltip:hover .tooltip { opacity: 1; visibility: visible; } /* ============= [ number/text emphasis ] =============== */ .emphasis { padding: var(--spacing-xs); font-weight: 600; } .emphasis.muted { color: var(--text-secondary); } .emphasis.primary { color: var(--primary-color); } .emphasis.xxl {font-size: var(--font-xxl);} .emphasis.xl {font-size: var(--font-xl);} .emphasis.lg {font-size: var(--font-lg);} .emphasis.md {font-size: var(--font-md);} .emphasis.sm {font-size: var(--font-sm);} .emphasis.xs {font-size: var(--font-xs);}