diff --git a/services/web/frontend/stylesheets/components/footer.scss b/services/web/frontend/stylesheets/components/footer.scss index aef2bfdfb0..7e8ad21687 100644 --- a/services/web/frontend/stylesheets/components/footer.scss +++ b/services/web/frontend/stylesheets/components/footer.scss @@ -3,6 +3,33 @@ // Max width of the sidebar $footer-width-delta: 320px; +@mixin cookie-banner-light { + --cookie-banner-background: var(--bg-light-primary); + --cookie-banner-content: var(--content-primary); + --cookie-banner-link: var(--link-ui); +} + +@mixin cookie-banner-dark { + --cookie-banner-background: var(--bg-dark-secondary); + --cookie-banner-content: var(--content-primary-dark); + --cookie-banner-link: var(--link-ui-dark); +} + +:root { + .cookie-banner { + @include cookie-banner-light; + } + + @include theme('default') { + .ide-redesign-main, + .project-ds-nav-page { + .cookie-banner { + @include cookie-banner-dark; + } + } + } +} + @mixin footer-container-up($bp) { $size: map.get($grid-breakpoints, $bp); @@ -373,9 +400,10 @@ footer.site-footer { left: 0; right: 0; z-index: 100; - color: var(--content-secondary); background: var(--bg-light-secondary); box-shadow: 0 -5px 8px 0 #0000001a; + background-color: var(--cookie-banner-background); + color: var(--cookie-banner-content); .cookie-banner-actions { padding-top: var(--spacing-04); @@ -398,7 +426,7 @@ footer.site-footer { .cookie-banner-content a, .cookie-banner-actions .btn-link { - color: var(--link-ui); + color: var(--cookie-banner-link); } } } diff --git a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss index a3acaad9d1..a6f4206c29 100644 --- a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss +++ b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss @@ -281,7 +281,7 @@ body { > * { @include media-breakpoint-up(md) { - border-left: 1px solid var(--border-divider); + border-left: 1px solid var(--border-divider-themed); } } @@ -299,7 +299,6 @@ body { .cookie-banner { position: static; - background-color: var(--bg-light-primary); // Remove the parts of the shadow that stick out of the sides clip-path: inset(-13px 0 0 0);