services/self-service/src/main/resources/webapp/src/styles.scss

/*!
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

// @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

@import './assets/fonts/Material_Icons/material-icons.css';
@import './assets/fonts/Open_Sans/open-sans.css';

@import '_reset.scss';
@import '_general.scss';
@import '_theme.scss';
@import '_dialogs.scss';

.sans {
  font-family: 'Open Sans', sans-serif !important;
}

.mat-tab-label {
  font-family: 'Open Sans', sans-serif !important;
  color: #455c74;
}

.install-libraries .mat-ink-bar,
.tabs .mat-ink-bar,
.tabs .mat-tab-label {
  width: 50% !important;
}

.mat-ink-bar {
  background-color: #35afd5 !important;
}

.mat-tab-labels .mat-tab-label:focus,
.mat-tab-labels .mat-tab-label:focus {
  background-color: rgba(53, 175, 213, 0.11) !important;
  color: #577289;
}

.mat-tab-header-pagination.mat-tab-header-pagination-after,
.mat-tab-header-pagination.mat-tab-header-pagination-before {
  display: none !important;
}

.mat-drawer-container {
  height: calc(100% - 48px);
}

mat-chip.mat-chip {
  outline: none;
  color: #758ea8;
  font-size: 14px;
  padding: 8px 18px;
}

mat-chip.mat-chip a {
  display: inline-block;
  width: 12px;
  cursor: pointer;
  text-align: right;
  text-decoration: none;
  font-size: 20px;
  vertical-align: middle;
}

mat-chip.mat-chip strong {
  font-size: 10px;
  font-weight: 300;
}

.loader {
  border: 3px solid #f3f3f3;
  border-radius: 50%;
  border-top: 3px solid #35afd5;
  width: 18px;
  height: 18px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  position: relative;
  top: 28px;
  margin-right: 15px;
  float: right;
}

.rotate {
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.status {
  text-transform: capitalize;
  text-align: left;
}

.running,
.starting,
.installed,
.active,
.activating,
.connected {
  color: #49af38;
}

.stopped,
.stopping,
.deactivating,
.not_active,
.disconnecting,
.disconnected {
  color: #f7b500;
}

.creating,
.configuring,
.connecting,
.reconfiguring,
.installing,
.reuploading,
.highlight {
  color: #35afd5;
}

.invalid,
.terminated,
.terminating,
.failed,
.deleting,
.deleted,
.invalid_version,
.invalid_name,
.installation_error{
  color: #f1696e;
}

.error {
  color: #f1696e;
  font-size: 12px;
}

.not-allowed {
  cursor: not-allowed !important;
  user-select: none;
  opacity: 0.6;
  pointer-events: none;
}

.cursor-not-allow{
  cursor: not-allowed !important;
}

.not-active {
  cursor: not-allowed !important;
  opacity: .6;
}

.message {
  padding: 40px 20px;
  text-align: center;
}

.info {
  font-size: 15px;
  font-weight: 300;
  color: #35afd5;
  position: relative;
  .buttons{
    position: absolute;
  }
}

.base-retreat {
  height: 100%;
  max-height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 15px;
  display: inline-block;
}

.sub-nav {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.sub-nav div {
  display: flex;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* TOOLTIPS */
.tooltip-wrap {
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* webkit flicker fix */
  -webkit-font-smoothing: antialiased;
  /* webkit text rendering fix */
}

.tooltip-wrap .tooltip {
  background: rgba(97, 97, 97, 0.9);
  bottom: 100%;
  color: #f3f3f3;
  display: block;
  left: -25px;
  margin-bottom: 5px;
  opacity: 0;
  padding: 5px;
  white-space: pre-wrap;
  word-wrap: break-word;
  border-radius: 2px;
  font-size: 10px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

.tooltip-wrap:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

/* IE can just show/hide with no transition */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
  .tooltip-wrap .tooltip {
    display: none;
  }

  .tooltip-wrap:hover .tooltip {
    display: block;
  }
}

/* Turn off number input spinners */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
}

/* helper classes */
.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right;
}

.pl-20{
  padding-left: 20px;
}

.pr-20{
  padding-right: 20px;
}

.m-top-10 {
  margin-top: 10px;
}

.m-top-15 {
  margin-top: 15px;
}

.m-top-20 {
  margin-top: 20px;
}

.m-top-30 {
  margin-top: 30px;
}

.m-top-40 {
  margin-top: 40px;
}

.m-bott-10 {
  margin-bottom: 10px;
}

.m-bott-20 {
  margin-bottom: 20px;
}

.m-bott-30 {
  margin-bottom: 30px;
}

.m-top-10p {
  margin-top: 10%;
}

.ml-10 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 10px !important;
}

.full-height {
  height: 100%;
}

.ani {
  transition: all .35s ease-in-out;
}

.empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;

  .content {
    text-align: center;
  }
}
#scrolling{
  scrollbar-width: thin;
}

#scrolling::-webkit-scrollbar,
.list-selected mat-chip-list .mat-chip-list-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

#scrolling::-webkit-scrollbar-track,
.list-selected mat-chip-list .mat-chip-list-wrapper::-webkit-scrollbar-track {
  box-shadow: none;
  -webkit-box-shadow: none;
  background-color: rgb(243, 243, 243);
}

#scrolling::-webkit-scrollbar-thumb,
.list-selected mat-chip-list .mat-chip-list-wrapper::-webkit-scrollbar-thumb {
  background-color: #f6fafe;
  background-color: rgba(0, 0, 0, 0.4);
}

.warning-alert {
  position: relative;
  display: flex;
  margin-top: 15px;
  margin-bottom: 20px;
  padding: 15px;
  color: #fff;
  background: #e2747d;
  word-break: break-word;

  span {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 50%;
    background: #e2747d;
    color: #fff;
    box-shadow: 2px 5px 16px 5px rgba(88, 60, 60, 0.6);
  }
}

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.capitalize {
  text-transform: capitalize;
}

.overlay-container {
  #toast-container {
    >div {
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
      border-radius: 2px;
      background-color: #fff;
      padding: 12px 20px;
      overflow: inherit;
      margin: 5px 0 15px;
      font-size: 14px;

      &::before {
        position: absolute;
        left: -15px;
        top: -15px;
        font-family: "Material Icons";
        background-color: #fff;
        width: 30px;
        height: 30px;
        padding: 7px;
        box-sizing: border-box;
        border-radius: 50%;
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
      }

      &.toast-success {
        background-image: none;
        color: #49af38;

        &::before {
          content: "done";
        }
      }

      &.toast-error {
        background-image: none;
        color: #e2747d;

        &::before {
          content: "priority_high";
        }
      }

      &.toast-info {
        background-image: none;
        color: #35afd5;

        &::before {
          content: "priority_high";
        }
      }

      &.toast-warning {
        background-image: none;
        color: #f7b500;

        &::before {
          content: "priority_high";
        }
      }
    }
  }
}

.dialog-max-width {
  margin: 0 auto;
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
}