From 95606899cd70562f5879d60e9049daa4f9edb2e8 Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Fri, 19 Dec 2025 17:18:51 +0100 Subject: [PATCH 01/13] Fix button size inconsistency for sharing and action menu buttons Enforce consistent 40x40px dimensions for sharing popup and three-dot menu buttons in file list by adding !important flags and min-width/min-height constraints to prevent size changes during user interactions. --- css/apps/files.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/css/apps/files.scss b/css/apps/files.scss index a876266..904643a 100644 --- a/css/apps/files.scss +++ b/css/apps/files.scss @@ -1003,8 +1003,10 @@ table.files-filestable { margin: 0; border: none; border-radius: 50%; - width: 40px; - height: 40px; + width: 40px !important; + height: 40px !important; + min-width: 40px !important; + min-height: 40px !important; box-sizing: border-box; display: flex; align-items: center; @@ -1062,8 +1064,10 @@ table.files-filestable { button.action-item__menutoggle { border: none; border-radius: 50%; - width: 40px; - height: 40px; + width: 40px !important; + height: 40px !important; + min-width: 40px !important; + min-height: 40px !important; box-sizing: border-box; display: flex; align-items: center; From cc4048353a2b09bd8f59e9eef8456a6d61c0c90f Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Tue, 6 Jan 2026 17:41:05 +0100 Subject: [PATCH 02/13] Update sharing button and action menu styling - Change sharing button to transparent background with border in normal state - Add white border and icon in dark mode - Update hover state with blue background and different colors for light/dark modes - Add pressed state with blue pressed color - Configure active/existing share state with primary blue - Update focus state with colored outline rings (black for light mode, white for dark mode) - Ensure action menu dots icon stays black in both modes --- css/apps/files.scss | 61 +++++++++++++++++++++++++++++++++-- css/components/ncactions.scss | 3 ++ 2 files changed, 61 insertions(+), 3 deletions(-) diff --git a/css/apps/files.scss b/css/apps/files.scss index 904643a..178fe4d 100644 --- a/css/apps/files.scss +++ b/css/apps/files.scss @@ -1001,7 +1001,7 @@ table.files-filestable { &.files-list__row-action-sharing-popup { direction: rtl; margin: 0; - border: none; + border: 1px solid var(--telekom-color-ui-black); border-radius: 50%; width: 40px !important; height: 40px !important; @@ -1011,7 +1011,7 @@ table.files-filestable { display: flex; align-items: center; justify-content: center; - background-color: var(--nmc-ods-blue-primary); + background-color: transparent; .button-vue__icon { background-image: var(--icon-shared-dark); @@ -1021,14 +1021,57 @@ table.files-filestable { filter: brightness(0); } + [data-themes*=dark] & { + border-color: var(--telekom-color-ui-white); + + .button-vue__icon { + filter: brightness(0) invert(1); + } + } + &:hover { border: none; background-color: var(--nmc-ods-blue-active); + + .button-vue__icon { + filter: brightness(0); + } + + [data-themes*=dark] & { + background-color: var(--nmc-ods-blue-hover); + } } &:active { - border: 1px solid var(--telekom-color-ui-black); + border: none; background-color: var(--nmc-ods-blue-pressed); + + .button-vue__icon { + filter: brightness(0); + } + + [data-themes*=dark] & { + .button-vue__icon { + filter: brightness(0); + } + } + } + + // Active/existing share state + &.active, + &[aria-pressed="true"] { + border: none; + background-color: var(--nmc-ods-blue-primary); + + .button-vue__icon { + filter: brightness(0); + } + + [data-themes*=dark] & { + .button-vue__icon { + filter: brightness(0); + } + } } &:focus, @@ -1037,6 +1080,18 @@ table.files-filestable { background-color: var(--nmc-ods-blue-primary); outline: 2px solid var(--telekom-color-ui-black); outline-offset: 2px; + + .button-vue__icon { + filter: brightness(0); + } + + [data-themes*=dark] & { + outline-color: var(--telekom-color-ui-white); + + .button-vue__icon { + filter: brightness(0); + } + } } &.button-vue--icon-and-text[aria-label="Mit mir geteilt"] .button-vue__icon, diff --git a/css/components/ncactions.scss b/css/components/ncactions.scss index 5a11bcf..43f3d53 100644 --- a/css/components/ncactions.scss +++ b/css/components/ncactions.scss @@ -5,6 +5,9 @@ --open-background-color: initial; .button-vue { + svg { + color: var(--telekom-color-ui-black); + } &:hover:not(:disabled) { background-color: initial; From a0a06ee9157b3e3009e058875bc4953b2f27eddd Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Tue, 6 Jan 2026 17:51:19 +0100 Subject: [PATCH 03/13] Apply consistent styling to action menu toggle button - Update action menu toggle button to match sharing button styling - Add transparent background with border for normal state - Configure different colors for light and dark modes across all states - Implement hover, pressed, active, and focus states with appropriate colors - Ensure icons remain black in interactive states for both themes --- css/apps/files.scss | 77 ++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 69 insertions(+), 8 deletions(-) diff --git a/css/apps/files.scss b/css/apps/files.scss index 178fe4d..84ce463 100644 --- a/css/apps/files.scss +++ b/css/apps/files.scss @@ -1117,7 +1117,7 @@ table.files-filestable { // ... action menu div.action-item { button.action-item__menutoggle { - border: none; + border: 1px solid var(--telekom-color-ui-black); border-radius: 50%; width: 40px !important; height: 40px !important; @@ -1127,20 +1127,73 @@ table.files-filestable { display: flex; align-items: center; justify-content: center; - background-color: var(--nmc-ods-blue-primary); + background-color: transparent; + + svg { + width: 16px; + height: 16px; + color: var(--telekom-color-ui-black); + } + + // Dark mode normal state + [data-themes*=dark] & { + border-color: var(--telekom-color-ui-white); + + svg { + color: var(--telekom-color-ui-white); + } + } &:hover { border: none; background-color: var(--nmc-ods-blue-active); svg { - color: var(--color-main-text); + color: var(--telekom-color-ui-black); + } + + // Dark mode hover + [data-themes*=dark] & { + background-color: var(--nmc-ods-blue-hover); + + svg { + color: var(--telekom-color-ui-black); + } } } &:active { - border: 1px solid var(--telekom-color-ui-black); + border: none; background-color: var(--nmc-ods-blue-pressed); + + svg { + color: var(--telekom-color-ui-black); + } + + // Dark mode pressed + [data-themes*=dark] & { + svg { + color: var(--telekom-color-ui-black); + } + } + } + + // Active/existing state + &.active, + &[aria-pressed="true"] { + border: none; + background-color: var(--nmc-ods-blue-primary); + + svg { + color: var(--telekom-color-ui-black); + } + + // Dark mode active + [data-themes*=dark] & { + svg { + color: var(--telekom-color-ui-black); + } + } } &:focus, @@ -1149,11 +1202,19 @@ table.files-filestable { background-color: var(--nmc-ods-blue-primary); outline: 2px solid var(--telekom-color-ui-black); outline-offset: 2px; - } - svg { - width: 16px; - height: 16px; + svg { + color: var(--telekom-color-ui-black); + } + + // Dark mode focus + [data-themes*=dark] & { + outline-color: var(--telekom-color-ui-white); + + svg { + color: var(--telekom-color-ui-black); + } + } } } } From 04b45f9c09e768b06aece679064b43b28753ac22 Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Tue, 6 Jan 2026 18:31:35 +0100 Subject: [PATCH 04/13] Update folder icon size to 45x36 pixels --- css/apps/files.scss | 40 ++++++++++++++++++++++++++++++---------- 1 file changed, 30 insertions(+), 10 deletions(-) diff --git a/css/apps/files.scss b/css/apps/files.scss index 84ce463..1ba0a73 100644 --- a/css/apps/files.scss +++ b/css/apps/files.scss @@ -626,11 +626,21 @@ table.files-filestable { height: calc(100% - 2 * 14px); position: absolute; - &.folder-icon svg, - &.folder-open-icon svg { - width: 44px; - height: 44px; - color: var(--nmc-ods-blue-active); + &.folder-icon, + &.folder-open-icon { + width: 45px; + height: 36px; + + svg { + width: 45px; + height: 36px; + color: var(--nmc-ods-blue-active); + + path { + transform: scale(1.5, 1.5); + transform-origin: center; + } + } } &.files-list__row-icon-overlay { @@ -827,11 +837,21 @@ table.files-filestable { .material-design-icon:not(.play-circle-icon) { @include thumbnail-icons(); - &.folder-icon svg, - &.folder-open-icon svg { - width: 44px; - height: 44px; - color: var(--nmc-ods-blue-active); + &.folder-icon, + &.folder-open-icon { + width: 45px; + height: 36px; + + svg { + width: 45px; + height: 36px; + color: var(--nmc-ods-blue-active); + + path { + transform: scale(1.5, 1.5); + transform-origin: center; + } + } } &.files-list__row-icon-overlay { From dcd50ff50161245775ed73d94850669039ca2d72 Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Tue, 6 Jan 2026 20:56:04 +0100 Subject: [PATCH 05/13] wip: replace inline SVG icons in action buttons with custom icons - Hide inline SVGs with hardcoded colors in action buttons - Apply custom file type icons for each button based on position - Replace checkmark with folder icon for selected state - Ensure icons adapt to light/dark theme --- css/components/ncactions.scss | 74 +++++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) diff --git a/css/components/ncactions.scss b/css/components/ncactions.scss index 43f3d53..513d196 100644 --- a/css/components/ncactions.scss +++ b/css/components/ncactions.scss @@ -476,4 +476,78 @@ } } } +} + +// Replace inline SVG icons in action buttons with custom icons +li.action button.action-button { + // Target only the left icon, not the pressed icon on the right + .icon-vue:not(.action-button__pressed-icon) { + background-position: center; + background-repeat: no-repeat; + background-size: 24px; + + // Hide inline SVGs only in the icon area (left side) + svg { + display: none !important; + } + } + + // Replace checkmark with folder icon on the right side + .action-button__pressed-icon { + background-position: center; + background-repeat: no-repeat; + background-size: 20px; + + svg { + display: none !important; + } + } +} + +// Show folder icon on the right side only when button is actually checked/selected +li.action button.action-button[aria-checked="true"] { + .action-button__pressed-icon { + background-image: var(--icon-folder-dark) !important; + } +} + +// Assign different icons to each button based on position (left side only) +// Documents (1st button) +li.action:nth-child(1) button.action-button .icon-vue:not(.action-button__pressed-icon) { + background-image: var(--icon-filetype-document-dark) !important; +} + +// Spreadsheets (2nd button) +li.action:nth-child(2) button.action-button .icon-vue:not(.action-button__pressed-icon) { + background-image: var(--icon-filetype-spreadsheet-dark) !important; +} + +// Presentations (3rd button) +li.action:nth-child(3) button.action-button .icon-vue:not(.action-button__pressed-icon) { + background-image: var(--icon-filetype-presentation-dark) !important; +} + +// PDFs (4th button) +li.action:nth-child(4) button.action-button .icon-vue:not(.action-button__pressed-icon) { + background-image: var(--icon-filetype-pdf-dark) !important; +} + +// Folders (5th button) +li.action:nth-child(5) button.action-button .icon-vue:not(.action-button__pressed-icon) { + background-image: var(--icon-folder-dark) !important; +} + +// Audio (6th button) +li.action:nth-child(6) button.action-button .icon-vue:not(.action-button__pressed-icon) { + background-image: var(--icon-filetype-audio-dark) !important; +} + +// Images (7th button) +li.action:nth-child(7) button.action-button .icon-vue:not(.action-button__pressed-icon) { + background-image: var(--icon-filetype-image-dark) !important; +} + +// Videos (8th button) +li.action:nth-child(8) button.action-button .icon-vue:not(.action-button__pressed-icon) { + background-image: var(--icon-filetype-video-dark) !important; } \ No newline at end of file From d651e4d384f957fd35f6d8141508ecbbdfc05c98 Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Wed, 7 Jan 2026 00:23:01 +0100 Subject: [PATCH 06/13] wip: Add custom checkmark and music icons for action buttons - Add custom checkmark.svg to replace default folder icon in selected state - Add custom music.svg to replace default audio file type icon - Update icon generation system to include new custom icons - Update action button styles to use custom icons with proper dark mode support - Replace inline SVG icons with background-image approach for better theming --- css/components/ncactions.scss | 24 ++++++++++++------------ img/actions/checkmark.svg | 3 +++ img/actions/music.svg | 3 +++ src/icons.mjs | 2 ++ 4 files changed, 20 insertions(+), 12 deletions(-) create mode 100644 img/actions/checkmark.svg create mode 100644 img/actions/music.svg diff --git a/css/components/ncactions.scss b/css/components/ncactions.scss index 513d196..77ded93 100644 --- a/css/components/ncactions.scss +++ b/css/components/ncactions.scss @@ -488,7 +488,7 @@ li.action button.action-button { // Hide inline SVGs only in the icon area (left side) svg { - display: none !important; + display: none; } } @@ -499,55 +499,55 @@ li.action button.action-button { background-size: 20px; svg { - display: none !important; + display: none; } } } -// Show folder icon on the right side only when button is actually checked/selected +// Show checkmark icon on the right side only when button is actually checked/selected li.action button.action-button[aria-checked="true"] { .action-button__pressed-icon { - background-image: var(--icon-folder-dark) !important; + background-image: var(--icon-checkmark-dark); } } // Assign different icons to each button based on position (left side only) // Documents (1st button) li.action:nth-child(1) button.action-button .icon-vue:not(.action-button__pressed-icon) { - background-image: var(--icon-filetype-document-dark) !important; + background-image: var(--icon-folder-dark); } // Spreadsheets (2nd button) li.action:nth-child(2) button.action-button .icon-vue:not(.action-button__pressed-icon) { - background-image: var(--icon-filetype-spreadsheet-dark) !important; + background-image: var(--icon-folder-dark); } // Presentations (3rd button) li.action:nth-child(3) button.action-button .icon-vue:not(.action-button__pressed-icon) { - background-image: var(--icon-filetype-presentation-dark) !important; + background-image: var(--icon-folder-dark); } // PDFs (4th button) li.action:nth-child(4) button.action-button .icon-vue:not(.action-button__pressed-icon) { - background-image: var(--icon-filetype-pdf-dark) !important; + background-image: var(--icon-folder-dark); } // Folders (5th button) li.action:nth-child(5) button.action-button .icon-vue:not(.action-button__pressed-icon) { - background-image: var(--icon-folder-dark) !important; + background-image: var(--icon-folder-dark); } // Audio (6th button) li.action:nth-child(6) button.action-button .icon-vue:not(.action-button__pressed-icon) { - background-image: var(--icon-filetype-audio-dark) !important; + background-image: var(--icon-music-dark); } // Images (7th button) li.action:nth-child(7) button.action-button .icon-vue:not(.action-button__pressed-icon) { - background-image: var(--icon-filetype-image-dark) !important; + background-image: var(--icon-folder-dark); } // Videos (8th button) li.action:nth-child(8) button.action-button .icon-vue:not(.action-button__pressed-icon) { - background-image: var(--icon-filetype-video-dark) !important; + background-image: var(--icon-folder-dark); } \ No newline at end of file diff --git a/img/actions/checkmark.svg b/img/actions/checkmark.svg new file mode 100644 index 0000000..c4695ae --- /dev/null +++ b/img/actions/checkmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/actions/music.svg b/img/actions/music.svg new file mode 100644 index 0000000..151a7ec --- /dev/null +++ b/img/actions/music.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons.mjs b/src/icons.mjs index a113ea7..2c5b09f 100644 --- a/src/icons.mjs +++ b/src/icons.mjs @@ -184,6 +184,8 @@ const icons = { 'folder-overlay-lock': path.join(__dirname, '../img', 'actions', 'lock.svg'), 'folder-overlay-share': path.join(__dirname, '../img', 'actions', 'share.svg'), 'visibility-on': path.join(__dirname, '../img', 'actions', 'visibility-on.svg'), + checkmark: path.join(__dirname, '../img', 'actions', 'checkmark.svg'), + music: path.join(__dirname, '../img', 'actions', 'music.svg'), } const iconsColor = { From 4c16dc3bb76a8e03202d8a3065a18dfc9afff509 Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Wed, 7 Jan 2026 00:30:54 +0100 Subject: [PATCH 07/13] Refactor action button icon styles - Move common .icon-vue properties (background positioning, size, svg hiding) to shared block - Consolidate pressed icon styling into single section - Condense nth-child icon assignments to single-line format for better readability - Fix checkmark icon selector to properly target aria-checked state --- css/components/ncactions.scss | 76 +++++++++-------------------------- 1 file changed, 18 insertions(+), 58 deletions(-) diff --git a/css/components/ncactions.scss b/css/components/ncactions.scss index 77ded93..d567613 100644 --- a/css/components/ncactions.scss +++ b/css/components/ncactions.scss @@ -70,7 +70,13 @@ li.action { .icon-vue { + background-position: center; + background-repeat: no-repeat; background-size: 24px; + + svg { + display: none; + } } @@ -478,21 +484,8 @@ } } -// Replace inline SVG icons in action buttons with custom icons +// Pressed icon (right side) styling li.action button.action-button { - // Target only the left icon, not the pressed icon on the right - .icon-vue:not(.action-button__pressed-icon) { - background-position: center; - background-repeat: no-repeat; - background-size: 24px; - - // Hide inline SVGs only in the icon area (left side) - svg { - display: none; - } - } - - // Replace checkmark with folder icon on the right side .action-button__pressed-icon { background-position: center; background-repeat: no-repeat; @@ -502,52 +495,19 @@ li.action button.action-button { display: none; } } -} -// Show checkmark icon on the right side only when button is actually checked/selected -li.action button.action-button[aria-checked="true"] { - .action-button__pressed-icon { + // Show checkmark icon only when button is actually checked/selected + &[aria-checked="true"] .action-button__pressed-icon { background-image: var(--icon-checkmark-dark); } } -// Assign different icons to each button based on position (left side only) -// Documents (1st button) -li.action:nth-child(1) button.action-button .icon-vue:not(.action-button__pressed-icon) { - background-image: var(--icon-folder-dark); -} - -// Spreadsheets (2nd button) -li.action:nth-child(2) button.action-button .icon-vue:not(.action-button__pressed-icon) { - background-image: var(--icon-folder-dark); -} - -// Presentations (3rd button) -li.action:nth-child(3) button.action-button .icon-vue:not(.action-button__pressed-icon) { - background-image: var(--icon-folder-dark); -} - -// PDFs (4th button) -li.action:nth-child(4) button.action-button .icon-vue:not(.action-button__pressed-icon) { - background-image: var(--icon-folder-dark); -} - -// Folders (5th button) -li.action:nth-child(5) button.action-button .icon-vue:not(.action-button__pressed-icon) { - background-image: var(--icon-folder-dark); -} - -// Audio (6th button) -li.action:nth-child(6) button.action-button .icon-vue:not(.action-button__pressed-icon) { - background-image: var(--icon-music-dark); -} - -// Images (7th button) -li.action:nth-child(7) button.action-button .icon-vue:not(.action-button__pressed-icon) { - background-image: var(--icon-folder-dark); -} - -// Videos (8th button) -li.action:nth-child(8) button.action-button .icon-vue:not(.action-button__pressed-icon) { - background-image: var(--icon-folder-dark); -} \ No newline at end of file +// Assign different icons to each button based on position +li.action:nth-child(1) button.action-button .icon-vue:not(.action-button__pressed-icon) { background-image: var(--icon-folder-dark); } // Documents +li.action:nth-child(2) button.action-button .icon-vue:not(.action-button__pressed-icon) { background-image: var(--icon-folder-dark); } // Spreadsheets +li.action:nth-child(3) button.action-button .icon-vue:not(.action-button__pressed-icon) { background-image: var(--icon-folder-dark); } // Presentations +li.action:nth-child(4) button.action-button .icon-vue:not(.action-button__pressed-icon) { background-image: var(--icon-folder-dark); } // PDFs +li.action:nth-child(5) button.action-button .icon-vue:not(.action-button__pressed-icon) { background-image: var(--icon-folder-dark); } // Folders +li.action:nth-child(6) button.action-button .icon-vue:not(.action-button__pressed-icon) { background-image: var(--icon-music-dark); } // Audio +li.action:nth-child(7) button.action-button .icon-vue:not(.action-button__pressed-icon) { background-image: var(--icon-folder-dark); } // Images +li.action:nth-child(8) button.action-button .icon-vue:not(.action-button__pressed-icon) { background-image: var(--icon-folder-dark); } // Videos \ No newline at end of file From dd2f6588ffbfd9971e514f3f6ee29c2e9bb88122 Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Wed, 7 Jan 2026 00:59:56 +0100 Subject: [PATCH 08/13] Replace display:none with fixed width for action button icons Using width/height instead of display:none allows the element to act as padding spacing for buttons without icons. This provides consistent button layout while maintaining the ability to control spacing. --- css/components/ncactions.scss | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/css/components/ncactions.scss b/css/components/ncactions.scss index d567613..a12b913 100644 --- a/css/components/ncactions.scss +++ b/css/components/ncactions.scss @@ -47,19 +47,13 @@ cursor: pointer; } + // This acts as padding for the button since there is no icon displayed. + // If display: none is used, padding cannot be applied to this element. .action-button__icon { - display: none; - - svg path { - fill: var(--telekom-color-ui-black); - } + width: 16px; + height: 16px; } - .icon-vue { - svg path { - fill: var(--telekom-color-ui-black); - } - } } li.action-separator, From 7653865d43f0ebcaf653e7694979d4f58487d0ee Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Wed, 7 Jan 2026 01:41:06 +0100 Subject: [PATCH 09/13] WIP: Update share dropdown text and icon colors to blue Changed the quick share options dropdown button styling: - Updated text color from #2E466A to #2238DF - Replaced CSS filter approach with mask property for eye and calendar icons - Icons now use CSS mask with background-color for consistent color rendering across light and dark themes --- css/apps/sharing.scss | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/css/apps/sharing.scss b/css/apps/sharing.scss index 055b803..98c9852 100644 --- a/css/apps/sharing.scss +++ b/css/apps/sharing.scss @@ -293,18 +293,16 @@ body .icon-upload-to-cloud, body .icon-upload-to-cloud-dark { // Quick share options dropdown button .share-select button.trigger-text { - color: #2E466A; + color: #2238DF; font-weight: 400; .eye-circle-outline-icon { width: 16px; height: 16px; display: inline-block; - background-image: var(--icon-visibility-on-dark); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - filter: invert(20%) sepia(19%) saturate(1540%) hue-rotate(182deg) brightness(95%) contrast(88%); + background-color: #2238DF; + mask: var(--icon-visibility-on-dark) no-repeat center; + mask-size: contain; svg { display: none !important; @@ -315,11 +313,9 @@ body .icon-upload-to-cloud, body .icon-upload-to-cloud-dark { width: 16px; height: 16px; display: inline-block; - background-image: var(--icon-calendar-dark); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - filter: invert(20%) sepia(19%) saturate(1540%) hue-rotate(182deg) brightness(95%) contrast(88%); + background-color: #2238DF; + mask: var(--icon-calendar-dark) no-repeat center; + mask-size: contain; svg { display: none !important; From aeea2b4666f9ac493158d818254eda3840ac23e5 Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Wed, 7 Jan 2026 02:39:23 +0100 Subject: [PATCH 10/13] Update button text color to black for better contrast Changed the 'Create new link' button text color to use --telekom-color-ui-black for improved readability and consistency with design system standards. --- css/apps/sharing.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/css/apps/sharing.scss b/css/apps/sharing.scss index 98c9852..f16932e 100644 --- a/css/apps/sharing.scss +++ b/css/apps/sharing.scss @@ -275,13 +275,14 @@ body .icon-upload-to-cloud, body .icon-upload-to-cloud-dark { .button-vue--vue-primary { background-color: var(--nmc-ods-blue-primary); border-radius: var(--telekom-radius-pill); - color: var(--telekom-color-text-and-icon-standard) + color: var(--telekom-color-ui-black); } // Container for "Create new link" button #addlink_button { background-color: var(--nmc-ods-blue-primary); border-radius: var(--telekom-radius-pill); + color: var(--telekom-color-ui-black); border-width: 0; } @@ -293,14 +294,14 @@ body .icon-upload-to-cloud, body .icon-upload-to-cloud-dark { // Quick share options dropdown button .share-select button.trigger-text { - color: #2238DF; + color: var(--telekom-color-text-and-icon-link-standard); font-weight: 400; .eye-circle-outline-icon { width: 16px; height: 16px; display: inline-block; - background-color: #2238DF; + background-color: var(--telekom-color-text-and-icon-link-standard); mask: var(--icon-visibility-on-dark) no-repeat center; mask-size: contain; @@ -313,7 +314,7 @@ body .icon-upload-to-cloud, body .icon-upload-to-cloud-dark { width: 16px; height: 16px; display: inline-block; - background-color: #2238DF; + background-color: var(--telekom-color-text-and-icon-link-standard); mask: var(--icon-calendar-dark) no-repeat center; mask-size: contain; @@ -343,11 +344,11 @@ body .icon-upload-to-cloud, body .icon-upload-to-cloud-dark { &.button-vue--icon-only { border-radius: 50%; - width: 40px; + width: 40px !important; height: 40px; min-width: 40px; min-height: 40px; - border: 1px solid var(--telekom-color-ui-black); + border: 1px solid var(--telekom-color-text-and-icon-standard); .icon-delete { background-image: var(--icon-close-x-dark); From 8e5e6665439eec7a21c391d8d1f9d12cc37d6e36 Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Wed, 7 Jan 2026 02:55:02 +0100 Subject: [PATCH 11/13] Simplify action button icon styling and improve consistency Removed custom icon background assignments and unnecessary style overrides. Icons now use standard SVG rendering with proper color inheritance from design system variables. --- css/components/ncactions.scss | 44 ++++++----------------------------- 1 file changed, 7 insertions(+), 37 deletions(-) diff --git a/css/components/ncactions.scss b/css/components/ncactions.scss index a12b913..4325c8a 100644 --- a/css/components/ncactions.scss +++ b/css/components/ncactions.scss @@ -5,9 +5,6 @@ --open-background-color: initial; .button-vue { - svg { - color: var(--telekom-color-ui-black); - } &:hover:not(:disabled) { background-color: initial; @@ -54,6 +51,12 @@ height: 16px; } + .icon-vue { + svg path { + fill: var(--telekom-color-text-and-icon-standard); + } + } + } li.action-separator, @@ -64,13 +67,8 @@ li.action { .icon-vue { - background-position: center; - background-repeat: no-repeat; background-size: 24px; - svg { - display: none; - } } @@ -476,32 +474,4 @@ } } } -} - -// Pressed icon (right side) styling -li.action button.action-button { - .action-button__pressed-icon { - background-position: center; - background-repeat: no-repeat; - background-size: 20px; - - svg { - display: none; - } - } - - // Show checkmark icon only when button is actually checked/selected - &[aria-checked="true"] .action-button__pressed-icon { - background-image: var(--icon-checkmark-dark); - } -} - -// Assign different icons to each button based on position -li.action:nth-child(1) button.action-button .icon-vue:not(.action-button__pressed-icon) { background-image: var(--icon-folder-dark); } // Documents -li.action:nth-child(2) button.action-button .icon-vue:not(.action-button__pressed-icon) { background-image: var(--icon-folder-dark); } // Spreadsheets -li.action:nth-child(3) button.action-button .icon-vue:not(.action-button__pressed-icon) { background-image: var(--icon-folder-dark); } // Presentations -li.action:nth-child(4) button.action-button .icon-vue:not(.action-button__pressed-icon) { background-image: var(--icon-folder-dark); } // PDFs -li.action:nth-child(5) button.action-button .icon-vue:not(.action-button__pressed-icon) { background-image: var(--icon-folder-dark); } // Folders -li.action:nth-child(6) button.action-button .icon-vue:not(.action-button__pressed-icon) { background-image: var(--icon-music-dark); } // Audio -li.action:nth-child(7) button.action-button .icon-vue:not(.action-button__pressed-icon) { background-image: var(--icon-folder-dark); } // Images -li.action:nth-child(8) button.action-button .icon-vue:not(.action-button__pressed-icon) { background-image: var(--icon-folder-dark); } // Videos \ No newline at end of file +} \ No newline at end of file From bc77532b860dbeab60d094d14656f63f108d151f Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Wed, 7 Jan 2026 09:52:25 +0100 Subject: [PATCH 12/13] Remove unused custom icon assets and references Cleaned up checkmark and music SVG icons that are no longer needed after switching to standard icon rendering. Removed whitespace from action button styles. --- css/components/ncactions.scss | 2 -- img/actions/checkmark.svg | 3 --- img/actions/music.svg | 3 --- src/icons.mjs | 2 -- 4 files changed, 10 deletions(-) delete mode 100644 img/actions/checkmark.svg delete mode 100644 img/actions/music.svg diff --git a/css/components/ncactions.scss b/css/components/ncactions.scss index 4325c8a..79c1a25 100644 --- a/css/components/ncactions.scss +++ b/css/components/ncactions.scss @@ -56,7 +56,6 @@ fill: var(--telekom-color-text-and-icon-standard); } } - } li.action-separator, @@ -68,7 +67,6 @@ .icon-vue { background-size: 24px; - } diff --git a/img/actions/checkmark.svg b/img/actions/checkmark.svg deleted file mode 100644 index c4695ae..0000000 --- a/img/actions/checkmark.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/img/actions/music.svg b/img/actions/music.svg deleted file mode 100644 index 151a7ec..0000000 --- a/img/actions/music.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/icons.mjs b/src/icons.mjs index 2c5b09f..a113ea7 100644 --- a/src/icons.mjs +++ b/src/icons.mjs @@ -184,8 +184,6 @@ const icons = { 'folder-overlay-lock': path.join(__dirname, '../img', 'actions', 'lock.svg'), 'folder-overlay-share': path.join(__dirname, '../img', 'actions', 'share.svg'), 'visibility-on': path.join(__dirname, '../img', 'actions', 'visibility-on.svg'), - checkmark: path.join(__dirname, '../img', 'actions', 'checkmark.svg'), - music: path.join(__dirname, '../img', 'actions', 'music.svg'), } const iconsColor = { From 31c4398e51d54f1b9f114138161ecedad23d60b4 Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Wed, 7 Jan 2026 10:28:30 +0100 Subject: [PATCH 13/13] Simplify action button theming by removing redundant dark mode overrides --- css/apps/files.scss | 33 +++++---------------------------- 1 file changed, 5 insertions(+), 28 deletions(-) diff --git a/css/apps/files.scss b/css/apps/files.scss index 1ba0a73..4489fb5 100644 --- a/css/apps/files.scss +++ b/css/apps/files.scss @@ -1021,7 +1021,7 @@ table.files-filestable { &.files-list__row-action-sharing-popup { direction: rtl; margin: 0; - border: 1px solid var(--telekom-color-ui-black); + border: 1px solid var(--telekom-color-text-and-icon-standard); border-radius: 50%; width: 40px !important; height: 40px !important; @@ -1031,22 +1031,12 @@ table.files-filestable { display: flex; align-items: center; justify-content: center; - background-color: transparent; .button-vue__icon { background-image: var(--icon-shared-dark); background-size: 16px 16px; width: 16px; height: 16px; - filter: brightness(0); - } - - [data-themes*=dark] & { - border-color: var(--telekom-color-ui-white); - - .button-vue__icon { - filter: brightness(0) invert(1); - } } &:hover { @@ -1098,7 +1088,7 @@ table.files-filestable { &:focus-visible { border: none; background-color: var(--nmc-ods-blue-primary); - outline: 2px solid var(--telekom-color-ui-black); + outline: 2px solid var(--telekom-color-text-and-icon-standard); outline-offset: 2px; .button-vue__icon { @@ -1106,7 +1096,6 @@ table.files-filestable { } [data-themes*=dark] & { - outline-color: var(--telekom-color-ui-white); .button-vue__icon { filter: brightness(0); @@ -1137,7 +1126,7 @@ table.files-filestable { // ... action menu div.action-item { button.action-item__menutoggle { - border: 1px solid var(--telekom-color-ui-black); + border: 1px solid var(--telekom-color-text-and-icon-standard); border-radius: 50%; width: 40px !important; height: 40px !important; @@ -1147,21 +1136,11 @@ table.files-filestable { display: flex; align-items: center; justify-content: center; - background-color: transparent; svg { width: 16px; height: 16px; - color: var(--telekom-color-ui-black); - } - - // Dark mode normal state - [data-themes*=dark] & { - border-color: var(--telekom-color-ui-white); - - svg { - color: var(--telekom-color-ui-white); - } + color: var(--telekom-color-text-and-icon-standard); } &:hover { @@ -1220,7 +1199,7 @@ table.files-filestable { &:focus-visible { border: none; background-color: var(--nmc-ods-blue-primary); - outline: 2px solid var(--telekom-color-ui-black); + outline: 2px solid var(--telekom-color-text-and-icon-standard); outline-offset: 2px; svg { @@ -1229,8 +1208,6 @@ table.files-filestable { // Dark mode focus [data-themes*=dark] & { - outline-color: var(--telekom-color-ui-white); - svg { color: var(--telekom-color-ui-black); }