IONOS(theming): add special rule for dashboard buttons#209
IONOS(theming): add special rule for dashboard buttons#209
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds specific CSS rules for dashboard buttons to ensure proper styling with !important flags when buttons appear within the dashboard context.
Changes:
- Adds dashboard-specific hover states for secondary buttons
- Adds dashboard-specific background color rules for primary buttons
- Maintains existing button styling rules while adding more specific selectors
| &:hover:not(:disabled):not(.button-vue--disabled) { | ||
| background-color: var(--ion-button-secondary-background-hover)!important; | ||
| background-color: var(--ion-button-secondary-background-hover); | ||
| border-color: var(--ion-button-secondary-background-hover); | ||
| } | ||
|
|
||
| #app-dashboard &:hover:not(:disabled):not(.button-vue--disabled) { | ||
| background-color: var(--ion-button-secondary-background-hover) !important; | ||
| border-color: var(--ion-button-secondary-background-hover); | ||
| color: var(--ion-button-secondary-text-hover); |
There was a problem hiding this comment.
The dashboard-specific rule at line 42 duplicates the hover state definition and adds !important flags. This creates redundancy where the same properties are defined twice with slightly different specificity. Consider consolidating these rules or documenting why the dashboard context requires !important while the general case does not.
| &.button-vue--vue-primary:not(.unified-search-modal__header *), &.button-vue--vue-error:not(.unified-search-modal__header *), | ||
| /* ensure primary type styling of "new" button */ | ||
| &.action-item__menutoggle:not(.unified-search-modal__header *), &.files-list__header-upload-button--disabled { | ||
| background-color: var(--ion-button-primary-background-default)!important; | ||
| background-color: var(--ion-button-primary-background-default); | ||
| } | ||
|
|
||
| #app-dashboard &.action-item__menutoggle:not(.unified-search-modal__header *), #app-dashboard &.files-list__header-upload-button--disabled { | ||
| background-color: var(--ion-button-primary-background-default) !important; | ||
| } | ||
|
|
||
| &.button-vue--vue-primary:not(.unified-search-modal__header *), &.button-vue--vue-error:not(.unified-search-modal__header *), | ||
| &.action-item__menutoggle:not(.unified-search-modal__header *), &.files-list__header-upload-button--disabled { |
There was a problem hiding this comment.
Lines 82-84 repeat the same selector list as lines 72-74, creating rule fragmentation. The background-color and border properties for the same selectors are now defined in separate rule blocks, making the code harder to maintain. Consider grouping related properties within the same rule block unless there is a specific cascade requirement that prevents this.
| &.button-vue--vue-primary:not(.unified-search-modal__header *), &.button-vue--vue-error:not(.unified-search-modal__header *), | |
| /* ensure primary type styling of "new" button */ | |
| &.action-item__menutoggle:not(.unified-search-modal__header *), &.files-list__header-upload-button--disabled { | |
| background-color: var(--ion-button-primary-background-default)!important; | |
| background-color: var(--ion-button-primary-background-default); | |
| } | |
| #app-dashboard &.action-item__menutoggle:not(.unified-search-modal__header *), #app-dashboard &.files-list__header-upload-button--disabled { | |
| background-color: var(--ion-button-primary-background-default) !important; | |
| } | |
| &.button-vue--vue-primary:not(.unified-search-modal__header *), &.button-vue--vue-error:not(.unified-search-modal__header *), | |
| &.action-item__menutoggle:not(.unified-search-modal__header *), &.files-list__header-upload-button--disabled { | |
| #app-dashboard &.action-item__menutoggle:not(.unified-search-modal__header *), #app-dashboard &.files-list__header-upload-button--disabled { | |
| background-color: var(--ion-button-primary-background-default) !important; | |
| } | |
| &.button-vue--vue-primary:not(.unified-search-modal__header *), &.button-vue--vue-error:not(.unified-search-modal__header *), | |
| /* ensure primary type styling of "new" button */ | |
| &.action-item__menutoggle:not(.unified-search-modal__header *), &.files-list__header-upload-button--disabled { | |
| background-color: var(--ion-button-primary-background-default); |
| /* ensure primary type styling of "new" button */ | ||
| &.action-item__menutoggle:not(.unified-search-modal__header *), &.files-list__header-upload-button--disabled { | ||
| background-color: var(--ion-button-primary-background-default)!important; | ||
| background-color: var(--ion-button-primary-background-default); |
There was a problem hiding this comment.
| background-color: var(--ion-button-primary-background-default); | |
| background-color: var(--ion-button-primary-background-default); |
I think only this is needed for the ticket. And the rest is probably an add-on.
There was a problem hiding this comment.
The #app-dashboard selector is specificly for the dashboard because the buttons there already have an !important by defautl.
But having the important causes problems eg for the copy/move dialog buttons. So i moved the part for the dashboard to another selector very similar selector WITH !important. So its done to make sure the dashboard buttons dont break again by fixing this ticket
to work again nextclouds !important rule without destroying other buttons Ref: cdb0f4f Signed-off-by: Kai Henseler <kai.henseler@strato.de>
bromiesTM
force-pushed
the
kh/dev/fix-move-dialog-button
branch
from
3c1c31a to
ac7c618
Compare
No description provided.