ui/app/styles/pages/_settings.scss

.auth-driver {
  height: 100px;
  width: 100px;
  margin: 0 auto;

  &.activedirectory {
    background-image: url('images/providers/activedirectory.svg');
    &.ad-coming-soon {
      &:after {
        content: 'Coming Soon';
        position: absolute;
        bottom: -3px;
        left: 0;
        right: 0;
      }
    }
  }

  &.adfs {
    background-image: url('images/providers/microsoft-adfs.svg');
  }

  &.okta {
    background-image: url('images/providers/okta.svg');
  }

  &.azuread {
    background-image: url('images/providers/azuread.svg');
  }

  &.github {
    background-image: url('images/providers/github.svg');
  }

  &.keycloak {
    background-image: url('images/providers/keycloak.svg');
  }

  &.gitlab {
    background-image: url('images/providers/gitlab.svg');
  }

  &.bitbucket {
    background-image: url('images/providers/bitbucket.svg');
  }

  &.github-for-pipeline {
    background-image: url('images/providers/github-for-pipeline.svg');
  }

  &.local {
    background-image: url('images/logos/provider-local.svg');
  }

  &.openldap {
    background-image: url('images/providers/openldap.svg');
  }

  &.shibboleth {
    background-image: url('images/providers/shibboleth.svg');
  }

  &.ping {
    background-image: url('images/providers/provider-ping.svg');
  }

  &.freeipa {
    background-image: url('images/providers/provider-freeipa.svg');
  }

  &.googleoauth {
    background-image: url('images/providers/provider-google.svg');
  }
}

.advanced-setting {
  border: 1px solid darken($border, 5%);
  background: $body-bg;
  margin: 10px 0;
  padding: 10px;
  position: relative;

  .force-wrap {
    width: calc(100% - 60px);
  }

  p {
    margin: 0;
    @extend .text-small;
    width: calc(100% - 60px);
  }

  .help-block {
    margin: 2.5px 0 5px 0;
  }

  .edit {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50px;
    font-size: 1.5em;
    text-align: center;
    color: $body-bg;

    i {
      position: relative;
      top: calc(50% - 12.5px);
    }
  }
}

.container-json-setting {
  max-height: 50vh;
  overflow-y: scroll;
  margin-bottom: 15px;
}

.grafana {
  background-image: url('images/providers/grafana.svg');
  background-size: 20px;
  width: 20px;
  height: 20px;
}

.kiali {
  background-image: url('images/providers/kiali.svg');
  background-size: 20px;
  width: 20px;
  height: 20px;
}

.jaeger {
  background-image: url('images/providers/jaeger.svg');
  background-size: 20px;
  width: 20px;
  height: 20px;
}

.istio {
  background-image: url('images/providers/istio.svg');
  background-size: 20px;
  width: 20px;
  height: 20px;
}

.prometheus-icon {
  background-image: url('images/providers/prometheus.svg');
  background-size: 20px;
  width: 20px;
  height: 20px;
}

#setting-ui-header-banner,
#setting-ui-footer-banner {
  height: 25px;
  text-align: center;
  width: 100%;
  z-index: 1501;
  line-height: 1.6rem;
}

#setting-ui-header-banner {
  position: fixed;
  top: 0;
}

#setting-ui-footer-banner {
  position: fixed;
  bottom: 0;
}