config-ui/src/styles/offline.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.

.offline-wrapper {
  width: 100%;
  height: 100%;
  min-height: 400px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  &::before {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    background: #ECE9E6;
    background: -webkit-linear-gradient(to right, #FFFFFF, #ECE9E6);
    background: linear-gradient(to right, #FFFFFF, #ECE9E6);
    transition: all 1.6s ease;
    display: block;
    content: '';
  }

  &.is-online::before {
    background: #DE6262;
    background: -webkit-linear-gradient(to right, #FFB88C, #DE6262);
    background: linear-gradient(to right, #FFB88C, #DE6262);
  }

  .bp3-card {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #f4f4f4;
    border: 2px solid #eeeeee;
    border-radius: 8px;
  }

  &.is-offline {
    .bp3-card {
      background-color: #ffffff;
    }
  }
}

.offline-card-enter {
  transform: scale(0.4);
  transition: opacity 300ms, transform 300ms;
}

.offline-card-enter-active {
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
}

.offline-card-exit {
  transform: scale(0.3);
  transition: opacity 300ms, transform 300ms;
}

.offline-card-exit-active {
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}

.offline-card-os-enter {
  opacity: 0;
  display: inline-block;
  transform: scaleY(-0.75);
  transition: opacity 300ms, transform 300ms;
}

.offline-card-os-enter-active {
  opacity: 1;
  transform: scaleY(0);
  transition: opacity 300ms, transform 300ms;
}

.offline-card-os-exit {
  opacity: 1;
  transform: scaleY(0.25);
  transition: opacity 300ms, transform 300ms;
}

.offline-card-os-exit-active {
  opacity: 0;
  transform: scaleY(-0.5);
  transition: opacity 300ms, transform 300ms;
}

.bp3-popover-target {
  &.offline-continue-tooltip-target {
    width: auto;
  }
}