|
@@ -149,15 +149,89 @@
|
149
|
149
|
});
|
150
|
150
|
</script>
|
151
|
151
|
<style type="text/css">
|
152
|
|
- #mapcontainer { position: relative; width: 1024px; height: 1024px; }
|
|
152
|
+ body {
|
|
153
|
+ font-family: sans-serif;
|
|
154
|
+ margin: 0;
|
|
155
|
+ padding: 0;
|
|
156
|
+ }
|
|
157
|
+
|
|
158
|
+ #header, #header h1 {
|
|
159
|
+ margin: 0;
|
|
160
|
+ padding: 0;
|
|
161
|
+ }
|
|
162
|
+
|
|
163
|
+ #header {
|
|
164
|
+ padding: 10px 20px;
|
|
165
|
+ background-image: linear-gradient(bottom, rgb(255,255,255) 28%, rgb(244,245,242) 64%);
|
|
166
|
+ background-image: -o-linear-gradient(bottom, rgb(255,255,255) 28%, rgb(244,245,242) 64%);
|
|
167
|
+ background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 28%, rgb(244,245,242) 64%);
|
|
168
|
+ background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 28%, rgb(244,245,242) 64%);
|
|
169
|
+ background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 28%, rgb(244,245,242) 64%);
|
|
170
|
+
|
|
171
|
+ background-image: -webkit-gradient(
|
|
172
|
+ linear,
|
|
173
|
+ left bottom,
|
|
174
|
+ left top,
|
|
175
|
+ color-stop(0.28, rgb(255,255,255)),
|
|
176
|
+ color-stop(0.64, rgb(244,245,242))
|
|
177
|
+ );
|
|
178
|
+ border-bottom: 1px solid rgb(244, 245, 242);
|
|
179
|
+ }
|
|
180
|
+
|
|
181
|
+ #header img {
|
|
182
|
+ vertical-align: bottom;
|
|
183
|
+ }
|
|
184
|
+
|
|
185
|
+ #header span {
|
|
186
|
+ display: inline-block;
|
|
187
|
+ padding-bottom: 10px;
|
|
188
|
+ margin-left: 20px;
|
|
189
|
+ color: #300;
|
|
190
|
+ }
|
|
191
|
+
|
|
192
|
+ #sidebar {
|
|
193
|
+ float: left;
|
|
194
|
+ width: 200px;
|
|
195
|
+ padding: 10px;
|
|
196
|
+ min-height: 1024px;
|
|
197
|
+ border-right: 1px solid rgb(244, 245, 242);
|
|
198
|
+ }
|
|
199
|
+
|
|
200
|
+ #palette {
|
|
201
|
+ text-align: center;
|
|
202
|
+ }
|
|
203
|
+
|
|
204
|
+ #palette h2 {
|
|
205
|
+ margin: 0;
|
|
206
|
+ color: #300;
|
|
207
|
+ }
|
|
208
|
+
|
|
209
|
+ #palette p {
|
|
210
|
+ font-size: x-small;
|
|
211
|
+ margin-top: 0;
|
|
212
|
+ }
|
|
213
|
+
|
|
214
|
+ #mapcontainer {
|
|
215
|
+ position: relative;
|
|
216
|
+ width: 1024px;
|
|
217
|
+ height: 1024px;
|
|
218
|
+ margin-left: 221px;
|
|
219
|
+ }
|
|
220
|
+
|
153
|
221
|
.tower, .core { width: 40px; height: 40px; }
|
154
|
222
|
</style>
|
155
|
223
|
</head>
|
156
|
224
|
<body>
|
157
|
|
- <div id="mapcontainer"></div>
|
158
|
|
- <img src="res/images/coreIcon.png" alt="core" class="core">
|
159
|
|
-
|
160
|
|
- <div id="palette">
|
|
225
|
+ <div id="header">
|
|
226
|
+ <h1><img src="res/images/dd-logo.png" alt="Dungeon Defenders"><span>Layout Editor</span></h1>
|
161
|
227
|
</div>
|
|
228
|
+ <div id="sidebar">
|
|
229
|
+ <div id="palette">
|
|
230
|
+ <h2>Palette</h2>
|
|
231
|
+ <p>Drag and drop towers onto the map</p>
|
|
232
|
+ </div>
|
|
233
|
+ <img src="res/images/coreIcon.png" alt="core" class="core">
|
|
234
|
+ </div>
|
|
235
|
+ <div id="mapcontainer"></div>
|
162
|
236
|
</body>
|
163
|
237
|
</html>
|