diff --git a/.npmrc b/.npmrc
new file mode 100644
index 00000000..e6ccce3f
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,6 @@
+@telekom-ods:registry=https://artifactory.devops.telekom.de/artifactory/api/npm/one-design-system-npm/
+//artifactory.devops.telekom.de/artifactory/api/npm/one-design-system-npm/:_authToken=${JFROG_TOKEN}
+ignore-scripts=false
+foreground-scripts=true
+email = ${JFROG_EMAIL}
+always-auth = true
\ No newline at end of file
diff --git a/appinfo/info.xml b/appinfo/info.xml
index d36cdabc..7785f764 100644
--- a/appinfo/info.xml
+++ b/appinfo/info.xml
@@ -8,7 +8,7 @@
implementing Telekom Scale branding system
supporting refactored style system since Nextcloud V25
- 1.1.2
+ 1.6.4
agpl
T-Systems International
NMCTheme
@@ -20,7 +20,7 @@
customization
https://github.com/nextcloud/server/issues
-
+
OCA\NMCTheme\Command\CacheBuster
diff --git a/composer.json b/composer.json
index 1a8ad6c2..cf392fb2 100644
--- a/composer.json
+++ b/composer.json
@@ -1,6 +1,6 @@
{
"name": "nextmcloud/nmctheme",
- "description": "MagentaCLOUD theme for NC25 ff.",
+ "description": "MagentaCLOUD Theme for Nextcloud",
"type": "project",
"license": "AGPL3",
"authors": [
diff --git a/css/_mixins.scss b/css/_mixins.scss
index db02ff83..0fc05b67 100644
--- a/css/_mixins.scss
+++ b/css/_mixins.scss
@@ -1,5 +1,5 @@
@mixin darkmode-modal {
- background-color: var(--telekom-color-background-surface);
+ background-color: var(--color-main-background);
}
@mixin color-icon-red {
@@ -13,23 +13,27 @@
filter: brightness(0) saturate(100%) invert(13%) sepia(85%) saturate(6096%) hue-rotate(321deg) brightness(75%) contrast(104%);
}
+@mixin macaw-icon {
+ filter: brightness(0) saturate(100%) invert(67%) sepia(71%) saturate(1009%) hue-rotate(186deg) brightness(100%) contrast(93%);
+}
+
// Scale primary button style
@mixin primary-button {
border: none;
- border-radius: var(--telekom-radius-standard);
- background-color: var(--telekom-color-primary-standard);
- color: var(--telekom-color-text-and-icon-white-standard);
+ border-radius: var(--border-radius-pill);
+ background-color: var(--color-primary);
+ color: var(--nmc-color-text-and-icon-white);
&:hover:not(:disabled) {
- background-color: var(--telekom-color-primary-hovered);
+ background-color: var(--color-primary-hover);
}
&:active {
- background-color: var(--telekom-color-primary-pressed);
+ background-color: var(--color-primary-pressed);
}
&:disabled {
- background-color: var(--telekom-color-ui-disabled);
- color: var(--telekom-color-text-and-icon-disabled);
+ background-color: var(--color-background-dark);
+ color: var(--color-text-lighter);
}
}
\ No newline at end of file
diff --git a/css/_variables.scss b/css/_variables.scss
index e3530167..2e8137fd 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -1,3 +1,4 @@
+$breakpoint-desktop: 1325px;
$breakpoint-mobile: 1024px;
$breakpoint-mobile-medium: 680px;
$breakpoint-mobile-small: 480px;
\ No newline at end of file
diff --git a/css/apps/apps.scss b/css/apps/apps.scss
index dc83ad97..fb902200 100644
--- a/css/apps/apps.scss
+++ b/css/apps/apps.scss
@@ -2,34 +2,36 @@
:root {
--body-container-margin: calc(var(--default-grid-baseline) * 2);
- --body-height: calc(100% - 157px - var(--body-container-margin));
+ --body-height: calc(100% - 138px - var(--body-container-margin));
}
@media screen and (max-width: $breakpoint-mobile-small) {
-:root {
- --body-height: calc(100% - 152px - var(--body-container-margin));
+ :root {
+ --body-height: calc(100% - 162px - var(--body-container-margin));
}
}
#app-navigation:not(.vue) {
background-color: var(--color-main-background);
+ border-right: 1px solid var(--color-border) !important;
}
-#body-user,
-#body-settings,
-#body-public {
- background-image: url('../img/telekom/mcfluffy.jpg');
- background-size: cover;
- background-repeat: no-repeat;
- background-position: top center;
+/* CONTENT --------------------------------------------------------- */
+
+// Suppress the separator border/radius that Nextcloud core draws between
+// the app-navigation and the app-content pane on wide viewports.
+.content:not(.content--legacy) .app-navigation:not(.app-navigation--close) ~ .app-content {
+ border-inline-start: none !important;
+ border-start-start-radius: 0 !important;
+ border-end-start-radius: 0 !important;
}
-/* CONTENT --------------------------------------------------------- */
-#content, #content-vue {
+#content,
+#content-vue {
border-radius: 0;
- margin: 89px 16px 0;
+ margin: 73px 0 0;
height: var(--body-height);
- width: calc(100% - 32px);
+ width: 100%;
@media screen and (max-width: $breakpoint-mobile-small) {
margin: 73px 0 0;
@@ -58,4 +60,81 @@
}
}
}
+
+ .app-navigation-caption {
+ display: none !important;
+ }
+
+ .app-navigation-personal,
+ .app-navigation-administration {
+
+ > ul {
+ gap: 0.25rem !important;
+ padding: 4rem 1.5rem 0.5rem !important;
+
+ > li {
+ border-radius: var(--border-radius-pill);
+
+ &[data-section-type="personal"]
+ {
+ display: none;
+
+ &[data-section-id="account"],
+ &[data-section-id="sessions"],
+ &[data-section-id="appearance"] {
+ display: inline-flex;
+ }
+ }
+
+ > a {
+ font-weight: 700;
+ padding: 0 12px 0 14px;
+
+ img {
+ margin-bottom: -5px;
+ height: 22px;
+ width: 22px;
+ }
+ }
+
+ &:hover {
+
+ > a {
+ background-color: transparent !important;
+ color: var(--color-primary-hover);
+
+ img {
+ filter: var(--nmc-color-icon-hovered);
+ }
+ }
+ }
+
+ &.active {
+ background-color: transparent !important;
+ color: var(--color-primary);
+
+ > a {
+ background-color: transparent !important;
+ color: var(--color-primary);
+
+ &:first-child > img {
+ filter: var(--nmc-color-icon);
+ }
+ }
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ height: 24px;
+ width: 4px;
+ background-color: var(--color-primary);
+ border-radius: 4px;
+ }
+ }
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/css/apps/files-right-click.scss b/css/apps/files-right-click.scss
index 2ed07be0..fc67b29a 100644
--- a/css/apps/files-right-click.scss
+++ b/css/apps/files-right-click.scss
@@ -17,6 +17,14 @@
display: none;
}
}
+
+ &.files-list__row-action--submenu {
+ button {
+ svg {
+ display: inline;
+ }
+ }
+ }
}
&[data-cy-files-list-row-action="details"],
@@ -96,6 +104,34 @@
background-image: var(--icon-restore-dark);
}
}
+
+ &[data-cy-files-list-row-action="convert"] {
+ span.icon-vue {
+ background-image: var(--icon-refresh-dark);
+
+ &.icon-vue--directional {
+ background-image: var(--icon-right-condensed-dark);
+ }
+ }
+ }
+
+ &[data-cy-files-list-row-action="menu-back"] {
+ span.arrow-left-icon {
+ background-image: var(--icon-left-condensed-dark);
+ }
+ }
+
+ &[data-cy-files-list-row-action="accept-share"] {
+ span.icon-vue {
+ background-image: var(--icon-check-dark);
+ }
+ }
+
+ &[data-cy-files-list-row-action="reject-share"] {
+ span.icon-vue {
+ background-image: var(--icon-close-dark);
+ }
+ }
}
}
}
@@ -112,6 +148,12 @@ body .icon-starred:hover {
body .favorite-marker-icon {
background-image: var(--icon-starred-yellow);
+ height: 20px;
+ width: 20px;
+
+ svg {
+ display: none;
+ }
}
body .icon-rename {
diff --git a/css/apps/files_sharing.scss b/css/apps/files-sharing.scss
similarity index 56%
rename from css/apps/files_sharing.scss
rename to css/apps/files-sharing.scss
index 7d94f4a2..08d873bc 100644
--- a/css/apps/files_sharing.scss
+++ b/css/apps/files-sharing.scss
@@ -17,7 +17,7 @@
}
#displayavatar .icon-folder {
- background-image: var(--icon-mime-folder-dark);
+ background-image: var(--icon-mime-folder-blue);
background-size: 192px;
height: 128px;
width: 128px;
@@ -48,10 +48,11 @@
padding-left: 0.5rem;
.material-design-icon.share-circle-icon {
- background-image: var(--icon-shared-dark);
+ background-image: var(--original-icon-shared-dark);
background-repeat: no-repeat;
background-position: center;
- background-size: 24px;
+ background-size: 18px;
+ margin-inline: -4px 4px;
width: 100%;
height: 100%;
@@ -61,20 +62,33 @@
}
}
-.sharingTabDetailsView {
+.sharingTabDetailsView,
+.sharingPopupDetailsView {
#share-date-picker {
+ -webkit-appearance: none;
+ appearance: none;
+ box-sizing: border-box;
+ height: 56px !important;
color-scheme: var(--nmc-color-sceme);
+
+ &::-webkit-calendar-picker-indicator {
+ filter: invert(0);
+ cursor: pointer;
+
+ @media (prefers-color-scheme: dark) {
+ filter: invert(1);
+ }
+ }
}
}
-#app-sidebar-vue.app-sidebar--full {
- width: 0%;
+.sharingPopupDetailsView {
+ right: 0;
}
.sharingTabDetailsView, .sharingPopupDetailsView {
-
.material-design-icon.back-button {
background-image: var(--icon-arrow-previous-dark);
background-repeat: no-repeat;
@@ -92,15 +106,57 @@
.sharingTabDetailsView__quick-permissions {
- .checkbox-radio-switch {
-
- &__label {
- padding-left: 0 !important;
- }
- }
-
.sharing_permission-desc {
margin-top: 0.5rem;
}
}
+
+ .header-permissions {
+
+ h2 {
+ font-size: 20px;
+ margin-bottom: unset;
+ margin-top: unset;
+ }
+ }
+}
+
+.sharingPopup__content, .sharingTab__content {
+ h2 {
+ font-size: 20px;
+ margin: unset;
+
+ strong {
+ font-weight: 600;
+ }
+ }
+
+ .sharingPopup__header, .sharingTab__header {
+ font-weight: 600;
+ margin-bottom: 16px !important;
+ }
+
+ .sharingPopup__fileinfo, .sharingTab__fileinfo {
+ font-size: var(--font-size-small);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 100%;
+ display: block;
+ }
+}
+
+#files-public-content:has(.plyr) {
+
+ #preview {
+
+ .plyr__video-wrapper {
+
+ height: 890px;
+
+ video {
+ width: auto;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/css/apps/files.scss b/css/apps/files.scss
index e1b5aafb..631ef4b7 100644
--- a/css/apps/files.scss
+++ b/css/apps/files.scss
@@ -7,34 +7,38 @@
background-size: contain;
border: none;
height: 44px;
- margin-top: 0.2rem;
max-width: unset;
max-height: unset;
width: 44px;
-
- svg {
- display: none;
- }
}
@mixin header-menu-files {
button {
border: none;
- border-radius: 0;
- filter: var(--nmc-color-icon);
padding-right: 0;
+ height: 40px;
+ min-height: 40px;
+ margin-top: 0;
+ font-size: 14px;
.button-vue__wrapper {
+
.button-vue__text {
padding-right: 1rem;
+ margin: 0;
}
.button-vue__icon {
background-repeat: no-repeat;
background-position: center;
background-size: 1.25rem;
+ margin-inline: 4px -4px;
+ height: 40px !important;
+ width: 40px !important;
+ min-height: 40px !important;
+ min-width: 40px !important;
- svg {
+ .icon-vue {
display: none;
}
}
@@ -52,37 +56,49 @@
&.files-list__row-actions-batch-move-copy {
.button-vue__icon {
- background-image: var(--icon-external-dark);
+ background-image: var(--original-icon-external-dark);
}
}
&.files-list__row-actions-batch-download {
.button-vue__icon {
- background-image: var(--icon-download-dark);
+ background-image: var(--original-icon-download-dark);
}
}
&.files-list__row-actions-batch-delete {
.button-vue__icon {
- background-image: var(--icon-delete-dark);
+ background-image: var(--original-icon-delete-dark);
}
}
&.files-list__row-actions-batch-restore {
.button-vue__icon {
- background-image: var(--icon-restore-dark);
+ background-image: var(--original-icon-restore-dark);
}
}
&.files-list__row-actions-batch-files_zip {
.button-vue__icon {
- background-image: var(--icon-compress-zip-dark);
+ background-image: var(--original-icon-compress-zip-dark);
}
}
&.files-list__row-actions-batch-cancel_select {
.button-vue__icon {
- background-image: var(--icon-close-dark);
+ background-image: var(--original-icon-close-dark);
+ }
+ }
+
+ &.files-list__row-actions-batch-accept-share {
+ .button-vue__icon {
+ background-image: var(--original-icon-check-dark);
+ }
+ }
+
+ &.files-list__row-actions-batch-reject-share {
+ .button-vue__icon {
+ background-image: var(--original-icon-close-dark);
}
}
@@ -91,39 +107,34 @@
&:focus-visible {
outline: none;
}
-
- &:hover {
- background-color: transparent;
-
- .button-vue__wrapper {
- position: relative;
-
- &::before {
- background-color: var(--color-primary);
- position: absolute;
- content: " ";
- display: block;
- height: 4px;
- opacity: 1;
- pointer-events: none;
- bottom: 0;
- transition: all .1s ease-in-out;
- width: 100%;
- }
- }
- }
}
.action-item {
- button .button-vue__icon {
- background-image: var(--icon-more-dark);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 1.25rem;
+ button {
+ background-color: var(--nmc-ods-blue-primary);
+ color: var(--nmc-color-text-and-icon-black);
+ height: 40px !important;
+ width: 40px !important;
+ min-height: 40px !important;
+ min-width: 40px !important;
+ margin-bottom: 4px;
+ padding: 0;
- svg {
- display: none;
+ &:hover {
+ background-color: var(--nmc-ods-blue-hover);
}
+
+ .button-vue__icon {
+ background-image: var(--original-icon-more-dark);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 16px;
+ margin: 0;
+
+ svg {
+ display: none;
+ }
+ }
}
}
}
@@ -133,7 +144,7 @@
.button-vue__wrapper {
&:hover {
.files-list__column-sort-button-text {
- color: var(--telekom-color-text-and-icon-primary-standard);
+ color: var(--color-primary);
}
.button-vue__icon {
@@ -155,7 +166,9 @@
}
@mixin files-checkboxes-v28 {
+
span.checkbox-radio-switch-checkbox {
+
span.checkbox-content {
background: unset;
padding: 0;
@@ -165,38 +178,38 @@
}
span.checkbox-content__icon.checkbox-radio-switch__icon {
+
&:not(.checkbox-content__icon--checked) {
.checkbox-blank-outline-icon,
.minus-box-icon {
- width: 16px;
- height: 16px;
- border: 1px solid var(--telekom-color-ui-border-standard);
- border-radius: var(--telekom-radius-small);
+ width: 20px;
+ height: 20px;
+ border: 1px solid var(--color-border-maxcontrast);
+ border-radius: var(--border-radius-small);
+ background: var(--color-main-background);
svg {
display: none;
}
&:hover {
- background-color: red;
+ border-color: var(--color-border-dark);
+ background-color: var(--color-background-hover);
}
}
}
&.checkbox-content__icon--checked {
background-image: var(--original-icon-check-white);
- background-color: var(--telekom-color-functional-success-standard);
+ background-color: var(--color-primary);
background-position: center;
background-repeat: no-repeat;
- background-size: 18px;
- border: none;
- border-radius: 3rem;
- height: 1.5rem;
- margin-left: -2px;
- margin-right: -2px;
- margin-top: -2px;
- width: 1.5rem;
+ background-size: 16px;
+ border: 1px solid var(--color-primary);
+ border-radius: var(--border-radius-small);
+ width: 20px;
+ height: 20px;
.checkbox-marked-icon {
svg {
@@ -309,60 +322,235 @@ table.files-filestable {
/*------------------------------------ v28 - specific styling ------------------------------------*/
#body-user {
+
// files modal search input
.modal-mask.dialog__modal {
- & .modal-wrapper.modal-wrapper--large input {
- padding-left: 2.5rem;
+
+ #settings-section_settings {
+
+ .app-settings-section__content > div[class*='_ncFormBox'] > div[class*='_formBoxItem']:last-child,
+ .app-settings-section__content > fieldset[class*='_formGroup'] {
+ display: none;
+ }
+ }
+
+ #settings-section_keyboard-shortcuts {
+ display: none;
+ }
+
+ .app-settings-section__content > div[class*='_ncFormBox'],
+ .app-settings-section__content > fieldset[class*='_formGroup'] {
+
+ div[class*='_formBoxItem'],
+ div[class*='_ncFormBox__item'] {
+ border-bottom-width: 1px;
+ flex-direction: row-reverse;
+ }
+ }
+
+ & .modal-wrapper {
+
+ .modal-wrapper--large {
+
+ input,
+ .input-field__main-wrapper .input-field__input {
+ padding-left: 2.5rem;
+ }
+ }
+
+ .modal-wrapper--small {
+ input,
+ .input-field__input.input-field__input--error {
+ padding-left: 2.5rem;
+ }
+
+ p {
+ margin-top: 1rem;
+ }
+
+ .input-field__icon.input-field__icon--trailing {
+ top: 0;
+ bottom: 0;
+ right: 0;
+ }
+ }
}
}
- // fix table header overlab with tbody in modal
+ // fix table header overlap with tbody in modal
.modal-container__content {
.dialog__content.file-picker__content {
.file-picker__files {
thead th {
- background-color: var(--telekom-color-background-surface);
+ background-color: var(--color-main-background);
+ }
+
+ tbody {
+ td {
+ span.icon-vue {
+ background-image: var(--original-icon-folder-overlay-share-white);
+ width: 16px;
+ height: 16px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 16px;
+ top: 14px;
+
+ svg {
+ display: none;
+ }
+ }
+ }
}
}
}
}
}
-
#app-content-vue {
- .files-list__header {
- margin-block: 1rem;
- button.files-list__header-grid-button {
+ // Override favorite marker stroke color
+ .favorite-marker-icon svg {
+ color: var(--color-favorite) !important;
- &:hover:not(:disabled),
- &:active {
- background-color: transparent;
+ path{
+ stroke: var(--color-favorite) !important;
+ }
+ }
- span.material-design-icon {
- @include magenta-icon;
- }
- }
+ .files-list__header {
+ margin-block: 15px;
+ margin-inline: 3rem 1.5rem;
+
+ .files-list__header-grid-button {
+ border: 1px solid var(--color-main-text);
+ border-radius: 50%;
+ 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;
- span.view-grid-icon {
+ span.view-grid-outline-icon {
+ background-image: var(--icon-grid-dark);
+ background-size: 20px;
+ background-repeat: no-repeat;
+ background-position: center;
width: 24px;
height: 24px;
- background-image: var(--icon-toggle-pictures-dark);
svg {
display: none;
}
}
- span.format-list-bulleted-square-icon {
+ span.format-list-bulleted-square-icon {
+ background-image: var(--icon-list-bulleted-dark);
+ background-size: 20px;
+ background-repeat: no-repeat;
+ background-position: center;
width: 24px;
height: 24px;
- background-image: var(--icon-toggle-filelist-dark);
svg {
display: none;
}
}
+
+ }
+
+ .upload-picker__progress {
+ width: 300px;
+ max-width: 320px;
+
+ //Adjusting the position of the progress bar to align with the secondary loader
+ margin-right: 6rem;
+ margin-top: 23px;
+ }
+
+ // Responsive adjustment for upload progress bar
+ @media screen and (max-width: $breakpoint-mobile-small) {
+ .upload-picker__progress {
+ width: 140px !important;
+ max-width: 320px;
+ margin-right: 4rem !important;
+ padding: 1rem;
+ background: var(--color-main-background);
+ z-index: 1;
+ position: absolute;
+ }
+
+ .upload-picker__cancel {
+ z-index: 1;
+ position: relative;
+ left: -148px;
+ float: left;
+ padding: 0;
+ background: var(--color-main-background);
+ }
+
+ .files-list__header-upload-button {
+ padding-left: 2rem;
+ background-color: var(--color-main-background);
+ z-index: 1;
+ }
+ }
+
+ @media (min-width: $breakpoint-mobile-small) and (max-width: $breakpoint-mobile-medium) {
+ .upload-picker__progress {
+ width: 300px;
+ max-width: 320px;
+ margin-right: 3rem;
+ margin-top: 23px;
+ padding: 1rem 0 1rem 1rem;
+ background: var(--color-main-background);
+ z-index: 1;
+ }
+ }
+ @media (min-width: $breakpoint-mobile-medium) and (max-width: $breakpoint-mobile) {
+ .upload-picker__progress {
+ margin-right: 2rem;
+ width: 260px;
+ }
+ }
+
+ .files-list__breadcrumbs--with-progress {
+ flex-direction: row !important;
+ }
+
+ .files-list__refresh-icon {
+ position: absolute;
+ right: 13rem;
+ }
+
+ button[data-cy-files-list-action="empty-trash"] {
+ align-items: center;
+ all: unset;
+ background-color: var(--color-primary);
+ border: none;
+ border-radius: var(--border-radius-rounded);
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ margin-inline: 1rem;
+ min-height: unset;
+ height: 40px;
+
+ &:hover:not(:disabled) {
+ background-color: var(--color-primary-hover);
+ }
+
+ &:active:not(:disabled) {
+ background-color: var(--color-primary-pressed);
+ }
+
+ .button-vue__text {
+ color: var(--nmc-color-text-and-icon-white);
+ padding: 0 1rem;
+ }
}
}
@@ -377,181 +565,750 @@ table.files-filestable {
}
}
+ .files-list__row-trashbin-deleted-by {
+ display: none;
+ }
+
+ &__thead-overlay {
+ border: 0;
+ margin-block: 6px -6px;
+ margin-inline-start: 4rem;
+ padding-inline-end: 1rem;
+ }
+
+ .files-list__filters {
+ padding-block: 1rem;
+ padding-inline: 4rem 1rem;
+
+ .file-list-filters {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 1rem;
+ height: 2rem;
+ }
+
+ // Add separator before active filters
+ .file-list-filters__active {
+ gap: 0.5rem;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ flex-wrap: wrap;
+ position: relative;
+
+ // Responsive adjustment for chips
+ @media screen and (max-width: $breakpoint-mobile-small) {
+ max-height: 3rem;
+ overflow-y: auto;
+ }
+
+ &:not(:empty)::before {
+ content: "";
+ position: absolute;
+ left: -1rem;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 1px;
+ height: 100%;
+ background-color: var(--color-border);
+ margin: 0 8px;
+ }
+ }
+ }
+
.files-list__filters .file-list-filters__filter {
.file-list-filter-accounts {
display: none;
}
- }
- // Files table and grid
- table.files-list__table {
- thead {
- background-color: var(--color-main-background);
- opacity: 0.97;
- top: -2px;
+ // Style for filter dropdown buttons (Type, Modified, etc.)
+ .action-item button.action-item__menutoggle {
+ background-color: var(--nmc-ods-blue-primary);
+ color: var(--nmc-color-text-and-icon-black);
+ border: none;
+ border-radius: var(--border-radius-small);
+ height: 28px;
+ min-height: 28px;
+ padding: 0 10px;
+ font-weight: normal;
+ display: flex;
+ align-items: center;
+ box-sizing: border-box;
+ margin: 0;
+
+ &:hover {
+ background-color: var(--nmc-ods-blue-hover);
+ }
- @include files-checkboxes-v28;
+ &:active {
+ background-color: var(--nmc-ods-blue-pressed);
+ }
- th.files-list__column.files-list__ {
- &row-checkbox {
- width: 55px;
- }
+ &[aria-expanded="true"] {
+ background-color: var(--nmc-ods-blue-active);
+ }
- &row-name {
- margin-left: 1rem;
- width: 100vw;
+ // Hide the left icon
+ .button-vue__icon {
+ display: none;
+ }
- .files-list__column-sort-button {
- padding: 0;
- margin: 0;
- }
+ .button-vue__text {
+ color: var(--nmc-color-text-and-icon-black);
+ }
- @include files-table-columns-v28;
- }
+ // Add down arrow icon after the wrapper
+ .button-vue__wrapper::after {
+ content: '';
+ display: inline-block;
+ width: 6px;
+ height: 6px;
+ border-left: 1.5px solid var(--nmc-color-text-and-icon-black);
+ border-bottom: 1.5px solid var(--nmc-color-text-and-icon-black);
+ transform: rotate(-45deg);
+ margin-left: 8px;
+ margin-bottom: 2px;
+ transition: transform 0.2s ease;
+ }
- &row-mtime,
- &row-size,
- &row-trashbin-original-location,
- &row-trashbin-deleted {
- min-width: 140px;
- text-align: right;
+ // Rotate arrow when dropdown is open
+ &[aria-expanded="true"] .button-vue__wrapper::after {
+ transform: rotate(135deg);
+ margin-bottom: -2px;
+ }
+ }
+ }
- .files-list__column-sort-button {
- padding: 0;
- margin: 0;
- }
+ // Style for active filter chips
+ .files-list__filters .nc-chip {
+ background-color: var(--nmc-ods-blue-active);
+ color: var(--nmc-color-text-and-icon-black);
+ border-radius: 8px;
+ border: none;
+ height: 28px;
+ padding-left: 8px;
- @include files-table-columns-v28;
- }
- }
+ &:hover {
+ background-color: var(--nmc-ods-blue-hover);
}
- tbody:not(.files-list__tbody--grid) {
+ &:active {
+ background-color: var(--nmc-ods-blue-pressed);
+ }
- .files-list__row-icon {
- flex: 0 0 3rem;
- margin-right: 1rem;
- margin-left: 1rem;
- z-index: 100;
+ // Hide the leading icon
+ .nc-chip__icon {
+ display: none;
+ }
- .material-design-icon:not(.play-circle-icon) {
- @include thumbnail-icons();
+ // Style the text
+ .nc-chip__text {
+ color: var(--nmc-color-text-and-icon-black);
+ font-weight: bold;
+ }
- &.folder-icon {
- background-image: var(--icon-mime-folder-dark);
- }
+ // Style the X button
+ button {
+ padding-left: 0;
+ padding-right: 0;
+ margin-left: 0;
+ margin-right: 0;
+ min-width: 16px;
+ width: auto;
- &.link-icon {
- background-image: var(--icon-mime-folder-shared-dark);
- }
- &.key-icon {
- background-image: var(--icon-mime-folder-encrypted-dark);
- }
- }
+ svg {
+ color: var(--nmc-color-text-and-icon-black);
+ width: 16px;
+ height: 16px;
}
+ }
+ }
- &.files-list__tbody--grid {
- @include files-checkboxes-v28;
- }
+ .files-list__empty {
- @include files-checkboxes-v28;
+ .empty-content {
+ width: 540px;
+ max-width: 100%;
- tr {
- height: 68px;
+ &[data-cy-files-content-empty="files"] {
- &.highlighted,
- &.selected,
- &:not(.hidden):active,
- &:not(.hidden):focus,
- &:not(.hidden).mouseOver td {
- background-color: var(--nmc-color-row-selected);
- }
+ .empty-content__icon {
+ background-image: url('../img/decorative_images/mouse.svg');
- &:not(.hidden):not(.highlighted):not(.selected):hover {
- background-color: var(--nmc-color-row-hover);
+ @media (prefers-color-scheme: dark) {
+ background-image: url('../img/decorative_images/mouse-dark.svg');
+ }
}
+ }
- td {
- .files-list__row-icon {
+ &[data-cy-files-content-empty="sharingin"] {
- img {
- background-color: unset;
- background-position: center;
- background-repeat: no-repeat;
- background-size: contain;
- border: none;
- height: 44px;
- margin-top: 0.2rem;
- width: 44px;
- }
+ .empty-content__icon {
+ background-image: url('../img/decorative_images/sad-unicorn.svg');
- .files-list__row-icon-favorite {
- bottom: -3px;
- right: -16px;
- top: unset;
- width: 24px;
- height: 24px;
+ @media (prefers-color-scheme: dark) {
+ background-image: url('../img/decorative_images/sad-unicorn-dark.svg');
+ }
+ }
+ }
- .icon-vue {
- background-size: 24px;
- width: 24px;
- height: 24px;
+ &[data-cy-files-content-empty="sharingout"] {
- svg {
- display: none;
- }
- }
- }
- }
+ .empty-content__icon {
+ background-image: url('../img/decorative_images/cat-family.svg');
- .files-list__row-name-link {
- display: flex;
- align-items: center;
- text-align: start;
- width: 100%;
- height: 100%;
- min-height: 36px;
- min-width: 0;
- margin: 0;
- padding: 8px 14px;
+ @media (prefers-color-scheme: dark) {
+ background-image: url('../img/decorative_images/cat-family-dark.svg');
}
+ }
+ }
- &.files-list__row-mtime,
- &.files-list__row-size,
- &.files-list__row-trashbin-original-location,
- &.files-list__row-trashbin-deleted,
- &.column-last {
- min-width: 140px;
- text-align: right;
+ &[data-cy-files-content-empty="pendingshares"] {
- span {
- color: var(--color-main-text);
- }
- }
+ .empty-content__icon {
+ background-image: url('../img/decorative_images/pandas.svg');
- &.files-list__row-size {
- min-width: 90px;
+ @media (prefers-color-scheme: dark) {
+ background-image: url('../img/decorative_images/pandas-dark.svg');
}
+ }
+ }
- &.files-list__row-actions {
- display: flex;
+ &[data-cy-files-content-empty="trashbin"] {
- .action-items {
+ .empty-content__icon {
+ background-image: url('../img/decorative_images/cat.svg');
- button.action-item {
- padding: 0;
+ @media (prefers-color-scheme: dark) {
+ background-image: url('../img/decorative_images/cat-dark.svg');
+ }
+ }
+ }
- &:active,
- &:hover {
- background: none;
- }
+ &[data-cy-files-content-empty="favorites"] {
- .button-vue__wrapper {
+ .empty-content__icon {
+ background-image: url('../img/decorative_images/unicorn.svg');
- .button-vue__text {
- margin: 0;
- }
+ @media (prefers-color-scheme: dark) {
+ background-image: url('../img/decorative_images/unicorn-dark.svg');
+ }
+ }
+ }
+
+ &__icon {
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ height: 100%;
+ width: 100%;
+ max-height: 400px;
+ opacity: 1;
+
+ .icon-vue {
+ display: none;
+ }
+ }
+ }
+ }
+
+ // File Grid View for v30
+ &.files-list--grid {
+
+ tbody.files-list__tbody {
+ --clickable-area: 44px;
+ --half-clickable-area: calc(var(--clickable-area) / 2);
+ --row-width: 200px;
+ --row-height: calc(var(--row-width) - var(--half-clickable-area)) !important;
+ --icon-preview-size: calc(var(--row-width) - 1rem);
+
+ margin: 1rem 0;
+ row-gap: 1rem;
+ grid-template-columns: repeat(auto-fill, var(--row-width));
+
+ min-height: unset !important;
+
+ tr {
+ width: var(--row-width);
+ height: calc(var(--row-height) + var(--clickable-area) + 1rem) !important;
+ border: none;
+ border-radius: var(--border-radius);
+ padding: unset;
+
+ &.files-list__row {
+
+ &:hover,
+ &:focus,
+ &:active,
+ &--active {
+ background-color: var(--color-background-hover);
+ }
+ }
+
+ td.files-list__row-checkbox {
+ width: 44px;
+ height: 44px;
+ top: 0.35rem;
+ left: 0.5rem;
+ right: unset;
+ @include files-checkboxes-v28;
+
+ span.checkbox-content {
+ padding: 0;
+ }
+ }
+
+ td.files-list__row-name {
+
+ .files-list__row-icon {
+ width: 100%;
+ height: 100%;
+ padding-top: 1rem;
+ margin-right: unset;
+ margin-left: unset;
+ z-index: unset;
+
+ .material-design-icon:not(.play-circle-icon) {
+ @include thumbnail-icons();
+ margin: 0;
+ max-width: calc(100% - 2 * 14px);
+ max-height: calc(100% - 2 * 14px);
+ width: calc(100% - 2 * 14px);
+ height: calc(100% - 2 * 14px);
+ position: absolute;
+
+ &.folder-icon,
+ &.folder-open-icon {
+ width: 150px;
+ height: 120px;
+
+ svg {
+ width: 150px;
+ height: 120px;
+ color: var(--nmc-ods-blue-active);
+
+ path {
+ transform: scale(1.5, 1.5);
+ transform-origin: center;
+ }
+ }
+ }
+
+ &.files-list__row-icon-overlay {
+ max-width: calc(50% - 2 * 14px);
+ max-height: calc(50% - 2 * 14px);
+ width: calc(50% - 2 * 14px);
+ height: calc(50% - 2 * 14px);
+ margin-top: 10px;
+
+ svg {
+ display: none;
+ }
+
+ &.link-icon, &.account-plus-icon {
+ background-image: var(--original-icon-folder-overlay-share-white);
+ }
+
+ &.key-icon {
+ background-image: var(--original-icon-folder-overlay-lock-white);
+ }
+ }
+ }
+ }
+
+ .files-list__row-name-link {
+ padding: 0.5rem;
+ width: calc(100% - 1.75rem);
+ margin: 1.75rem 0 0;
+ }
+
+ .files-list__row-name-text {
+ padding: 0;
+ margin: 0;
+ }
+
+ display: grid;
+ flex-direction: column;
+ justify-content: stretch;
+ width: 100%;
+ height: 100%;
+ grid-auto-rows: var(--row-height) var(--clickable-area) !important;
+ }
+
+ td.files-list__row-actions {
+ width: 1.5rem;
+
+ .action-item__menutoggle {
+ padding: 0;
+ min-width: 1.5rem;
+ width: 1.5rem !important;
+ }
+
+ right: 0.25rem;
+ bottom: 0;
+ }
+
+ td.files-list__row-mtime {
+ display: none;
+ }
+
+ .files-list__row-icon {
+
+ .files-list__row-icon-favorite {
+ height: var(--clickable-area) !important;
+ width: var(--clickable-area) !important;
+ top: 4px;
+
+ .icon-vue {
+ width: 24px;
+ height: 24px;
+
+ svg {
+ display: none;
+ }
+ }
+ }
+
+
+ img {
+ overflow: hidden;
+ width: var(--icon-preview-size) !important;
+ height: var(--icon-preview-size) !important;
+ border-radius: var(--border-radius);
+ object-fit: contain;
+ object-position: center;
+
+ background-color: unset;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ border: none;
+ height: 44px;
+ margin-top: 0.5rem;
+ width: 44px;
+ }
+ }
+ }
+ }
+ }
+
+ tbody {
+ tr:last-child {
+ border-bottom: 0;;
+ }
+ }
+
+ // Files table and grid
+ table.files-list__table {
+
+ thead {
+ background-color: var(--color-main-background);
+ opacity: 1;
+ top: 0;
+
+ @include files-checkboxes-v28;
+
+ th.files-list__column.files-list__ {
+ &row-checkbox {
+ width: 4rem;
+
+ .checkbox-radio-switch__input:focus-visible + .checkbox-radio-switch__content {
+ border: none !important;
+ outline: none !important;
+ }
+ }
+
+ &row-name {
+ width: 100vw;
+
+ .files-list__column-sort-button {
+ padding: 0 0 0 4rem;
+ margin: 0;
+ }
+
+ @include files-table-columns-v28;
+ }
+
+
+ &row-trashbin-files_trashbin--deleted-by {
+ display: none;
+ }
+
+ &row-size,
+ &row-mtime,
+ &row-trashbin-files_trashbin--original-location,
+ &row-trashbin-files_trashbin--deleted {
+ min-width: 140px;
+ text-align: right;
+
+ .files-list__column-sort-button {
+ padding: 0;
+ margin: 0;
+ }
+
+ @include files-table-columns-v28;
+ }
+
+ &row-mime {
+ min-width: 140px;
+ text-align: left;
+
+ .files-list__column-sort-button {
+ padding: 0;
+ margin: 0;
+ &-text {
+ color: var(--color-main-text);
+ }
+ }
+ }
+
+ &row-trashbin-files_trashbin--original-location {
+ min-width: 162px;
+ }
+ }
+
+ th:nth-of-type(7) {
+ span.button-vue__wrapper {
+ padding-bottom: 5px;
+
+ svg {
+ color: var(--color-text-maxcontrast);
+ opacity: 1;
+ display: block;
+ visibility: visible;
+ }
+
+ span.files-list__column-sort-button-text {
+ color: var(--color-main-text);
+ }
+
+ &:hover {
+ svg {
+ color: var(--color-primary);
+ }
+
+ span.files-list__column-sort-button-text {
+ color: var(--color-primary);
+ }
+ }
+ }
+
+ }
+ }
+
+ tfoot {
+
+ .summary {
+ color: var(--color-main-text);
+
+ .filesummary {
+ padding-top: 20px;
+ }
+ }
+ }
+ }
+
+
+ thead {
+
+ tr {
+ height: 56px;
+ }
+ }
+
+
+ // Not File Grid View for v30
+ &:not(.files-list--grid) {
+
+ .files-list__row-icon {
+ flex: 0 0 3rem;
+ margin-right: 0;
+ margin-left: 0;
+ z-index: 100;
+
+ .material-design-icon:not(.play-circle-icon) {
+ @include thumbnail-icons();
+
+ &.folder-icon,
+ &.folder-open-icon {
+
+ svg {
+ width: 44px;
+ height: 36px;
+ color: var(--nmc-ods-blue);
+
+ path {
+ transform: scale(1.5, 1.5);
+ transform-origin: center;
+ }
+ }
+ }
+
+ &.files-list__row-icon-overlay {
+ height: 1.5rem;
+ margin-top: 0.25rem;
+ width: 1.5rem;
+
+ svg {
+ display: none;
+ }
+
+ &.link-icon, &.account-plus-icon {
+ background-image: var(--original-icon-folder-overlay-share-white);
+ }
+
+ &.key-icon {
+ background-image: var(--original-icon-folder-overlay-lock-white);
+ }
+ }
+ }
+ }
+
+ &.files-list__tbody--grid {
+ @include files-checkboxes-v28;
+ }
+
+ @include files-checkboxes-v28;
+
+ tbody {
+
+ tr {
+ height: 68px;
+
+ &.highlighted,
+ &.selected,
+ &:not(.hidden):active,
+ &:not(.hidden):focus,
+ &:not(.hidden).mouseOver td {
+ background-color: var(--color-background-dark);
+ }
+
+ &:not(.hidden):not(.highlighted):not(.selected):hover {
+ background-color: var(--color-background-hover);
+ }
+
+ td {
+ .files-list__row-icon {
+
+ .files-list__row-icon-preview-container {
+ position: unset;
+ overflow: unset;
+ width: unset;
+ height: unset;
+ border-radius: unset;
+
+ img {
+ background-color: unset;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ border: none;
+ height: 44px;
+ margin-top: 0.2rem;
+ width: 44px;
+ }
+
+ .files-list__row-icon-favorite {
+ width: 24px;
+ height: 24px;
+
+ .icon-vue {
+ background-size: 24px;
+ width: 24px;
+ height: 24px;
+
+ svg {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+
+ &.files-list__row-checkbox {
+ width: 4rem;
+ }
+
+ &.files-list__row-name {
+ overflow: visible;
+ }
+
+ &.files-list__row-trashbin-files_trashbin--deleted-by {
+ display: none;
+ }
+
+ .files-list__row-name-link {
+ display: flex;
+ align-items: center;
+ text-align: start;
+ width: 100%;
+ height: 100%;
+ min-height: 36px;
+ min-width: 0;
+ margin: 0;
+ padding: 0 1rem;
+ box-shadow: none !important;
+
+ .files-list__row-name-text {
+ margin: 0;
+ padding: 3px;
+
+ span {
+ outline: none;
+ }
+ }
+ }
+
+ &.files-list__row-mtime,
+ &.files-list__row-size,
+ &.files-list__row-trashbin-files_trashbin--original-location,
+ &.files-list__row-trashbin-files_trashbin--deleted,
+ &.column-last {
+ min-width: 140px;
+ text-align: right;
+
+ span {
+ color: var(--color-main-text);
+ }
+ }
+
+ &.files-list__row-trashbin-files_trashbin--original-location {
+ min-width: 162px;
+ }
+
+ &.files-list__row-size {
+ min-width: 140px;
+ }
+
+ &.files-list__row-mime {
+ width: 140px;
+
+ span {
+ color: var(--color-main-text);
+ }
+ }
+
+ &.files-list__row-actions {
+ display: flex;
+
+ .action-items {
+
+ button.action-item {
+ padding: 0;
+
+ &:active,
+ &:hover {
+ background: none;
+ }
+
+ .button-vue__wrapper {
+
+ .button-vue__text {
+ margin: 0;
+ color: var(--color-primary-element);
+ }
.button-vue__icon {
background-position: center;
@@ -572,6 +1329,26 @@ table.files-filestable {
}
}
+ &.files-list__row-action-accept-share {
+
+ .button-vue__icon {
+ background-image: var(--icon-check-dark);
+ @include magenta-icon;
+ }
+ }
+
+ &.files-list__row-action-reject-share {
+
+ .button-vue__icon {
+ background-image: var(--icon-close-dark);
+ @include macaw-icon;
+ }
+
+ .button-vue__text {
+ color: var(--nmc-ods-blue);
+ }
+ }
+
&.files-list__row-action-sharing-status {
display: none;
@@ -591,16 +1368,106 @@ table.files-filestable {
&.files-list__row-action-sharing-popup {
direction: rtl;
margin: 0;
+ border: 1px solid var(--color-main-text);
+ border-radius: 50%;
+ 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;
+ transition: all 0.15s ease-in-out;
.button-vue__icon {
background-image: var(--icon-shared-dark);
+ background-size: 16px 16px;
+ width: 16px;
+ height: 16px;
}
- &.button-vue--icon-and-text .button-vue__icon {
- @include magenta-icon;
+ // Active/existing share state - when file is shared
+ &.active,
+ &[aria-pressed="true"],
+ &.button-vue--icon-and-text {
+ border: none;
+ background-color: var(--nmc-ods-blue-primary) !important;
+
+ .button-vue__icon {
+ filter: brightness(0);
+ }
+
+ .button-vue__text {
+ color: var(--nmc-color-text-and-icon-black);
+ }
+
+ [data-themes*=dark] & {
+ .button-vue__icon {
+ filter: brightness(0);
+ }
+ }
+ }
+
+ &.button-vue--icon-and-text {
+ border-color: var(--nmc-ods-blue-primary);
+ background-color: var(--nmc-ods-blue-primary);
+ }
+
+ &:hover {
+ border-color: var(--nmc-ods-blue-hover);
+ background-color: var(--nmc-ods-blue-hover);
+
+ .button-vue__icon {
+ filter: brightness(0);
+ }
+ }
+
+ // When shared, maintain blue on hover with lighter shade
+ &.active:hover,
+ &[aria-pressed="true"]:hover,
+ &.button-vue--icon-and-text:hover {
+ background-color: var(--nmc-ods-blue-hover) !important;
+ }
+
+ &:active {
+ border: none;
+ background-color: var(--nmc-ods-blue-pressed);
+
+ .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,
+ &:focus,
+ &:focus-visible {
+ outline: 2px solid var(--color-main-text);
+ outline-offset: 2px;
+
+ // Only apply blue bg on focus if not already shared
+ &:not(.active):not([aria-pressed="true"]):not(.button-vue--icon-and-text) {
+ border: none;
+ background-color: var(--nmc-ods-blue-primary);
+
+ .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,
&.button-vue--icon-and-text[aria-label="Shared with me"] .button-vue__icon {
background-image: var(--icon-upload-to-cloud-dark);
filter: invert(61%) sepia(98%) saturate(4546%) hue-rotate(181deg) brightness(99%) contrast(109%);
@@ -622,10 +1489,37 @@ table.files-filestable {
// ... action menu
div.action-item {
+
button.action-item__menutoggle {
- &:hover svg {
+ border: 1px solid var(--color-main-text);
+ border-radius: 50%;
+ 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;
+
+ svg {
+ width: 16px;
+ height: 16px;
color: var(--color-main-text);
}
+
+ &:hover,
+ &:active,
+ &.active,
+ &[aria-pressed="true"],
+ &:focus,
+ &:focus-visible {
+ background-color: var(--color-main-hover);
+
+ svg {
+ color: var(--color-main-text);
+ }
+ }
}
}
}
@@ -634,105 +1528,168 @@ table.files-filestable {
}
}
- tbody.files-list__tbody--grid {
- margin: 15px 0;
+ // Hide sharing-popup and actions menu for pending share rows
+ tbody tr:has(.files-list__row-action-accept-share) {
+ td.files-list__row-actions {
+ .action-items {
+ button.action-item.files-list__row-action-sharing-popup {
+ display: none !important;
+ }
- tr {
- &.files-list__row {
+ button.action-item__menutoggle {
+ display: none !important;
+ }
- &:hover,
- &:focus,
- &:active,
- &--active {
- background-color: var(--nmc-color-row-hover);
+ li.action:not(.files-list__row-action-accept-share):not(.files-list__row-action-reject-share) {
+ display: none !important;
}
}
+ }
+ }
+ }
+ }
+}
- td.files-list__row-checkbox {
- width: 26px;
- height: 26px;
- @include files-checkboxes-v28;
- span.checkbox-content {
- padding: 0;
- }
- }
- td.files-list__row-name {
+#body-user,
+#body-public {
- .files-list__row-name-link {
- padding: 0.5rem;
- width: 90%;
- }
+ &[data-themes*=dark] {
- .files-list__row-name-text {
- padding: 0;
- }
+ .files-list__empty {
+
+ .empty-content {
+
+ &[data-cy-files-content-empty="files"] {
+
+ .empty-content__icon {
+ background-image: url('../img/decorative_images/mouse-dark.svg');
}
+ }
- td.files-list__row-actions {
- width: 1.5rem;
+ &[data-cy-files-content-empty="sharingin"] {
- .action-item__menutoggle {
- padding: 0;
- min-width: 1.5rem;
- width: 1.5rem !important;
- }
+ .empty-content__icon {
+ background-image: url('../img/decorative_images/sad-unicorn-dark.svg');
}
+ }
- .files-list__row-icon {
+ &[data-cy-files-content-empty="sharingout"] {
- .material-design-icon:not(.play-circle-icon) {
- @include thumbnail-icons();
- margin: 0;
- max-width: calc(100% - 2 * 14px);
- max-height: calc(100% - 2 * 14px);
- width: calc(100% - 2 * 14px);
- height: calc(100% - 2 * 14px);
- position: absolute;
-
- &.folder-icon {
- background-image: var(--icon-mime-folder-dark);
- }
+ .empty-content__icon {
+ background-image: url('../img/decorative_images/cat-family-dark.svg');
+ }
+ }
- &.link-icon {
- background-image: var(--icon-mime-folder-shared-dark);
- }
+ &[data-cy-files-content-empty="pendingshares"] {
- &.key-icon {
- background-image: var(--icon-mime-folder-encrypted-dark);
- }
- }
+ .empty-content__icon {
+ background-image: url('../img/decorative_images/pandas-dark.svg');
+ }
+ }
- .files-list__row-icon-favorite {
- top: calc(100% - 25px);
- left: calc(50% - 22px);
+ &[data-cy-files-content-empty="trashbin"] {
- .icon-vue {
- width: 24px;
- height: 24px;
+ .empty-content__icon {
+ background-image: url('../img/decorative_images/cat-dark.svg');
+ }
+ }
- svg {
- display: none;
- }
- }
- }
+ &[data-cy-files-content-empty="favorites"] {
+
+ .empty-content__icon {
+ background-image: url('../img/decorative_images/unicorn-dark.svg');
}
}
}
+ }
+ }
+}
- tfoot {
+// Pending shares page: disable name link so files cannot be opened before accepting the share
+body.nmc-pendingshares-view {
+ .files-list__row-name-link {
+ pointer-events: none;
+ cursor: default;
+ }
- .summary {
- color: var(--color-main-text);
+ .files-list:not(.files-list--grid) .files-list__row-icon .material-design-icon svg {
+ width: 44px !important;
+ height: 36px !important;
+ }
- .filesummary {
- padding-top: 20px;
- }
- }
+ .files-list__row-actions-batch-move-copy,
+ .files-list__row-actions-batch-download,
+ .files-list__row-actions-batch-delete,
+ .files-list__row-actions-batch-cancel_select,
+ .files-list__row-actions-batch-favorite {
+ display: none;
+ }
+
+ @media screen and (min-width: $breakpoint-mobile) {
+ .action-items > div.action-item {
+ display: none;
+ }
+ }
+}
+
+#body-user,
+#body-public {
+
+ .conflict-picker {
+
+ .conflict-picker__header, .conflict-picker-description, .conflict-picker__form {
+ padding: 0 0 1.5rem;
+ }
+
+ .dialog__actions {
+ margin: 0;
+ padding: 0;
+
+ .button-vue--vue-primary, .button-vue--vue-secondary, .button-vue--vue-tertiary {
+ margin-block: 0.5rem !important;
+ margin-inline: 0;
}
}
}
+
+ .files-list-filter__clear-button {
+ background: var(--nmc-ods-blue-primary);
+ border-radius: var(--border-radius-pill);
+ border: none;
+
+ .action-button {
+ padding: 0;
+ }
+
+ .action-button__icon {
+ display: none;
+ }
+
+ .action-button__longtext-wrapper {
+ width: 100%;
+ text-align: center;
+ }
+
+ .action-button__text {
+ color: var(--nmc-color-text-and-icon-black);
+ font-weight: bold;
+ }
+
+ &:hover {
+ background-color: var(--nmc-ods-blue-hover);
+ }
+ }
+}
+
+// Hide WebDAV, Warnings, and Keyboard shortcuts sections in Files settings
+.app-settings__content {
+ #settings-section_webdav,
+ #settings-section_warning,
+ #settings-section_shortcuts {
+ display: none;
+ }
}
// Deleted Files list table and header
@@ -765,12 +1722,12 @@ table.files-filestable {
label.checkbox-radio-switch__label>span.checkbox-radio-switch__icon {
background-image: var(--original-icon-check-white);
- background-color: var(--telekom-color-functional-success-standard);
+ background-color: var(--color-success);
background-position: center;
background-repeat: no-repeat;
background-size: 18px;
border: none;
- border-radius: var(--telekom-radius-circle);
+ border-radius: var(--border-radius-pill);
height: 1.5rem;
width: 1.5rem;
margin: -2px -2px 0 0;
@@ -791,11 +1748,6 @@ table.files-filestable {
margin-right: 16px;
margin-left: 24px;
z-index: 100;
-
- .material-design-icon.folder-icon {
- background-image: var(--icon-mime-folder-dark);
- @include thumbnail-icons();
- }
}
}
}
@@ -819,7 +1771,7 @@ table.files-filestable {
&:focus,
&:focus-visible {
background-color: transparent;
- color: var(--telekom-color-text-and-icon-primary-standard);
+ color: var(--color-primary);
outline: none;
}
@@ -846,12 +1798,40 @@ table.files-filestable {
color: var(--color-main-text) !important;
}
}
+ }
- // 3-dot menu on rows
- .v-popper__popper--shown .v-popper__wrapper .v-popper__inner {
- ul[role="menu"] {
- li.files-list__row-action.files-list__row-action-rename, li.files-list__row-action-sharing-status, li.files-list__row-action-sharing-manage {
- display: none;
+ .files-list__header--public {
+ &+.files-list{
+ .files-list__filters {
+ display: none;
+ }
+
+ table {
+ thead > tr > th {
+ &.files-list__row-mime {
+ display: none;
+ }
+ }
+ tbody > tr > td {
+ &.files-list__row-actions {
+ }
+
+ &.files-list__row-mime {
+ display: none;
+ }
+ }
+ }
+
+ .v-popper__popper {
+ ul {
+ li {
+ &[data-cy-files-list-row-action="sharing-popup-menu"] {
+ display: none;
+ }
+ &[data-cy-files-list-row-action="sharing-manage"] {
+ display: none;
+ }
+ }
}
}
}
diff --git a/css/apps/photos.scss b/css/apps/photos.scss
index c4cc419d..4a02b992 100644
--- a/css/apps/photos.scss
+++ b/css/apps/photos.scss
@@ -22,26 +22,159 @@
#app-content-vue {
- // hide 'Add' button breadcrumbs for all menu pages
- .timeline {
+ .photos-navigation {
- .photos-navigation {
+ &__bulk-operations {
+ display: flex;
+ width: 100%;
+ margin-top: 1.5rem;
+ margin-left: -3.5rem;
- &__content .action-item {
- display: none;
+ .icon-minus {
+ width: 24px;
+ height: 24px;
+ display: inline-grid;
+ place-items: center;
+ background: #e5007d;
+ border: 0;
+ border-radius: min(30%, 28px);
+ padding: 0;
+ cursor: pointer;
+
+ box-shadow:
+ 0 1px 2px rgba(0,0,0,.15),
+ inset 0 0 0 1px rgba(255,255,255,.08);
+ }
+
+ .icon-minus::before {
+ content: "";
+ width: 50%;
+ height: 2px;
+ background: #fff;
+ border-radius: 999px;
+ box-shadow: 0 0 0.5px rgba(0,0,0,.15);
+ }
+
+ .button-vue {
+ background-color: var(--nmc-ods-blue-primary);
+ border-radius: 9999px;
+ margin: 0;
+ min-height: unset;
+ min-width: unset;
+ padding-block: 0.25rem;
+ padding-inline: 1rem;
+
+ &.action-item__menutoggle {
+ padding-inline: 0;
+ width: 40px !important;
+ }
+
+ &__icon {
+ height: 2rem;
+ min-height: 2rem;
+ width: 2rem;
+ min-width: 2rem;
+ margin-left: -0.5rem;
+ }
+
+ &__text {
+ padding: 0;
+ font-weight: bold;
+ font-size: 14px;
+ }
+
+ .material-design-icon {
+ background-size: 20px;
+ background-repeat: no-repeat;
+ background-position: center;
+ width: 24px;
+ height: 24px;
+
+ svg {
+ display: none;
+ }
+
+ &.image-multiple-outline-icon {
+ background-image: var(--icon-albums-dark);
+ filter: brightness(0) saturate(100%);
+ }
+
+ &.tray-arrow-down-icon {
+ background-image: var(--icon-download-dark);
+ filter: brightness(0) saturate(100%);
+ }
+
+ &.trash-can-outline-icon {
+ background-image: var(--icon-delete-dark);
+ filter: brightness(0) saturate(100%);
+ }
+
+ &.close-icon {
+ background-image: var(--icon-close-dark);
+ filter: brightness(0) saturate(100%);
+ }
+
+ &.dots-horizontal-icon {
+ margin-left: 0.5rem;
+ filter: brightness(0) saturate(100%);
+
+ svg {
+ display: block;
+ }
+ }
+ }
+ }
+
+ &__selected {
+ padding: 0 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+
+ .selected__count {
+ font-weight: 500;
+ color: var(--color-text-secondary);
+ }
+ }
+ }
+
+ &__title {
+ max-width: 65%;
+ .album__details {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
}
}
.photos-navigation {
+ flex-wrap: wrap;
+ gap: 0;
+ padding-block: 18px 1rem;
+ padding-inline: 4rem 1.5rem;
+
&__title__main {
- font-size: 2rem;
+ font-size: 1.75rem;
}
- &__content {
+ &__back {
+ width: 44px !important;
+ height: 44px !important;
+ min-width: 44px !important;
+ min-height: 44px !important;
- .upload-picker button {
- display: none;
+ .arrow-left-icon {
+ background-image: var(--icon-left-condensed-dark);
+ background-size: 24px;
+ background-repeat: no-repeat;
+ background-position: center;
+ width: 24px;
+ height: 24px;
+
+ svg {
+ display: none;
+ }
}
}
@@ -63,15 +196,39 @@
&__content-right,
&__content-buttons {
+ .upload-picker {
+ height: 40px;
+ }
+
button {
+ border-radius: var(--border-radius-rounded);
+ border: none;
+
line-height: 1rem;
- min-height: unset;
- min-width: unset;
- padding-left: 0;
- padding-right: 0;
margin: 0;
-
+ min-height: unset;
+ height: 40px;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ width: auto !important;
+
+ &.button-vue--icon-only {
+ width: 40px !important;
+ min-width: 40px;
+ }
+ &[data-cy-header-action="create-album"] {
+
+ .button-vue__icon {
+ background-image: var(--original-icon-add-white);
+ background-size: 20px;
+ background-repeat: no-repeat;
+ background-position: center;
+ width: 24px;
+ height: 24px;
+ }
+ }
+
.button-vue__icon {
height: 2rem;
min-height: 2rem;
@@ -91,11 +248,33 @@
background-size: 18px;
&.view-dashboard-outline-icon {
- rotate: 90deg;
+ background-image: var(--icon-grid-ratio-dark);
+ background-size: 20px;
+ background-repeat: no-repeat;
+ background-position: center;
+ width: 24px;
+ height: 24px;
+
+ svg {
+ display: none;
+ }
+ }
+
+ &.view-grid-outline-icon {
+ background-image: var(--icon-grid-square-dark);
+ background-size: 20px;
+ background-repeat: no-repeat;
+ background-position: center;
+ width: 24px;
+ height: 24px;
+
+ svg {
+ display: none;
+ }
}
}
- .delete-icon {
+ .trash-can-outline-icon {
background-image: var(--icon-delete-dark);
svg {
@@ -114,20 +293,37 @@
.button-vue__text {
padding: 0;
- font-weight: normal;
- font-size: 14px;
padding-right: 0.5rem;
+ font-weight: bold;
+ margin-bottom: 1px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
&:hover {
- background-color: initial;
svg,
.button-vue__text {
- color: var(--telekom-color-text-and-icon-primary-hovered);
+ color: unset;
}
}
}
+
+ &__buttons {
+ .button-vue {
+ border: 1px solid var(--color-main-text);
+ border-radius: 50%;
+ 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;
+ }
+ }
}
&__content-buttons {
@@ -140,6 +336,7 @@
}
.albums-list {
+
.photos-navigation {
// show 'Add' button for "Create a new album"
@@ -150,7 +347,7 @@
}
.files-list-viewer, .photos-picker {
- padding: 0 2rem;
+ padding: 0 1.5rem;
@media only screen and (max-width: 640px) {
padding: 0 1rem;
@@ -160,13 +357,41 @@
.section-header {
font-size: 1rem;
height: auto !important;
- margin: 2rem 0 0.5rem;
+ margin: 1rem 0 0.5rem;
}
li {
// prevent stretching a low number of photos in line to fill it
flex-grow: 0;
+ .file__images img {
+ border-radius: var(--border-radius-large);
+ }
+
+ .file-container {
+ background: none;
+
+ &.selected:after, &:focus-within:after, &:has(:focus):after {
+ border-radius: var(--border-radius-large);
+ outline: var(--color-primary-element) solid 2px;
+ outline-offset: -2px;
+ }
+
+ &.selected:before, &:focus-within:before, &:has(:focus):before {
+ border-radius: var(--border-radius-large);
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ z-index: 2;
+ width: 100%;
+ height: 100%;
+ content: "";
+ outline: var(--color-main-background) solid 2px;
+ outline-offset: -4px;
+ pointer-events: none;
+ }
+ }
+
// new play icon for videos
span.video-icon {
background-image: var(--icon-play-video-white);
@@ -184,11 +409,12 @@
&.icon-vue {
width: 3rem;
height: 3rem;
- background-size: 1.5rem;
+ background-size: 20px;
bottom: 0;
left: 0;
right: unset;
top: unset;
+ z-index: 999;
svg {
display: none;
@@ -196,85 +422,129 @@
}
}
+ .file__favorite {
+
+ .star-icon {
+ background-image: var(--icon-starred-yellow);
+ }
+ }
+
.hover-overlay {
- height: 3rem;
- background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
+ background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
+ border-radius: var(--border-radius-large);
+ height: 50%;
+ min-height: 3rem;
+ justify-content: space-between;
+
+ .actions-right{
+ display: grid;
+ gap: 0 30px;
+ grid: auto-flow/3fr 3fr;
+
+ @media screen and (max-width: $breakpoint-mobile) {
+ display: none;
+ }
+ }
}
.delete-icon {
- background-image: var(--icon-delete-white);
- width: 3rem;
+ background-image: var(--original-icon-delete-white);
+ width: 2rem;
height: 3rem;
+ background-size: 20px;
svg {
display: none;
}
&:active {
- background-size: 2rem;
+ background-size: 24px;
}
}
.star-icon {
- background-image: var(--icon-star-white);
+ background-image: var(--original-icon-star-white);
width: 3rem;
height: 3rem;
+ background-size: 20px;
svg {
display: none;
}
&:active {
- background-size: 2rem;
+ background-size: 24px;
}
}
+
+ .information-icon {
+ background-image: var(--icon-details-white);
+ filter: brightness(0) invert(1);
+ width: 2rem;
+ height: 3rem;
+ background-size: 20px;
+ position: absolute;
+ z-index: 1001;
+ bottom: 0;
- .file__favorite {
+ svg {
+ display: none;
+ }
- .star-icon {
- background-image: var(--icon-starred-yellow);
+ &:active {
+ background-size: 24px;
}
}
- .checkbox-radio-switch.selection-checkbox {
- top: 2px;
+ .checkbox-radio-switch-checkbox {
+ top: -2px;
right: 2px;
-
+
.checkbox-content {
- background: transparent;
-
- .material-design-icon {
- background-color: var(--color-main-background);
- border: 1px solid var(--color-primary-element);
- border-radius: var(--telekom-radius-small);
- height: 18px;
- width: 18px;
- margin: 0;
-
- &.checkbox-marked-icon {
+ background: none;
+
+ &:hover {
+ background: none;
+ }
+
+ &__icon {
+
+ &:not(.checkbox-content__icon--checked) {
+
+ .checkbox-blank-outline-icon {
+ background-color: var(--nmc-color-text-and-icon-white);
+ border: 1px solid var(--nmc-color-text-and-icon-black);
+ border-radius: var(--border-radius-small);
+ width: 20px;
+ height: 20px;
+
+ svg {
+ display: none;
+ }
+
+ &:hover {
+ border-color: var(--color-border-dark);
+ background-color: var(--color-background-hover);
+ }
+ }
+ }
+
+ &.checkbox-content__icon--checked {
background-image: var(--original-icon-check-white);
- background-color: var(--color-primary-element);
+ background-color: var(--color-primary);
background-position: center;
background-repeat: no-repeat;
- background-size: 18px;
- }
- }
-
- &:hover {
-
- .material-design-icon {
- background-color: var(--color-background-hover);
- border: 1px solid var(--color-primary-element-hover);
-
- &.checkbox-marked-icon {
- background-color: var(--color-primary-element-hover);
+ background-size: 16px;
+ border: 1px solid var(--color-primary);
+ border-radius: var(--border-radius-small);
+ width: 20px;
+ height: 20px;
+
+ .checkbox-marked-icon {
+ display: none;
}
}
}
-
- svg {
- display: none;
- }
}
}
}
@@ -302,12 +572,12 @@
// replace standart folder icon
span.icon-folder {
- background-image: var(--icon-mime-folder-dark);
+ background-image: var(--icon-mime-folder-blue);
opacity: 1;
}
&__name {
- color: var(--color-text-light);
+ color: var(--color-text-lighter);
font-weight: bold;
text-shadow: none;
}
@@ -364,24 +634,20 @@
}
}
- .collection__media {
- padding: 2rem 3rem;
- }
-
.collection-cover {
- background-color: var(--telekom-color-background-surface);
+ background-color: var(--color-main-background);
&__image {
&--placeholder {
+ display: block;
// empty album icon
- span.image-multiple-icon {
+ .image-multiple-outline-icon {
background-image: var(--icon-albums-dark);
background-repeat: no-repeat;
background-position: center;
background-size: 96px;
- background-color: #f2f2f2;
svg {
display: none;
@@ -389,25 +655,10 @@
}
}
}
- }
-
- // 'No albums' page
- .empty-content {
- &__icon {
- width: 120px;
- height: 120px;
-
- span.folder-multiple-image-icon {
- svg {
- display: none;
- }
-
- background-image: var(--icon-albums-dark);
- width: 100%;
- height: 100%;
- background-size: 120px;
- background-repeat: no-repeat;
- background-position: center;
+
+ &__details {
+ .material-design-icon{
+ display: none;
}
}
}
@@ -418,42 +669,115 @@
}
}
- // 'Albums' - empty album page
.empty-content {
+ display: none;
+
+ &.album__empty {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: start;
+ flex-grow: 1;
+ padding: 1.5rem;
+
+ .empty-content__icon {
+ background-color: var(--nmc-color-text-and-icon-white);
+ height: 420px;
+ margin-top: 2.5rem;
+ opacity: 1;
+ width: 480px;
+ }
+ }
+
+ &.empty-content-with-illustration {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ flex-grow: 1;
+ height: 100%;
+ padding: 1.5rem;
+ }
+
&__icon {
- opacity: 1;
- width: 120px;
- height: 120px;
- margin-bottom: 0;
- span.image-plus-icon {
+ .image-plus-outline-icon {
+ background-image: url(../img/decorative_images/empty-files.svg);
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ height: 100%;
+ width: 100%;
+
+ @media (prefers-color-scheme: dark) {
+ background-image: url(../img/decorative_images/empty-files-dark.svg);
+ }
+
svg {
display: none;
}
+ }
+ }
+ }
- background-image: var(--icon-all-media-dark);
- width: 100%;
- height: 100%;
- background-size: 120px;
- background-repeat: no-repeat;
- background-position: center;
+ // 'Albums' - empty album page
+ .empty-collection-content {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ flex-grow: 1;
+ padding: 1.5rem;
+
+ .empty-content__wrapper {
+ margin-top: 2.5rem;
+ height: 420px;
+ width: 480px;
+ }
+ .empty-content__image {
+ background-image: url(../img/decorative_images/empty-files.svg);
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ height: 100%;
+ width: 100%;
+
+ &.empty-collection-content__image {
+ background-image: url(../img/decorative_images/empty-albums.svg);
}
}
- &__title {
- line-height: normal;
- margin-top: 24px;
- margin-bottom: 32px;
+ &[data-title="videos"] .empty-content__image {
+ background-image: url(../img/decorative_images/empty-videos.svg);
}
- &__action {
- margin: 0;
+ @media (prefers-color-scheme: dark) {
- button.album__empty__button {
- margin: 0;
+ .empty-content__image {
+ background-image: url(../img/decorative_images/empty-files-dark.svg);
+
+ &.empty-collection-content__image {
+ background-image: url(../img/decorative_images/empty-albums-dark.svg);
+ }
+ }
+
+ &[data-title="videos"] .empty-content__image {
+ background-image: url(../img/decorative_images/empty-videos-dark.svg);
}
}
+
+ .empty-content__name {
+ font-size: 2rem;
+ margin-block: 1rem;
+ min-height: 2.5rem;
+ line-height: 2.5rem;
+ text-align: center;
+ }
+
+ .empty-content__action {
+ margin-bottom: 1rem;
+ }
}
.album__location {
@@ -483,6 +807,7 @@
}
&.app-navigation__content {
+
ul.app-navigation__list {
padding: 4rem 1.5rem 1.5rem;
@@ -490,12 +815,14 @@
order: 2;
&[data-id-app-nav-item="shared-albums"],
+ &[data-id-app-nav-item="sharedalbums"],
&[data-id-app-nav-item="faces"],
&[data-id-app-nav-item="this-day"],
&[data-id-app-nav-item="shared"],
&[data-id-app-nav-item="maps"],
&[data-id-app-nav-item="places"],
- &[data-id-app-nav-item="tags"] {
+ &[data-id-app-nav-item="tags"],
+ &[data-id-app-nav-item="folders"] {
display: none;
}
@@ -520,44 +847,89 @@
display: none;
}
- &.star-icon {
+ // Star icons (Favorites)
+ &.star-icon,
+ &.star-outline-icon {
background-image: var(--icon-star-dark);
}
- &.folder-icon {
+ // Folder icons (Folders)
+ &.folder-icon,
+ &.folder-outline-icon {
background-image: var(--icon-folder-dark);
}
- &.camera-icon {
- background-image: var(--icon-photo-camera-dark);
+ // Camera icons (Photos)
+ &.camera-icon,
+ &.camera-outline-icon {
+ background-image: var(--icon-photo-camera-media-dark);
}
- &.video-icon {
- background-image: var(--icon-camera-dark);
+ // Video icons (Videos)
+ &.video-icon,
+ &.video-outline-icon {
+ background-image: var(--icon-video-camera-media-dark);
}
- &.folder-multiple-image-icon {
+ // Image Multiple icons (Albums)
+ &.folder-multiple-image-icon,
+ &.image-multiple-icon,
+ &.image-multiple-outline-icon {
background-image: var(--icon-albums-dark);
}
- &.image-icon {
- background-image: var(--icon-photos-videos-dark);
+ // Image icons (All media)
+ &.image-icon,
+ &.image-outline-icon {
+ background-image: var(--icon-all-media-dark);
}
- &.share-variant-icon {
- background-image: var(--icon-attachment-dark);
+ // Share/Account Group icons (Collaborative albums)
+ &.share-variant-icon,
+ &.account-group-icon,
+ &.account-group-outline-icon {
+ background-image: var(--icon-shared-dark);
}
- &.account-group-icon {
- background-image: var(--icon-shared-dark);
+ // Calendar icons (On this day)
+ &.calendar-today-icon,
+ &.calendar-today-outline-icon {
+ background-image: var(--icon-calendar-dark);
+ }
+
+ // Account Box Multiple icons (People/Faces)
+ &.account-box-multiple-icon,
+ &.account-box-multiple-outline-icon {
+ background-image: var(--icon-people-dark);
+ }
+ }
+ }
+
+ button {
+ margin: 0;
+ padding: 0;
+
+ .button-vue__icon {
+ width: 48px;
+ height: 48px;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 24px;
+
+ svg {
+ width: 24px;
+ height: 24px;
}
}
+
+ &:hover:not(:disabled) {
+ background-color: transparent;
+ }
}
}
}
- // contains 'Photos settings' button
.app-navigation__footer {
display: none;
}
@@ -566,121 +938,269 @@
}
}
-// New album modal window
-#body-user .modal-container {
+#body-user,
+#body-public {
- .album-form,
- .album-picker {
- background-color: var(--telekom-color-background-surface);
- height: auto;
- padding: 1.5rem !important;
+ &[data-themes*=dark] {
- div.form-inputs {
+ .app-photos {
- // 'Name of the album' input field
- .input-field {
- margin-bottom: 1rem;
- }
+ #app-content-vue {
- // hide 'Location of the album' input
- &>label {
- display: none;
- }
- }
+ .empty-collection-content {
- .form-buttons {
+ .empty-content__image {
+ background-image: url(../img/decorative_images/empty-files-dark.svg);
- .left-buttons {
+ &.empty-collection-content__image {
+ background-image: url(../img/decorative_images/empty-albums-dark.svg);
+ }
+ }
- // 'Back' button
- .button-vue--vue-tertiary {
- border: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-border-standard);
+ &[data-title="videos"] .empty-content__image {
+ background-image: url(../img/decorative_images/empty-videos-dark.svg);
+ }
+ }
+
+ .photos-navigation {
+
+ .empty-content {
+
+ .image-plus-outline-icon {
+ background-image: url(../img/decorative_images/empty-files-dark.svg);
+ }
+ }
}
}
+ }
- .right-buttons {
+ .empty-content {
- // Hide 'Add collaborators' button
- .button-vue--vue-secondary {
- display: none;
+ &__icon {
+
+ .image-plus-outline-icon {
+ background-image: url(../img/decorative_images/empty-files-dark.svg);
+ }
+ }
+ }
+
+ .modal-container {
+
+ .album-form {
+
+ .form-cover {
+ background-image: url(../img/decorative_images/empty-files-dark.svg);
}
+ }
- // 'Create album' button
- .button-vue--vue-primary {
- margin: 0 !important;
+ .empty-collection-content {
- .button-vue__icon {
- display: none;
- }
+ .empty-content__image {
+ background-image: url(../img/decorative_images/empty-files-dark.svg);
}
}
}
+ }
+}
- h2 {
+// New album modal window
+#body-user {
+
+ .modal-container {
+
+ .empty-collection-content {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ margin-block: 2rem -12rem;
+
+ .empty-content__wrapper {
+ height: 320px;
+ width: 420px;
+ }
+
+ .empty-content__image {
+ background-image: url(../img/decorative_images/empty-files.svg);
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ height: 100%;
+ width: 100%;
+ }
+
+ @media (prefers-color-scheme: dark) {
+ .empty-content__image {
+ background-image: url(../img/decorative_images/empty-files-dark.svg);
+ }
+ }
+
+ .empty-content__name {
+ font-size: 2rem;
+ margin-block: 1rem;
+ min-height: 2.5rem;
+ line-height: 2.5rem;
+ text-align: center;
+ }
+
+ .empty-content__action, .button-vue {
+ display: none;
+ }
+ }
+
+ .album-creation__heading {
font-size: 1.5rem;
- height: auto !important;
+ height: unset;
+ line-height: 1.5rem;
margin-bottom: 1.5rem;
+ margin-top: 0;
+ min-height: unset;
+ text-align: left;
}
- .albums-container {
- overflow-x: unset !important;
- overflow-y: auto;
- margin-bottom: 1.5rem;
+ .album-form,
+ .album-picker {
+ background-color: var(--color-main-background);
+ height: auto;
+ padding: 0 !important;
- .album {
+ div.form-inputs {
- .list-item {
- border-radius: var(--telekom-radius-standard);
- padding: 0.5rem !important;
- margin-left: 0;
- transition: none;
+ // 'Name of the album' input field
+ .input-field {
+ margin-bottom: 1rem;
+ }
- &:hover {
- background-color: var(--nmc-color-row-hover);
+ // hide 'Location of the album' input
+ &>label {
+ display: none;
+ }
+ }
+
+ .form-buttons {
+
+ .left-buttons {
+
+ // 'Back' button
+ .button-vue--vue-tertiary {
+ border: 1px solid var(--color-border);
+ }
+ }
+
+ .right-buttons {
+
+ // Hide 'Add collaborators' button
+ .button-vue--vue-secondary {
+ display: none;
+ }
+
+ // 'Create album' button
+ .button-vue--vue-primary {
+ margin: 0 !important;
+
+ .button-vue__icon {
+ display: none;
+ }
}
}
}
- }
- .new-album-button {
- background-color: var(--telekom-color-primary-standard);
- border: 0;
- color: var(--telekom-color-text-and-icon-white-standard);
- margin-right: 0;
- margin-left: 0;
+ h2 {
+ font-size: 1.5rem;
+ height: auto !important;
+ margin-block: 0 1.5rem;
+ }
+
+ .albums-container {
+ overflow-x: unset !important;
+ overflow-y: auto;
+ margin-bottom: 1.5rem;
- &:hover:not(:disabled) {
- background-color: var(--telekom-color-primary-hovered);
+ .album {
+
+ .list-item {
+ border-radius: var(--border-radius-large);
+ padding: 0.5rem !important;
+ margin-left: 0;
+ transition: none;
+
+ &:hover {
+ background-color: var(--color-background-hover);
+ }
+ }
+ }
}
- .button-vue__icon {
- margin-left: -1rem;
+ .new-album-button {
+ background-color: var(--color-primary);
+ border: 0;
+ color: var(--nmc-color-text-and-icon-white);
+ margin-right: 0;
+ margin-left: 0;
+
+ &:hover:not(:disabled) {
+ background-color: var(--color-primary-hover);
+ }
+
+ .button-vue__icon {
+ margin-left: -1rem;
+ }
}
}
- }
- .album-form {
- padding-top: 3rem !important;
+ .timeline__heading {
+ margin: 0;
+ padding: 0;
+ }
+
+ .album-form {
+ margin: 0;
+ padding: 0 !important;
- .form-inputs {
- .input-field:nth-child(2) {
- display: none;
+ .form-cover {
+ text-align: center;
+ padding: 1rem;
+ background-image: url(../img/decorative_images/empty-files.svg);
+ background-position: center;
+ background-repeat: no-repeat;
+ min-height: 320px;
+
+ @media (prefers-color-scheme: dark) {
+ background-image: url(../img/decorative_images/empty-files-dark.svg);
+ }
+
+ &__image {
+ display: none;
+ }
}
- .input-field__main-wrapper {
- label {
+ .form-inputs {
+ .input-field:nth-child(2) {
display: none;
}
+
+ .input-field__main-wrapper {
+ label {
+ display: none;
+ }
+ }
}
- }
- .form-buttons {
- flex-direction: row;
+ .form-buttons {
+ flex-direction: row;
+ gap: 0.5rem;
+ justify-content: flex-end;
+
+ .left-buttons {
+ flex-grow: unset;
+ }
+ }
}
}
}
#body-user .modal-header {
+
h2.modal-title {
display: none;
}
@@ -689,22 +1209,14 @@
// Add Photos to the album modal window
#body-user .modal-container,
#body-settings .modal-container {
- background-color: var(--telekom-color-background-surface);
+ background-color: var(--color-main-background);
button.modal-container__close {
border: none;
z-index: 20;
- &:hover:not(:disabled) {
- .close-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%;
@@ -719,15 +1231,19 @@
.dialog__name {
font-size: 1.5rem;
height: unset;
- line-height: unset;
- margin-block: 1.5rem 1rem;
+ line-height: 1.5rem;
+ margin-bottom: 1.5rem;
min-height: unset;
+ text-align: left;
}
- .photos-picker__actions {
+ .dialog__actions {
+ padding: 0;
+ margin-bottom: 0;
+ margin-top: 1rem;
- .button-vue__icon {
- display: none;
+ .button-vue--tertiary {
+ border: 1px solid var(--color-main-text);
}
}
@@ -756,7 +1272,7 @@
.material-design-icon {
background-color: var(--color-main-background);
border: 1px solid var(--color-primary-element);
- border-radius: var(--telekom-radius-small);
+ border-radius: var(-border-radius);
height: 1rem;
width: 1rem;
margin: 0;
@@ -792,8 +1308,23 @@
.file-picker {
.dialog__wrapper {
- margin-inline: 1.5rem;
margin-block: 0 1.5rem;
+ padding-inline: 0;
+ overflow: visible;
+
+ .dialog__content {
+ margin-top: 1rem;
+ padding: 0;
+ }
+ }
+
+ .dialog__actions {
+ margin-block: 0;
+ padding-inline: 0;
+
+ .button-vue--tertiary {
+ border: 1px solid var(--color-main-text);
+ }
}
&+button.modal-container__close {
@@ -801,6 +1332,50 @@
margin-top: 0.75rem;
}
+ &__breadcrumbs {
+ flex-grow: unset;
+
+ .button-vue--secondary {
+ background: var(--nmc-ods-blue-primary);
+ border-radius: var(--border-radius-pill);
+ border: none;
+ color: var(--nmc-color-text-and-icon-black);
+ margin: 0;
+
+ &:hover {
+ background-color: var(--nmc-ods-blue-hover);
+ }
+
+ &:active {
+ background-color: var(--nmc-ods-blue-pressed);
+ }
+
+ .button-vue__icon {
+ justify-content: left;
+ min-width: 2rem;
+ width: 2rem;
+
+ .folder-outline-icon {
+ background-image: var(--icon-folder-dark);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 18px;
+ width: 24px;
+ height: 24px;
+
+ svg {
+ display: none;
+ }
+ }
+ }
+
+ .button-vue__text {
+ margin: 0;
+ padding: 0;
+ }
+ }
+ }
+
&__actions {
flex-direction: row-reverse;
@@ -833,7 +1408,7 @@
// Tiled Photos view
&__file-list.files-list-viewer {
.files-list-viewer__section-header {
- background-color: var(--telekom-color-background-surface);
+ background-color: var(--color-main-background);
}
div.file-container {
@@ -864,12 +1439,12 @@
.checkbox-radio-switch__label:before {
content: "";
background-image: var(--original-icon-check-white);
- background-color: var(--telekom-color-text-and-icon-functional-success);
+ background-color: var(--color-success);
background-position: center;
background-repeat: no-repeat;
background-size: 18px;
border: none;
- border-radius: var(--telekom-radius-circle);
+ border-radius: var(--border-radius-pill);
height: 1.5rem;
width: 1.5rem;
margin: -2px -2px 0 0;
@@ -911,9 +1486,11 @@
&__navigation {
display: block;
+ padding: 0;
+ overflow: visible;
&__month {
- border-radius: var(--telekom-radius-standard);
+ border-radius: var(--border-radius-large);
height: 44px;
text-align: left;
display: flex;
@@ -921,7 +1498,7 @@
&.selected,
&:not(.selected):hover {
- background-color: var(--nmc-color-background-hover);
+ background-color: var(--color-background-hover);
color: var(--color-primary);
}
}
@@ -932,95 +1509,41 @@
.input-field {
max-width: 100%;
- }
- }
-
- &__breadcrumbs {
-
- nav {
- display: inline-flex;
- flex-grow: 0;
- min-width: unset;
-
- .vue-crumb {
-
- &>a {
- min-width: unset;
-
- &:hover {
- background-color: unset;
- }
- }
-
- &:last-child {
- min-width: unset;
- }
- }
-
- span.home-icon {
- background-image: var(--icon-home-dark);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 24px;
- width: 24px;
- height: 24px;
+ margin: 0;
- svg {
- display: none;
- }
+ &__input {
+ padding-left: 2.5rem;
}
- span.vue-crumb__separator {
- display: flex;
- background-image: var(--icon-breadcrumb-arrow-grey);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 24px;
- width: 24px;
- height: 24px;
-
- svg {
- display: none;
- }
+ &__icon--leading {
+ bottom: 8px;
}
}
+ }
- .breadcrumb__actions {
- button {
- border: none;
- margin: 0;
- padding: 0;
+ &__files {
+ overflow: auto;
+ margin: 0;
- .plus-icon {
- border: 1px solid var(--telekom-color-text-and-icon-primary-standard);
- border-radius: 50%;
- }
+ table {
+ width: 100%;
- svg {
- color: var(--telekom-color-text-and-icon-primary-standard);
- }
+ tbody {
- .button-vue__text {
- display: none;
+ tr {
+ height: 60px;
}
- &:hover {
- background-color: unset;
+ tr:not(.group-header):hover, tbody tr:not(.group-header):focus, tbody tr:not(.group-header):active {
+ background-color: var(--color-background-hover);
}
}
}
- }
-
- &__files {
- overflow: auto;
-
- table {
- width: 100%;
- }
th {
- background-color: var(--telekom-color-background-surface);
+ background-color: var(--color-main-background);
+ border-bottom: 1px solid var(--color-border) !important;
.button-vue {
border: none;
@@ -1048,7 +1571,7 @@
&.row-name {
.file-picker__header-preview {
- width: 30px;
+ width: 52px;
}
.button-vue__wrapper {
@@ -1070,39 +1593,42 @@
}
td {
- .file-picker__file-icon {
- width: 20px;
- height: 20px;
- min-width: 20px;
- min-height: 20px;
- }
+ border-bottom: 1px solid var(--color-border) !important;
+ cursor: pointer;
- .material-design-icon {
- background-position: center;
- background-repeat: no-repeat;
+ &.row-name {
+ padding: 0;
- svg {
- display: none;
- }
+ .file-picker__name-container {
+ cursor: pointer;
+ display: flex;
- &.folder-icon {
- background-image: var(--icon-mime-folder-dark);
- @include thumbnail-icons();
- }
+ div {
+ cursor: pointer;
+ min-height: 44px;
+ min-width: 44px;
+ line-height: 44px;
- &.file-icon {
- background-image: var(--icon-text-file-dark);
- }
- }
+ &.file-picker__file-name {
+ padding-left: 0.5rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
- &.row-name {
- padding-left: 0.5rem;
+ svg {
+ color: var(--nmc-ods-blue-active);
+ height: 44px;
+ width: 44px;
+ }
+ }
+ }
}
- &.row-modified {
+ &.row-modified, &.row-size {
text-align: right;
span {
+ cursor: pointer;
padding-right: 8px;
}
}
@@ -1120,4 +1646,356 @@
cursor: default;
}
}
+
+ .app-settings-section {
+
+ .photos-locations-container, .photos-location {
+
+ > .button-vue--vue-tertiary {
+ background: transparent;
+ border-radius: var(--border-radius-pill);
+ border: 1px solid var(--color-main-text);
+ color: var(--color-main-text);
+ margin: 0;
+
+ &:hover:not(:disabled) {
+ color: var(--color-main-text);
+ background-color: var(--color-background-hover);
+ }
+
+ &:active {
+ border-color: var(--color-border-maxcontrast);
+ }
+
+ &:disabled {
+ color: var(--color-text-lighter);
+ }
+
+ // Icon-only button
+ &--icon-only {
+ padding-left: calc(0.25rem - 1px);
+ padding-right: calc(0.25rem - 1px);
+ }
+
+ .plus-icon {
+ margin-inline: -4px 4px;
+
+ svg {
+ height: 24px;
+ width: 24px;
+ }
+ }
+
+ .folder-outline-icon {
+ margin-inline: -4px 4px;
+ background-image: var(--icon-folder-dark);
+ height: 24px;
+ width: 24px;
+
+ svg {
+ display: none;
+ }
+ }
+ }
+
+ .photos-locations {
+ display: flex;
+ gap: 0.5rem;
+
+ li {
+ display: inline-flex;
+ margin-bottom: 0.5rem;
+
+ .folder {
+ background-color: var(--nmc-ods-blue-primary);
+ border-radius: var(--border-radius-pill);
+ border-width: 0;
+ color: var(--nmc-color-text-and-icon-black);
+ cursor: pointer;
+ display: inline-flex;
+ gap: 0;
+ min-height: 3rem;
+ min-width: 0;
+ padding-right: 0;
+
+ .folder__info:last-child {
+ margin-right: 1rem;
+ }
+
+ .folder-multiple-outline-icon {
+ background-image: var(--original-icon-magentacloud-dark);
+ margin-inline: 1rem 0.5rem;
+ height: 24px;
+ width: 24px;
+
+ svg {
+ display: none;
+ }
+ }
+
+ .folder-outline-icon {
+ background-image: var(--original-icon-folder-dark);
+ margin-inline: 1rem 0.5rem;
+ height: 24px;
+ width: 24px;
+
+ svg {
+ display: none;
+ }
+ }
+
+ .close-icon {
+ color: var(--nmc-color-text-and-icon-black);
+ }
+
+ .button-vue--vue-tertiary {
+
+ &:hover:not(:disabled) {
+ background-color: transparent;
+ }
+ }
+ }
+ }
+ }
+
+ .button-vue--vue-secondary {
+ background: transparent;
+ border-radius: var(--border-radius-pill);
+ border: 1px solid currentColor;
+ color: var(--color-main-text);
+ border-color: var(--color-border);
+ margin: 0;
+
+ &:hover:not(:disabled) {
+ color: var(--color-main-text);
+ background-color: var(--color-background-hover);
+ border-color: var(--color-border-dark);
+ }
+
+ &:active {
+ color: var(--color-main-text);
+ border-color: var(--color-border-maxcontrast);
+ }
+
+ &:disabled {
+ color: var(--color-text-lighter);
+ background-color: none;
+ }
+
+ // Icon-only button
+ &--icon-only {
+ padding-left: calc(0.25rem - 1px);
+ padding-right: calc(0.25rem - 1px);
+ }
+ }
+ }
+ }
+
+ .app-settings-section:not(:last-child) {
+ margin-bottom: 1.5rem;
+ }
+
+ #settings-section_layout-settings,
+ .app-settings__navigation {
+ display: none;
+ }
+}
+
+// Device Sessions modal window
+#body-settings .modal-wrapper--small > .modal-container {
+ width: 550px;
+
+ @media screen and (max-width: $breakpoint-mobile-medium) {
+ width: 90vw;
+ max-width: 500px;
+ }
+
+ @media screen and (max-width: $breakpoint-mobile-small) {
+ width: 95vw;
+ max-width: none;
+ }
+}
+
+// Share Album modal window
+#body-user .modal-container {
+
+ .sharingAlbum{
+ &__divider {
+ border-bottom: 1px solid var(--color-border);
+ margin-bottom: 1rem;
+ text-align: center;
+ }
+
+ &__or {
+ background-color: var(--color-main-background);
+ bottom: -0.75rem;
+ font-size: 14px;
+ padding: 0.75rem;
+ position: relative;
+ }
+ }
+
+ .manage-collaborators{
+ height: 130px;
+
+ .actions {
+ display: block;
+
+ .sharing-link {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ font-size: 14px;
+ gap: 2px;
+ color: var(--color-text-lighter);
+ font-weight: bold;
+ }
+ }
+
+ &__title {
+ margin: unset;
+ font-size: 20px;
+ line-height: initial;
+ }
+
+ .album-sharing-search form {
+ min-width: auto;
+ width: 100%;
+ margin: 0.75rem 0;
+ .vs__dropdown-toggle {
+ margin: 0.75rem 0;
+ }
+ }
+
+ .actions {
+ h2 {
+ margin: unset;
+ font-size: 20px;
+ line-height: initial;
+ display: flex;
+ align-items: center;
+ min-height: 2rem;
+ margin-bottom: unset;
+ }
+
+ &__sharing-entry {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 0.5rem;
+ line-height: 1rem;
+ margin-right: auto;
+ overflow: auto;
+
+ .share-select {
+ margin-top: unset;
+ }
+ }
+
+ &__public-link {
+ min-height: 2rem;
+ gap: 0.5rem;
+ margin-top: 1rem;
+ }
+ .button-vue {
+ padding: 0 0.5rem !important;
+ min-height: 2rem !important;
+ margin: 0 !important;
+
+ &__text {
+ font-size: 14px;
+ }
+
+ &__icon {
+ min-width: 2rem !important;
+ width: 2rem !important;
+ min-height: 2rem !important;
+ height: 2rem !important;
+
+ .icon {
+ background-size: 18px;
+
+ &.icon-clipboard {
+ background-image: var(--original-icon-clipboard-dark);
+ }
+
+ &.icon-delete {
+ background-image: var(--original-icon-delete-dark);
+ }
+ }
+ }
+ }
+
+ &__slot{
+ display:none;
+ }
+ }
+ }
+}
+
+#body-user #album-share .modal-wrapper .modal-container {
+ @media only screen and ((max-width: 512px) or (max-height: 400px)) {
+ height: unset;
+ position: relative;
+ top: unset;
+ border-radius: var(--border-radius-element);
+ }
+}
+
+#body-user #photos-picker .modal-wrapper .modal-container {
+ @media only screen and ((max-width: 512px) or (max-height: 400px)) {
+ padding: 1.5rem 0;
+ .dialog__name {
+ margin-bottom: unset !important;
+ margin-inline-end: unset;
+ }
+ .dialog{
+ &__actions {
+ .photos-picker__actions__buttons {
+ gap: 10px;
+ button {
+ padding-left: 0.1rem;
+ padding-right: 1.20rem;
+ }
+ }
+ }
+ }
+ }
+}
+// File Info modal window
+#file-info-exif .modal-container {
+ &__content {
+ overflow: unset;
+ }
+
+ .modal__content--file {
+ .modal__right{
+ max-height: 35vh;
+ overflow: auto;
+ padding: 5px 20px;
+ }
+ }
+
+ button.modal-container__close {
+ background: white;
+
+ &:hover:not(:disabled) {
+ background: white;
+ }
+ }
+}
+
+
+#body-public {
+
+ &:has(.album-container) {
+
+ .modal-header {
+
+ .header-actions {
+ display: none;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/css/apps/rich-workspace.scss b/css/apps/rich-workspace.scss
index 7ff1de97..ea72f671 100644
--- a/css/apps/rich-workspace.scss
+++ b/css/apps/rich-workspace.scss
@@ -1,7 +1,10 @@
@import '../_mixins.scss';
+@import '../_variables.scss';
#rich-workspace {
padding: 0 0 0 2rem !important;
+ margin-bottom: 2rem !important;
+ border-bottom: 1px solid var(--color-border);
}
#editor-container {
@@ -9,16 +12,21 @@
.editor {
.text-menubar {
- padding: 0;
+ box-sizing: content-box;
&__slot {
padding-top: 0.5rem;
}
&__entries {
- padding-top: 0.5rem;
+ padding-block: 0.25rem;
+
+ @media screen and (max-width: $breakpoint-mobile-medium) {
+ max-width: 20rem;
+ }
.button-vue {
+ background: none;
border: none;
padding: 0;
transition: none;
@@ -34,10 +42,16 @@
&.button-vue--vue-primary {
background-color: unset;
- outline: 1px solid var(--telekom-color-primary-standard);
+ outline: 1px solid var(--color-primary);
+ }
+
+ &.button-vue--vue-secondary {
+ background: none;
+ border: none;
}
&__icon {
+ justify-content: center !important;
svg {
display: none;
@@ -49,6 +63,15 @@
width: 24px;
}
+ .format-size-icon,
+ .code-brackets-icon,
+ .unfold-more-horizontal-icon,
+ .dots-horizontal-icon {
+ svg {
+ display: block;
+ }
+ }
+
.arrow-u-left-top-icon {
background-image: var(--icon-undo-dark);
}
@@ -149,8 +172,16 @@
background-image: var(--icon-link-dark);
}
- .dots-horizontal-icon svg {
- display: block;
+ .paperclip-icon {
+ background-image: var(--icon-attachment-dark);
+ }
+
+ .upload-icon {
+ background-image: var(--icon-attachment-dark);
+ }
+
+ .tray-arrow-up-icon {
+ background-image: var(--icon-attachment-dark);
}
}
}
@@ -280,7 +311,7 @@
}
&--info {
- background-color: var(--telekom-color-functional-informational-subtle);
+ background-color: var(--color-info-text);
.callout__icon {
background-image: var(--icon-info-info);
@@ -288,7 +319,7 @@
}
&--success {
- background-color: var(--telekom-color-functional-success-subtle);
+ background-color: var(--color-success-text);
.callout__icon {
background-image: var(--icon-success-success);
@@ -296,7 +327,7 @@
}
&--warn {
- background-color: var(--telekom-color-functional-warning-subtle);
+ background-color: var(--color-warning-text);
.callout__icon {
background-image: var(--icon-warning-warning);
@@ -304,7 +335,7 @@
}
&--error {
- background-color: var(--telekom-color-functional-danger-subtle);
+ background-color: var(--color-error-text);
.callout__icon {
background-image: var(--icon-danger-danger);
@@ -353,6 +384,10 @@
}
}
+ .container-suggestions {
+ display: none;
+ }
+
.v-popper__popper {
.material-design-icon {
@@ -361,32 +396,38 @@
background-size: 24px;
svg {
- display: none;
+ display: unset;
}
}
.format-header1-icon {
- background-image: var(--icon-h1-dark);
+ // background-image: var(--icon-h1-dark);
+ background-image: unset;
}
.format-header2-icon {
- background-image: var(--icon-h2-dark);
+ // background-image: var(--icon-h2-dark);
+ background-image: unset;
}
.format-header3-icon {
- background-image: var(--icon-h3-dark);
+ // background-image: var(--icon-h3-dark);
+ background-image: unset;
}
.format-header4-icon {
- background-image: var(--icon-h4-dark);
+ // background-image: var(--icon-h4-dark);
+ background-image: unset;
}
.format-header5-icon {
- background-image: var(--icon-h5-dark);
+ // background-image: var(--icon-h5-dark);
+ background-image: unset;
}
.format-header6-icon {
- background-image: var(--icon-h6-dark);
+ // background-image: var(--icon-h6-dark);
+ background-image: unset;
}
.information-icon {
@@ -394,44 +435,53 @@
}
.checkbox-marked-circle-icon {
- background-image: var(--icon-success-dark);
+ // background-image: var(--icon-success-dark);
+ background-image: unset;
}
.alert-icon {
- background-image: var(--icon-alert-dark);
+ // background-image: var(--icon-alert-dark);
+ background-image: unset;
}
.alert-decagram-icon {
- background-image: var(--icon-warning-dark);
+ // background-image: var(--icon-warning-dark);
+ background-image: unset;
}
- .upload-icon {
- background-image: var(--icon-upload-dark);
+ .tray-arrow-up-icon {
+ // background-image: var(--icon-upload-dark);
+ background-image: unset;
}
- .folder-icon {
- background-image: var(--icon-folder-dark);
+ .folder-outline-icon {
+ // background-image: var(--icon-folder-dark);
+ background-image: unset;
}
.web-icon {
- background-image: var(--icon-text-link-dark);
+ // background-image: var(--icon-text-link-dark);
+ background-image: unset;
}
.file-document-icon {
- background-image: var(--icon-text-file-dark);
+ // background-image: var(--icon-text-file-dark);
+ background-image: unset;
}
.link-off-icon {
background-image: var(--icon-delete-dark);
}
- .help-circle-icon {
- background-image: var(--icon-help-dark);
+ .help-circle-outline-icon {
+ // background-image: var(--icon-help-dark);
+ background-image: unset;
}
- [data-text-action-entry=insert-link-picker] {
+ [data-text-action-entry=insert-link-picker],
+ [data-text-action-entry=insert-attachment-add-text-0] {
display: none;
- }
+ }
.alphabetical-variant-icon svg {
display: block;
@@ -475,4 +525,19 @@
}
}
}
-}
\ No newline at end of file
+}
+
+// Folder icon color in link bubble — selector is global because the bubble
+// is moved to document.body by the nmcfiles.ts MutationObserver fix.
+.link-view-bubble {
+ .folder-icon svg {
+ fill: var(--nmc-ods-blue);
+ }
+}
+
+// Folder icon color in the rich workspace link preview widget.
+.widget-file {
+ .folder-icon svg {
+ fill: var(--nmc-ods-blue);
+ }
+}
diff --git a/css/apps/server.scss b/css/apps/server.scss
index c8c4e1b6..959ae755 100644
--- a/css/apps/server.scss
+++ b/css/apps/server.scss
@@ -1,5 +1,5 @@
/* Selected text has magenta background and white text color */
::selection {
background-color: var(--color-primary-element);
- color: var(--telekom-color-text-and-icon-white-standard);
+ color: var(--nmc-color-text-and-icon-white);
}
diff --git a/css/apps/settings.scss b/css/apps/settings.scss
index 3c78f6ad..176a2c9f 100644
--- a/css/apps/settings.scss
+++ b/css/apps/settings.scss
@@ -11,7 +11,7 @@
padding: 3rem 3rem 0;
@media screen and (max-width: $breakpoint-mobile) {
- padding: 3rem 2rem 0;
+ padding: 3rem 1.5rem 0;
}
.section {
@@ -43,10 +43,11 @@
max-width: 1280px;
h2 {
- color: var(--telekom-color-text-and-icon-standard);
+ color: var(--color-main-text);
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 1rem;
+ justify-content: start;
}
.personal-settings-container {
@@ -57,24 +58,29 @@
input[type='text'],
input[type='email'] {
- width: 400px;
+ width: 340px;
height: 3rem !important;
- padding: 0.75rem;
- background-color: var(--telekom-color-ui-subtle);
- border: 1px solid var(--telekom-color-ui-subtle);
- border-radius: var(--telekom-radius-small);
+ padding-block: 0.75rem;
+ padding-inline: 0.75rem 2.5rem;
+ background-color: var(--color-border);
+ border: 1px solid var(--color-border);
+ border-radius: var(-border-radius);
+
+ @media screen and (max-width: $breakpoint-mobile) {
+ width: 100%;
+ }
&.additional {
background-color: var(--color-main-background);
- border: 1px solid var(--telekom-color-text-and-icon-standard);
+ border: 1px solid var(--color-main-text);
&.notification {
- color: var(--telekom-color-primary-standard);
+ color: var(--color-primary);
}
}
&:disabled {
- color: var(--telekom-color-text-and-icon-disabled);
+ color: var(--color-text-lighter);
}
}
@@ -118,8 +124,16 @@
&.webdav-box {
max-width: 800px;
- span {
- color: var(--telekom-color-primary-standard);
+ .webdav-row {
+ position: relative;
+
+ @media screen and (max-width: $breakpoint-mobile) {
+ button {
+ position: absolute;
+ right: 0;
+ top: 3px;
+ }
+ }
}
}
@@ -131,8 +145,8 @@
table {
th {
- background-color: var(--telekom-color-ui-subtle);
- color: var(--telekom-color-text-and-icon-standard);
+ background-color: var(--color-border);
+ color: var(--color-main-text);
font-weight: bold;
opacity: 1;
}
@@ -147,14 +161,51 @@
.app-password-row {
margin-top: 1rem;
+ position: relative;
+
+ @media screen and (max-width: $breakpoint-mobile) {
+ display: block;
+ }
+
+ .app-password-label {
+ text-align: left;
+ }
.button-vue--icon-only {
background: none;
border: 0;
+
+ @media screen and (max-width: $breakpoint-mobile) {
+ position: absolute;
+ right: 0;
+ top: 1.5rem;
+ }
+ }
+
+ &:last-child {
+
+ .row-left {
+ display: none;
+ }
+
+ .row-right {
+ width: 438px;
+
+ @media screen and (max-width: $breakpoint-mobile) {
+ width: 100%;
+
+ button {
+ display: block;
+ float: right;
+ margin-top: 0.5rem;
+ }
+ }
+ }
}
}
.settings-hint {
+ color: var(--color-main-text);
margin-bottom: 1rem;
margin-top: 1.5rem;
opacity: unset;
@@ -162,33 +213,38 @@
.spacing {
padding-top: 0;
+
+ @media screen and (max-width: $breakpoint-mobile) {
+ display: block;
+ }
}
}
}
-
- .personal-settings-setting-box {
- margin-right: 2rem;
- }
}
a {
- color: var(--telekom-color-primary-standard);
+ color: var(--color-primary);
font-weight: bold;
}
section,
.section {
padding: 0;
+
+ p {
+ max-width: 100%;
+ }
}
.headerbar-label {
- color: var(--telekom-color-ui-strong);
+ color: var(--nmc-color-strong);
font-size: 1rem;
font-weight: normal;
height: 1.5rem;
margin: 0;
padding-left: 0.75rem;
width: 400px;
+ max-width: 100%;
.action-item {
display: none;
@@ -226,6 +282,7 @@
.email {
width: 400px;
+ max-width: 100%;
.email__actions-container {
@@ -263,13 +320,13 @@
}
em {
- color: var(--telekom-color-primary-standard);
+ color: var(--color-primary);
display: block;
margin-bottom: 0.75rem;
padding-left: 0.75rem;
&.additional-emails-label {
- color: var(--telekom-color-ui-strong);
+ color: var(--nmc-color-strong);
margin-bottom: 0;
margin-top: 1.5rem;
}
@@ -277,8 +334,8 @@
button {
border: none;
- color: var(--telekom-color-primary-standard);
- font: var(--telekom-text-style-body);
+ color: var(--color-primary);
+ font: var(--default-font-style);
line-height: 3rem;
padding: 0;
@@ -287,7 +344,7 @@
}
.plus-icon {
- border: 1px solid var(--telekom-color-primary-standard);
+ border: 1px solid var(--color-primary);
border-radius: 1rem;
height: 1.5rem;
width: 1.5rem;
@@ -320,7 +377,7 @@
display: flex;
height: 0.5rem;
width: 100%;
- background: var(--telekom-color-ui-subtle);
+ background: var(--color-border);
border-radius: 0.5rem;
.progress-bar {
@@ -333,7 +390,7 @@
height: 0.5rem;
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
- background: var(--telekom-color-ui-base);
+ background: var(--color-background-dark);
}
}
}
@@ -385,16 +442,16 @@
button {
height: 40px;
padding: 0 1.5rem;
- background-color: var(--telekom-color-ui-base);
- border-color: var(--telekom-color-text-and-icon-standard);
- color: var(--telekom-color-text-and-icon-standard);
- border-radius: var(--telekom-radius-small);
+ background-color: var(--color-background-dark);
+ border-color: var(--color-main-text);
+ color: var(--color-main-text);
+ border-radius: var(-border-radius);
font-size: 1rem;
margin: 1rem 0 0;
&:hover {
- border: 1px solid var(--telekom-color-primary-standard);
- color: var(--telekom-color-primary-standard);
+ border: 1px solid var(--color-primary);
+ color: var(--color-primary);
}
&.button-vue--icon-only:hover {
@@ -403,12 +460,12 @@
}
select#account-setting-language {
- width: 400px;
+ width: 340px;
height: 3rem;
padding: 0.75rem;
- background-color: var(--telekom-color-ui-base);
- border: 1px solid var(--telekom-color-text-and-icon-standard);
- border-radius: var(--telekom-radius-small);
+ background-color: var(--color-background-dark);
+ border: 1px solid var(--color-main-text);
+ border-radius: var(-border-radius);
display: inline-block;
option:disabled {
@@ -469,7 +526,7 @@
.theming__preview-image {
- border: 2px solid var(--telekom-color-primary-standard);
+ border: 2px solid var(--color-primary);
border-radius: unset;
flex-basis: calc(18px * var(--ratio));
height: calc(12px * var(--ratio));
@@ -520,17 +577,18 @@
width: 400px;
height: 3rem !important;
padding: 1rem;
- background-color: var(--telekom-color-ui-subtle);
- border: 1px solid var(--telekom-color-ui-subtle);
- border-radius: var(--telekom-radius-small);
+ background-color: var(--color-border);
+ border: 1px solid var(--color-border);
+ border-radius: var(-border-radius);
margin: 1rem 0.5rem 0 0;
+ max-width: 100%;
}
button {
- background-color: var(--telekom-color-ui-base);
- border-color: var(--telekom-color-text-and-icon-standard);
- border-radius: var(--telekom-radius-small);
- color: var(--telekom-color-text-and-icon-standard);
+ background-color: var(--color-background-dark);
+ border-color: var(--color-main-text);
+ border-radius: var(-border-radius);
+ color: var(--color-main-text);
cursor: pointer;
font-size: 1rem;
height: 40px;
@@ -539,8 +597,8 @@
padding: 0 1.5rem;
&:hover {
- border: 1px solid var(--telekom-color-primary-standard);
- color: var(--telekom-color-primary-standard);
+ border: 1px solid var(--color-primary);
+ color: var(--color-primary);
}
&.button-vue--icon-only:hover {
@@ -556,7 +614,7 @@
}
.settings-section {
- padding: 3rem 3rem 0;
+ padding: 3rem 0 0 3rem;
border: none;
&.theming {
@@ -564,34 +622,22 @@
}
&--limit-width {
+ max-width: 800px;
+ }
- p {
- max-width: 800px;
- }
+ p {
+ color: var(--color-main-text);
}
.button-vue {
&.button-vue--vue-warning,
&.button-vue--vue-error {
- background-color: var(--telekom-color-primary-standard);
+ background-color: var(--color-primary);
+ color: var(--color-primary-text);
&:hover:not(:disabled) {
- background-color: var(--telekom-color-primary-hovered);
- }
- }
- }
-
- .notecard.warning {
- background-color: var(--telekom-color-background-canvas-subtle) !important;
- border: unset;
- border-radius: unset;
- max-width: 800px;
-
- .checkbox-radio-switch:not(.checkbox-radio-switch--disabled) {
-
- .checkbox-radio-switch__input:hover+.checkbox-radio-switch__label {
- background-color: unset;
+ background-color: var(--color-primary-hover);
}
}
}
@@ -638,7 +684,7 @@ body .icon-auto-login-dark {
.add-slide a.button {
margin-left: 8px;
background-color: var(--color-main-background);
- border: 1px solid var(--telekom-color-text-and-icon-primary-standard);
+ border: 1px solid var(--color-primary);
border-radius: 50%;
min-height: unset;
height: 24px;
diff --git a/css/apps/sharing.scss b/css/apps/sharing.scss
index a8271092..c76805dd 100644
--- a/css/apps/sharing.scss
+++ b/css/apps/sharing.scss
@@ -1,11 +1,36 @@
@import '../_mixins.scss';
#app-sidebar-vue {
-
+ padding-bottom: 25px;
.app-sidebar-header {
+
+ .user-bubble__avatar {
+ display: none;
+ }
+
+ .user-bubble__name {
+ padding-inline: 0.5rem;
+ }
+
&__desc {
- padding: var(--telekom-spacing-composition-space-04) var(--telekom-spacing-composition-space-06) var(--telekom-spacing-composition-space-08);
- // hide '...' actions button
+ padding: 0.5rem 1rem 1.5rem;
+
+ .app-sidebar-header__subname {
+ white-space: normal;
+ overflow: visible;
+ text-overflow: unset;
+
+ .sidebar__subname {
+ flex-wrap: wrap;
+ }
+
+ .sidebar__subname-separator:not(:has(~ .sidebar__subname-separator)),
+ span:has(+ .user-bubble__wrapper),
+ .user-bubble__wrapper {
+ display: none;
+ }
+ }
+
.app-sidebar-header__menu {
display: none;
}
@@ -17,9 +42,11 @@
button.app-sidebar-header__star {
all: unset;
+
&:hover:not(:disabled) {
background-color: initial;
}
+
.button-vue__icon {
width: 1.5rem;
min-width: 1.5rem;
@@ -28,14 +55,17 @@
height: 1.5rem;
}
}
+
.star-outline-icon {
background-image: var(--icon-star-dark);
+
svg {
display: none;
}
}
.star-icon {
background-image: var(--icon-starred-yellow);
+
svg {
display: none;
}
@@ -45,21 +75,21 @@
// 'Close' button
button.app-sidebar__close {
- opacity: 1;
background-color: var(--color-main-background);
- top: 1rem;
+ opacity: 1;
right: 1rem;
+ top: 1rem;
transition: none;
- &:hover, &:active, &:focus {
- .button-vue__icon {
- filter: var(--nmc-color-icon)
- }
+
+ &:hover:not(:disabled) {
+ background-color: var(--color-background-hover);
}
+
.button-vue__icon {
- background-image: var(--icon-close-dark);
+ background-image: var(--icon-close-x-dark);
background-position: center;
background-repeat: no-repeat;
- // hide initial icon
+
svg {
display: none;
}
@@ -70,7 +100,7 @@
min-height: auto;
}
&__maintitle {
- font-size: var(--telekom-typography-font-size-body);
+ font-size: var(--default-font-size);
min-height: auto;
line-height: 22px;
}
@@ -78,9 +108,6 @@
font-size: 14px;
opacity: 1;
}
- &__figure {
- background-size: cover;
- }
}
.app-sidebar-header--compact {
@@ -90,16 +117,18 @@
position: initial;
}
.app-sidebar-header__desc {
- padding-top: var(--telekom-spacing-composition-space-06);
+ padding-top: 1rem;
}
.app-sidebar-header__figure {
- margin: var(--telekom-spacing-composition-space-04) 0 0 var(--telekom-spacing-composition-space-06);
+ margin: 1rem 0 0 1rem;
+ width: 5rem;
+ height: 5rem;
}
}
.app-sidebar-tabs {
min-height: auto;
- padding: 0 var(--telekom-spacing-composition-space-06);
+ padding: 0 1rem;
}
// remove tab navigation
@@ -155,6 +184,10 @@
&.icon-clipboard {
background-image: var(--icon-clipboard-dark);
}
+
+ &.icon-delete {
+ background-image: var(--original-icon-delete-dark);
+ }
&.icon-add:hover {
filter: var(--nmc-color-icon)
@@ -175,7 +208,7 @@
margin-left: auto;
&:hover {
svg {
- color: var(--telekom-color-text-and-icon-primary-standard);
+ color: var(--color-primary);
}
}
}
@@ -225,6 +258,7 @@
// Sharing details container
.sharingTabDetailsView {
margin: 0 !important;
+ padding: unset !important;
&__advanced {
.input-field {
@@ -233,8 +267,16 @@
display: none;
}
}
+
+ margin-bottom: 5px;
}
}
+
+}
+
+.sharingPopupDetailsView {
+ overflow-y: auto;
+ max-height: 60vh;
}
// TODO this should be done by the icon generation script
@@ -245,12 +287,14 @@ body .icon-upload-to-cloud, body .icon-upload-to-cloud-dark {
.sharingPopup__content, .sharingTab__content, .sharingTabDetailsView {
.button-vue {
- padding: 0 0.5rem !important;
- min-height: 2rem !important;
+ padding: 0 1rem !important;
+ min-height: 2.5rem !important;
margin: 0 !important;
&__text {
- font-size: 14px;
+ font-size: 16px !important;
+ margin: 0 !important;
+ padding: 0 !important;
}
&__icon {
@@ -264,14 +308,108 @@ body .icon-upload-to-cloud, body .icon-upload-to-cloud-dark {
}
}
}
+}
+
+#body-user, #body-public, #body-settings {
+
+ .sharingPopup__content, .sharingTab__content, .sharingTabDetailsView {
+
+ // 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: var(--nmc-ods-blue);
+ font-weight: 400;
+
+ .eye-circle-outline-icon {
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+ background-color: var(--nmc-ods-blue);
+ mask: var(--icon-visibility-on-dark) no-repeat center;
+ mask-size: contain;
+
+ svg {
+ display: none !important;
+ }
+ }
+
+ .calendar-month-icon {
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+ background-color: var(--nmc-ods-blue);
+ mask: var(--icon-calendar-dark) no-repeat center;
+ mask-size: contain;
+
+ svg {
+ display: none !important;
+ }
+ }
+ }
+
+ .share-select.disabled button.trigger-text {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+
+ // Border for sharing entry items
+ .sharing-entry {
+
+ &.sharing-entry__link.sharing-entry--share:not(:last-child) {
+ border-bottom: 1px solid var(--nmc-color-faint);
+ padding: 0.5rem 0;
+ }
+
+ .button-vue--vue-secondary {
+
+ &.button-vue--icon-only {
+ background-color: unset;
+ border-radius: 50%;
+ width: 40px !important;
+ height: 40px;
+ min-width: 40px;
+ min-height: 40px;
+ border: 1px solid var(--color-main-text);
+
+ .icon-delete {
+ background-image: var(--icon-close-x-dark);
+ }
+
+ &:hover {
+ background-color: var(--color-main-hover);
+ }
+ }
+ }
+ }
+
+ // Remove margin-bottom from "Link to Copy" heading
+ .sharing-link-list-caption {
+ margin-bottom: 0;
+ }
+ }
.sharing-entry {
gap: .5rem;
+
+ &__desc {
+ overflow: auto;
+ }
}
}
+.sharingPopup__or {
+ background-color:var(--color-main-background) !important;
+}
+
.sharingPopup__success {
padding: 1rem;
+ display: grid;
+ overflow: hidden;
.check-circle-outline-icon {
background-image: var(--icon-popup-success-success);
@@ -291,11 +429,17 @@ body .icon-upload-to-cloud, body .icon-upload-to-cloud-dark {
text-align: center;
font-size: 24px;
margin-bottom: 1rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.recipients {
text-align: center;
color: var(--color-text-maxcontrast);
margin-bottom: 3rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
}
\ No newline at end of file
diff --git a/css/apps/viewer.scss b/css/apps/viewer.scss
index d06af272..5f7a2d6b 100644
--- a/css/apps/viewer.scss
+++ b/css/apps/viewer.scss
@@ -1,10 +1,11 @@
#viewer {
--header-height: 64px;
+ --footer-height: 64px;
button.next, button.prev {
svg {
- color: var(--telekom-color-text-and-icon-standard);
+ color: var(--color-main-text);
}
}
@@ -12,54 +13,62 @@
.text-editor__session-list .session-list {
display: none;
}
+
+ .viewer__content {
+ height: calc(100vh - var(--header-height) - var(--footer-height));
+ }
.modal-header {
&__name {
- color: var(--telekom-color-ui-regular);
+ color: var(--nmc-color-regular);
}
height: var(--header-height);
.icons-menu {
- padding: 12px 16px 12px 0;
- gap: var(--telekom-spacing-composition-space-03);
+ gap: 0.25rem;
+ inset-inline-end: 0;
+ position: relative;
& > button, button[aria-label="Actions"], button[aria-label="Aktionen"], button[aria-label*="Edit"], button[aria-label*="Bearbeiten"] {
- background-color: var(--telekom-color-ui-regular);
- border-radius: var(--telekom-radius-circle);
+ background-color: var(--nmc-color-regular);
+ border-radius: var(--border-radius-pill);
display: flex;
- width: 44px;
- height: 44px;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
svg {
- color: var(--telekom-color-text-and-icon-standard);
+ color: var(--color-main-text);
}
&:hover, &:focus {
- background-color: var(--telekom-color-ui-strong) !important;
+ background-color: var(--nmc-color-strong) !important;
svg {
- color: var(--telekom-color-text-and-icon-inverted-standard);
+ color: var(--nmc-color-text-and-icon-inverted);
}
}
}
button.play-pause-icons {
+ margin: calc((var(--header-height) - var(--clickable-area-large)) / 2);
& > span.material-design-icon {
margin: 0;
}
svg.progress-ring {
- width: 44px;
- height: 44px;
- circle {
- cx: 22;
- cy: 22;
- }
+ width: 48px;
+ height: 48px;
}
}
+
+ div.action-items {
+ gap: 0.25rem;
+ }
}
}
}
@@ -89,46 +98,44 @@
}
.FIE_topbar-save-button {
- border-radius: var(--telekom-radius-standard);
- background-color: var(--telekom-color-primary-standard);
- color: var(--telekom-color-text-and-icon-white-standard);
+ background-color: var(--color-primary);
+ color: var(--nmc-color-text-and-icon-white);
border: 0;
- border-radius: var(--telekom-radius-standard);
- font: var(--telekom-text-style-body);
- font-weight: var(--telekom-typography-font-weight-bold);
+ border-radius: var(--border-radius-pill);
+ font: var(--default-font-style-bold);
line-height: 1.125rem;
margin-left: 1rem;
- min-height: var(--telekom-spacing-composition-space-13);
- min-width: var(--telekom-spacing-composition-space-13);
- padding-left: var(--telekom-spacing-composition-space-07);
- padding-right: var(--telekom-spacing-composition-space-07);
- transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard);
+ min-height: var(--default-clickable-area);
+ min-width: var(--default-clickable-area);
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
+ transition: all var(--animation-slow) var(---animation-slow);
&:after {
top: 0;
left: 0;
width: 100%;
- border: var(--telekom-spacing-composition-space-01) solid transparent;
+ border: 1px solid transparent;
height: 100%;
content: '';
display: block;
position: absolute;
box-sizing: border-box;
pointer-events: none;
- border-radius: var(--telekom-radius-standard);
+ border-radius: var(--border-radius-pill);
}
&:hover:not(:disabled) {
- background-color: var(--telekom-color-primary-hovered);
+ background-color: var(--color-primary-hover);
}
&:active {
- background-color: var(--telekom-color-primary-pressed);
+ background-color: var(--color-primary-pressed);
}
&:disabled {
- background-color: var(--telekom-color-ui-disabled);
- color: var(--telekom-color-text-and-icon-disabled);
+ background-color: var(--color-background-dark);
+ color: var(--color-text-lighter);
}
}
}
diff --git a/css/components/ncactions.scss b/css/components/ncactions.scss
index 0d87c45c..f7bc1eb3 100644
--- a/css/components/ncactions.scss
+++ b/css/components/ncactions.scss
@@ -1,4 +1,5 @@
@import '../_mixins.scss';
+@import '../_variables.scss';
// '...' button style
.action-item .v-popper {
@@ -8,51 +9,133 @@
&:hover:not(:disabled) {
background-color: initial;
-
- svg {
- color: var(--telekom-color-text-and-icon-primary-standard);
- }
}
}
}
+// Hide text label on action menu toggle buttons that show the three-dot icon
+.action-item__menutoggle:has(.dots-horizontal-icon) .button-vue__text {
+ display: none;
+}
+
#body-user,
#body-settings,
#body-public {
.v-popper__popper {
+ &.action-item__popper {
+ .v-popper__wrapper {
+ .v-popper__inner {
+ &:has(.action-input__form) {
+ padding: 1rem;
+ }
+ .action:hover:has(.action-input__form) {
+ background-color: unset;
+ }
+ }
+ }
+ }
+
.v-popper__wrapper {
+ border: 1px solid var(--color-border);
+ filter: drop-shadow(0 1px 5px var(--color-box-shadow));
+
+ @media screen and (max-width: $breakpoint-mobile-medium) {
+ overflow-y: auto;
+ max-height: 65vh;
+ }
+
+ .v-popper__arrow-container {
+ display: none;
+ }
.v-popper__inner {
- background-color: var(--telekom-color-background-surface);
+ background-color: var(--color-main-background);
padding: 0.5rem;
+ @media screen and (max-width: $breakpoint-mobile) {
+ padding: 1rem;
+ }
+
ul {
display: flex;
flex-direction: column;
- li.action-separator, li.app-navigation-caption {
+ li {
+ &:hover {
+ cursor: pointer;
+ }
+
+ .icon-vue {
+ svg path {
+ fill: var(--color-main-text);
+ }
+ }
+ }
+
+ li.action-separator,
+ li.app-navigation-caption {
display: none;
}
li.action {
+ a {
+ span.action-link__icon {
+ background-position: center;
+ background-size: 24px;
+ filter: var(--background-invert-if-dark) !important;
+ }
+ }
+
+ &:last-child > .action-input {
+ margin: 0;
+ padding: 0;
+
+ .action-input__form {
+ margin: 0;
+ padding: 0;
+ }
+
+ .action-input__icon-wrapper {
+
+ .folder-icon {
+ background-image: var(--icon-create-folder-dark);
+ background-size: 36px;
+
+ svg {
+ display: none;
+ }
+ }
+ }
+ }
+
+ .action-input__text-label {
+ display: none;
+ }
+
.icon-vue {
background-size: 24px;
}
-
- &.active {
- background-color: initial;
+
+
+ &[data-cy-upload-picker-menu-entry="upload-folder"] {
+ display: none;
}
-
+
+
+ &:has(span.delete-icon) {
+ display: none;
+ }
+
&.upload-picker__menu-entry {
.icon-vue {
background-size: 24px;
}
-
+
svg {
display: none;
}
@@ -61,7 +144,8 @@
display: none;
}
- &[data-cy-upload-picker-menu-entry="newFolder"] , &[data-cy-upload-picker-menu-entry="template-picker"] {
+ &[data-cy-upload-picker-menu-entry="newFolder"],
+ &[data-cy-upload-picker-menu-entry="template-picker"] {
.icon-vue {
background-image: var(--icon-folder-dark);
}
@@ -79,7 +163,7 @@
.icon-vue {
background-image: var(--icon-filetype-document-dark);
}
-
+
&:hover {
.icon-vue {
filter: none;
@@ -93,7 +177,7 @@
.icon-vue {
background-image: var(--icon-filetype-spreadsheet-dark);
}
-
+
&:hover {
.icon-vue {
filter: none;
@@ -107,7 +191,7 @@
.icon-vue {
background-image: var(--icon-filetype-presentation-dark);
}
-
+
&:hover {
.icon-vue {
filter: none;
@@ -121,7 +205,7 @@
.icon-vue {
background-image: var(--icon-filetype-diagram-dark);
}
-
+
&:hover {
.icon-vue {
filter: none;
@@ -131,11 +215,11 @@
&[data-cy-upload-picker-menu-entry="template-new-text-0"] {
order: 5;
-
+
.icon-vue {
background-image: var(--icon-file-grey);
}
-
+
&:hover {
.icon-vue {
filter: none;
@@ -145,11 +229,11 @@
&[data-cy-upload-picker-menu-entry="album-add"] {
order: 9;
-
+
.icon-vue {
background-image: var(--icon-import-dark);
}
-
+
&:hover {
.icon-vue {
filter: none;
@@ -161,6 +245,7 @@
button.action-button {
padding-left: 0px;
font-weight: normal;
+ border-radius: var(--border-radius);
&:hover {
outline: none;
@@ -172,9 +257,17 @@
background-repeat: no-repeat;
background-size: 24px;
+ &.star-icon {
+ background-image: var(--icon-star-dark);
+
+ svg {
+ display: none;
+ }
+ }
+
&.upload-icon {
background-image: var(--icon-upload-dark);
-
+
svg {
display: none;
}
@@ -182,29 +275,29 @@
&.fullscreen-icon {
background-image: var(--icon-fullscreen-dark);
-
+
svg {
display: none;
}
}
-
+
&.download-icon {
background-image: var(--icon-download-dark);
-
+
svg {
display: none;
}
}
-
+
&.icon-menu-sidebar {
background-image: var(--icon-share-dark);
-
+
svg {
display: none;
}
- }
-
- &.delete-icon {
+ }
+
+ &.delete-icon, &.trash-can-icon {
background-image: var(--icon-delete-dark);
svg {
@@ -212,7 +305,7 @@
}
}
}
-
+
&.files-list__row-actions-batch-delete .icon-vue {
background-image: var(--icon-delete-dark);
@@ -220,15 +313,15 @@
display: none;
}
}
-
+
&.files-list__row-actions-batch-favorite .icon-vue {
- background-image: var(--original-icon-star-dark);
+ background-image: var(--icon-star-dark);
svg {
display: none;
}
}
-
+
&.files-list__row-actions-batch-move-copy .icon-vue {
background-image: var(--icon-external-dark);
@@ -236,7 +329,7 @@
display: none;
}
}
-
+
&.files-list__row-actions-batch-download .icon-vue {
background-image: var(--icon-download-dark);
@@ -244,7 +337,7 @@
display: none;
}
}
-
+
&.files-list__row-actions-batch-files_zip .icon-vue {
background-image: var(--icon-compress-zip-dark);
@@ -252,7 +345,7 @@
display: none;
}
}
-
+
&.files-list__row-actions-batch-cancel_select .icon-vue {
background-image: var(--icon-close-dark);
@@ -277,10 +370,16 @@
&.v-popper__popper {
.v-popper__wrapper {
-
+ box-shadow: none;
+ border: 1px solid var(--nmc-color-text-and-icon-black);
+
+ .v-popper__arrow-container {
+ display: none;
+ }
+
.v-popper__inner {
- background-color: var(--telekom-color-background-surface);
-
+ background-color: var(--color-main-background);
+
.material-design-icon {
&.information-icon {
@@ -314,7 +413,7 @@
display: none;
}
}
-
+
&.pencil-icon {
background-image: var(--icon-edit-dark);
@@ -322,7 +421,7 @@
display: none;
}
}
-
+
&.download-multiple-icon {
background-image: var(--icon-download-dark);
@@ -330,7 +429,7 @@
display: none;
}
}
-
+
&.star-icon {
background-image: var(--icon-star-dark);
@@ -338,7 +437,7 @@
display: none;
}
}
-
+
&.close-icon {
background-image: var(--icon-close-dark);
@@ -346,7 +445,7 @@
display: none;
}
}
-
+
&.folder-icon {
background-image: var(--icon-folder-dark);
@@ -355,50 +454,57 @@
}
}
}
-
+
li.action {
-
+
.action-button__icon {
background-size: 24px;
background-position: center;
}
-
+
&.action-separator.action--disabled {
- border-bottom: 1px solid var(--telekom-color-ui-border-pressed);
+ border-bottom: 1px solid var(--color-border-maxcontrast);
}
-
+
&.active {
background-color: initial;
-
+
// do not set Delete icon to red when hovered
.icon-delete:hover {
background-image: var(--icon-delete-dark);
}
}
-
+
&:hover {
- .action-button__icon, .material-design-icon, .icon-vue {
+
+ .action-button__icon,
+ .material-design-icon,
+ .icon-vue {
filter: var(--nmc-color-icon);
}
-
- .action-button__text, .action-button__longtext, .action-link__text, .action-link__longtext {
- color: var(--telekom-color-primary-standard);
+
+ .action-button__text,
+ .action-button__longtext,
+ .action-link__text,
+ .action-link__longtext {
+ cursor: pointer;
+ color: var(--color-primary);
}
}
}
-
+
// hide upload file menu item in Photos Album
- li[data-upload-picker-add=""]{
+ li[data-upload-picker-add=""] {
display: none;
}
-
- li:last-child > .action-input {
+
+ li:last-child>.action-input {
padding-bottom: 0;
-
+
.action-input__form {
padding-right: 0;
}
-
+
label {
display: none;
}
@@ -411,19 +517,42 @@
.v-popper__wrapper {
.v-popper__arrow-container {
- border-top-color: var(--telekom-color-background-surface);
+ border-top-color: var(--color-main-background);
}
}
}
&[data-popper-placement^=bottom] {
-
+
.v-popper__wrapper {
.v-popper__arrow-container {
- border-bottom-color: var(--telekom-color-background-surface);
+ border-bottom-color: var(--color-main-background);
}
}
}
}
}
+
+#body-public {
+ .v-popper__popper {
+ .v-popper__wrapper {
+ .v-popper__inner {
+ ul {
+ li {
+ &.upload-picker__menu-entry {
+ &[data-cy-upload-picker-menu-entry="template-new-richdocuments-1"],
+ &[data-cy-upload-picker-menu-entry="template-new-richdocuments-2"],
+ &[data-cy-upload-picker-menu-entry="template-new-richdocuments-3"],
+ &[data-cy-upload-picker-menu-entry="template-new-richdocuments-4"],
+ &[data-cy-upload-picker-menu-entry="template-new-text-0"],
+ &[data-cy-upload-picker-menu-entry="rich-workspace-init"] {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/css/components/ncappmenu.scss b/css/components/ncappmenu.scss
index db4e50b0..8dc13055 100644
--- a/css/components/ncappmenu.scss
+++ b/css/components/ncappmenu.scss
@@ -3,65 +3,84 @@
.app-menu {
- .app-menu-main {
-
+ .app-menu__list {
+ margin: 0 2.5rem;
+
// visuals for navigation entries
.app-menu-entry {
- height: 60px;
- margin-right: var(--telekom-spacing-composition-space-10);
+ height: 74px;
+ margin-right: 2rem;
width: auto;
-
+
&::before {
- background-color: var(--color-primary);
- border-radius: 0;
- bottom: 0;
- content: " ";
- display: block;
- height: 2px;
- left: 50%;
- opacity: 0;
- pointer-events: none;
- position: absolute;
- transform: translateX(-50%);
- width: 100%;
- transition: none;
+ display: none;
}
-
- .app-menu-entry--label {
- font-size: 20px;
- font-weight: bold;
- letter-spacing: normal;
- opacity: 1;
+
+ &__link {
+ width: calc(100% - 4px);
+ height: 100%;
+ color: var(--color-main-text);
position: relative;
- top: calc(50% - var(--default-line-height) / 2);
- transition: none;
- }
-
- &.app-menu-entry__active {
-
- .app-menu-entry--label {
- color: var(--color-primary);
- }
- }
-
- // hover effect for navigation entries
- &:hover,
- &:focus-within {
-
+ display: flex;
+ justify-content: unset;
+
&::before {
background-color: var(--color-primary);
border-radius: 0;
bottom: 0;
- height: 4px;
- opacity: 1;
+ content: " ";
+ display: block;
+ height: 2px;
+ left: 50%;
+ opacity: 0;
+ pointer-events: none;
+ position: absolute;
+ transform: translateX(-50%);
width: 100%;
+ transition: none;
+ }
+
+ .app-menu-entry__label {
+ font-size: var(--default-font-size);
+ font-weight: bold;
+ letter-spacing: normal;
+ opacity: 1;
+ position: relative;
+ top: calc(50% - var(--default-line-height) / 2);
+ transition: none;
+ max-width: none !important;
+ }
+
+ // hover effect for navigation entries
+ &:hover,
+ &:focus-within {
+
+ &::before {
+ background-color: var(--color-primary);
+ border-radius: 0;
+ bottom: 3px;
+ height: 4px;
+ opacity: 1;
+ width: 100%;
+ }
+
+ .app-menu-entry__label {
+ color: var(--color-primary-hover);
+ }
}
-
- .app-menu-entry--label {
- color: var(--color-primary-hover);
+ }
+
+ &--active {
+
+ .app-menu-entry__label {
+ color: var(--color-primary);
}
}
-
+
+ &__icon {
+ display: none;
+ }
+
// hide navigation menu icons
img {
display: none;
@@ -72,35 +91,35 @@
// mobile menu button
.app-menu-more {
// increase distance of menu button to screen edge
- margin-right: var(--telekom-spacing-composition-space-06);
+ margin-right: 1rem;
.button-vue--vue-tertiary {
opacity: 1;
margin: 0;
filter: unset;
-
+
// decrease size of mobile menu button
&.button-vue--icon-only {
height: 32px;
width: 32px !important;
min-height: 32px;
min-width: 32px;
-
+
background-image: var(--icon-menu-dark);
background-size: auto 24px;
background-position: center;
background-repeat: no-repeat;
-
+
.button-vue__wrapper {
display: none;
}
}
}
-
+
&.action-item--open {
-
+
.action-item__menutoggle {
-
+
&.button-vue--icon-only {
background-image: var(--icon-close-dark);
}
@@ -108,4 +127,7 @@
}
}
}
-}
+ .account-menu__avatar {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/css/components/ncappnavigation.scss b/css/components/ncappnavigation.scss
index b3723629..54400a74 100644
--- a/css/components/ncappnavigation.scss
+++ b/css/components/ncappnavigation.scss
@@ -12,11 +12,18 @@
}
#content-vue .app-navigation {
- border-right: 1px solid var(--telekom-color-ui-faint) !important;
+ border-right: 1px solid var(--color-border) !important;
+
+ .app-navigation__search {
+ display: none;
+ }
+ .files-navigation__list {
+ height: unset;
+ }
// remove gaps between navigation items
- #app-navigation-vue .app-navigation__body ul.app-navigation__list {
- gap: var(--telekom-spacing-composition-space-03) !important;
+ #app-navigation-vue .app-navigation__body ul.app-navigation-list {
+ gap: 0.25rem !important;
padding: 4rem 1.5rem 1.5rem !important;
[data-cy-files-navigation-item="recent"],
@@ -26,6 +33,9 @@
[data-cy-files-navigation-item="favorites"] {
order: 1;
+ div > button {
+ display: none;
+ }
}
[data-cy-files-navigation-item="files"] {
@@ -34,16 +44,63 @@
[data-cy-files-navigation-item="shareoverview"] {
order: 3;
+
+ [data-cy-files-navigation-item ="sharinglinks"],
+ [data-cy-files-navigation-item="filerequest"],
+ [data-cy-files-navigation-item="deletedshares"] {
+ display: none;
+ }
}
- [data-cy-files-navigation-item="trashbin"] {
+
+ [data-cy-files-navigation-item="sharingout"] {
+ order: 3;
+ }
+
+ [data-cy-files-navigation-item="sharingin"] {
order: 4;
}
+
+ [data-cy-files-navigation-item="pendingshares"] {
+ order: 5;
+ }
+
+ [data-cy-files-navigation-item="trashbin"] {
+ order: 5;
+ }
+
+ [data-cy-files-navigation-settings-button] {
+ display: flex;
+ order: 6;
+ }
}
.app-navigation-toggle-wrapper {
top: 1rem !important;
- right: calc(0px - 1rem) !important;
+ right: -0.75rem !important;
+
+ button {
+ padding: 0;
+ width: auto !important;
+
+ .menu-open-icon {
+ background-image: var(--icon-hide-menu-dark);
+ width: 24px;
+ height: 24px;
+
+ svg {
+ display: none;
+ }
+ }
+ }
+ }
+
+ .app-navigation-entry__settings {
+ padding: 0 0 1rem;
+
+ > li {
+ display: none;
+ }
}
&__content &-entry__settings {
@@ -56,15 +113,17 @@
}
// default navbar link styling
-li[id^="app-navigation-item-"] {
+#app-navigation-vue .app-navigation-entry-wrapper {
+
.app-navigation-entry {
- border-radius: var(--telekom-radius-standard);
- font: var(--telekom-text-style-ui-bold);
+ position: relative;
+ border-radius: var(--border-radius-large);
+ font: var(--default-font-style-bold);
transition: none;
.app-navigation-entry-link {
- border-radius: var(--telekom-radius-standard);
- padding: 0.25rem;
+ border-radius: var(--border-radius-large);
+ background-color: transparent !important;
.app-navigation-entry-icon {
background-size: 24px;
@@ -74,8 +133,10 @@ li[id^="app-navigation-item-"] {
&:hover,
&.active,
- &.active:hover {
- background-color: var(--nmc-color-background-hover) !important;
+ &.active:hover,
+ &:focus,
+ &:focus-within {
+ background-color: transparent !important;
}
// do not pin app navigation entries to the bottom
@@ -87,11 +148,19 @@ li[id^="app-navigation-item-"] {
// active link styling
&.active {
&::before {
- background-color: var(--telekom-color-primary-standard);
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ height: 24px;
+ width: 4px;
+ background-color: var(--color-primary);
+ border-radius: 4px;
}
span {
- color: var(--telekom-color-text-and-icon-primary-standard);
+ color: var(--color-primary);
}
.app-navigation-entry-icon {
@@ -102,11 +171,11 @@ li[id^="app-navigation-item-"] {
// on hover link styling
&:hover {
span {
- color: var(--telekom-color-text-and-icon-primary-standard);
+ color: var(--color-primary-hover);
}
.app-navigation-entry-icon {
- filter: var(--nmc-color-icon)
+ filter: var(--nmc-color-icon-hovered);
}
}
@@ -136,16 +205,37 @@ li[id^="app-navigation-item-"] {
}
}
- &--collapsible[data-cy-files-navigation-item=favorites] {
+ // Hide all the SVGs
+ span.icon-vue {
+ display: none;
+ }
+ }
- // hide every subentry
- ul.app-navigation-entry__children {
- display: none !important;
+ &[data-cy-files-navigation-item=shareoverview] {
+ > ul.app-navigation-entry__children {
+ padding-inline-start: 0 !important;
+
+ li {
+ .app-navigation-entry__name {
+ color: var(--nmc-color-strong) !important;
+ margin-left: 48px;
+ }
}
}
- // Hide all the SVGs
- span.icon-vue {
+ .button-vue.icon-collapse {
+ background-color: transparent !important;
+ }
+ }
+
+ &[data-cy-files-navigation-item=favorites] {
+
+ // hide every subentry
+ ul.app-navigation-entry__children {
+ display: none !important;
+ }
+
+ > button {
display: none;
}
}
@@ -180,8 +270,27 @@ li[id^="app-navigation-item-"] {
background-image: var(--icon-share-dark);
}
+ &[data-cy-files-navigation-item=sharingin] .app-navigation-entry-icon {
+ background-image: var(--icon-share-with-me-dark);
+ display: none;
+ }
+
+ &[data-cy-files-navigation-item=sharingout] .app-navigation-entry-icon {
+ display: none;
+ }
+
+ &[data-cy-files-navigation-item=pendingshares] .app-navigation-entry-icon {
+ background-image: var(--icon-share-pending-dark);
+ display: none;
+ }
+
&[data-cy-files-navigation-item=trashbin] .app-navigation-entry-icon {
background-image: var(--icon-delete-dark);
}
+}
+
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section, main {
+ scrollbar-color: var(--color-border-dark) transparent !important;
+ scrollbar-width: thin;
}
\ No newline at end of file
diff --git a/css/components/ncbreadcrumb.scss b/css/components/ncbreadcrumb.scss
index 1b205cc1..9c57134d 100644
--- a/css/components/ncbreadcrumb.scss
+++ b/css/components/ncbreadcrumb.scss
@@ -2,37 +2,51 @@
@import '../variables';
#content-vue .breadcrumb {
+ margin-inline: 1rem;
+
nav {
height: 44px;
+ margin: 0px 10px;
+ @media (min-width: $breakpoint-mobile-medium) and (max-width: $breakpoint-mobile) {
+ nav {
+ flex-shrink: 0;
+ }
+ }
+
ul.breadcrumb__crumbs {
- // Display root as a Home icon
+ // Display root as "Start" text
li.vue-crumb:first-child {
.button-vue__icon {
- background-image: var(--icon-home-dark);
- background-position: center;
- background-repeat: no-repeat;
- svg {
- display: none;
- }
+ display: none;
}
.button-vue__text {
- display: none;
+ display: block !important;
+ visibility: hidden;
+ position: relative;
+ width: 36px;
}
- &:hover {
- .button-vue__icon {
- opacity: 0.7;
- }
+ .button-vue__text::before {
+ content: 'Start';
+ visibility: visible;
+ position: absolute;
+ left: 0;
}
-
}
li.vue-crumb {
- a.button-vue {
+
+ .button-vue {
margin: 0;
- padding: 0 6px;
+ padding: 0;
+
+ &__wrapper {
+ justify-content: flex-start;
+ }
+
&:hover {
background-color: initial;
}
+
&:focus {
outline: none;
background-color: initial;
@@ -49,22 +63,47 @@
}
}
- // Right arrow change
+ // Dot separator
span.chevron-right-icon {
- display: block;
- margin-right: 8px;
- background-image: var(--icon-breadcrumb-arrow-grey);
- width: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 4px;
+ width: 16px;
height: 24px;
svg {
display: none;
}
+ &::before {
+ content: '';
+ width: 4px;
+ height: 4px;
+ border-radius: 50%;
+ background-color: currentColor;
+ opacity: 0.5;
+ }
+ }
+ }
+
+ // Hide dot after last item (no separator after the last breadcrumb)
+ li.vue-crumb:last-child {
+ span.chevron-right-icon {
+ display: none;
}
}
}
}
+}
+// Override at root level to ensure it applies
+.breadcrumb--collapsed .vue-crumb:last-child {
+ min-width: 60px !important;
+}
+
+#content-vue .breadcrumb {
.breadcrumb__actions {
+ margin-left: auto;
+
// hide Share button
button.files-list__header-share-button {
display: none;
@@ -72,41 +111,57 @@
// 'Add new file/folder' button inside breadcrumb
.files-list__header-upload-button {
+ flex-direction: row-reverse;
+
button.action-item__menutoggle {
+ align-items: center;
all: unset;
+ background-color: var(--color-primary);
+ border: none;
+ border-radius: var(--border-radius-rounded);
+ cursor: pointer;
display: flex;
- background-color: var(--color-main-background);
- border: 1px solid var(--telekom-color-text-and-icon-primary-standard);
- border-radius: 50%;
- min-height: unset;
- height: 24px;
- width: 24px;
- max-width: 24px;
+ justify-content: center;
margin: auto 0;
- margin-left: 6px;
-
+ min-height: unset;
+ height: 40px;
+
&:hover:not(:disabled) {
- background-color: initial;
- border-color: var(--telekom-color-text-and-icon-primary-standard);
+ background-color: var(--color-primary-hover);
}
-
+
+ &:active:not(:disabled) {
+ background-color: var(--color-primary-pressed);
+ }
+
.button-vue__icon {
- @include magenta-icon;
- background-image: var(--icon-add-white);
- background-size: 16px 16px;
+ background-image: var(--original-icon-add-white);
+ background-size: 18px;
opacity: 1;
- width: 16px;
- height: 16px;
+ width: 18px;
+ height: 18px;
background-position: center;
background-repeat: no-repeat;
+ margin-inline: 4px -4px;
+ min-width: 40px;
+
svg {
display: none;
}
}
-
- // Do not display text "New" in the button
+
.button-vue__text {
- display: none;
+ color: var(--nmc-color-text-and-icon-white);
+ padding-right: 1rem;
+ }
+
+ @media only screen and (max-width: 511px) {
+ min-width: unset;
+ width: 40px !important;
+
+ .button-vue__icon {
+ margin-inline: 0;
+ }
}
}
diff --git a/css/components/ncbuttons.scss b/css/components/ncbuttons.scss
index 3241dc06..e52a4b7e 100644
--- a/css/components/ncbuttons.scss
+++ b/css/components/ncbuttons.scss
@@ -12,49 +12,48 @@
#body-user .button-vue,
#body-settings .button-vue,
#body-public .button-vue,
-#body-login .button-vue, #body-login .ods-dialog-button,
+#body-login .button-vue,
+#body-login .ods-dialog-button,
#body-status .button-vue,
#error .button-vue {
// we keep coloring of the default button as it is for the moment,
- // but us ethe Telekom roundings instead of Nextcloud full-round sides
-
+ // but use the Telekom roundings instead of Nextcloud full-round sides
border: 0;
padding: 0;
- border-radius: var(--telekom-radius-standard);
- font: var(--telekom-text-style-body);
- font-weight: var(--telekom-typography-font-weight-bold);
+ border-radius: var(--border-radius-pill);
+ font: var(--default-font-style);
+ font-weight: bold;
line-height: 1.125rem;
- min-height: var(--telekom-spacing-composition-space-13);
- min-width: var(--telekom-spacing-composition-space-13);
- padding-left: var(--telekom-spacing-composition-space-07);
- padding-right: var(--telekom-spacing-composition-space-07);
+ min-height: var(--default-clickable-area);
+ min-width: var(--default-clickable-area);
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
&:after {
- top: 0;
- left: 0;
- width: 100%;
- border: var(--telekom-spacing-composition-space-01) solid transparent;
- height: 100%;
+ border: 1px solid transparent;
+ box-sizing: border-box;
content: '';
display: block;
- position: absolute;
- box-sizing: border-box;
+ height: 100%;
+ left: 0;
pointer-events: none;
- border-radius: var(--telekom-radius-standard);
+ position: absolute;
+ top: 0;
+ width: 100%;
}
// Icon-only button
&--icon-only {
- padding-left: var(--telekom-spacing-composition-space-05);
- padding-right: var(--telekom-spacing-composition-space-05);
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
}
// Icon and text button
&--icon-and-text {
- margin-right: var(--telekom-spacing-composition-space-04);
- margin-left: calc(var(--telekom-spacing-composition-space-03) * -1);
- margin-top: var(--telekom-spacing-composition-space-04);
- margin-bottom: var(--telekom-spacing-composition-space-03);
+ margin-right: 0.5rem;
+ margin-left: calc(0.25rem * -1);
+ margin-top: 0.5rem;
+ margin-bottom: 0.25rem;
}
&_left {
@@ -64,55 +63,47 @@
// Button types
// Primary
- &--vue-primary, &_primary {
- border-radius: var(--telekom-radius-standard);
- background-color: var(--telekom-color-primary-standard);
- color: var(--telekom-color-text-and-icon-white-standard);
+ &.button-vue--primary, &--vue-primary, &_primary {
+ border-radius: var(--border-radius-pill);
+ background-color: var(--color-primary);
+ color: var(--nmc-color-text-and-icon-white);
&:hover:not(:disabled) {
- background-color: var(--telekom-color-primary-hovered);
+ background-color: var(--color-primary-hover);
}
&:active {
- background-color: var(--telekom-color-primary-pressed);
+ background-color: var(--color-primary-pressed);
}
&:disabled {
- background-color: var(--telekom-color-ui-disabled);
- color: var(--telekom-color-text-and-icon-disabled);
+ background-color: var(--color-background-dark);
+ color: var(--color-text-lighter);
}
}
// Secondary
- &--vue-secondary, &_secondary {
- background: transparent;
- border-radius: var(--telekom-radius-standard);
- border: var(--telekom-spacing-composition-space-01) solid currentColor;
- color: var(--telekom-color-text-and-icon-standard);
- background-color: var(--telekom-color-ui-state-fill-standard);
- border-color: var(--telekom-color-ui-border-standard);
+ &.button-vue--secondary, &--vue-secondary, &_secondary {
+ background: var(--nmc-ods-blue-primary);
+ border-radius: var(--border-radius-pill);
+ color: var(--nmc-color-text-and-icon-black);
&:hover:not(:disabled) {
- color: var(--telekom-color-text-and-icon-standard);
- background-color: var(--nmc-color-background-hover);
- border-color: var(--telekom-color-ui-border-hovered);
+ background-color: var(--nmc-ods-blue-hover);
}
&:active {
- color: var(--telekom-color-text-and-icon-standard);
- background-color: var(--telekom-color-ui-state-fill-pressed);
- border-color: var(--telekom-color-ui-border-pressed);
+ background-color: var(--nmc-ods-blue-pressed);
}
&:disabled {
- color: var(--telekom-color-text-and-icon-disabled);
- background-color: none;
+ background-color: var(--nmc-ods-blue-contrast);
}
// Icon-only button
&--icon-only {
- padding-left: calc(var(--telekom-spacing-composition-space-03) - 1px);
- padding-right: calc(var(--telekom-spacing-composition-space-03) - 1px);
+ padding-left: calc(0.25rem - 1px);
+ padding-right: calc(0.25rem - 1px);
}
}
@@ -128,5 +119,22 @@
}
:focus {
- outline-color: var(--telekom-color-primary-standard);
-}
\ No newline at end of file
+ outline-color: var(--color-main-text);
+}
+
+#body-user,
+#body-settings,
+#body-public,
+#body-login,
+#body-login,
+#body-status {
+
+ .button {
+
+ &.primary {
+ line-height: 2rem;
+ padding: 0.5rem 1rem;
+ border-radius: 1.5rem;
+ }
+ }
+}
diff --git a/css/components/nccheckbox.scss b/css/components/nccheckbox.scss
index be281ab9..2d7f0f03 100644
--- a/css/components/nccheckbox.scss
+++ b/css/components/nccheckbox.scss
@@ -1,138 +1,101 @@
-// checkbox button styling
-span.checkbox-radio-switch.checkbox-radio-switch-checkbox {
- // on hover unchecked inputs
- &:not(.checkbox-radio-switch--checked):hover .checkbox-radio-switch__icon {
- color: var(--telekom-color-ui-regular);
- }
+.checkbox-radio-switch-checkbox, .checkbox-radio-switch-radio {
.checkbox-radio-switch__label {
- &::after {
- display: none;
- }
- // replace box svg with custom element
- .material-design-icon {
- width: 20px;
- height: 20px;
+ min-height: 0 !important;
+ padding-block: 0.25rem !important;
+ padding-inline: 0.5rem 0.75rem !important;
+ gap: 0.5rem !important;
- // hide original box icon
- svg {
- display: none;
- }
-
- &::before {
- content: '';
- height: 14px;
- width: 14px;
- border-radius: var(--telekom-radius-small);
- border: 1px solid var(--color-border-maxcontrast);
- }
-
- // radio button is checked
- &.checkbox-marked-icon {
- svg {
- display: inline-block;
- }
- &::before {
- display: none;
- }
- // box-shadow: inset 0px 0px 0px 5px var(--telekom-color-primary-standard);
- // border-color: var(--telekom-color-primary-standard);
- }
+ &:hover, &:focus, &:active {
+ background-color: var(--color-background-hover) !important;
}
+ }
- // color indicator when label is hovered
- &:hover {
- .material-design-icon::before {
- border-color: var(--telekom-color-primary-standard);
- }
- }
+ &.checkbox-radio-switch--checked {
- &-text {
- line-height: 1rem;
+ .checkbox-radio-switch__label {
+
+ &:hover, &:focus, &:active {
+ background-color: var(--color-background-hover) !important;
+ }
}
- }
-}
-// radio button styling
-span.checkbox-radio-switch-radio.checkbox-radio-switch {
+ &:focus-within {
- // change indicator color when hovered or focused
- &:not(&--disabled) {
- .checkbox-radio-switch__label:hover, .checkbox-radio-switch__label:focus-within {
- .material-design-icon::before {
- border-color: var(--telekom-color-primary-standard);
- cursor: pointer;
+ .checkbox-radio-switch__label {
+ background-color: var(--color-background-hover) !important;
}
}
}
- label.checkbox-radio-switch__label {
- margin: 0;
-
- // replace circle svg with custom element
- .material-design-icon {
+ .checkbox-radio-switch__icon {
+
+ .checkbox-blank-outline-icon,
+ .radiobox-blank-icon,
+ .minus-box-icon {
+ box-sizing: border-box;
+ border: 1px solid var(--color-border-maxcontrast);
+ border-radius: var(--border-radius-small);
+ height: 20px;
+ width: 20px;
- // hide original circle icon
svg {
display: none;
}
-
- &::before {
- content: '';
- height: 18px;
- width: 18px;
- border-radius: 50%;
- border: var(--telekom-line-weight-standard) solid var(--color-border-maxcontrast);
- }
-
- // radio button is checked
- &.radiobox-marked-icon::before {
- background-color: var(--telekom-color-primary-standard);
- box-shadow: inset 0px 0px 0px 3px var(--telekom-color-text-and-icon-inverted-standard);
- border-color: var(--telekom-color-primary-standard);
+
+ &:hover {
+ background-color: var(--color-background-hover);
+ border-color: var(--color-border-dark);
}
}
- }
-}
-span.checkbox-radio-switch-radio.checkbox-radio-switch, .checkbox-radio-switch-checkbox.checkbox-radio-switch {
- &:not(&--disabled, &--checked):focus-within .checkbox-radio-switch__label,
- &:not(&--disabled, &--checked) .checkbox-radio-switch__label:hover {
- background-color: initial;
- }
+ .checkbox-marked-icon {
+ box-sizing: border-box;
+ background-color: var(--color-primary);
+ background-image: var(--original-icon-check-white);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 16px;
+ border: 1px solid var(--color-primary);
+ border-radius: var(--border-radius-small);
+ height: 20px;
+ width: 20px;
- &--checked:not(&--disabled):focus-within .checkbox-radio-switch__label,
- &--checked:not(&--disabled) .checkbox-radio-switch__label:hover {
- background-color: initial;
- }
+ svg {
+ display: none;
+ }
+ }
- // override min-height of checkbox
- label.checkbox-radio-switch__label {
- min-height: auto;
- }
+ .radiobox-blank-icon {
+ border-radius: var(--border-radius-pill);
+ }
+
+ .radiobox-marked-icon {
+ box-sizing: border-box;
+ background-color: var(--nmc-color-text-and-icon-white);
+ border: 7px solid var(--color-primary);
+ border-radius: var(--border-radius-pill);
+ height: 20px;
+ width: 20px;
- // if checked and disabled color them gray
- &.checkbox-radio-switch--checked.checkbox-radio-switch--disabled {
- label.checkbox-radio-switch__label {
- .checkbox-radio-switch__icon {
- .material-design-icon::before {
- box-shadow: inset 0px 0px 0px 5px var(--telekom-color-ui-disabled);
- border-color: var(--telekom-color-ui-border-disabled);
- }
+ svg {
+ display: none;
}
}
+
}
- // disabled checkbox style
&--disabled {
label.checkbox-radio-switch__label:hover {
cursor: not-allowed;
+
.material-design-icon::before {
cursor: not-allowed;
}
+
.checkbox-radio-switch__label-text {
cursor: not-allowed;
}
}
}
-}
+}
\ No newline at end of file
diff --git a/css/components/ncfields.scss b/css/components/ncfields.scss
index 910c6933..d5f371b3 100644
--- a/css/components/ncfields.scss
+++ b/css/components/ncfields.scss
@@ -7,43 +7,104 @@
*/
// there should be no inputs on status/error pages
+#body-user textarea,
+#body-settings textarea,
+#body-public textarea,
+#body-login textarea {
+ border: 1px solid var(--color-main-text);
+ border-radius: var(--border-radius-large);
+ box-shadow: none;
+ margin: 5px;
+ padding: 0.75rem;
+ width: calc(100% - 10px);
+
+ &:active:disabled,
+ &:hover:disabled,
+ &:focus:disabled {
+ background: none;
+ color: var(--color-text-lighter);
+ border-color: var(--color-background-dark);
+ }
+
+ &:active:not([disabled]) {
+ color: var(--color-text-lighter);
+ border-color: var(--color-border-dark);
+ background-color: var(--color-background-hover);
+ }
+
+ &:hover:not([disabled]) {
+ cursor: text;
+ border-color: var(--color-border-dark);
+ background-color: var(--color-background-hover);
+ }
+
+ &:focus:not([disabled]) {
+ border: 1px solid var(--color-border-dark) !important;
+ border-color: var(--color-border-dark) !important;
+ background-color: var(--color-background-hover);
+ outline: 2px solid var(--color-main-text);
+ outline-offset: 3px;
+ box-shadow: unset!important;
+ }
+}
+
#body-user .input-field,
#body-settings .input-field,
#body-public .input-field,
-#body-login .input-field {
- border-radius: var(--telekom-radius-small);
+#body-login .input-field,
+#body-user .native-datetime-picker,
+#body-settings .native-datetime-picker,
+#body-public .native-datetime-picker,
+#body-login .native-datetime-picker {
+ border-radius: var(--border-radius-container);
margin-block-start: 0;
&__main-wrapper {
- height: 44px;
+ height: 66px !important;
+ margin-top: 0.25px;
+ padding: 0;
}
- &__input {
- padding: 0 var(--telekom-spacing-composition-space-05);
- border: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-border-standard);
- height: 44px !important;
+ &__input, &--input {
+ border: 1px solid var(--color-main-text);
+ border-radius: var(--border-radius-large);
+ box-shadow: none;
+ height: 56px !important;
+ margin: 5px;
+ padding: 0 2rem 0 0.75rem;
+ width: calc(100% - 10px);
&:active:disabled,
&:hover:disabled,
&:focus:disabled {
background: none;
- color: var(--telekom-color-text-and-icon-disabled);
- border-color: var(--telekom-color-ui-border-disabled);
+ color: var(--color-text-lighter);
+ border-color: var(--color-background-dark);
}
&:active:not([disabled]) {
- color: var(--telekom-color-text-and-icon-disabled);
- border-color: var(--telekom-color-ui-border-hovered);
-
+ color: var(--color-text-lighter);
+ border-color: var(--color-border-dark);
+ background-color: var(--color-background-hover);
}
&:hover:not([disabled]) {
cursor: text;
- border-color: var(--telekom-color-ui-border-hovered);
+ border-color: var(--color-border-dark);
+ background-color: var(--color-background-hover);
}
&:focus:not([disabled]) {
- border: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-standard);
+ border: 1px solid var(--color-border-dark) !important;
+ border-color: var(--color-border-dark) !important;
+ background-color: var(--color-background-hover);
+ outline: 2px solid var(--color-main-text);
+ outline-offset: 3px;
+ box-shadow: unset!important;
+ }
+
+ &--error {
+ border-color: var(--color-error-text) !important;
}
&--leading-icon {
@@ -59,14 +120,15 @@
}
}
- &__label {
+ label.input-field__label {
display: none;
}
&__icon {
+
&--leading {
- bottom: -2px;
- left: -2px;
+ bottom: 2px;
+ left: 4px;
svg {
height: 20px;
@@ -80,20 +142,58 @@
}
}
+ &__trailing-button.button-vue {
+ right: 2px;
+ top: 10px;
+ }
+
&__clear-button.button-vue {
- border-radius: var(--telekom-radius-standard);
+ border-radius: var(--border-radius-pill);
height: 100%;
- top: 0;
+ top: 2px;
}
&__helper-text-message {
- font: var(--telekom-text-style-small-bold);
- padding: 0;
+ font: var(--default-font--style-small-bold);
+ padding: 5px;
align-items: center;
+ &--error {
+ color: var(--color-error-text);
+ }
+
&__icon {
height: 11px;
width: 11px;
}
}
+}
+
+#body-user .file-picker {
+ .input-field {
+ &__label {
+ display: block;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: var(--default-font-size);
+ }
+
+ &:hover label.input-field__label,
+ &:focus-within label.input-field__label {
+ top: 22%;
+ left: -1%;
+ transform: translateY(-50%);
+ background-color: transparent;
+ font-size: var(--font-size-small);
+ }
+
+ .input-field__input {
+
+ &:hover,
+ &:focus,
+ &:active {
+ background-color: var(--background-input-hover-focus);
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/css/components/ncheadermenu.scss b/css/components/ncheadermenu.scss
deleted file mode 100644
index 62628a4a..00000000
--- a/css/components/ncheadermenu.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-@import '../variables';
-
-#header {
- .header-right {
-
- .header-menu {
-
- // reposition flyout menus
- &__wrapper {
- background-color: var(--telekom-color-background-surface);
- box-shadow: var(--telekom-shadow-raised-standard);
- filter: none;
- margin: 0.5rem 2rem 0 0;
- padding: 1rem;
- top: calc(var(--header-height) + var(--external-margin));
-
-
- & > .header-menu__content {
- max-height: 80vh;
- width: 492px;
- }
- }
-
- @media screen and (max-width: $breakpoint-mobile) {
- &__wrapper {
- margin: 0 0.5rem;
- padding: 0.5rem;
- }
- }
-
- &__carret {
- background-color: var(--telekom-color-background-surface);
- border: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-faint);
- border-bottom: none;
- border-right: none;
- bottom: -8px;
- height: 16px;
- transform: rotate(45deg);
- width: 16px;
- }
-
- &__content {
- max-width: calc(100vw - 2rem);
- }
- }
- }
-
- .header-left {
- .app-menu {
- &-entry {
- opacity: 1;
- }
- }
- }
-}
\ No newline at end of file
diff --git a/css/components/ncnotecard.scss b/css/components/ncnotecard.scss
new file mode 100644
index 00000000..7564f8c2
--- /dev/null
+++ b/css/components/ncnotecard.scss
@@ -0,0 +1,36 @@
+#body-user .notecard,
+#body-settings .notecard,
+#body-public .notecard,
+#body-login .notecard {
+ border: 0;
+ gap: 1rem;
+ padding: 1.5rem;
+
+ &.notecard--success,
+ &.notecard--info,
+ &.notecard--error,
+ &.notecard--warning {
+ color: var(--nmc-color-text-and-icon-black) !important;
+
+ .notecard__heading,
+ .checkbox-radio-switch {
+ color: var(--nmc-color-text-and-icon-black) !important;
+ }
+
+ .close-icon {
+ background-image: var(--original-icon-close-x-dark);
+ background-position: center;
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+
+ svg {
+ display: none;
+ }
+ }
+ }
+
+ .button {
+ margin-left: 1rem;
+ }
+}
diff --git a/css/components/ncselect.scss b/css/components/ncselect.scss
index 79d53976..1e783555 100644
--- a/css/components/ncselect.scss
+++ b/css/components/ncselect.scss
@@ -1,28 +1,59 @@
-.v-select.select {
+.v-select {
+
+ &.select {
+ min-height: 50px !important;
- .vs__dropdown-toggle {
- border-width: 1px;
- }
+ .vs__dropdown-toggle {
+ border-width: 1px;
+ border-color: var(--color-main-text);
+ border-radius: var(--border-radius-large);
+ box-shadow: none;
+ }
- .vs__actions {
+ .vs__actions {
- .chevron-down-icon {
- display: none;
+ .chevron-down-icon {
+ display: none;
+ }
}
- }
- .vs__selected {
- height: 2rem !important;
- margin: 6px 2px !important;
- min-height: 2rem !important;
+ .vs__selected {
+ color: var(--nmc-color-text-and-icon-black) !important;
+ height: 2rem !important;
+ margin: 6px 2px !important;
+ min-height: 2rem !important;
+ background: var(--nmc-ods-blue-primary) !important;
- .option {
- font-size: 14px;
- height: 2rem;
+ .option {
+ font-size: 14px;
+ height: 2rem;
- &__avatar, &__icon {
- display: none;
+ &__avatar, &__icon {
+ display: none;
+ }
+
+ &__lineone {
+ color: var(--nmc-color-text-and-icon-black) !important;
+ }
+ }
+ }
+
+ .vs__deselect {
+ svg {
+ fill: var(--nmc-color-text-and-icon-black) !important;
}
}
}
}
+
+.vs__dropdown-menu {
+ outline: none !important;
+}
+
+.vs__dropdown-menu--floating {
+ border-radius: 0 0 var(--border-radius-large) var(--border-radius-large) !important;
+ width: max-content;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
\ No newline at end of file
diff --git a/css/components/ncusermenu.scss b/css/components/ncusermenu.scss
index 0c42efcb..86ff68f9 100644
--- a/css/components/ncusermenu.scss
+++ b/css/components/ncusermenu.scss
@@ -2,41 +2,69 @@
@import '../_mixins';
#user-menu {
+ .header-menu__carret {
+ display: none;
+ }
.header-menu__wrapper {
+ border: 1px solid var(--color-border);
+ background-color: var(--color-main-background);
+ position: absolute;
+ margin-top: 8px;
+ overflow-x: hidden;
+
+ li:has(a#profile),
+ li:has(a#admin_settings),
+ li:has(a#core_apps),
+ li:has(a#core_users) {
+ order: 2;
+ }
- ul {
-
- li.menu-entry {
+ li#nmc_welcome_popup-about {
+ order: 1;
+ }
- &#profile {
- display: none;
- }
+ li#profile {
+ display: none;
+ }
- &:hover span,
- &:hover a, &:hover button {
- // Style user menu colors for Darkmode
- @media (prefers-color-scheme: dark) {
- color: var(--nmc-color-text-and-icon-primary-standard);
- background-color: transparent;
- &::after {
- filter: var(--nmc-color-icon)
- }
- }
+ ul {
+ width: 100%;
+ padding: 16px;
+ margin: 0;
+ box-sizing: border-box;
+ overflow-x: hidden;
- }
+ li.menu-entry {
+ width: 100%;
+ padding: 2px 0;
+ margin: 0;
+ box-sizing: border-box;
a, button {
- padding-left: 48px;
+ position: relative;
+ width: 100%;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ padding: 14px 16px 14px 48px;
+ min-height: 52px;
+ border-radius: 6px;
+ transition: background-color 0.15s ease;
+
+ &:hover {
+ background-color: var(--color-background-hover) !important;
+ }
&::after {
content: "";
display: block;
position: absolute;
- top: 0px;
+ top: 50%;
left: 2px;
- height: 100%;
- width: 44px;
+ transform: translateY(-50%);
+ height: 40px;
+ width: 40px;
background-repeat: no-repeat;
background-position: center;
background-size: 24px 24px;
@@ -59,24 +87,79 @@
background-image: var(--icon-customercenter-dark);
}
- &#admin_settings>a::after {
- background-image: var(--icon-admin-dark);
+ &#nmc_welcome_popup-about>a::after {
+ background-image: var(--icon-news-dark);
}
+ }
- &#core_apps>a::after {
- background-image: var(--icon-add-dark);
- }
+ // Account Menu Entry (for Log out)
+ li.account-menu-entry {
+ width: 100%;
+ padding: 2px 0;
+ margin: 0;
+ box-sizing: border-box;
- &#core_users>a::after {
- background-image: var(--icon-users-dark);
- }
+ a, button {
+ position: relative;
+ width: 100%;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ padding: 14px 16px 14px 48px;
+ min-height: 52px;
+ border-radius: 6px;
+ transition: background-color 0.15s ease;
+
+ &:hover {
+ background-color: var(--color-background-hover) !important;
+ }
+
+ &::after {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 2px;
+ transform: translateY(-50%);
+ height: 40px;
+ width: 40px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 24px 24px;
+ }
- &#logout>a::after {
- background-image: var(--icon-logout-dark);
+ img {
+ display: none;
+ }
}
- &#nmc_welcome_popup-about>button::after {
- background-image: var(--icon-news-dark);
+ &>.list-item {
+ --list-item-height: auto;
+ --list-item-padding: 0px;
+ min-height: 52px;
+
+ .list-item-content {
+ padding-inline-start: 0%;
+
+ .list-item-content__name{
+ font-weight: inherit;
+ }
+ }
+
+ > a#logout::after {
+ background-image: var(--icon-logout-dark);
+ }
+
+ > a#nmc_welcome_popup-about {
+
+ .loading-icon {
+ display: none;
+ }
+
+ &::after {
+ background-image: var(--icon-news-dark);
+ }
+ }
}
}
}
diff --git a/css/components/search.scss b/css/components/search.scss
index baaac179..6d5b2e7d 100644
--- a/css/components/search.scss
+++ b/css/components/search.scss
@@ -1,3 +1,4 @@
+@import '../_variables.scss';
@import '../_mixins.scss';
// styling for search popover from header
@@ -34,8 +35,8 @@
.unified-search__form {
& #unified-search__input {
- border: 2px solid var(--telekom-color-ui-border-standard);
- border-radius: 5px;
+ border: 2px solid var(--color-border);
+ border-radius: var(--border-radius-container);
padding-top: 1.5rem;
padding-bottom: 1.5rem;
padding-left: 1rem;
@@ -60,88 +61,176 @@
&:active,
&:hover,
&:focus {
- background-color: var(--nmc-color-background-hover);
+ background-color: var(--color-background-hover);
border: none;
}
}
}
+#unified-search {
+ .modal-container__content {
+ align-items: flex-start;
+ }
+
+ .dialog__name {
+ margin-left: 5px;
+ margin-bottom: 1rem !important;
+ }
+}
+
#unified-search .unified-search-modal {
- padding-block: 1rem 0;
- &__header {
- .input-field {
- label.input-field__label {
- display: none;
- }
- }
+ .unified-search-modal__content {
+ --dialog-height: min(65dvh, 700px);
+
+ .unified-search-modal__header {
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0 0 1rem;
+ top: 0;
+
+ .input-field {
+
+ label.input-field__label {
+ display: block;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: var(--default-font-size);
+ }
- div.unified-search-modal__filters {
- gap: 0;
+ &:hover label.input-field__label,
+ &:focus-within label.input-field__label,
+ &:has(.input-field__input:not(:placeholder-shown)) label.input-field__label {
+ top: 30%;
+ left: 0;
+ transform: translateY(-50%);
+ background-color: transparent;
+ font-size: var(--font-size-small);
+ }
- // Hide people and places filter
- > [data-cy-unified-search-filter="people"],
- > [data-cy-unified-search-filter="places"] {
- display: none;
+ .input-field__input {
+ &:not(:placeholder-shown),
+ &:hover,
+ &:focus,
+ &:active {
+ padding-top: 1rem;
+ }
+ }
}
- button.button-vue {
- all: unset !important;
+ .unified-search-modal__filters {
+ gap: 0;
+ padding-left: 4px;
+ padding-top: 8px;
- &[title="Dateien"], &[title="Files"], &[data-cy-unified-search-filter="current-view"] {
- display: none !important;
+ // Hide people and places filter
+ > [data-cy-unified-search-filter="people"],
+ > [data-cy-unified-search-filter="places"] {
+ display: none;
}
- .button-vue__text {
- color: var(--color-primary);
- }
+ button.button-vue {
+ &[title="Dateien"], &[title="Files"], &[data-cy-unified-search-filter="current-view"] {
+ display: none !important;
+ }
- .button-vue__icon {
+ // Style for filter dropdown buttons (Date, Filter, etc.)
+ &.action-item__menutoggle {
+ background-color: var(--nmc-ods-blue-primary);
+ color: var(--nmc-color-text-and-icon-black);
+ border-radius: var(--border-radius-element);
+ border: none;
+ border-radius: var(--border-radius-small);
+ height: 28px;
+ min-height: 28px;
+ padding: 0 12px;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ box-sizing: border-box;
+ margin-top: 0;
+ margin-left: 5px;
- .material-design-icon {
- background-repeat: no-repeat;
- background-position: center;
- background-size: 24px;
- width: 26px;
- height: 26px;
- filter: var(--nmc-color-icon);
- }
+ &:hover {
+ background-color: var(--nmc-ods-blue-hover);
+ }
- .filter-icon {
- background-image: var(--icon-filter-dark);
- }
+ &:active {
+ background-color: var(--nmc-ods-blue-pressed);
+ }
- .calendar-range-icon {
- background-image: var(--icon-calendar-dark);
- }
+ &[aria-expanded="true"] {
+ background-color: var(--nmc-ods-blue-active);
+ }
- svg {
- display: none;
+ // Hide the left icon
+ .button-vue__icon {
+ display: none;
+ }
+
+ .button-vue__text {
+ color: var(--nmc-color-text-and-icon-black);
+ }
+
+ // Add down arrow icon after the wrapper
+ .button-vue__wrapper {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ &::after {
+ content: '';
+ display: inline-block;
+ width: 6px;
+ height: 6px;
+ border-left: 1.5px solid var(--nmc-color-text-and-icon-black);
+ border-bottom: 1.5px solid var(--nmc-color-text-and-icon-black);
+ transform: rotate(-45deg);
+ margin-top: -2px;
+ transition: transform 0.2s ease;
+ }
+ }
+
+ // Rotate arrow when dropdown is open
+ &[aria-expanded="true"] .button-vue__wrapper::after {
+ transform: rotate(135deg);
+ margin-top: 2px;
+ }
}
}
- svg {
- color: var(--color-primary);
- }
}
- }
- .unified-search-modal__filters-applied {
- .chip {
- .icon {
- display: none;
- }
+ .unified-search-modal__filters-applied {
+ align-items: center;
+ display: flex;
+ padding-top: 8px;
+
+ .chip {
+ background-color: var(--nmc-ods-blue-active);
+ border-radius: 8px;
+ border: none;
+ color: var(--nmc-color-text-and-icon-black);
+ padding: 0 12px;
- background: var(--telekom-color-ui-faint);
- border-radius: 2px;
- border: 1px solid transparent;
+ .icon {
+ display: none;
+ }
+ }
}
+
+ background-color: unset !important;
}
}
&__results {
.result {
&-title {
- padding-bottom: 8px;
+ color: var(--nmc-color-text-primary);
+ font-size: var(--font-size-title-large);
+ margin-top: 1rem;
+ margin-bottom: 0px;
+
span {
color: var(--color-primary-text);
}
@@ -155,7 +244,7 @@
border-radius: 4px;
&:hover {
- background-color: var(--nmc-color-background-hover);
+ background-color: var(--color-background-hover);
}
&__anchor {
@@ -174,10 +263,45 @@
}
}
+ &-item__icon {
+ position: relative;
+ overflow: visible;
+
+ &.icon-folder,
+ &--no-preview {
+ width: 42px;
+ height: 42px;
+ background-image: var(--icon-mime-folder-blue) !important;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+
+ .nmc-search-favorite {
+ position: absolute;
+ top: 0;
+ right: -6px;
+ width: 18px;
+ height: 18px;
+ background-image: var(--icon-starred-yellow);
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ display: block;
+ }
+ }
+
&-footer {
// 'Load more results' button
button {
- color: var(--color-primary);
+ background-color: var(--nmc-ods-blue-primary);
+ color: var(--nmc-color-text-and-icon-black);
+ margin-left: 6px;
+
+ &:hover {
+ background-color: var(--colours-shades-accent-shades-accent-subtle);
+ }
+
.button-vue__icon {
display: none;
}
@@ -189,16 +313,24 @@
&__no-content {
.empty-content__icon {
- height: 128px;
- width: 128px;
+ height: 318px;
+ width: 411px;
+ max-width: 100%;
opacity: 1;
+ @media screen and (max-width: $breakpoint-mobile-small) {
+ height: 200px;
+ width: 258px;
+ }
+
.magnify-icon {
- background-image: var(--icon-search-dark);
- background-size: 128px;
- height: 128px;
- width: 128px;
-
+ background-image: url('../img/decorative_images/cautious-dog.svg');
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ height: 100%;
+ width: 100%;
+
svg {
display: none;
}
@@ -208,6 +340,7 @@
.empty-content__name {
font-weight: 400;
+ font-size: var(--default-font-size);
}
}
}
diff --git a/css/components/tooltip.scss b/css/components/tooltip.scss
index de94ecd4..75aecc04 100644
--- a/css/components/tooltip.scss
+++ b/css/components/tooltip.scss
@@ -4,8 +4,8 @@
padding: 1rem;
max-width: 250px;
background-color: var(--color-main-background);
- border-radius: var(--telekom-radius-large);
- box-shadow: var(--telekom-shadow-floating-standard);
+ border-radius: var(--border-radius-large);
+ box-shadow: 0px 12px 48px 0px hsla(0, 0%, 0%, 0.1), 0px 6px 12px 0px hsla(0, 0%, 0%, 0.1);
}
#nmctooltip_arrow {
diff --git a/css/components/upload.scss b/css/components/upload.scss
index 6382bbed..3553b0f7 100644
--- a/css/components/upload.scss
+++ b/css/components/upload.scss
@@ -5,7 +5,7 @@
position: relative;
#uploadprogressbar {
- border-radius: var(--telekom-radius-standard);
+ border-radius: var(--border-radius-large);
height: 36px;
border-color: var(--color-primary);
font-size: 16px;
@@ -48,6 +48,6 @@
// this wrapper contains + button and progress bar
.actions.creatable {
- gap: var(--telekom-spacing-composition-space-10);
+ gap: 2rem;
align-items: center;
}
\ No newline at end of file
diff --git a/css/layouts/conflictdialog.scss b/css/layouts/conflictdialog.scss
deleted file mode 100644
index 8763e907..00000000
--- a/css/layouts/conflictdialog.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-@import '../mixins.scss';
-@import '../variables';
-
-/**
-* Custom 'File already exists' dialog
-*/
-.oc-dialog.oc-conflict-pre-dlg {
- width: 100%;
- max-width: var(--telekom-size-generic-size-24);
-
- // modal dialog title
- div.flex-container {
- display: flex;
- justify-content: space-between;
-
- // close button
- .oc-conflict-pre-dlg-close-div {
- margin: -15px -15px 0 0;
- width: 35px;
- height: 35px;
- border-radius: var(--telekom-radius-standard);
- &:hover {
- background-color: var(--nmc-color-background-hover);
- }
- a {
- display: block;
- background-image: var(--icon-close-dark);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 24px;
- width: 35px;
- height: 35px;
- &:hover {
- filter: var(--nmc-color-icon)
- }
- }
- }
- }
-
- div.threebuttons {
- display: flex;
- justify-content: end;
- gap: var(--telekom-spacing-composition-space-04);
-
- @media screen and (max-width: $breakpoint-mobile) {
- flex-direction: column;
- }
-
- button {
- min-height: var(--telekom-size-generic-size-12);
- border-radius: var(--telekom-radius-standard);
- text-align: center;
- border: 1px solid #191919;
- padding: 0 var(--telekom-spacing-composition-space-07);
- font: var(--telekom-text-style-body-bold);
- background-color: var(--color-main-background);
-
- &:hover {
- cursor: pointer;
- border: 1px solid #191919;
- background-color: var(--nmc-color-background-hover);
- }
-
- &.primary:active, &.primary:focus, &.primary:hover {
- border-color: inherit;
- color: inherit;
- background-color: inherit;
- }
-
- // separate styling for 'Replace' button
- &.oc-conflict-pre-dlg-replace-button {
- border: 1px solid var(--telekom-color-primary-standard);
- background-color: var(--telekom-color-primary-standard);
- color: var(--color-main-background);
-
- &:hover {
- background-color: var(--telekom-color-primary-hovered);
- }
-
- &.primary:active, &.primary:focus, &.primary:hover {
- border: 1px solid var(--telekom-color-primary-standard);
- background-color: var(--telekom-color-primary-standard);
- color: var(--color-main-background);
- }
- }
- }
- }
-}
-
-@media (prefers-color-scheme: dark) {
- .oc-dialog.oc-conflict-pre-dlg {
- border: 1px solid var(--telekom-color-ui-regular);
- }
-}
diff --git a/css/layouts/footer.scss b/css/layouts/footer.scss
index 8ccb168f..5750511d 100644
--- a/css/layouts/footer.scss
+++ b/css/layouts/footer.scss
@@ -12,44 +12,63 @@
@import '../variables';
footer {
- --footnav-items-bottom-margin: var(--telekom-spacing-composition-space-08);
- --radius: var(--telekom-radius-small);
+ --footnav-items-bottom-margin: 1.5rem;
+ --radius: var(-border-radius);
--border-radius: 0px;
- --footer-font: var(--telekom-text-style-caption-bold);
+ --footer-font: var(--default-font-style-bold);
+}
+
+body:has(#direct-editor) #telekom-minimal-footer {
+ display: none;
}
footer[role="contentinfo"] {
background-color: var(--color-main-background);
- border-radius: 0px 0px 0.5rem 0.5rem;
+ display: block;
font: var(--footer-font);
position: fixed;
- left: 1rem;
- right: 1rem;
- bottom: 24px;
- max-height: 60px;
- max-width: calc(100% - 2rem);
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 42px;
+ width: 100%;
z-index: 998;
- border-top: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-faint);
- padding: 16px 16px;
+ border-top: 1px solid var(--color-border);
+ padding: 0.5rem 1.5rem;
+ box-sizing: border-box;
+
+ @media screen and (max-width: $breakpoint-mobile) {
+ height: auto;
+ min-height: 46px;
+ }
@media screen and (max-width: $breakpoint-mobile-small) {
- border-radius: 0;
- padding: 16px 16px;
- left: 0;
- right: 0;
- bottom: 0;
- max-width: 100%;
+ padding: 0.5rem 1rem;
}
- .footer-content {
- display: flex;
- justify-content: space-between;
+ @media screen and (max-width: 400px) {
+ padding: 0.25rem 0.5rem;
+ }
+
+ .footer-content {
align-content: center;
+ display: flex;
flex-wrap: wrap;
- gap: var(--telekom-spacing-composition-space-06);
+ gap: 5rem;
+ line-height: 1.5rem;
+
+ @media screen and (max-width: $breakpoint-mobile) {
+ gap: 1.5rem;
+ }
@media screen and (max-width: $breakpoint-mobile-small) {
- gap: var(--telekom-spacing-composition-space-04);
+ gap: 0.5rem;
+ font-size: 0.875rem;
+ }
+
+ @media screen and (max-width: 400px) {
+ gap: 0.25rem;
+ font-size: 0.75rem;
}
#notice {
@@ -62,29 +81,52 @@ footer[role="contentinfo"] {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
- gap: 16px;
+ gap: 1.5rem;
+
+ @media screen and (max-width: $breakpoint-mobile-small) {
+ flex-wrap: nowrap;
+ gap: 0.25rem;
+ justify-content: flex-start;
+ font-size: 0.75rem;
+ }
+
+ @media screen and (max-width: 400px) {
+ gap: 0.125rem;
+ font-size: 0.75rem;
+ }
}
li a {
font: var(--footer-font); // override NC guest.scss
- padding: var(--spacing-navigation-standard);
- margin: calc(-1 * var(--spacing-navigation-standard)) 0;
+ padding: 0.5rem;
+ margin: calc(-1 * 0.5rem) 0;
+
+ @media screen and (max-width: $breakpoint-mobile-small) {
+ padding: 0.25rem;
+ margin: calc(-1 * 0.25rem) 0;
+ }
+
+ @media screen and (max-width: 400px) {
+ padding: 0.125rem;
+ margin: calc(-1 * 0.125rem) 0;
+ font-size: 0.75rem;
+ }
}
li a:hover {
- color: var(--telekom-color-text-and-icon-primary-hovered);
+ color: var(--color-primary-hover);
text-decoration: none;
}
li a:active:focus {
- color: var(--telekom-color-text-and-icon-primary-pressed);
+ color: var(--color-primary-pressed-pressed);
box-shadow: none;
text-decoration: none;
}
li a:focus {
outline: none;
- box-shadow: 0 0 0 var(--telekom-spacing-composition-space-02) var(--telekom-color-functional-focus-standard);
+ box-shadow: 0 0 0 2px var(--color-element-info);
border-radius: var(--radius);
text-decoration: none;
}
diff --git a/css/layouts/guestview.scss b/css/layouts/guestview.scss
index 39ca62ca..eac4575e 100644
--- a/css/layouts/guestview.scss
+++ b/css/layouts/guestview.scss
@@ -31,6 +31,41 @@
display: none;
}
}
+
+ .header-end {
+ .public-page-menu__wrapper:has(> a > span > span > .icon-public) {
+ display: none;
+ }
+
+ #public-page-menu {
+ @media screen and (min-width: 513px) {
+ display: none;
+ }
+
+ button.header-menu__trigger {
+ .button-vue__icon svg {
+ display: block !important;
+ }
+ }
+
+ .list-item-content__details {
+ display: none;
+ }
+
+ li:has(#save--link),
+ li:has(#directLink--link) {
+ display: none;
+ }
+ }
+
+ #public-page-menu--primary {
+ .button-vue__icon {
+ .public-page-menu__primary-icon {
+ filter: var(--background-invert-if-bright);
+ }
+ }
+ }
+ }
}
.app-files_sharing #app-content {
@@ -54,30 +89,54 @@
}
}
+ .file-picker__name-container .folder-icon {
+ color: var(--nmc-ods-blue);
+ }
+
+ .dialog__navigation.file-picker__navigation .file-picker__filter-input {
+ max-width: 100%;
+ margin: 0;
+ }
+
+ button.action-item.files-list__row-action-sharing-popup {
+ display: none !important;
+ }
+
+ .v-popper__popper {
+ ul li {
+ &.files-list__row-action-sharing-popup-menu,
+ &.files-list__row-action-sharing-manage {
+ display: none;
+ }
+ }
+ }
+
.app-files_sharing + footer {
- --footer-font: var(--telekom-text-style-caption-bold);
+ --footer-font: var(--default-font-style-bold);
}
- .app-files_sharing + footer[role="contentinfo"] {
- position: fixed;
- display: inline-block;
+ footer[role="contentinfo"] {
background-color: var(--color-main-background);
border-radius: 0px 0px 0.5rem 0.5rem;
+ box-sizing: border-box;
font: var(--footer-font);
+ position: fixed;
left: 1rem;
right: 1rem;
bottom: 24px;
- height: 20px;
- max-width: calc(100% - 4rem);
- margin: auto;
+ height: 46px;
+ max-width: 100%;
z-index: 998;
- border-top: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-faint);
- padding: 16px 16px;
+ border-top: 1px solid var(--color-border);
+ padding: 0.5rem 1rem;
+
+ @media screen and (max-width: $breakpoint-mobile) {
+ height: auto;
+ min-height: 46px;
+ }
@media screen and (max-width: $breakpoint-mobile-small) {
- height: 60px;
border-radius: 0;
- padding: 16px 16px;
left: 0;
right: 0;
bottom: 0;
@@ -86,15 +145,23 @@
.footer-content {
display: flex;
- justify-content: space-between;
align-content: center;
flex-wrap: wrap;
- gap: var(--telekom-spacing-composition-space-06);
+ gap: 5rem;
+ line-height: 1.5rem;
+
+ @media screen and (max-width: $breakpoint-mobile) {
+ gap: 1.5rem;
+ }
@media screen and (max-width: $breakpoint-mobile-small) {
- flex-direction: column;
- align-content: first baseline;
- gap: var(--telekom-spacing-composition-space-04);
+ gap: 0.5rem;
+ font-size: 0.875rem;
+ }
+
+ @media screen and (max-width: 400px) {
+ gap: 0.25rem;
+ font-size: 0.75rem;
}
#notice {
@@ -107,7 +174,19 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
- gap: 16px;
+ gap: 1.5rem;
+
+ @media screen and (max-width: $breakpoint-mobile-small) {
+ flex-wrap: nowrap;
+ gap: 0.25rem;
+ justify-content: flex-start;
+ font-size: 0.75rem;
+ }
+
+ @media screen and (max-width: 400px) {
+ gap: 0.125rem;
+ font-size: 0.75rem;
+ }
}
}
}
@@ -149,4 +228,213 @@
#request-password-button-not-talk {
display: none;
}
+}
+
+#body-public .modal-container {
+ .dialog__name {
+ font-size: 1.5rem;
+ height: unset;
+ line-height: 1.5rem;
+ margin-bottom: 1.5rem;
+ min-height: unset;
+ text-align: left;
+ }
+
+ .file-picker {
+ height: min(80vh, 800px) !important;
+
+ .dialog__wrapper {
+ margin-block: 0 1.5rem;
+ padding-inline: 0;
+ overflow: visible;
+ .dialog__content {
+ margin-top: 1rem;
+ padding: 0;
+ }
+ }
+ &__navigation {
+ display: block;
+ padding: 0;
+ overflow: visible;
+ .input-field {
+ &__input {
+ padding-left: 2.5rem;
+ }
+ &__icon--leading {
+ bottom: 8px;
+ }
+ }
+ }
+ &__filter-input {
+ margin-block: 7px;
+ }
+
+ &__main {
+ box-sizing: border-box;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+ flex: 1;
+ padding-inline: 2px;
+ }
+
+ &__breadcrumbs {
+ flex-grow: 0 !important;
+ }
+
+ &__files {
+ overflow: auto;
+ margin: 0;
+
+ table {
+ width: 100%;
+ max-height: 100%;
+ table-layout: fixed;
+ }
+
+ th:not(.row-size) .button-vue__wrapper {
+ flex-direction: row-reverse;
+ }
+ thead th {
+ background-color: var(--color-main-background);
+ border-bottom: 1px solid var(--color-border) !important;
+
+ position: sticky;
+ z-index: 1;
+ top: 0;
+ padding: 2px;
+
+ &.row-name {
+ width: 230px;
+ }
+
+ .header-wrapper {
+ display: flex;
+ }
+
+ .button-vue {
+ border: none;
+ margin: 0;
+ padding: 0;
+
+ cursor: pointer;
+
+ .button-vue__wrapper{
+ justify-content: start;
+ color: var(--color-text-maxcontrast);
+
+ display: inline-flex;
+ align-items: center;
+ width: 100%;
+ }
+
+ &__text {
+ margin-bottom: 1px;
+ padding: 2px 0;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ font-weight: 400;
+ }
+
+ &__icon {
+ min-width: 20px;
+ width: 20px;
+ }
+ }
+
+ .button-vue:hover:not(:disabled) {
+ background-color: unset;
+ border-color: unset;
+ color: unset;
+ }
+
+ &.row-size {
+ width: 100px;
+ .button-vue__wrapper {
+ justify-content: end !important;
+ }
+ }
+ &.row-modified {
+ width: 120px;
+ .button-vue__wrapper {
+ justify-content: end !important;
+ flex-direction: row;
+ }
+ span.button-vue__text {
+ padding-right: 8px;
+ }
+ }
+ }
+
+ tbody tr {
+ height: 60px;
+ }
+
+ tbody tr:not(.group-header):hover {
+ background-color: var(--color-background-hover);
+ }
+
+ td {
+ border-bottom: 1px solid var(--color-border) !important;
+ cursor: pointer;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &.row-name {
+ padding-inline: 2px 0;
+ padding: 0;
+
+ .file-picker__name-container {
+ cursor: pointer;
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ height: 100%;
+
+ div{
+ cursor: pointer;
+ min-height: 44px;
+ min-width: 44px;
+ line-height: 44px;
+
+ &.file-picker__file-name {
+ padding-left: .5rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ svg {
+ color: var(--nmc-ods-blue-active);
+ height: 44px;
+ width: 44px;
+ }
+ }
+ }
+ }
+
+ &.row-size {
+ text-align: right;
+ padding-inline: 0 14px;
+ }
+
+ &.row-modified {
+ text-align: right;
+ padding-inline: 14px 0;
+
+ span {
+ cursor: pointer;
+ padding-right: 8px;
+ }
+ }
+ }
+ }
+
+ &__header-preview {
+ width: 52px;
+ height: 32px;
+ flex: 0 0 auto;
+ }
+ }
}
\ No newline at end of file
diff --git a/css/layouts/header.scss b/css/layouts/header.scss
index 3adcd87d..5efd3bdb 100644
--- a/css/layouts/header.scss
+++ b/css/layouts/header.scss
@@ -14,9 +14,7 @@
header {
--shadow: 0px 2px 9px rgba(0, 0, 0, 0.15);
- --font-size-app-name: var(--telekom-typography-font-size-small);
- --line-height-app-name: var(--telekom-typography-line-spacing-tight);
- --font-weight-app-name: var(--telekom-typography-font-weight-extra-bold);
+ --font-size-app-name: var(--font-size-small);
--icon-search: var(--original-icon-search-dark);
--icon-user: var(--original-icon-user-dark);
}
@@ -32,13 +30,13 @@ header {
#body-user #header,
#body-settings #header,
#body-public #header {
- background: var(--telekom-color-background-surface) !important;
- border-bottom: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-faint);
- border-radius: 0.5rem 0.5rem 0px 0px;
+ background: var(--color-main-background) !important;
+ border-bottom: 1px solid var(--color-border);
+ border-radius: 0;
height: var(--header-height);
- margin: 1rem 1rem 0;
+ margin: 0;
position: fixed;
- width: calc(100% - 2rem);
+ width: 100%;
@media screen and (max-width: $breakpoint-mobile-small) {
border-radius: 0;
@@ -46,31 +44,97 @@ header {
width: 100%;
}
+ .logo {
+ width: 72px;
+ }
+
// brand logo update
.brand {
display: flex;
+ .brand-link {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+
+ &:focus-visible {
+ outline: 2px solid var(--color-primary);
+ outline-offset: 2px;
+ border-radius: 4px;
+ }
+ }
+
.logo.logo-icon {
background-image: var(--image-logoheader);
position: initial;
- width: 60px;
- height: 60px;
- margin: 6px 0 6px 1.5rem;
+ width: 72px;
+ height: 72px;
+ margin: 0;
}
.title {
- font-size: 25px;
- margin: auto 2.5rem auto 1rem;
- width: 167px;
+ font-weight: bold;
+ font-style: normal;
+ font-size: 1.25rem;
+ color: var(--color-primary);
+ margin: auto 3rem;
+ width: 130px;
}
}
- #header-left,
- .header-left {
+ .header-start {
+
.app-menu {
- &-entry {
- &--label {
- font-weight: 800;
+ width: 100%;
+ display: flex;
+ flex-shrink: 1;
+ flex-wrap: wrap;
+ margin-inline: 4rem 0;
+
+ @media screen and (max-width: $breakpoint-mobile) {
+ margin-inline: 1rem 0;
+ }
+
+ &__list {
+ margin: 0;
+ }
+
+ --app-menu-entry-growth: unset;
+
+ &__overflow {
+
+ .button-vue--vue-tertiary {
+ opacity: 1;
+ margin: 0;
+ filter: unset;
+ }
+ }
+
+ button.action-item__menutoggle {
+ height: 4rem;
+ width: 3rem !important;
+ min-height: 4rem;
+ min-width: 3rem;
+
+ background-image: var(--icon-menu-dark);
+ background-size: auto 24px;
+ background-position: center;
+ background-repeat: no-repeat;
+
+ margin: unset !important;
+ filter: unset !important;
+ opacity: unset !important;
+
+ svg {
+ display: none;
+ }
+
+ .button-vue__wrapper {
+ display: none;
+ }
+
+ &[aria-expanded="true"] {
+ background-image: var(--icon-close-dark);
}
}
}
@@ -79,10 +143,15 @@ header {
// logo and application name
#nextcloud {
height: 100%;
- margin: 0 var(--telekom-spacing-baseline-space-10) 0 0;
+ margin: 0;
overflow: visible;
- padding: 0;
- padding-left: 60px; // logo width
+ padding: 0 0 0 72px;
+
+ .logo {
+ inset-inline-start: 0;
+ bottom: 0;
+ top: 0;
+ }
}
// hide logo and application name in mobile view - show logolayer instead
@@ -100,11 +169,12 @@ header {
order: 3;
}
- #header-right,
- .header-right {
+ #header-end,
+ .header-end {
flex-grow: 1;
flex-shrink: unset;
order: 2;
+ margin: 0;
}
.brand .title {
@@ -113,57 +183,227 @@ header {
}
}
-#notifications {
- display: none;
-}
#header {
- box-shadow: 0 2px 9px var(--color-box-shadow);
- .header-right {
- // hide 'Search contacts' button
+
+ button.button-vue {
+ border: none;
+ }
+
+ .header-menu__caret {
+ display: none;
+ }
+
+ .header-end {
+
+ #notifications {
+ order: 0;
+
+ button.button-vue {
+
+ .button-vue__icon {
+ background-image: var(--icon-notification-dark);
+ background-size: auto 24px;
+ background-position: center;
+ background-repeat: no-repeat;
+
+ svg {
+ display: none;
+ }
+ }
+ }
+
+ #header-menu-notifications {
+ background-color: var(--color-main-background);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius-large);
+ margin-top: 8px;
+
+ .bell-outline-icon {
+ background-image: var(--icon-notification-dark);
+ background-size: 64px;
+ background-position: center;
+ background-repeat: no-repeat;
+ height: 64px;
+ width: 64px;
+
+ svg {
+ display: none;
+ }
+ }
+
+ .notification-heading {
+
+ .button-vue {
+ padding: 0;
+ &:hover {
+
+ &::before {
+ background-color: unset;
+ content: " ";
+ display: block;
+ height: 4px;
+ bottom: 1px;
+ width: 100%;
+ position: absolute;
+ }
+ }
+ }
+ }
+
+ .notification-subject {
+ overflow: hidden;
+ min-width: 0;
+
+ .image {
+ display: none;
+ }
+
+ .rich-text--wrapper {
+ overflow: hidden;
+ width: 100%;
+ min-width: 0;
+
+ > div {
+ overflow: hidden;
+ }
+ }
+
+ strong.rich-text--component {
+ display: inline-block;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ vertical-align: bottom;
+ }
+ }
+
+ .notification-actions {
+
+ .button-vue {
+ border-radius: 9999px;
+ margin-inline: 0 8px;
+ min-height: unset;
+ min-width: unset;
+ padding-block: 0.75rem;
+ padding-inline: 1rem;
+
+ &__text {
+ color: unset;
+ font-size: 14px;
+ font-weight: bold;
+ margin-block: 0;
+ margin-inline: 8px 0;
+ padding: 0;
+ margin: 0;
+ }
+
+ &:hover {
+
+ &::before {
+ background-color: unset;
+ content: " ";
+ display: block;
+ height: 4px;
+ bottom: 1px;
+ width: 100%;
+ position: absolute;
+ }
+ }
+ }
+
+ @media screen and (max-width: $breakpoint-mobile) {
+ padding-right: 0;
+
+ .button-vue__label, .button-vue__text {
+ display: unset;
+ }
+ }
+ }
+
+ .dismiss-all {
+
+ .button-vue {
+ padding-inline: 1rem;
+
+ &:hover {
+
+ &::before {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ // Hide 'Contacts' button
#contactsmenu {
display: none;
}
- // general styling for buttons in the header
+ // Custom styling for buttons in the header
.header-menu {
width: auto;
+
button.button-vue {
width: auto !important;
- padding-left: 0;
+ padding-inline: 0 1.5rem;
+
+ &.header-menu__trigger {
+ border-radius: 0;
+ }
+
.button-vue__label {
+ color: var(--color-main-text);
font-size: 12px;
font-weight: normal;
+ margin-inline-start: 8px;
}
.button-vue__wrapper {
- width: 44px;
+ width: auto;
+
.button-vue__icon {
background-size: auto 24px;
background-position: center;
background-repeat: no-repeat;
+ min-width: 24px;
+ width: 24px;
+
svg {
display: none;
}
}
+
+ .button-vue__text {
+ color: var(--color-main-text);
+ font-size: 12px;
+ font-weight: normal;
+ margin-block: 0;
+ margin-inline: 8px 0;
+ padding: 0;
+ }
}
&:hover {
+
&::before {
background-color: var(--color-primary);
content: " ";
display: block;
height: 4px;
- bottom: 8px;
+ bottom: 1px;
width: 100%;
position: absolute;
}
-
+
.button-vue__label {
color: var(--color-primary);
cursor: pointer;
}
-
+
.button-vue__icon {
filter: var(--nmc-color-icon) !important;
}
@@ -171,51 +411,52 @@ header {
@media screen and (max-width: $breakpoint-mobile) {
padding-right: 0;
- .button-vue__label {
- display: none;
- }
- }
+
+ .button-vue__label, .button-vue__text {
+ display: none;
+ }
+ }
}
}
- }
-}
-// Custom styling for the 'Search' button
-#header .header-right .header-menu.unified-search-menu {
- button {
- border: none;
- border-radius: 0;
- height: 100%;
- .button-vue__wrapper {
- .button-vue__icon {
- background-image: var(--icon-search-dark);
+ // Custom styling for the 'Search' button
+ .unified-search-menu {
+
+ button {
+ height: 100%;
+
+ .button-vue__wrapper {
+ .button-vue__icon {
+ background-image: var(--icon-search-dark);
+ }
+ }
+
}
}
-
- }
-}
-// Custom styling for the 'User' button
-#user-menu {
- @media screen and (max-width: $breakpoint-mobile) {
- margin-right: var(--telekom-spacing-composition-space-03);
- }
+ // Custom styling for the 'User' button
+ #user-menu {
+ @media screen and (max-width: $breakpoint-mobile) {
+ margin-right: 0.25rem;
+ }
- button.header-menu__trigger {
- .button-vue__wrapper {
- .button-vue__icon {
- background-image: var(--icon-user-dark);
+ button.header-menu__trigger {
+ .button-vue__wrapper {
+ .button-vue__icon {
+ background-image: var(--icon-user-dark);
+ }
+ }
}
- }
- }
- .user-menu__avatar {
- display: none;
- }
+ .user-menu__avatar {
+ display: none;
+ }
- //adapted functional menu styles to user menu for uniformity
- .header-menu__content {
- width: 350px !important;
+ //adapted functional menu styles to user menu for uniformity
+ .header-menu__content {
+ width: 350px !important;
+ }
+ }
}
}
@@ -230,9 +471,9 @@ header {
display: inline-flex;
flex: 1;
font-size: var(--font-size-app-name);
- font-weight: var(--font-weight-app-name);
+ font-weight: bold;
justify-content: flex-end;
- margin-right: var(--telekom-spacing-composition-space-10);
+ margin-right: 2rem;
overflow: unset;
padding: 0;
}
@@ -248,11 +489,19 @@ header {
z-index: 0;
}
}
+
+ .header-title {
+ display: none;
+ }
}
.header-shared-by {
font-size: var(--font-size-app-name);
- font-weight: var(--font-weight-app-name);
- line-height: var(--line-height-app-name);
+ font-weight: bold;
+ line-height: 1.25;
+ }
+
+ .public-page-user-menu, .header-menu:not(#public-page-menu) {
+ display: none;
}
}
\ No newline at end of file
diff --git a/css/layouts/login.scss b/css/layouts/login.scss
index b67ac070..6ee9126f 100644
--- a/css/layouts/login.scss
+++ b/css/layouts/login.scss
@@ -15,8 +15,8 @@
justify-content: space-between;
// this is needed as background for the scrollbar
- background-color: var(--telekom-color-additional-teal-500);
- scrollbar-color: var(--telekom-color-additional-teal-900) var(--telekom-color-additional-teal-500);
+ background-color: var(--nmc-color-regular);
+ scrollbar-color: var(--color-primary-light) var(--nmc-color-regular);
// this is the dedicated background image for login
background-image: url('../img/telekom/consent.svg');
@@ -61,7 +61,7 @@
}
main .update {
- background-color: var(--telekom-color-background-surface);
+ background-color: var(--color-main-background);
border-radius: 1rem;
margin: 0 auto;
padding: 1rem;
@@ -73,40 +73,32 @@
.buttons .primary {
border: 0;
- border-radius: var(--telekom-radius-standard);
- background-color: var(--telekom-color-primary-standard);
- color: var(--telekom-color-text-and-icon-white-standard);
- font: var(--telekom-text-style-body);
- font-weight: var(--telekom-typography-font-weight-bold);
+ border-radius: var(--border-radius-pill);
+ background-color: var(--color-primary);
+ color: var(--nmc-color-text-and-icon-white);
+ font: var(--default-font-style);
+ font-weight: bold;
line-height: 1.125rem;
- min-height: var(--telekom-spacing-composition-space-13);
- min-width: var(--telekom-spacing-composition-space-13);
- padding-left: var(--telekom-spacing-composition-space-07);
- padding-right: var(--telekom-spacing-composition-space-07);
+ min-height: var(--default-clickable-area);
+ min-width: var(--default-clickable-area);
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
}
}
-
- // default logo is disabled
- // and takes no space
}
}
#body-login footer[role="contentinfo"] {
- //opacity: var(--telekom-opacity-transparent);
- // this overrides nextcloud properties in versions 25 and 26 that affect our custom footer
border: none;
border-radius: 0.5rem;
min-height: auto;
z-index: 400;
- color: var(--telekom-color-ui-strong);
+ color: var(--nmc-color-strong);
}
@media (prefers-color-scheme: dark) {
#body-login {
- background-image: linear-gradient(rgba(0, 0, 0, 0.5),
- rgba(0, 0, 0, 0.5)),
- url('../img/telekom/consent.svg');
- // don't switch text color
- color: var(--telekom-color-ui-regular);
+ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/telekom/consent.svg');
+ color: var(--nmc-color-regular);
}
}
\ No newline at end of file
diff --git a/css/layouts/modal.scss b/css/layouts/modal.scss
index 6ad04b0b..9ab04e29 100644
--- a/css/layouts/modal.scss
+++ b/css/layouts/modal.scss
@@ -8,10 +8,184 @@
*/
@import '../_mixins.scss';
-#body-user .dialog__modal {
+@import '../_variables.scss';
- .modal-wrapper .modal-container {
- padding-block: 8px;
+#body-user,
+#body-settings,
+#body-login,
+#body-status,
+#body-public {
+
+ .modal-mask {
+ background-color: var(--nmc-color-main-background-mask);
+
+ &--opaque {
+ background-color: var(--nmc-color-main-background-mask-opaque);
+ }
+
+ &--light:not(.viewer) {
+ background-color: var(--nmc-color-main-background-mask) !important;
+ }
+
+ .modal-wrapper {
+
+ &.modal-wrapper--full {
+
+ .modal-container {
+ box-shadow: none;
+ padding: 0;
+ max-height: 100dvh;
+ }
+ }
+
+ &.modal-wrapper--normal {
+ .modal-container {
+ width: 640px;
+ }
+ }
+
+ .modal-container {
+ box-shadow: unset;
+ box-sizing: border-box;
+ padding: 1.5rem;
+ max-height: 80dvh;
+ max-width: 100vw;
+ display: flex;
+ flex-direction: column;
+
+ .modal-container__close {
+ top: 0.5rem;
+ right: 0.5rem;
+ touch-action: manipulation;
+ }
+
+ &__content {
+ padding-inline: 0;
+
+ .button-vue--vue-secondary {
+ background: var(--nmc-ods-blue-primary);
+ border-radius: var(--border-radius-pill);
+ border: none;
+ color: var(--nmc-color-text-and-icon-black);
+ margin: 0;
+
+ &:hover {
+ background-color: var(--nmc-ods-blue-hover);
+ }
+
+ &:active {
+ background-color: var(--nmc-ods-blue-pressed);
+ }
+
+ .button-vue__icon {
+ min-width: 2rem;
+ width: 2rem;
+
+ .folder-outline-icon {
+ background-image: var(--icon-folder-dark);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 18px;
+ width: 24px;
+ height: 24px;
+
+ svg {
+ display: none;
+ }
+ }
+ }
+
+ .button-vue__text {
+ margin: 0;
+ padding: 0;
+ }
+ }
+
+ .modal__content--file {
+
+ .modal__left {
+ margin-block: 1.5rem 0.5rem;
+ padding-top: calc(2 / 3 * 100%);
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+ }
+
+ .modal__image {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ .app-settings-section__name, .app-settings-section__content, .setting-section-subline, .photos-locations {
+ margin-bottom: 0.5rem;
+ }
+ }
+
+ .dialog__content {
+ overflow-y: auto;
+ padding-inline: 0;
+ }
+
+ &:has(.modal__content--exif) {
+ padding: 0;
+
+ .modal__content--file {
+
+ .modal__left {
+ border-radius: var(--border-radius-container) var(--border-radius-container) 0 0;
+ margin: 0;
+ padding-top: 50%;
+
+ .modal__image {
+ border-radius: 0;
+ min-height: auto;
+ }
+ }
+
+ .modal__right {
+ padding-block: 1rem;
+ padding-inline: 1.5rem;
+ }
+ }
+
+ .modal-container__close {
+ background-color: var(--color-background-hover);
+ border-radius: var(--border-radius-element);
+ }
+ }
+ }
+ }
+
+ .modal-wrapper--large > .modal-container {
+ width: 650px;
+
+ @media screen and (max-width: $breakpoint-mobile-medium) {
+ width: 90vw;
+ max-width: 600px;
+ }
+
+ @media screen and (max-width: $breakpoint-mobile-small) {
+ width: 95vw;
+ max-width: none;
+ }
+ }
+
+ .modal-container {
+ @media screen and (max-width: $breakpoint-mobile-small) {
+ margin: 1rem;
+ }
+
+ .dialog__name {
+ @media screen and (max-width: $breakpoint-mobile-small) {
+ font-size: 1.25rem;
+ padding: 1rem 1rem 0.5rem;
+ }
+ }
+ }
}
}
@@ -23,7 +197,7 @@
}
#oc-dialog-filepicker-content {
- background-color: var(--telekom-color-background-surface);
+ background-color: var(--color-main-background);
.actions.creatable {
background: unset;
@@ -33,7 +207,7 @@
.icon.icon-add.button.button-add {
background-color: unset;
- border-color: var(--telekom-color-primary-standard);
+ border-color: var(--color-primary);
height: 24px;
opacity: 1;
width: 24px;
@@ -69,7 +243,7 @@
}
&.date {
- color: var(--telekom-color-text-and-icon-standard);
+ color: var(--color-main-text);
}
}
}
@@ -87,4 +261,8 @@
filter: var(--nmc-color-icon)
}
}
+}
+
+#body-public .modal-container {
+ background-color: var(--color-main-background);
}
\ No newline at end of file
diff --git a/css/layouts/public.scss b/css/layouts/public.scss
index c908b93b..24dcd68d 100644
--- a/css/layouts/public.scss
+++ b/css/layouts/public.scss
@@ -6,6 +6,9 @@
* SPDX-License-Identifier: AGPL-3.0-or-later
* Note: Take care of Telekom branding restrictions!
*/
+@import '../_mixins.scss';
+@import '../variables';
+
#body-public {
#nextcloud {
@@ -18,7 +21,7 @@
font-size: var(--font-size-app-name);
font-weight: var(--font-weight-app-name);
justify-content: flex-end;
- margin-right: var(--telekom-spacing-composition-space-10);
+ margin-right: 2rem;
overflow: unset;
padding: 0;
}
@@ -44,19 +47,31 @@
footer[role=contentinfo] {
background-color: var(--color-main-background);
- border-radius: 0px 0px 0.5rem 0.5rem;
+ display: block;
font: var(--footer-font);
position: fixed;
- margin: 0;
- left: 1rem;
- right: 1rem;
- bottom: 24px;
- max-height: 60px;
- max-width: calc(100% - 2rem);
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 42px;
+ width: 100%;
z-index: 998;
- border-top: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-faint);
- padding: 1rem;
- display: block;
+ border-top: 1px solid var(--color-border);
+ padding: 0.5rem 1.5rem;
+ box-sizing: border-box;
+
+ @media screen and (max-width: $breakpoint-mobile) {
+ height: auto;
+ min-height: 46px;
+ }
+
+ @media screen and (max-width: $breakpoint-mobile-small) {
+ border-radius: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ max-width: 100%;
+ }
}
.app-photos #app-content-vue .files-list-viewer li {
@@ -69,4 +84,17 @@
.photos-navigation {
padding: 1.5rem 2rem !important;
}
+
+ footer {
+ transform: unset;
+ width: 100%;
+
+ &.guest-box {
+ top: unset;
+
+ .footer__simple-sign-up {
+ display: none;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/css/layouts/status.scss b/css/layouts/status.scss
index d6de1602..8cb191f6 100644
--- a/css/layouts/status.scss
+++ b/css/layouts/status.scss
@@ -7,11 +7,13 @@
* Note: Take care of Telekom branding restrictions!
*/
+@import '../variables';
+
#error,
#body-status {
// this is needed as background for the scrollbar
- background-color: var(--telekom-color-primary-standard);
- scrollbar-color: var(--telekom-color-primary-pressed) var(--telekom-color-text-and-icon-primary-standard);
+ background-color: var(--color-primary);
+ scrollbar-color: var(--color-primary-pressed) var(--color-primary);
// this is the dedicated background image for login
background-image: url('../img/telekom/consent.svg');
@@ -30,12 +32,128 @@
// default logo is disabled
// and takes no space
}
-}
-#error #body-status footer[role="contentinfo"],
-#body-status footer[role="contentinfo"] {
- opacity: var(--telekom-opacity-semi-transparent);
- color: var(--telekom-color-text-and-icon-white-standard);
+ footer {
+ --footnav-items-bottom-margin: 1.5rem;
+ --radius: var(-border-radius);
+ --border-radius: 0px;
+ --footer-font: var(--default-font-style-bold);
+ }
+
+ footer[role="contentinfo"] {
+ background-color: var(--color-main-background);
+ display: block;
+ font: var(--footer-font);
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 42px;
+ width: 100%;
+ z-index: 998;
+ border-top: 1px solid var(--color-border);
+ padding: 0.5rem 1.5rem;
+ box-sizing: border-box;
+ opacity: 0.5;
+ top: unset;
+ margin: 0;
+ border-radius: 0;
+
+ @media screen and (max-width: $breakpoint-mobile) {
+ height: auto;
+ min-height: 46px;
+ }
+
+ @media screen and (max-width: $breakpoint-mobile-small) {
+ padding: 0.5rem 1rem;
+ }
+
+ @media screen and (max-width: 400px) {
+ padding: 0.25rem 0.5rem;
+ }
+
+ .footer-content {
+ align-content: center;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 5rem;
+ line-height: 1.5rem;
+
+ @media screen and (max-width: $breakpoint-mobile) {
+ gap: 1.5rem;
+ }
+
+ @media screen and (max-width: $breakpoint-mobile-small) {
+ gap: 0.5rem;
+ font-size: 0.875rem;
+ }
+
+ @media screen and (max-width: 400px) {
+ gap: 0.25rem;
+ font-size: 0.75rem;
+ }
+
+ #notice {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ }
+
+ #navigation {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ gap: 1.5rem;
+
+ @media screen and (max-width: $breakpoint-mobile-small) {
+ flex-wrap: nowrap;
+ gap: 0.25rem;
+ justify-content: flex-start;
+ font-size: 0.75rem;
+ }
+
+ @media screen and (max-width: 400px) {
+ gap: 0.125rem;
+ font-size: 0.75rem;
+ }
+ }
+
+ li a {
+ font: var(--footer-font); // override NC guest.scss
+ padding: 0.5rem;
+ margin: calc(-1 * 0.5rem) 0;
+
+ @media screen and (max-width: $breakpoint-mobile-small) {
+ padding: 0.25rem;
+ margin: calc(-1 * 0.25rem) 0;
+ }
+
+ @media screen and (max-width: 400px) {
+ padding: 0.125rem;
+ margin: calc(-1 * 0.125rem) 0;
+ font-size: 0.75rem;
+ }
+ }
+
+ li a:hover {
+ color: var(--color-primary-hover);
+ text-decoration: none;
+ }
+
+ li a:active:focus {
+ color: var(--color-primary-pressed-pressed);
+ box-shadow: none;
+ text-decoration: none;
+ }
+
+ li a:focus {
+ outline: none;
+ box-shadow: 0 0 0 2px var(--color-element-info);
+ border-radius: var(--radius);
+ text-decoration: none;
+ }
+ }
+ }
}
@media (prefers-color-scheme: dark) {
diff --git a/css/login/grant.scss b/css/login/grant.scss
index fa9f4d92..8138db83 100644
--- a/css/login/grant.scss
+++ b/css/login/grant.scss
@@ -17,6 +17,7 @@
}
#redirect-link {
+
#submit-wrapper input {
@include primary-button;
}
diff --git a/css/nmcdefault.scss b/css/nmcdefault.scss
index db095492..abfbdb82 100644
--- a/css/nmcdefault.scss
+++ b/css/nmcdefault.scss
@@ -9,131 +9,197 @@
@use "sass:color";
:root, [data-themes*=light], [data-themes*=dark] {
- --color-main-background: var(--telekom-color-background-canvas);
- --color-main-background-rgb: var(--telekom-color-background-canvas-rgb);
+ --color-main-background: var(--mode-basic-background);
+ --color-main-background-rgb: rgb(from var(--color-main-background) r g b);
--color-main-background-translucent: rgba(var(--color-main-background-rgb), .97);
--color-main-background-blur: rgba(var(--color-main-background-rgb), .8);
- --filter-background-blur: blur(25px);
- --color-background-hover: var(--telekom-color-ui-subtle);
- --color-background-dark: var(--telekom-color-ui-faint);
- --color-background-darker: var(--telekom-color-ui-regular);
- --color-placeholder-light: var(--telekom-color-ui-subtle);
- --color-placeholder-dark: var(--telekom-color-ui-faint);
- --color-main-text: var(--telekom-color-text-and-icon-standard);
- --color-text-maxcontrast: var(--telekom-color-ui-strong);
- --color-text-maxcontrast-default: var(--telekom-color-ui-strong);
- --color-text-maxcontrast-background-blur: var(--telekom-color-ui-extra-strong);
- --color-text-light: var(--telekom-color-ui-extra-strong);
- --color-text-lighter: var(--telekom-color-ui-regular);
+ --filter-background-blur: blur(1.5rem);
+
+ --color-background-hover: var(--mode-basic-background-subtle);
+ --color-background-dark: var(--mode-shades-neutral-shades-200);
+ --color-background-darker: var(--mode-shades-neutral-shades-300);
+
+ --color-placeholder-light: var(--mode-shades-neutral-shades-100);
+ --color-placeholder-dark: var(--mode-shades-neutral-shades-200);
+
+ --color-main-text: var(--mode-basic-text);
+ --color-main-hover: var(--mode-interaction-states-hover-background-hover);
+ --color-text-maxcontrast: var(--mode-shades-neutral-shades-700);
+ --color-text-maxcontrast-default: var(--mode-shades-neutral-shades-700);
+ --color-text-maxcontrast-background-blur: var(--mode-shades-neutral-shades-900);
+ --color-text-lighter: var(--mode-basic-text-recessive);
+
--color-scrollbar: rgba(34,34,34, .15);
- --color-error: var(--telekom-color-functional-danger-standard);
+
+ --color-error: var(--colours-functional-destructive-subtle);
--color-error-rgb: rgb(--color-error);
- --color-error-hover: var(--telekom-color-functional-danger-hovered);
- --color-error-text: var(--telekom-color-text-and-icon-functional-danger);
- --color-warning: var(--telekom-color-functional-warning-standard);
- --color-warning-rgb: rgb(--color-warning);
- --color-warning-hover: var(--telekom-color-functional-warning-hovered);
- --color-warning-text: var(--telekom-color-text-and-icon-functional-warning);
- --color-success: var(--telekom-color-functional-success-standard);
- --color-success-rgb: rgb(--color-success);
- --color-success-hover: var(--telekom-color-functional-success-hovered);
- --color-success-text: var(--telekom-color-text-and-icon-functional-success);
- --color-info: var(--telekom-color-functional-informational-standard);
+ --color-error-hover: var(--colours-functional-destructive-hovered);
+ --color-error-text: var(--colours-functional-destructive-standard);
+
+ --color-info: var(--colours-functional-informational-subtle);
--color-info-rgb: rgb(--color-info);
- --color-info-hover: var(--telekom-color-functional-informational-hovered);
- --color-info-text: var(--telekom-color-text-and-icon-functional-informational);
- --color-loading-light: var(--telekom-color-ui-faint);
- --color-loading-dark: var(--telekom-color-ui-strong);
+ --color-info-hover: var(--colours-functional-informational-hovered);
+ --color-info-text: var(--colours-functional-informational-standard);
+
+ --color-success: var(--colours-functional-success-subtle);
+ --color-success-rgb: rgb(--color-success);
+ --color-success-hover: var(--colours-functional-success-hovered);
+ --color-success-text: var(--colours-functional-success-standard);
+
+ --color-warning: var(--colours-functional-warning-subtle);
+ --color-warning-rgb: rgb(--color-warning);
+ --color-warning-hover: var(--colours-functional-warning-hovered);
+ --color-warning-text: var(--colours-functional-warning-standard);
+
+ --color-element-error: var(--color-error);
+ --color-element-info: var(--color-info);
+ --color-element-success: var(--color-success);
+ --color-element-warning: var(--color-warning);
+ --color-border-error: var(--color-element-error);
+ --color-border-success: var(--color-element-success);
+ --color-text-error: var(--color-element-error);
+ --color-text-success: var(--color-element-success);
+ --color-favorite: #FFD43B;
+
+ --color-loading-light: var(--mode-shades-neutral-shades-300);
+ --color-loading-dark: var(--mode-shades-neutral-shades-700);
--color-box-shadow-rgb: 0,0,0;
--color-box-shadow: rgba(var(--color-box-shadow-rgb), 0.1);
- --color-border: var(--telekom-color-ui-faint);
- --color-border-dark: var(--telekom-color-ui-regular);
- --color-border-maxcontrast: var(--telekom-color-ui-strong);
+ --color-border: var(--mode-shades-neutral-shades-300);
+ --color-border-dark: var(--mode-shades-neutral-shades-500);
+ --color-border-maxcontrast: var(--mode-shades-neutral-shades-700);
+
+ --color-primary: var(--mode-basic-accent);
+ --color-primary-hover: var(--mode-interaction-states-hover-accent-hover);
+ --color-primary-pressed: var(--mode-interaction-states-pressed-accent-pressed);
+ --color-primary-text: var(--mode-basic-text-on-accent);
+
+ --color-primary-light: var(--mode-shades-neutral-shades-100);
+ --color-primary-light-hover: var(--mode-shades-neutral-shades-200);
+ --color-primary-light-text: var(--mode-basic-text);
+
+ --color-primary-element: var(--mode-basic-accent);
+ --color-primary-element-hover: var(--mode-interaction-states-hover-accent-hover);
+ --color-primary-element-text: var(--mode-basic-text-on-accent);
+ --color-primary-element-text-dark: var(--mode-shades-neutral-shades-200);
+
+ --color-primary-element-light: var(--mode-shades-neutral-shades-100);
+ --color-primary-element-light-hover: var(--mode-shades-neutral-shades-200);
+ --color-primary-element-light-text: var(--mode-basic-text);
+
+ --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
+ --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+
+ --color-background-plain: var(--color-main-background);
+ --color-background-plain-text: var(--color-main-text);
+
+ --color-background-assistant: var(--colours-shades-neutral-shades-100);
+ --color-border-assistant: linear-gradient(120deg, var(--colours-shades-neutral-shades-500) 50%, var(--colours-shades-neutral-shades-600) 120%);
+ --color-element-assistant: linear-gradient(200deg, var(--colours-shades-neutral-shades-400) 15%, var(--colours-shades-neutral-shades-500) 40%, var(--colours-shades-neutral-shades-600) 80%);
+ --color-element-assistant-icon: linear-gradient(200deg, var(--colours-shades-neutral-shades-400) 15%, var(--colours-shades-neutral-shades-500) 40%, var(--colours-shades-neutral-shades-600) 80%);
+
--font-face: TeleNeoWeb, sans-serif, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
- --default-font-size: var(--telekom-typography-font-size-body);
- --animation-quick: var(--telekom-motion-duration-transition);
- --animation-slow: var(--telekom-motion-duration-animation);
- --border-radius: var(--telekom-radius-small);
- --border-radius-large: var(--telekom-radius-standard);
- --border-radius-rounded: var(--telekom-radius-large);
- --border-radius-pill: var(--telekom-radius-pill);
+ --default-font-size: var(--body-m-regular-font-size);
+ --default-font-style: 400 1rem/1.4 TeleNeoWeb, sans-serif;
+ --default-font-style-bold: 700 1rem/1 TeleNeoWeb, sans-serif;
+ --default-font--style-small-bold: 700 0.75rem/1.35 TeleNeoWeb, sans-serif;
+ --font-size-small: var(--microcopy-regular-font-size);
+ --font-size-title-large: var(--body-l-font-size);
+
+ --animation-quick: 100ms;
+ --animation-slow: 300ms;
+
+ --border-radius-small: var(--radius-extra-small);
+ --border-radius-element: var(--radius-small);
+ --border-radius-container: var(--radius-medium);
+ --border-radius-container-large: var(--radius-large);
+
+ --border-radius: var(--radius-small);
+ --border-radius-large: var(--radius-medium);
+ --border-radius-rounded: var(--radius-large);
+ --border-radius-pill: var(--radius-full);
--default-clickable-area: 48px;
+ --clickable-area-large: 48px;
+ --clickable-area-small: 24px;
+ --default-grid-baseline: 4px;
--default-line-height: 22px;
- --default-grid-baseline: 4px;
- --header-height: 73px;
+
+ --header-height: 72px;
--navigation-width: 300px;
--sidebar-min-width: 300px;
--sidebar-max-width: 500px;
- --list-min-width: 200px;
- --list-max-width: 300px;
- --header-menu-item-height: 60px;
- --header-menu-profile-item-height: 60px;
--breakpoint-mobile: 1024px;
+
+ --header-menu-item-height: 60px;
+ --header-menu-icon-mask: linear-gradient(var(--color-background-plain-text) 25%, color-mix(in srgb, var(--color-background-plain-text), 55% transparent) 90%) alpha;
- --background-invert-if-dark: none;
--background-invert-if-bright: invert(100%);
--background-image-invert-if-bright: invert(100%);
- --background-image-color-text: var(--telekom-color-text-and-icon-standard);
-
- --color-primary: var(--telekom-color-primary-standard);
- --color-primary-default: var(--telekom-color-primary-standard);
- --color-primary-text: var(--telekom-color-text-and-icon-standard);
- --color-primary-hover: #E20074;
- --color-primary-light: var(--telekom-color-ui-subtle);
- --color-primary-light-text: var(--telekom-color-text-and-icon-standard);
- --color-primary-light-hover: var(--telekom-color-ui-faint);
- --color-primary-element: var(--telekom-color-primary-standard);
- --color-primary-element-hover: var(--telekom-color-primary-hovered);
- --color-primary-element-text: var(--telekom-color-text-and-icon-standard);
- --color-primary-element-light: var(--telekom-color-ui-subtle);
- --color-primary-element-light-hover: var(--telekom-color-ui-faint);
- --color-primary-element-light-text: var(--telekom-color-text-and-icon-standard);
- --color-primary-element-text-dark: var(--telekom-color-text-and-icon-inverted-standard);
- --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
- --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+ --background-invert-if-dark: none;
+
+ --primary-invert-if-bright: none;
+ --primary-invert-if-dark: invert(100%);
+
--image-background: none;
- --image-background-default: none;
--image-logoheader-custom: var(--image-logoheader);
- --color-background-plain: var(--telekom-color-background-canvas);
- --nmc-breakpoint-mobile: 1024px;
- --nmc-color-background-hover: #EDEDED;
- --nmc-color-row-hover: #EDEDED;
- --nmc-color-row-selected: #dfdfe1;
- --nmc-color-text-and-icon-primary-standard: var(--telekom-color-text-and-icon-primary-standard);
+ --body-container-radius: var(--border-radius-container-large);
+ --body-container-margin: calc(var(--default-grid-baseline) * 2);
+ --footer-height: 42px;
+ --body-height: calc(100% - var(--header-height) - var(--footer-height));
+
+ --border-width-input: var(--strokes-1);
+ --border-width-input-focused: var(--strokes-2);
+ --background-input-hover-focus: var(--mode-shades-neutral-shades-200);
+
+ --nmc-color-main-background-mask: rgb(from var(--color-main-text) r g b / 0.4);
+ --nmc-color-main-background-mask-opaque: rgb(from var(--color-main-text) r g b / 1);
+ --nmc-color-regular: var(--mode-shades-neutral-shades-500);
+ --nmc-color-strong: var(--mode-shades-neutral-shades-700);
+ --nmc-color-faint: var(--mode-shades-neutral-shades-300);
+ --nmc-color-text-and-icon-inverted: var(--mode-inverted-basic-text);
+ --nmc-color-text-and-icon-link: var(--colours-basic-text-link);
+ --nmc-color-text-and-icon-black: #000;
+ --nmc-color-text-and-icon-white: #FFF;
+ --nmc-color-text-primary: var(--mode-basic-text); //light mode: dark; dark mode: white
+ --nmc-color-text-on-accent: var(--mode-basic-text-on-accent);//light mode: white; dark mode: dark
--nmc-color-icon: invert(17%) sepia(87%) saturate(5418%) hue-rotate(319deg) brightness(85%) contrast(110%);
+ --nmc-color-icon-hovered: brightness(0) saturate(100%) invert(11%) sepia(93%) saturate(6579%) hue-rotate(321deg) brightness(71%) contrast(107%);
--nmc-color-sceme: light;
+
+ --nmc-ods-blue-primary: var(--colours-shades-accent-shades-accent-extra-dominant);
+ --nmc-ods-blue-active: var(--colours-basic-background-subtle);
+ --nmc-ods-blue-hover: var(--colours-interaction-states-hover-background-hover);
+ --nmc-ods-blue-pressed: var(--colours-interaction-states-pressed-background-pressed);
+ --nmc-ods-blue-contrast: var(--colours-shades-accent-shades-accent-extra-recessive);
+ --nmc-ods-blue: var(--colours-basic-background);
}
@media (prefers-color-scheme: dark) {
:root {
- --nmc-color-text-and-icon-primary-standard: #ec59a5;
- --nmc-color-text-and-icon-primary-pressed: #f080ba;
-
- --nmc-color-background-hover: var(--telekom-color-ui-faint);
- --nmc-color-row-hover: #242426;
- --nmc-color-row-selected: #48484b;
- --nmc-color-icon: brightness(0) saturate(100%) invert(17%) sepia(87%) saturate(5418%) hue-rotate(319deg) brightness(85%) contrast(110%);
- --nmc-color-sceme: dark;
-
--background-invert-if-dark: invert(100%);
--background-invert-if-bright: none;
--background-image-invert-if-bright: none;
+
+ --primary-invert-if-bright: invert(100%);
+ --primary-invert-if-dark: none;
+
+ --nmc-color-icon: brightness(0) saturate(100%) invert(17%) sepia(87%) saturate(5418%) hue-rotate(319deg) brightness(85%) contrast(110%);
+ --nmc-color-icon-hovered: brightness(0) saturate(100%) invert(11%) sepia(93%) saturate(6579%) hue-rotate(321deg) brightness(71%) contrast(107%);
+ --nmc-color-sceme: dark;
}
}
[data-themes*=dark] {
- --nmc-color-text-and-icon-primary-standard: #ec59a5;
- --nmc-color-text-and-icon-primary-pressed: #f080ba;
-
- --nmc-color-background-hover: var(--telekom-color-ui-faint);
- --nmc-color-row-hover: #242426;
- --nmc-color-row-selected: #48484b;
- --nmc-color-icon: brightness(0) saturate(100%) invert(17%) sepia(87%) saturate(5418%) hue-rotate(319deg) brightness(85%) contrast(110%);
- --nmc-color-sceme: dark;
-
--background-invert-if-dark: invert(100%);
--background-invert-if-bright: none;
--background-image-invert-if-bright: none;
+
+ --primary-invert-if-bright: invert(100%);
+ --primary-invert-if-dark: none;
+
+ --nmc-color-icon: brightness(0) saturate(100%) invert(17%) sepia(87%) saturate(5418%) hue-rotate(319deg) brightness(85%) contrast(110%);
+ --nmc-color-icon-hovered: brightness(0) saturate(100%) invert(11%) sepia(93%) saturate(6579%) hue-rotate(321deg) brightness(71%) contrast(107%);
+ --nmc-color-sceme: dark;
}
\ No newline at end of file
diff --git a/css/nmcstyle.scss b/css/nmcstyle.scss
index 5cfcfebc..e8bffc16 100644
--- a/css/nmcstyle.scss
+++ b/css/nmcstyle.scss
@@ -12,49 +12,45 @@
*/
/* Nextcloud vue component library styles */
+@import 'components/ncactions.scss';
@import 'components/ncappmenu.scss';
-@import 'components/ncbreadcrumb.scss';
-@import 'components/ncfields.scss';
@import 'components/ncappnavigation.scss';
-@import 'components/ncheadermenu.scss';
+@import 'components/ncbreadcrumb.scss';
@import 'components/ncbuttons.scss';
@import 'components/nccheckbox.scss';
-@import 'components/ncusermenu.scss';
-@import 'components/ncactions.scss';
-@import 'components/ncselect.scss';
+@import 'components/ncfields.scss';
+@import 'components/ncnotecard.scss';
@import 'components/ncreferencepicker.scss';
-@import 'components/upload.scss';
+@import 'components/ncselect.scss';
+@import 'components/ncusermenu.scss';
+@import 'components/search.scss';
@import 'components/tooltip.scss';
+@import 'components/upload.scss';
/* layouts and layout parts*/
-@import 'layouts/header.scss';
@import 'layouts/footer.scss';
+@import 'layouts/guestview.scss';
+@import 'layouts/header.scss';
@import 'layouts/login.scss';
@import 'layouts/modal.scss';
-@import 'layouts/user.scss';
@import 'layouts/public.scss';
@import 'layouts/status.scss';
-@import 'layouts/conflictdialog.scss';
-@import 'layouts/guestview.scss';
-@import 'components/search.scss';
+@import 'layouts/user.scss';
/* special app stylings */
@import 'apps/apps.scss';
+@import 'apps/files-sharing.scss';
+@import 'apps/files-right-click.scss';
@import 'apps/files.scss';
-@import 'apps/files_sharing.scss';
+@import 'apps/office.scss';
+@import 'apps/photos.scss';
+@import 'apps/rich-workspace.scss';
@import 'apps/server.scss';
@import 'apps/settings.scss';
@import 'apps/sharing.scss';
@import 'apps/viewer.scss';
-@import 'apps/photos.scss';
-@import 'apps/office.scss';
-@import 'apps/rich-workspace.scss';
-@import 'apps/files-right-click.scss';
/* login confirmation windows */
@import 'login/grant.scss';
-/* v25 override */
-@import 'v25/ncappnavigation.scss';
-
diff --git a/css/v25/ncappnavigation.scss b/css/v25/ncappnavigation.scss
deleted file mode 100644
index fba56acf..00000000
--- a/css/v25/ncappnavigation.scss
+++ /dev/null
@@ -1,177 +0,0 @@
-@import '../mixins.scss';
-@import '../variables';
-
-/**
-* Sidebar navigation styling for v25
-*/
-
-#app-navigation:not(.vue) {
-
- .app-navigation-caption {
- padding: 2.5rem 1.5rem 0;
-
- }
-
- &>nav {
- // hide scrollbar which appears due to incorrect container height
- backdrop-filter: none;
- border-top-left-radius: 0;
- // add vertical line to demarcate app navigation
- border-right: 1px solid var(--telekom-color-ui-faint);
- padding: 1.5rem 0 0;
-
- &>ul {
- padding: 0 1.5rem;
- }
-
- &>ul>li {
-
- // remove already hidden from DOM so they won't take up space
- &.hidden-visually {
- display: none;
- }
-
- font: var(--telekom-text-style-ui-bold);
- margin-bottom: var(--telekom-spacing-composition-space-03);
-
- // nav links with icons
- &>a {
- border-radius: var(--telekom-radius-standard);
- // increase sidebar link height
- line-height: 52px;
- min-height: 52px;
- // hide all initial icons
- background-image: none;
-
- &:first-child {
-
- img {
- width: 24px;
- height: 24px;
- filter: var(--background-invert-if-dark);
- }
- }
- }
-
- &>a:hover,
- &>a.active,
- &.active>a {
- color: var(--telekom-color-text-and-icon-primary-standard);
- background-color: var(--nmc-color-background-hover);
-
- &::after,
- img {
- filter: var(--nmc-color-icon)
- }
- }
-
- // do not pin app navigation entries to the bottom
- &.pinned.first-pinned {
- margin-top: initial !important;
- }
-
- // icon styling
- &>a.svg::after {
- content: '';
- display: block;
- position: absolute;
- top: 0px;
- left: 2px;
- height: 100%;
- width: 44px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: 24px 24px;
- }
-
- // hide all collapsible buttons
- &.collapsible::before,
- button.collapse {
- display: none;
- }
- }
-
-
- // set telekom icons
- .nav-icon-files::after {
- background-image: var(--icon-folder-dark);
- }
-
- .nav-icon-recent::after {
- background-image: var(--icon-history-dark);
- }
-
- .nav-icon-favorites::after {
- background-image: var(--icon-star-dark);
- }
-
- .nav-icon-favorites-starred::after {
- background-image: var(--icon-starred-yellow);
- }
-
- .nav-icon-shareoverview::after {
- background-image: var(--icon-share-dark);
- }
-
- .nav-icon-systemtagsfilter::after {
- background-image: var(--icon-tag-dark);
- }
-
- .nav-icon-trashbin::after {
- background-image: var(--icon-delete-dark);
- }
-
- .nav-icon-trashbin-starred::after {
- background-image: var(--icon-delete-starred-warning);
- }
-
- .nav-icon-sharingout::after {
- background-image: var(--icon-share-dark);
- }
-
- .nav-icon-sharingin::after {
- background-image: var(--icon-attachment-dark);
- }
-
- // hide nextcloud Storage quota element
- #quota {
- display: none;
- }
- }
-}
-
-@media screen and (max-width: 1023px) {
-
- #app-navigation:not(.vue) {
- border-radius: 0;
- transform: translateX(-316px);
- }
-
- .snapjs-left {
-
- #app-navigation:not(.vue) {
- transform: translateX(0px);
- }
- }
-
- #app-navigation-toggle {
- position: absolute;
- }
-}
-
-// hide nextcloud Files settings element
-#app-settings {
- #app-settings-header {
- display: none;
- }
-}
-
-.app-settings {
-
- #app-navigation:not(.vue) {
-
- &>nav>ul>li {
- display: none;
- }
- }
-}
\ No newline at end of file
diff --git a/img/actions/add.svg b/img/actions/add.svg
index 0723b769..35ee1d89 100644
--- a/img/actions/add.svg
+++ b/img/actions/add.svg
@@ -1,7 +1,3 @@
-
-
\ No newline at end of file
+
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/cloud.svg b/img/actions/cloud.svg
new file mode 100644
index 00000000..b0bd9fae
--- /dev/null
+++ b/img/actions/cloud.svg
@@ -0,0 +1,3 @@
+
diff --git a/img/actions/copy-paste.svg b/img/actions/copy-paste.svg
index 4effc7e2..9030ed9c 100644
--- a/img/actions/copy-paste.svg
+++ b/img/actions/copy-paste.svg
@@ -1,7 +1,4 @@
-
-
\ No newline at end of file
+
diff --git a/img/actions/create-folder.svg b/img/actions/create-folder.svg
new file mode 100644
index 00000000..1ffe5133
--- /dev/null
+++ b/img/actions/create-folder.svg
@@ -0,0 +1,4 @@
+
diff --git a/img/actions/cut-paste.svg b/img/actions/cut-paste.svg
index 92dc8d9f..5b7486d7 100644
--- a/img/actions/cut-paste.svg
+++ b/img/actions/cut-paste.svg
@@ -1,7 +1,17 @@
-
-
\ No newline at end of file
+
diff --git a/img/actions/delete.svg b/img/actions/delete.svg
index 9896ad3c..868bfaa1 100644
--- a/img/actions/delete.svg
+++ b/img/actions/delete.svg
@@ -1,7 +1,5 @@
-
-
\ No newline at end of file
+
diff --git a/img/actions/download.svg b/img/actions/download.svg
index 0d7d95f7..98016458 100644
--- a/img/actions/download.svg
+++ b/img/actions/download.svg
@@ -1,7 +1,4 @@
-
-
\ No newline at end of file
+
diff --git a/img/actions/folder.svg b/img/actions/folder.svg
index aa93f0ac..1ae483cc 100644
--- a/img/actions/folder.svg
+++ b/img/actions/folder.svg
@@ -1,7 +1,3 @@
-
-
\ No newline at end of file
+
diff --git a/img/actions/grid-ratio.svg b/img/actions/grid-ratio.svg
new file mode 100644
index 00000000..4b20edd5
--- /dev/null
+++ b/img/actions/grid-ratio.svg
@@ -0,0 +1,11 @@
+
diff --git a/img/actions/grid-square.svg b/img/actions/grid-square.svg
new file mode 100644
index 00000000..e2add6e6
--- /dev/null
+++ b/img/actions/grid-square.svg
@@ -0,0 +1,11 @@
+
diff --git a/img/actions/grid.svg b/img/actions/grid.svg
new file mode 100644
index 00000000..48294a99
--- /dev/null
+++ b/img/actions/grid.svg
@@ -0,0 +1,6 @@
+
diff --git a/img/actions/hide-menu.svg b/img/actions/hide-menu.svg
index 2def05ee..0270da43 100644
--- a/img/actions/hide-menu.svg
+++ b/img/actions/hide-menu.svg
@@ -1,22 +1,6 @@
-
-
-
+
diff --git a/img/actions/left-condensed.svg b/img/actions/left-condensed.svg
new file mode 100644
index 00000000..03da3352
--- /dev/null
+++ b/img/actions/left-condensed.svg
@@ -0,0 +1,3 @@
+
diff --git a/img/actions/list-bulleted.svg b/img/actions/list-bulleted.svg
new file mode 100644
index 00000000..a1de96e8
--- /dev/null
+++ b/img/actions/list-bulleted.svg
@@ -0,0 +1,8 @@
+
diff --git a/img/actions/lock.svg b/img/actions/lock.svg
new file mode 100644
index 00000000..596d6b11
--- /dev/null
+++ b/img/actions/lock.svg
@@ -0,0 +1,3 @@
+
diff --git a/img/actions/menu.svg b/img/actions/menu.svg
index 689201fd..9f48da9a 100644
--- a/img/actions/menu.svg
+++ b/img/actions/menu.svg
@@ -1,7 +1,5 @@
-
-
\ No newline at end of file
+
diff --git a/img/actions/notification.svg b/img/actions/notification.svg
new file mode 100644
index 00000000..11d463f0
--- /dev/null
+++ b/img/actions/notification.svg
@@ -0,0 +1,3 @@
+
diff --git a/img/actions/refresh.svg b/img/actions/refresh.svg
new file mode 100644
index 00000000..853368f9
--- /dev/null
+++ b/img/actions/refresh.svg
@@ -0,0 +1,4 @@
+
diff --git a/img/actions/right-condensed.svg b/img/actions/right-condensed.svg
new file mode 100644
index 00000000..dc8e0041
--- /dev/null
+++ b/img/actions/right-condensed.svg
@@ -0,0 +1,3 @@
+
diff --git a/img/actions/search.svg b/img/actions/search.svg
index c3648829..ff0349fe 100644
--- a/img/actions/search.svg
+++ b/img/actions/search.svg
@@ -1,7 +1,3 @@
-
-
\ No newline at end of file
+
diff --git a/img/actions/share-pending.svg b/img/actions/share-pending.svg
new file mode 100644
index 00000000..59490c48
--- /dev/null
+++ b/img/actions/share-pending.svg
@@ -0,0 +1,5 @@
+
diff --git a/img/actions/share-with-me.svg b/img/actions/share-with-me.svg
new file mode 100644
index 00000000..9ca94aff
--- /dev/null
+++ b/img/actions/share-with-me.svg
@@ -0,0 +1,4 @@
+
diff --git a/img/actions/share-with.svg b/img/actions/share-with.svg
index 5eb679bf..c33730ca 100644
--- a/img/actions/share-with.svg
+++ b/img/actions/share-with.svg
@@ -1,7 +1,4 @@
-
-
\ No newline at end of file
+
diff --git a/img/actions/share.svg b/img/actions/share.svg
index 6b456164..c33730ca 100644
--- a/img/actions/share.svg
+++ b/img/actions/share.svg
@@ -1,7 +1,4 @@
-
-
\ No newline at end of file
+
diff --git a/img/actions/star.svg b/img/actions/star.svg
index 78b88d42..3fe4d6f9 100644
--- a/img/actions/star.svg
+++ b/img/actions/star.svg
@@ -1,7 +1,3 @@
-
-
\ No newline at end of file
+
diff --git a/img/actions/upload.svg b/img/actions/upload.svg
index 54857757..bec248a1 100644
--- a/img/actions/upload.svg
+++ b/img/actions/upload.svg
@@ -1,7 +1,4 @@
-
-
\ No newline at end of file
+
diff --git a/img/actions/user.svg b/img/actions/user.svg
index 04e14731..7509d38d 100644
--- a/img/actions/user.svg
+++ b/img/actions/user.svg
@@ -1,7 +1,4 @@
-
-
\ 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/checkmarktick.svg b/img/checkmarktick.svg
index 137f62db..1203754b 100644
--- a/img/checkmarktick.svg
+++ b/img/checkmarktick.svg
@@ -1,7 +1,2 @@
-
\ No newline at end of file
+
\ No newline at end of file
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/img/decorative_images/cat-dark.svg b/img/decorative_images/cat-dark.svg
new file mode 100644
index 00000000..8b2984d6
--- /dev/null
+++ b/img/decorative_images/cat-dark.svg
@@ -0,0 +1,254 @@
+
diff --git a/img/decorative_images/cat-family-dark.svg b/img/decorative_images/cat-family-dark.svg
new file mode 100644
index 00000000..deee8ac3
--- /dev/null
+++ b/img/decorative_images/cat-family-dark.svg
@@ -0,0 +1,234 @@
+
diff --git a/img/decorative_images/cat-family.svg b/img/decorative_images/cat-family.svg
new file mode 100644
index 00000000..3cc4ecbd
--- /dev/null
+++ b/img/decorative_images/cat-family.svg
@@ -0,0 +1,234 @@
+
diff --git a/img/decorative_images/cat.svg b/img/decorative_images/cat.svg
new file mode 100644
index 00000000..e0f2db62
--- /dev/null
+++ b/img/decorative_images/cat.svg
@@ -0,0 +1,266 @@
+
diff --git a/img/decorative_images/cautious-dog.svg b/img/decorative_images/cautious-dog.svg
new file mode 100644
index 00000000..c0d71e6a
--- /dev/null
+++ b/img/decorative_images/cautious-dog.svg
@@ -0,0 +1,84 @@
+
diff --git a/img/decorative_images/empty-albums-dark.svg b/img/decorative_images/empty-albums-dark.svg
new file mode 100644
index 00000000..a761de78
--- /dev/null
+++ b/img/decorative_images/empty-albums-dark.svg
@@ -0,0 +1,321 @@
+
diff --git a/img/decorative_images/empty-albums.svg b/img/decorative_images/empty-albums.svg
new file mode 100644
index 00000000..5457a1c3
--- /dev/null
+++ b/img/decorative_images/empty-albums.svg
@@ -0,0 +1,321 @@
+
diff --git a/img/decorative_images/empty-files-dark.svg b/img/decorative_images/empty-files-dark.svg
new file mode 100644
index 00000000..b9bd196e
--- /dev/null
+++ b/img/decorative_images/empty-files-dark.svg
@@ -0,0 +1,260 @@
+
diff --git a/img/decorative_images/empty-files.svg b/img/decorative_images/empty-files.svg
new file mode 100644
index 00000000..af914b14
--- /dev/null
+++ b/img/decorative_images/empty-files.svg
@@ -0,0 +1,265 @@
+
diff --git a/img/decorative_images/empty-videos-dark.svg b/img/decorative_images/empty-videos-dark.svg
new file mode 100644
index 00000000..a45eaafe
--- /dev/null
+++ b/img/decorative_images/empty-videos-dark.svg
@@ -0,0 +1,122 @@
+
diff --git a/img/decorative_images/empty-videos.svg b/img/decorative_images/empty-videos.svg
new file mode 100644
index 00000000..dd888563
--- /dev/null
+++ b/img/decorative_images/empty-videos.svg
@@ -0,0 +1,122 @@
+
diff --git a/img/decorative_images/mouse-dark.svg b/img/decorative_images/mouse-dark.svg
new file mode 100644
index 00000000..4d043b7c
--- /dev/null
+++ b/img/decorative_images/mouse-dark.svg
@@ -0,0 +1,106 @@
+
diff --git a/img/decorative_images/mouse.svg b/img/decorative_images/mouse.svg
new file mode 100644
index 00000000..f04ced8b
--- /dev/null
+++ b/img/decorative_images/mouse.svg
@@ -0,0 +1,106 @@
+
diff --git a/img/decorative_images/pandas-dark.svg b/img/decorative_images/pandas-dark.svg
new file mode 100644
index 00000000..d1942739
--- /dev/null
+++ b/img/decorative_images/pandas-dark.svg
@@ -0,0 +1,357 @@
+
diff --git a/img/decorative_images/pandas.svg b/img/decorative_images/pandas.svg
new file mode 100644
index 00000000..eeaa835a
--- /dev/null
+++ b/img/decorative_images/pandas.svg
@@ -0,0 +1,357 @@
+
diff --git a/img/decorative_images/sad-unicorn-dark.svg b/img/decorative_images/sad-unicorn-dark.svg
new file mode 100644
index 00000000..e27cb78f
--- /dev/null
+++ b/img/decorative_images/sad-unicorn-dark.svg
@@ -0,0 +1,150 @@
+
diff --git a/img/decorative_images/sad-unicorn.svg b/img/decorative_images/sad-unicorn.svg
new file mode 100644
index 00000000..f27175d6
--- /dev/null
+++ b/img/decorative_images/sad-unicorn.svg
@@ -0,0 +1,150 @@
+
diff --git a/img/decorative_images/unicorn-dark.svg b/img/decorative_images/unicorn-dark.svg
new file mode 100644
index 00000000..aebe3488
--- /dev/null
+++ b/img/decorative_images/unicorn-dark.svg
@@ -0,0 +1,126 @@
+
diff --git a/img/decorative_images/unicorn.svg b/img/decorative_images/unicorn.svg
new file mode 100644
index 00000000..2bfea92a
--- /dev/null
+++ b/img/decorative_images/unicorn.svg
@@ -0,0 +1,127 @@
+
diff --git a/img/email/checkmark.png b/img/email/checkmark.png
new file mode 100644
index 00000000..006652a6
Binary files /dev/null and b/img/email/checkmark.png differ
diff --git a/img/email/checkmark.svg b/img/email/checkmark.svg
index 586b1470..349a2a1f 100644
--- a/img/email/checkmark.svg
+++ b/img/email/checkmark.svg
@@ -1,7 +1,2 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/img/email/computer.png b/img/email/computer.png
new file mode 100644
index 00000000..e51db824
Binary files /dev/null and b/img/email/computer.png differ
diff --git a/img/email/mobile.png b/img/email/mobile.png
new file mode 100644
index 00000000..e6101987
Binary files /dev/null and b/img/email/mobile.png differ
diff --git a/img/filetypes/folder.svg b/img/filetypes/folder.svg
index ca7b2d2b..32affce6 100644
--- a/img/filetypes/folder.svg
+++ b/img/filetypes/folder.svg
@@ -1,35 +1,3 @@
-
-
\ No newline at end of file
+
diff --git a/img/magentacloud.svg b/img/magentacloud.svg
new file mode 100644
index 00000000..e151c3b8
--- /dev/null
+++ b/img/magentacloud.svg
@@ -0,0 +1,13 @@
+
+
\ No newline at end of file
diff --git a/img/media/albums.svg b/img/media/albums.svg
index be97a92f..44f4433e 100644
--- a/img/media/albums.svg
+++ b/img/media/albums.svg
@@ -1,11 +1,7 @@
-
-
-
+
diff --git a/img/media/all-media.svg b/img/media/all-media.svg
index 3a47c0dc..45c5a7e3 100644
--- a/img/media/all-media.svg
+++ b/img/media/all-media.svg
@@ -1,7 +1,6 @@
-
-
\ No newline at end of file
+
diff --git a/img/media/photo-camera-media.svg b/img/media/photo-camera-media.svg
new file mode 100644
index 00000000..8ba30a60
--- /dev/null
+++ b/img/media/photo-camera-media.svg
@@ -0,0 +1,4 @@
+
diff --git a/img/media/video-camera.svg b/img/media/video-camera.svg
new file mode 100644
index 00000000..9f9f7005
--- /dev/null
+++ b/img/media/video-camera.svg
@@ -0,0 +1,4 @@
+
diff --git a/img/settings/users.svg b/img/settings/users.svg
index 39da73ec..e73add99 100644
--- a/img/settings/users.svg
+++ b/img/settings/users.svg
@@ -1,13 +1,8 @@
-
-
\ No newline at end of file
+
diff --git a/img/telekom/mcfluffy.jpg b/img/telekom/mcfluffy.jpg
deleted file mode 100644
index 9b0cf4bf..00000000
Binary files a/img/telekom/mcfluffy.jpg and /dev/null differ
diff --git a/img/telekom/tlogocarrier.png b/img/telekom/tlogocarrier.png
new file mode 100644
index 00000000..57d342f1
Binary files /dev/null and b/img/telekom/tlogocarrier.png differ
diff --git a/l10n/de.json b/l10n/de.json
index 075dd2aa..041102a2 100644
--- a/l10n/de.json
+++ b/l10n/de.json
@@ -15,14 +15,19 @@
"Search": "Suche",
"Email": "E-Mail",
"Internal Server Error" : "Interner Verarbeitungsfehler",
- "The server was unable to complete your request." : "MagentaCLOUD konnte ihre Anfrage nicht bearbeiten.",
- "If this happens again, please send the technical details below to the server administrator." : "Möglicherweise ist das System im Moment nicht verfügbar, bitte versuchen sie es in wenigen Minuten erneut.",
+ "The server was unable to complete your request." : "MagentaCLOUD konnte Ihre Anfrage nicht bearbeiten.",
+ "If this happens again, please send the technical details below to the server administrator." : "Möglicherweise ist das System im Moment nicht verfügbar, bitte versuchen Sie es in wenigen Minuten erneut.",
+ "If you are not trying to set up a new device or app, someone is trying to trick you into granting them access to your data. In this case do not proceed and instead contact your system administrator." : "Sollten Sie derzeit kein neues Gerät oder keine neue App einrichten, versucht möglicherweise jemand, sich Zugriff auf Ihre Daten zu verschaffen. Fahren Sie in diesem Fall nicht fort.",
"More details can be found in the server log." : "Ihre Telekom.",
"Search apps, files, tags, messages" : "Nach Dateien oder Ordner suchen",
"Unified search" : "Suche",
"Skip to app navigation": "Zur App-Navigation springen",
"Skip to main content": "Zum Hauptinhalt springen",
- "Keyboard navigation help": "Tastatur-Navigationshilfe"
+ "Keyboard navigation help": "Tastatur-Navigationshilfe",
+ "Pick": "Auswählen",
+ "Date": "Geändert",
+ "Pick plain text files": "Textdateien auswählen",
+ "a few seconds ago": "gerade hochgeladen"
},
"pluralForm": "nplurals=2; plural=(n != 1);"
},
@@ -59,6 +64,7 @@
"Toggle grid view": "Ansicht ändern",
"Display settings": "Anzeigeeinstellungen",
"Expand storage": "Speicherplatz erweitern",
+ "Expand storage, opens in new tab": "Speicherplatz erweitern, öffnet in neuem Tab",
"Memory used up to %s%%": "Speicher zu %s%% belegt ",
"of": "von",
"Delete file" : "Datei löschen",
@@ -69,7 +75,15 @@
"_including %n hidden_::_including %n hidden_": ["davon %n versteckt","davon %n versteckt"],
"\"{displayName}\" batch action executed successfully" : "Aktion \"{displayName}\" erfolgreich ausgeführt",
"Delete permanently": "Endgültig löschen",
- "Unknown error during upload": "Das Hochladen wurde abgebrochen"
+ "Unknown error during upload": "Das Hochladen wurde abgebrochen",
+ "few seconds ago": "vor Sekunden",
+ "Document": "Dokument",
+ "Spreadsheet": "Tabelle",
+ "Presentation": "Präsentation",
+ "Slideshow": "Slideshow",
+ "Template": "Vorlage",
+ "{ext} file" : "{ext}-Datei",
+ "Filename must not be empty.": "Bitte gib einen Namen ein."
},
"pluralForm": "nplurals=2; plural=(n != 1);"
},
@@ -114,7 +128,10 @@
"Link to folder": "Link zum Ordner",
"Shared with others": "Meine geteilten Inhalte",
"Shared with you": "Mit mir geteilt",
- "No recommendations. Start typing.": "Keine Empfehlungen.Beginnen..."
+ "Public share" : "Freigabe",
+ "Share link ({label})" : "Freigabe Link ({label})",
+ "Share link ({index})" : "Freigabe Link ({index})",
+ "No recommendations. Start typing.": "Keine Empfehlungen. Beginnen..."
},
"pluralForm": "nplurals=2; plural=(n != 1);"
},
@@ -173,9 +190,56 @@
},
"photos": {
"translations": {
+ "Entire MagentaCLOUD": "Gesamte MagentaCLOUD",
+ "Upload folder not part of media folder": "Der Upload-Ordner ist nicht Teil des Medienordners",
+ "Uploaded items will not appear in the Photos & Videos section.": "Hochgeladene Elemente werden nicht im Bereich Fotos & Videos angezeigt.",
+ "Create Albums for your Photos and Videos": "Erstelle Alben für deine Fotos und Videos",
+ "You can organize all your photos in as many albums as you like. You haven't created an album yet.": "Sie können Ihre Fotos in beliebig vielen Alben organisieren. Sie haben noch kein Album erstellt.",
+ "All that is missing are your photos": "Es fehlen nur noch Ihre Fotos",
+ "You can add as many photos and videos as you like. A photo can also belong to more than one album.": "Sie können beliebig viele Fotos und Videos hinzufügen. Ein Foto kann auch zu mehreren Alben gehören.",
+ "No photos available yet.": "Noch keine Fotos vorhanden.",
+ "No videos available yet.": "Noch keine Videos vorhanden.",
+ "No media available yet.": "Noch keine Medien vorhanden.",
+ "Create an album and add your photos there.": "Erstellen Sie ein Album und fügen Sie dort Ihre Fotos hinzu.",
+ "Create an album and add your videos there.": "Erstellen Sie ein Album und fügen Sie dort Ihre Videos hinzu.",
+ "Create an album and add your media there.": "Erstellen Sie ein Album und fügen Sie dort Ihre Medien hinzu.",
+ "Upload folder": "Upload-Ordner",
"Photos": "Fotos",
"Add": "Hinzufügen",
- "Add photos to this album" : "Fotos und Videos zum Album hinzufügen"
+ "selected": "ausgewählt",
+ "Collaborative albums" : "Geteilte Alben",
+ "_%n element_::_%n elements_" : ["%n Element","%n Elemente"],
+ "Created" : "Erstellt",
+ "Create empty album" : "Leeres Album erstellen",
+ "Rename album" : "Album umbenennen",
+ "Remove element {imageName} from Album" : "Element {imageName} aus Album entfernen",
+ "Share Album" : "Album teilen",
+ "Enter Name" : "Name eingeben",
+ "Add people who can access your album" : "Fügen Sie Personen hinzu, die auf Ihr Album zugreifen können",
+ "Link to copy" : "Link zum Kopieren",
+ "Link created" : "Link erstellt",
+ "Link deleted" : "Link gelöscht",
+ "Link copied" : "Link kopiert",
+ "Create new link" : "Neuen Link erstellen",
+ "Path" : "Pfad",
+ "Resolution" : "Maße",
+ "Size" : "Größe",
+ "Creation Date" : "Aufnahmedatum",
+ "Last Modified" : "Zuletzt geändert",
+ "Upload Date" : "Hochladedatum",
+ "Confirmation" : "Bestätigung",
+ "_%n item_::_%n photos and videos_" : ["%n Element","%n Fotos und Videos"],
+ "_%n item_::_%n photos_" : ["%n Foto","%n Fotos"],
+ "_%n item_::_%n videos_" : ["%n Video","%n Videos"],
+ "to" : "bis",
+ "and" : "und",
+ "Download" : "Herunterladen",
+ "Delete" : "Löschen",
+ "You are about to delete {imageName}. Are you sure?" : "Sie sind dabei, {imageName} zu löschen. Sind Sie sicher?",
+ "Add photos to this album" : "Fotos und Videos zum Album hinzufügen",
+ "You can organize all your photos in as many albums as you like. You have not created an album yet." : "Sie können alle Ihre Fotos in beliebig vielen Alben organisieren. Sie haben noch kein Album erstellt.",
+ "Choose the folders from where photos and videos are shown." : "Ordner, aus denen Fotos und Videos angezeigt werden. Aus den ausgewählten Ordnern werden Medien für Alben und für die Ansicht - Alle Medien - verwendet.",
+ "Choose the folder where photos and albums are uploaded to." : "Ordner, in den Fotos und Videos hochgeladen werden. Dieser Ordner wird für neue Uploads und beim Erstellen von Alben verwendet. Tipp: Wir empfehlen, den Ordner auf „Kamera-Medien“ zu belassen, da er auch von den MagentaCLOUD-Apps genutzt wird."
},
"pluralForm": "nplurals=2; plural=(n != 1);"
},
@@ -196,8 +260,10 @@
"Impressum": "Impressum",
"Data protection": "Datenschutz",
"Faq": "Hilfe & FAQ",
+ "opens in new tab": "öffnet in neuem Tab",
"Expand storage": "Speicher erweitern",
- "Memory used up to {memoryUsage}%": "Speicher zu {memoryUsage}% belegt",
+ "Expand storage, opens in new tab": "Speicher erweitern, öffnet in neuem Tab",
+ "Storage at {percentage}% used": "Speicher zu {percentage}% belegt",
"of": "von",
"used": "genutzt",
"Display settings": "Anzeigeeinstellungen",
@@ -211,7 +277,9 @@
"A bright black on white design." : "Ein helles schwarz auf weiß Design.",
"Dark Design" : "Dunkles Design",
"Enable dark design" : "Dunkles Design aktivieren",
- "A dark design to relieve eye strain." : "Ein dunkles Design zur Entlastung der Augen."
+ "A dark design to relieve eye strain." : "Ein dunkles Design zur Entlastung der Augen.",
+ "Notifications": "Benachrichtigungen",
+ "Add": "Hinzufügen"
},
"pluralForm": "nplurals=2; plural=(n != 1);"
}
diff --git a/l10n/de_DE.json b/l10n/de_DE.json
index ff9c4f42..c3959b00 100644
--- a/l10n/de_DE.json
+++ b/l10n/de_DE.json
@@ -15,14 +15,19 @@
"Search": "Suche",
"Email": "E-Mail",
"Internal Server Error" : "Interner Verarbeitungsfehler",
- "The server was unable to complete your request." : "MagentaCLOUD konnte ihre Anfrage nicht bearbeiten.",
- "If this happens again, please send the technical details below to the server administrator." : "Möglicherweise ist das System im Moment nicht verfügbar, bitte versuchen sie es in wenigen Minuten erneut.",
+ "The server was unable to complete your request." : "MagentaCLOUD konnte Ihre Anfrage nicht bearbeiten.",
+ "If this happens again, please send the technical details below to the server administrator." : "Möglicherweise ist das System im Moment nicht verfügbar, bitte versuchen Sie es in wenigen Minuten erneut.",
+ "If you are not trying to set up a new device or app, someone is trying to trick you into granting them access to your data. In this case do not proceed and instead contact your system administrator." : "Sollten Sie derzeit kein neues Gerät oder keine neue App einrichten, versucht möglicherweise jemand, sich Zugriff auf Ihre Daten zu verschaffen. Fahren Sie in diesem Fall nicht fort.",
"More details can be found in the server log." : "Ihre Telekom.",
"Search apps, files, tags, messages" : "Nach Dateien oder Ordner suchen",
- "Unified search": "Suche",
+ "Unified search" : "Suche",
"Skip to app navigation": "Zur App-Navigation springen",
"Skip to main content": "Zum Hauptinhalt springen",
- "Keyboard navigation help": "Tastatur-Navigationshilfe"
+ "Keyboard navigation help": "Tastatur-Navigationshilfe",
+ "Pick": "Auswählen",
+ "Date": "Geändert",
+ "Pick plain text files": "Textdateien auswählen",
+ "a few seconds ago": "gerade hochgeladen"
},
"pluralForm": "nplurals=2; plural=(n != 1);"
},
@@ -59,7 +64,8 @@
"Toggle grid view": "Ansicht ändern",
"Display settings": "Anzeigeeinstellungen",
"Expand storage": "Speicherplatz erweitern",
- "Memory used up to %s%%": "Speicher zu %s%% belegt ",
+ "Expand storage, opens in new tab": "Speicherplatz erweitern, öffnet in neuem Tab",
+ "Memory used up to %s%%":"Speicher zu %s%% belegt ",
"of": "von",
"Delete file" : "Datei löschen",
"Delete folder" : "Ordner löschen",
@@ -69,7 +75,15 @@
"_including %n hidden_::_including %n hidden_": ["davon %n versteckt","davon %n versteckt"],
"\"{displayName}\" batch action executed successfully" : "Aktion \"{displayName}\" erfolgreich ausgeführt",
"Delete permanently": "Endgültig löschen",
- "Unknown error during upload": "Das Hochladen wurde abgebrochen"
+ "Unknown error during upload": "Das Hochladen wurde abgebrochen",
+ "few seconds ago": "vor Sekunden",
+ "Document": "Dokument",
+ "Spreadsheet": "Tabelle",
+ "Presentation": "Präsentation",
+ "Slideshow": "Slideshow",
+ "Template": "Vorlage",
+ "{ext} file" : "{ext}-Datei",
+ "Filename must not be empty.": "Bitte geben Sie einen Namen ein."
},
"pluralForm": "nplurals=2; plural=(n != 1);"
},
@@ -114,7 +128,10 @@
"Link to folder": "Link zum Ordner",
"Shared with others": "Meine geteilten Inhalte",
"Shared with you": "Mit mir geteilt",
- "No recommendations. Start typing.": "Keine Empfehlungen.Beginnen..."
+ "Public share" : "Freigabe",
+ "Share link ({label})" : "Freigabe Link ({label})",
+ "Share link ({index})" : "Freigabe Link ({index})",
+ "No recommendations. Start typing.": "Keine Empfehlungen. Beginnen..."
},
"pluralForm": "nplurals=2; plural=(n != 1);"
},
@@ -173,9 +190,56 @@
},
"photos": {
"translations": {
+ "Entire MagentaCLOUD": "Gesamte MagentaCLOUD",
+ "Upload folder not part of media folder": "Der Upload-Ordner ist nicht Teil des Medienordners",
+ "Uploaded items will not appear in the Photos & Videos section.": "Hochgeladene Elemente werden nicht im Bereich Fotos & Videos angezeigt.",
+ "Create Albums for your Photos and Videos": "Erstelle Alben für deine Fotos und Videos",
+ "You can organize all your photos in as many albums as you like. You haven't created an album yet.": "Sie können Ihre Fotos in beliebig vielen Alben organisieren. Sie haben noch kein Album erstellt.",
+ "All that is missing are your photos": "Es fehlen nur noch Ihre Fotos",
+ "You can add as many photos and videos as you like. A photo can also belong to more than one album.": "Sie können beliebig viele Fotos und Videos hinzufügen. Ein Foto kann auch zu mehreren Alben gehören.",
+ "No photos available yet.": "Noch keine Fotos vorhanden.",
+ "No videos available yet.": "Noch keine Videos vorhanden.",
+ "No media available yet.": "Noch keine Medien vorhanden.",
+ "Create an album and add your photos there.": "Erstellen Sie ein Album und fügen Sie dort Ihre Fotos hinzu.",
+ "Create an album and add your videos there.": "Erstellen Sie ein Album und fügen Sie dort Ihre Videos hinzu.",
+ "Create an album and add your media there.": "Erstellen Sie ein Album und fügen Sie dort Ihre Medien hinzu.",
+ "Upload folder": "Upload-Ordner",
"Photos": "Fotos",
"Add": "Hinzufügen",
- "Add photos to this album" : "Fotos und Videos zum Album hinzufügen"
+ "selected": "ausgewählt",
+ "Collaborative albums" : "Geteilte Alben",
+ "_%n element_::_%n elements_" : ["%n Element","%n Elemente"],
+ "Created" : "Erstellt",
+ "Create empty album" : "Leeres Album erstellen",
+ "Rename album" : "Album umbenennen",
+ "Remove element {imageName} from Album" : "Element {imageName} aus Album entfernen",
+ "Share Album" : "Album teilen",
+ "Enter Name" : "Name eingeben",
+ "Add people who can access your album" : "Fügen Sie Personen hinzu, die auf Ihr Album zugreifen können",
+ "Link to copy" : "Link zum Kopieren",
+ "Link created" : "Link erstellt",
+ "Link deleted" : "Link gelöscht",
+ "Link copied" : "Link kopiert",
+ "Create new link" : "Neuen Link erstellen",
+ "Path" : "Dateipfad",
+ "Resolution" : "Maße",
+ "Size" : "Größe",
+ "Creation Date" : "Aufnahmedatum",
+ "Last Modified" : "Zuletzt geändert",
+ "Upload Date" : "Hochladedatum",
+ "Confirmation" : "Bestätigung",
+ "_%n item_::_%n photos and videos_" : ["%n Element","%n Fotos und Videos"],
+ "_%n item_::_%n photos_" : ["%n Foto","%n Fotos"],
+ "_%n item_::_%n videos_" : ["%n Video","%n Videos"],
+ "to" : "bis",
+ "and" : "und",
+ "Download" : "Herunterladen",
+ "Delete" : "Löschen",
+ "You are about to delete {imageName}. Are you sure?" : "Sie sind dabei, {imageName} zu löschen. Sind Sie sicher?",
+ "Add photos to this album" : "Fotos und Videos zum Album hinzufügen",
+ "You can organize all your photos in as many albums as you like. You have not created an album yet." : "Sie können alle Ihre Fotos in beliebig vielen Alben organisieren. Sie haben noch kein Album erstellt.",
+ "Choose the folders from where photos and videos are shown." : "Ordner, aus denen Fotos und Videos angezeigt werden. Aus den ausgewählten Ordnern werden Medien für Alben und für die Ansicht - Alle Medien - verwendet.",
+ "Choose the folder where photos and albums are uploaded to." : "Ordner, in den Fotos und Videos hochgeladen werden. Dieser Ordner wird für neue Uploads und beim Erstellen von Alben verwendet. Tipp: Wir empfehlen, den Ordner auf „Kamera-Medien“ zu belassen, da er auch von den MagentaCLOUD-Apps genutzt wird."
},
"pluralForm": "nplurals=2; plural=(n != 1);"
},
@@ -196,8 +260,10 @@
"Impressum": "Impressum",
"Data protection": "Datenschutz",
"Faq": "Hilfe & FAQ",
+ "opens in new tab": "öffnet in neuem Tab",
"Expand storage": "Speicher erweitern",
- "Memory used up to {memoryUsage}%": "Speicher zu {memoryUsage}% belegt",
+ "Expand storage, opens in new tab": "Speicher erweitern, öffnet in neuem Tab",
+ "Storage at {percentage}% used": "Speicher zu {percentage}% belegt",
"of": "von",
"used": "genutzt",
"Display settings": "Anzeigeeinstellungen",
@@ -211,7 +277,9 @@
"A bright black on white design." : "Ein helles schwarz auf weiß Design.",
"Dark Design" : "Dunkles Design",
"Enable dark design" : "Dunkles Design aktivieren",
- "A dark design to relieve eye strain." : "Ein dunkles Design zur Entlastung der Augen."
+ "A dark design to relieve eye strain." : "Ein dunkles Design zur Entlastung der Augen.",
+ "Notifications": "Benachrichtigungen",
+ "Add": "Hinzufügen"
},
"pluralForm": "nplurals=2; plural=(n != 1);"
}
diff --git a/l10n/en.json b/l10n/en.json
index 01f82c87..a7c99e25 100644
--- a/l10n/en.json
+++ b/l10n/en.json
@@ -17,12 +17,17 @@
"Internal Server Error" : "Internal processing problems",
"The server was unable to complete your request." : "MagentaCLOUD is not able to serve your request.",
"If this happens again, please send the technical details below to the server administrator." : "It is possible that the system is not available. Please retry in a few minutes.",
+ "If you are not trying to set up a new device or app, someone is trying to trick you into granting them access to your data. In this case do not proceed and instead contact your system administrator." : "If you are not trying to set up a new device or app, someone is trying to trick you into granting them access to your data. In this case do not proceed.",
"More details can be found in the server log." : "Your Telekom.",
"Search apps, files, tags, messages" : "Search for files or folders",
"Unified search" : "Search",
"Skip to app navigation": "Skip to app navigation",
"Skip to main content": "Skip to main content",
- "Keyboard navigation help": "Keyboard navigation help"
+ "Keyboard navigation help": "Keyboard navigation help",
+ "Pick": "Pick",
+ "Date": "Modified",
+ "Pick plain text files": "Pick plain text files",
+ "a few seconds ago": "a few seconds ago"
},
"pluralForm": "nplurals=2; plural=(n != 1);"
},
@@ -59,12 +64,15 @@
"Toggle grid view": "Toggle grid view",
"Display settings": "Display settings",
"Expand storage": "Expand storage",
+ "Expand storage, opens in new tab": "Expand storage, opens in new tab",
"Memory used up to %s%%": "Memory used up to %s%%",
"of": "von",
"_including %n hidden_::_including %n hidden_": ["with %n hidden","with %n hidden"],
"\"{displayName}\" batch action executed successfully" : "\"{displayName}\" action executed successfully",
"Delete permanently": "Delete permanently",
- "Unknown error during upload": "Upload has been cancelled"
+ "Unknown error during upload": "Upload has been cancelled",
+ "{ext} file" : "{ext} file",
+ "Filename must not be empty.": "Please enter a name."
},
"pluralForm": "nplurals=2; plural=(n != 1);"
},
@@ -168,9 +176,36 @@
},
"photos": {
"translations": {
+ "Entire MagentaCLOUD": "Entire MagentaCLOUD",
+ "Upload folder not part of media folder": "Upload folder not part of media folder",
+ "Uploaded items will not appear in the Photos & Videos section.": "Uploaded items will not appear in the Photos & Videos section.",
"Photos": "Photos",
"Add": "Add",
- "Add photos to this album" : "Add photos and videos to this album"
+ "Collaborative albums" : "Shared albums",
+ "_%n element_::_%n elements_" : ["%n element","%n elements"],
+ "Created" : "Created",
+ "Create empty album" : "Create empty album",
+ "Rename album" : "Rename album",
+ "Remove element {imageName} from Album" : "Remove element {imageName} from Album",
+ "Share Album" : "Share Album",
+ "Enter Name" : "Enter Name",
+ "Add people who can access your album" : "Add people who can access your album",
+ "Link to copy" : "Link to copy",
+ "Link created" : "Link created",
+ "Link deleted" : "Link deleted",
+ "Link copied" : "Link copied",
+ "Create new link" : "Create new link",
+ "Path" : "Path",
+ "Resolution" : "Resolution",
+ "Size" : "Size",
+ "Creation Date" : "Creation Date",
+ "Last Modified" : "Last Modified",
+ "Upload Date" : "Upload Date",
+ "You are about to delete {imageName}. Are you sure?" : "You are about to delete {imageName}. Are you sure?",
+ "Add photos to this album" : "Add photos and videos to this album",
+ "You can organize all your photos in as many albums as you like. You have not created an album yet." : "You can organize all your photos in as many albums as you like. You have not created an album yet.",
+ "Choose the folders from where photos and videos are shown." : "Here you can set whether your media area displays photos and videos from your entire cloud, or only from one or more specific folders.",
+ "Choose the folder where photos and albums are uploaded to." : "When you upload photos or videos within the media area, they must be saved. Click here which folder they should be saved in."
},
"pluralForm": "nplurals=2; plural=(n != 1);"
},
@@ -191,8 +226,10 @@
"Impressum": "Impressum",
"Data protection": "Data protection",
"Faq": "Help & FAQ",
+ "opens in new tab": "opens in new tab",
"Expand storage": "Expand storage",
- "Memory used up to {memoryUsage}%": "Memory used up to {memoryUsage}%",
+ "Expand storage, opens in new tab": "Expand storage, opens in new tab",
+ "Storage at {percentage}% used": "Storage at {percentage}% used",
"of": "of",
"used": "used",
"Display settings": "Display settings",
diff --git a/l10n/en_GB.json b/l10n/en_GB.json
index 01f82c87..a7c99e25 100644
--- a/l10n/en_GB.json
+++ b/l10n/en_GB.json
@@ -17,12 +17,17 @@
"Internal Server Error" : "Internal processing problems",
"The server was unable to complete your request." : "MagentaCLOUD is not able to serve your request.",
"If this happens again, please send the technical details below to the server administrator." : "It is possible that the system is not available. Please retry in a few minutes.",
+ "If you are not trying to set up a new device or app, someone is trying to trick you into granting them access to your data. In this case do not proceed and instead contact your system administrator." : "If you are not trying to set up a new device or app, someone is trying to trick you into granting them access to your data. In this case do not proceed.",
"More details can be found in the server log." : "Your Telekom.",
"Search apps, files, tags, messages" : "Search for files or folders",
"Unified search" : "Search",
"Skip to app navigation": "Skip to app navigation",
"Skip to main content": "Skip to main content",
- "Keyboard navigation help": "Keyboard navigation help"
+ "Keyboard navigation help": "Keyboard navigation help",
+ "Pick": "Pick",
+ "Date": "Modified",
+ "Pick plain text files": "Pick plain text files",
+ "a few seconds ago": "a few seconds ago"
},
"pluralForm": "nplurals=2; plural=(n != 1);"
},
@@ -59,12 +64,15 @@
"Toggle grid view": "Toggle grid view",
"Display settings": "Display settings",
"Expand storage": "Expand storage",
+ "Expand storage, opens in new tab": "Expand storage, opens in new tab",
"Memory used up to %s%%": "Memory used up to %s%%",
"of": "von",
"_including %n hidden_::_including %n hidden_": ["with %n hidden","with %n hidden"],
"\"{displayName}\" batch action executed successfully" : "\"{displayName}\" action executed successfully",
"Delete permanently": "Delete permanently",
- "Unknown error during upload": "Upload has been cancelled"
+ "Unknown error during upload": "Upload has been cancelled",
+ "{ext} file" : "{ext} file",
+ "Filename must not be empty.": "Please enter a name."
},
"pluralForm": "nplurals=2; plural=(n != 1);"
},
@@ -168,9 +176,36 @@
},
"photos": {
"translations": {
+ "Entire MagentaCLOUD": "Entire MagentaCLOUD",
+ "Upload folder not part of media folder": "Upload folder not part of media folder",
+ "Uploaded items will not appear in the Photos & Videos section.": "Uploaded items will not appear in the Photos & Videos section.",
"Photos": "Photos",
"Add": "Add",
- "Add photos to this album" : "Add photos and videos to this album"
+ "Collaborative albums" : "Shared albums",
+ "_%n element_::_%n elements_" : ["%n element","%n elements"],
+ "Created" : "Created",
+ "Create empty album" : "Create empty album",
+ "Rename album" : "Rename album",
+ "Remove element {imageName} from Album" : "Remove element {imageName} from Album",
+ "Share Album" : "Share Album",
+ "Enter Name" : "Enter Name",
+ "Add people who can access your album" : "Add people who can access your album",
+ "Link to copy" : "Link to copy",
+ "Link created" : "Link created",
+ "Link deleted" : "Link deleted",
+ "Link copied" : "Link copied",
+ "Create new link" : "Create new link",
+ "Path" : "Path",
+ "Resolution" : "Resolution",
+ "Size" : "Size",
+ "Creation Date" : "Creation Date",
+ "Last Modified" : "Last Modified",
+ "Upload Date" : "Upload Date",
+ "You are about to delete {imageName}. Are you sure?" : "You are about to delete {imageName}. Are you sure?",
+ "Add photos to this album" : "Add photos and videos to this album",
+ "You can organize all your photos in as many albums as you like. You have not created an album yet." : "You can organize all your photos in as many albums as you like. You have not created an album yet.",
+ "Choose the folders from where photos and videos are shown." : "Here you can set whether your media area displays photos and videos from your entire cloud, or only from one or more specific folders.",
+ "Choose the folder where photos and albums are uploaded to." : "When you upload photos or videos within the media area, they must be saved. Click here which folder they should be saved in."
},
"pluralForm": "nplurals=2; plural=(n != 1);"
},
@@ -191,8 +226,10 @@
"Impressum": "Impressum",
"Data protection": "Data protection",
"Faq": "Help & FAQ",
+ "opens in new tab": "opens in new tab",
"Expand storage": "Expand storage",
- "Memory used up to {memoryUsage}%": "Memory used up to {memoryUsage}%",
+ "Expand storage, opens in new tab": "Expand storage, opens in new tab",
+ "Storage at {percentage}% used": "Storage at {percentage}% used",
"of": "of",
"used": "used",
"Display settings": "Display settings",
diff --git a/lib/AppInfo/Application.php b/lib/AppInfo/Application.php
index 78eac18e..fca30742 100644
--- a/lib/AppInfo/Application.php
+++ b/lib/AppInfo/Application.php
@@ -37,6 +37,7 @@
use OCA\Theming\Themes\DyslexiaFont;
use OCA\Theming\Themes\HighContrastTheme;
use OCA\Theming\Themes\LightTheme;
+use OCP\IAppConfig;
use OCP\App\IAppManager;
use OCP\AppFramework\App;
use OCP\AppFramework\Bootstrap\IBootContext;
@@ -185,7 +186,8 @@ function (ContainerInterface $c) {
$c->get(Coordinator::class),
$c->get(ContainerInterface::class),
$c->get(IURLGenerator::class),
- $c->get(LoggerInterface::class)
+ $c->get(LoggerInterface::class),
+ $c->get(IAppConfig::class)
),
[
'contacts', // from apps/dav
@@ -263,6 +265,10 @@ public function register(IRegistrationContext $context): void {
}
public function boot(IBootContext $context): void {
-
+ // Ensure nmctheme CSS is loaded for exception error pages (printExceptionErrorPage)
+ // which bypass the BeforeTemplateRenderedEvent and do not trigger the theming
+ // system's CSS injection (ThemeInjectionService::injectHeaders). Without this,
+ // server error pages fall back to bare Nextcloud styling.
+ \OCP\Util::addStyle('nmctheme', 'nmcstyle');
}
}
diff --git a/lib/Controller/L10NAppendController.php b/lib/Controller/L10NAppendController.php
index dd8953fe..45fabd36 100644
--- a/lib/Controller/L10NAppendController.php
+++ b/lib/Controller/L10NAppendController.php
@@ -6,72 +6,71 @@
*
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
+
namespace OCA\NMCTheme\Controller;
use OCA\NMCTheme\AppInfo\Application;
use OCA\NMCTheme\L10N\FactoryDecorator;
-
use OCP\AppFramework\Controller;
use OCP\AppFramework\Http;
+use OCP\AppFramework\Http\Attribute\NoCSRFRequired;
+use OCP\AppFramework\Http\Attribute\PublicPage;
use OCP\AppFramework\Http\DataDisplayResponse;
use OCP\IRequest;
/**
- * Class L10NAppendController
* Overrides app translations by theme translations
- * for JAvascript. It assures that the override takes
- * place directly after registering translations -
- * before any other actions
+ * for JavaScript.
*/
class L10NAppendController extends Controller {
- /** @var FactoryDecorator */
- protected $factory;
- /**
- * AppendController for translation constructor.
- *
- * @param IRequest $request
- * @param FactoryDecorator $factory
- */
+ protected FactoryDecorator $factory;
+
public function __construct(
IRequest $request,
FactoryDecorator $factory
) {
parent::__construct(Application::APP_ID, $request);
-
$this->factory = $factory;
}
-
/**
- * @NoCSRFRequired
- * @PublicPage
* @NoSameSiteCookieRequired
* @NoTwoFactorRequired
*
- * @param string $app location of the related app
- * @param string $lang language of the translation
- * @return DataDisplayResponse|
+ * @param string $app
+ * @param string $lang
*/
- public function getTranslations(string $app, string $lang) {
+ #[NoCSRFRequired]
+ #[PublicPage]
+ public function getTranslations(string $app, string $lang): DataDisplayResponse {
if ($app !== 'core' && $app !== '') {
$app = basename($app);
}
$translations = $this->factory->getTranslationsForApp($app, $lang);
$overrides = $this->factory->getOverrides($lang);
+
if (array_key_exists($app, $overrides)) {
$translations = array_merge($translations, $overrides[$app]);
}
+
if (!empty($translations)) {
- $registrations = 'OC.L10N.register("'. $app . '", ';
+ $registrations = 'OC.L10N.register("' . $app . '", ';
$registrations .= json_encode($translations, JSON_PRETTY_PRINT);
$registrations .= ",\n\"nplurals=2; plural=(n != 1);\");";
} else {
- $registrations = "";
+ $registrations = '';
}
- $response = new DataDisplayResponse($registrations, Http::STATUS_OK, ['Content-Type' => 'application/javascript;charset=utf-8']);
+
+ $response = new DataDisplayResponse(
+ $registrations,
+ Http::STATUS_OK,
+ ['Content-Type' => 'application/javascript;charset=utf-8']
+ );
+
$response->cacheFor(86400);
+
return $response;
}
}
diff --git a/lib/L10N/FactoryDecorator.php b/lib/L10N/FactoryDecorator.php
index 20a382cc..dc3e9bc7 100644
--- a/lib/L10N/FactoryDecorator.php
+++ b/lib/L10N/FactoryDecorator.php
@@ -20,10 +20,14 @@
class LanguageIteratorDecorator implements ILanguageIterator {
private ILanguageIterator $decorated;
+ /** @var string[] */
private array $supported_locales = [];
- public function __construct(ILanguageIterator $decorated,
- array $supported_locales) {
+ /**
+ * @param ILanguageIterator $decorated
+ * @param string[] $supported_locales
+ */
+ public function __construct(ILanguageIterator $decorated, array $supported_locales) {
$this->decorated = $decorated;
$this->supported_locales = $supported_locales;
}
@@ -33,14 +37,13 @@ public function rewind(): void {
}
public function current(): string {
- $locale = $this->decorated->rewind();
-
- if (empty($this->supported_locales) ||
- in_array($locale, $this->supported_locales)) {
+ $locale = $this->decorated->current();
+
+ if (empty($this->supported_locales) || in_array($locale, $this->supported_locales, true)) {
return $locale;
- } else {
- return 'en';
}
+
+ return 'en';
}
public function next(): void {
@@ -54,12 +57,11 @@ public function key(): int {
public function valid(): bool {
return $this->decorated->valid();
}
-
}
-
class FactoryDecorator implements IFactory {
private Factory $decoratedFactory;
+ private IConfig $config;
/**
* cached instances
@@ -67,35 +69,25 @@ class FactoryDecorator implements IFactory {
* It invalidates the instances from the decorated factory,
* but the instances are only referenced in get() anyway.
*
- * @var string[][][]: Translation matrix in the form
- * translations[$lang][$app][$msg] => $translation
+ * @var string[][][] Translation matrix in the form
+ * translations[$lang][$app][$msg] => $translation
*/
protected array $instances = [];
/**
- * The translation overrides from the combined language map in
- * nmctheme. The overrides are read only once. This is not made for
- * complete translations (then you better replace language files in server core),
- * but for spurious adoptions of wordings.
- *
- * @var string[][][]: Translation matrix in the form
- * overrides[$lang][$app][$msg] => $translation
+ * @var string[][][] Translation matrix in the form
+ * overrides[$lang][$app][$msg] => $translation
*/
protected array $overrides = [];
-
/**
* NMCTheme restricts the available locales and translations
* to only a selectable set
- * @var string[]
*
+ * @var string[]
*/
protected array $supported_locales = [];
-
- /**
- * @param IConfig $config
- */
public function __construct(
IConfig $config,
Factory $decoratedFactory,
@@ -111,26 +103,27 @@ public function __construct(
}
}
- public function getDecorated() :Factory {
+ public function getDecorated(): Factory {
return $this->decoratedFactory;
}
/**
* Filter by supported locales (if set)
*/
- protected function filterLocale(string $locale) {
- if (empty($this->supported_locales) ||
- in_array($locale, $this->supported_locales)) {
+ protected function filterLocale(string $locale): string {
+ if (empty($this->supported_locales) || in_array($locale, $this->supported_locales, true)) {
return $locale;
- } else {
- return 'en';
}
+ return 'en';
}
/**
* Filter a set of supported locales (if set)
+ *
+ * @param string[] $locales
+ * @return string[]
*/
- protected function filterLocales(array $locales) {
+ protected function filterLocales(array $locales): array {
if (empty($this->supported_locales)) {
return $locales;
}
@@ -138,32 +131,24 @@ protected function filterLocales(array $locales) {
$filteredLocales = array_intersect($locales, $this->supported_locales);
if (empty($filteredLocales)) {
return ['en'];
- } else {
- // make sure that indexed are corrected
- return array_unique(array_values($filteredLocales));
}
+
+ // make sure that indexes are corrected
+ return array_unique(array_values($filteredLocales));
}
- /**
- * Predicate to check filter
- */
- protected function isSupportedLocale(string $locale) {
- return (empty($this->supported_locales) ||
- in_array($locale, $this->supported_locales));
+ protected function isSupportedLocale(string $locale): bool {
+ return empty($this->supported_locales) || in_array($locale, $this->supported_locales, true);
}
/**
- * Read all the available translation jsons for app.
- * This is not part of the interface IFactory
- *
* @param string $app
* @param string $lang
- * @return string[]
+ * @return array
*/
- public function getTranslationsForApp($app, $lang) {
-
- // if language is not suppported - not translations
- if (!$this->isSupportedLocale($lang)) {
+ public function getTranslationsForApp($app, $lang): array {
+ // if language is not supported - no translations
+ if (!$this->isSupportedLocale((string)$lang)) {
return [];
}
@@ -181,10 +166,8 @@ public function getTranslationsForApp($app, $lang) {
}
}
- // load the multi-app json for lang if not loaded yet
- // lazy load theme overrides map once. We need the modified $lang.
+ // lazy load theme overrides map once
if (!isset($this->overrides[$lang])) {
- // FIXME this could break as is marked obsolete
$this->overrides[$lang] = $this->getOverrides($lang);
}
@@ -193,16 +176,13 @@ public function getTranslationsForApp($app, $lang) {
}
/**
- * Read all the available theme translation overrides.
- *
- * @param string $app
* @param string $lang
- * @return string[]
+ * @return array>
*/
- public function getOverrides($lang) {
+ public function getOverrides($lang): array {
$overrides = [];
- $l10nFilenames = $this->decoratedFactory->getL10nFilesForApp("nmctheme", $lang);
+ $l10nFilenames = $this->decoratedFactory->getL10nFilesForApp('nmctheme', $lang);
if (!empty($l10nFilenames)) {
$filename = $l10nFilenames[0];
$json = json_decode(file_get_contents($filename), true);
@@ -215,26 +195,24 @@ public function getOverrides($lang) {
}
foreach ($overrides as $app => $appOverride) {
- $overrides[$app] = $overrides[$app]['translations'];
+ if (is_array($appOverride) && isset($appOverride['translations']) && is_array($appOverride['translations'])) {
+ $overrides[$app] = $appOverride['translations'];
+ } else {
+ $overrides[$app] = [];
+ }
}
+
return $overrides;
}
-
-
/**
- * Get a language instance
- *
- * @param string $app
- * @param string|null $lang
- * @param string|null $locale
* @return \OCP\IL10N
*/
public function get($app, $lang = null, $locale = null) {
return new LazyL10N(function () use ($app, $lang, $locale) {
$app = \OC_App::cleanAppId($app);
if ($lang !== null) {
- $lang = str_replace(['\0', '/', '\\', '..'], '', $lang);
+ $lang = str_replace(["\0", '/', '\\', '..'], '', $lang);
}
$forceLang = $this->config->getSystemValue('force_language', false);
@@ -271,104 +249,59 @@ public function get($app, $lang = null, $locale = null) {
});
}
- /**
- * decorate standard IFactory with supported locale filter
- * @see public\L10N\IFactory
- * @see private\L10N\Factory
- */
public function findLanguage(?string $appId = null): string {
return $this->filterLocale($this->decoratedFactory->findLanguage($appId));
}
- /**
- * decorate standard IFactory with supported locale filter
- * @see public\L10N\IFactory
- * @see private\L10N\Factory
- */
public function findGenericLanguage(string $appId = null): string {
return $this->filterLocale($this->decoratedFactory->findGenericLanguage($appId));
}
-
- /**
- * decorate standard IFactory with supported locale filter
- * @see public\L10N\IFactory
- * @see private\L10N\Factory
- */
+
public function findLocale($lang = null) {
return $this->filterLocale($this->decoratedFactory->findLocale($lang));
}
- /**
- * decorate standard IFactory with supported locale filter
- * @see public\L10N\IFactory
- * @see private\L10N\Factory
- */
public function findLanguageFromLocale(string $app = 'core', string $locale = null) {
return $this->filterLocale($this->decoratedFactory->findLanguageFromLocale($app, $locale));
}
- /**
- * decorate standard IFactory with supported languages (locales) filter
- * @see public\L10N\IFactory
- * @see private\L10N\Factory
- */
public function findAvailableLanguages($app = null): array {
return $this->filterLocales($this->decoratedFactory->findAvailableLanguages($app));
}
- /**
- * decorate standard IFactory with supported locale filter
- * @see public\L10N\IFactory
- * @see private\L10N\Factory
- */
public function findAvailableLocales() {
return array_filter($this->decoratedFactory->findAvailableLocales(), function ($lang) {
- return in_array($lang['code'], $this->supported_locales);
+ return in_array($lang['code'], $this->supported_locales, true);
});
}
- /**
- * decorate standard IFactory with supported locale filter
- * @see public\L10N\IFactory
- * @see private\L10N\Factory
- */
public function languageExists($app, $lang) {
- if (!$this->isSupportedLocale($lang)) {
+ if (!$this->isSupportedLocale((string)$lang)) {
return false;
}
return $this->decoratedFactory->languageExists($app, $lang);
}
- /**
- * decorate standard IFactory with supported locale filter
- * @see public\L10N\IFactory
- * @see private\L10N\Factory
- */
+ public function getLanguageDirection(string $language): string {
+ return $this->decoratedFactory->getLanguageDirection($language);
+ }
+
public function localeExists($locale) {
- if (!$this->isSupportedLocale($locale)) {
+ if (!$this->isSupportedLocale((string)$locale)) {
return false;
}
return $this->decoratedFactory->localeExists($locale);
}
- /**
- * decorate standard IFactory with supported locale filter
- * @see public\L10N\IFactory
- * @see private\L10N\Factory
- */
public function getLanguageIterator(IUser $user = null): ILanguageIterator {
return new LanguageIteratorDecorator(
$this->decoratedFactory->getLanguageIterator($user),
- $this->supported_locales);
+ $this->supported_locales
+ );
}
- /**
- * decorate standard IFactory with supported locale filter
- * @see public\L10N\IFactory
- * @see private\L10N\Factory
- */
public function getLanguages(): array {
$languages = $this->decoratedFactory->getLanguages();
@@ -377,25 +310,19 @@ public function getLanguages(): array {
}
$commonLanguages = array_filter($languages['commonLanguages'], function ($lang) {
- return in_array($lang['code'], $this->supported_locales);
+ return in_array($lang['code'], $this->supported_locales, true);
});
$otherLanguages = array_filter($languages['otherLanguages'], function ($lang) {
- return in_array($lang['code'], $this->supported_locales);
+ return in_array($lang['code'], $this->supported_locales, true);
});
+
return [
- // re-index filtered arrays
'commonLanguages' => array_values($commonLanguages),
- 'otherLanguages' => array_values($otherLanguages)
+ 'otherLanguages' => array_values($otherLanguages),
];
}
- /**
- * decorate standard IFactory with supported locale filter
- * @see public\L10N\IFactory
- * @see private\L10N\Factory
- */
public function getUserLanguage(IUser $user = null): string {
return $this->filterLocale($this->decoratedFactory->getUserLanguage($user));
}
-
}
diff --git a/lib/Listener/BeforeTemplateRenderedListener.php b/lib/Listener/BeforeTemplateRenderedListener.php
index e5539045..16d8392e 100644
--- a/lib/Listener/BeforeTemplateRenderedListener.php
+++ b/lib/Listener/BeforeTemplateRenderedListener.php
@@ -91,17 +91,15 @@ public function handle(Event $event): void {
// you can add additional styles, links and scripts before rendering
- // keep src for future use: \OCP\Util::addScript("nmctheme", "../dist/l10nappender");
\OCP\Util::addScript("nmctheme", "nmctheme-nmclogo", "core");
\OCP\Util::addScript('nmctheme', 'nmctheme-nmcheader', "core");
\OCP\Util::addScript('nmctheme', 'nmctheme-nmcfooter', "core");
\OCP\Util::addScript('nmctheme', 'nmctheme-nmcfiles', "core");
\OCP\Util::addScript("nmctheme", "nmctheme-mimetypes", "core");
\OCP\Util::addScript("nmctheme", "nmctheme-skipactions", "core");
+ \OCP\Util::addScript("nmctheme", "nmctheme-searchfavorites", "core");
\OCP\Util::addScript("nmctheme", "nmctheme-filessettings", "files");
\OCP\Util::addScript("nmctheme", "nmctheme-filelistplugin", "files");
- // \OCP\Util::addScript("nmctheme", "nmctheme-conflictdialog");
- // \OCP\Util::addScript("nmctheme", "nmctheme-tooltip");
- // \OCP\Util::addScript("nmctheme", "nmctheme-shareicons");
+ \OCP\Util::addScript("nmctheme", "nmctheme-trashbinfix", "files");
}
}
diff --git a/lib/NavigationManagerDecorator.php b/lib/NavigationManagerDecorator.php
index 4d49d77b..fc0cd163 100644
--- a/lib/NavigationManagerDecorator.php
+++ b/lib/NavigationManagerDecorator.php
@@ -69,4 +69,32 @@ public function getAll(string $type = self::TYPE_APPS): array {
public function setUnreadCounter(string $id, int $unreadCounter): void {
$this->decorated->setUnreadCounter($id, $unreadCounter);
}
+
+ /**
+ * No decoration, only delegate.
+ */
+ public function get(string $id): ?array {
+ return $this->decorated->get($id);
+ }
+
+ /**
+ * No decoration, only delegate.
+ */
+ public function getDefaultEntryIdForUser(?\OCP\IUser $user = null, bool $withFallbacks = true): string {
+ return $this->decorated->getDefaultEntryIdForUser($user, $withFallbacks);
+ }
+
+ /**
+ * No decoration, only delegate.
+ */
+ public function getDefaultEntryIds(): array {
+ return $this->decorated->getDefaultEntryIds();
+ }
+
+ /**
+ * No decoration, only delegate.
+ */
+ public function setDefaultEntryIds(array $ids): void {
+ $this->decorated->setDefaultEntryIds($ids);
+ }
}
diff --git a/lib/Themes/Magenta.php b/lib/Themes/Magenta.php
index 3a6542c9..163d8133 100644
--- a/lib/Themes/Magenta.php
+++ b/lib/Themes/Magenta.php
@@ -11,18 +11,23 @@
namespace OCA\NMCTheme\Themes;
use OCA\Theming\ITheme;
+use OCA\Theming\Util;
use OCP\App\IAppManager;
use OCP\IL10N;
use OCP\IURLGenerator;
class Magenta implements ITheme {
+ protected Util $themingUtil;
protected IAppManager $appManager;
protected IURLGenerator $urlGenerator;
protected IL10N $l;
- public function __construct(IAppManager $appManager,
+ public function __construct(
+ Util $themingUtil,
+ IAppManager $appManager,
IURLGenerator $urlGenerator,
IL10N $l) {
+ $this->themingUtil = $themingUtil;
$this->appManager = $appManager;
$this->urlGenerator = $urlGenerator;
$this->l = $l;
@@ -62,14 +67,20 @@ public function getCSSVariables(): array {
}
public function getCustomCss(): string {
- $telekomVariables = $this->urlGenerator->linkTo('nmctheme', 'dist/telekom-design-tokens.all.css');
+ $telekomOdsVariables = $this->urlGenerator->linkTo('nmctheme', 'css/telekom-design-tokens.ods.css');
$themeVariables = $this->urlGenerator->linkTo('nmctheme', 'css/nmcdefault.css');
- $iconsVariables = $this->urlGenerator->linkTo('nmctheme', 'dist/icons.css');
+ $iconsVariables = $this->urlGenerator->linkTo('nmctheme', 'css/icons.css');
$themeStyle = $this->urlGenerator->linkTo('nmctheme', 'css/nmcstyle.css');
-
+ $cacheBuster = $this->themingUtil->getCacheBuster();
+
+ $telekomOdsVariables .= '?nmcv=' . $cacheBuster;
+ $themeVariables .= '?nmcv=' . $cacheBuster;
+ $iconsVariables .= '?nmcv=' . $cacheBuster;
+ $themeStyle .= '?nmcv=' . $cacheBuster;
+
return "
- @import url('{$telekomVariables}');
+ @import url('{$telekomOdsVariables}');
@import url('{$themeVariables}');
@import url('{$iconsVariables}');
@import url('{$themeStyle}');
diff --git a/lib/Themes/MagentaDark.php b/lib/Themes/MagentaDark.php
index 9771a217..9e74c0ec 100644
--- a/lib/Themes/MagentaDark.php
+++ b/lib/Themes/MagentaDark.php
@@ -12,17 +12,19 @@
namespace OCA\NMCTheme\Themes;
use OCA\Theming\ITheme;
+use OCA\Theming\Util;
use OCP\App\IAppManager;
use OCP\IL10N;
use OCP\IURLGenerator;
class MagentaDark extends Magenta implements ITheme {
public function __construct(
+ Util $themingUtil,
IAppManager $appManager,
IURLGenerator $urlGenerator,
IL10N $l
) {
- parent::__construct($appManager, $urlGenerator, $l);
+ parent::__construct($themingUtil, $appManager, $urlGenerator, $l);
}
public function getId(): string {
diff --git a/lib/Themes/MagentaLight.php b/lib/Themes/MagentaLight.php
index a060119a..f81e240d 100644
--- a/lib/Themes/MagentaLight.php
+++ b/lib/Themes/MagentaLight.php
@@ -12,17 +12,19 @@
namespace OCA\NMCTheme\Themes;
use OCA\Theming\ITheme;
+use OCA\Theming\Util;
use OCP\App\IAppManager;
use OCP\IL10N;
use OCP\IURLGenerator;
class MagentaLight extends Magenta implements ITheme {
public function __construct(
+ Util $themingUtil,
IAppManager $appManager,
IURLGenerator $urlGenerator,
IL10N $l
) {
- parent::__construct($appManager, $urlGenerator, $l);
+ parent::__construct($themingUtil, $appManager, $urlGenerator, $l);
}
public function getId(): string {
diff --git a/lib/URLGeneratorDecorator.php b/lib/URLGeneratorDecorator.php
index c8ca3129..e48fb873 100644
--- a/lib/URLGeneratorDecorator.php
+++ b/lib/URLGeneratorDecorator.php
@@ -72,6 +72,14 @@ public function linkTo(string $appName, string $file, array $args = []): string
* All other requests go to the standard URLGenerator
*/
public function imagePath(string $appName, string $file): string {
+ if ($file === 'photos.svg' && $appName === 'photos') {
+ return $this->decorated->linkTo('nmctheme', 'img/media/all-media.svg');
+ }
+
+ if ($file === 'files.svg' && $appName === 'files') {
+ return $this->decorated->linkTo('nmctheme', 'img/actions/folder.svg');
+ }
+
if ($file === 'favicon.ico') {
return $this->decorated->linkTo('nmctheme', 'img/favicon.ico');
}
diff --git a/nmctheme b/nmctheme
new file mode 160000
index 00000000..ddc545b9
--- /dev/null
+++ b/nmctheme
@@ -0,0 +1 @@
+Subproject commit ddc545b95e8391a57e5ca8794f3ce6be384bda95
diff --git a/package-lock.json b/package-lock.json
index 32d18769..d97182bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
"@nextcloud/router": "^2.1.2",
"@nextcloud/typings": "^1.7.0",
"@nextcloud/vue": "^8.17.0",
+ "@telekom-ods/react-ui-kit": "^2.4.0",
"@telekom/design-tokens": "^1.0.0-beta.9",
"pinia": "^2.1.6",
"vue": "^2.7.14"
@@ -36,9 +37,12 @@
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"mock-xmlhttprequest": "^8.2.0",
+ "postcss": "^8.5.6",
+ "postcss-scss": "^4.0.9",
"sass": "^1.68.0",
"sass-loader": "^13.3.2",
"style-loader": "^3.3.1",
+ "stylelint-scss": "^6.13.0",
"throttle-debounce": "^5.0.0",
"ts-jest": "^29.1.1",
"ts-loader": "^9.4.4",
@@ -2119,26 +2123,52 @@
}
},
"node_modules/@floating-ui/core": {
- "version": "1.5.0",
- "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
- "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+ "version": "1.7.3",
+ "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+ "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
"dependencies": {
- "@floating-ui/utils": "^0.1.3"
+ "@floating-ui/utils": "^0.2.10"
}
},
"node_modules/@floating-ui/dom": {
- "version": "1.5.3",
- "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
- "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+ "version": "1.7.4",
+ "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+ "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+ "dependencies": {
+ "@floating-ui/core": "^1.7.3",
+ "@floating-ui/utils": "^0.2.10"
+ }
+ },
+ "node_modules/@floating-ui/react": {
+ "version": "0.26.28",
+ "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
+ "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
+ "dependencies": {
+ "@floating-ui/react-dom": "^2.1.2",
+ "@floating-ui/utils": "^0.2.8",
+ "tabbable": "^6.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8.0",
+ "react-dom": ">=16.8.0"
+ }
+ },
+ "node_modules/@floating-ui/react-dom": {
+ "version": "2.1.6",
+ "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
+ "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
"dependencies": {
- "@floating-ui/core": "^1.4.2",
- "@floating-ui/utils": "^0.1.3"
+ "@floating-ui/dom": "^1.7.4"
+ },
+ "peerDependencies": {
+ "react": ">=16.8.0",
+ "react-dom": ">=16.8.0"
}
},
"node_modules/@floating-ui/utils": {
- "version": "0.1.4",
- "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.4.tgz",
- "integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA=="
+ "version": "0.2.10",
+ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+ "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.10",
@@ -3009,6 +3039,11 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
+ "node_modules/@kurkle/color": {
+ "version": "0.3.4",
+ "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+ "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
+ },
"node_modules/@leichtgewicht/ip-codec": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -3533,6 +3568,37 @@
"node": ">= 8"
}
},
+ "node_modules/@radix-ui/react-compose-refs": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+ "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-slot": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+ "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+ "dependencies": {
+ "@radix-ui/react-compose-refs": "1.1.1"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
"node_modules/@sinclair/typebox": {
"version": "0.27.8",
"resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -3557,6 +3623,54 @@
"@sinonjs/commons": "^3.0.0"
}
},
+ "node_modules/@telekom-ods/design-tokens": {
+ "version": "2.0.2",
+ "resolved": "https://artifactory.devops.telekom.de/artifactory/api/npm/one-design-system-npm/@telekom-ods/design-tokens/-/@telekom-ods/design-tokens-2.0.2.tgz",
+ "integrity": "sha512-migIsn23p2QEeYnOgy3kTnLyWnXlmLDwG6KPT5MzOB7cxhe72GpCbkvI0bY4p98szrgYsXD9koMTMHwfmUD8Gw=="
+ },
+ "node_modules/@telekom-ods/design-tokens-base": {
+ "version": "2.0.1",
+ "resolved": "https://artifactory.devops.telekom.de/artifactory/api/npm/one-design-system-npm/@telekom-ods/design-tokens-base/-/@telekom-ods/design-tokens-base-2.0.1.tgz",
+ "integrity": "sha512-WEJHKYfWvVHO5JJX9KeeDE1cuV/LjzhksKynm9nSrxrVnAdbMLOVpyC1eYyBP7tk7m7/8kEGy3wu4/bZ1ZvXGA=="
+ },
+ "node_modules/@telekom-ods/react-icons": {
+ "version": "1.0.4",
+ "resolved": "https://artifactory.devops.telekom.de/artifactory/api/npm/one-design-system-npm/@telekom-ods/react-icons/-/@telekom-ods/react-icons-1.0.4.tgz",
+ "integrity": "sha512-Qm4OSReMJoonsD66fsYExDWNHfwEI6Qc8ilScuY4WRC1OJYaDvCDgWJ4nSFIH4RjEBOiq6ct4nM7UsH2vBCfZg==",
+ "dependencies": {
+ "classnames": "^2.5.1"
+ },
+ "peerDependencies": {
+ "react": ">=18",
+ "react-dom": ">=18"
+ }
+ },
+ "node_modules/@telekom-ods/react-ui-kit": {
+ "version": "2.4.0",
+ "resolved": "https://artifactory.devops.telekom.de/artifactory/api/npm/one-design-system-npm/@telekom-ods/react-ui-kit/-/@telekom-ods/react-ui-kit-2.4.0.tgz",
+ "integrity": "sha512-0luTkfQzMVSShcgsjTDfrQHS38G/X3nRP7Khf+kZiilBINj7Z4ir/1rbpa6wO7UQ+XwpjKwSIpkFggMjjRwPag==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@floating-ui/react": "0.26.28",
+ "@radix-ui/react-slot": "1.1.2",
+ "@telekom-ods/design-tokens": "2.0.2",
+ "@telekom-ods/design-tokens-base": "2.0.1",
+ "@telekom-ods/react-icons": "1.0.4",
+ "chart.js": "^4.5.0",
+ "dayjs": "1.11.13",
+ "react-chartjs-2": "5.3.0",
+ "react-intersection-observer": "9.16.0",
+ "scrollyfills": "1.0.3",
+ "tocbot": "4.35.0"
+ },
+ "engines": {
+ "node": ">=18"
+ },
+ "peerDependencies": {
+ "react": ">=16.8",
+ "react-dom": ">=16.8"
+ }
+ },
"node_modules/@telekom/design-tokens": {
"version": "1.0.0-beta.9",
"resolved": "https://registry.npmjs.org/@telekom/design-tokens/-/design-tokens-1.0.0-beta.9.tgz",
@@ -6058,6 +6172,17 @@
"node": "*"
}
},
+ "node_modules/chart.js": {
+ "version": "4.5.1",
+ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+ "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
+ "dependencies": {
+ "@kurkle/color": "^0.3.0"
+ },
+ "engines": {
+ "pnpm": ">=8"
+ }
+ },
"node_modules/chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -6131,6 +6256,11 @@
"resolved": "https://registry.npmjs.org/clamp/-/clamp-1.0.1.tgz",
"integrity": "sha512-kgMuFyE78OC6Dyu3Dy7vcx4uy97EIbVxJB/B0eJ3bUNAkwdNcxYzgKltnyADiYwsR7SEqkkUPsEUT//OVS6XMA=="
},
+ "node_modules/classnames": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+ "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+ },
"node_modules/cliui": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -6810,6 +6940,11 @@
"resolved": "https://registry.npmjs.org/date-format-parse/-/date-format-parse-0.2.7.tgz",
"integrity": "sha512-/+lyMUKoRogMuTeOVii6lUwjbVlesN9YRYLzZT/g3TEZ3uD9QnpjResujeEqUW+OSNbT7T1+SYdyEkTcRv+KDQ=="
},
+ "node_modules/dayjs": {
+ "version": "1.11.13",
+ "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+ "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+ },
"node_modules/de-indent": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -10221,7 +10356,6 @@
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
"dev": true,
- "peer": true,
"engines": {
"node": ">=0.10.0"
}
@@ -13622,15 +13756,16 @@
}
},
"node_modules/nanoid": {
- "version": "3.3.7",
- "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
- "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+ "version": "3.3.11",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+ "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
+ "license": "MIT",
"bin": {
"nanoid": "bin/nanoid.cjs"
},
@@ -14298,9 +14433,10 @@
}
},
"node_modules/picocolors": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
- "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+ "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+ "license": "ISC"
},
"node_modules/picomatch": {
"version": "2.3.1",
@@ -14478,9 +14614,9 @@
}
},
"node_modules/postcss": {
- "version": "8.4.33",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
- "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
+ "version": "8.5.6",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+ "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
"funding": [
{
"type": "opencollective",
@@ -14495,10 +14631,11 @@
"url": "https://github.com/sponsors/ai"
}
],
+ "license": "MIT",
"dependencies": {
- "nanoid": "^3.3.7",
- "picocolors": "^1.0.0",
- "source-map-js": "^1.0.2"
+ "nanoid": "^3.3.11",
+ "picocolors": "^1.1.1",
+ "source-map-js": "^1.2.1"
},
"engines": {
"node": "^10 || ^12 || >=14"
@@ -14531,8 +14668,7 @@
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
"integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==",
- "dev": true,
- "peer": true
+ "dev": true
},
"node_modules/postcss-modules-extract-imports": {
"version": "3.0.0",
@@ -14594,11 +14730,11 @@
}
},
"node_modules/postcss-resolve-nested-selector": {
- "version": "0.1.1",
- "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
- "integrity": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==",
+ "version": "0.1.6",
+ "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz",
+ "integrity": "sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==",
"dev": true,
- "peer": true
+ "license": "MIT"
},
"node_modules/postcss-safe-parser": {
"version": "6.0.0",
@@ -14618,9 +14754,9 @@
}
},
"node_modules/postcss-scss": {
- "version": "4.0.7",
- "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.7.tgz",
- "integrity": "sha512-xPv2GseoyXPa58Nro7M73ZntttusuCmZdeOojUFR5PZDz2BR62vfYx1w9TyOnp1+nYFowgOMipsCBhxzVkAEPw==",
+ "version": "4.0.9",
+ "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz",
+ "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==",
"dev": true,
"funding": [
{
@@ -14636,12 +14772,12 @@
"url": "https://github.com/sponsors/ai"
}
],
- "peer": true,
+ "license": "MIT",
"engines": {
"node": ">=12.0"
},
"peerDependencies": {
- "postcss": "^8.4.19"
+ "postcss": "^8.4.29"
}
},
"node_modules/postcss-selector-parser": {
@@ -14962,6 +15098,50 @@
"node": ">= 0.8"
}
},
+ "node_modules/react": {
+ "version": "19.2.3",
+ "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
+ "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
+ "peer": true,
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/react-chartjs-2": {
+ "version": "5.3.0",
+ "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.3.0.tgz",
+ "integrity": "sha512-UfZZFnDsERI3c3CZGxzvNJd02SHjaSJ8kgW1djn65H1KK8rehwTjyrRKOG3VTMG8wtHZ5rgAO5oTHtHi9GCCmw==",
+ "peerDependencies": {
+ "chart.js": "^4.1.1",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ }
+ },
+ "node_modules/react-dom": {
+ "version": "19.2.3",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
+ "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
+ "peer": true,
+ "dependencies": {
+ "scheduler": "^0.27.0"
+ },
+ "peerDependencies": {
+ "react": "^19.2.3"
+ }
+ },
+ "node_modules/react-intersection-observer": {
+ "version": "9.16.0",
+ "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.16.0.tgz",
+ "integrity": "sha512-w9nJSEp+DrW9KmQmeWHQyfaP6b03v+TdXynaoA964Wxt7mdR3An11z4NNCQgL4gKSK7y1ver2Fq+JKH6CWEzUA==",
+ "peerDependencies": {
+ "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+ "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+ },
+ "peerDependenciesMeta": {
+ "react-dom": {
+ "optional": true
+ }
+ }
+ },
"node_modules/react-is": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
@@ -15748,6 +15928,12 @@
"node": ">=v12.22.7"
}
},
+ "node_modules/scheduler": {
+ "version": "0.27.0",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+ "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+ "peer": true
+ },
"node_modules/schema-utils": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
@@ -15805,6 +15991,11 @@
"dev": true,
"peer": true
},
+ "node_modules/scrollyfills": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/scrollyfills/-/scrollyfills-1.0.3.tgz",
+ "integrity": "sha512-lJCEJbk/o8BFJbJYKyQn1njf9o3U6O9mDpM8gOAsA+yKbXk6gFClfsChnbPPm1eb4pjaJmSwxka5im0cBoKefw=="
+ },
"node_modules/select-hose": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -16177,9 +16368,10 @@
}
},
"node_modules/source-map-js": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
- "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+ "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+ "license": "BSD-3-Clause",
"engines": {
"node": ">=0.10.0"
}
@@ -16700,6 +16892,32 @@
}
}
},
+ "node_modules/stylelint-config-recommended-scss/node_modules/known-css-properties": {
+ "version": "0.29.0",
+ "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz",
+ "integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==",
+ "dev": true,
+ "license": "MIT",
+ "peer": true
+ },
+ "node_modules/stylelint-config-recommended-scss/node_modules/stylelint-scss": {
+ "version": "5.3.2",
+ "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-5.3.2.tgz",
+ "integrity": "sha512-4LzLaayFhFyneJwLo0IUa8knuIvj+zF0vBFueQs4e3tEaAMIQX8q5th8ziKkgOavr6y/y9yoBe+RXN/edwLzsQ==",
+ "dev": true,
+ "license": "MIT",
+ "peer": true,
+ "dependencies": {
+ "known-css-properties": "^0.29.0",
+ "postcss-media-query-parser": "^0.2.3",
+ "postcss-resolve-nested-selector": "^0.1.1",
+ "postcss-selector-parser": "^6.0.13",
+ "postcss-value-parser": "^4.2.0"
+ },
+ "peerDependencies": {
+ "stylelint": "^14.5.1 || ^15.0.0"
+ }
+ },
"node_modules/stylelint-config-recommended-vue": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/stylelint-config-recommended-vue/-/stylelint-config-recommended-vue-1.5.0.tgz",
@@ -16759,19 +16977,75 @@
"peer": true
},
"node_modules/stylelint-scss": {
- "version": "5.1.0",
- "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-5.1.0.tgz",
- "integrity": "sha512-E+KlQFXv1Euha43qw3q+wKBSli557wxbbo6/39DWhRNXlUa9Cz+FYrcgz+PT6ag0l6UisCYjAGCNhoSl4FcwlA==",
+ "version": "6.13.0",
+ "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.13.0.tgz",
+ "integrity": "sha512-kZPwFUJkfup2gP1enlrS2h9U5+T5wFoqzJ1n/56AlpwSj28kmFe7ww/QFydvPsg5gLjWchAwWWBLtterynZrOw==",
"dev": true,
- "peer": true,
+ "license": "MIT",
"dependencies": {
+ "css-tree": "^3.0.1",
+ "is-plain-object": "^5.0.0",
+ "known-css-properties": "^0.37.0",
+ "mdn-data": "^2.25.0",
"postcss-media-query-parser": "^0.2.3",
- "postcss-resolve-nested-selector": "^0.1.1",
- "postcss-selector-parser": "^6.0.13",
+ "postcss-resolve-nested-selector": "^0.1.6",
+ "postcss-selector-parser": "^7.1.1",
"postcss-value-parser": "^4.2.0"
},
+ "engines": {
+ "node": ">=18.12.0"
+ },
"peerDependencies": {
- "stylelint": "^14.5.1 || ^15.0.0"
+ "stylelint": "^16.8.2"
+ }
+ },
+ "node_modules/stylelint-scss/node_modules/css-tree": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
+ "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "mdn-data": "2.12.2",
+ "source-map-js": "^1.0.1"
+ },
+ "engines": {
+ "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+ }
+ },
+ "node_modules/stylelint-scss/node_modules/css-tree/node_modules/mdn-data": {
+ "version": "2.12.2",
+ "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
+ "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+ "dev": true,
+ "license": "CC0-1.0"
+ },
+ "node_modules/stylelint-scss/node_modules/known-css-properties": {
+ "version": "0.37.0",
+ "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.37.0.tgz",
+ "integrity": "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==",
+ "dev": true,
+ "license": "MIT"
+ },
+ "node_modules/stylelint-scss/node_modules/mdn-data": {
+ "version": "2.25.0",
+ "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.25.0.tgz",
+ "integrity": "sha512-T2LPsjgUE/tgMmRXREVmwsux89DwWfNjiynOeXuLd2mX6jphGQ2YE3Ukz7LQ2VOFKiVZU/Ee1GqzHiipZCjymw==",
+ "dev": true,
+ "license": "CC0-1.0"
+ },
+ "node_modules/stylelint-scss/node_modules/postcss-selector-parser": {
+ "version": "7.1.1",
+ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
+ "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "cssesc": "^3.0.0",
+ "util-deprecate": "^1.0.2"
+ },
+ "engines": {
+ "node": ">=4"
}
},
"node_modules/stylelint/node_modules/balanced-match": {
@@ -17134,6 +17408,11 @@
"node": ">=8.0"
}
},
+ "node_modules/tocbot": {
+ "version": "4.35.0",
+ "resolved": "https://registry.npmjs.org/tocbot/-/tocbot-4.35.0.tgz",
+ "integrity": "sha512-i8FoSaP3u60D94e/dtzCk23PIEBnc/l8XqvlK4g8gUCa9XFY4RmyMLYP6X+yN+ljcEijFbmCtNHtBoeTsQkCPg=="
+ },
"node_modules/toidentifier": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -20283,26 +20562,44 @@
"peer": true
},
"@floating-ui/core": {
- "version": "1.5.0",
- "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
- "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+ "version": "1.7.3",
+ "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+ "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
"requires": {
- "@floating-ui/utils": "^0.1.3"
+ "@floating-ui/utils": "^0.2.10"
}
},
"@floating-ui/dom": {
- "version": "1.5.3",
- "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
- "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+ "version": "1.7.4",
+ "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+ "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+ "requires": {
+ "@floating-ui/core": "^1.7.3",
+ "@floating-ui/utils": "^0.2.10"
+ }
+ },
+ "@floating-ui/react": {
+ "version": "0.26.28",
+ "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
+ "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
"requires": {
- "@floating-ui/core": "^1.4.2",
- "@floating-ui/utils": "^0.1.3"
+ "@floating-ui/react-dom": "^2.1.2",
+ "@floating-ui/utils": "^0.2.8",
+ "tabbable": "^6.0.0"
+ }
+ },
+ "@floating-ui/react-dom": {
+ "version": "2.1.6",
+ "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
+ "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
+ "requires": {
+ "@floating-ui/dom": "^1.7.4"
}
},
"@floating-ui/utils": {
- "version": "0.1.4",
- "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.4.tgz",
- "integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA=="
+ "version": "0.2.10",
+ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+ "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="
},
"@humanwhocodes/config-array": {
"version": "0.11.10",
@@ -20964,6 +21261,11 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
+ "@kurkle/color": {
+ "version": "0.3.4",
+ "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+ "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
+ },
"@leichtgewicht/ip-codec": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -21334,6 +21636,20 @@
"fastq": "^1.6.0"
}
},
+ "@radix-ui/react-compose-refs": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+ "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+ "requires": {}
+ },
+ "@radix-ui/react-slot": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+ "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+ "requires": {
+ "@radix-ui/react-compose-refs": "1.1.1"
+ }
+ },
"@sinclair/typebox": {
"version": "0.27.8",
"resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -21358,6 +21674,42 @@
"@sinonjs/commons": "^3.0.0"
}
},
+ "@telekom-ods/design-tokens": {
+ "version": "2.0.2",
+ "resolved": "https://artifactory.devops.telekom.de/artifactory/api/npm/one-design-system-npm/@telekom-ods/design-tokens/-/@telekom-ods/design-tokens-2.0.2.tgz",
+ "integrity": "sha512-migIsn23p2QEeYnOgy3kTnLyWnXlmLDwG6KPT5MzOB7cxhe72GpCbkvI0bY4p98szrgYsXD9koMTMHwfmUD8Gw=="
+ },
+ "@telekom-ods/design-tokens-base": {
+ "version": "2.0.1",
+ "resolved": "https://artifactory.devops.telekom.de/artifactory/api/npm/one-design-system-npm/@telekom-ods/design-tokens-base/-/@telekom-ods/design-tokens-base-2.0.1.tgz",
+ "integrity": "sha512-WEJHKYfWvVHO5JJX9KeeDE1cuV/LjzhksKynm9nSrxrVnAdbMLOVpyC1eYyBP7tk7m7/8kEGy3wu4/bZ1ZvXGA=="
+ },
+ "@telekom-ods/react-icons": {
+ "version": "1.0.4",
+ "resolved": "https://artifactory.devops.telekom.de/artifactory/api/npm/one-design-system-npm/@telekom-ods/react-icons/-/@telekom-ods/react-icons-1.0.4.tgz",
+ "integrity": "sha512-Qm4OSReMJoonsD66fsYExDWNHfwEI6Qc8ilScuY4WRC1OJYaDvCDgWJ4nSFIH4RjEBOiq6ct4nM7UsH2vBCfZg==",
+ "requires": {
+ "classnames": "^2.5.1"
+ }
+ },
+ "@telekom-ods/react-ui-kit": {
+ "version": "2.4.0",
+ "resolved": "https://artifactory.devops.telekom.de/artifactory/api/npm/one-design-system-npm/@telekom-ods/react-ui-kit/-/@telekom-ods/react-ui-kit-2.4.0.tgz",
+ "integrity": "sha512-0luTkfQzMVSShcgsjTDfrQHS38G/X3nRP7Khf+kZiilBINj7Z4ir/1rbpa6wO7UQ+XwpjKwSIpkFggMjjRwPag==",
+ "requires": {
+ "@floating-ui/react": "0.26.28",
+ "@radix-ui/react-slot": "1.1.2",
+ "@telekom-ods/design-tokens": "2.0.2",
+ "@telekom-ods/design-tokens-base": "2.0.1",
+ "@telekom-ods/react-icons": "1.0.4",
+ "chart.js": "^4.5.0",
+ "dayjs": "1.11.13",
+ "react-chartjs-2": "5.3.0",
+ "react-intersection-observer": "9.16.0",
+ "scrollyfills": "1.0.3",
+ "tocbot": "4.35.0"
+ }
+ },
"@telekom/design-tokens": {
"version": "1.0.0-beta.9",
"resolved": "https://registry.npmjs.org/@telekom/design-tokens/-/design-tokens-1.0.0-beta.9.tgz",
@@ -23318,6 +23670,14 @@
"resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
"integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA=="
},
+ "chart.js": {
+ "version": "4.5.1",
+ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+ "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
+ "requires": {
+ "@kurkle/color": "^0.3.0"
+ }
+ },
"chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -23368,6 +23728,11 @@
"resolved": "https://registry.npmjs.org/clamp/-/clamp-1.0.1.tgz",
"integrity": "sha512-kgMuFyE78OC6Dyu3Dy7vcx4uy97EIbVxJB/B0eJ3bUNAkwdNcxYzgKltnyADiYwsR7SEqkkUPsEUT//OVS6XMA=="
},
+ "classnames": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+ "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+ },
"cliui": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -23919,6 +24284,11 @@
"resolved": "https://registry.npmjs.org/date-format-parse/-/date-format-parse-0.2.7.tgz",
"integrity": "sha512-/+lyMUKoRogMuTeOVii6lUwjbVlesN9YRYLzZT/g3TEZ3uD9QnpjResujeEqUW+OSNbT7T1+SYdyEkTcRv+KDQ=="
},
+ "dayjs": {
+ "version": "1.11.13",
+ "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+ "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+ },
"de-indent": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -26463,8 +26833,7 @@
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
- "dev": true,
- "peer": true
+ "dev": true
},
"is-potential-custom-element-name": {
"version": "1.0.1",
@@ -28911,9 +29280,9 @@
}
},
"nanoid": {
- "version": "3.3.7",
- "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
- "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
+ "version": "3.3.11",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+ "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="
},
"natural-compare": {
"version": "1.4.0",
@@ -29420,9 +29789,9 @@
}
},
"picocolors": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
- "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+ "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
},
"picomatch": {
"version": "2.3.1",
@@ -29521,13 +29890,13 @@
}
},
"postcss": {
- "version": "8.4.33",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
- "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
+ "version": "8.5.6",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+ "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
"requires": {
- "nanoid": "^3.3.7",
- "picocolors": "^1.0.0",
- "source-map-js": "^1.0.2"
+ "nanoid": "^3.3.11",
+ "picocolors": "^1.1.1",
+ "source-map-js": "^1.2.1"
}
},
"postcss-html": {
@@ -29556,8 +29925,7 @@
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
"integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==",
- "dev": true,
- "peer": true
+ "dev": true
},
"postcss-modules-extract-imports": {
"version": "3.0.0",
@@ -29596,11 +29964,10 @@
}
},
"postcss-resolve-nested-selector": {
- "version": "0.1.1",
- "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
- "integrity": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==",
- "dev": true,
- "peer": true
+ "version": "0.1.6",
+ "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz",
+ "integrity": "sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==",
+ "dev": true
},
"postcss-safe-parser": {
"version": "6.0.0",
@@ -29611,11 +29978,10 @@
"requires": {}
},
"postcss-scss": {
- "version": "4.0.7",
- "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.7.tgz",
- "integrity": "sha512-xPv2GseoyXPa58Nro7M73ZntttusuCmZdeOojUFR5PZDz2BR62vfYx1w9TyOnp1+nYFowgOMipsCBhxzVkAEPw==",
+ "version": "4.0.9",
+ "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz",
+ "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==",
"dev": true,
- "peer": true,
"requires": {}
},
"postcss-selector-parser": {
@@ -29853,6 +30219,33 @@
}
}
},
+ "react": {
+ "version": "19.2.3",
+ "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
+ "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
+ "peer": true
+ },
+ "react-chartjs-2": {
+ "version": "5.3.0",
+ "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.3.0.tgz",
+ "integrity": "sha512-UfZZFnDsERI3c3CZGxzvNJd02SHjaSJ8kgW1djn65H1KK8rehwTjyrRKOG3VTMG8wtHZ5rgAO5oTHtHi9GCCmw==",
+ "requires": {}
+ },
+ "react-dom": {
+ "version": "19.2.3",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
+ "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
+ "peer": true,
+ "requires": {
+ "scheduler": "^0.27.0"
+ }
+ },
+ "react-intersection-observer": {
+ "version": "9.16.0",
+ "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.16.0.tgz",
+ "integrity": "sha512-w9nJSEp+DrW9KmQmeWHQyfaP6b03v+TdXynaoA964Wxt7mdR3An11z4NNCQgL4gKSK7y1ver2Fq+JKH6CWEzUA==",
+ "requires": {}
+ },
"react-is": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
@@ -30384,6 +30777,12 @@
"xmlchars": "^2.2.0"
}
},
+ "scheduler": {
+ "version": "0.27.0",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+ "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+ "peer": true
+ },
"schema-utils": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
@@ -30429,6 +30828,11 @@
}
}
},
+ "scrollyfills": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/scrollyfills/-/scrollyfills-1.0.3.tgz",
+ "integrity": "sha512-lJCEJbk/o8BFJbJYKyQn1njf9o3U6O9mDpM8gOAsA+yKbXk6gFClfsChnbPPm1eb4pjaJmSwxka5im0cBoKefw=="
+ },
"select-hose": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -30748,9 +31152,9 @@
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
},
"source-map-js": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
- "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+ "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="
},
"source-map-support": {
"version": "0.5.13",
@@ -31185,6 +31589,29 @@
"postcss-scss": "^4.0.6",
"stylelint-config-recommended": "^12.0.0",
"stylelint-scss": "^5.0.0"
+ },
+ "dependencies": {
+ "known-css-properties": {
+ "version": "0.29.0",
+ "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz",
+ "integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==",
+ "dev": true,
+ "peer": true
+ },
+ "stylelint-scss": {
+ "version": "5.3.2",
+ "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-5.3.2.tgz",
+ "integrity": "sha512-4LzLaayFhFyneJwLo0IUa8knuIvj+zF0vBFueQs4e3tEaAMIQX8q5th8ziKkgOavr6y/y9yoBe+RXN/edwLzsQ==",
+ "dev": true,
+ "peer": true,
+ "requires": {
+ "known-css-properties": "^0.29.0",
+ "postcss-media-query-parser": "^0.2.3",
+ "postcss-resolve-nested-selector": "^0.1.1",
+ "postcss-selector-parser": "^6.0.13",
+ "postcss-value-parser": "^4.2.0"
+ }
+ }
}
},
"stylelint-config-recommended-vue": {
@@ -31229,16 +31656,61 @@
}
},
"stylelint-scss": {
- "version": "5.1.0",
- "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-5.1.0.tgz",
- "integrity": "sha512-E+KlQFXv1Euha43qw3q+wKBSli557wxbbo6/39DWhRNXlUa9Cz+FYrcgz+PT6ag0l6UisCYjAGCNhoSl4FcwlA==",
+ "version": "6.13.0",
+ "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.13.0.tgz",
+ "integrity": "sha512-kZPwFUJkfup2gP1enlrS2h9U5+T5wFoqzJ1n/56AlpwSj28kmFe7ww/QFydvPsg5gLjWchAwWWBLtterynZrOw==",
"dev": true,
- "peer": true,
"requires": {
+ "css-tree": "^3.0.1",
+ "is-plain-object": "^5.0.0",
+ "known-css-properties": "^0.37.0",
+ "mdn-data": "^2.25.0",
"postcss-media-query-parser": "^0.2.3",
- "postcss-resolve-nested-selector": "^0.1.1",
- "postcss-selector-parser": "^6.0.13",
+ "postcss-resolve-nested-selector": "^0.1.6",
+ "postcss-selector-parser": "^7.1.1",
"postcss-value-parser": "^4.2.0"
+ },
+ "dependencies": {
+ "css-tree": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
+ "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+ "dev": true,
+ "requires": {
+ "mdn-data": "2.12.2",
+ "source-map-js": "^1.0.1"
+ },
+ "dependencies": {
+ "mdn-data": {
+ "version": "2.12.2",
+ "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
+ "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+ "dev": true
+ }
+ }
+ },
+ "known-css-properties": {
+ "version": "0.37.0",
+ "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.37.0.tgz",
+ "integrity": "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==",
+ "dev": true
+ },
+ "mdn-data": {
+ "version": "2.25.0",
+ "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.25.0.tgz",
+ "integrity": "sha512-T2LPsjgUE/tgMmRXREVmwsux89DwWfNjiynOeXuLd2mX6jphGQ2YE3Ukz7LQ2VOFKiVZU/Ee1GqzHiipZCjymw==",
+ "dev": true
+ },
+ "postcss-selector-parser": {
+ "version": "7.1.1",
+ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
+ "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
+ "dev": true,
+ "requires": {
+ "cssesc": "^3.0.0",
+ "util-deprecate": "^1.0.2"
+ }
+ }
}
},
"supports-color": {
@@ -31489,6 +31961,11 @@
"is-number": "^7.0.0"
}
},
+ "tocbot": {
+ "version": "4.35.0",
+ "resolved": "https://registry.npmjs.org/tocbot/-/tocbot-4.35.0.tgz",
+ "integrity": "sha512-i8FoSaP3u60D94e/dtzCk23PIEBnc/l8XqvlK4g8gUCa9XFY4RmyMLYP6X+yN+ljcEijFbmCtNHtBoeTsQkCPg=="
+ },
"toidentifier": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
diff --git a/package.json b/package.json
index 2eacff85..44372b2d 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
"@nextcloud/router": "^2.1.2",
"@nextcloud/typings": "^1.7.0",
"@nextcloud/vue": "^8.17.0",
- "@telekom/design-tokens": "^1.0.0-beta.9",
+ "@telekom-ods/react-ui-kit": "^2.4.0",
"pinia": "^2.1.6",
"vue": "^2.7.14"
},
@@ -31,9 +31,12 @@
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"mock-xmlhttprequest": "^8.2.0",
+ "postcss": "^8.5.6",
+ "postcss-scss": "^4.0.9",
"sass": "^1.68.0",
"sass-loader": "^13.3.2",
"style-loader": "^3.3.1",
+ "stylelint-scss": "^6.13.0",
"throttle-debounce": "^5.0.0",
"ts-jest": "^29.1.1",
"ts-loader": "^9.4.4",
@@ -59,7 +62,7 @@
"sass": "sass --style compressed --load-path css css/",
"sass:watch": "sass --watch --load-path css css/",
"sass:icons": "node src/icons.mjs",
- "postinstall": "mkdir -p dist && sed 's/data-mode/data-themes*/g' node_modules/@telekom/design-tokens/dist/telekom/css/telekom-design-tokens.all.css > dist/telekom-design-tokens.all.css",
+ "postinstall": "node src/fix-ods-tokens.mjs",
"test": "jest --verbose",
"test:watch": "jest --watchAll",
"test:coverage": "jest --coverage"
diff --git a/src/components/DisplaySettings.vue b/src/components/DisplaySettings.vue
index 4214f750..f91cff73 100644
--- a/src/components/DisplaySettings.vue
+++ b/src/components/DisplaySettings.vue
@@ -132,7 +132,7 @@ export default {
padding: 0 0.5rem !important;
&:hover {
- background-color: var(--nmc-color-background-hover) !important;
+ background-color: var(--color-background-hover) !important;
}
}
}
diff --git a/src/components/FilesSettings.vue b/src/components/FilesSettings.vue
index d7ddafee..1fff0777 100644
--- a/src/components/FilesSettings.vue
+++ b/src/components/FilesSettings.vue
@@ -1,16 +1,13 @@
-