diff --git a/shell/assets/brand/suse/banner.svg b/shell/assets/brand/suse/banner.svg new file mode 100644 index 00000000000..f5addf55823 --- /dev/null +++ b/shell/assets/brand/suse/banner.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/shell/assets/brand/suse/dark/banner.svg b/shell/assets/brand/suse/dark/banner.svg new file mode 100644 index 00000000000..abfedc4dfc1 --- /dev/null +++ b/shell/assets/brand/suse/dark/banner.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/shell/assets/brand/suse/metadata.json b/shell/assets/brand/suse/metadata.json index 50613f4e074..1d36ddd7405 100644 --- a/shell/assets/brand/suse/metadata.json +++ b/shell/assets/brand/suse/metadata.json @@ -1,3 +1,7 @@ { - "hasStylesheet": "true" + "hasStylesheet": "true", + "banner": { + "bannerClass": "suse-banner-graphic", + "textAlign": "left" + } } \ No newline at end of file diff --git a/shell/assets/styles/themes/_suse.scss b/shell/assets/styles/themes/_suse.scss index 6d1debb890b..911a93e6d08 100644 --- a/shell/assets/styles/themes/_suse.scss +++ b/shell/assets/styles/themes/_suse.scss @@ -81,4 +81,21 @@ --toggle-off-bg: #{$grey-70}; --sortable-table-selected-bg: #3f4350; } + + // SUSE Theme uses a smaller banner graphic + .suse-banner-graphic { + height: 160px; + + > img { + object-position: right; + } + } +} + +// Ensure that with a small window size, the banner centers, so that the text does not overlay +// directly on the heavier part of the graphic +@media (max-width: 860px) { + .suse .suse-banner-graphic > img { + object-position: center; + } } diff --git a/shell/components/BannerGraphic.vue b/shell/components/BannerGraphic.vue index 3a74c11ad6e..6b95a5b3cdd 100644 --- a/shell/components/BannerGraphic.vue +++ b/shell/components/BannerGraphic.vue @@ -1,6 +1,9 @@ @@ -28,9 +37,12 @@ export default {