👁️
aviva.gay
1@import "tailwindcss";
2
3/**
4 * Keyrune set symbol font
5 * https://github.com/andrewgioia/keyrune
6 * Font licensed under SIL OFL 1.1
7 */
8@font-face {
9 font-family: "Keyrune";
10 src: url("/fonts/keyrune/keyrune.woff2") format("woff2");
11 font-weight: normal;
12 font-style: normal;
13 font-display: swap;
14}
15
16@theme {
17 /* MTG rarity colors (from Keyrune) */
18 --color-rarity-common: #1a1718;
19 --color-rarity-uncommon: #707883;
20 --color-rarity-rare: #a58e4a;
21 --color-rarity-mythic: #bf4427;
22 --color-rarity-timeshifted: #652978;
23}
24
25@custom-variant dark (&:where(.dark, .dark *));
26
27html {
28 @apply bg-white dark:bg-slate-900;
29}
30
31body {
32 @apply m-0 bg-white dark:bg-slate-900;
33 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
34 "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
35 sans-serif;
36 -webkit-font-smoothing: antialiased;
37 -moz-osx-font-smoothing: grayscale;
38}
39
40code {
41 font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
42 monospace;
43}
44
45/* Dark mode scrollbar styling */
46.dark {
47 /* Firefox */
48 scrollbar-color: var(--color-gray-600) var(--color-gray-800);
49}
50
51.dark ::-webkit-scrollbar {
52 width: 12px;
53 height: 12px;
54}
55
56.dark ::-webkit-scrollbar-track {
57 background: var(--color-gray-800);
58}
59
60.dark ::-webkit-scrollbar-thumb {
61 background: var(--color-gray-600);
62 border-radius: 6px;
63 border: 2px solid var(--color-gray-800);
64}
65
66.dark ::-webkit-scrollbar-thumb:hover {
67 background: var(--color-gray-500);
68}
69
70/* Shimmer animation for loading indicator */
71@keyframes shimmer {
72 0%, 100% {
73 transform: translateX(-100%);
74 }
75 50% {
76 transform: translateX(100%);
77 }
78}
79
80/* ProseMirror editor styles */
81.prosemirror-editor .ProseMirror {
82 outline: none;
83 white-space: pre-wrap;
84 word-wrap: break-word;
85}
86
87.prosemirror-editor .ProseMirror p.is-editor-empty:first-child::before {
88 content: attr(data-placeholder);
89 float: left;
90 color: var(--color-gray-400);
91 pointer-events: none;
92 height: 0;
93}
94
95.dark .prosemirror-editor .ProseMirror p.is-editor-empty:first-child::before {
96 color: var(--color-gray-500);
97}
98
99/* Empty editor placeholder using data attribute */
100.prosemirror-editor .ProseMirror:has(> p:only-child:empty)::before {
101 content: attr(data-placeholder);
102 color: var(--color-gray-400);
103 pointer-events: none;
104 position: absolute;
105}
106
107.dark .prosemirror-editor .ProseMirror:has(> p:only-child:empty)::before {
108 color: var(--color-gray-500);
109}