1@import "frappe-ui/style.css";
2
3@tailwind base;
4@tailwind components;
5@tailwind utilities;
6
7@layer components {
8 .prose-f {
9 @apply break-normal max-w-none prose prose-code:break-all prose-code:whitespace-pre-wrap prose-img:border prose-img:rounded-6 prose-sm;
10 }
11 .prose-f * {
12 unicode-bidi: plaintext;
13 }
14 .prose-f:not(.not-prose):not(.not-prose *) pre {
15 background-color: var(--surface-gray-2);
16 color: var(--ink-gray-9);
17 }
18 /* Editor content carries both prose systems: prose-f underlines links via
19 text-decoration, prose-v3 via border-bottom. Keep only the prose-v3 line. */
20 .prose-f.prose-v3 a {
21 text-decoration: none;
22 }
23}
24
25/* The caption field, hidden by its stable data attribute - the placeholder
26 text it used to be keyed on has changed twice. */
27.tiptap [data-media-text-field] {
28 display: none !important;
29}
30
31html,
32body {
33 color: var(--ink-gray-9);
34 background-color: var(--surface-base);
35}
36
37:root {
38 color-scheme: light;
39}
40
41[data-theme="dark"] {
42 color-scheme: dark;
43}
44
45/* Dark mode shadows */
46[data-theme="dark"] .shadow-sm,
47[data-theme="dark"] .hover\:shadow-sm:hover,
48[data-theme="dark"] .focus\:shadow-sm:focus {
49 box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
50 0 1px 2px 0 rgba(0, 0, 0, 0.55);
51}
52[data-theme="dark"] .shadow,
53[data-theme="dark"] .hover\:shadow:hover,
54[data-theme="dark"] .focus\:shadow:focus {
55 box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
56 0 2px 4px 0 rgba(0, 0, 0, 0.6);
57}
58[data-theme="dark"] .shadow-md,
59[data-theme="dark"] .hover\:shadow-md:hover,
60[data-theme="dark"] .focus\:shadow-md:focus {
61 box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.13),
62 0 4px 10px -2px rgba(0, 0, 0, 0.65);
63}
64[data-theme="dark"] .shadow-lg,
65[data-theme="dark"] .hover\:shadow-lg:hover,
66[data-theme="dark"] .focus\:shadow-lg:focus {
67 box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14),
68 0 10px 24px -6px rgba(0, 0, 0, 0.7);
69}
70[data-theme="dark"] .shadow-xl,
71[data-theme="dark"] .hover\:shadow-xl:hover,
72[data-theme="dark"] .focus\:shadow-xl:focus {
73 box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14),
74 0 16px 32px -8px rgba(0, 0, 0, 0.75);
75}
76[data-theme="dark"] .shadow-2xl,
77[data-theme="dark"] .hover\:shadow-2xl:hover,
78[data-theme="dark"] .focus\:shadow-2xl:focus {
79 box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
80 0 24px 48px -12px rgba(0, 0, 0, 0.8);
81}
82[data-theme="dark"] .shadow-inner {
83 box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.55);
84}
85
86[data-theme="dark"] hr {
87 border-color: var(--outline-gray-2);
88}
89
90/* Modern slim scrollbars */
91* {
92 scrollbar-width: thin;
93 scrollbar-color: var(--outline-gray-3) transparent;
94}
95
96*::-webkit-scrollbar {
97 width: 6px;
98 height: 6px;
99}
100
101*::-webkit-scrollbar-track {
102 background: transparent;
103}
104
105*::-webkit-scrollbar-thumb {
106 background-color: var(--outline-gray-3);
107 border-radius: 9999px;
108}
109
110*::-webkit-scrollbar-thumb:hover {
111 background-color: var(--outline-gray-4);
112}
113
114*::-webkit-scrollbar-corner {
115 background: transparent;
116}
117
118
119/* replied content css */
120.replied-content .collapse {
121 margin: 10px 0 10px 0;
122 visibility: visible;
123 cursor: pointer;
124 display: flex;
125 font-weight: 700;
126 height: 12px;
127 line-height: 0.3;
128 background: #e8eaed;
129 width: 23px;
130 justify-content: center;
131 border-radius: 5px;
132}
133.replied-content .collapse:hover {
134 background: #dadce0;
135}
136[data-theme="dark"] .replied-content .collapse {
137 color: #e2e2e2;
138 background: #424242;
139}
140[data-theme="dark"] .replied-content .collapse:hover {
141 background: #525252;
142}
143.replied-content .collapse + input {
144 display: none;
145}
146.replied-content .collapse + input + div {
147 display: none;
148}
149.replied-content .collapse + input:checked + div {
150 display: block;
151}
152
153
154/* transition fade css */
155.fade-enter-active,
156.fade-leave-active {
157 transition: opacity 0.2s ease;
158}
159
160.fade-enter-from,
161.fade-leave-to {
162 opacity: 0;
163}
164
165/* Scroll-driven edge fade for scrollable dropdown groups.*/
166@property --fade-bottom {
167 syntax: "<length>";
168 inherits: false;
169 initial-value: 20px;
170}
171
172@keyframes scroll-fade {
173 0% {
174 --fade-bottom: 20px;
175 }
176 100% {
177 --fade-bottom: 0px;
178 }
179}