web/src/styles/app.css

/**
 * 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 url('./tooltip.css');
@import url('./variables.css');

@tailwind base;
@tailwind components;
@tailwind utilities;

.transitions-disabled * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

@layer base {
  *,
  ::before,
  ::after {
    @apply border-shadeL500 dark:border-shadeD300;
  }

  .hoverable {
    @apply dark:hover:bg-shadeD200 hover:bg-shadeL300 hover:cursor-pointer transition-colors;
  }

  .hoverable-strong {
    @apply hover:bg-shadeL500 dark:hover:bg-shadeD1000 hover:cursor-pointer transition-colors;
  }
}

@layer components {
  .debug {
    outline: 2px solid red;
  }

  .noData {
    @apply text-gray-400 text-xl;
  }

  .chip {
    @apply bg-gray-300 dark:bg-shadeD300 dark:text-white rounded-3xl px-3 py-1 whitespace-nowrap;
  }

  .text-color {
    @apply text-black dark:text-white;
  }

  .text-color-gray {
    @apply text-shadeL1000 dark:text-white;
  }

  .card-shadow {
    box-shadow: rgb(145 157 171 / 20%) 0px 0px 2px 0px, rgb(145 158 171 / 12%) 0px 12px 24px -4px;
  }
}

/* width */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  @apply bg-shadeL500;
}

.dark ::-webkit-scrollbar-track {
  @apply bg-shadeD300;
}

/* Handle */
::-webkit-scrollbar-thumb {
  @apply rounded-md bg-shadeL800;
}

.dark ::-webkit-scrollbar-thumb {
  @apply rounded-md bg-shadeD1000;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.dark :-webkit-autofill,
.dark :-webkit-autofill:hover,
.dark :-webkit-autofill:focus {
  color-scheme: dark;
}