Skip to content

Commit 74291ab

Browse files
xkeshavxkeshav
authored
Merge pull request #24 from recursivezero/feature/RZA-250004
feature/RZA 250004 Canvas Repo transform
2 parents e8ebbe1 + 4713aa5 commit 74291ab

37 files changed

+4014
-404
lines changed

‎src/assets/styles/canvas.css‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
2+
/* Global Styles for the Canvas Generator */
3+
.canvas-generator {
4+
min-height: 100vh;
5+
width: 100%;
6+
padding: 1rem;
7+
font-family: "Comic Sans MS", "Chalkboard SE", sans-serif;
8+
box-sizing: border-box;
9+
margin-top: -40px;
10+
11+
/* Controls Section */
12+
.controls {
13+
max-width: 1200px;
14+
margin: 0 auto;
15+
display: flex;
16+
flex-direction: column;
17+
gap: 2rem;
18+
}
19+
20+
.input-area {
21+
background: rgba(37, 53, 79, 0.8);
22+
padding: 2rem;
23+
border-radius: 20px;
24+
border: 2px solid #334155;
25+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
26+
backdrop-filter: blur(8px);
27+
}
28+
29+
.text-input {
30+
padding: 1rem 1.5rem;
31+
border: 2px solid #334155;
32+
border-radius: 12px;
33+
font-size: 1.2rem;
34+
width: 100%;
35+
background: rgba(15, 23, 42, 0.8);
36+
color: #e2e8f0;
37+
transition: border-color 0.3s ease;
38+
outline: none;
39+
box-sizing: border-box;
40+
41+
&:focus {
42+
border-color: #2563eb;
43+
}
44+
45+
&::placeholder {
46+
color: #64748b;
47+
}
48+
}
49+
50+
.buttons {
51+
display: flex;
52+
gap: 1rem;
53+
margin-top: 1.5rem;
54+
flex-wrap: wrap;
55+
}
56+
57+
.action-button {
58+
padding: 1rem 2rem;
59+
border-radius: 12px;
60+
font-size: 1.2rem;
61+
font-weight: bold;
62+
cursor: pointer;
63+
transition: background 0.3s ease;
64+
border: none;
65+
background: #1e40af;
66+
color: white;
67+
flex: 1;
68+
min-width: 120px;
69+
70+
&:hover {
71+
background: #2563eb;
72+
}
73+
}
74+
75+
.checkbox-wrapper {
76+
display: flex;
77+
align-items: center;
78+
gap: 0.5rem;
79+
font-size: 1.2rem;
80+
color: #e2e8f0;
81+
}
82+
83+
/* New Styles for Combined Label and Checkbox */
84+
.label-checkbox-container {
85+
display: flex;
86+
justify-content: space-between; /* Pushes label to left and checkbox to right */
87+
align-items: center;
88+
width: 100%;
89+
margin-bottom: 1rem;
90+
}
91+
92+
.checkbox-wrapper {
93+
display: flex;
94+
align-items: center;
95+
gap: 0.5rem;
96+
}
97+
98+
99+
.input-label {
100+
color: #e2e8f0;
101+
font-size: 1.2rem;
102+
font-weight: bold;
103+
}
104+
105+
/* Color Options */
106+
.color-options {
107+
display: flex;
108+
gap: 1rem;
109+
margin-top: 1.5rem;
110+
111+
.color-picker {
112+
flex: 1;
113+
}
114+
115+
.color-select {
116+
width: 100%;
117+
padding: 0.8rem;
118+
border: 2px solid #334155;
119+
border-radius: 12px;
120+
background: rgba(15, 23, 42, 0.8);
121+
color: #e2e8f0;
122+
font-size: 1rem;
123+
cursor: pointer;
124+
125+
option {
126+
background: #1e293b;
127+
}
128+
}
129+
}
130+
131+
label {
132+
display: block;
133+
margin-bottom: 0.5rem;
134+
color: #e2e8f0;
135+
font-size: 1rem;
136+
}
137+
138+
/* Image Grid with Scrollbar */
139+
.image-grid {
140+
display: grid;
141+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
142+
gap: 1rem;
143+
background: rgba(37, 53, 79, 0.8);
144+
border: 2px solid #334155;
145+
padding: 2rem;
146+
border-radius: 20px;
147+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
148+
backdrop-filter: blur(8px);
149+
min-height: 200px;
150+
max-height: 500px;
151+
overflow-y: auto;
152+
153+
&::-webkit-scrollbar {
154+
width: 12px;
155+
}
156+
157+
&::-webkit-scrollbar-track {
158+
background: rgba(255, 255, 255, 0.1);
159+
border-radius: 10px;
160+
}
161+
162+
&::-webkit-scrollbar-thumb {
163+
background: rgba(0, 0, 0, 0.3);
164+
border-radius: 10px;
165+
}
166+
167+
img {
168+
width: 100%;
169+
height: auto;
170+
border-radius: 10px;
171+
object-fit: cover;
172+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
173+
transition: transform 0.3s ease;
174+
cursor: pointer;
175+
176+
&:hover {
177+
transform: scale(1.02);
178+
}
179+
}
180+
}
181+
182+
}

0 commit comments

Comments
 (0)