wiki-js/client/scss/components/v-dialog.scss

.dialog-header {
  background-color: mc('blue', '700');
  background-image: radial-gradient(ellipse at top, mc('blue', '500'), mc('blue', '700')),
                    radial-gradient(ellipse at bottom, mc('blue', '800'), mc('blue', '700'));
  height: 60px;
  color: #FFF;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  font-size: 1.2rem;

  &.is-red {
    background-color: mc('red', '700');
    background-image: radial-gradient(ellipse at top, mc('red', '500'), mc('red', '700')),
                      radial-gradient(ellipse at bottom, mc('red', '800'), mc('red', '700'));
  }

  &.is-orange {
    background-color: mc('orange', '700');
    background-image: radial-gradient(ellipse at top, mc('orange', '600'), mc('orange', '800')),
                      radial-gradient(ellipse at bottom, mc('orange', '900'), mc('orange', '800'));
  }

  &.is-indigo {
    background-color: mc('indigo', '700');
    background-image: radial-gradient(ellipse at top, mc('indigo', '500'), mc('indigo', '700')),
                      radial-gradient(ellipse at bottom, mc('indigo', '800'), mc('indigo', '700'));
  }

  &.is-dark {
    background-color: mc('grey', '900');
    background-image: radial-gradient(ellipse at top, mc('grey', '800'), mc('grey', '900')),
                      radial-gradient(ellipse at bottom, mc('grey', '800'), mc('grey', '900'));
  }

  &.is-teal {
    background-color: mc('teal', '700');
    background-image: radial-gradient(ellipse at top, mc('teal', '500'), mc('teal', '700')),
                      radial-gradient(ellipse at bottom, mc('teal', '800'), mc('teal', '700'));
  }
}

.v-dialog--fullscreen {
  @include until($tablet) {
    padding-top: 56px;
  }
}