Skip to content

nmc/minor-size-and-style-fixing #434

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
memurats merged 13 commits into from
Jan 7, 2026
+161 −48
Merged

nmc/minor-size-and-style-fixing #434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
9560689
Fix button size inconsistency for sharing and action menu buttons
suet-kei-chan Dec 19, 2025
cc40483
Update sharing button and action menu styling
suet-kei-chan Jan 6, 2026
a0a06ee
Apply consistent styling to action menu toggle button
suet-kei-chan Jan 6, 2026
04b45f9
Update folder icon size to 45x36 pixels
suet-kei-chan Jan 6, 2026
dcd50ff
wip: replace inline SVG icons in action buttons with custom icons
suet-kei-chan Jan 6, 2026
d651e4d
wip: Add custom checkmark and music icons for action buttons
suet-kei-chan Jan 6, 2026
4c16dc3
Refactor action button icon styles
suet-kei-chan Jan 6, 2026
dd2f658
Replace display:none with fixed width for action button icons
suet-kei-chan Jan 6, 2026
7653865
WIP: Update share dropdown text and icon colors to blue
suet-kei-chan Jan 7, 2026
aeea2b4
Update button text color to black for better contrast
suet-kei-chan Jan 7, 2026
8e5e666
Simplify action button icon styling and improve consistency
suet-kei-chan Jan 7, 2026
bc77532
Remove unused custom icon assets and references
suet-kei-chan Jan 7, 2026
31c4398
Simplify action button theming by removing redundant dark mode overrides
suet-kei-chan Jan 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 145 additions & 28 deletions css/apps/files.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -1001,40 +1021,86 @@ table.files-filestable {
&.files-list__row-action-sharing-popup {
direction: rtl;
margin: 0;
border: none;
border: 1px solid var(--telekom-color-text-and-icon-standard);
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;
justify-content: center;
background-color: var(--nmc-ods-blue-primary);

.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: 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,
&: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 {
filter: brightness(0);
}

[data-themes*=dark] & {

.button-vue__icon {
filter: brightness(0);
}
}
}

&.button-vue--icon-and-text[aria-label="Mit mir geteilt"] .button-vue__icon,
Expand All @@ -1060,41 +1126,92 @@ table.files-filestable {
// ... action menu
div.action-item {
button.action-item__menutoggle {
border: none;
border: 1px solid var(--telekom-color-text-and-icon-standard);
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;
justify-content: center;
background-color: var(--nmc-ods-blue-primary);

svg {
width: 16px;
height: 16px;
color: var(--telekom-color-text-and-icon-standard);
}

&: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,
&: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 {
width: 16px;
height: 16px;
svg {
color: var(--telekom-color-ui-black);
}

// Dark mode focus
[data-themes*=dark] & {
svg {
color: var(--telekom-color-ui-black);
}
}
}
}
}
Expand Down
25 changes: 11 additions & 14 deletions css/apps/sharing.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -293,18 +294,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: var(--telekom-color-text-and-icon-link-standard);
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: var(--telekom-color-text-and-icon-link-standard);
mask: var(--icon-visibility-on-dark) no-repeat center;
mask-size: contain;

svg {
display: none !important;
Expand All @@ -315,11 +314,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: var(--telekom-color-text-and-icon-link-standard);
mask: var(--icon-calendar-dark) no-repeat center;
mask-size: contain;

svg {
display: none !important;
Expand Down Expand Up @@ -347,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);
Expand Down
11 changes: 5 additions & 6 deletions css/components/ncactions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,17 +44,16 @@
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);
fill: var(--telekom-color-text-and-icon-standard);
}
}
}
Expand Down
Loading