cetirizine

An experimental matrix client written in reactjs utilizing tailwind and storybook
git clone git://archive.git.mtrnord.blog/MTRNord/cetirizine.git
Log | Files | Refs | README | LICENSE

index.scss (2850B)

      1 @tailwind base;
      2 @tailwind components;
      3 @tailwind utilities;
      4 
      5 :root {
      6   // Colors
      7   --bg-opacity: 1;
      8 
      9   --orange-400: rgb(251 146 60 / var(--bg-opacity));
     10   --orange-500: rgb(249 115 22 / var(--bg-opacity));
     11 
     12   --green-400: rgb(74 222 128 / var(--bg-opacity));
     13   --green-500: rgb(34 197 94 / var(--bg-opacity));
     14 
     15   --red-400: rgb(248 113 113 / var(--bg-opacity));
     16   --red-500: rgb(239 68 68 / var(--bg-opacity));
     17 
     18   --gray-300: rgb(209 213 219 / var(--bg-opacity));
     19   --gray-500: rgb(107 114 128 / var(--bg-opacity));
     20 
     21   --slate-100: rgb(226 232 240 / var(--bg-opacity));
     22   --slate-200: rgb(241 245 249 / var(--bg-opacity));
     23   --slate-500: rgb(100 116 139 / var(--bg-opacity));
     24   --slate-600: rgb(71 85 105 / var(--bg-opacity));
     25   --slate-900: rgb(15 23 42 / var(--bg-opacity));
     26 
     27   --background-color: white;
     28   --background-color-hover: var(--slate-100);
     29   --blockquote-color: var(--slate-100);
     30 
     31   --text-color: black;
     32 
     33   // Shadows
     34   --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
     35   --shadow-colored: 0 1px 3px 0 var(--shadow-color), 0 1px 2px -1px var(--shadow-color);
     36   --box-shadow: var(--ring-offset-shadow, 0 0 #0000),
     37     var(--ring-shadow, 0 0 #0000),
     38     var(--shadow);
     39 
     40   // Rounding
     41   --base-rounding: 0.25rem;
     42 
     43   // Typography
     44   --bold-font: 700;
     45   --medium-font: 500;
     46   --normal-font: 400;
     47   --semibold-font: 600;
     48 
     49   --font-size-base: 1rem;
     50   --font-size-xl: 1.44rem;
     51   --font-size-2xl: 1.2rem;
     52 }
     53 
     54 html {
     55   color-scheme: light dark;
     56 }
     57 
     58 body,
     59 html {
     60   margin: 0;
     61   height: 100%;
     62 }
     63 
     64 a {
     65   --tw-text-opacity: 1;
     66   color: rgb(59 130 246 / var(--tw-text-opacity)) !important;
     67 
     68   &:hover {
     69     --tw-text-opacity: 1;
     70     color: rgb(29 78 216 / var(--tw-text-opacity)) !important;
     71   }
     72 
     73   &:active {
     74     --tw-text-opacity: 1;
     75     color: rgb(29 78 216 / var(--tw-text-opacity)) !important;
     76   }
     77 
     78   &:visited {
     79     --tw-text-opacity: 1;
     80     color: rgb(59 130 246 / var(--tw-text-opacity)) !important;
     81   }
     82 }
     83 
     84 code {
     85   border-radius: var(--base-rounding);
     86   font-weight: var(--normal-font);
     87   color: var(--red-500);
     88   background-color: var(--slate-100);
     89   padding: 0.125rem;
     90 }
     91 
     92 pre {
     93   @apply rounded p-2 bg-slate-200 border-2 border-slate-500 min-w-[28.5rem] whitespace-pre-wrap;
     94 
     95   code {
     96     @apply p-0 bg-transparent text-black;
     97   }
     98 }
     99 
    100 /**
    101   * Blockquote should be light grey with a thick left border
    102   */
    103 blockquote {
    104   border-radius: 0 0.375rem 0.375rem 0;
    105   border-left-width: 4px;
    106   border-color: var(--gray-300);
    107   padding: 1rem;
    108   padding-top: 0.25rem;
    109   padding-bottom: 0px;
    110   background-color: var(--blockquote-color);
    111 }
    112 
    113 body {
    114   background-color: var(--background-color);
    115   color: var(--text-color);
    116 }
    117 
    118 @media (prefers-color-scheme: dark) {
    119   :root {
    120     --background-color: var(--slate-900);
    121     --text-color: white;
    122     --blockquote-color: var(--slate-600);
    123     --background-color-hover: var(--slate-600);
    124   }
    125 }