Reduce the "Running in emulator mode." of the Firebase Local Emulator and make it smaller and transparent.

css

firebase

投稿日: 2024/03/06

更新日: 2024/07/01

This article is a translation of the following article.

https://noh.ink/articles/P64wnQAgpKv6QNeaQ8iv

When using Firebase Local Emulator, a message Running in emulator mode. Do not use with production credentials. will be displayed to indicate that the emulator is being used.

It becomes very disturbing during development. In particular, on websites with elements such as buttons at the bottom of the page, it becomes difficult to confirm the operation.

However, it's easy to tell that I'm using an emulator, and this in itself is very useful and I don't want to get rid of it. So, I will introduce the measures I am taking.

When you check in the developer tools, you will see the HTML tags as shown below. To modify the layout for the firebase-emulator-warning class.

<p
  class="firebase-emulator-warning"
  style="position: fixed; width: 100%; background-color: rgb(255, 255, 255); border: 0.1em solid rgb(0, 0, 0); color: rgb(181, 0, 0); bottom: 0px; left: 0px; margin: 0px; z-index: 10000; text-align: center;"
>
  Running in emulator mode. Do not use with production credentials.
</p>

Make it semi-transparent and smaller

Source Code

First, here is the full code.

If you are using Next.js, please add the following to src/styles/globals.css.

.firebase-emulator-warning {
  opacity: 0.4;
  pointer-events: none;
  font-size: 0.5rem;
}

Result

It will be displayed like this.
You can also click on the buttons covered in the white area without any problems.

Explanation

opacity specifies the opacity.
0 is transparent and 1 is opaque. This time, it is set to 0.4.

https://developer.mozilla.org/ja/docs/Web/CSS/opacity

By using pointer-events: none, the element itself is excluded from pointer events. As a result, it allows clicking on buttons or other elements that are located beneath the target element. Very convenient.

https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events

font-size: 0.5rem halves the font size.

yosi

Table of Contents

Make it semi-transparent and smaller