popup.css

:root {
  --notion-background-color: rgb(251, 251, 250);
  --notion-hover-color: rgba(55, 53, 47, 0.08);
  --notion-active-color: rgba(55, 53, 47, 0.16);
  --notion-font-color: rgba(55, 53, 47, 0.5);
  --notion-font-color-dark: rgba(55, 53, 47, 0.65);
}

body {
  min-height: auto;
}

/* Restyles for most clickable element */
#quieter,
#louder {
  background-color: var(--notion-background-color);
}
.email-input,
.email-button {
  background-color: white;
}

#quieter,
#louder,
.email-input,
.email-button {
  border: 0;
  border-radius: 5px;
  color: var(--notion-font-color);
  cursor: pointer;
}

#quieter:hover,
#louder:hover,
.email-label:hover,
.email-input:hover,
.email-button:hover,
.email-input:hover ~ .email-button {
  background: var(--notion-hover-color);
}

#quieter:active,
#louder:active,
.email-input:active,
.email-button:active {
  background: var(--notion-active-color);
}

::placeholder {
  color: var(--notion-font-color);
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder {
  color: var(--notion-font-color);
}

::-ms-input-placeholder {
  color: var(--notion-font-color);
}

/* END restyles */

.volume-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  background: var(--notion-background-color);
}

.volume-controls > * {
  margin: 0 5px;
}

#icon {
  padding: 4px;
}

#level-container {
  display: flex;
  justify-content: center;
  min-width: 80px;
  border-radius: 5px;
}

#level {
  font-size: 48px;
  align-items: center;
}

#level-decorator {
  font-size: 16px;
  font-weight: 300;
  padding: 8px 0;
  margin-left: -2px;
  align-self: flex-end;
}

.email-container {
  background-color: white;
  padding: 8px;
  border-top: 2px dashed var(--notion-active-color);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.email-input-container {
  display: flex;
  font-size: 14px;
  align-items: stretch;
}

.email-container > p {
  font-size: 9px;
  margin-top: 2px;
  color: var(--notion-font-color);
}

.email-label {
  display: flex;
  align-items: center;
  padding: 6px 8px 7px;
  margin-right: 8px;
  border-radius: 5px;

  color: var(--notion-font-color-dark);
  cursor: default;
}

.email-label > img {
  margin-right: 8px;
}

.email-input {
  min-height: 34px;
  min-width: 256px;
  width: 100%;
  padding: 6px 8px 7px;
  outline: white;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.email-button {
  padding: 6px 8px 7px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Email input validation */
.valid.email-input {
  margin: -1px 0 -1px -1px;
  border-top: 1px solid #66ff75;
  border-bottom: 1px solid #66ff75;
  border-left: 1px solid #66ff75;
}

.valid.email-input ~ .email-button {
  margin: -1px 0;
  border-top: 1px solid #66ff75;
  border-bottom: 1px solid #66ff75;
  border-right: 1px solid #66ff75;
}

.invalid.email-input {
  margin: -1px 0 -1px -1px;
  border-top: 1px solid #ff6666;
  border-bottom: 1px solid #ff6666;
  border-left: 1px solid #ff6666;
}

.invalid.email-input ~ .email-button {
  margin: -1px 0;
  border-top: 1px solid #ff6666;
  border-bottom: 1px solid #ff6666;
  border-right: 1px solid #ff6666;
}
/* END Email input validation*/

.email-input:focus:not(:active) {
  background: white;
  box-shadow: rgb(15 15 15 / 5%) 0px 0px 0px 1px,
    rgb(15 15 15 / 10%) 0px 3px 6px, rgb(15 15 15 / 20%) 0px 9px 24px;
}

.email-input:focus:not(:active) + .email-button {
  background: white;
  box-shadow: rgb(15 15 15 / 5%) 0px 0px 0px 1px,
    rgb(15 15 15 / 10%) 0px 3px 6px, rgb(15 15 15 / 20%) 0px 9px 24px;
}