dark_theme: Clean up info-style main-view banner.

This commit is contained in:
Karl Stolley
2025-04-07 16:13:37 -05:00
committed by Tim Abbott
parent 8f465c9836
commit 4ccea351f4
3 changed files with 56 additions and 44 deletions

View File

@@ -2694,6 +2694,46 @@
hsl(3deg 57% 33% / 15%), hsl(3deg 57% 33% / 15%),
hsl(3deg 73% 74% / 20%) hsl(3deg 73% 74% / 20%)
); );
--color-info-main-view-banner: light-dark(
hsl(204deg 49% 29%),
hsl(205deg 58% 80%)
);
--color-background-info-main-view-banner: light-dark(
hsl(204deg 58% 92%),
hsl(204deg 100% 12%)
);
--color-border-info-main-view-banner: light-dark(
hsl(204deg 49% 29% / 40%),
hsl(205deg 58% 69% / 40%)
);
--color-info-main-view-banner-close-button: light-dark(
hsl(204deg 49% 29% / 50%),
hsl(205deg 58% 69% / 50%)
);
--color-info-main-view-banner-close-button-hover: light-dark(
hsl(204deg 49% 29%),
hsl(205deg 58% 69%)
);
--color-info-main-view-banner-close-button-active: light-dark(
hsl(204deg 49% 29% / 75%),
hsl(205deg 58% 69% / 75%)
);
--color-info-main-view-banner-action-button: light-dark(
inherit,
hsl(205deg 58% 69%)
);
--color-background-info-main-view-banner-action-button: light-dark(
hsl(204deg 49% 29% / 10%),
hsl(205deg 58% 69% / 10%)
);
--color-background-info-main-view-banner-action-button-hover: light-dark(
hsl(204deg 49% 29% / 12%),
hsl(205deg 58% 69% / 15%)
);
--color-background-info-main-view-banner-action-button-active: light-dark(
hsl(204deg 49% 29% / 15%),
hsl(205deg 58% 69% / 20%)
);
/* Info density update UI */ /* Info density update UI */
--color-info-density-control-border: light-dark( --color-info-density-control-border: light-dark(

View File

@@ -953,34 +953,40 @@
} }
&.info { &.info {
background-color: hsl(204deg 58% 92%);
border-color: hsl(204deg 49% 29% / 40%);
position: relative; position: relative;
color: hsl(204deg 49% 29%); background-color: var(--color-background-info-main-view-banner);
border-color: var(--color-border-info-main-view-banner);
color: var(--color-info-main-view-banner);
.main-view-banner-close-button { .main-view-banner-close-button {
color: hsl(204deg 49% 29% / 50%); color: var(--color-info-main-view-banner-close-button);
&:hover { &:hover {
color: hsl(204deg 49% 29%); color: var(--color-info-main-view-banner-close-button-hover);
} }
&:active { &:active {
color: hsl(204deg 49% 29% / 75%); color: var(--color-info-main-view-banner-close-button-active);
} }
} }
.main-view-banner-action-button, .main-view-banner-action-button,
.upload_banner_cancel_button { .upload_banner_cancel_button {
background-color: hsl(204deg 49% 29% / 10%); background-color: var(
color: inherit; --color-background-info-main-view-banner-action-button
);
color: var(--color-info-main-view-banner-action-button);
&:hover { &:hover {
background-color: hsl(204deg 49% 29% / 12%); background-color: var(
--color-background-info-main-view-banner-action-button-hover
);
} }
&:active { &:active {
background-color: hsl(204deg 49% 29% / 15%); background-color: var(
--color-background-info-main-view-banner-action-button-active
);
} }
} }
} }

View File

@@ -85,40 +85,6 @@
.above_compose_banner_action_link { .above_compose_banner_action_link {
color: hsl(200deg 100% 50%); color: hsl(200deg 100% 50%);
} }
&.info {
background-color: hsl(204deg 100% 12%);
border-color: hsl(205deg 58% 69% / 40%);
position: relative;
color: hsl(205deg 58% 80%);
.main-view-banner-close-button {
color: hsl(205deg 58% 69% / 50%);
&:hover {
color: hsl(205deg 58% 69%);
}
&:active {
color: hsl(205deg 58% 69% / 75%);
}
}
.main-view-banner-action-button,
.upload_banner_cancel_button {
background-color: hsl(205deg 58% 69% / 10%);
border-color: transparent;
color: hsl(205deg 58% 69%);
&:hover {
background-color: hsl(205deg 58% 69% / 15%);
}
&:active {
background-color: hsl(205deg 58% 69% / 20%);
}
}
}
} }
.upload_banner { .upload_banner {