Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
yoginth.com
1@import "tailwindcss";
2@plugin "@tailwindcss/aspect-ratio";
3@plugin "@tailwindcss/forms";
4@custom-variant dark (&:where(.dark, .dark *));
5
6@theme {
7 --font-sofia-pro: "Sofia Pro", sans-serif;
8 --animate-shimmer: shimmer 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
9
10 /* Brand Colors */
11 --color-brand-50: #fff0f2;
12 --color-brand-300: #ffa1ad;
13 --color-brand-500: #fb3a5d;
14 --color-brand-600: #e91546;
15}
16
17@keyframes shimmer {
18 0%,
19 100% {
20 opacity: 1;
21 }
22 50% {
23 opacity: 0.5;
24 }
25}
26
27@layer base {
28 :root {
29 @apply font-sofia-pro text-black dark:text-white;
30 }
31
32 html {
33 @apply overflow-y-scroll;
34 }
35
36 body {
37 @apply bg-gray-50;
38 @apply dark:bg-black;
39 }
40
41 .shimmer {
42 @apply animate-shimmer;
43 @apply bg-gray-300;
44 @apply dark:bg-gray-600;
45 }
46
47 .menu-item {
48 @apply m-2 block cursor-pointer rounded-lg px-2 py-1.5 text-sm text-gray-700 dark:text-gray-200;
49 }
50
51 .linkify a {
52 @apply text-brand-500;
53 @apply hover:text-brand-600 dark:hover:text-brand-500;
54 }
55
56 ::-webkit-file-upload-button {
57 @apply mr-2 cursor-pointer rounded-l-xl border-0 px-3 py-2;
58 @apply bg-gray-200 dark:bg-gray-900;
59 }
60
61 .no-scrollbar::-webkit-scrollbar {
62 display: none;
63 }
64
65 .no-scrollbar {
66 -ms-overflow-style: none;
67 scrollbar-width: none;
68 }
69
70 .no-spinner::-webkit-inner-spin-button,
71 .no-spinner::-webkit-outer-spin-button {
72 margin: 0;
73 -webkit-appearance: none;
74 }
75
76 .label {
77 @apply mb-1 font-medium text-gray-800 dark:text-gray-200;
78 }
79
80 .dropdown-active {
81 @apply bg-gray-100 dark:bg-gray-800;
82 }
83
84 .focusable-dropdown-item[data-focused] {
85 @apply bg-gray-200 dark:bg-gray-700;
86 }
87
88 .divider {
89 @apply border-b border-gray-200 dark:border-gray-700;
90 }
91
92 .ProseMirror {
93 p {
94 word-break: break-word;
95 }
96
97 & a,
98 span[data-mention="account"] {
99 @apply text-brand-500;
100 }
101
102 & .prosekit-virtual-selection {
103 background-color: transparent;
104 box-shadow: none;
105 }
106
107 & .prosekit-placeholder::before {
108 content: attr(data-placeholder);
109 @apply absolute top-[0.5px] pointer-events-none opacity-50;
110 }
111 }
112
113 /** CSS overrides for plyr audio **/
114 .plyr__progress__buffer {
115 @apply !bg-white;
116 }
117
118 .plyr--audio .plyr__controls {
119 @apply !bg-transparent !text-white;
120 }
121
122 .plyr--audio .plyr__control {
123 @apply hover:!bg-transparent;
124 }
125
126 .plyr--audio.plyr--full-ui input[type="range"] {
127 @apply !text-white;
128 }
129
130 .pb-safe {
131 padding-bottom: env(safe-area-inset-bottom);
132 }
133
134 /* Markup styles */
135 .markup > p,
136 ul {
137 word-break: break-word;
138 @apply leading-[26px] list-disc list-inside;
139 @apply [&:not(:last-child)]:mb-3;
140 }
141
142 .markup > hr {
143 @apply border-gray-200 dark:border-gray-700;
144 @apply mb-3;
145 }
146
147 .full-page-post-markup > p,
148 ul {
149 @apply text-[15px] sm:text-[17px];
150 @apply !leading-7 sm:leading-[26px];
151 @apply [&:not(:last-child)]:mb-3 sm:[&:not(:last-child)]:mb-4;
152 }
153
154 .virtual-divider-list-window {
155 @apply [&>div]:divide-y;
156 @apply [&>div]:divide-gray-200 dark:[&>div]:divide-gray-700;
157 }
158
159 button:not(:disabled),
160 [role="button"]:not(:disabled) {
161 cursor: pointer;
162 }
163}