The Appview for the kipclip.com atproto bookmarking service
tijs.org
1/* kipclip styles - matching the cute chicken mascot aesthetic */
2
3:root {
4 --cream: #f5f1e8;
5 --coral: #e66456;
6 --teal: #5b8a8f;
7 --orange: #f4a261;
8 --dark-gray: #2d3748;
9 --light-gray: #e2e8f0;
10 --sidebar-bg: #f7f9fa;
11}
12
13* {
14 margin: 0;
15 padding: 0;
16 box-sizing: border-box;
17}
18
19body {
20 font-family:
21 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
22 Arial, sans-serif;
23 background: linear-gradient(135deg, var(--cream) 0%, #e8f4f5 100%);
24 color: var(--dark-gray);
25 min-height: 100vh;
26}
27
28#root {
29 min-height: 100vh;
30}
31
32/* Utility classes to complement Tailwind */
33.btn-primary {
34 background-color: var(--coral);
35 color: white;
36 padding: 0.75rem 1.5rem;
37 border-radius: 0.5rem;
38 border: none;
39 font-weight: 600;
40 cursor: pointer;
41 transition: all 0.2s;
42}
43
44.btn-primary:hover {
45 background-color: #d45546;
46 transform: translateY(-1px);
47}
48
49.btn-secondary {
50 background-color: var(--teal);
51 color: white;
52 padding: 0.75rem 1.5rem;
53 border-radius: 0.5rem;
54 border: none;
55 font-weight: 600;
56 cursor: pointer;
57 transition: all 0.2s;
58}
59
60.btn-secondary:hover {
61 background-color: #4a7a7f;
62 transform: translateY(-1px);
63}
64
65.card {
66 background: white;
67 border-radius: 1rem;
68 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
69 padding: 1.5rem;
70 transition: all 0.2s;
71}
72
73.card:hover {
74 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
75}
76
77/* Loading spinner */
78.spinner {
79 border: 3px solid var(--light-gray);
80 border-top-color: var(--coral);
81 border-radius: 50%;
82 width: 40px;
83 height: 40px;
84 animation: spin 0.8s linear infinite;
85}
86
87@keyframes spin {
88 to {
89 transform: rotate(360deg);
90 }
91}
92
93/* Smooth page transitions */
94.fade-in {
95 animation: fadeIn 0.3s ease-in;
96}
97
98@keyframes fadeIn {
99 from {
100 opacity: 0;
101 transform: translateY(10px);
102 }
103 to {
104 opacity: 1;
105 transform: translateY(0);
106 }
107}
108
109/* Actor typeahead autocomplete - kipclip themed */
110actor-typeahead {
111 --color-background: #ffffff;
112 --color-border: var(--light-gray);
113 --color-shadow: #000000;
114 --color-hover: #fff1f1;
115 --color-avatar-fallback: #fecaca;
116 --radius: 8px;
117 --padding-menu: 4px;
118}