archive
/
dundef-viewer
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Use less!

master
Chris Smith 12 years ago
parent
cac6243215
commit
d00cf53651
4 changed files with 237 additions and 205 deletions
Split View Show Diff Stats
  1. 2
    1
      index.html
  2. 9
    0
      res/js/less-1.2.1.min.js
  3. 0
    204
      res/style.css
  4. 226
    0
      res/style.less

+ 2
- 1
index.html View File 

@@ -8,7 +8,8 @@
8 8 
   <script src="res/data/towers.js" type="text/javascript"></script>
9 9 
   <script src="res/js/util.js" type="text/javascript"></script>
10 10 
   <script src="res/js/viewer.js" type="text/javascript"></script>
11 
-  <link rel="stylesheet" type="text/css" href="res/style.css">
11 
+  <link rel="stylesheet/less" type="text/css" href="res/style.less">
12 
+  <script src="res/js/less-1.2.1.min.js" type="text/javascript"></script>
12 13 
  </head>
13 14 
  <body>
14 15 
   <div id="header">

+ 9
- 0
res/js/less-1.2.1.min.js
File diff suppressed because it is too large
View File


+ 0
- 204
res/style.css View File 

@@ -1,204 +0,0 @@
1 
-body {
2 
-  font-family: sans-serif;
3 
-  margin: 0;
4 
-  padding: 0;
5 
-}
6 
-
7 
-#header, #header h1 {
8 
-  margin: 0;
9 
-  padding: 0;
10 
-}
11 
-
12 
-#header {
13 
-  height: 70px;
14 
-  padding: 10px 20px;
15 
-  background-image: linear-gradient(bottom, rgb(255,255,255) 28%, rgb(244,245,242) 64%);
16 
-  background-image: -o-linear-gradient(bottom, rgb(255,255,255) 28%, rgb(244,245,242) 64%);
17 
-  background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 28%, rgb(244,245,242) 64%);
18 
-  background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 28%, rgb(244,245,242) 64%);
19 
-  background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 28%, rgb(244,245,242) 64%);
20 
-  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.28, rgb(255,255,255)), color-stop(0.64, rgb(244,245,242)));
21 
-  border-bottom: 1px solid rgb(244, 245, 242);
22 
-}
23 
-
24 
-#header h1 {
25 
- float: left;
26 
-}
27 
-
28 
-#header #buttons {
29 
- float: right;
30 
- height: 40px;
31 
- margin: 15px;
32 
-}
33 
-
34 
-#header #createlayout {
35 
- color: #300;
36 
-}
37 
-
38 
-#header #savelayout {
39 
- color: #030;
40 
-}
41 
-
42 
-#header button {
43 
- font-variant: small-caps;
44 
- font-weight: bold;
45 
- text-transform: lowercase;
46 
- padding: 10px;
47 
-}
48 
-
49 
-#header img {
50 
-  vertical-align: bottom;
51 
-}
52 
-
53 
-#header span {
54 
-  display: inline-block;
55 
-  padding-bottom: 10px;
56 
-  margin-left: 20px;
57 
-  color: #300;
58 
-}
59 
-
60 
-#sidebar {
61 
-  float: left;
62 
-  width: 200px;
63 
-  padding: 10px;
64 
-  min-height: 1024px;
65 
-  border-right: 1px solid rgb(244, 245, 242);
66 
-  background-color: white;
67 
-}
68 
-
69 
-#sidebar > div {
70 
-  text-align: center;
71 
-  margin-bottom: 20px;
72 
-}
73 
-
74 
-h2 {
75 
-  margin: 0;
76 
-  color: #300;
77 
-}
78 
-
79 
-#notecontent {
80 
-  width: 100%;
81 
-  height: 300px;
82 
-  max-width: 100%;
83 
-}
84 
-
85 
-#palette p {
86 
-  font-size: x-small;
87 
-  margin-top: 0;
88 
-}
89 
-
90 
-#stats p {
91 
-  margin: 0;
92 
-  padding: 3px 0;
93 
-}
94 
-
95 
-#mapcontainer {
96 
-  position: relative;
97 
-  width: 1024px;
98 
-  height: 1024px;
99 
-  margin-left: 221px;
100 
-}
101 
-
102 
-#du_wrapper.over {
103 
-  background-color: #600;
104 
-  color: white;
105 
-}
106 
-
107 
-.tower, .core, #palette .tower.monk { width: 40px; height: 40px; }
108 
-.tower.monk, #palette .tower.monk.ui-draggable-dragging { width: 95px; height: 95px; }
109 
-.tower.monk { z-index: 97; }
110 
-.tower.huntress { z-index: 98; }
111 
-.tower.squire { z-index: 99; }
112 
-.tower.apprentice { z-index: 100; }
113 
-body .tower.ui-draggable-dragging { z-index: 101; }
114 
-
115 
-.mask {
116 
- position: fixed;
117 
- top: 0;
118 
- left: 0;
119 
- right: 0;
120 
- bottom: 0;
121 
- background-color: #999;
122 
- z-index: 200;
123 
- opacity: 0.8;
124 
-}
125 
-
126 
-.dialog {
127 
- position: fixed;
128 
- background-color: white;
129 
- border: 2px solid rgb(244, 245, 242);
130 
- z-index: 201;
131 
- overflow: auto;
132 
- text-align: center;
133 
- padding: 0;
134 
-}
135 
-
136 
-.dialog .container {
137 
- padding: 50px;
138 
-}
139 
-
140 
-#layoutpicker {
141 
- top: 150px;
142 
- left: 200px;
143 
- right: 200px;
144 
- bottom: 100px;
145 
-}
146 
-
147 
-#savedialog {
148 
- top: 200px;
149 
- left: 50%;
150 
- height: 300px;
151 
- width: 500px;
152 
- margin-left: -250px;
153 
-}
154 
-
155 
-#layoutpicker .container button {
156 
- margin: 30px;
157 
-}
158 
-
159 
-#layoutpicker button p {
160 
- margin: 5px;
161 
- font-size: large;
162 
-}
163 
-
164 
-#layoutpicker button img {
165 
- width: 200px;
166 
- height: 100px;
167 
-}
168 
-
169 
-.initiallyhidden {
170 
- display: none;
171 
-}
172 
-
173 
-.error {
174 
- color: red;
175 
- font-weight: bold;
176 
-}
177 
-
178 
-.dialog .close {
179 
- float: right;
180 
- margin: 0;
181 
- background: white url('images/close.png') no-repeat left center;
182 
- padding: 10px 10px 10px 25px;
183 
- border: 0;
184 
- cursor: pointer;
185 
-}
186 
-
187 
-.dialog .close:hover {
188 
- text-decoration: underline;
189 
-}
190 
-
191 
-#instructions {
192 
- padding: 10px;
193 
- border-bottom: 1px solid rgb(244, 245, 242);
194 
-}
195 
-
196 
-#instructions h2, #instructions p {
197 
- display: inline-block;
198 
- margin: 0;
199 
- padding-left: 10px;
200 
-}
201 
-
202 
-#instructions h2 {
203 
- padding-left: 20px;
204 
-}

