Add a visual indicator for the debug/dev mode

Closes #5257

diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index 0c8713bedd64353a621697ae14a211fe9cd5bb17..4ebe1326f94e41e6851d8579d1a81811b8a24c4c 100644 (file)
--- a/wcfsetup/install/files/acp/style/layout.scss
+++ b/wcfsetup/install/files/acp/style/layout.scss
@@ -74,6 +74,26 @@ html[data-color-scheme="dark"] {
                                right: 0;
                                top: 0;
                        }
+
+                       &.pageHeaderLogo--debug {
+                               img {
+                                       opacity: 0.34;
+                               }
+
+                               > a::before {
+                                       color: #ffa500;
+                                       content: "DEBUG MODE";
+                                       font-weight: 600;
+                                       font-size: 12px;
+                                       position: absolute;
+                                       text-shadow: 1px 1px 5px #000;
+                                       z-index: 1;
+                               }
+
+                               &.pageHeaderLogo--dev > a::before {
+                                       content: "DEV MODE";
+                               }
+                       }
                }
 
                .mainMenu {

diff --git a/wcfsetup/install/files/acp/templates/pageHeaderLogo.tpl b/wcfsetup/install/files/acp/templates/pageHeaderLogo.tpl
index 07cc050ea094ab8804e421f6e353d9ecf483966b..2fddadcd5acda0d08ab748ef95d813d5fe297bcc 100644 (file)
--- a/wcfsetup/install/files/acp/templates/pageHeaderLogo.tpl
+++ b/wcfsetup/install/files/acp/templates/pageHeaderLogo.tpl
@@ -1,4 +1,11 @@
-<div id="pageHeaderLogo" class="pageHeaderLogo">
+<div
+       id="pageHeaderLogo"
+       class="
+               pageHeaderLogo
+               {if ENABLE_DEBUG_MODE} pageHeaderLogo--debug{/if}
+               {if ENABLE_DEVELOPER_TOOLS} pageHeaderLogo--dev{/if}
+       "
+>
        <a href="{link}{/link}">
                <img src="{@$__wcf->getPath()}acp/images/woltlabSuite.png" alt="" width="562" height="80" loading="eager" class="pageHeaderLogoLarge">
                <img src="{@$__wcf->getPath()}acp/images/woltlabSuite-small.png" alt="" width="55" height="30" loading="eager" class="pageHeaderLogoSmall">