ConceptPortal-public/rsconcept/frontend/src/styling/styles.css

/**
 * Module: Custom styling.
 */
@import './constants.css';

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

@layer utilities {
  .font-main {
    font-family: var(--font-main);
  }
  .font-controls {
    font-family: var(--font-ui);
    font-weight: 600;
  }
  .font-math {
    font-family: var(--font-math);
  }
}

@layer components {
  .clr-footer {
    color: var(--clr-app-600);
    background-color: var(--clr-app-100);
  }

  .cc-modal-backdrop {
    opacity: 0.5;
    background-color: var(--clr-app-100);
  }

  .clr-input {
    background-color: var(--clr-app-0);
    &:disabled {
      background-color: var(--clr-app-100);
    }
  }

  .clr-controls,
  .clr-tab,
  .clr-btn-default {
    background-color: var(--clr-app-200);
  }

  .clr-primary,
  .clr-btn-primary:hover,
  .clr-btn-primary:focus-visible {
    @apply transition;
    color: var(--clr-prim-999);
    background-color: var(--clr-prim-200);
  }

  .clr-selected,
  .clr-btn-primary {
    color: var(--clr-app-999);
    background-color: var(--clr-prim-600);
  }

  :is(.clr-disabled, .clr-btn-default, .clr-btn-primary):disabled {
    @apply transition;
    color: var(--clr-app-800);
    background-color: var(--clr-app-200);
  }

  :is(.clr-hover, .clr-tab, .clr-btn-nav, .clr-btn-default):hover:not(:disabled) {
    @apply transition;
    color: var(--clr-app-999);
    background-color: var(--clr-prim-800);
  }

  :is(.clr-outline, .clr-btn-primary, .focus-frame):focus-visible,
  .focus-frame:has(:focus-visible) {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--clr-prim-200);
  }

  .clr-text-primary {
    color: var(--clr-prim-100);
  }

  .clr-text-controls,
  .clr-btn-nav,
  .clr-btn-clear {
    color: var(--clr-app-800);
    background-color: transparent;
    &:disabled {
      color: var(--clr-app-600);
    }
  }

  .clr-text-default,
  input:disabled:not(::placeholder),
  textarea:disabled:not(::placeholder) {
    opacity: 1;
    -webkit-text-fill-color: var(--clr-app-999);
    color: var(--clr-app-999);
  }

  .icon-primary {
    :not([disabled]) > & {
      color: var(--clr-prim-100);
    }
  }

  .icon-red {
    :not([disabled]) > & {
      color: var(--clr-warn-600);
    }
  }

  .icon-green {
    :not([disabled]) > & {
      color: var(--clr-ok-600);
    }
  }

  .inline-icon {
    display: inline-block;
    font-size: 1.25rem;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    transform: translate(0, -0.2rem);
    color: var(--clr-prim-100);
  }

  .cc-tab-tools {
    top: 1.7rem;
    right: 50%;
    padding-top: 0.4rem;
    transform: translate(50%, 0%);
  }

  .cc-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    cursor: default;
    user-select: text;
    white-space: nowrap;
  }

  .cc-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .cc-icons {
    display: flex;
    gap: 0.25rem;
  }

  .cc-fit-content {
    field-sizing: content;
  }

  .cc-scroll-row {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .cc-scroll-y {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
  }

  .cc-blur {
    backdrop-filter: blur(3px);
  }

  .cc-modal-blur {
    opacity: 0.3;
    backdrop-filter: blur(2px);
  }

  .cc-shadow-border {
    @apply shadow-sm shadow-[var(--clr-app-400)];
  }

  .cc-animate-position {
    transition-property: transform top left bottom right margin padding;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--duration-move);
  }

  .cc-fade-in {
    opacity: 1;

    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--duration-fade);

    @starting-style {
      opacity: 0;
    }
  }

  .cc-animate-modal {
    clip-path: inset(0% 0% 0% 0%);
    opacity: 1;

    transition-property: clip-path, opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: var(--duration-modal);

    @starting-style {
      clip-path: inset(50% 50% 50% 50%);
      opacity: 0;
    }
  }
}