index.css
1@import "tailwindcss";
2@plugin "@tailwindcss/typography";
3
4@theme {
5 --color-paper: #f7f6f2;
6 --color-black: #100f0f;
7 --color-red: #af3029;
8 --color-orange: #bc5215;
9 --color-yellow: #ad8301;
10 --color-green: #66800b;
11 --color-cyan: #24837b;
12 --color-blue: #205ea6;
13 --color-purple: #5e409d;
14 --color-magenta: #a02f6f;
15 --color-bg-2: #f2f0e5;
16 --color-ui: #b7b5ac;
17 --color-ui-2: #6f6e69;
18}
19
20:root {
21 --sheet-width: 90ch;
22 --sheet-position: 2rem;
23
24 --shadow-color: 0deg 0% 0%;
25 --shadow-elevation-low:
26 0.8px 0px 0.8px hsl(var(--shadow-color) / 0.17),
27 1.3px 0px 1.3px -1.7px hsl(var(--shadow-color) / 0.14),
28 3.5px 0px 3.5px -3.3px hsl(var(--shadow-color) / 0.11);
29 --shadow-elevation-medium:
30 0.8px 0px 0.8px hsl(var(--shadow-color) / 0.18),
31 2.3px 0px 2.3px -1.1px hsl(var(--shadow-color) / 0.16),
32 6.7px 0.1px 6.7px -2.2px hsl(var(--shadow-color) / 0.14),
33 17.7px 0.1px 17.7px -3.3px hsl(var(--shadow-color) / 0.11);
34 --shadow-elevation-high:
35 0.8px 0px 0.8px hsl(var(--shadow-color) / 0.15),
36 3.6px 0px 3.6px -0.4px hsl(var(--shadow-color) / 0.14),
37 6.8px 0.1px 6.8px -0.8px hsl(var(--shadow-color) / 0.13),
38 11.6px 0.1px 11.6px -1.3px hsl(var(--shadow-color) / 0.13),
39 19px 0.2px 19px -1.7px hsl(var(--shadow-color) / 0.12),
40 30.2px 0.2px 30.1px -2.1px hsl(var(--shadow-color) / 0.11),
41 46.4px 0.4px 46.3px -2.5px hsl(var(--shadow-color) / 0.1),
42 68.7px 0.6px 68.5px -2.9px hsl(var(--shadow-color) / 0.09),
43 98.2px 0.8px 98px -3.3px hsl(var(--shadow-color) / 0.08);
44}
45
46/* base-ui styles */
47body {
48 position: relative;
49}
50
51.root {
52 isolation: isolate;
53}
54
55.popup {
56 box-sizing: border-box;
57 padding-block: 0.25rem;
58 border-radius: 0.375rem;
59 background-color: var(--color-paper);
60 color: var(--color-black-custom);
61 transform-origin: var(--transform-origin);
62 transition:
63 transform 150ms,
64 opacity 150ms;
65 padding: 0.5rem;
66
67 &[data-starting-style],
68 &[data-ending-style] {
69 opacity: 0;
70 transform: scale(0.9);
71 }
72}
73
74/* root styles */
75#root {
76 position: relative;
77 height: 100vh;
78 width: 100vw;
79 z-index: 0;
80}
81
82[contenteditable="true"] {
83 outline: none;
84}
85
86rtw-waypoint {
87 font-weight: 700;
88}
89
90rtw-waypoint:hover {
91 cursor: pointer;
92}
93
94rtw-waypoint.error {
95 color: var(--color-red);
96}
97
98.react-modal-sheet-container {
99 background: var(--color-paper) !important;
100 color: var(--color-black-custom) !important;
101}
102
103#summary {
104 width: 100%;
105 z-index: 1;
106 height: 100vh;
107 box-sizing: border-box;
108}
109
110#summary > div {
111 z-index: 99999;
112 background: var(--paper);
113}
114
115@media (min-width: calc(2 * 90ch)) {
116 .react-modal-sheet-container {
117 max-width: var(--sheet-width);
118 box-sizing: border-box;
119 box-shadow: var(--shadow-elevation-high);
120 }
121
122 #summary {
123 max-width: var(--sheet-width);
124 }
125}
126
127/* Tiptap overrides */
128.tiptap h1 {
129 font-size: 1.875rem;
130 font-weight: 800;
131 padding-bottom: 0.5rem;
132}
133
134.tiptap h2 {
135 font-size: 1.5rem;
136 font-weight: 800;
137 padding-top: 0.5rem;
138 padding-bottom: 0.25rem;
139}
140
141.tiptap h3 {
142 font-size: 1.25rem;
143 font-weight: 700;
144 padding-top: 0.5rem;
145 padding-bottom: 0.25rem;
146}
147
148.tiptap h4 {
149 font-size: 1.125rem;
150 font-weight: 700;
151 padding-top: 0.5rem;
152 padding-bottom: 0.25rem;
153}
154
155.tiptap p {
156 padding-top: 0.5rem;
157 padding-bottom: 0.5rem;
158}
159
160.tiptap ul,
161.tiptap ol {
162 line-height: 1.25rem;
163 padding-left: 1.5rem;
164}
165
166.tiptap blockquote {
167 margin: 0.5rem 0.625rem 0.5rem 0.625rem;
168 padding: 0.5rem 0.625rem 0.5rem 0.625rem;
169 border-left: 3px solid var(--color-blue);
170}
171
172.tiptap blockquote:has(+ p) {
173 margin-bottom: 0;
174 padding-bottom: 0;
175}
176
177.tiptap ul li {
178 list-style-type: circle;
179 list-style-position: outside;
180}
181
182.tiptap ol li {
183 list-style-type: decimal;
184 list-style-position: outside;
185}
186
187.tiptap li > p {
188 margin: 0;
189 padding: 0;
190}
191
192.tiptap ol li,
193.tiptap ul li {
194 margin-bottom: 0.25rem;
195}
196
197.tiptap ol li:last-of-type,
198.tiptap ul li:last-of-type {
199 margin-bottom: 0.5rem;
200}
201
202.tiptap a {
203 color: var(--color-blue);
204 text-decoration: underline dotted;
205 cursor: pointer;
206}
207
208.tiptap p:has(+ ul) {
209 margin-bottom: 0;
210}
211
212.tiptap p + ul {
213 margin: 0;
214}
