diff --git a/frontend/src/assets/style.css b/frontend/src/assets/style.css index 18bd2c44..30b8d035 100644 --- a/frontend/src/assets/style.css +++ b/frontend/src/assets/style.css @@ -1323,13 +1323,33 @@ td.actions .btn + .btn { gap: 0.75rem; margin-top: 0.4rem; } +/* A branding preview has to show a logo whose colour we do not control. The + shipped GE mark is fill="white" because it lives on the dark sidebar, so on a + plain white tile it rendered white-on-white and read as a failed load. A + checker ground makes any logo visible - light, dark or transparent - and is + the usual convention for previewing artwork with alpha. */ .map-thumb { height: 40px; + min-width: 40px; border: 1px solid var(--border); border-radius: 4px; - background: #fff; + /* MID-TONE, not white and not near-white. The tile has to show artwork whose + colour we do not control: the shipped GE mark is fill="white" for the dark + sidebar, the monogram is fill="black". A light ground hides the first, a + dark ground hides the second, so the checker sits either side of mid grey + and both read against it. */ + background-color: #9aa1ad; + background-image: + linear-gradient(45deg, #6f7783 25%, transparent 25%, transparent 75%, #6f7783 75%), + linear-gradient(45deg, #6f7783 25%, transparent 25%, transparent 75%, #6f7783 75%); + background-size: 12px 12px; + background-position: 0 0, 6px 6px; + padding: 2px; +} +.map-thumb-dark { + background-color: #222; + background-image: none; } -.map-thumb-dark { background: #222; } .settings-success { margin-top: 1rem; padding: 0.75rem; diff --git a/frontend/src/views/settings/BrandingSettings.vue b/frontend/src/views/settings/BrandingSettings.vue index bf455bc2..dcb6294b 100644 --- a/frontend/src/views/settings/BrandingSettings.vue +++ b/frontend/src/views/settings/BrandingSettings.vue @@ -24,7 +24,7 @@ >
- +
{{ logo.hint }} @@ -132,6 +132,12 @@