diff --git a/frontend/assets/sass/styles.scss b/frontend/assets/sass/styles.scss index ba33b05..6ee2990 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: #112e51 !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,13 +95,46 @@ $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; + 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 $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 4422acd..315a778 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: #112e51; --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: 17, 46, 81; --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(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(206.6, 226, 254.6); + --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(158.2, 197, 254.2); + --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: #0d6efd; - --bs-link-color-rgb: 13, 110, 253; + --bs-link-color: #112e51; + --bs-link-color-rgb: 17, 46, 81; --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(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(13, 110, 253, 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(109.8, 168, 253.8); + --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(2.6, 22, 50.6); + --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(7.8, 66, 151.8); + --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(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(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(134, 182.5, 254); + border-color: rgb(136, 150.5, 168); outline: 0; - box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 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(134, 182.5, 254); + border-color: rgb(136, 150.5, 168); outline: 0; - box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 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(134, 182.5, 254); + border-color: rgb(136, 150.5, 168); outline: 0; - box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); + box-shadow: 0 0 0 0.25rem rgba(17, 46, 81, 0.25); } .form-check-input:checked { - background-color: #0d6efd; - border-color: #0d6efd; + 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: #0d6efd; - border-color: #0d6efd; + 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%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%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(13, 110, 253, 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(13, 110, 253, 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: #0d6efd; + 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(182.4, 211.5, 254.4); + 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: #0d6efd; + 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(182.4, 211.5, 254.4); + background-color: rgb(183.6, 192.3, 202.8); } .form-range::-moz-range-track { width: 100%; @@ -2715,19 +2715,19 @@ textarea.form-control-lg { .btn-primary { --bs-btn-color: #fff; - --bs-btn-bg: #0d6efd; - --bs-btn-border-color: #0d6efd; + --bs-btn-bg: #112e51; + --bs-btn-border-color: #112e51; --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-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(10.4, 88, 202.4); - --bs-btn-active-border-color: rgb(9.75, 82.5, 189.75); + --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: #fff; - --bs-btn-disabled-bg: #0d6efd; - --bs-btn-disabled-border-color: #0d6efd; + --bs-btn-disabled-bg: #112e51; + --bs-btn-disabled-border-color: #112e51; } .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-color: #112e51; + --bs-btn-border-color: #112e51; --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-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: #0d6efd; - --bs-btn-active-border-color: #0d6efd; + --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: #0d6efd; + --bs-btn-disabled-color: #112e51; --bs-btn-disabled-bg: transparent; - --bs-btn-disabled-border-color: #0d6efd; + --bs-btn-disabled-border-color: #112e51; --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: 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%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%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%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%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(13, 110, 253, 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; @@ -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(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 { @@ -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 { @@ -9370,26 +9370,44 @@ textarea.form-control-lg { 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; +.login input.button { + font-weight: 600; + padding: 10px 25px; + margin-top: 15px !important; + background: #112e51 !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; } -.skip-link:focus { - outline: 3px solid #ffc107; +.customize-link-toggle { + transition: box-shadow 0.15s ease, outline 0.15s ease, background-color 0.15s ease; } -/* Highlight the "Customize Link" toggle when it has keyboard focus */ -.btn.btn-link:focus, -.btn.btn-link:focus-visible { - outline: 3px solid #ffc107 !important; +.customize-link-toggle:focus-visible, +.customize-link-toggle:focus { + outline: 3px solid #112e51; outline-offset: 2px; - box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5) !important; + 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 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/frontend/header.php b/frontend/header.php index 034b65e..9ede818 100644 --- a/frontend/header.php +++ b/frontend/header.php @@ -9,7 +9,7 @@ - + <?php echo title ?> @@ -43,4 +43,23 @@ border-color: ; } + + + diff --git a/index.php b/index.php index 51f7c1f..2fabe2c 100644 --- a/index.php +++ b/index.php @@ -84,79 +84,140 @@ 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): ?> - -
-
+