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-app,
  .clr-btn-nav {
    background-color: var(--cl-bg-100);
    .dark & {
      background-color: var(--cd-bg-100);
    }
  }

  .clr-footer {
    color: var(--cl-fg-60);
    background-color: var(--cl-bg-100);
    .dark & {
      color: var(--cd-fg-60);
      background-color: var(--cd-bg-100);
    }
  }

  .cc-modal-backdrop {
    opacity: 0.5;
    background-color: var(--cl-bg-100);
    .dark & {
      background-color: var(--cd-bg-100);
    }
  }

  .clr-input {
    background-color: var(--cl-bg-120);
    &:disabled {
      background-color: var(--cl-bg-100);
    }
    .dark & {
      background-color: var(--cd-bg-120);
      &:disabled {
        background-color: var(--cd-bg-100);
      }
    }
  }

  .clr-controls,
  .clr-tab,
  .clr-btn-default {
    background-color: var(--cl-bg-80);
    .dark & {
      background-color: var(--cd-bg-80);
    }
  }

  .clr-primary,
  .clr-btn-primary:hover,
  .clr-btn-primary:focus-visible {
    @apply transition;
    color: var(--cl-prim-fg-100);
    background-color: var(--cl-prim-bg-100);
    .dark & {
      color: var(--cd-prim-fg-100);
      background-color: var(--cd-prim-bg-100);
    }
  }

  .clr-selected,
  .clr-btn-primary {
    color: var(--cl-fg-100);
    background-color: var(--cl-prim-bg-80);
    .dark & {
      color: var(--cd-fg-100);
      background-color: var(--cd-prim-bg-80);
    }
  }

  :is(.clr-disabled, .clr-btn-default, .clr-btn-primary):disabled {
    @apply transition;
    color: var(--cl-fg-80);
    background-color: var(--cl-bg-60);
    .dark & {
      color: var(--cd-fg-80);
      background-color: var(--cd-bg-60);
    }
  }

  :is(.clr-hover, .clr-tab, .clr-btn-nav, .clr-btn-default):hover:not(:disabled) {
    @apply transition;
    color: var(--cl-fg-100);
    background-color: var(--cl-prim-bg-60);
    .dark & {
      color: var(--cd-fg-100);
      background-color: var(--cd-prim-bg-60);
    }
  }

  :is(.clr-outline, .clr-btn-primary, .focus-frame):focus-visible,
  .focus-frame:has(:focus-visible) {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--cl-prim-bg-100);
    .dark & {
      outline-color: var(--cd-prim-bg-100);
    }
  }

  .clr-text-primary,
  .clr-text-url {
    color: var(--cl-prim-fg-80);
    .dark & {
      color: var(--cd-prim-fg-80);
    }
  }

  .clr-text-controls,
  .clr-btn-nav,
  .clr-btn-clear {
    color: var(--cl-fg-80);
    background-color: transparent;
    &:disabled {
      color: var(--cl-fg-60);
    }
    .dark & {
      color: var(--cd-fg-80);
      &:disabled {
        color: var(--cd-fg-60);
      }
    }
  }

  .clr-warning {
    background-color: var(--cl-red-bg-100);
    .dark & {
      background-color: var(--cd-red-bg-100);
    }
  }

  .clr-text-default,
  input:disabled:not(::placeholder),
  textarea:disabled:not(::placeholder) {
    opacity: 1;
    -webkit-text-fill-color: var(--cl-fg-100);
    color: var(--cl-fg-100);
    .dark & {
      opacity: 1;
      -webkit-text-fill-color: var(--cd-fg-100);
      color: var(--cd-fg-100);
    }
  }

  .clr-text-red {
    color: var(--cl-red-fg-100);
    .dark & {
      color: var(--cd-red-fg-100);
    }
  }

  .clr-text-green {
    color: var(--cl-green-fg-100);
    .dark & {
      color: var(--cd-green-fg-100);
    }
  }

  .icon-primary {
    :not([disabled]) > & {
      @apply clr-text-primary;
    }
  }

  .icon-red {
    :not([disabled]) > & {
      @apply clr-text-red;
    }
  }

  .icon-green {
    :not([disabled]) > & {
      @apply clr-text-green;
    }
  }

  .inline-icon {
    display: inline-block;
    font-size: 1.25rem;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    transform: translate(0, -0.2rem);
    @apply clr-text-primary;
  }

  .cc-tab-tools {
    @apply top-[1.7rem] pt-[0.4rem] pb-1 right-1/2 translate-x-1/2;
  }

  .cc-label {
    @apply text-sm font-medium cursor-default select-text whitespace-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(--cl-bg-40)] dark:shadow-[var(--cd-bg-40)];
  }

  .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;
    }
  }
}