Skip to content

Commit 3bc182a

Browse files
blueimpblueimp
committed
Demo: Update layout and design.
1 parent 46fe1bf commit 3bc182a

File tree

2 files changed

+124
-27
lines changed

2 files changed

+124
-27
lines changed

‎css/demo.css

Lines changed: 122 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@
1010
*/
1111

1212
body {
13-
max-width: 750px;
13+
max-width: 990px;
1414
margin: 0 auto;
1515
padding: 1em;
1616
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
1717
Arial, sans-serif;
18+
-webkit-text-size-adjust: 100%;
1819
line-height: 1.4;
1920
background: #212121;
2021
color: #dedede;
@@ -29,18 +30,6 @@ a:visited {
2930
a:hover {
3031
color: #98c379;
3132
}
32-
figure,
33-
tr {
34-
background: #363636;
35-
}
36-
tr:nth-child(odd) {
37-
background: #414141;
38-
}
39-
td,
40-
th {
41-
padding: 10px;
42-
text-align: left;
43-
}
4433
table {
4534
width: 100%;
4635
word-wrap: break-word;
@@ -49,16 +38,29 @@ table {
4938
}
5039
figure {
5140
margin: 0;
52-
padding: 10px;
41+
padding: 0.75em;
5342
border-radius: 5px;
5443
display: inline-block;
5544
}
56-
figure,
57-
table {
58-
margin-bottom: 20px;
45+
table,
46+
figure {
47+
margin-bottom: 1.25em;
48+
}
49+
tr,
50+
figure {
51+
background: #363636;
52+
}
53+
tr:nth-child(odd) {
54+
background: #414141;
55+
}
56+
td,
57+
th {
58+
padding: 0.5em 0.75em;
59+
text-align: left;
5960
}
6061
img,
6162
canvas {
63+
max-width: 100%;
6264
border: 0;
6365
vertical-align: middle;
6466
}
@@ -74,20 +76,93 @@ h6 {
7476
h1 {
7577
margin-top: 0.5em;
7678
}
79+
label {
80+
display: inline-block;
81+
margin-bottom: 0.25em;
82+
}
7783
button,
78-
input,
7984
select,
85+
input,
8086
textarea {
87+
-webkit-appearance: none;
8188
box-sizing: border-box;
89+
margin: 0;
90+
padding: 0.5em 0.75em;
8291
font-family: inherit;
8392
font-size: 100%;
84-
line-height: 1.15;
85-
margin: 0;
86-
padding: 5px;
93+
line-height: 1.4;
94+
background: #414141;
95+
color: #dedede;
96+
border: 1px solid #363636;
97+
border-radius: 5px;
98+
box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);
99+
}
100+
input,
101+
textarea {
102+
width: 100%;
103+
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.07);
104+
}
105+
textarea {
106+
display: block;
107+
overflow: auto;
108+
}
109+
select {
110+
display: block;
111+
padding-right: 2.25em;
112+
background: #3c76a7;
113+
background: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"%3E%3Cpath fill="%23fff" d="M2 0L0 2h4zm0 5L0 3h4z"/%3E%3C/svg%3E')
114+
no-repeat right 0.75em center/0.75em,
115+
linear-gradient(180deg, #3c76a7, #225c8d);
116+
border-color: #225c8d;
117+
color: #fff;
118+
}
119+
select::-ms-expand {
120+
display: none;
121+
}
122+
option {
123+
color: #212121;
124+
}
125+
input[type='checkbox'] {
126+
-webkit-appearance: checkbox;
127+
width: auto;
128+
padding: initial;
129+
box-shadow: none;
87130
}
88131
input[type='file'] {
89-
padding: inherit;
90132
max-width: 100%;
133+
padding: 0;
134+
background: none;
135+
border: 0;
136+
border-radius: 0;
137+
box-shadow: none;
138+
}
139+
140+
input[type='file']::-webkit-file-upload-button {
141+
-webkit-appearance: none;
142+
box-sizing: border-box;
143+
margin: 0;
144+
padding: 0.5em 0.75em;
145+
font-family: inherit;
146+
font-size: 100%;
147+
line-height: 1.4;
148+
background: linear-gradient(180deg, #3c76a7, #225c8d);
149+
border: 1px solid #225c8d;
150+
color: #fff;
151+
border-radius: 5px;
152+
box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);
153+
}
154+
input[type='file']::-ms-browse {
155+
box-sizing: border-box;
156+
margin: 0;
157+
padding: 0.5em 0.75em;
158+
font-family: inherit;
159+
font-size: 100%;
160+
line-height: 1.4;
161+
background: linear-gradient(180deg, #3c76a7, #225c8d);
162+
border: 1px solid #225c8d;
163+
color: #fff;
164+
border-radius: 5px;
165+
box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);
91166
}
92167

93168
@media (prefers-color-scheme: light) {
@@ -112,16 +187,38 @@ input[type='file'] {
112187
tr:nth-child(odd) {
113188
background: #f6f6f6;
114189
}
190+
input,
191+
textarea {
192+
background: #fff;
193+
border-color: #d1d1d1;
194+
color: #212121;
195+
}
115196
}
116197

117-
#url {
118-
width: 100%;
198+
#edit {
199+
background: #3c76a7;
200+
background: linear-gradient(180deg, #3c76a7, #225c8d);
201+
border-color: #225c8d;
202+
color: #fff;
203+
}
204+
#crop {
205+
background: #6fa349;
206+
background: linear-gradient(180deg, #6fa349, #568a30);
207+
border-color: #568a30;
208+
color: #fff;
209+
}
210+
#cancel {
211+
background: #d79435;
212+
background: linear-gradient(180deg, #d79435, #be7b1c);
213+
border-color: #be7b1c;
214+
color: #fff;
119215
}
216+
120217
#result {
121218
display: block;
122219
}
123220

124-
@media (min-width: 481px) {
221+
@media (min-width: 540px) {
125222
#navigation {
126223
list-style: none;
127224
padding: 0;

‎index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,8 @@ <h2>Select an image file</h2>
9090
<p>
9191
<input type="file" id="file-input" />
9292
</p>
93-
<p>Or enter an image URL into the following field:</p>
9493
<p>
94+
<label for="url">Or enter an image URL into the following field:</label>
9595
<input type="url" id="url" placeholder="Image URL" />
9696
</p>
9797
<p>Or <strong>drag &amp; drop</strong> an image file onto this webpage.</p>
@@ -112,8 +112,8 @@ <h3>Options</h3>
112112
</select>
113113
</p>
114114
<p>
115-
<label for="image-smoothing">Image smoothing</label>
116115
<input type="checkbox" id="image-smoothing" checked />
116+
<label for="image-smoothing">Image smoothing</label>
117117
</p>
118118
<h2>Result</h2>
119119
<p id="actions" style="display: none;">

0 commit comments

Comments
 (0)