red-dwarf / src / styles / app.css

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Spectral+SC:wght@500&display=swap');
@import "tailwindcss";

/* @theme {
  --color-gray-50:  oklch(0.984 0.005 220.000);
  --color-gray-100: oklch(0.968 0.010 220.000);
  --color-gray-200: oklch(0.929 0.020 222.000);
  --color-gray-300: oklch(0.869 0.035 220.000);
  --color-gray-400: oklch(0.704 0.060 218.000);
  --color-gray-500: oklch(0.554 0.070 218.000);
  --color-gray-600: oklch(0.446 0.065 218.000);
  --color-gray-700: oklch(0.372 0.060 218.000);
  --color-gray-800: oklch(0.279 0.055 220.000);
  --color-gray-900: oklch(0.208 0.050 222.000);
  --color-gray-950: oklch(0.129 0.050 222.000);
} */

:root {
  --safe-hue: var(--tw-gray-hue, 28)
}

@theme {
  --color-gray-50: oklch(0.984 0.012 var(--safe-hue));
  --color-gray-100: oklch(0.968 0.017 var(--safe-hue));
  --color-gray-200: oklch(0.929 0.025 var(--safe-hue));
  --color-gray-300: oklch(0.869 0.035 var(--safe-hue));
  --color-gray-400: oklch(0.704 0.05 var(--safe-hue));
  --color-gray-500: oklch(0.554 0.06 var(--safe-hue));
  --color-gray-600: oklch(0.446 0.058 var(--safe-hue));
  --color-gray-700: oklch(0.372 0.058 var(--safe-hue));
  --color-gray-800: oklch(0.279 0.055 var(--safe-hue));
  --color-gray-900: oklch(0.208 0.055 var(--safe-hue));
  --color-gray-950: oklch(0.129 0.055 var(--safe-hue));
}

@layer base {
  html {
    color-scheme: light dark;
  }

  * {
    @apply border-gray-200 dark:border-gray-800;
  }

  html,
  body {
    @apply text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-200;
  }

  .using-mouse * {
    outline: none !important;
  }
}

@media (width >= 64rem /* 1024px */) {
  html:not(:has(.disablegutter)),
  body:not(:has(.disablegutter)) {
    scrollbar-gutter: stable both-edges !important;
  }
  html:has(.disablegutter),
  body:has(.disablegutter) {
    scrollbar-width: none;
    overflow-y: hidden;
  }
}

.lightbox:has(+.lightbox-sidebar){
  opacity: 0;
}

.scroll-thin {
  scrollbar-width: thin;
  /*scrollbar-gutter: stable both-edges !important;*/
}

.scroll-none {
  scrollbar-width: none;
}

.dangerousFediContent {
  & a[href]{
    text-decoration: none;
    color: rgb(29, 122, 242);
    word-break: break-all;
  }
}

.font-inter {
  font-family: "Inter", sans-serif;
}
.font-roboto {
  font-family: "Roboto", sans-serif;
}

:root {
  --header-bg-light: color-mix(in srgb, var(--color-white) calc(var(--is-top) * 100%), var(--color-gray-50));
  --header-bg-dark: color-mix(in srgb, var(--color-gray-950) calc(var(--is-top) * 100%), var(--color-gray-900));
}

:root {
  --header-bg: var(--header-bg-light);
}
@media (prefers-color-scheme: dark) {
  :root {
    --header-bg: var(--header-bg-dark);
  }
}

:root {
  --shadow-opacity: calc(1 - var(--is-top));
  --tw-shadow-header: 0 2px 8px hsl(0 0% 0% / calc(var(--shadow-opacity) * 0.15));
}


/* m3 input */
:root {
  --m3input-radius: 6px;
  --m3input-border-width: .0625rem;
  --m3input-font-size: 16px;
  --m3input-transition: 150ms cubic-bezier(.2, .8, .2, 1);
  /* light theme */
  --m3input-bg: var(--color-gray-50);
  --m3input-border-color: var(--color-gray-400);
  --m3input-label-color: var(--color-gray-500);
  --m3input-text-color: var(--color-gray-900);
  --m3input-focus-color: var(--color-gray-600);
}

@media (prefers-color-scheme: dark) {
  :root {
    --m3input-bg: var(--color-gray-950);
    --m3input-border-color: var(--color-gray-700);
    --m3input-label-color: var(--color-gray-400);
    --m3input-text-color: var(--color-gray-50);
    --m3input-focus-color: var(--color-gray-400);
  }
}

/* reset page *//*
html,
body {
  background: var(--m3input-bg);
  margin: 0;
  padding: 1rem;
  color: var(--m3input-text-color);
  font-family: system-ui, sans-serif;
  font-size: var(--m3input-font-size);
}*/

/* base wrapper */
.m3input-field.m3input-label.m3input-border {
  position: relative;
  display: inline-block;
  width: 100%;
  /*max-width: 400px;*/
}

/* size variants */
.m3input-field.size-sm {
  --m3input-h: 40px;
}

.m3input-field.size-md {
  --m3input-h: 48px;
}

.m3input-field.size-lg {
  --m3input-h: 56px;
}

.m3input-field.size-xl {
  --m3input-h: 64px;
}

.m3input-field.m3input-label.m3input-border:not(.size-sm):not(.size-md):not(.size-lg):not(.size-xl) {
  --m3input-h: 48px;
}

/* outlined input */
.m3input-field.m3input-label.m3input-border input {
  width: 100%;
  height: var(--m3input-h);
  border: var(--m3input-border-width) solid var(--m3input-border-color);
  border-radius: var(--m3input-radius);
  background: var(--m3input-bg);
  color: var(--m3input-text-color);
  font-size: var(--m3input-font-size);
  padding: 0 12px;
  box-sizing: border-box;
  outline: none;
  transition: border-color var(--m3input-transition), box-shadow var(--m3input-transition);
}

/* focus ring */
.m3input-field.m3input-label.m3input-border input:focus {
  border-color: var(--m3input-focus-color);
  /*box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color) 20%, transparent);*/
}

/* label */
.m3input-field.m3input-label.m3input-border label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--m3input-bg);
  padding: 0 .25em;
  color: var(--m3input-label-color);
  pointer-events: none;
  transition: all var(--m3input-transition);
}

/* float on focus or when filled */
.m3input-field.m3input-label.m3input-border input:focus+label,
.m3input-field.m3input-label.m3input-border input:not(:placeholder-shown)+label {
  top: 0;
  transform: translateY(-50%) scale(.78);
  left: 0;
  color: var(--m3input-focus-color);
}

/* placeholder trick */
.m3input-field.m3input-label.m3input-border input::placeholder {
  color: transparent;
}