Hugging Face's logo

Spaces:
soiz1
/
image-editor
Running

App Files Community
soiz1 commited on
Commit
869e87b
·
verified ·
1 Parent(s): 0dba846

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +164 -17
style.css CHANGED
@@ -1,28 +1,175 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --primary-color: #3498db;
3
+ --secondary-color: #2980b9;
4
+ --background-color: #f5f7fa;
5
+ --card-color: #ffffff;
6
+ --text-color: #333333;
7
+ --border-color: #e0e0e0;
8
+ --slider-color: #3498db;
9
+ --button-hover: #2c3e50;
10
+ }
11
+
12
+ * {
13
+ margin: 0;
14
+ padding: 0;
15
+ box-sizing: border-box;
16
+ }
17
+
18
  body {
19
+ font-family: 'Roboto', sans-serif;
20
+ background-color: var(--background-color);
21
+ color: var(--text-color);
22
+ line-height: 1.6;
23
+ padding: 20px;
24
+ }
25
+
26
+ .container {
27
+ max-width: 1200px;
28
+ margin: 0 auto;
29
+ padding: 20px;
30
+ background-color: var(--card-color);
31
+ border-radius: 10px;
32
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
33
  }
34
 
35
  h1 {
36
+ text-align: center;
37
+ margin-bottom: 30px;
38
+ color: var(--primary-color);
39
+ }
40
+
41
+ .upload-section {
42
+ text-align: center;
43
+ margin-bottom: 30px;
44
+ }
45
+
46
+ #image-upload {
47
+ display: none;
48
  }
49
 
50
+ .upload-btn {
51
+ display: inline-block;
52
+ padding: 12px 24px;
53
+ background-color: var(--primary-color);
54
+ color: white;
55
+ border-radius: 5px;
56
+ cursor: pointer;
57
+ transition: background-color 0.3s;
58
  }
59
 
60
+ .upload-btn:hover {
61
+ background-color: var(--secondary-color);
 
 
 
 
62
  }
63
 
64
+ .editor-container {
65
+ display: flex;
66
+ flex-wrap: wrap;
67
+ gap: 30px;
68
  }
69
+
70
+ .image-preview {
71
+ flex: 1;
72
+ min-width: 300px;
73
+ border: 1px solid var(--border-color);
74
+ border-radius: 5px;
75
+ overflow: hidden;
76
+ background-color: #f0f0f0;
77
+ display: flex;
78
+ justify-content: center;
79
+ align-items: center;
80
+ }
81
+
82
+ #image-canvas {
83
+ max-width: 100%;
84
+ max-height: 500px;
85
+ display: block;
86
+ }
87
+
88
+ .controls {
89
+ flex: 1;
90
+ min-width: 300px;
91
+ padding: 20px;
92
+ background-color: var(--card-color);
93
+ border-radius: 5px;
94
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
95
+ }
96
+
97
+ .control-group {
98
+ margin-bottom: 25px;
99
+ padding-bottom: 15px;
100
+ border-bottom: 1px solid var(--border-color);
101
+ }
102
+
103
+ .control-group:last-child {
104
+ border-bottom: none;
105
+ }
106
+
107
+ .control-group h3 {
108
+ margin-bottom: 15px;
109
+ color: var(--primary-color);
110
+ font-weight: 500;
111
+ }
112
+
113
+ .slider-control {
114
+ margin-bottom: 15px;
115
+ }
116
+
117
+ .slider-control label {
118
+ display: block;
119
+ margin-bottom: 5px;
120
+ font-weight: 400;
121
+ }
122
+
123
+ .slider-control input[type="range"] {
124
+ width: 100%;
125
+ height: 8px;
126
+ -webkit-appearance: none;
127
+ background: #e0e0e0;
128
+ border-radius: 5px;
129
+ outline: none;
130
+ margin-bottom: 5px;
131
+ }
132
+
133
+ .slider-control input[type="range"]::-webkit-slider-thumb {
134
+ -webkit-appearance: none;
135
+ width: 18px;
136
+ height: 18px;
137
+ background: var(--slider-color);
138
+ border-radius: 50%;
139
+ cursor: pointer;
140
+ }
141
+
142
+ .slider-control span {
143
+ display: inline-block;
144
+ width: 40px;
145
+ text-align: right;
146
+ font-size: 0.9em;
147
+ color: #666;
148
+ }
149
+
150
+ .action-btn {
151
+ display: inline-block;
152
+ padding: 10px 20px;
153
+ margin-right: 10px;
154
+ margin-top: 10px;
155
+ background-color: var(--primary-color);
156
+ color: white;
157
+ border: none;
158
+ border-radius: 5px;
159
+ cursor: pointer;
160
+ transition: background-color 0.3s;
161
+ }
162
+
163
+ .action-btn:hover {
164
+ background-color: var(--button-hover);
165
+ }
166
+
167
+ @media (max-width: 768px) {
168
+ .editor-container {
169
+ flex-direction: column;
170
+ }
171
+
172
+ .image-preview, .controls {
173
+ min-width: 100%;
174
+ }
175
+ }