From 682d01725fb2c9eade21063944671032b6703e33 Mon Sep 17 00:00:00 2001 From: Chris Gilligan <49878588+UTCGilligan@users.noreply.github.com> Date: Wed, 31 Dec 2025 09:38:27 -0500 Subject: [PATCH 1/6] UTCT-228: Skiplink and styles for accessibility. Signed-off-by: Chris Gilligan <49878588+UTCGilligan@users.noreply.github.com> --- frontend/assets/sass/styles.scss | 22 ++++ frontend/dist/styles.css | 23 ---- frontend/footer.php | 7 +- index.php | 177 ++++++++++++++++++++----------- 4 files changed, 145 insertions(+), 84 deletions(-) diff --git a/frontend/assets/sass/styles.scss b/frontend/assets/sass/styles.scss index ba33b05..e6d2baf 100644 --- a/frontend/assets/sass/styles.scss +++ b/frontend/assets/sass/styles.scss @@ -97,3 +97,25 @@ $border-radius: 6px; } } } +.visually-hidden { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; +} + +.visually-hidden-focusable:active, +.visually-hidden-focusable:focus { + position: static !important; + width: auto !important; + height: auto !important; + margin: 0 !important; + overflow: visible !important; + clip: auto !important; + white-space: normal !important; +} diff --git a/frontend/dist/styles.css b/frontend/dist/styles.css index 4422acd..898190f 100644 --- a/frontend/dist/styles.css +++ b/frontend/dist/styles.css @@ -9369,27 +9369,4 @@ textarea.form-control-lg { width: 100%; border-radius: 6px !important; } -} -/* Extra styling for the skip link when it becomes visible */ -.skip-link { - background-color: #0d6efd; /* Bootstrap primary */ - color: #fff; - padding: 0.5rem 1rem; - text-decoration: none; - position: absolute; - top: 0.5rem; - left: 0.5rem; - z-index: 1050; -} - -.skip-link:focus { - outline: 3px solid #ffc107; -} - -/* Highlight the "Customize Link" toggle when it has keyboard focus */ -.btn.btn-link:focus, -.btn.btn-link:focus-visible { - outline: 3px solid #ffc107 !important; - outline-offset: 2px; - box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5) !important; } \ No newline at end of file diff --git a/frontend/footer.php b/frontend/footer.php index 17f2ec6..a67e8ce 100644 --- a/frontend/footer.php +++ b/frontend/footer.php @@ -45,13 +45,18 @@ function copyTextToClipboard(text) { copyBtn.addEventListener('click', function(event) { copyTextToClipboard(event.target.dataset.shorturl); }); + + // Move focus to copy button when result screen is shown + window.addEventListener('load', function () { + copyBtn.focus(); + }); } const closeShortenedLinkScreenButton = document.querySelector('button#close-shortened-screen'); if (closeShortenedLinkScreenButton) { closeShortenedLinkScreenButton.addEventListener('click', function(event) { - window.location.href=window.location.href; + window.location.href = window.location.href; }); } diff --git a/index.php b/index.php index 51f7c1f..448f661 100644 --- a/index.php +++ b/index.php @@ -84,79 +84,136 @@ function shorten() -
-
-
-
- - - -
- -
- -
-

Your short link

+Skip to main content +
+
+
+
+
+ + + +
+ +
-
-
-
- - +
+

Your short link

+ +
+
+
+ + + +
+ + View info and stats at + + +
- View info and stats at +
-
- -
- UTC Logo -
-
-

- - - - + +
+ <?php echo shortTitle ?> +
+
+

Shorten a URL

+

+ + + + + - - +
+ © +
+ $val): ?> + + + +
- -
-
- © -
- $val): ?> - -
-
+
From dd9478c4a1c0870dc5795e796b559bced43d4048 Mon Sep 17 00:00:00 2001 From: Chris Gilligan <49878588+UTCGilligan@users.noreply.github.com> Date: Wed, 31 Dec 2025 12:27:45 -0500 Subject: [PATCH 2/6] UTCT-228: Improve tabbing and focus for keyboard users. Signed-off-by: Chris Gilligan <49878588+UTCGilligan@users.noreply.github.com> --- frontend/header.php | 17 +++++++++++++++++ index.php | 11 ++++++++--- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/frontend/header.php b/frontend/header.php index 034b65e..cf94794 100644 --- a/frontend/header.php +++ b/frontend/header.php @@ -43,4 +43,21 @@ border-color: ; } + diff --git a/index.php b/index.php index 448f661..809e9a9 100644 --- a/index.php +++ b/index.php @@ -158,12 +158,14 @@ class="form-control text-uppercase" aria-label="Paste a URL to shorten and share" aria-describedby="shorten-button" required + tabindex="1" >
@@ -174,15 +176,16 @@ class="btn btn-sm btn-white text-black-50 text-uppercase" role="button" aria-expanded="false" aria-controls="customise-link" + tabindex="2" > Customize Link +
From d55f9fcc0a4f35cfb2f23b94c908a4d3afbe93a9 Mon Sep 17 00:00:00 2001 From: Chris Gilligan <49878588+UTCGilligan@users.noreply.github.com> Date: Wed, 31 Dec 2025 12:32:19 -0500 Subject: [PATCH 3/6] UTCT-228: Update favicon link. Signed-off-by: Chris Gilligan <49878588+UTCGilligan@users.noreply.github.com> --- frontend/header.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/header.php b/frontend/header.php index cf94794..025720b 100644 --- a/frontend/header.php +++ b/frontend/header.php @@ -9,7 +9,7 @@ - + <?php echo title ?> From 4eac04f669713c064f560850f501e0bd6c9a40f1 Mon Sep 17 00:00:00 2001 From: Chris Gilligan <49878588+UTCGilligan@users.noreply.github.com> Date: Mon, 5 Jan 2026 08:09:47 -0500 Subject: [PATCH 4/6] UTCT-228: Set SCSS theme defaults. Signed-off-by: Chris Gilligan <49878588+UTCGilligan@users.noreply.github.com> --- frontend/assets/sass/styles.scss | 29 +++- frontend/dist/styles.css | 219 ++++++++++++++++++------------- index.php | 2 +- 3 files changed, 155 insertions(+), 95 deletions(-) diff --git a/frontend/assets/sass/styles.scss b/frontend/assets/sass/styles.scss index e6d2baf..9d1e20d 100644 --- a/frontend/assets/sass/styles.scss +++ b/frontend/assets/sass/styles.scss @@ -5,6 +5,14 @@ $raleway: "Raleway", system-ui, -apple-system, "Segoe UI", Raleway, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; $oswald: "Oswald", system-ui, -apple-system, "Segoe UI", Oswald, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +// Theme variables (safe defaults) +$theme: "light" !default; +$primary: #2a85b3 !default; +// Accent color for light theme +$accent: $primary !default; +// Background color for light theme buttons +$light: #ffffff !default; + // Bootstrap Overrides $enable-negative-margins: true; $font-family-sans-serif: $raleway; @@ -87,16 +95,16 @@ $border-radius: 6px; font-weight: 600; padding: 10px 25px; margin-top: 15px !important; - font-weight: 600; @if ($theme == "light") { background: $accent !important; - } else { - background: $light !important; - border-left: 7px solid $accent !important; - } + } @else { + background: $light !important; + border-left: 7px solid $accent !important; + } } } + .visually-hidden { position: absolute !important; width: 1px !important; @@ -119,3 +127,14 @@ $border-radius: 6px; clip: auto !important; white-space: normal !important; } +.customize-link-toggle { + transition: box-shadow 0.15s ease, outline 0.15s ease, background-color 0.15s ease; +} + +.customize-link-toggle:focus-visible, +.customize-link-toggle:focus { + outline: 3px solid $primary; + outline-offset: 2px; + box-shadow: 0 0 0 0.15rem rgba($primary, 0.5); + background-color: rgba($primary, 0.08); +} diff --git a/frontend/dist/styles.css b/frontend/dist/styles.css index 898190f..b4a878c 100644 --- a/frontend/dist/styles.css +++ b/frontend/dist/styles.css @@ -26,23 +26,23 @@ --bs-gray-700: #495057; --bs-gray-800: #343a40; --bs-gray-900: #212529; - --bs-primary: #0d6efd; + --bs-primary: #2a85b3; --bs-secondary: #6c757d; --bs-success: #198754; --bs-info: #0dcaf0; --bs-warning: #ffc107; --bs-danger: #dc3545; - --bs-light: #f8f9fa; + --bs-light: #ffffff; --bs-dark: #212529; - --bs-primary-rgb: 13, 110, 253; + --bs-primary-rgb: 42, 133, 179; --bs-secondary-rgb: 108, 117, 125; --bs-success-rgb: 25, 135, 84; --bs-info-rgb: 13, 202, 240; --bs-warning-rgb: 255, 193, 7; --bs-danger-rgb: 220, 53, 69; - --bs-light-rgb: 248, 249, 250; + --bs-light-rgb: 255, 255, 255; --bs-dark-rgb: 33, 37, 41; - --bs-primary-text-emphasis: rgb(5.2, 44, 101.2); + --bs-primary-text-emphasis: rgb(16.8, 53.2, 71.6); --bs-secondary-text-emphasis: rgb(43.2, 46.8, 50); --bs-success-text-emphasis: rgb(10, 54, 33.6); --bs-info-text-emphasis: rgb(5.2, 80.8, 96); @@ -50,7 +50,7 @@ --bs-danger-text-emphasis: rgb(88, 21.2, 27.6); --bs-light-text-emphasis: #495057; --bs-dark-text-emphasis: #495057; - --bs-primary-bg-subtle: rgb(206.6, 226, 254.6); + --bs-primary-bg-subtle: rgb(212.4, 230.6, 239.8); --bs-secondary-bg-subtle: rgb(225.6, 227.4, 229); --bs-success-bg-subtle: rgb(209, 231, 220.8); --bs-info-bg-subtle: rgb(206.6, 244.4, 252); @@ -58,7 +58,7 @@ --bs-danger-bg-subtle: rgb(248, 214.6, 217.8); --bs-light-bg-subtle: rgb(251.5, 252, 252.5); --bs-dark-bg-subtle: #ced4da; - --bs-primary-border-subtle: rgb(158.2, 197, 254.2); + --bs-primary-border-subtle: rgb(169.8, 206.2, 224.6); --bs-secondary-border-subtle: rgb(196.2, 199.8, 203); --bs-success-border-subtle: rgb(163, 207, 186.6); --bs-info-border-subtle: rgb(158.2, 233.8, 249); @@ -90,11 +90,11 @@ --bs-tertiary-bg: #f8f9fa; --bs-tertiary-bg-rgb: 248, 249, 250; --bs-heading-color: inherit; - --bs-link-color: #0d6efd; - --bs-link-color-rgb: 13, 110, 253; + --bs-link-color: #2a85b3; + --bs-link-color-rgb: 42, 133, 179; --bs-link-decoration: underline; - --bs-link-hover-color: rgb(10.4, 88, 202.4); - --bs-link-hover-color-rgb: 10, 88, 202; + --bs-link-hover-color: rgb(33.6, 106.4, 143.2); + --bs-link-hover-color-rgb: 34, 106, 143; --bs-code-color: #d63384; --bs-highlight-color: #212529; --bs-highlight-bg: rgb(255, 242.6, 205.4); @@ -115,7 +115,7 @@ --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); --bs-focus-ring-width: 0.25rem; --bs-focus-ring-opacity: 0.25; - --bs-focus-ring-color: rgba(13, 110, 253, 0.25); + --bs-focus-ring-color: rgba(42, 133, 179, 0.25); --bs-form-valid-color: #198754; --bs-form-valid-border-color: #198754; --bs-form-invalid-color: #dc3545; @@ -138,7 +138,7 @@ --bs-tertiary-color-rgb: 222, 226, 230; --bs-tertiary-bg: rgb(42.5, 47.5, 52.5); --bs-tertiary-bg-rgb: 43, 48, 53; - --bs-primary-text-emphasis: rgb(109.8, 168, 253.8); + --bs-primary-text-emphasis: rgb(127.2, 181.8, 209.4); --bs-secondary-text-emphasis: rgb(166.8, 172.2, 177); --bs-success-text-emphasis: rgb(117, 183, 152.4); --bs-info-text-emphasis: rgb(109.8, 223.2, 246); @@ -146,7 +146,7 @@ --bs-danger-text-emphasis: rgb(234, 133.8, 143.4); --bs-light-text-emphasis: #f8f9fa; --bs-dark-text-emphasis: #dee2e6; - --bs-primary-bg-subtle: rgb(2.6, 22, 50.6); + --bs-primary-bg-subtle: rgb(8.4, 26.6, 35.8); --bs-secondary-bg-subtle: rgb(21.6, 23.4, 25); --bs-success-bg-subtle: rgb(5, 27, 16.8); --bs-info-bg-subtle: rgb(2.6, 40.4, 48); @@ -154,7 +154,7 @@ --bs-danger-bg-subtle: rgb(44, 10.6, 13.8); --bs-light-bg-subtle: #343a40; --bs-dark-bg-subtle: #1a1d20; - --bs-primary-border-subtle: rgb(7.8, 66, 151.8); + --bs-primary-border-subtle: rgb(25.2, 79.8, 107.4); --bs-secondary-border-subtle: rgb(64.8, 70.2, 75); --bs-success-border-subtle: rgb(15, 81, 50.4); --bs-info-border-subtle: rgb(7.8, 121.2, 144); @@ -163,10 +163,10 @@ --bs-light-border-subtle: #495057; --bs-dark-border-subtle: #343a40; --bs-heading-color: inherit; - --bs-link-color: rgb(109.8, 168, 253.8); - --bs-link-hover-color: rgb(138.84, 185.4, 254.04); - --bs-link-color-rgb: 110, 168, 254; - --bs-link-hover-color-rgb: 139, 185, 254; + --bs-link-color: rgb(127.2, 181.8, 209.4); + --bs-link-hover-color: rgb(152.76, 196.44, 218.52); + --bs-link-color-rgb: 127, 182, 209; + --bs-link-hover-color-rgb: 153, 196, 219; --bs-code-color: rgb(230.4, 132.6, 181.2); --bs-highlight-color: #dee2e6; --bs-highlight-bg: rgb(102, 77.2, 2.8); @@ -1882,9 +1882,9 @@ progress { .form-control:focus { color: var(--bs-body-color); background-color: #ebebeb; - border-color: rgb(134, 182.5, 254); + border-color: rgb(148.5, 194, 217); outline: 0; - box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); + box-shadow: 0 0 0 0.25rem rgba(42, 133, 179, 0.25); } .form-control::-webkit-date-and-time-value { min-width: 85px; @@ -2028,9 +2028,9 @@ textarea.form-control-lg { } } .form-select:focus { - border-color: rgb(134, 182.5, 254); + border-color: rgb(148.5, 194, 217); outline: 0; - box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); + box-shadow: 0 0 0 0.25rem rgba(42, 133, 179, 0.25); } .form-select[multiple], .form-select[size]:not([size="1"]) { padding-right: 0.75rem; @@ -2112,13 +2112,13 @@ textarea.form-control-lg { filter: brightness(90%); } .form-check-input:focus { - border-color: rgb(134, 182.5, 254); + border-color: rgb(148.5, 194, 217); outline: 0; - box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); + box-shadow: 0 0 0 0.25rem rgba(42, 133, 179, 0.25); } .form-check-input:checked { - background-color: #0d6efd; - border-color: #0d6efd; + background-color: #2a85b3; + border-color: #2a85b3; } .form-check-input:checked[type=checkbox] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); @@ -2127,8 +2127,8 @@ textarea.form-control-lg { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); } .form-check-input[type=checkbox]:indeterminate { - background-color: #0d6efd; - border-color: #0d6efd; + background-color: #2a85b3; + border-color: #2a85b3; --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); } .form-check-input:disabled { @@ -2159,7 +2159,7 @@ textarea.form-control-lg { } } .form-switch .form-check-input:focus { - --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28134, 182.5, 254%29'/%3e%3c/svg%3e"); + --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28148.5, 194, 217%29'/%3e%3c/svg%3e"); } .form-switch .form-check-input:checked { background-position: right center; @@ -2205,10 +2205,10 @@ textarea.form-control-lg { outline: 0; } .form-range:focus::-webkit-slider-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25); + box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(42, 133, 179, 0.25); } .form-range:focus::-moz-range-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25); + box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(42, 133, 179, 0.25); } .form-range::-moz-focus-outer { border: 0; @@ -2218,7 +2218,7 @@ textarea.form-control-lg { height: 1rem; margin-top: -0.25rem; appearance: none; - background-color: #0d6efd; + background-color: #2a85b3; border: 0; border-radius: 1rem; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; @@ -2229,7 +2229,7 @@ textarea.form-control-lg { } } .form-range::-webkit-slider-thumb:active { - background-color: rgb(182.4, 211.5, 254.4); + background-color: rgb(191.1, 218.4, 232.2); } .form-range::-webkit-slider-runnable-track { width: 100%; @@ -2244,7 +2244,7 @@ textarea.form-control-lg { width: 1rem; height: 1rem; appearance: none; - background-color: #0d6efd; + background-color: #2a85b3; border: 0; border-radius: 1rem; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; @@ -2255,7 +2255,7 @@ textarea.form-control-lg { } } .form-range::-moz-range-thumb:active { - background-color: rgb(182.4, 211.5, 254.4); + background-color: rgb(191.1, 218.4, 232.2); } .form-range::-moz-range-track { width: 100%; @@ -2714,20 +2714,20 @@ textarea.form-control-lg { } .btn-primary { - --bs-btn-color: #fff; - --bs-btn-bg: #0d6efd; - --bs-btn-border-color: #0d6efd; - --bs-btn-hover-color: #fff; - --bs-btn-hover-bg: rgb(11.05, 93.5, 215.05); - --bs-btn-hover-border-color: rgb(10.4, 88, 202.4); - --bs-btn-focus-shadow-rgb: 49, 132, 253; - --bs-btn-active-color: #fff; - --bs-btn-active-bg: rgb(10.4, 88, 202.4); - --bs-btn-active-border-color: rgb(9.75, 82.5, 189.75); + --bs-btn-color: #000; + --bs-btn-bg: #2a85b3; + --bs-btn-border-color: #2a85b3; + --bs-btn-hover-color: #000; + --bs-btn-hover-bg: rgb(73.95, 151.3, 190.4); + --bs-btn-hover-border-color: rgb(63.3, 145.2, 186.6); + --bs-btn-focus-shadow-rgb: 36, 113, 152; + --bs-btn-active-color: #000; + --bs-btn-active-bg: rgb(84.6, 157.4, 194.2); + --bs-btn-active-border-color: rgb(63.3, 145.2, 186.6); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #fff; - --bs-btn-disabled-bg: #0d6efd; - --bs-btn-disabled-border-color: #0d6efd; + --bs-btn-disabled-color: #000; + --bs-btn-disabled-bg: #2a85b3; + --bs-btn-disabled-border-color: #2a85b3; } .btn-secondary { @@ -2817,19 +2817,19 @@ textarea.form-control-lg { .btn-light { --bs-btn-color: #000; - --bs-btn-bg: #f8f9fa; - --bs-btn-border-color: #f8f9fa; + --bs-btn-bg: #ffffff; + --bs-btn-border-color: #ffffff; --bs-btn-hover-color: #000; - --bs-btn-hover-bg: rgb(210.8, 211.65, 212.5); - --bs-btn-hover-border-color: rgb(198.4, 199.2, 200); - --bs-btn-focus-shadow-rgb: 211, 212, 213; + --bs-btn-hover-bg: rgb(216.75, 216.75, 216.75); + --bs-btn-hover-border-color: #cccccc; + --bs-btn-focus-shadow-rgb: 217, 217, 217; --bs-btn-active-color: #000; - --bs-btn-active-bg: rgb(198.4, 199.2, 200); - --bs-btn-active-border-color: rgb(186, 186.75, 187.5); + --bs-btn-active-bg: #cccccc; + --bs-btn-active-border-color: rgb(191.25, 191.25, 191.25); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #000; - --bs-btn-disabled-bg: #f8f9fa; - --bs-btn-disabled-border-color: #f8f9fa; + --bs-btn-disabled-bg: #ffffff; + --bs-btn-disabled-border-color: #ffffff; } .btn-dark { @@ -2850,19 +2850,19 @@ textarea.form-control-lg { } .btn-outline-primary { - --bs-btn-color: #0d6efd; - --bs-btn-border-color: #0d6efd; - --bs-btn-hover-color: #fff; - --bs-btn-hover-bg: #0d6efd; - --bs-btn-hover-border-color: #0d6efd; - --bs-btn-focus-shadow-rgb: 13, 110, 253; - --bs-btn-active-color: #fff; - --bs-btn-active-bg: #0d6efd; - --bs-btn-active-border-color: #0d6efd; + --bs-btn-color: #2a85b3; + --bs-btn-border-color: #2a85b3; + --bs-btn-hover-color: #000; + --bs-btn-hover-bg: #2a85b3; + --bs-btn-hover-border-color: #2a85b3; + --bs-btn-focus-shadow-rgb: 42, 133, 179; + --bs-btn-active-color: #000; + --bs-btn-active-bg: #2a85b3; + --bs-btn-active-border-color: #2a85b3; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #0d6efd; + --bs-btn-disabled-color: #2a85b3; --bs-btn-disabled-bg: transparent; - --bs-btn-disabled-border-color: #0d6efd; + --bs-btn-disabled-border-color: #2a85b3; --bs-gradient: none; } @@ -2952,19 +2952,19 @@ textarea.form-control-lg { } .btn-outline-light { - --bs-btn-color: #f8f9fa; - --bs-btn-border-color: #f8f9fa; + --bs-btn-color: #ffffff; + --bs-btn-border-color: #ffffff; --bs-btn-hover-color: #000; - --bs-btn-hover-bg: #f8f9fa; - --bs-btn-hover-border-color: #f8f9fa; - --bs-btn-focus-shadow-rgb: 248, 249, 250; + --bs-btn-hover-bg: #ffffff; + --bs-btn-hover-border-color: #ffffff; + --bs-btn-focus-shadow-rgb: 255, 255, 255; --bs-btn-active-color: #000; - --bs-btn-active-bg: #f8f9fa; - --bs-btn-active-border-color: #f8f9fa; + --bs-btn-active-bg: #ffffff; + --bs-btn-active-border-color: #ffffff; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #f8f9fa; + --bs-btn-disabled-color: #ffffff; --bs-btn-disabled-bg: transparent; - --bs-btn-disabled-border-color: #f8f9fa; + --bs-btn-disabled-border-color: #ffffff; --bs-gradient: none; } @@ -2997,7 +2997,7 @@ textarea.form-control-lg { --bs-btn-disabled-color: #6c757d; --bs-btn-disabled-border-color: transparent; --bs-btn-box-shadow: 0 0 0 #000; - --bs-btn-focus-shadow-rgb: 49, 132, 253; + --bs-btn-focus-shadow-rgb: 36, 113, 152; text-decoration: underline; } .btn-link:focus-visible { @@ -3261,8 +3261,8 @@ textarea.form-control-lg { --bs-accordion-btn-icon-width: 1.25rem; --bs-accordion-btn-icon-transform: rotate(-180deg); --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out; - --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%285.2, 44, 101.2%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); - --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); + --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%2816.8, 53.2, 71.6%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); + --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(42, 133, 179, 0.25); --bs-accordion-body-padding-x: 1.25rem; --bs-accordion-body-padding-y: 1rem; --bs-accordion-active-color: var(--bs-primary-text-emphasis); @@ -3378,8 +3378,8 @@ textarea.form-control-lg { } [data-bs-theme=dark] .accordion-button::after { - --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28109.8, 168, 253.8%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e"); - --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28109.8, 168, 253.8%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e"); + --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28127.2, 181.8, 209.4%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e"); + --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28127.2, 181.8, 209.4%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e"); } .alert { @@ -3482,7 +3482,7 @@ textarea.form-control-lg { --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e"); --bs-btn-close-opacity: 0.5; --bs-btn-close-hover-opacity: 0.75; - --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); + --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(42, 133, 179, 0.25); --bs-btn-close-focus-opacity: 1; --bs-btn-close-disabled-opacity: 0.25; box-sizing: content-box; @@ -3532,7 +3532,7 @@ textarea.form-control-lg { } .text-bg-primary { - color: #fff !important; + color: #000 !important; background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; } @@ -3576,8 +3576,8 @@ textarea.form-control-lg { text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-primary:hover, .link-primary:focus { - color: RGBA(10, 88, 202, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(10, 88, 202, var(--bs-link-underline-opacity, 1)) !important; + color: RGBA(85, 157, 194, var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(85, 157, 194, var(--bs-link-underline-opacity, 1)) !important; } .link-secondary { @@ -3630,8 +3630,8 @@ textarea.form-control-lg { text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-light:hover, .link-light:focus { - color: RGBA(249, 250, 251, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(249, 250, 251, var(--bs-link-underline-opacity, 1)) !important; + color: RGBA(255, 255, 255, var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(255, 255, 255, var(--bs-link-underline-opacity, 1)) !important; } .link-dark { @@ -9369,4 +9369,45 @@ textarea.form-control-lg { width: 100%; border-radius: 6px !important; } +} +.login input.button { + font-weight: 600; + padding: 10px 25px; + margin-top: 15px !important; + background: #2a85b3 !important; +} + +.visually-hidden { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; +} + +.visually-hidden-focusable:active, +.visually-hidden-focusable:focus { + position: static !important; + width: auto !important; + height: auto !important; + margin: 0 !important; + overflow: visible !important; + clip: auto !important; + white-space: normal !important; +} + +.customize-link-toggle { + transition: box-shadow 0.15s ease, outline 0.15s ease, background-color 0.15s ease; +} + +.customize-link-toggle:focus-visible, +.customize-link-toggle:focus { + outline: 3px solid #2a85b3; + outline-offset: 2px; + box-shadow: 0 0 0 0.15rem rgba(42, 133, 179, 0.5); + background-color: rgba(42, 133, 179, 0.08); } \ No newline at end of file diff --git a/index.php b/index.php index 809e9a9..eabdd4f 100644 --- a/index.php +++ b/index.php @@ -170,7 +170,7 @@ class="btn btn-primary text-uppercase py-2 px-4 mt-2 mt-md-0"
Date: Mon, 5 Jan 2026 08:14:37 -0500 Subject: [PATCH 5/6] UTCT-228: Correct primary default color. Signed-off-by: Chris Gilligan <49878588+UTCGilligan@users.noreply.github.com> --- frontend/assets/sass/styles.scss | 2 +- frontend/dist/styles.css | 142 +++++++++++++++---------------- 2 files changed, 72 insertions(+), 72 deletions(-) diff --git a/frontend/assets/sass/styles.scss b/frontend/assets/sass/styles.scss index 9d1e20d..6ee2990 100644 --- a/frontend/assets/sass/styles.scss +++ b/frontend/assets/sass/styles.scss @@ -7,7 +7,7 @@ $oswald: "Oswald", system-ui, -apple-system, "Segoe UI", Oswald, "Helvetica Neue // Theme variables (safe defaults) $theme: "light" !default; -$primary: #2a85b3 !default; +$primary: #112e51 !default; // Accent color for light theme $accent: $primary !default; // Background color for light theme buttons diff --git a/frontend/dist/styles.css b/frontend/dist/styles.css index b4a878c..315a778 100644 --- a/frontend/dist/styles.css +++ b/frontend/dist/styles.css @@ -26,7 +26,7 @@ --bs-gray-700: #495057; --bs-gray-800: #343a40; --bs-gray-900: #212529; - --bs-primary: #2a85b3; + --bs-primary: #112e51; --bs-secondary: #6c757d; --bs-success: #198754; --bs-info: #0dcaf0; @@ -34,7 +34,7 @@ --bs-danger: #dc3545; --bs-light: #ffffff; --bs-dark: #212529; - --bs-primary-rgb: 42, 133, 179; + --bs-primary-rgb: 17, 46, 81; --bs-secondary-rgb: 108, 117, 125; --bs-success-rgb: 25, 135, 84; --bs-info-rgb: 13, 202, 240; @@ -42,7 +42,7 @@ --bs-danger-rgb: 220, 53, 69; --bs-light-rgb: 255, 255, 255; --bs-dark-rgb: 33, 37, 41; - --bs-primary-text-emphasis: rgb(16.8, 53.2, 71.6); + --bs-primary-text-emphasis: rgb(6.8, 18.4, 32.4); --bs-secondary-text-emphasis: rgb(43.2, 46.8, 50); --bs-success-text-emphasis: rgb(10, 54, 33.6); --bs-info-text-emphasis: rgb(5.2, 80.8, 96); @@ -50,7 +50,7 @@ --bs-danger-text-emphasis: rgb(88, 21.2, 27.6); --bs-light-text-emphasis: #495057; --bs-dark-text-emphasis: #495057; - --bs-primary-bg-subtle: rgb(212.4, 230.6, 239.8); + --bs-primary-bg-subtle: rgb(207.4, 213.2, 220.2); --bs-secondary-bg-subtle: rgb(225.6, 227.4, 229); --bs-success-bg-subtle: rgb(209, 231, 220.8); --bs-info-bg-subtle: rgb(206.6, 244.4, 252); @@ -58,7 +58,7 @@ --bs-danger-bg-subtle: rgb(248, 214.6, 217.8); --bs-light-bg-subtle: rgb(251.5, 252, 252.5); --bs-dark-bg-subtle: #ced4da; - --bs-primary-border-subtle: rgb(169.8, 206.2, 224.6); + --bs-primary-border-subtle: rgb(159.8, 171.4, 185.4); --bs-secondary-border-subtle: rgb(196.2, 199.8, 203); --bs-success-border-subtle: rgb(163, 207, 186.6); --bs-info-border-subtle: rgb(158.2, 233.8, 249); @@ -90,11 +90,11 @@ --bs-tertiary-bg: #f8f9fa; --bs-tertiary-bg-rgb: 248, 249, 250; --bs-heading-color: inherit; - --bs-link-color: #2a85b3; - --bs-link-color-rgb: 42, 133, 179; + --bs-link-color: #112e51; + --bs-link-color-rgb: 17, 46, 81; --bs-link-decoration: underline; - --bs-link-hover-color: rgb(33.6, 106.4, 143.2); - --bs-link-hover-color-rgb: 34, 106, 143; + --bs-link-hover-color: rgb(13.6, 36.8, 64.8); + --bs-link-hover-color-rgb: 14, 37, 65; --bs-code-color: #d63384; --bs-highlight-color: #212529; --bs-highlight-bg: rgb(255, 242.6, 205.4); @@ -115,7 +115,7 @@ --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); --bs-focus-ring-width: 0.25rem; --bs-focus-ring-opacity: 0.25; - --bs-focus-ring-color: rgba(42, 133, 179, 0.25); + --bs-focus-ring-color: rgba(17, 46, 81, 0.25); --bs-form-valid-color: #198754; --bs-form-valid-border-color: #198754; --bs-form-invalid-color: #dc3545; @@ -138,7 +138,7 @@ --bs-tertiary-color-rgb: 222, 226, 230; --bs-tertiary-bg: rgb(42.5, 47.5, 52.5); --bs-tertiary-bg-rgb: 43, 48, 53; - --bs-primary-text-emphasis: rgb(127.2, 181.8, 209.4); + --bs-primary-text-emphasis: rgb(112.2, 129.6, 150.6); --bs-secondary-text-emphasis: rgb(166.8, 172.2, 177); --bs-success-text-emphasis: rgb(117, 183, 152.4); --bs-info-text-emphasis: rgb(109.8, 223.2, 246); @@ -146,7 +146,7 @@ --bs-danger-text-emphasis: rgb(234, 133.8, 143.4); --bs-light-text-emphasis: #f8f9fa; --bs-dark-text-emphasis: #dee2e6; - --bs-primary-bg-subtle: rgb(8.4, 26.6, 35.8); + --bs-primary-bg-subtle: rgb(3.4, 9.2, 16.2); --bs-secondary-bg-subtle: rgb(21.6, 23.4, 25); --bs-success-bg-subtle: rgb(5, 27, 16.8); --bs-info-bg-subtle: rgb(2.6, 40.4, 48); @@ -154,7 +154,7 @@ --bs-danger-bg-subtle: rgb(44, 10.6, 13.8); --bs-light-bg-subtle: #343a40; --bs-dark-bg-subtle: #1a1d20; - --bs-primary-border-subtle: rgb(25.2, 79.8, 107.4); + --bs-primary-border-subtle: rgb(10.2, 27.6, 48.6); --bs-secondary-border-subtle: rgb(64.8, 70.2, 75); --bs-success-border-subtle: rgb(15, 81, 50.4); --bs-info-border-subtle: rgb(7.8, 121.2, 144); @@ -163,10 +163,10 @@ --bs-light-border-subtle: #495057; --bs-dark-border-subtle: #343a40; --bs-heading-color: inherit; - --bs-link-color: rgb(127.2, 181.8, 209.4); - --bs-link-hover-color: rgb(152.76, 196.44, 218.52); - --bs-link-color-rgb: 127, 182, 209; - --bs-link-hover-color-rgb: 153, 196, 219; + --bs-link-color: rgb(112.2, 129.6, 150.6); + --bs-link-hover-color: rgb(140.76, 154.68, 171.48); + --bs-link-color-rgb: 112, 130, 151; + --bs-link-hover-color-rgb: 141, 155, 171; --bs-code-color: rgb(230.4, 132.6, 181.2); --bs-highlight-color: #dee2e6; --bs-highlight-bg: rgb(102, 77.2, 2.8); @@ -1882,9 +1882,9 @@ progress { .form-control:focus { color: var(--bs-body-color); background-color: #ebebeb; - border-color: rgb(148.5, 194, 217); + border-color: rgb(136, 150.5, 168); outline: 0; - box-shadow: 0 0 0 0.25rem rgba(42, 133, 179, 0.25); + box-shadow: 0 0 0 0.25rem rgba(17, 46, 81, 0.25); } .form-control::-webkit-date-and-time-value { min-width: 85px; @@ -2028,9 +2028,9 @@ textarea.form-control-lg { } } .form-select:focus { - border-color: rgb(148.5, 194, 217); + border-color: rgb(136, 150.5, 168); outline: 0; - box-shadow: 0 0 0 0.25rem rgba(42, 133, 179, 0.25); + box-shadow: 0 0 0 0.25rem rgba(17, 46, 81, 0.25); } .form-select[multiple], .form-select[size]:not([size="1"]) { padding-right: 0.75rem; @@ -2112,13 +2112,13 @@ textarea.form-control-lg { filter: brightness(90%); } .form-check-input:focus { - border-color: rgb(148.5, 194, 217); + border-color: rgb(136, 150.5, 168); outline: 0; - box-shadow: 0 0 0 0.25rem rgba(42, 133, 179, 0.25); + box-shadow: 0 0 0 0.25rem rgba(17, 46, 81, 0.25); } .form-check-input:checked { - background-color: #2a85b3; - border-color: #2a85b3; + background-color: #112e51; + border-color: #112e51; } .form-check-input:checked[type=checkbox] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); @@ -2127,8 +2127,8 @@ textarea.form-control-lg { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); } .form-check-input[type=checkbox]:indeterminate { - background-color: #2a85b3; - border-color: #2a85b3; + background-color: #112e51; + border-color: #112e51; --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); } .form-check-input:disabled { @@ -2159,7 +2159,7 @@ textarea.form-control-lg { } } .form-switch .form-check-input:focus { - --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28148.5, 194, 217%29'/%3e%3c/svg%3e"); + --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28136, 150.5, 168%29'/%3e%3c/svg%3e"); } .form-switch .form-check-input:checked { background-position: right center; @@ -2205,10 +2205,10 @@ textarea.form-control-lg { outline: 0; } .form-range:focus::-webkit-slider-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(42, 133, 179, 0.25); + box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(17, 46, 81, 0.25); } .form-range:focus::-moz-range-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(42, 133, 179, 0.25); + box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(17, 46, 81, 0.25); } .form-range::-moz-focus-outer { border: 0; @@ -2218,7 +2218,7 @@ textarea.form-control-lg { height: 1rem; margin-top: -0.25rem; appearance: none; - background-color: #2a85b3; + background-color: #112e51; border: 0; border-radius: 1rem; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; @@ -2229,7 +2229,7 @@ textarea.form-control-lg { } } .form-range::-webkit-slider-thumb:active { - background-color: rgb(191.1, 218.4, 232.2); + background-color: rgb(183.6, 192.3, 202.8); } .form-range::-webkit-slider-runnable-track { width: 100%; @@ -2244,7 +2244,7 @@ textarea.form-control-lg { width: 1rem; height: 1rem; appearance: none; - background-color: #2a85b3; + background-color: #112e51; border: 0; border-radius: 1rem; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; @@ -2255,7 +2255,7 @@ textarea.form-control-lg { } } .form-range::-moz-range-thumb:active { - background-color: rgb(191.1, 218.4, 232.2); + background-color: rgb(183.6, 192.3, 202.8); } .form-range::-moz-range-track { width: 100%; @@ -2714,20 +2714,20 @@ textarea.form-control-lg { } .btn-primary { - --bs-btn-color: #000; - --bs-btn-bg: #2a85b3; - --bs-btn-border-color: #2a85b3; - --bs-btn-hover-color: #000; - --bs-btn-hover-bg: rgb(73.95, 151.3, 190.4); - --bs-btn-hover-border-color: rgb(63.3, 145.2, 186.6); - --bs-btn-focus-shadow-rgb: 36, 113, 152; - --bs-btn-active-color: #000; - --bs-btn-active-bg: rgb(84.6, 157.4, 194.2); - --bs-btn-active-border-color: rgb(63.3, 145.2, 186.6); + --bs-btn-color: #fff; + --bs-btn-bg: #112e51; + --bs-btn-border-color: #112e51; + --bs-btn-hover-color: #fff; + --bs-btn-hover-bg: rgb(14.45, 39.1, 68.85); + --bs-btn-hover-border-color: rgb(13.6, 36.8, 64.8); + --bs-btn-focus-shadow-rgb: 53, 77, 107; + --bs-btn-active-color: #fff; + --bs-btn-active-bg: rgb(13.6, 36.8, 64.8); + --bs-btn-active-border-color: rgb(12.75, 34.5, 60.75); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #000; - --bs-btn-disabled-bg: #2a85b3; - --bs-btn-disabled-border-color: #2a85b3; + --bs-btn-disabled-color: #fff; + --bs-btn-disabled-bg: #112e51; + --bs-btn-disabled-border-color: #112e51; } .btn-secondary { @@ -2850,19 +2850,19 @@ textarea.form-control-lg { } .btn-outline-primary { - --bs-btn-color: #2a85b3; - --bs-btn-border-color: #2a85b3; - --bs-btn-hover-color: #000; - --bs-btn-hover-bg: #2a85b3; - --bs-btn-hover-border-color: #2a85b3; - --bs-btn-focus-shadow-rgb: 42, 133, 179; - --bs-btn-active-color: #000; - --bs-btn-active-bg: #2a85b3; - --bs-btn-active-border-color: #2a85b3; + --bs-btn-color: #112e51; + --bs-btn-border-color: #112e51; + --bs-btn-hover-color: #fff; + --bs-btn-hover-bg: #112e51; + --bs-btn-hover-border-color: #112e51; + --bs-btn-focus-shadow-rgb: 17, 46, 81; + --bs-btn-active-color: #fff; + --bs-btn-active-bg: #112e51; + --bs-btn-active-border-color: #112e51; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #2a85b3; + --bs-btn-disabled-color: #112e51; --bs-btn-disabled-bg: transparent; - --bs-btn-disabled-border-color: #2a85b3; + --bs-btn-disabled-border-color: #112e51; --bs-gradient: none; } @@ -2997,7 +2997,7 @@ textarea.form-control-lg { --bs-btn-disabled-color: #6c757d; --bs-btn-disabled-border-color: transparent; --bs-btn-box-shadow: 0 0 0 #000; - --bs-btn-focus-shadow-rgb: 36, 113, 152; + --bs-btn-focus-shadow-rgb: 53, 77, 107; text-decoration: underline; } .btn-link:focus-visible { @@ -3261,8 +3261,8 @@ textarea.form-control-lg { --bs-accordion-btn-icon-width: 1.25rem; --bs-accordion-btn-icon-transform: rotate(-180deg); --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out; - --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%2816.8, 53.2, 71.6%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); - --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(42, 133, 179, 0.25); + --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%286.8, 18.4, 32.4%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); + --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(17, 46, 81, 0.25); --bs-accordion-body-padding-x: 1.25rem; --bs-accordion-body-padding-y: 1rem; --bs-accordion-active-color: var(--bs-primary-text-emphasis); @@ -3378,8 +3378,8 @@ textarea.form-control-lg { } [data-bs-theme=dark] .accordion-button::after { - --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28127.2, 181.8, 209.4%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e"); - --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28127.2, 181.8, 209.4%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e"); + --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28112.2, 129.6, 150.6%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e"); + --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28112.2, 129.6, 150.6%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e"); } .alert { @@ -3482,7 +3482,7 @@ textarea.form-control-lg { --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e"); --bs-btn-close-opacity: 0.5; --bs-btn-close-hover-opacity: 0.75; - --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(42, 133, 179, 0.25); + --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(17, 46, 81, 0.25); --bs-btn-close-focus-opacity: 1; --bs-btn-close-disabled-opacity: 0.25; box-sizing: content-box; @@ -3532,7 +3532,7 @@ textarea.form-control-lg { } .text-bg-primary { - color: #000 !important; + color: #fff !important; background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; } @@ -3576,8 +3576,8 @@ textarea.form-control-lg { text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-primary:hover, .link-primary:focus { - color: RGBA(85, 157, 194, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(85, 157, 194, var(--bs-link-underline-opacity, 1)) !important; + color: RGBA(14, 37, 65, var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(14, 37, 65, var(--bs-link-underline-opacity, 1)) !important; } .link-secondary { @@ -9374,7 +9374,7 @@ textarea.form-control-lg { font-weight: 600; padding: 10px 25px; margin-top: 15px !important; - background: #2a85b3 !important; + background: #112e51 !important; } .visually-hidden { @@ -9406,8 +9406,8 @@ textarea.form-control-lg { .customize-link-toggle:focus-visible, .customize-link-toggle:focus { - outline: 3px solid #2a85b3; + outline: 3px solid #112e51; outline-offset: 2px; - box-shadow: 0 0 0 0.15rem rgba(42, 133, 179, 0.5); - background-color: rgba(42, 133, 179, 0.08); + box-shadow: 0 0 0 0.15rem rgba(17, 46, 81, 0.5); + background-color: rgba(17, 46, 81, 0.08); } \ No newline at end of file From 737533bc24744d9988413207a026e9baecedce6e Mon Sep 17 00:00:00 2001 From: Chris Gilligan <49878588+UTCGilligan@users.noreply.github.com> Date: Mon, 5 Jan 2026 09:02:52 -0500 Subject: [PATCH 6/6] UTCT-228: Correct form tabindex order. Signed-off-by: Chris Gilligan <49878588+UTCGilligan@users.noreply.github.com> --- frontend/header.php | 6 ++++-- index.php | 7 +++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/frontend/header.php b/frontend/header.php index 025720b..9ede818 100644 --- a/frontend/header.php +++ b/frontend/header.php @@ -43,6 +43,7 @@ border-color: ; } + + diff --git a/index.php b/index.php index eabdd4f..2fabe2c 100644 --- a/index.php +++ b/index.php @@ -155,7 +155,7 @@ class="btn btn-primary text-uppercase py-2 px-5 mt-2 mt-md-0" id="url" class="form-control text-uppercase" placeholder="PASTE URL, SHORTEN and SHARE" - aria-label="Paste a URL to shorten and share" + aria-label="Paste a long URL to shorten" aria-describedby="shorten-button" required tabindex="1" @@ -165,7 +165,7 @@ class="btn btn-primary text-uppercase py-2 px-4 mt-2 mt-md-0" type="submit" id="shorten-button" value="Shorten" - tabindex="3" + tabindex="4" />
@@ -194,14 +194,13 @@ class="btn btn-sm btn-white text-black-50 text-uppercase customize-link-toggle" class="form-control form-control-sm text-uppercase" placeholder="CUSTOM URL" aria-label="Custom URL keyword" - tabindex="4" + tabindex="3" > -