From 4e483ca5c9e9cf50a69535401dbde2f44d7fadb5 Mon Sep 17 00:00:00 2001 From: Ludy Date: Mon, 7 Jul 2025 11:02:59 +0200 Subject: [PATCH] fix(css): correct spelling of separator in navbar and theme CSS (#3888) # Description of Changes **What was changed** - Corrected the spelling of the CSS variable `--md-nav-color-on-separator` (previously misspelled as `--md-nav-color-on-seperator`) across `navbar.css`, `theme.dark.css`, and `theme.light.css`. Adjusted related CSS comments and formatting for consistency. Updated HTML templates (`fragments/navbar.html` and `home.html`) to reference the corrected variable. **Why the change was made** - To resolve styling inconsistencies and prevent potential runtime errors caused by the typo. --- ## Checklist ### General - [x] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [x] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [x] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing) for more details. --- .../src/main/resources/static/css/navbar.css | 21 ++- .../resources/static/css/theme/theme.dark.css | 156 +++++++++--------- .../static/css/theme/theme.light.css | 4 +- .../resources/templates/fragments/navbar.html | 2 +- .../src/main/resources/templates/home.html | 2 +- 5 files changed, 95 insertions(+), 90 deletions(-) diff --git a/stirling-pdf/src/main/resources/static/css/navbar.css b/stirling-pdf/src/main/resources/static/css/navbar.css index 018727776..4e562bc3b 100644 --- a/stirling-pdf/src/main/resources/static/css/navbar.css +++ b/stirling-pdf/src/main/resources/static/css/navbar.css @@ -86,7 +86,8 @@ .scalable-languages-container { display: grid; - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Auto-fill columns, with a minimum width of 180px */ + /* Auto-fill columns, with a minimum width of 180px */ + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .scalable-languages-container:not(:has(> :nth-child(4))) .lang-dropdown-item-wrapper:last-child { @@ -106,15 +107,15 @@ } html[dir="ltr"] .lang-dropdown-item-wrapper { - border-right: 2px solid var(--md-nav-color-on-seperator); + border-right: 2px solid var(--md-nav-color-on-separator); } html[dir="rtl"] .lang-dropdown-item-wrapper { - border-left: 2px solid var(--md-nav-color-on-seperator); + border-left: 2px solid var(--md-nav-color-on-separator); } /* Responsive adjustments */ -@media (min-width: 1200px){ +@media (min-width: 1200px) { .lang-dropdown-item-wrapper .dropdown-item { min-width: 200px } @@ -124,9 +125,11 @@ html[dir="rtl"] .lang-dropdown-item-wrapper { .scalable-languages-container { grid-template-columns: repeat(2, 1fr); } - .scalable-languages-container:not(:has(> :nth-child(2))){ + + .scalable-languages-container:not(:has(> :nth-child(2))) { grid-template-columns: repeat(var(--count), 1fr) !important; } + .scalable-languages-container .lang-dropdown-item-wrapper:nth-child(2n) { border: 0px } @@ -136,9 +139,11 @@ html[dir="rtl"] .lang-dropdown-item-wrapper { .scalable-languages-container { grid-template-columns: repeat(3, 1fr); } - .scalable-languages-container:not(:has(> :nth-child(3))){ + + .scalable-languages-container:not(:has(> :nth-child(3))) { grid-template-columns: repeat(var(--count), 1fr) !important; } + .scalable-languages-container .lang-dropdown-item-wrapper:nth-child(3n) { border: 0px } @@ -149,12 +154,12 @@ html[dir="rtl"] .lang-dropdown-item-wrapper { grid-template-columns: repeat(4, 1fr); } - .scalable-languages-container:not(:has(> :nth-child(4))){ + .scalable-languages-container:not(:has(> :nth-child(4))) { grid-template-columns: repeat(var(--count), 1fr) !important; } .scalable-languages-container .lang-dropdown-item-wrapper:nth-child(4n) { - border: 0px + border: 0px } } diff --git a/stirling-pdf/src/main/resources/static/css/theme/theme.dark.css b/stirling-pdf/src/main/resources/static/css/theme/theme.dark.css index be1a1431e..411c8f14c 100644 --- a/stirling-pdf/src/main/resources/static/css/theme/theme.dark.css +++ b/stirling-pdf/src/main/resources/static/css/theme/theme.dark.css @@ -1,79 +1,79 @@ :root { - /* Colors */ - --md-sys-color-primary: rgb(162 201 255); - --md-sys-color-surface-tint: rgb(162 201 255); - --md-sys-color-on-primary: rgb(0 49 92); - --md-sys-color-primary-container: rgb(0 118 208); - --md-sys-color-on-primary-container: rgb(255 255 255); - --md-sys-color-secondary: rgb(169 201 246); - --md-sys-color-on-secondary: rgb(12 49 87); - --md-sys-color-secondary-container: rgb(29 62 100); - --md-sys-color-on-secondary-container: rgb(180 210 255); - --md-sys-color-tertiary: rgb(193 194 248); - --md-sys-color-on-tertiary: rgb(42 44 88); - --md-sys-color-tertiary-container: rgb(110 112 161); - --md-sys-color-on-tertiary-container: rgb(255 255 255); - --md-sys-color-error: rgb(255 180 171); - --md-sys-color-on-error: rgb(105 0 5); - --md-sys-color-error-container: rgb(147 0 10); - --md-sys-color-on-error-container: rgb(255 218 214); - --md-sys-color-background: rgb(15 20 26); - --md-sys-color-on-background: rgb(223 226 235); - --md-sys-color-surface: rgb(15 20 26); - --md-sys-color-on-surface: rgb(223 226 235); - --md-sys-color-surface-variant: rgb(64 71 83); - --md-sys-color-on-surface-variant: rgb(192 199 213); - --md-sys-color-outline: rgb(138 145 158); - --md-sys-color-outline-variant: rgb(64 71 83); - --md-sys-color-shadow: rgb(0 0 0); - --md-sys-color-scrim: rgb(0 0 0); - --md-sys-color-inverse-surface: rgb(223 226 235); - --md-sys-color-inverse-on-surface: rgb(45 49 55); - --md-sys-color-inverse-primary: rgb(0 96 170); - --md-sys-color-primary-fixed: rgb(211 228 255); - --md-sys-color-on-primary-fixed: rgb(0 28 56); - --md-sys-color-primary-fixed-dim: rgb(162 201 255); - --md-sys-color-on-primary-fixed-variant: rgb(0 72 130); - --md-sys-color-secondary-fixed: rgb(211 228 255); - --md-sys-color-on-secondary-fixed: rgb(0 28 56); - --md-sys-color-secondary-fixed-dim: rgb(169 201 246); - --md-sys-color-on-secondary-fixed-variant: rgb(40 72 111); - --md-sys-color-tertiary-fixed: rgb(225 224 255); - --md-sys-color-on-tertiary-fixed: rgb(20 22 66); - --md-sys-color-tertiary-fixed-dim: rgb(193 194 248); - --md-sys-color-on-tertiary-fixed-variant: rgb(64 67 112); - --md-sys-color-surface-dim: rgb(15 20 26); - --md-sys-color-surface-bright: rgb(53 57 64); - --md-sys-color-surface-container-lowest: rgb(10 14 20); - --md-sys-color-surface-container-low: rgb(24 28 34); - --md-sys-color-surface-container: rgb(28 32 38); - --md-sys-color-surface-container-high: rgb(38 42 49); - --md-sys-color-surface-container-highest: rgb(49 53 60); - /* Tools Color */ - --md-nav-section-color-opacity: 1; - --md-nav-on-section-color-opacity: 1; - --md-nav-section-color-sign: rgba(25, 101, 212, var(--md-nav-section-color-opacity)); - --md-nav-on-section-color-sign: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); - --md-nav-section-color-organize: rgba(120, 130, 255, var(--md-nav-section-color-opacity)); - --md-nav-on-section-color-organize: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); - --md-nav-section-color-convert: rgba(25, 177, 212, var(--md-nav-section-color-opacity)); - --md-nav-on-section-color-convert: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); - --md-nav-section-color-convertto: rgba(104, 220, 149, var(--md-nav-section-color-opacity)); - --md-nav-on-section-color-convertto: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); - --md-nav-section-color-security: rgba(255, 120, 146, var(--md-nav-section-color-opacity)); - --md-nav-on-section-color-security: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); - --md-nav-section-color-other: rgba(72, 189, 84, var(--md-nav-section-color-opacity)); - --md-nav-on-section-color-other: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); - --md-nav-section-color-advance: rgba(245, 84, 84, var(--md-nav-section-color-opacity)); - --md-nav-on-section-color-advance: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); - --md-nav-section-color-image: rgba(212, 172, 25, var(--md-nav-section-color-opacity)); - --md-nav-on-section-color-image: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); - --md-nav-section-color-word: rgba(61, 153, 245, var(--md-nav-section-color-opacity)); - --md-nav-on-section-color-word: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); - --md-nav-section-color-ppt: rgba(255, 128, 0, var(--md-nav-section-color-opacity)); - --md-nav-on-section-color-ppt: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); - --md-nav-color-on-seperator: rgb(24 28 34); - --md-nav-background: rgb(15 20 26); - --favourite-add: #9ed18c; - --favourite-remove: palevioletred; -} + /* Colors */ + --md-sys-color-primary: rgb(162 201 255); + --md-sys-color-surface-tint: rgb(162 201 255); + --md-sys-color-on-primary: rgb(0 49 92); + --md-sys-color-primary-container: rgb(0 118 208); + --md-sys-color-on-primary-container: rgb(255 255 255); + --md-sys-color-secondary: rgb(169 201 246); + --md-sys-color-on-secondary: rgb(12 49 87); + --md-sys-color-secondary-container: rgb(29 62 100); + --md-sys-color-on-secondary-container: rgb(180 210 255); + --md-sys-color-tertiary: rgb(193 194 248); + --md-sys-color-on-tertiary: rgb(42 44 88); + --md-sys-color-tertiary-container: rgb(110 112 161); + --md-sys-color-on-tertiary-container: rgb(255 255 255); + --md-sys-color-error: rgb(255 180 171); + --md-sys-color-on-error: rgb(105 0 5); + --md-sys-color-error-container: rgb(147 0 10); + --md-sys-color-on-error-container: rgb(255 218 214); + --md-sys-color-background: rgb(15 20 26); + --md-sys-color-on-background: rgb(223 226 235); + --md-sys-color-surface: rgb(15 20 26); + --md-sys-color-on-surface: rgb(223 226 235); + --md-sys-color-surface-variant: rgb(64 71 83); + --md-sys-color-on-surface-variant: rgb(192 199 213); + --md-sys-color-outline: rgb(138 145 158); + --md-sys-color-outline-variant: rgb(64 71 83); + --md-sys-color-shadow: rgb(0 0 0); + --md-sys-color-scrim: rgb(0 0 0); + --md-sys-color-inverse-surface: rgb(223 226 235); + --md-sys-color-inverse-on-surface: rgb(45 49 55); + --md-sys-color-inverse-primary: rgb(0 96 170); + --md-sys-color-primary-fixed: rgb(211 228 255); + --md-sys-color-on-primary-fixed: rgb(0 28 56); + --md-sys-color-primary-fixed-dim: rgb(162 201 255); + --md-sys-color-on-primary-fixed-variant: rgb(0 72 130); + --md-sys-color-secondary-fixed: rgb(211 228 255); + --md-sys-color-on-secondary-fixed: rgb(0 28 56); + --md-sys-color-secondary-fixed-dim: rgb(169 201 246); + --md-sys-color-on-secondary-fixed-variant: rgb(40 72 111); + --md-sys-color-tertiary-fixed: rgb(225 224 255); + --md-sys-color-on-tertiary-fixed: rgb(20 22 66); + --md-sys-color-tertiary-fixed-dim: rgb(193 194 248); + --md-sys-color-on-tertiary-fixed-variant: rgb(64 67 112); + --md-sys-color-surface-dim: rgb(15 20 26); + --md-sys-color-surface-bright: rgb(53 57 64); + --md-sys-color-surface-container-lowest: rgb(10 14 20); + --md-sys-color-surface-container-low: rgb(24 28 34); + --md-sys-color-surface-container: rgb(28 32 38); + --md-sys-color-surface-container-high: rgb(38 42 49); + --md-sys-color-surface-container-highest: rgb(49 53 60); + /* Tools Color */ + --md-nav-section-color-opacity: 1; + --md-nav-on-section-color-opacity: 1; + --md-nav-section-color-sign: rgba(25, 101, 212, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-sign: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-organize: rgba(120, 130, 255, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-organize: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-convert: rgba(25, 177, 212, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-convert: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-convertto: rgba(104, 220, 149, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-convertto: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-security: rgba(255, 120, 146, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-security: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-other: rgba(72, 189, 84, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-other: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-advance: rgba(245, 84, 84, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-advance: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-image: rgba(212, 172, 25, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-image: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-word: rgba(61, 153, 245, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-word: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-ppt: rgba(255, 128, 0, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-ppt: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); + --md-nav-color-on-separator: rgb(24 28 34); + --md-nav-background: rgb(15 20 26); + --favourite-add: #9ed18c; + --favourite-remove: palevioletred; +} \ No newline at end of file diff --git a/stirling-pdf/src/main/resources/static/css/theme/theme.light.css b/stirling-pdf/src/main/resources/static/css/theme/theme.light.css index 269ccd68b..f4bfc4065 100644 --- a/stirling-pdf/src/main/resources/static/css/theme/theme.light.css +++ b/stirling-pdf/src/main/resources/static/css/theme/theme.light.css @@ -72,8 +72,8 @@ --md-nav-on-section-color-word: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity)); --md-nav-section-color-ppt: rgba(255, 128, 0, var(--md-nav-section-color-opacity)); --md-nav-on-section-color-ppt: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity)); - --md-nav-color-on-seperator: rgb(174, 178, 179); + --md-nav-color-on-separator: rgb(174, 178, 179); --md-nav-background: rgb(248 249 255); --favourite-add: #25ab6c; --favourite-remove: rgb(222, 94, 137); -} +} \ No newline at end of file diff --git a/stirling-pdf/src/main/resources/templates/fragments/navbar.html b/stirling-pdf/src/main/resources/templates/fragments/navbar.html index bf7d3707e..f6f707211 100644 --- a/stirling-pdf/src/main/resources/templates/fragments/navbar.html +++ b/stirling-pdf/src/main/resources/templates/fragments/navbar.html @@ -22,7 +22,7 @@ background: var(--md-nav-background); border-bottom-style: solid; border-bottom-width: 1px; - border-color: var(--md-nav-color-on-seperator)"> + border-color: var(--md-nav-color-on-separator)">
icon diff --git a/stirling-pdf/src/main/resources/templates/home.html b/stirling-pdf/src/main/resources/templates/home.html index e93ab8ebe..4415a0a8f 100644 --- a/stirling-pdf/src/main/resources/templates/home.html +++ b/stirling-pdf/src/main/resources/templates/home.html @@ -102,7 +102,7 @@