diff --git a/assets/css/style.css b/assets/css/style.css index fdd2c4f..8e2234f 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,15 +1,15 @@ -/* ======================================================== - Base: Variables - ======================================================== */ +/* ======================================================== + Base: Variables + ======================================================== */ :root { /* Blue */ --blue-100: #dbe6fe; --blue-800: #1e4baf; - /* Green */ - --green-100: #dcfce7; - --green-600: #16a34a; - --green-700: #047854; + /* Green */ + --green-100: #dcfce7; + --green-600: #16a34a; + --green-700: #047854; /* Neutral */ --neutral-50: #f9fbfb; @@ -26,9 +26,9 @@ --primary-800: #115e59; --primary-950: #042f2c; - /* Red */ - --red-50: #fef2f2; - --red-100: #fee2e2; + /* Red */ + --red-50: #fef2f2; + --red-100: #fee2e2; --red-700: #b91c1c; --red-800: #991b1b; @@ -53,9 +53,9 @@ /* Sidebar */ } -/* ======================================================== - Base: Reset - ======================================================== */ +/* ======================================================== + Base: Reset + ======================================================== */ * { margin: 0; padding: 0; @@ -63,12 +63,12 @@ box-sizing: border-box; } -body { - font-family: - -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; - line-height: 1.375; - font-weight: 400; - color: var(--neutral-900); +body { + font-family: + -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + line-height: 1.375; + font-weight: 400; + color: var(--neutral-900); background: var(--neutral-100); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; @@ -94,9 +94,9 @@ ul { .container { } -/* ======================================================== - Base: Typography - ======================================================== */ +/* ======================================================== + Base: Typography + ======================================================== */ a { text-decoration: none; -webkit-transition: all var(--transition-speed) ease; @@ -169,23 +169,23 @@ main { padding-top: 88px; } -/* Scrollbars */ -::-webkit-scrollbar { +/* Scrollbars */ +::-webkit-scrollbar { width: 5px; border-radius: var(--rounded-sm); } -::-webkit-scrollbar-track { +::-webkit-scrollbar-track { background: var(--neutral-100); border-radius: var(--rounded-sm); } -::-webkit-scrollbar-thumb { +::-webkit-scrollbar-thumb { background: var(--primary-600); border-radius: var(--rounded-sm); } -::-webkit-scrollbar-thumb:hover { +::-webkit-scrollbar-thumb:hover { background: var(--primary-800); border-radius: var(--rounded-sm); } @@ -209,11 +209,11 @@ main { line-height: 1.5; } -/* ======================================================== - Layout: Shared Cards And Charts - ======================================================== */ - -.chart-card-head { +/* ======================================================== + Layout: Shared Cards And Charts + ======================================================== */ + +.chart-card-head { padding: 16px 24px; } @@ -226,131 +226,131 @@ main { font-size: var(--text-label); font-weight: 400; } -.chart-card-head h6 span { - display: inline-block; - font-weight: 500; -} - -.risk-header { - display: -webkit-box; - display: -ms-flexbox; - display: flex; +.chart-card-head h6 span { + display: inline-block; + font-weight: 500; +} + +.risk-header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; - align-items: center; - /* padding: 16px 24px; */ -} - -.risk-dashboard { - display: flex; - flex-direction: column; - height: 100%; -} - -.risk-count h2 { - color: var(--neutral-600); - font-size: var(--text-label); - font-weight: 400; -} - -.risk-count .count { - font-size: var(--text-heading-3); - font-weight: 500; - color: var(--neutral-900); - margin: 0; -} - -.chart-container { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; + align-items: center; + /* padding: 16px 24px; */ +} + +.risk-dashboard { + display: flex; + flex-direction: column; + height: 100%; +} + +.risk-count h2 { + color: var(--neutral-600); + font-size: var(--text-label); + font-weight: 400; +} + +.risk-count .count { + font-size: var(--text-heading-3); + font-weight: 500; + color: var(--neutral-900); + margin: 0; +} + +.chart-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - flex: 1; -} - -.chart-box { - height: 350px; -} - -.chart-empty-state { - flex: 1; - min-height: 220px; - display: flex; - align-items: center; - justify-content: center; - text-align: center; -} - -.chart-empty-state-inner { - display: flex; - flex-direction: column; - align-items: center; - gap: 10px; -} - -.chart-empty-state i { - font-size: 28px; - line-height: 1; - color: var(--neutral-900); -} - -.chart-empty-state p { - margin: 0; - color: var(--neutral-700); -} - -.alt-tech-empty-state { - min-height: 260px; -} - -.scoring-empty-state { - min-height: 300px; -} - -.scoring-card { - overflow: hidden; -} - -.scoring-inner { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - min-height: 300px; -} - -.chart-wrapper { - max-width: 350px; - overflow: hidden; - position: relative; - border-radius: 12px; - mask-image: linear-gradient(to bottom, black 85%, transparent 100%); - -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%); -} - -.scoring { - width: 100%; - max-width: 420px; - height: 320px !important; - margin: 0 auto; -} - -.form-title { + -ms-flex-align: center; + align-items: center; + flex: 1; +} + +.chart-box { + height: 350px; +} + +.chart-empty-state { + flex: 1; + min-height: 220px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.chart-empty-state-inner { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} + +.chart-empty-state i { + font-size: 28px; + line-height: 1; + color: var(--neutral-900); +} + +.chart-empty-state p { + margin: 0; + color: var(--neutral-700); +} + +.alt-tech-empty-state { + min-height: 260px; +} + +.scoring-empty-state { + min-height: 300px; +} + +.scoring-card { + overflow: hidden; +} + +.scoring-inner { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + min-height: 300px; +} + +.chart-wrapper { + max-width: 350px; + overflow: hidden; + position: relative; + border-radius: 12px; + mask-image: linear-gradient(to bottom, black 85%, transparent 100%); + -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%); +} + +.scoring { + width: 100%; + max-width: 420px; + height: 320px !important; + margin: 0 auto; +} + +.form-title { font-size: var(--text-heading-3); font-weight: 500; line-height: 1.33; color: var(--neutral-900); } -.shadow-s { +.shadow-s { -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); } @@ -359,19 +359,19 @@ main { border: 1px solid var(--neutral-300); } -/* ======================================================== - Components: Buttons - ======================================================== */ - -.dropdown-toggle::after { +/* ======================================================== + Components: Buttons + ======================================================== */ + +.dropdown-toggle::after { float: right; margin-top: 8px; } -/* ======================================================== - Components: Summary, Scoring, Resources, Alt Tech Cards - ======================================================== */ -::-webkit-input-placeholder { +/* ======================================================== + Components: Summary, Scoring, Resources, Alt Tech Cards + ======================================================== */ +::-webkit-input-placeholder { color: var(--neutral-600); font-size: var(--text-body); font-style: normal; @@ -493,10 +493,10 @@ main { border: 0; } -/* ======================================================== - Components: Risk Table - ======================================================== */ -.risk-title-cell { +/* ======================================================== + Components: Risk Table + ======================================================== */ +.risk-title-cell { position: relative; padding-left: 40px !important; cursor: pointer; @@ -609,7 +609,7 @@ main { color: var(--blue-800); } -.btn { +.btn { border-radius: 6px; line-height: 40px; padding: 0 16px; @@ -713,47 +713,47 @@ main { box-shadow: none !important; } -.btn-primary, -.btn-outline-primary { - /* --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-focus-shadow-rgb: 13, 110, 253; - --bs-btn-disabled-bg: transparent; +.btn-primary, +.btn-outline-primary { + /* --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + --bs-btn-focus-shadow-rgb: 13, 110, 253; + --bs-btn-disabled-bg: transparent; --bs-btn-active-color: var(--neutral-white); --bs-btn-hover-color: var(--neutral-white); - --bs-gradient: none; */ -} - -.btn-outline-primary { - --bs-btn-color: var(--primary-800); - --bs-btn-border-color: var(--primary-800); - --bs-btn-hover-color: var(--white); - --bs-btn-hover-bg: var(--primary-800); - --bs-btn-hover-border-color: var(--primary-800); - --bs-btn-active-color: var(--white); - --bs-btn-active-bg: var(--primary-800); - --bs-btn-active-border-color: var(--primary-800); - --bs-btn-disabled-color: var(--neutral-400); - --bs-btn-disabled-border-color: var(--neutral-300); - --bs-btn-focus-shadow-rgb: 17, 94, 89; -} - -.btn-outline-primary.show, -.btn-check:checked + .btn-outline-primary, -.btn-check:active + .btn-outline-primary, -.btn-outline-primary:focus, -.btn-outline-primary:focus-visible { - background: var(--primary-800) !important; - border-color: var(--primary-800) !important; - color: var(--white) !important; -} - -.btn-outline-primary.show svg.filter-icon path, -.btn-check:checked + .btn-outline-primary svg.filter-icon path, -.btn-check:active + .btn-outline-primary svg.filter-icon path, -.btn-outline-primary:focus svg.filter-icon path, -.btn-outline-primary:focus-visible svg.filter-icon path { - stroke: var(--white); -} + --bs-gradient: none; */ +} + +.btn-outline-primary { + --bs-btn-color: var(--primary-800); + --bs-btn-border-color: var(--primary-800); + --bs-btn-hover-color: var(--white); + --bs-btn-hover-bg: var(--primary-800); + --bs-btn-hover-border-color: var(--primary-800); + --bs-btn-active-color: var(--white); + --bs-btn-active-bg: var(--primary-800); + --bs-btn-active-border-color: var(--primary-800); + --bs-btn-disabled-color: var(--neutral-400); + --bs-btn-disabled-border-color: var(--neutral-300); + --bs-btn-focus-shadow-rgb: 17, 94, 89; +} + +.btn-outline-primary.show, +.btn-check:checked + .btn-outline-primary, +.btn-check:active + .btn-outline-primary, +.btn-outline-primary:focus, +.btn-outline-primary:focus-visible { + background: var(--primary-800) !important; + border-color: var(--primary-800) !important; + color: var(--white) !important; +} + +.btn-outline-primary.show svg.filter-icon path, +.btn-check:checked + .btn-outline-primary svg.filter-icon path, +.btn-check:active + .btn-outline-primary svg.filter-icon path, +.btn-outline-primary:focus svg.filter-icon path, +.btn-outline-primary:focus-visible svg.filter-icon path { + stroke: var(--white); +} .btn-primary.disabled, .btn-primary:disabled { @@ -768,10 +768,10 @@ main { color: var(--neutral-400); } -/* ======================================================== - Components: Filter Toggles - ======================================================== */ -.toggle-switch { +/* ======================================================== + Components: Filter Toggles + ======================================================== */ +.toggle-switch { position: relative; width: 44px; height: 24px; @@ -797,41 +797,41 @@ main { border-radius: var(--rounded-md); } -.toggle-slider:before { - position: absolute; - content: ""; - height: 20px; - width: 20px; - left: 2px; - bottom: 2px; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23E5EBEB'/%3E%3Cpath d='M6.5 6.5L13.5 13.5M13.5 6.5L6.5 13.5' stroke='%234B6361' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); -} - -.toggle-slider:before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23E5EBEB'/%3E%3Cpath d='M6.5 6.5L13.5 13.5M13.5 6.5L6.5 13.5' stroke='%234B6361' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: center; - background-size: 20px 20px; -} +.toggle-slider:before { + position: absolute; + content: ""; + height: 20px; + width: 20px; + left: 2px; + bottom: 2px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9.25' fill='white' stroke='%23D1DBDB' stroke-width='1.5'/%3E%3Cpath d='M6.5 6.5L13.5 13.5M13.5 6.5L6.5 13.5' stroke='%234B6361' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); +} + +.toggle-slider:before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9.25' fill='white' stroke='%23D1DBDB' stroke-width='1.5'/%3E%3Cpath d='M6.5 6.5L13.5 13.5M13.5 6.5L6.5 13.5' stroke='%234B6361' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; + background-size: 20px 20px; +} input:checked + .toggle-slider { background-color: var(--primary-800); } -input:checked + .toggle-slider:before { - -webkit-transform: translateX(20px); - -ms-transform: translateX(20px); - transform: translateX(20px); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='10' fill='%230D948B'/%3E%3Cpath d='M5.5 10.5L8.5 13.5L14.5 7.5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: center; - background-size: 20px 20px; -} - -/* ======================================================== - Components: Tables - ======================================================== */ -table:not("#assessmentsTable") { +input:checked + .toggle-slider:before { + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9.25' fill='white' stroke='%230D948B' stroke-width='1.5'/%3E%3Cpath d='M5.5 10.5L8.5 13.5L14.5 7.5' stroke='%230D948B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; + background-size: 20px 20px; +} + +/* ======================================================== + Components: Tables + ======================================================== */ +table:not("#assessmentsTable") { table-layout: fixed; width: 100%; } @@ -857,20 +857,20 @@ tr:last-child td { min-width: 420px; } -.risk-table-container::-webkit-scrollbar { - height: 20px; -} - -.risk-table-container::-webkit-scrollbar-track { +.risk-table-container::-webkit-scrollbar { + height: 20px; +} + +.risk-table-container::-webkit-scrollbar-track { background: var(--white); } -.risk-table-container::-webkit-scrollbar-thumb { +.risk-table-container::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 20px; } -.risk-table-container::-webkit-scrollbar-thumb:hover { +.risk-table-container::-webkit-scrollbar-thumb:hover { background: var(--neutral-600); } @@ -880,84 +880,94 @@ td:first-child { font-weight: 500; } -td .number, -td button { - margin-left: auto; - margin-right: auto; -} - -/* ======================================================== - Layout: Main Content And Forms - ======================================================== */ - -#main-content { - height: 100%; - width: 100%; - overflow: hidden; - padding: 20px 60px 20px 60px; - transition: all 0.3s linear; - -webkit-transition: all 0.3s linear; -} - -.visit span { - font-size: 14px; - word-break: break-all; -} - -.form-control, -.form-select { - color: var(--neutral-600); - font-size: var(--text-body); - font-style: normal; - font-weight: 400; - border-radius: 16px; - border: 1px solid var(--neutral-300); - background: var(--white); - -webkit-transition: border-color 0.3s ease, box-shadow 0.3s ease; - -o-transition: border-color 0.3s ease, box-shadow 0.3s ease; - transition: border-color 0.3s ease, box-shadow 0.3s ease; - -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); -} - -.form-control:focus, -.form-select:focus { - border-color: var(--primary-800); - box-shadow: 0 0 0 0.2rem rgba(17, 94, 89, 0.12); -} - -.custom-search { - min-width: 240px; - height: 36px; - border-radius: 8px; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3.5C5.96243 3.5 3.5 5.96243 3.5 9C3.5 12.0376 5.96243 14.5 9 14.5C10.519 14.5 11.893 13.8852 12.8891 12.8891C13.8852 11.893 14.5 10.519 14.5 9C14.5 5.96243 12.0376 3.5 9 3.5ZM2 9C2 5.13401 5.13401 2 9 2C12.866 2 16 5.13401 16 9C16 10.6625 15.4197 12.1906 14.4517 13.3911L17.7803 16.7197C18.0732 17.0126 18.0732 17.4874 17.7803 17.7803C17.4874 18.0732 17.0126 18.0732 16.7197 17.7803L13.3911 14.4517C12.1906 15.4197 10.6625 16 9 16C5.13401 16 2 12.866 2 9Z' fill='%236B807F'/%3E%3C/svg%3E") !important; - background-repeat: no-repeat !important; - background-position: 16px center !important; - padding: 0 16px 0 48px !important; - width: 400px; -} +td .number, +td button { + margin-left: auto; + margin-right: auto; +} + +/* ======================================================== + Layout: Main Content And Forms + ======================================================== */ + +#main-content { + height: 100%; + width: 100%; + overflow: hidden; + padding: 20px 60px 20px 60px; + transition: all 0.3s linear; + -webkit-transition: all 0.3s linear; +} + +.visit span { + font-size: 14px; + word-break: break-all; +} + +.form-control, +.form-select { + color: var(--neutral-600); + font-size: var(--text-body); + font-style: normal; + font-weight: 400; + border-radius: 8px; + border: 1px solid var(--neutral-300); + background: var(--white); + -webkit-transition: border-color 0.3s ease, box-shadow 0.3s ease; + -o-transition: border-color 0.3s ease, box-shadow 0.3s ease; + transition: border-color 0.3s ease, box-shadow 0.3s ease; + -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); +} + +.form-select { + -webkit-appearance: none; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23115E59' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 12px center; + background-size: 16px 16px; + padding-right: 40px; +} + +.form-control:focus, +.form-select:focus { + border-color: var(--primary-800); + box-shadow: 0 0 0 0.2rem rgba(17, 94, 89, 0.12); +} + +.custom-search { + min-width: 240px; + height: 36px; + border-radius: 8px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3.5C5.96243 3.5 3.5 5.96243 3.5 9C3.5 12.0376 5.96243 14.5 9 14.5C10.519 14.5 11.893 13.8852 12.8891 12.8891C13.8852 11.893 14.5 10.519 14.5 9C14.5 5.96243 12.0376 3.5 9 3.5ZM2 9C2 5.13401 5.13401 2 9 2C12.866 2 16 5.13401 16 9C16 10.6625 15.4197 12.1906 14.4517 13.3911L17.7803 16.7197C18.0732 17.0126 18.0732 17.4874 17.7803 17.7803C17.4874 18.0732 17.0126 18.0732 16.7197 17.7803L13.3911 14.4517C12.1906 15.4197 10.6625 16 9 16C5.13401 16 2 12.866 2 9Z' fill='%236B807F'/%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: 16px center !important; + padding: 0 16px 0 48px !important; + width: 400px; +} .btn-clear:hover { text-decoration: underline; } -.alt-tech-card { - background: #f5f5f5; - border-radius: 10px; -} - -.alt-tech-card h3 { - font-size: 18px; - margin: 0; -} - -/* ======================================================== - Components: Alternative Technology Status And Hints - ======================================================== */ - -.verified { - background: var(--green-600); - color: var(--white); +.alt-tech-card { + background: #f5f5f5; + border-radius: 10px; +} + +.alt-tech-card h3 { + font-size: 18px; + margin: 0; +} + +/* ======================================================== + Components: Alternative Technology Status And Hints + ======================================================== */ + +.verified { + background: var(--green-600); + color: var(--white); } .green-100 { background: var(--green-100); @@ -973,19 +983,19 @@ td button { color: var(--neutral-700); font-weight: 500; } -.verified span { - font-size: var(--text-label); -} -.red-700 { - color: var(--red-700); -} -.red-50 { - background: var(--red-50); -} - -.info-hint-box { - position: relative; - display: inline-block; +.verified span { + font-size: var(--text-label); +} +.red-700 { + color: var(--red-700); +} +.red-50 { + background: var(--red-50); +} + +.info-hint-box { + position: relative; + display: inline-block; margin-left: 6px; cursor: pointer; } @@ -1027,18 +1037,18 @@ td button { font-weight: 600; margin-bottom: 6px; } -.hint-hoverbox p { - font-size: 13px; - color: #555; - margin: 0; - line-height: 1.4; -} - -/* ======================================================== - Responsive - ======================================================== */ - -@media (max-width: 991px) { +.hint-hoverbox p { + font-size: 13px; + color: #555; + margin: 0; + line-height: 1.4; +} + +/* ======================================================== + Responsive + ======================================================== */ + +@media (max-width: 991px) { .alt-tech-card div { width: 100%; diff --git a/assets/template/index.html b/assets/template/index.html index 95ea1fa..86dc411 100644 --- a/assets/template/index.html +++ b/assets/template/index.html @@ -553,6 +553,7 @@