Lookii125/image_editing_agent

1:root {
2    --primary: #f0f2f6;
3    --border: #d1d5db;
4    --text: #1f2937;
5    --blue: #2563eb;
6    --blue-hover: #1d4ed8;
7}
8
9body { font-family: system-ui, -apple-system, sans-serif; margin: 0; padding: 20px; color: var(--text); background: #ffffff; }
10header h1 { font-size: 24px; margin-bottom: 20px; }
11
12/* Toolbar */
13.toolbar { 
14    display: grid; 
15    grid-template-columns: 1.2fr 1.2fr 1.2fr 1.2fr 3fr 1.8fr 2.2fr 1.5fr; 
16    gap: 10px; 
17    margin-bottom: 20px; 
18    padding-bottom: 20px; 
19    border-bottom: 1px solid var(--border); 
20}
21
22.img-magnifier-glass {
23    position: absolute;
24    border: 3px solid var(--text);
25    border-radius: 50%;
26    cursor: none;
27    width: 150px;
28    height: 150px;
29    display: none;
30    pointer-events: none; /* Allows mouse events to pass through to the image */
31    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
32    z-index: 100;
33}
34
35/* Ensure absolute positioning of the lens stays constrained */
36.canvas-col {
37    position: relative; 
38}
39
40#btn-help {
41    position: fixed;
42    bottom: 20px;
43    left: 20px;
44    font-size: 24px;
45    background-color: #ffffff; /* Adjust to match your theme */
46    border: 2px solid #ddd;
47    border-radius: 50%;
48    width: 50px;
49    height: 50px;
50    cursor: pointer;
51    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
52    z-index: 1000; /* Ensures it stays on top of the canvas and chat */
53    display: flex;
54    align-items: center;
55    justify-content: center;
56    transition: transform 0.2s ease, box-shadow 0.2s ease;
57}
58
59#btn-help:hover {
60    transform: scale(1.1);
61    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
62}
63
64
65#help-modal .modal-content {
66    max-height: 85vh;       /* Limits height to 85% of the viewport */
67    overflow-y: auto;       /* Adds a scrollbar if the content is too long */
68    margin: 5vh auto;       /* Keeps it vertically centered with breathing room */
69    padding-bottom: 30px;   /* Extra padding at the bottom for comfortable scrolling */
70}
71
72
73
74button, .upload-btn { padding: 10px; background: white; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; text-align: center; font-size: 14px; }
75button:hover, .upload-btn:hover { background: var(--primary); }
76button:disabled { opacity: 0.5; cursor: not-allowed; }
77
78/* Main Layout (7.2 / 2.8 split) */
79.layout { display: flex; gap: 20px; height: calc(100vh - 160px); }
80.canvas-panel { flex: 7.2; display: flex; flex-direction: column; overflow-y: auto; }
81.chat-panel { flex: 2.8; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; padding: 15px; background: var(--primary); }
82
83/* Canvas Grid */
84.canvas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
85.canvas-col img { width: 100%; border-radius: 8px; border: 1px solid var(--border); }
86#btn-toggle-detections { margin-top: 10px; width: 100%; }
87
88/* Chat Container */
89.chat-container { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; padding-right: 5px; }
90.message { padding: 10px; border-radius: 8px; max-width: 85%; font-size: 14px; line-height: 1.4; }
91.msg-user { background: #e0e7ff; align-self: flex-end; }
92.msg-assistant { background: white; border: 1px solid var(--border); align-self: flex-start; }
93
94.chat-input-area { display: flex; gap: 10px; }
95#chat-input { flex-grow: 1; padding: 10px; border: 1px solid var(--border); border-radius: 6px; }
96
97/* Utilities */
98.info-box { background: #e0f2fe; color: #075985; padding: 15px; border-radius: 8px; text-align: center; }
99.toast { visibility: hidden; min-width: 250px; background-color: #333; color: #fff; text-align: center; border-radius: 4px; padding: 16px; position: fixed; z-index: 1; right: 30px; bottom: 30px; }
100.toast.show { visibility: visible; animation: fadein 0.5s, fadeout 0.5s 2.5s; }
101
102/* Modal */
103.modal { display: none; position: fixed; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
104.modal-content { background: white; margin: 10% auto; padding: 20px; width: 60%; border-radius: 8px; }
105.close { float: right; font-size: 28px; cursor: pointer; }
106pre { background: #1e1e1e; color: #d4d4d4; padding: 15px; border-radius: 6px; overflow-x: auto; }
107
108
109.close-help {
110    color: #aaa;
111    float: right;
112    font-size: 48px; /* Increased from 28px */
113    font-weight: bold;
114    cursor: pointer;
115    line-height: 0.8; /* Keeps it flush with the top edge despite the larger size */
116    padding: 0 5px;   /* Adds a slightly larger invisible clickable area around it */
117    transition: color 0.2s ease;
118}
119
120.close-help:hover,
121.close-help:focus {
122    color: #000;      /* Makes it darker when hovered */
123    text-decoration: none;
124    cursor: pointer;
125}
126
127
128
129/* --- Canvas Rulers & Hover Zoom CSS --- */
130.ruler-wrapper {
131    position: relative;
132    padding: 25px 0 0 45px; /* Increased padding to give text more space */
133    background: #ffffff;
134    border: 1px solid var(--border);
135    border-radius: 6px;
136    box-sizing: border-box;
137    display: flex;
138}
139
140/* New class to toggle off the rulers */
141.hide-rulers {
142    padding: 0 !important;
143}
144.hide-rulers .ruler-x, .hide-rulers .ruler-y {
145    display: none !important;
146}
147
148.ruler-x {
149    position: absolute; top: 0; left: 45px; right: 0; height: 25px;
150    background: #f8fafc; border-bottom: 1px solid var(--border);
151    overflow: visible; /* Prevent text clipping */
152    pointer-events: none;
153    z-index: 5; /* Forces the ruler to render on top of the image */
154}
155
156.ruler-y {
157    position: absolute; top: 25px; left: 0; bottom: 0; width: 45px;
158    background: #f8fafc; border-right: 1px solid var(--border);
159    overflow: visible; /* Prevent text clipping */
160    pointer-events: none;
161    z-index: 5; /* Forces the ruler to render on top of the image */
162}
163
164.tick-x {
165    position: absolute; bottom: 2px; height: 6px; border-left: 1px solid #94a3b8;
166    font-size: 12px; color: #475569; padding-left: 3px; 
167    white-space: nowrap; /* Keep numbers on one line */
168}
169
170.tick-y {
171    position: absolute; right: 2px; width: 6px; border-top: 1px solid #94a3b8;
172    font-size: 12px; color: #475569; padding-right: 3px; line-height: 8px; text-align: right;
173    white-space: nowrap; /* Keep numbers on one line */
174}
175
176.img-container {
177    width: 100%;
178    overflow: hidden; 
179    display: flex;
180}
181
182.zoomable-img {
183    width: 100%;
184    display: block;
185    border-radius: 0;
186    border: none;
187    transition: transform 0.15s ease-out; 
188    transform-origin: center center; 
189}
190
191.canvas-col img { border: none; }
192
193
194
195/* Update Toolbar Grid to accommodate smaller emoji buttons neatly */
196.toolbar { 
197    display: grid; 
198    grid-template-columns: 1.2fr 1.2fr 1.2fr 1.1fr 2.6fr 2fr 2.2fr 0.6fr 0.6fr; 
199    gap: 10px; 
200    margin-bottom: 20px; 
201    padding-bottom: 20px; 
202    border-bottom: 1px solid var(--border); 
203    align-items: center;
204}
205
206/* Smaller Emoji Buttons Styling */
207.emoji-btn {
208    padding: 8px 4px;
209    font-size: 15px;
210    text-align: center;
211    min-width: unset;
212    background: #ffffff;
213}
214
215.emoji-btn.active {
216    background: #e0e7ff;
217    border-color: var(--blue);
218}