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);
  }
  .font-math2 {
    font-family: var(--font-math2);
  }
}

@layer components {
  :is(
      .clr-border,
      .border,
      .border-x,
      .border-y,
      .border-b,
      .border-t,
      .border-l,
      .border-r,
      .border-2,
      .border-x-2,
      .border-y-2,
      .border-b-2,
      .border-t-2,
      .border-l-2,
      .border-r-2,
      .divide-x,
      .divide-y,
      .divide-x-2,
      .divide-y-2
    ) {
    border-color: var(--cl-bg-40);
    @apply divide-inherit;
    .dark & {
      border-color: var(--cd-bg-40);
    }
  }

  :is(.clr-app, .clr-footer, .cc-modal-backdrop, .clr-btn-nav, .clr-input:disabled) {
    background-color: var(--cl-bg-100);
    .dark & {
      background-color: var(--cd-bg-100);
    }
  }

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

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

  :is(.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);
    }
  }

  :is(.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);
    }
  }

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

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

  :is(.clr-text-controls, .clr-btn-nav, .clr-btn-clear) {
    color: var(--cl-fg-80);
    &: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 {
    color: var(--cl-fg-100);
    .dark & {
      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-modal-blur {
    opacity: 0.3;
    backdrop-filter: blur(2px);
  }

  .cc-modal-backdrop {
    opacity: 0.5;
  }

  .cc-label {
    @apply text-sm font-medium cursor-default select-text whitespace-nowrap;
  }

  .cc-column {
    @apply flex flex-col gap-3;
  }

  .cc-icons {
    @apply flex gap-1;
  }

  .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-shadow-border {
    @apply shadow-sm shadow-[var(--cl-bg-40)] dark:shadow-[var(--cd-bg-40)];
  }
}