diff --git a/css/apps/files_sharing.scss b/css/apps/files_sharing.scss
index ec30dc50..965d3087 100644
--- a/css/apps/files_sharing.scss
+++ b/css/apps/files_sharing.scss
@@ -112,6 +112,15 @@
h2 {
font-size: 20px;
margin: unset;
+
+ strong {
+ font-weight: 600;
+ }
+ }
+
+ .sharingPopup__header {
+ font-weight: 600;
+ margin-bottom: 16px !important;
}
}
diff --git a/css/apps/photos.scss b/css/apps/photos.scss
index a8a1c68d..85b5111d 100644
--- a/css/apps/photos.scss
+++ b/css/apps/photos.scss
@@ -746,14 +746,14 @@
&:hover:not(:disabled) {
.close-icon {
- filter: var(--nmc-color-icon)
+ filter: var(--nmc-color-icon);
}
background-color: initial;
}
.close-icon {
- background-image: var(--icon-close-dark);
+ background-image: var(--icon-close-x-dark);
background-position: center;
background-repeat: no-repeat;
height: 100%;
diff --git a/css/apps/sharing.scss b/css/apps/sharing.scss
index e8e62e48..055b8037 100644
--- a/css/apps/sharing.scss
+++ b/css/apps/sharing.scss
@@ -268,6 +268,97 @@ body .icon-upload-to-cloud, body .icon-upload-to-cloud-dark {
}
}
}
+}
+
+#body-user, #body-public, #body-settings {
+ .sharingPopup__content, .sharingTab__content, .sharingTabDetailsView {
+ .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)
+ }
+
+ // Container for "Create new link" button
+ #addlink_button {
+ background-color: var(--nmc-ods-blue-primary);
+ border-radius: var(--telekom-radius-pill);
+ border-width: 0;
+ }
+
+ // Parent div of the "Create new link" button
+ div:has(> #addlink_button) {
+ display: flex;
+ justify-content: flex-end;
+ }
+
+ // Quick share options dropdown button
+ .share-select button.trigger-text {
+ color: #2E466A;
+ 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%);
+
+ svg {
+ display: none !important;
+ }
+ }
+
+ .calendar-month-icon {
+ 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%);
+
+ svg {
+ display: none !important;
+ }
+ }
+ }
+
+ // Border for sharing entry items
+ .sharing-entry.sharing-entry__link.sharing-entry--share {
+ border-bottom: 1px solid #B6B6B6;
+ padding: 0.5rem 0;
+ }
+
+ // Remove margin-bottom from "Link to Copy" heading
+ .sharing-link-list-caption {
+ margin-bottom: 0;
+ }
+
+ .button-vue--vue-secondary {
+ &#addlink_button {
+ background-color: var(--nmc-ods-blue-primary);
+ border-radius: var(--telekom-radius-pill);
+ border-width: 0;
+ }
+
+ &.button-vue--icon-only {
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ min-width: 40px;
+ min-height: 40px;
+ border: 1px solid var(--telekom-color-ui-black);
+
+ .icon-delete {
+ background-image: var(--icon-close-x-dark);
+ }
+ }
+ }
+ }
.sharing-entry {
gap: .5rem;
diff --git a/css/components/ncselect.scss b/css/components/ncselect.scss
index 79d53976..4ebc61b0 100644
--- a/css/components/ncselect.scss
+++ b/css/components/ncselect.scss
@@ -2,6 +2,7 @@
.vs__dropdown-toggle {
border-width: 1px;
+ border-radius: 12px;
}
.vs__actions {
diff --git a/img/actions/clipboard.svg b/img/actions/clipboard.svg
index ad600aa6..7b8e42b0 100644
--- a/img/actions/clipboard.svg
+++ b/img/actions/clipboard.svg
@@ -1,7 +1,6 @@
-
-
\ No newline at end of file
+
diff --git a/img/actions/visibility-on.svg b/img/actions/visibility-on.svg
new file mode 100644
index 00000000..485ce305
--- /dev/null
+++ b/img/actions/visibility-on.svg
@@ -0,0 +1,4 @@
+
diff --git a/img/content/calendar.svg b/img/content/calendar.svg
index e3c81c0d..3e9dc4e3 100644
--- a/img/content/calendar.svg
+++ b/img/content/calendar.svg
@@ -1 +1,3 @@
-
\ No newline at end of file
+
diff --git a/src/icons.mjs b/src/icons.mjs
index 64bafd67..a113ea73 100644
--- a/src/icons.mjs
+++ b/src/icons.mjs
@@ -25,7 +25,7 @@ const colors = {
const COLOR_VALUE_RE = '(?:#[0-9a-f]{3,6}|black|white)'
-const colorSvg = function (svg = '', color = '000') {
+const colorSvg = function(svg = '', color = '000') {
if (!/^[0-9a-f]{3,6}$/i.test(color)) {
console.warn(color, 'does not match the required format')
color = '000'
@@ -38,13 +38,13 @@ const colorSvg = function (svg = '', color = '000') {
// replace fill/stroke attributes (hex + named colors)
svg = svg.replace(
new RegExp(`(fill|stroke)="(${COLOR_VALUE_RE})"`, 'gmi'),
- (_, attr) => `${attr}="#${color}"`
+ (_, attr) => `${attr}="#${color}"`,
)
// replace inline styles
svg = svg.replace(
new RegExp(`(fill|stroke):(${COLOR_VALUE_RE})`, 'gmi'),
- (_, attr) => `${attr}:#${color}`
+ (_, attr) => `${attr}:#${color}`,
)
return svg
@@ -183,6 +183,7 @@ const icons = {
import: path.join(__dirname, '../img', 'actions', 'import.svg'),
'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'),
}
const iconsColor = {