+ 226
- 0
res/style.less View File 

@@ -0,0 +1,226 @@
1 
+@gradient-start-color: rgb(244,245,242);
2 
+@gradient-end-color: rgb(255,255,255);
3 
+
4 
+@heading-color: #300;
5 
+
6 
+@mask-color: #999;
7 
+@mask-opacity: 0.8;
8 
+
9 
+@create-color: @heading-color;
10 
+@save-color: #030;
11 
+
12 
+@border-color: @gradient-start-color;
13 
+@border: 1px solid @border-color;
14 
+
15 
+.linear-vertical-gradient(@start-color, @end-color, @start-pc: 0.64, @end-pc: 0.28) {
16 
+ background-image: linear-gradient(bottom, @end-color percentage(@end-pc), @start-color percentage(@start-pc));
17 
+ background-image: -o-linear-gradient(bottom, @end-color percentage(@end-pc), @start-color percentage(@start-pc));
18 
+ background-image: -moz-linear-gradient(bottom, @end-color percentage(@end-pc), @start-color percentage(@start-pc));
19 
+ background-image: -webkit-linear-gradient(bottom, @end-color percentage(@end-pc), @start-color percentage(@start-pc));
20 
+ background-image: -ms-linear-gradient(bottom, @end-color percentage(@end-pc), @start-color percentage(@start-pc));
21 
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(@end-pc, @gradient-end-color), color-stop(@start-pc, @gradient-start-color));
22 
+}
23 
+
24 
+body {
25 
+ font-family: sans-serif;
26 
+ margin: 0;
27 
+ padding: 0;
28 
+}
29 
+
30 
+#header {
31 
+ height: 70px;
32 
+ padding: 10px 20px;
33 
+ .linear-vertical-gradient(@gradient-start-color, @gradient-end-color);
34 
+ border-bottom: @border;
35 
+
36 
+ &, & h1 {
37 
+  margin: 0;
38 
+  padding: 0;
39 
+ }
40 
+
41 
+ h1 {
42 
+  float: left;
43 
+
44 
+  img {
45 
+   vertical-align: bottom;
46 
+   width: 106px;
47 
+   height: 70px;
48 
+  }
49 
+
50 
+  span {
51 
+   display: inline-block;
52 
+   padding-bottom: 10px;
53 
+   margin-left: 20px;
54 
+   color: @heading-color;
55 
+  }
56 
+ }
57 
+
58 
+ #buttons {
59 
+  float: right;
60 
+  height: 40px;
61 
+  margin: 15px;
62 
+
63 
+  #createlayout {
64 
+   color: @create-color;
65 
+  }
66 
+
67 
+  #savelayout {
68 
+   color: @save-color;
69 
+  }
70 
+
71 
+  button {
72 
+   font-variant: small-caps;
73 
+   font-weight: bold;
74 
+   text-transform: lowercase;
75 
+   padding: 10px;
76 
+  }
77 
+ }
78 
+}
79 
+
80 
+#sidebar {
81 
+ float: left;
82 
+ width: 200px;
83 
+ padding: 10px;
84 
+ min-height: 1024px;
85 
+ border-right: @border;
86 
+ background-color: white;
87 
+
88 
+ & > div {
89 
+  text-align: center;
90 
+  margin-bottom: 20px;
91 
+ }
92 
+}
93 
+
94 
+h2 {
95 
+ margin: 0;
96 
+ color: @heading-color;
97 
+}
98 
+
99 
+#notecontent {
100 
+ width: 100%;
101 
+ height: 300px;
102 
+ max-width: 100%;
103 
+}
104 
+
105 
+#palette p {
106 
+ font-size: x-small;
107 
+ margin-top: 0;
108 
+}
109 
+
110 
+#stats p {
111 
+ margin: 0;
112 
+ padding: 3px 0;
113 
+}
114 
+
115 
+#mapcontainer {
116 
+ position: relative;
117 
+ width: 1024px;
118 
+ height: 1024px;
119 
+ margin-left: 221px;
120 
+}
121 
+
122 
+#du_wrapper.over {
123 
+ background-color: #600;
124 
+ color: white;
125 
+}
126 
+
127 
+.tower, .core, #palette .tower.monk { width: 40px; height: 40px; }
128 
+.tower.monk, #palette .tower.monk.ui-draggable-dragging { width: 95px; height: 95px; }
129 
+.tower.monk { z-index: 97; }
130 
+.tower.huntress { z-index: 98; }
131 
+.tower.squire { z-index: 99; }
132 
+.tower.apprentice { z-index: 100; }
133 
+body .tower.ui-draggable-dragging { z-index: 101; }
134 
+
135 
+.mask {
136 
+ position: fixed;
137 
+ top: 0;
138 
+ left: 0;
139 
+ right: 0;
140 
+ bottom: 0;
141 
+ background-color: @mask-color;
142 
+ z-index: 200;
143 
+ opacity: @mask-opacity;
144 
+}
145 
+
146 
+.dialog {
147 
+ position: fixed;
148 
+ background-color: white;
149 
+ border: @border;
150 
+ z-index: 201;
151 
+ overflow: auto;
152 
+ text-align: center;
153 
+ padding: 0;
154 
+
155 
+ .container {
156 
+  padding: 50px;
157 
+ }
158 
+
159 
+ .close {
160 
+  float: right;
161 
+  margin: 0;
162 
+  background: white url('images/close.png') no-repeat left center;
163 
+  padding: 10px 10px 10px 25px;
164 
+  border: 0;
165 
+  cursor: pointer;
166 
+
167 
+  &:hover {
168 
+   text-decoration: underline;
169 
+  }
170 
+ }
171 
+}
172 
+
173 
+#layoutpicker {
174 
+ top: 150px;
175 
+ left: 200px;
176 
+ right: 200px;
177 
+ bottom: 100px;
178 
+
179 
+ .container button {
180 
+  margin: 30px;
181 
+ }
182 
+
183 
+ button {
184 
+  p {
185 
+   margin: 5px;
186 
+   font-size: large;
187 
+  }
188 
+
189 
+  img {
190 
+   width: 200px;
191 
+   height: 100px;
192 
+  }
193 
+ }
194 
+}
195 
+
196 
+#savedialog {
197 
+ top: 200px;
198 
+ left: 50%;
199 
+ height: 300px;
200 
+ width: 500px;
201 
+ margin-left: -250px;
202 
+}
203 
+
204 
+.initiallyhidden {
205 
+ display: none;
206 
+}
207 
+
208 
+.error {
209 
+ color: red;
210 
+ font-weight: bold;
211 
+}
212 
+
213 
+#instructions {
214 
+ padding: 10px;
215 
+ border-bottom: @border;
216 
+
217 
+ h2, p {
218 
+  display: inline-block;
219 
+  margin: 0;
220 
+  padding-left: 10px;
221 
+ }
222 
+
223 
+ h2 {
224 
+  padding-left: 20px;
225 
+ }
226 
+}

Write Preview
Loading…
Cancel
Save