From 0e5a8e18a95eadef749496e456d1316c294d291a Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Tue, 9 Dec 2025 17:35:29 +0100 Subject: [PATCH 1/3] Adjust share and actions button design with circular borders - Add circular black border (40x40) to sharing popup button - Add circular black border (40x40) to three-dot actions menu button - Implement interactive states for both buttons: - Normal: black border with transparent background - Hover: light blue background, no border - Active/Pressed: transparent background, no border - Focus: darker blue background with offset outline ring - Set icon size to 16x16 for both buttons --- css/apps/files.scss | 68 +++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 66 insertions(+), 2 deletions(-) diff --git a/css/apps/files.scss b/css/apps/files.scss index ef5ddc2..f3c59a4 100644 --- a/css/apps/files.scss +++ b/css/apps/files.scss @@ -863,9 +863,40 @@ table.files-filestable { &.files-list__row-action-sharing-popup { direction: rtl; margin: 0; + border: 1px solid var(--telekom-color-ui-black); + border-radius: 50%; + width: 40px; + height: 40px; + box-sizing: border-box; + 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); + } + + &:hover { + border: none; + background-color: #ECF3FE; + } + + &:active { + border: none; + background-color: transparent; + } + + &:focus, + &:focus-visible { + border: none; + background-color: #D2E2FC; + outline: 2px solid var(--telekom-color-ui-black); + outline-offset: 2px; } &.button-vue--icon-and-text .button-vue__icon { @@ -895,8 +926,41 @@ table.files-filestable { // ... action menu div.action-item { button.action-item__menutoggle { - &:hover svg { - color: var(--color-main-text); + border: 1px solid var(--telekom-color-ui-black); + border-radius: 50%; + width: 40px; + height: 40px; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + background-color: transparent; + + &:hover { + border: none; + background-color: #ECF3FE; + + svg { + color: var(--color-main-text); + } + } + + &:active { + border: none; + background-color: transparent; + } + + &:focus, + &:focus-visible { + border: none; + background-color: #D2E2FC; + outline: 2px solid var(--telekom-color-ui-black); + outline-offset: 2px; + } + + svg { + width: 16px; + height: 16px; } } } From aeec77fd9c33b094dce8fc0204ad7879f0581955 Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Tue, 9 Dec 2025 17:59:29 +0100 Subject: [PATCH 2/3] Remove magenta color filter from sharing button icon --- css/apps/files.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/css/apps/files.scss b/css/apps/files.scss index f3c59a4..7a64aa0 100644 --- a/css/apps/files.scss +++ b/css/apps/files.scss @@ -899,10 +899,6 @@ table.files-filestable { outline-offset: 2px; } - &.button-vue--icon-and-text .button-vue__icon { - @include magenta-icon; - } - &.button-vue--icon-and-text[aria-label="Mit mir geteilt"] .button-vue__icon, &.button-vue--icon-and-text[aria-label="Shared with me"] .button-vue__icon { background-image: var(--icon-upload-to-cloud-dark); From 36efd59f45f39e4a854fd14163455c2672d92681 Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Sun, 14 Dec 2025 18:01:19 +0100 Subject: [PATCH 3/3] Update share and action menu button color states Apply consistent color styling to share button and action menu button: - Normal state: #D2E2FC background with no border - Hover state: #9EC1F7 background - Active/pressed state: #FFFFFF background with black border - Focus state: #D2E2FC background with outline --- css/apps/files.scss | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/css/apps/files.scss b/css/apps/files.scss index 7a64aa0..3757b86 100644 --- a/css/apps/files.scss +++ b/css/apps/files.scss @@ -863,7 +863,7 @@ table.files-filestable { &.files-list__row-action-sharing-popup { direction: rtl; margin: 0; - border: 1px solid var(--telekom-color-ui-black); + border: none; border-radius: 50%; width: 40px; height: 40px; @@ -871,7 +871,7 @@ table.files-filestable { display: flex; align-items: center; justify-content: center; - background-color: transparent; + background-color: #D2E2FC; .button-vue__icon { background-image: var(--icon-shared-dark); @@ -883,12 +883,12 @@ table.files-filestable { &:hover { border: none; - background-color: #ECF3FE; + background-color: #9EC1F7; } &:active { - border: none; - background-color: transparent; + border: 1px solid var(--telekom-color-ui-black); + background-color: #FFFFFF; } &:focus, @@ -922,7 +922,7 @@ table.files-filestable { // ... action menu div.action-item { button.action-item__menutoggle { - border: 1px solid var(--telekom-color-ui-black); + border: none; border-radius: 50%; width: 40px; height: 40px; @@ -930,11 +930,11 @@ table.files-filestable { display: flex; align-items: center; justify-content: center; - background-color: transparent; + background-color: #D2E2FC; &:hover { border: none; - background-color: #ECF3FE; + background-color: #9EC1F7; svg { color: var(--color-main-text); @@ -942,8 +942,8 @@ table.files-filestable { } &:active { - border: none; - background-color: transparent; + border: 1px solid var(--telekom-color-ui-black); + background-color: #FFFFFF; } &:focus,