Created
November 18, 2025 08:58
-
-
Save joaoqalves/44bf7112c6733725b878089bba7223aa to your computer and use it in GitHub Desktop.
Prevent confusion between local and production versions with a red bar saying "LOCAL DEV"
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ==UserStyle== | |
| @name Localhost dev bar | |
| @namespace joaoqalves | |
| @version 1.0.0 | |
| @description Show a fixed "LOCAL DEV" bar on localhost | |
| @author João Alves | |
| ==/UserStyle== */ | |
| @-moz-document url-prefix("http://localhost"), url-prefix("https://localhost"), url-prefix("https://dev.") { | |
| /* Add space so the bar doesn't cover the top of the page */ | |
| body { | |
| margin-top: 28px !important; | |
| } | |
| /* Fixed bar at the top */ | |
| html::before { | |
| content: "LOCAL DEV"; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 28px; | |
| line-height: 28px; | |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| font-size: 12px; | |
| font-weight: 700; | |
| text-align: center; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| background: #ff0000; | |
| color: #FFFFFF; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.25); | |
| z-index: 50000; /* above almost everything */ | |
| pointer-events: none; /* don't block clicks */ | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment