diff --git a/.github/workflows/sbom-matrix.yaml b/.github/workflows/sbom-matrix.yaml index eec493ecd2290..d602f88ea12cb 100644 --- a/.github/workflows/sbom-matrix.yaml +++ b/.github/workflows/sbom-matrix.yaml @@ -48,7 +48,6 @@ name: SBOM generation (matrix) # # Components processed: # - Main Nextcloud server (root directory) -# - Custom legacy theme (themes/nc-ionos-theme/IONOS) # - Custom apps (apps-custom/*) # - External apps (apps-external/*) @@ -122,12 +121,6 @@ jobs: "composer_output": "bom.nextcloud.composer.json", "npm_output": "bom.nextcloud.npm.json" }, - { - "name": "theme-nc-ionos-theme-legacy", - "project_name": "HiDrive NEXT Theme: nc-ionos-theme", - "path": "themes/nc-ionos-theme/IONOS", - "npm_output": "bom.theme-nc-ionos-theme-legacy.json" - }, { "name": "app-simplesettings", "project_name": "HiDrive NEXT App: simplesettings", @@ -147,12 +140,6 @@ jobs: "path": "apps-custom/nc_ionos_processes", "composer_output": "bom.app-ionos-processes.json" }, - { - "name": "app-theming", - "project_name": "HiDrive NEXT App: nc_theming", - "path": "apps-custom/nc_theming", - "composer_output": "bom.app-theming.json" - }, { "name": "app-viewer", "project_name": "HiDrive NEXT App: viewer", diff --git a/.gitmodules b/.gitmodules index bcdbd157b70d6..5ca903ba86e03 100644 --- a/.gitmodules +++ b/.gitmodules @@ -10,15 +10,9 @@ [submodule "apps-custom/googleanalytics"] path = apps-custom/googleanalytics url = git@github.com:IONOS-Productivity/nc-googleanalytics.git -[submodule "apps-custom/nc_theming"] - path = apps-custom/nc_theming - url = git@github.com:IONOS-Productivity/nc-theming.git [submodule "apps-custom/nc_ionos_processes"] path = apps-custom/nc_ionos_processes url = git@github.com:IONOS-Productivity/nc-ionos-processes.git -[submodule "themes/nc-ionos-theme"] - path = themes/nc-ionos-theme - url = git@github.com:IONOS-Productivity/nc-ionos-theme.git [submodule "apps-external/viewer"] path = apps-external/viewer url = git@github.com:IONOS-Productivity/nc-viewer.git diff --git a/IONOS b/IONOS index cbf29d8c08518..7a9c914350128 160000 --- a/IONOS +++ b/IONOS @@ -1 +1 @@ -Subproject commit cbf29d8c085189db7cf7b229e391cbd9fd2de052 +Subproject commit 7a9c914350128964cad6645fde4dfec50897ada3 diff --git a/apps-custom/nc_theming b/apps-custom/nc_theming deleted file mode 160000 index a06a89fb5281b..0000000000000 --- a/apps-custom/nc_theming +++ /dev/null @@ -1 +0,0 @@ -Subproject commit a06a89fb5281b2fe4b0a1bc23d7ec5ddbaa2cdf6 diff --git a/apps-custom/simplenavigation b/apps-custom/simplenavigation index ff7c2b3f79a19..beafc026a0400 160000 --- a/apps-custom/simplenavigation +++ b/apps-custom/simplenavigation @@ -1 +1 @@ -Subproject commit ff7c2b3f79a190aa814b02684ca78ba411471c62 +Subproject commit beafc026a0400ee6491c137da7aca0dd34575898 diff --git a/apps/theming/composer/composer/autoload_classmap.php b/apps/theming/composer/composer/autoload_classmap.php index 931bc2a9c7d9c..f681b379c606b 100644 --- a/apps/theming/composer/composer/autoload_classmap.php +++ b/apps/theming/composer/composer/autoload_classmap.php @@ -39,6 +39,7 @@ 'OCA\\Theming\\Themes\\DefaultTheme' => $baseDir . '/../lib/Themes/DefaultTheme.php', 'OCA\\Theming\\Themes\\DyslexiaFont' => $baseDir . '/../lib/Themes/DyslexiaFont.php', 'OCA\\Theming\\Themes\\HighContrastTheme' => $baseDir . '/../lib/Themes/HighContrastTheme.php', + 'OCA\\Theming\\Themes\\IonosTheme' => $baseDir . '/../lib/Themes/IonosTheme.php', 'OCA\\Theming\\Themes\\LightTheme' => $baseDir . '/../lib/Themes/LightTheme.php', 'OCA\\Theming\\ThemingDefaults' => $baseDir . '/../lib/ThemingDefaults.php', 'OCA\\Theming\\Util' => $baseDir . '/../lib/Util.php', diff --git a/apps/theming/composer/composer/autoload_static.php b/apps/theming/composer/composer/autoload_static.php index 43f2f97c99fe3..be07270fbc20c 100644 --- a/apps/theming/composer/composer/autoload_static.php +++ b/apps/theming/composer/composer/autoload_static.php @@ -54,6 +54,7 @@ class ComposerStaticInitTheming 'OCA\\Theming\\Themes\\DefaultTheme' => __DIR__ . '/..' . '/../lib/Themes/DefaultTheme.php', 'OCA\\Theming\\Themes\\DyslexiaFont' => __DIR__ . '/..' . '/../lib/Themes/DyslexiaFont.php', 'OCA\\Theming\\Themes\\HighContrastTheme' => __DIR__ . '/..' . '/../lib/Themes/HighContrastTheme.php', + 'OCA\\Theming\\Themes\\IonosTheme' => __DIR__ . '/..' . '/../lib/Themes/IonosTheme.php', 'OCA\\Theming\\Themes\\LightTheme' => __DIR__ . '/..' . '/../lib/Themes/LightTheme.php', 'OCA\\Theming\\ThemingDefaults' => __DIR__ . '/..' . '/../lib/ThemingDefaults.php', 'OCA\\Theming\\Util' => __DIR__ . '/..' . '/../lib/Util.php', diff --git a/apps/theming/css/ionos/_layout.css b/apps/theming/css/ionos/_layout.css new file mode 100644 index 0000000000000..147160833d975 --- /dev/null +++ b/apps/theming/css/ionos/_layout.css @@ -0,0 +1,34 @@ +body { + background-color: var(--ion-color-main-background); +} + +#body-user { + div.files-list { + --row-height: 55px; + + @media only screen and (max-width: 1023px) { + --row-height: 65px; + } + } +} + +#content-vue { + margin-top: var(--header-height); + margin-left: 0; + margin-right: 0; + margin-bottom: 0; + width: 100%; + border-radius: 0; +} + +#body-login { + overflow-x: hidden; + + #header .logo { + background-image: none; + } + +.svg.icon-confirm { + background-size: 24px; + } +} diff --git a/apps/theming/css/ionos/buttons.css b/apps/theming/css/ionos/buttons.css new file mode 100644 index 0000000000000..085a948bfd134 --- /dev/null +++ b/apps/theming/css/ionos/buttons.css @@ -0,0 +1,426 @@ +#body-user { + .button-vue { + border-radius: 30px; + + &.button-vue--icon-and-text { + min-height: 36px; + min-width: 98px; + padding: 0 16px; + + .button-vue__wrapper { + height: 36px; + gap: 8px; + + .button-vue__text { + font-size: 14px; + font-weight: 600; + } + + .button-vue__icon, .button-vue__icon span[role=img] { + min-height: 16px; + min-width: auto; + width: auto; + } + } + + &.button-vue--vue-primary[aria-label*="Copy"], + &.button-vue--vue-secondary, &.button-vue--vue-tertiary[aria-label="Cancel"] { + background-color: var(--ion-button-secondary-background-default); + border: var(--ion-button-secondary-border-default); + + &:not(.action-item__menutoggle) { + .button-vue__text, .button-vue__icon svg { + color: var(--ion-button-secondary-text); + } + } + + &:hover:not(:disabled):not(.button-vue--disabled) { + background-color: var(--ion-button-secondary-background-hover); + border-color: var(--ion-button-secondary-background-hover); + + &:not(.action-item--single) { + .button-vue__text, .button-vue__icon svg { + color: var(--ion-button-secondary-text-hover); + } + } + } + + &:active:not(:disabled):not(.button-vue--disabled) { + background-color: var(--ion-button-secondary-background-active); + + &:not(.action-item--single) { + .button-vue__text, .button-vue__icon svg { + color: var(--ion-button-secondary-text-active); + } + } + } + } + + &.button-vue--vue-primary, &.button-vue--vue-error, + /* ensure primary type styling of "new" button */ + &.action-item__menutoggle, &.files-list__header-upload-button--disabled { + background-color: var(--ion-button-primary-background-default); + border: none; + + .button-vue__text, .button-vue__icon svg { + color: var(--ion-button-primary-text); + } + + &:disabled { + background-color: var(--ion-button-primary-background-disabled); + color: var(--ion-button-primary-text-disabled); + } + + &:hover:not(:disabled):not(.button-vue--disabled) { + background-color: var(--ion-button-primary-background-hover); + border-color: var(--ion-button-primary-background-hover); + } + + &:active:not(:disabled):not(.button-vue--disabled) { + background-color: var(--ion-button-primary-background-active); + border-color: var(--ion-button-primary-background-active); + } + } + + &.button-vue--vue-tertiary:not(.files-list__row-action-sharing-status):not(table th button):not(li.vue-crumb a):not([aria-label="Cancel"]), + &[class*="files-list__row-actions-"] { + background-color: var(--ion-button-tertiary-background-default); + border: none; + + .button-vue__text, .button-vue__icon svg { + color: var(--ion-button-tertiary-text); + } + + &:hover { + background-color: var(--ion-button-tertiary-background-hover); + } + + &:active { + background-color: var(--ion-button-tertiary-background-active); + } + } + + .action-item { + .button-vue__text, .button-vue__icon svg { + color: var(--ion-color-blue-b4); + } + + &:hover { + .button-vue__text, .button-vue__icon svg { + color: var(--ion-color-blue-b5); + } + } + + &:active { + .button-vue__text, .button-vue__icon svg { + color: var(--ion-color-primary); + } + } + } + + /* mobile and tablet */ + @media only screen and (max-width: 1023px) { + min-height: 48px; + } + } + + &.button-vue--text-only { + &.button-vue--vue-primary, &.button-vue--vue-error { + background-color: var(--ion-button-primary-background-default); + color: var(--ion-button-primary-text); + + &:disabled { + background-color: var(--ion-button-primary-background-disabled); + color: var(--ion-button-primary-text-disabled); + } + + &:hover:not(:disabled):not(.button-vue--disabled) { + background-color: var(--ion-button-primary-background-hover); + border-color: var(--ion-button-primary-background-hover); + } + + &:active:not(:disabled):not(.button-vue--disabled) { + background-color: var(--ion-button-primary-background-active); + border-color: var(--ion-button-primary-background-active); + } + } + + &.button-vue--vue-secondary, &.button-vue--vue-tertiary[aria-label="Cancel"] { + background-color: var(--ion-button-secondary-background-default); + border: var(--ion-button-secondary-border-default); + + .button-vue__text { + color: var(--ion-button-secondary-text); + } + + &:hover:not(:disabled):not(.button-vue--disabled) { + background-color: var(--ion-button-secondary-background-hover); + border-color: var(--ion-button-secondary-background-hover); + + .button-vue__text { + color: var(--ion-button-secondary-text-hover); + } + } + + &:active:not(:disabled):not(.button-vue--disabled) { + background-color: var(--ion-button-secondary-background-active); + + .button-vue__text { + color: var(--ion-button-secondary-text-active); + } + } + } + + /* mobile and tablet */ + @media only screen and (max-width: 1023px) { + min-height: 48px; + } + } + + &.button-vue--icon-only, + .button-vue__icon { + height: 32px !important; + width: 32px !important; + min-width: 32px; + min-height: 32px; + margin: auto 0; + &.button-vue--vue-tertiary { + .button-vue__icon span[role=img]>svg { + color: var(--ion-button--icon-only-text) + } + + &[class^="files-list__header-"], &.app-navigation-toggle { + .button-vue__icon span[role=img]>svg { + color: var(--ion-button-tertiary-text); + } + } + + &:hover:not(:disabled):not(.button-vue--disabled):not(&.modal-container__close):not(.icon-collapse):not(.files-list__header-grid-button) { + background-color: var(--ion-button--icon-only-background-hover); + + .button-vue__icon span[role=img]>svg { + color: var(--ion-button--icon-only-text-hover); + } + } + + &:active:not(:disabled):not(.button-vue--disabled):not(&.modal-container__close):not(.icon-collapse):not(.files-list__header-grid-button) { + background-color: var(--ion-button--icon-only-background-active); + + .button-vue__icon span[role=img]>svg { + color: var(--ion-button--icon-only-text-hover); + } + } + + &.files-list__header-grid-button { + &:hover { + background-color: transparent; + .button-vue__icon span[role=img]>svg { + color: var(--ion-color-blue-b5); + } + } + &:active { + background-color: transparent; + .button-vue__icon span[role=img]>svg { + color: var(--ion-color-typo-mild); + } + } + } + &.modal-container__close { + margin: 4px; + .button-vue__icon span[role=img]>svg { + width: 24px; + height: 24px; + color: light-dark(var(--ion-color-cool-grey-c5), var(--ion-color-cool-grey-c1)); + } + + &:hover { + background-color: transparent; + + .button-vue__icon span[role=img]>svg { + color: light-dark(var(--ion-color-cool-grey-c6), var(--ion-color-cool-grey-c4)); + } + } + + &:active { + background-color: transparent; + + .button-vue__icon span[role=img]>svg { + color: var(--ion-color-typo-mild); + } + } + } + } + } + } + + /* files list checkbox buttons */ + .checkbox-radio-switch { + .checkbox-content__icon svg { + color: var(--ion-color-cool-grey-c5); + } + + :not(span[data-cy-files-sharing-share-permissions-bundle])&:hover { + .checkbox-content { + background: transparent; + } + + .checkbox-content__icon svg { + color: var(--ion-color-blue-b4); + } + } + + .checkbox-content__icon--checked svg, &.checkbox-radio-switch--indeterminate svg { + color: var(--ion-color-blue-b4); + } + } + + /* files list column sorting buttons */ + .files-list, .file-picker__files { + table th.files-list__column, th[class^="row-"] { + .button-vue--vue-tertiary { + padding: 0 12px; + + .button-vue__text, .files-list__column-sort-button-text { + color: var(--ion-color-typo-mild); + font-weight: 600; + } + .button-vue__icon { + flex: 1; + min-width: 16px; + max-width: max-content; + + span[role=img]>svg { + color: var(--ion-color-typo-mild); + } + } + + &:hover { + background: transparent; + + .button-vue__text, .files-list__column-sort-button-text, span[role=img]>svg { + color: var(--ion-color-blue-b5); + } + } + + &:active { + background: transparent; + + .files-list__column-sort-button-text, span[role=img]>svg { + color: var(--ion-color-primary); + } + } + } + + &.files-list__row-size span.button-vue__wrapper { + flex-direction: row-reverse; + } + } + } + + .files-list__breadcrumbs, .breadcrumb__actions { + align-items: center; + gap: 8px; + } +} + +#body-user, #body-public { + div.modal-mask .modal-header { + .modal-header__name { + color: var(--background-image-color-text); + } + div.icons-menu { + button, .header-actions { + span[role=img]>svg { + color: var(--background-image-color-text); + } + } + } + } + + button.toast-close { + @media (prefers-color-scheme: dark) { + background-color: transparent; + filter: var(--ion-icon-filter-cool-grey-c1); + } + } + + /* share settings icons */ + .avatar-external.icon-external-white { + background-size: 16px; + } + .avatar-class-icon.avatar-link-share.icon-public-white { + background-size: 18px; + @media (prefers-color-scheme: dark) { + background-image: var(--original-icon-public-white); + } + } + .avatar-shared.icon-more-white { + background-size: 18px; + } + + /* image editor buttons */ + .viewer__image-editor, div#SfxPopper, div.SfxModal-Wrapper { + @media (prefers-color-scheme: dark) { + div.FIE_tab, .FIE_tools-items div, .SfxPopper-root div, .SfxSelect-root { + background-color: var(--ion-surface-secondary); + + &[aria-selected="true"] { + border: var(--ion-button-secondary-border-default); + box-shadow: none; + } + + svg { + color: var(--color-main-text); + } + } + + button, .SfxMenuItem-root { + background-color: var(--ion-surface-secondary); + color: var(--ion-button-secondary-text); + + &:disabled { + background-color: transparent !important; + } + + &:hover { + background-color: var(--color-background-hover); + + &:not(:disabled), svg, .SfxSelect-tickIcon, &::before { + color: var(--color-main-text); + } + } + + &[color="primary"] { + background-color: var(--ion-button-primary-background-default) !important; + + &:hover { + background-color: var(--ion-button-primary-background-hover) !important; + } + } + } + + .SfxInput-root:not(.SfxSelect-root) { + background-color: transparent; + border: none; + } + } + + .FIE_topbar-buttons-wrapper { + gap: 12px; + } + + .SfxCrossButton-root svg path { + transform: scale(1); + } + } +} + +#body-login { + a.button:hover { + background-color: var(--ion-button-tertiary-background-hover); + color: var(--ion-button-tertiary-text); + } + a.button:focus { + background-color: var(--color-main-background); + } +} diff --git a/apps/theming/css/ionos/files.css b/apps/theming/css/ionos/files.css new file mode 100644 index 0000000000000..482c971710f36 --- /dev/null +++ b/apps/theming/css/ionos/files.css @@ -0,0 +1,461 @@ +#body-user { + .files-list__filters { + display: none; + } + .files-list__thead, .files-list__thead-overlay { + top: 0; + .files-list__row-head .files-list__column--sortable .button-vue__text { + @media only screen and (max-width: 1023px) { + font-size: 16px; + } + } + } + + .files-list__header { + margin-top: 20px; + margin-right: 16px; + margin-bottom: 14px; + @media only screen and (max-width: 1023px) { + margin-top: 15px; + } + } + + thead.files-list__thead tr, + div[data-cy-files-list]:not(.files-list--grid) tbody.files-list__tbody tr.files-list__row, + tfoot.files-list__tfoot tr { + padding-right: 44px; + padding-left: 4px; + + @media only screen and (max-width: 512px) { + padding-right: 16px; + } + } + + .files-list__header-grid-button { + position: absolute; + top: 88px; + right: 20px; + z-index: 33; + } + + .files-list__refresh-icon { + position: absolute; + right: 50%; + } + + .breadcrumb nav { + flex-grow: 1; + } + + .files-list__column-sort-button-icon { + svg { + width: 18px; + height: 18px; + } + } + + div.files-list__header:has(div.files-list__breadcrumbs), .file-picker { + div.files-list__breadcrumbs, .file-picker__breadcrumbs { + ul.breadcrumb__crumbs { + a, a:hover, a:active, a:disabled, button { + padding: 2px 0; + font-weight: 400; + color: var(--ion-breadcrumb-text-default); + background-color: transparent; + &.action-item__menutoggle:last-child { + padding: 2px calc(4 * var(--default-grid-baseline)); + } + + span.button-vue__text { + color: var(--ion-breadcrumb-text-default); + font-weight: 400; + &:hover { + color: var(--ion-breadcrumb-text-hover); + } + &:active { + color: var(--ion-breadcrumb-text-active); + } + &:disabled { + color: var(--ion-breadcrumb-text-disabled); + } + } + } + + /* ensure the icon-only buttons look correct */ + button.button-vue--icon-only, a.button-vue--icon-only svg { + background-color: transparent; + color: var(--ion-breadcrumb-text); + padding: 2px 0; + &:hover { + color: var(--ion-breadcrumb-text-hover); + background-color: inherit; + } + &:active { + color: var(--ion-breadcrumb-text-active); + background-color: inherit; + } + &:disabled { + color: var(--ion-breadcrumb-text-disabled); + background-color: inherit; + } + &:focus { + background-color: inherit; + } + span[role=img]>svg.material-design-icon__svg { + color: inherit; + } + } + + .vue-crumb { + align-items: center; + } + + .vue-crumb__separator { + color: var(--ion-breadcrumb-text); + } + } + } + + @media only screen and (max-width: 767px) { + margin-inline: 0; + + div.breadcrumb { + flex-direction: column-reverse; + align-items: flex-start; + + nav { + margin-left: 8px; + } + + div.breadcrumb__actions { + align-self: flex-end; + + &:has(div.v-popper) { + position: sticky; + } + } + } + } + } + + div[data-cy-files-list].files-list { + .files-list__row { + &:hover { + background-color: var(--ion-files-list-background-hover); + + .favorite-marker-icon svg path { + stroke: var(--color-main-background); + } + } + &:active, &.files-list__row--active, &:has(.checkbox-radio-switch--checked) { + background-color: var(--ion-files-list-background-active); + + .favorite-marker-icon svg path { + stroke: var(--color-main-background); + } + } + .files-list__row-icon { + color: var(--ion-files-list-icon); + } + .files-list__row-actions { + right: 0; + bottom: 2px; + .action-items { + color: var(--ion-files-list-icon); + } + .icon-vue { + color: var(--ion-files-list-icon); + } + .material-design-icon{ + color: var(--ion-files-list-icon); + } + .button-vue--icon-and-text { + background-color: var(--ion-button-secondary-background-default); + border: 2px solid transparent; + &:hover { + border: var(--ion-button-secondary-border-default); + } + .button-vue__text { + color: var(--ion-button-secondary-text); + } + } + } + } + + /* mobile and tablet */ + @media only screen and (max-width: 1199px) { + .files-list__filters { + height: auto; + } + } + } + + tfoot.files-list__tfoot tr td.files-list__column.files-list__row-size, + td[data-cy-files-list-row-size].files-list__row-size { + justify-content: normal; + padding-left: 12px; + @media only screen and (max-width: 1199px) { + padding-left: 23px; + } + } + + div.files-list--grid tbody.files-list__tbody .files-list__row-icon { + .folder-icon { + justify-content: center; + } + + img, svg { + width: auto; + height: auto; + min-width: 42px; + min-height: 80%; + } + } + + /* Context Menu */ + div.v-popper--theme-dropdown.v-popper__popper:has(.v-popper__wrapper) { + border-radius: 16px; + filter: none; + + div.v-popper__wrapper { + border-radius: inherit; + border: 1px solid var(--ion-context-menu-border); + + div.v-popper__inner { + padding: 2px 12px; + background-color: var(--ion-context-menu-background); + + li.action:has(button.action-button) { + &.active { + background-color: var(--ion-context-menu-item-background-hover); + } + + button.action-button { + border-radius: 8px; + color: var(--ion-context-menu-item-text); + font-style: normal; + font-weight: 600; + margin-top: 12px; + margin-bottom: 12px; + + &:active { + background-color: var(--ion-context-menu-item-background-active); + } + + &:disabled { + color: var(--ion-context-menu-item-text-disabled); + background-color: var(--ion-context-menu-item-background-disabled); + cursor: not-allowed; + } + + .folder-upload-icon { + color: var(--ion-context-menu-item-text) !important; + } + } + } + } + + div.v-popper__arrow-container:has(div.v-popper__arrow-inner) { + display: none; + } + } + } + + /* Dialogs */ + div.modal-container { + background-color: var(--ion-surface-dialog); + min-width: min-content; + + &:has(.viewer__content) { + background-color: transparent; + } + + &:has(.nc-generic-dialog) { + /* Delete Dialog */ + border: 1px solid var(--ion-color-blue-b4); + } + &:has(.unified-search-modal) { + border: 0.5px solid #A3A3A3; + box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, 0.25), -1px 0px 8px 0px rgba(0, 0, 0, 0.25); + .unified-search-modal__header, .input-field__input, .input-field__label { + background-color: var(--ion-surface-dialog); + + .unified-search-modal__filters{ + button.button-vue--vue-secondary.action-item__menutoggle[id*="trigger-menu"] { + background-color: var(--ion-dialog-filter-button-background); + &:hover { + background-color: var(--ion-button-tertiary-background-hover); + } + &:active { + background-color: var(--ion-button-tertiary-background-active); + } + span.button-vue__wrapper { + span.button-vue__text, .button-vue__icon svg { + color: var(--ion-button-tertiary-text) !important; + } + } + } + } + + .unified-search-modal__filters-applied { + .chip { + background-color: var(--ion-chip-background); + color: var(--ion-chip-text); + border: none; + + span.icon { + .calendar-range-icon { + width: 20px; + height: 20px; + } + img { + filter: none; + } + } + } + } + } + + .unified-search-modal__results { + h4.result-title { + color: var(--ion-text); + } + + ul.result-items { + li.result-items__item div.list-item, li.result-items__item div.list-item a{ + background-color: var(--ion-dialog-files-list-background); + border: none; + &:hover, &.active { + background-color: var(--ion-dialog-files-list-background-hover); + border: none; + } + } + } + } + } + + @media only screen and (max-width: 512px) { + div.dialog__actions { + flex-wrap: wrap; + } + } + + /* File Picker*/ + .dialog.file-picker { + .input-field__input, .input-field__input:focus + .input-field__label { + background-color: var(--ion-surface-dialog); + } + + .file-picker__files { + thead th { + background-color: var(--ion-surface-dialog); + } + + tr.file-picker__row { + &:hover, &.file-picker__row--selected { + background-color: var(--ion-files-list-background-hover); + + @media (prefers-color-scheme: dark) { + background-color: var(--ion-color-cool-grey-c7); + } + } + + [class*="_file-picker__file-icon_"] { + color: var(--ion-files-list-icon); + } + } + } + + .file-picker__side li { + .button-vue--vue-primary.button-vue--icon-and-text { + background-color: var(--ion-button-sidebar-background-active) !important; + + .button-vue__text, .button-vue__icon svg { + color: var(--ion-button-tertiary-text); + } + } + + .button-vue--vue-tertiary.button-vue--icon-and-text { + background-color: transparent !important; + + &:hover { + background-color: var(--ion-button-sidebar-background-hover) !important; + } + + &:active { + background-color: var(--ion-button-sidebar-background-active) !important; + } + } + + .dialog__actions button.button-vue--vue-primary { + background-color: var(--ion-button-secondary-background-default); + border: var(--ion-button-secondary-border-default); + + + &:hover:not(:disabled):not(.button-vue--disabled) { + background-color: var(--ion-button-secondary-background-hover); + border-color: var(--ion-button-secondary-background-hover); + + .button-vue__text, .button-vue__icon svg { + color: var(--ion-button-secondary-text-hover); + } + } + + &:active:not(:disabled):not(.button-vue--disabled) { + background-color: var(--ion-button-secondary-background-active); + + .button-vue__text, .button-vue__icon svg { + color: var(--ion-button-secondary-text-active); + } + } + } + } + } + } + + .v-popper__popper { + .v-popper__inner { + background-color: var(--ion-surface-dialog) !important; + border-radius: inherit; + + .searchable-list__list { + li button { + background-color: transparent !important; + &:hover, &:active { + background-color: var(--ion-files-list-background-hover) !important; + } + } + } + + .input-field__input { + background-color: var(--ion-surface-dialog); + } + } + [class*="trigger-menu"], [aria-labelledby^="trigger-menu"] { + li.action.active { + background-color: var(--ion-surface-dialog); + } + + img.filter-button__icon { + @media (prefers-color-scheme: dark) { + filter: none; + } + } + } + } + + ::selection { + background-color: var(--ion-color-blue-b4); + } + + .toastify.dialogs { + min-width: 0; + padding-right: 14px; + + .toast-close { + margin-right: 0; + padding-right: 0; + min-width: 0; + } + } +} diff --git a/apps/theming/css/ionos/files_sharing.css b/apps/theming/css/ionos/files_sharing.css new file mode 100644 index 0000000000000..a405a86f62482 --- /dev/null +++ b/apps/theming/css/ionos/files_sharing.css @@ -0,0 +1,45 @@ +/** + * SPDX-FileCopyrightText: 2026 IONOS SE + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +/* + * Sharing sidebar tab (files app sidebar, #app-sidebar-vue). + * Targets SharingTab.vue (.sharingTab) and SharingDetailsTab.vue + * (.sharingTabDetailsView__quick-permissions) which are rendered in V33. + */ +#app-sidebar-vue.app-sidebar { + div.sharingTab { + .sharingTab__content { + ul { + padding: 4px 0; + + &.sharing-link-list { + div.sharing-entry__desc { + gap: 5px; + } + } + } + } + div.sharingTabDetailsView__quick-permissions { + span.checkbox-radio-switch { + padding: 8px; + + .checkbox-content__icon--checked svg { + color: #fff; + } + } + } + } +} + +/* + * Vue Select dropdown used by SharingInput.vue for share recipient search. + */ +li.vs__dropdown-option { + background-color: var(--ion-button-sidebar-background); + color: var(--ion-button-sidebar-text); + &.vs__dropdown-option--highlight { + background-color: var(--ion-button-sidebar-background-hover); + } +} diff --git a/apps/theming/css/ionos/navigation.css b/apps/theming/css/ionos/navigation.css new file mode 100644 index 0000000000000..ed443f4f56452 --- /dev/null +++ b/apps/theming/css/ionos/navigation.css @@ -0,0 +1,107 @@ +#body-user { + .app-navigation__search { + display: none; + } + + .app-navigation-list { + padding: 20px; + } + + div[data-cy-files-navigation].app-navigation:has(nav#app-navigation-vue) { + background-color: var(--ion-surface-secondary); + .app-navigation-entry { + span[role=img]>svg { + color: var(--ion-button-sidebar-text); + } + .app-navigation-entry__name { + font-weight: 600; + color: var(--ion-button-sidebar-text) !important; + } + border-radius: var(--border-radius-pill); + &.active { + background-color: var(--ion-button-sidebar-background-active) !important; + .app-navigation-entry-link { + color: var(--ion-button-sidebar-text) !important; + } + } + &:hover { + background-color: var(--ion-button-sidebar-background-hover); + } + + /* fix Storage Quota color after click */ + &:focus-within:not(:active) { + background-color: var(--ion-surface-secondary); + } + } + + .app-navigation-entry--opened:has(.app-navigation-entry__children) { + background: var(--ion-surface-primary); + border-radius: 8px; + .app-navigation-entry__children { + padding: 0 8px; + gap: 0; + .app-navigation-entry { + border-radius: 4px; + } + .app-navigation-entry-wrapper { + background: var(--ion-surface-primary); + border-radius: 8px; + min-height: 40px; + margin: 4px 0; + } + } + } + + /* Navigation Toggle Button */ + div.app-navigation-toggle-wrapper button.app-navigation-toggle.button-vue--icon-only { + margin: 18px 0; + background-color: var(--ion-button-sidebar--icon-only-background) !important; + @media only screen and (max-width: 1023px) { + margin: 12px 0; + } + span[role=img]>svg { + color: var(--ion-button-sidebar--icon-only-text) !important; + } + &:hover { + background-color: var(--ion-button-sidebar--icon-only-background-hover) !important; + span[role=img]>svg { + color: var(--ion-button-sidebar--icon-only-text) !important; + } + } + } + + /* Sub Navigation Toggle Icon Button */ + .button-vue--icon-only:not(.app-navigation-toggle) { + margin: 6px; + background-color: transparent; + span[role=img]>svg { + color: var(--ion-button-sidebar-text); + } + &:hover { + background-color: transparent; + span[role=img]>svg { + color: var(--ion-button-sidebar-text); + } + } + } + + @media only screen and (max-width: 767px) { + &:has(span.menu-open-icon) { + width: auto; + max-width: inherit; + + .app-navigation-list { + padding-right: calc(var(--default-clickable-area) + 16px); + } + + div.app-navigation-toggle-wrapper { + margin-inline-end: calc(var(--default-clickable-area) - 24px); + } + } + } + } +} + +.app-navigation .app-navigation-entry__settings li[data-cy-files-navigation-settings-button] { + display: none; +} diff --git a/apps/theming/css/ionos/public_share.css b/apps/theming/css/ionos/public_share.css new file mode 100644 index 0000000000000..d84c3935a31c1 --- /dev/null +++ b/apps/theming/css/ionos/public_share.css @@ -0,0 +1,73 @@ +/** + * SPDX-FileCopyrightText: 2026 IONOS SE + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +/* + * Guest/login/share page footer. + * + * NC's .guest-box and .body-login-container share a box-shadow rule in + * core/css/guest.scss. Remove it from the