From 89d8d86586f9de9098ce89e094a5d61fadc208cd Mon Sep 17 00:00:00 2001 From: Kai Henseler Date: Mon, 9 Dec 2024 10:38:27 +0100 Subject: [PATCH 1/4] style: add missing colors Signed-off-by: Kai Henseler --- lib/Themes/OverrideDefaultTheme.php | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/lib/Themes/OverrideDefaultTheme.php b/lib/Themes/OverrideDefaultTheme.php index 077469c..e1156a0 100644 --- a/lib/Themes/OverrideDefaultTheme.php +++ b/lib/Themes/OverrideDefaultTheme.php @@ -76,12 +76,13 @@ public function getCSSVariables(): array { // IONOS COLORS $ionColorMainBackground = '#fff'; $ionColorPrimary = '#003d8f'; - $ionColorSecondary = '#001b41'; $ionColorBlueB1 = '#dbedf8'; $ionColorBlueB2 = '#95caeb'; $ionColorBlueB4 = '#1474c4'; $ionColorBlueB5 = '#095BB1'; + $ionColorBlueB6 = '#003D8F'; $ionColorBlueB7 = '#0B2A63'; + $ionColorBlueB8 = '#001B41'; $ionColorCoolGreyC1 = '#f4f7fa'; $ionColorCoolGreyC2 = '#dbe2e8'; $ionColorCoolGreyC3 = '#bcc8d4'; @@ -101,12 +102,14 @@ public function getCSSVariables(): array { $ionosVariables = [ '--ion-color-main-background' => $ionColorMainBackground, '--ion-color-primary' => $ionColorPrimary, - '--ion-color-secondary' => $ionColorSecondary, + '--ion-color-secondary' => $ionColorBlueB8, '--ion-color-blue-b1' => $ionColorBlueB1, '--ion-color-blue-b2' => $ionColorBlueB2, '--ion-color-blue-b4' => $ionColorBlueB4, '--ion-color-blue-b5' => $ionColorBlueB5, + '--ion-color-blue-b6' => $ionColorBlueB6, '--ion-color-blue-b7' => $ionColorBlueB7, + '--ion-color-blue-b8' => $ionColorBlueB8, '--ion-color-cool-grey-c1' => $ionColorCoolGreyC1, '--ion-color-cool-grey-c2' => $ionColorCoolGreyC2, '--ion-color-cool-grey-c3' => $ionColorCoolGreyC3, From eb62380f84ac85d7860ece1cb0c18cce73c0e5ee Mon Sep 17 00:00:00 2001 From: Kai Henseler Date: Mon, 9 Dec 2024 10:40:12 +0100 Subject: [PATCH 2/4] refactor(buttons): make buttons easier to customize To prepare css for dark mode implementation Signed-off-by: Kai Henseler --- css/buttons.css | 115 ++++++++++++++++++++++++++++++------------------ 1 file changed, 73 insertions(+), 42 deletions(-) diff --git a/css/buttons.css b/css/buttons.css index 54309f1..9f4b5d0 100644 --- a/css/buttons.css +++ b/css/buttons.css @@ -1,3 +1,34 @@ +:root { + --ion-button-primary-background-default: var(--ion-color-blue-b7); + --ion-button-primary-background-hover: var(--ion-color-blue-b4); + --ion-button-primary-background-active: var(--ion-color-blue-b5); + --ion-button-primary-background-disabled: var(--ion-color-cool-grey-c4); + --ion-button-primary-text: #fff; + --ion-button-primary-text-disabled: var(--ion-color-cool-grey-c2); + + --ion-button-secondary-background-default: transparent; + --ion-button-secondary-background-hover: var(--ion-color-blue-b7); + --ion-button-secondary-background-active: var(--ion-color-secondary); + --ion-button-secondary-background-disabled: transparent; + --ion-button-secondary-border-default: 2px solid var(--ion-color-blue-b7); + --ion-button-secondary-border-disabled: 2px solid var(--ion-color-cool-grey-c4); + --ion-button-secondary-text: var(--ion-color-blue-b7); + --ion-button-secondary-text-hover: #fff; + --ion-button-secondary-text-active: #fff; + --ion-button-secondary-text-disabled: var(--ion-color-cool-grey-c4); + + --ion-button-tertiary-background-default: var(--ion-color-blue-b1); + --ion-button-tertiary-background-hover: var(--ion-color-cool-grey-c2); + --ion-button-tertiary-background-active: var(--ion-color-cool-grey-c3); + --ion-button-tertiary-text: var(--ion-color-secondary); + + --ion-button--icon-only-background: transparent; + --ion-button--icon-only-text: var(--ion-color-blue-b4); + --ion-button--icon-only-background-hover: var(--ion-color-blue-b4); + --ion-button--icon-only-background-active: var(--ion-color-blue-b6); + --ion-button--icon-only-text-hover: #fff; +} + #body-user { .button-vue { border-radius: 30px; @@ -25,32 +56,32 @@ &.button-vue--vue-primary[aria-label*="Copy"], &.button-vue--vue-secondary, &.button-vue--vue-tertiary[aria-label="Cancel"] { - background-color: var(--ion-color-main-background); - border: 2px solid var(--ion-color-blue-b7); + 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-color-blue-b7); + color: var(--ion-button-secondary-text); } } &:hover:not(:disabled):not(.button-vue--disabled) { - background-color: var(--ion-color-blue-b7); - border-color: var(--ion-color-blue-b7); + 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-color-main-background); + color: var(--ion-button-secondary-text-hover); } } } &:active:not(:disabled):not(.button-vue--disabled) { - background-color: var(--ion-color-secondary); + background-color: var(--ion-button-secondary-background-active); &:not(.action-item--single) { .button-vue__text, .button-vue__icon svg { - color: var(--ion-color-main-background); + color: var(--ion-button-secondary-text-active); } } } @@ -59,44 +90,44 @@ &.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-color-blue-b7); + background-color: var(--ion-button-primary-background-default); border: none; .button-vue__text, .button-vue__icon svg { - color: var(--ion-color-main-background); + color: var(--ion-button-primary-text); } &:disabled { - background-color: var(--ion-color-cool-grey-c4); - color: var(--ion-color-cool-grey-c2); + 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-color-blue-b4); - border-color: var(--ion-color-blue-b4); + 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-color-blue-b5); - border-color: var(--ion-color-blue-b5); + 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-color-blue-b1); + background-color: var(--ion-button-tertiary-background-default); border: none; .button-vue__text, .button-vue__icon svg { - color: var(--ion-color-secondary); + color: var(--ion-button-tertiary-text); } &:hover { - background-color: var(--ion-color-cool-grey-c2); + background-color: var(--ion-button-tertiary-background-hover); } &:active { - background-color: var(--ion-color-cool-grey-c3); + background-color: var(--ion-button-tertiary-background-active); } } @@ -126,47 +157,47 @@ &.button-vue--text-only { &.button-vue--vue-primary, &.button-vue--vue-error { - background-color: var(--ion-color-blue-b7); - color: var(--ion-color-main-background); + background-color: var(--ion-button-primary-background-default); + color: var(--ion-button-primary-text); &:disabled { - background-color: var(--ion-color-cool-grey-c4); - color: var(--ion-color-cool-grey-c2); + 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-color-blue-b4); - border-color: var(--ion-color-blue-b4); + 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-color-blue-b5); - border-color: var(--ion-color-blue-b5); + 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-color-main-background); - border: 2px solid var(--ion-color-blue-b7); + background-color: var(--ion-button-secondary-background-default); + border: var(--ion-button-secondary-border-default); .button-vue__text { - color: var(--ion-color-blue-b7); + color: var(--ion-button-secondary-text); } &:hover:not(:disabled):not(.button-vue--disabled) { - background-color: var(--ion-color-blue-b7); - border-color: var(--ion-color-blue-b7); + background-color: var(--ion-button-secondary-background-hover); + border-color: var(--ion-button-secondary-background-hover); .button-vue__text { - color: var(--ion-color-main-background); + color: var(--ion-button-secondary-text-hover); } } &:active:not(:disabled):not(.button-vue--disabled) { - background-color: var(--ion-color-secondary); + background-color: var(--ion-button-secondary-background-active); .button-vue__text { - color: var(--ion-color-main-background); + color: var(--ion-button-secondary-text-active); } } } @@ -185,28 +216,28 @@ min-height: 32px; &.button-vue--vue-tertiary { .button-vue__icon span[role=img]>svg { - color: var(--ion-color-blue-b4); + color: var(--ion-button--icon-only-text) } &[class^="files-list__header-"], &.app-navigation-toggle { .button-vue__icon span[role=img]>svg { - color: var(--ion-color-blue-b7); + color: var(--ion-button-tertiary-text); } } &:hover:not(:disabled):not(.button-vue--disabled):not(&.modal-container__close):not(.icon-collapse) { - background-color: var(--ion-color-blue-b4); + background-color: var(--ion-button--icon-only-background-hover); .button-vue__icon span[role=img]>svg { - color: var(--ion-color-main-background); + color: var(--ion-button--icon-only-text-hover); } } &:active:not(:disabled):not(.button-vue--disabled):not(&.modal-container__close):not(.icon-collapse) { - background-color: var(--ion-color-primary); + background-color: var(--ion-button--icon-only-background-active); .button-vue__icon span[role=img]>svg { - color: var(--ion-color-main-background); + color: var(--ion-button--icon-only-text-hover); } } From fc84a76528954c52cfd0d20287270fb4b0fb84ab Mon Sep 17 00:00:00 2001 From: Kai Henseler Date: Mon, 9 Dec 2024 11:03:46 +0100 Subject: [PATCH 3/4] refactor(navigation): make buttons easier to customize Signed-off-by: Kai Henseler --- css/buttons.css | 9 +++++++++ css/navigation.css | 31 ++++++++++++++++++------------- 2 files changed, 27 insertions(+), 13 deletions(-) diff --git a/css/buttons.css b/css/buttons.css index 9f4b5d0..deb1e76 100644 --- a/css/buttons.css +++ b/css/buttons.css @@ -27,6 +27,15 @@ --ion-button--icon-only-background-hover: var(--ion-color-blue-b4); --ion-button--icon-only-background-active: var(--ion-color-blue-b6); --ion-button--icon-only-text-hover: #fff; + + --ion-button-sidebar-background: transparent; + --ion-button-sidebar-background-hover: var(--ion-color-cool-grey-c2); + --ion-button-sidebar-background-active: var(--ion-color-cool-grey-c3); + --ion-button-sidebar-text: var(--ion-color-secondary); + + --ion-button-sidebar--icon-only-background: var(--ion-color-cool-grey-c2); + --ion-button-sidebar--icon-only-background-hover: var(--ion-color-cool-grey-c3); + --ion-button-sidebar--icon-only-text: var(--ion-color-secondary); } #body-user { diff --git a/css/navigation.css b/css/navigation.css index 5f493e2..0c5921a 100644 --- a/css/navigation.css +++ b/css/navigation.css @@ -1,9 +1,14 @@ +:root { + --ion-surface-primary: var(--ion-color-main-background); + --ion-surface-secondary: var(--ion-color-cool-grey-c1); +} + #body-user { .app-navigation__search { display: none; } div[data-cy-files-navigation].app-navigation:has(nav#app-navigation-vue) { - background-color: var(--ion-color-cool-grey-c1); + background-color: var(--ion-surface-secondary); .app-navigation-entry { font-weight: 600; span[role=img]>svg { @@ -12,23 +17,23 @@ } border-radius: var(--border-radius-pill); &.active { - background-color: var(--ion-color-cool-grey-c3) !important; + background-color: var(--ion-button-sidebar-background-active) !important; .app-navigation-entry-link { - color: var(--ion-color-secondary) !important; + color: var(--ion-button-sidebar-text) !important; } } &:hover { - background-color: var(--ion-color-cool-grey-c2); + background-color: var(--ion-button-sidebar-background-hover); } /* fix Storage Quota color after click */ &:focus-within:not(:active) { - background-color: var(--ion-color-cool-grey-c1); + background-color: var(--ion-surface-secondary); } } .app-navigation-entry--opened:has(.app-navigation-entry__children) { - background: var(--ion-color-main-background); + background: var(--ion-surface-primary); border-radius: 8px; .app-navigation-entry__children { padding: 0 8px; @@ -37,7 +42,7 @@ border-radius: 4px; } .app-navigation-entry-wrapper { - background: var(--ion-color-main-background); + background: var(--ion-surface-primary); border-radius: 8px; min-height: 40px; margin: 4px 0; @@ -48,14 +53,14 @@ /* Navigation Toggle Button */ div.app-navigation-toggle-wrapper button { margin: 6px 0; - background-color: var(--ion-color-cool-grey-c2); + background-color: var(--ion-button-sidebar-background); span[role=img]>svg { - color: var(--ion-color-secondary); + color: var(--ion-button-sidebar--icon-only-text); } &:hover { - background-color: var(--ion-color-cool-grey-c3); + background-color: var(--ion-button-sidebar--icon-only-background-hover); span[role=img]>svg { - color: var(--ion-color-secondary); + color: var(--ion-button-sidebar--icon-only-text); } } } @@ -67,12 +72,12 @@ span[role=img]>svg { height: 24px; width: 24px; - color: var(--ion-color-secondary); + color: var(--ion-button-sidebar-text); } &:hover { background-color: transparent; span[role=img]>svg { - color: var(--ion-color-secondary); + color: var(--ion-button-sidebar-text); } } } From 8fb5dacbd98e7a97787e2516b7d13650a76b7563 Mon Sep 17 00:00:00 2001 From: Kai Henseler Date: Mon, 9 Dec 2024 12:04:02 +0100 Subject: [PATCH 4/4] refactor(files): make buttons easier to customize Signed-off-by: Kai Henseler --- css/files.css | 72 +++++++++++++++++++++++++++++++-------------------- 1 file changed, 44 insertions(+), 28 deletions(-) diff --git a/css/files.css b/css/files.css index 5d461cd..54e0244 100644 --- a/css/files.css +++ b/css/files.css @@ -1,3 +1,21 @@ +:root { + --ion-breadcrumb-text: var(--ion-color-secondary); + --ion-breadcrumb-text-hover: var(--ion-color-blue-b4); + --ion-breadcrumb-text-active: var(--ion-color-blue-b5); + --ion-breadcrumb-text-disabled: var(--ion-color-cool-grey-c4); + + --ion-files-list-background-hover: var(--ion-color-blue-b1); + --ion-files-list-icon: var(--ion-color-blue-b4); + + --ion-context-menu-background: var(--color-main-background); + --ion-context-menu-border: var(--ion-color-blue-b4); + --ion-context-menu-item-background-hover: var(--ion-color-blue-b1); + --ion-context-menu-item-background-active: var(--ion-color-blue-b2); + --ion-context-menu-item-background-disabled: var(--ion-context-menu-background); + --ion-context-menu-item-text: var(--ion-color-secondary); + --ion-context-menu-item-text-disabled: var(--ion-color-cool-grey-c4); +} + #body-user { .files-list__filters { display: none; @@ -11,39 +29,39 @@ a, a:hover, a:active, a:disabled, button { padding: 2px 0; font-weight: 400; - color: var(--ion-color-secondary); + color: var(--ion-breadcrumb-text-default); background-color: var(--color-main-background); span.button-vue__text { - color: var(--ion-color-secondary); + color: var(--ion-breadcrumb-text-default); font-weight: 400; &:hover { - color: var(--ion-color-blue-b4); + color: var(--ion-breadcrumb-text-hover); } &:active { - color: var(--ion-color-blue-b5); + color: var(--ion-breadcrumb-text-active); } &:disabled { - color: var(--ion-color-cool-grey-c4) + 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: var(--color-main-background); - color: var(--ion-color-secondary); + background-color: transparent; + color: var(--ion-breadcrumb-text); padding: 2px 0; &:hover { - color: var(--ion-color-blue-b4); + color: var(--ion-breadcrumb-text-hover); background-color: inherit; } &:active { - color: var(--ion-color-blue-b5); + color: var(--ion-breadcrumb-text-active); background-color: inherit; } &:disabled { - color: var(--ion-color-cool-grey-c4); + color: var(--ion-breadcrumb-text-disabled); background-color: inherit; } &:focus { @@ -59,7 +77,7 @@ } .vue-crumb__separator { - color: var(--ion-color-secondary); + color: var(--ion-breadcrumb-text); } } } @@ -67,24 +85,21 @@ div[data-cy-files-list].files-list { .files-list__row { - &:hover { - background-color: var(--ion-color-blue-b1); - } - &.active { - background-color: var(--ion-color-blue-b1); + &:hover ,&.active { + background-color: var(--ion-files-list-background-hover); } .files-list__row-icon { - color: var(--ion-color-blue-b4); + color: var(--ion-files-list-icon); } .files-list__row-actions { .action-items { - color: var(--ion-color-blue-b4); + color: var(--ion-files-list-icon); } .icon-vue { - color: var(--ion-color-blue-b4); + color: var(--ion-files-list-icon); } .material-design-icon{ - color: var(--ion-color-blue-b4); + color: var(--ion-files-list-icon); } } } @@ -96,39 +111,40 @@ } } } - + + /* 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-color-blue-b4); + border: 1px solid var(--ion-context-menu-border); div.v-popper__inner { padding: 2px 12px; - background-color: var(--color-main-background); + background-color: var(--ion-context-menu-background); li.action:has(button.action-button) { &.active { - background-color: var(--ion-color-blue-b1); + background-color: var(--ion-context-menu-item-background-hover); } button.action-button { border-radius: 8px; - color: var(--ion-color-secondary); + color: var(--ion-context-menu-item-text); font-style: normal; font-weight: 600; margin-top: 12px; margin-bottom: 12px; &:active { - background-color: var(--ion-color-blue-b2); + background-color: var(--ion-context-menu-item-background-active); } &:disabled { - color: var(--ion-color-cool-grey-c4); - background-color: var(--color-main-background); + color: var(--ion-context-menu-item-text-disabled); + background-color: var(--ion-context-menu-item-background-disabled); cursor: not-allowed; } }