Skip to content

Commit 622a3e8

Browse files
autumn-mckautumn-mck
committed
styled input
1 parent afc2b9c commit 622a3e8

2 files changed

Lines changed: 85 additions & 20 deletions

File tree

‎index.html‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,19 @@
1313
<body>
1414
<h2>Datapack Toolkit Web (in development)</h2>
1515
<div class="edit_area">
16-
<p>Select a datapack file...</p>
17-
<input type="file" id="input" accept=".zip,.jar" multiple />
18-
1916
<div class="work_area">
20-
<div id="datapack-display"></div>
17+
<div id="left-col">
18+
<label class="file">
19+
<input
20+
type="file"
21+
id="input"
22+
accept=".zip,.jar"
23+
aria-label="Upload a datapack file"
24+
multiple />
25+
<span class="file-custom"></span>
26+
</label>
27+
<div id="datapack-display"></div>
28+
</div>
2129

2230
<template id="datapack-template">
2331
<div class="datapack">
@@ -41,13 +49,13 @@ <h3 class="name"></h3>
4149
<h3 class="widget-text">A heading widget...</h3>
4250
</div>
4351
</template>
44-
52+
4553
<template id="image-widget-template">
4654
<div class="widget image-widget">
4755
<p class="widget-text">⚠ Image widgets are not supported</p>
4856
</div>
4957
</template>
50-
58+
5159
<template id="slider-widget-template">
5260
<div class="widget slider-widget">
5361
<label class="widget-text">A slider</label>
@@ -57,22 +65,21 @@ <h3 class="widget-text">A heading widget...</h3>
5765
max="100"
5866
value="50"
5967
class="widget-input widget-range-input"
60-
id="widget-input-x"
61-
/>
68+
id="widget-input-x" />
6269
</div>
6370
</template>
64-
71+
6572
<template id="switch-widget-template">
6673
<div class="widget switch-widget">
6774
<label class="widget-text">A switch</label>
68-
<input type="checkbox" class="widget-input widget-switch-input" id="widget-input-x"/>
75+
<input type="checkbox" class="widget-input widget-switch-input" id="widget-input-x" />
6976
</div>
7077
</template>
71-
78+
7279
<template id="number-widget-template">
7380
<div class="widget number-widget">
7481
<label class="widget-text">A number box</label>
75-
<input type="number" class="widget-input widget-number-input" id="widget-input-x"/>
82+
<input type="number" class="widget-input widget-number-input" id="widget-input-x" />
7683
</div>
7784
</template>
7885
</form>

‎style.css‎

Lines changed: 66 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@
44
--background: #181825;
55
--background-below: #11111b;
66
--background-above: #1e1e2e;
7+
8+
--border-width: 2px;
9+
}
10+
11+
*,
12+
*::before,
13+
*::after {
14+
box-sizing: border-box;
715
}
816

917
html {
@@ -19,23 +27,76 @@ a:visited {
1927
color: #dec7fa;
2028
}
2129

30+
.file {
31+
/* custom file input modified from https://github.com/mdo/wtf-forms/ */
32+
position: relative;
33+
display: inline-block;
34+
cursor: pointer;
35+
height: 3rem;
36+
37+
input {
38+
min-width: 14rem;
39+
margin: 0;
40+
filter: opacity(0);
41+
opacity: 0;
42+
}
43+
44+
.file-custom {
45+
position: absolute;
46+
top: 0;
47+
right: 0;
48+
left: 0;
49+
z-index: 5;
50+
height: 3rem;
51+
padding: 0.75rem 1.25rem;
52+
line-height: 1.5;
53+
background-color: var(--background);
54+
border: var(--border-width) solid var(--background-below);
55+
user-select: none;
56+
}
57+
58+
.file-custom::before {
59+
position: absolute;
60+
top: calc(-1 * var(--border-width));
61+
right: calc(-1 * var(--border-width));
62+
bottom: calc(-1 * var(--border-width));
63+
z-index: 6;
64+
display: block;
65+
content: "Browse";
66+
height: 3rem;
67+
padding: 0.75rem 1.25rem;
68+
line-height: 1.5;
69+
background-color: var(--background-above);
70+
border: var(--border-width) solid var(--background-below);
71+
}
72+
73+
.file-custom::after {
74+
content: "Add datapack(s)...";
75+
}
76+
}
77+
2278
.edit_area {
2379
background-color: var(--background);
2480
padding: 1em;
2581
}
2682

2783
.work_area {
28-
margin-top: 1em;
2984
display: flex;
3085
gap: 1em;
3186
align-items: stretch;
3287
}
3388

89+
#left-col {
90+
display: flex;
91+
flex-direction: column;
92+
gap: 1em;
93+
min-width: 25%;
94+
height: 100%;
95+
}
96+
3497
#datapack-display {
3598
background-color: var(--background-above);
36-
border: 2px var(--background-below) solid;
37-
38-
min-width: 25%;
99+
border: var(--border-width) var(--background-below) solid;
39100

40101
padding: 1em;
41102

@@ -73,10 +134,7 @@ a:visited {
73134

74135
.config-screen {
75136
background-color: var(--background-above);
76-
border: 2px;
77-
border-color: var(--background-below);
78-
border-style: solid;
79-
137+
border: var(--border-width) solid var(--background-below);
80138
width: 100%;
81139
padding: 1em;
82140
}

0 commit comments

Comments
 (0)