fork of hey-api/openapi-ts because I need some additional things
mokkenstorm.dev
1/* Pet Card Styles */
2.pet-card {
3 background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
4 border-radius: 16px;
5 padding: 1.5rem;
6 margin-top: 1.5rem;
7 box-shadow:
8 0 4px 6px -1px rgba(0, 0, 0, 0.1),
9 0 2px 4px -1px rgba(0, 0, 0, 0.06);
10 border: 1px solid rgba(0, 0, 0, 0.05);
11 transition:
12 transform 120ms ease,
13 box-shadow 120ms ease;
14}
15
16.pet-info {
17 display: flex;
18 align-items: center;
19 gap: 1rem;
20}
21
22.pet-avatar {
23 width: 64px;
24 height: 64px;
25 border-radius: 12px;
26 overflow: hidden;
27 flex-shrink: 0;
28 background: var(--red-to-pink-to-purple-horizontal-gradient);
29 display: flex;
30 align-items: center;
31 justify-content: center;
32}
33
34.pet-image {
35 width: 100%;
36 height: 100%;
37 object-fit: cover;
38}
39
40.pet-placeholder {
41 color: white;
42 font-size: 1.5rem;
43 font-weight: 600;
44 text-transform: uppercase;
45}
46
47.pet-details {
48 flex: 1;
49 display: flex;
50 flex-direction: column;
51 gap: 0.5rem;
52}
53
54.pet-name {
55 font-size: 1.125rem;
56 font-weight: 600;
57 color: var(--gray-900);
58 margin: 0;
59}
60
61.pet-category {
62 font-size: 0.875rem;
63 color: var(--gray-700);
64 background: rgba(255, 65, 248, 0.1);
65 padding: 0.25rem 0.75rem;
66 border-radius: 20px;
67 display: inline-block;
68 width: fit-content;
69}
70
71/* Error Message Styles */
72.error-message {
73 background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
74 border: 1px solid #fecaca;
75 border-radius: 12px;
76 padding: 1rem;
77 margin-top: 1.5rem;
78 box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
79}
80
81.error-title {
82 font-size: 1rem;
83 font-weight: 600;
84 color: #dc2626;
85 margin-bottom: 0.5rem;
86 display: flex;
87 align-items: center;
88 gap: 0.5rem;
89}
90
91.error-title::before {
92 content: '⚠️';
93 font-size: 1.125rem;
94}
95
96.error-details {
97 font-size: 0.875rem;
98 color: #991b1b;
99 background: rgba(239, 68, 68, 0.05);
100 padding: 0.75rem;
101 border-radius: 8px;
102 font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
103 white-space: pre-wrap;
104 word-break: break-word;
105 border-left: 3px solid #ef4444;
106}
107
108/* Button Styles Enhancement */
109button {
110 background: var(--red-to-pink-to-purple-horizontal-gradient);
111 color: white;
112 border: none;
113 padding: 0.75rem 1.5rem;
114 border-radius: 8px;
115 font-size: 0.875rem;
116 font-weight: 500;
117 cursor: pointer;
118 transition: all 120ms ease;
119 margin-top: 1rem;
120 margin-right: 0.5rem;
121 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
122}
123
124button:hover {
125 transform: translateY(-1px);
126 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
127}
128
129button:active {
130 transform: translateY(0);
131}
132
133/* Responsive adjustments */
134@media screen and (max-width: 650px) {
135 .pet-card {
136 padding: 1rem;
137 margin-top: 1rem;
138 }
139
140 .pet-info {
141 flex-direction: column;
142 text-align: center;
143 gap: 1rem;
144 }
145
146 .pet-avatar {
147 width: 80px;
148 height: 80px;
149 align-self: center;
150 }
151
152 .error-message {
153 padding: 0.75rem;
154 margin-top: 1rem;
155 }
156}