index.css raw

   1  @import "tailwindcss";
   2  @import "tw-animate-css";
   3  @import "sonner/dist/styles.css";
   4  
   5  @custom-variant dark (&:is(.dark *));
   6  
   7  html,
   8  body {
   9    line-height: 1.5;
  10    font-weight: 400;
  11    color-scheme: light dark;
  12    font-synthesis: none;
  13    text-rendering: optimizeLegibility;
  14    -webkit-font-smoothing: antialiased;
  15    -moz-osx-font-smoothing: grayscale;
  16  }
  17  
  18  @import "./themes/base.css";
  19  @import "./themes/alby.css";
  20  @import "./themes/bitcoin.css";
  21  @import "./themes/nostr.css";
  22  @import "./themes/matrix.css";
  23  @import "./themes/ghibli.css";
  24  @import "./themes/claymorphism.css";
  25  
  26  @import "./themes/index.css";
  27  
  28  @layer base {
  29    [role="dialog"],
  30    [role="alertdialog"] {
  31      max-height: 90vh;
  32      overflow-y: auto;
  33    }
  34  }
  35  
  36  @layer base {
  37    button:not([disabled]),
  38    [role="button"]:not([disabled]) {
  39      cursor: pointer;
  40    }
  41  }
  42  
  43  @layer base {
  44    [role="menuitem"]:not([disabled]),
  45    [data-slot="command-item"],
  46    [data-slot="field"] {
  47      cursor: pointer !important;
  48    }
  49  }
  50  
  51  @keyframes blink {
  52    50% {
  53      opacity: 0;
  54    }
  55  }
  56  
  57  @keyframes flash {
  58    from {
  59      opacity: 0.4;
  60    }
  61    to {
  62      opacity: 1;
  63    }
  64  }
  65  
  66  /* bitcoin-connect styles */
  67  html {
  68    --bc-color-brand: hsl(0 0% 0%); /* use a different brand color in dark mode */
  69    --bc-color-brand-dark: hsl(
  70      0 0% 100%
  71    ); /* use a different brand color in dark mode */
  72    --bc-brand-mix: 100%; /* how much to mix the brand color with default foreground color */
  73  }
  74  
  75  /* https://github.com/tailwindlabs/tailwindcss/discussions/12127 */
  76  .break-anywhere {
  77    overflow-wrap: anywhere;
  78  }
  79  
  80  /* Removes an arrow on the datalist of word suggestions when you are typing a word in the import secret key page.
  81     See https://stackoverflow.com/questions/20937475/remove-datalist-dropdown-arrow-in-chrome */
  82  input[type="text"]::-webkit-calendar-picker-indicator {
  83    display: none !important;
  84  }
  85  
  86  /* used by AppAvatar as fallback for apps without known images  */
  87  .avatar-gradient-0 {
  88    background: linear-gradient(135deg, var(--chart-1), var(--chart-3));
  89  }
  90  .avatar-gradient-1 {
  91    background: linear-gradient(135deg, var(--chart-2), var(--chart-4));
  92  }
  93  .avatar-gradient-2 {
  94    background: linear-gradient(135deg, var(--chart-3), var(--chart-5));
  95  }
  96  .avatar-gradient-3 {
  97    background: linear-gradient(135deg, var(--chart-4), var(--chart-1));
  98  }
  99  .avatar-gradient-4 {
 100    background: linear-gradient(135deg, var(--chart-5), var(--chart-2));
 101  }
 102  .avatar-gradient-5 {
 103    background: linear-gradient(135deg, var(--chart-1), var(--chart-4));
 104  }
 105  .avatar-gradient-6 {
 106    background: linear-gradient(135deg, var(--chart-2), var(--chart-5));
 107  }
 108  .avatar-gradient-7 {
 109    background: linear-gradient(135deg, var(--chart-3), var(--chart-1));
 110  }
 111  .avatar-gradient-8 {
 112    background: linear-gradient(135deg, var(--chart-4), var(--chart-2));
 113  }
 114  .avatar-gradient-9 {
 115    background: linear-gradient(135deg, var(--chart-5), var(--chart-3));
 116  }
 117