├── Files
    ├── assets
    │   └── svg
    │   │   └── sprite.svg
    ├── css
    │   ├── style.css
    │   └── style.map
    ├── index.html
    ├── scss
    │   └── style.scss
    └── subwindow.html
├── IconMouseNormal.png
├── IconMouseOver.png
├── README.md
└── manifest.json


/Files/assets/svg/sprite.svg:
--------------------------------------------------------------------------------
 1 | <!-- svg icons -->
 2 | <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
 3 | 
 4 | 	<symbol id="window-control_close" viewBox="0 0 30 30">
 5 | 		<path d="M15.71,15l4.15-4.15a.5.5,0,0,0-.71-.71L15,14.29l-4.15-4.15a.5.5,0,1,0-.71.71L14.29,15l-4.15,4.15a.5.5,0,1,0,.71.71L15,15.71l4.15,4.15a.5.5,0,1,0,.71-.71Z"/>
 6 | 	</symbol>
 7 | 
 8 | 	<symbol id="window-control_maximize" viewBox="0 0 30 30">
 9 | 		<path d="M20,20H10V10H20Zm-9-1h8V11H11Z"/>
10 | 	</symbol>
11 | 
12 | 	<symbol id="window-control_restore" viewBox="0 0 30 30">
13 | 		<path d="M9,21h8V13H9Zm1-7h6v6H10Zm3-5v3h1V10h6v6H18v1h3V9Z"/>
14 | 	</symbol>
15 | 
16 | 	<symbol id="window-control_minimize" viewBox="0 0 30 30">
17 | 		<rect x="10" y="19" width="10" height="1"/>
18 | 	</symbol>
19 | 
20 | 	<symbol id="window-control_support" viewBox="0 0 30 30">
21 | 		<rect x="13.5" y="19" width="2" height="2"/>
22 | 		<path d="M16.5,9H12v1h4.5A1.5,1.5,0,0,1,18,11.5v1A1.5,1.5,0,0,1,16.5,14H14v3h1V15h1.5A2.5,2.5,0,0,0,19,12.5v-1A2.5,2.5,0,0,0,16.5,9Z"/>
23 | 	</symbol>
24 | 
25 | 	<symbol id="window-control_settings" viewBox="0 0 30 30">
26 | 		<path d="M23,16.5v-3H20.8A6,6,0,0,0,20.16,12l1.55-1.55L19.6,8.28,18,9.84A6,6,0,0,0,16.5,9.2V7h-3V9.2A6,6,0,0,0,12,9.84L10.4,8.28,8.28,10.4,9.84,12A6,6,0,0,0,9.2,13.5H7v3H9.2A6,6,0,0,0,9.84,18L8.28,19.6l2.12,2.12L12,20.16a6,6,0,0,0,1.54.64V23h3V20.8A6,6,0,0,0,18,20.16l1.55,1.55,2.12-2.12L20.16,18a6,6,0,0,0,.64-1.54ZM15,18a3,3,0,1,1,3-3A3,3,0,0,1,15,18Z"/>
27 | 	</symbol>
28 | 
29 | 	<symbol id="window-control_locked" viewBox="0 0 30 30">
30 | 		<path d="M18,15V11a2,2,0,0,0-2-2H14a2,2,0,0,0-2,2v4H10v6H20V15Zm-5,0V11a1,1,0,0,1,1-1h2a1,1,0,0,1,1,1v4Z"/>
31 | 	</symbol>
32 | 
33 | 	<symbol id="window-control_unlocked" viewBox="0 0 30 30">
34 | 		<path d="M18,17H13V9a1,1,0,0,1,1-1h2a1,1,0,0,1,1,1v4h1V9a2,2,0,0,0-2-2H14a2,2,0,0,0-2,2v8H10v6H20V17Z"/>
35 | 	</symbol>
36 | 
37 | 	<symbol id="search" viewBox="0 0 30 30">
38 | 		<path d="M17,8c-2.8,0-5,2.2-5,5c0,1.2,0.4,2.3,1.1,3.1l-4,4c-0.2,0.2-0.2,0.5,0,0.7C9.2,21,9.4,21,9.5,21
39 | 		s0.3,0,0.4-0.1l4-4c0.9,0.7,1.9,1.1,3.1,1.1c2.8,0,5-2.2,5-5S19.8,8,17,8z M17,17c-1,0-1.8-0.4-2.5-0.9c-0.2-0.2-0.4-0.4-0.6-0.6
40 | 		C13.4,14.8,13,14,13,13c0-2.2,1.8-4,4-4s4,1.8,4,4S19.2,17,17,17z"/>
41 | 	</symbol>
42 | 
43 | 	<symbol id="home" viewBox="0 0 30 30">
44 | 		<path d="M22.77,13.08,15,8,7.23,13.08a.5.5,0,0,0,.55.84L10,12.46v9a.5.5,0,0,0,1,0V11.81L15,9.2l4,2.61V21.5a.5.5,0,0,0,1,0v-9l2.23,1.45a.5.5,0,0,0,.55-.84Z"/>
45 | 	</symbol>
46 | 
47 | 	<symbol id="bottom-arrow-indicator" viewBox="0 0 30 30">
48 | 		<path d="M15,17,9.26,13.92a.49.49,0,0,1-.2-.67.5.5,0,0,1,.68-.2L15,15.88l5.26-2.82a.5.5,0,0,1,.68.2.49.49,0,0,1-.2.67Z"/>
49 | 	</symbol>
50 | 
51 | 	<symbol id="right-arrow-indicator" viewBox="0 0 30 30">
52 | 		<path d="M17,15l-3.08,5.74a.49.49,0,0,1-.67.2.5.5,0,0,1-.2-.68L15.88,15,13.06,9.74a.5.5,0,0,1,.2-.68.49.49,0,0,1,.67.2Z"/>
53 | 	</symbol>
54 | 
55 | 	<symbol id="external-link" viewBox="0 0 30 30">
56 | 		<path d="M16.5,14a.5.5,0,0,1-.35-.85l4.5-4.5a.5.5,0,0,1,.71.71l-4.5,4.5A.5.5,0,0,1,16.5,14Z"/>
57 | 		<path d="M21.5,13a.5.5,0,0,1-.5-.5V9H17.5a.5.5,0,0,1,0-1H22v4.5A.5.5,0,0,1,21.5,13Z"/>
58 | 		<polygon points="19 14 19 19 11 19 11 11 16 11 16 10 10 10 10 20 20 20 20 14 19 14"/>
59 | 	</symbol>
60 | 
61 | 	<symbol id="add+" viewBox="0 0 30 30">
62 | 		<rect x="14" y="9" width="1" height="11"/>
63 | 		<rect x="9" y="14" width="11" height="1"/>
64 | 	</symbol>
65 | 
66 | 	<symbol id="right-arrow" viewBox="0 0 30 30">
67 | 		<path d="M9,14h10.3L15,8.8c-0.2-0.2-0.1-0.5,0.1-0.7c0.2-0.2,0.5-0.1,0.7,0.1l5.3,6.3l-5.3,6.3
68 | 		c-0.1,0.1-0.2,0.2-0.4,0.2c-0.1,0-0.2,0-0.3-0.1c-0.2-0.2-0.2-0.5-0.1-0.7l4.3-5.2H9V14z"/>
69 | 	</symbol>
70 | 
71 | </svg>
72 | 


--------------------------------------------------------------------------------
/Files/css/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 |   font-weight: normal;
  6 | }
  7 | 
  8 | img {
  9 |   max-width: 100%;
 10 | }
 11 | 
 12 | html, body {
 13 |   height: 100%;
 14 |   cursor: default;
 15 |   padding: 0;
 16 |   margin: 0;
 17 |   overflow: hidden;
 18 |   background: transparent;
 19 | }
 20 | 
 21 | body {
 22 |   font-family: 'Titillium Web', sans-serif;
 23 |   font-size: 16px;
 24 | }
 25 | 
 26 | h1 {
 27 |   font-size: 22px;
 28 | }
 29 | 
 30 | p {
 31 |   color: #6c6c6c;
 32 |   font-size: 16px;
 33 |   line-height: 18px;
 34 | }
 35 | 
 36 | button {
 37 |   border: none;
 38 |   font-family: inherit;
 39 |   background-color: inherit;
 40 | }
 41 | 
 42 | button:focus {
 43 |   outline: none;
 44 | }
 45 | 
 46 | button, i {
 47 |   position: relative;
 48 |   width: var(--size, 30px);
 49 |   height: var(--size, 30px);
 50 |   display: flex;
 51 |   align-items: center;
 52 |   justify-content: center;
 53 |   flex: 0 0 auto;
 54 |   cursor: default;
 55 |   transition: 0.15s;
 56 | }
 57 | 
 58 | button svg, i svg {
 59 |   width: 100%;
 60 |   height: 100%;
 61 |   flex: 0 0 auto;
 62 |   pointer-events: none;
 63 |   user-select: none;
 64 | }
 65 | 
 66 | .svg-icon-fill {
 67 |   fill: currentcolor;
 68 | }
 69 | 
 70 | .svg-icon-stroke {
 71 |   fill: none;
 72 |   stroke: currentcolor;
 73 | }
 74 | 
 75 | .toggle-icons {
 76 |   position: absolute;
 77 |   width: 100%;
 78 |   height: 100%;
 79 |   opacity: 0;
 80 | }
 81 | 
 82 | .toggle-icons ~ svg:first-of-type {
 83 |   display: block;
 84 | }
 85 | 
 86 | .toggle-icons ~ svg:nth-of-type(2) {
 87 |   display: none;
 88 | }
 89 | 
 90 | .toggle-icons:checked ~ svg:first-of-type {
 91 |   display: none;
 92 | }
 93 | 
 94 | .toggle-icons:checked ~ svg:nth-of-type(2) {
 95 |   display: block;
 96 | }
 97 | 
 98 | .window-controls-group {
 99 |   display: flex;
100 | }
101 | 
102 | .window-controls-group button {
103 |   --size: 30px;
104 | }
105 | 
106 | .window-control {
107 |   color: #a8a8a8;
108 |   background-color: transparent;
109 | }
110 | 
111 | .window-control:hover {
112 |   color: #dedede;
113 |   background-color: #272727;
114 | }
115 | 
116 | .window-control-close:hover {
117 |   background-color: #c21913;
118 | }
119 | 
120 | .content {
121 |   position: relative;
122 |   color: #b6b6b6;
123 |   background-color: #131313;
124 |   height: 100%;
125 |   display: flex;
126 |   flex-direction: column;
127 | }
128 | 
129 | .content:before {
130 |   content: "";
131 |   position: absolute;
132 |   border: 1px solid #333333;
133 |   top: -1px;
134 |   left: -1px;
135 |   right: -1px;
136 |   bottom: -1px;
137 |   pointer-events: none;
138 | }
139 | 
140 | .btn-group {
141 |   display: flex;
142 |   flex-wrap: wrap;
143 |   margin-left: -10px;
144 |   margin-right: -10px;
145 | }
146 | 
147 | .btn-group .btn {
148 |   flex: 1 1 140px;
149 |   min-width: 140px;
150 | }
151 | 
152 | .btn-group > * {
153 |   margin: 5px 10px;
154 | }
155 | 
156 | .btn {
157 |   position: relative;
158 |   font-size: 15px;
159 |   text-transform: capitalize;
160 |   padding: 0 10px;
161 |   min-width: 120px;
162 |   height: 30px;
163 |   color: white;
164 |   background-color: #c21913;
165 |   text-align: center;
166 |   display: flex;
167 |   align-items: center;
168 |   justify-content: center;
169 |   transition: 0.15s;
170 |   cursor: default;
171 |   -webkit-user-select: none;
172 | }
173 | 
174 | .btn:hover {
175 |   background-color: red;
176 | }
177 | 
178 | .btn:active {
179 |   background-color: #c21913;
180 | }
181 | 
182 | header {
183 |   flex-shrink: 0;
184 |   display: flex;
185 | }
186 | 
187 | header > *:only-of-type, header * + * {
188 |   margin-left: auto;
189 | }
190 | 
191 | main {
192 |   padding: 30px;
193 |   flex: auto;
194 |   display: flex;
195 |   flex-direction: column;
196 | }
197 | 
198 | main > * + * {
199 |   margin-top: 20px;
200 | }
201 | 
202 | main > h1 + p {
203 |   margin-top: 3px;
204 | }
205 | 
206 | html {
207 |   background: rgba(0, 0, 0, 0.01);
208 |   padding: 10px;
209 | }
210 | 
211 | html.maximized {
212 |   padding: 0;
213 | }
214 | 
215 | html.maximized body {
216 |   box-shadow: none;
217 | }
218 | 
219 | html.maximized .resize {
220 |   transform: none;
221 | }
222 | 
223 | body {
224 |   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.75);
225 |   overflow: visible;
226 | }
227 | 
228 | .resize {
229 |   position: fixed;
230 |   z-index: 1000;
231 |   opacity: .5;
232 | }
233 | 
234 | html.maximized .resize {
235 |   display: none;
236 | }
237 | 
238 | .resize.top {
239 |   top: 5px;
240 |   cursor: n-resize;
241 | }
242 | 
243 | .resize.bottom {
244 |   bottom: 5px;
245 |   cursor: s-resize;
246 | }
247 | 
248 | .resize.left {
249 |   left: 5px;
250 |   cursor: e-resize;
251 | }
252 | 
253 | .resize.right {
254 |   right: 5px;
255 |   cursor: w-resize;
256 |   z-index: 1;
257 | }
258 | 
259 | .resize.horizontal {
260 |   left: 15px;
261 |   right: 15px;
262 |   height: 10px;
263 | }
264 | 
265 | .resize.vertical {
266 |   top: 15px;
267 |   bottom: 15px;
268 |   width: 10px;
269 | }
270 | 
271 | .resize.corner {
272 |   width: 10px;
273 |   height: 10px;
274 | }
275 | 
276 | .resize.top-left {
277 |   top: 5px;
278 |   left: 5px;
279 |   cursor: nw-resize;
280 | }
281 | 
282 | .resize.top-right {
283 |   top: 5px;
284 |   right: 5px;
285 |   cursor: ne-resize;
286 | }
287 | 
288 | .resize.bottom-left {
289 |   bottom: 5px;
290 |   left: 5px;
291 |   cursor: sw-resize;
292 | }
293 | 
294 | .resize.bottom-right {
295 |   bottom: 5px;
296 |   right: 5px;
297 |   cursor: se-resize;
298 | }
299 | 
300 | /*# sourceMappingURL=data:application/json;charset=utf8;base64,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QUNmLGNBQWE7RUFDYixZQUFXO0NBc0VYOztBQXBFQTtFQUNDLGNBQWE7Q0FDYjs7QUFQRjtFQVVFLFNBbkNnQztFQW9DaEMsaUJBQWdCO0NBQ2hCOztBQVpGO0VBZUUsWUF4Q2dDO0VBeUNoQyxpQkFBZ0I7Q0FDaEI7O0FBakJGO0VBb0JFLFVBN0NnQztFQThDaEMsaUJBQWdCO0NBQ2hCOztBQXRCRjtFQXlCRSxXQWxEZ0M7RUFtRGhDLGlCQUFnQjtFQUNoQixXQUFVO0NBQ1Y7O0FBNUJGO0VBK0JFLFdBQXFDO0VBQ3JDLFlBQXNDO0VBQ3RDLGFBM0RrQjtDQTZEbEI7O0FBbkNGO0VBc0NFLFVBQW9DO0VBQ3BDLGFBQXVDO0VBQ3ZDLFlBbEVrQjtDQW9FbEI7O0FBMUNGO0VBNkNFLFlBdkVrQjtFQXdFbEIsYUF4RWtCO0NBMEVsQjs7QUFoREY7RUFtREUsU0E1RWdDO0VBNkVoQyxVQTdFZ0M7RUE4RWhDLGtCQUFpQjtDQUNqQjs7QUF0REY7RUF5REUsU0FsRmdDO0VBbUZoQyxXQW5GZ0M7RUFvRmhDLGtCQUFpQjtDQUNqQjs7QUE1REY7RUErREUsWUF4RmdDO0VBeUZoQyxVQXpGZ0M7RUEwRmhDLGtCQUFpQjtDQUNqQjs7QUFsRUY7RUFxRUUsWUE5RmdDO0VBK0ZoQyxXQS9GZ0M7RUFnR2hDLGtCQUFpQjtDQUNqQiIsImZpbGUiOiJzdHlsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvLyByZXNldCAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG5cbioge1xuXHRtYXJnaW46IDA7XG5cdHBhZGRpbmc6IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGZvbnQtd2VpZ2h0OiBub3JtYWw7XG59XG5cbmltZyB7XG5cdG1heC13aWR0aDogMTAwJTtcbn1cblxuLy8gY29sb3JzIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cblxuJHJlZDAxOiByZ2IoMTk0LCAyNSwgMTkpOyAvL3JlZFxuJHJlZDAyOiByZ2IoMjU1LCAwLCAwKTsgLy9yZWRcblxuJGdyYXkwMTk6IHJnYigxOSwgMTksIDE5KTtcbiRncmF5MDM5OiByZ2IoMzksIDM5LCAzOSk7XG4kZ3JheTA1MTogcmdiKDUxLCA1MSwgNTEpO1xuJGdyYXkwNzk6IHJnYig3OSwgNzksIDc5KTtcbiRncmF5MTA4OiByZ2IoMTA4LCAxMDgsIDEwOCk7XG4kZ3JheTE2ODogcmdiKDE2OCwgMTY4LCAxNjgpO1xuJGdyYXkxODI6IHJnYigxODIsIDE4MiwgMTgyKTtcbiRncmF5MjIyOiByZ2IoMjIyLCAyMjIsIDIyMik7XG5cbi8vIGRhcmsgdGhlbWVcbiRkYXJrLWJhY2tncm91bmRfbWFpbjogJGdyYXkwMTk7XG4kZGFyay1mb3JlZ3JvdW5kX21haW4tb24tZGFyazogJGdyYXkxNjg7XG4kZGFyay1iYWNrZ3JvdW5kX3NlY29uZGFyeTogJGdyYXkwMzk7XG4kZGFyay1iYWNrZ3JvdW5kX3RoaXJkOiAkZ3JheTA1MTtcbiRkYXJrLWJhY2tncm91bmRfZm9ydGg6ICRncmF5MDc5O1xuXG4kZGFyay1mb3JlZ3JvdW5kX21haW46ICRncmF5MTgyO1xuJGRhcmstZm9yZWdyb3VuZF9zZWNvbmRhcnk6ICRncmF5MTA4O1xuJGRhcmstZm9yZWdyb3VuZF90aGlyZDogJGdyYXkwNzk7XG5cbiRkYXJrLWJhY2tncm91bmRfbWFpbi1ob3ZlcjogJGRhcmstYmFja2dyb3VuZF9zZWNvbmRhcnk7XG4kZGFyay1iYWNrZ3JvdW5kX3NlY29uZGFyeS1ob3ZlcjogJGRhcmstYmFja2dyb3VuZF90aGlyZDtcbiRkYXJrLWZvcmVncm91bmRfbWFpbi1ob3ZlcjogJGdyYXkyMjI7XG5cbi8vIHZhcnMgLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbiRmYXN0LWhvdmVyOiAuMTVzO1xuXG5odG1sLCBib2R5IHtcblx0aGVpZ2h0OiAxMDAlO1xuXHRjdXJzb3I6IGRlZmF1bHQ7XG5cdHBhZGRpbmc6IDA7XG5cdG1hcmdpbjogMDtcblx0b3ZlcmZsb3c6IGhpZGRlbjtcblx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG59XG5cbi8vIHR5cG9ncmFwaHlcbmJvZHkge1xuXHRmb250LWZhbWlseTogJ1RpdGlsbGl1bSBXZWInLCBzYW5zLXNlcmlmO1xuXHRmb250LXNpemU6IDE2cHg7XG59XG5cbmgxIHtcblx0Zm9udC1zaXplOiAyMnB4O1xufVxuXG5wIHtcblx0Y29sb3I6ICRkYXJrLWZvcmVncm91bmRfc2Vjb25kYXJ5O1xuXHRmb250LXNpemU6IDE2cHg7XG5cdGxpbmUtaGVpZ2h0OiAxOHB4O1xufVxuXG4vLyBidXR0b25zXG5idXR0b24ge1xuXHRib3JkZXI6IG5vbmU7XG5cdGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiBpbmhlcml0O1xufVxuXG5idXR0b246Zm9jdXMge1xuXHRvdXRsaW5lOiBub25lO1xufVxuXG5idXR0b24sIGkge1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHdpZHRoOiB2YXIoLS1zaXplLCAzMHB4KTtcblx0aGVpZ2h0OiB2YXIoLS1zaXplLCAzMHB4KTtcblx0ZGlzcGxheTogZmxleDtcblx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdGZsZXg6IDAgMCBhdXRvO1xuXHRjdXJzb3I6IGRlZmF1bHQ7XG5cdHRyYW5zaXRpb246ICRmYXN0LWhvdmVyO1xuXG5cdHN2ZyB7XG5cdFx0d2lkdGg6IDEwMCU7XG5cdFx0aGVpZ2h0OiAxMDAlO1xuXHRcdGZsZXg6IDAgMCBhdXRvO1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRcdHVzZXItc2VsZWN0OiBub25lO1xuXHR9XG59XG5cbi5zdmctaWNvbi1maWxsIHtcblx0ZmlsbDogY3VycmVudGNvbG9yO1xufVxuXG4uc3ZnLWljb24tc3Ryb2tlIHtcblx0ZmlsbDogbm9uZTtcblx0c3Ryb2tlOiBjdXJyZW50Y29sb3I7XG59XG5cbi50b2dnbGUtaWNvbnMge1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHdpZHRoOiAxMDAlO1xuXHRoZWlnaHQ6IDEwMCU7XG5cdG9wYWNpdHk6IDA7XG5cblx0fiBzdmc6Zmlyc3Qtb2YtdHlwZSB7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdH1cblxuXHR+IHN2ZzpudGgtb2YtdHlwZSgyKSB7XG5cdFx0ZGlzcGxheTogbm9uZTtcblx0fVxuXG5cdCY6Y2hlY2tlZCB7XG5cdFx0fiBzdmc6Zmlyc3Qtb2YtdHlwZSB7XG5cdFx0XHRkaXNwbGF5OiBub25lO1xuXHRcdH1cblxuXHRcdH4gc3ZnOm50aC1vZi10eXBlKDIpIHtcblx0XHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdH1cblx0fVxufVxuXG4ud2luZG93LWNvbnRyb2xzLWdyb3VwIHtcblx0ZGlzcGxheTogZmxleDtcblxuXHRidXR0b24ge1xuXHRcdC0tc2l6ZTogMzBweDtcblx0fVxufVxuXG4ud2luZG93LWNvbnRyb2wge1xuXHRjb2xvcjogJGRhcmstZm9yZWdyb3VuZF9tYWluLW9uLWRhcms7XG5cdGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuXG5cdCY6aG92ZXIge1xuXHRcdGNvbG9yOiAkZGFyay1mb3JlZ3JvdW5kX21haW4taG92ZXI7XG5cdFx0YmFja2dyb3VuZC1jb2xvcjogJGRhcmstYmFja2dyb3VuZF9tYWluLWhvdmVyO1xuXHR9XG59XG5cbi53aW5kb3ctY29udHJvbC1jbG9zZTpob3ZlciB7XG5cdGJhY2tncm91bmQtY29sb3I6ICRyZWQwMTtcbn1cblxuLmNvbnRlbnQge1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdGNvbG9yOiAkZGFyay1mb3JlZ3JvdW5kX21haW47XG5cdGJhY2tncm91bmQtY29sb3I6ICRkYXJrLWJhY2tncm91bmRfbWFpbjtcblx0aGVpZ2h0OiAxMDAlO1xuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXG5cdCY6YmVmb3JlIHtcblx0XHRjb250ZW50OiBcIlwiO1xuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRib3JkZXI6IDFweCBzb2xpZCAkZGFyay1iYWNrZ3JvdW5kX3RoaXJkO1xuXHRcdHRvcDogLTFweDtcblx0XHRsZWZ0OiAtMXB4O1xuXHRcdHJpZ2h0OiAtMXB4O1xuXHRcdGJvdHRvbTogLTFweDtcblx0XHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0fVxufVxuXG4uYnRuLWdyb3VwIHtcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC13cmFwOiB3cmFwO1xuXHRtYXJnaW4tbGVmdDogLTEwcHg7XG5cdG1hcmdpbi1yaWdodDogLTEwcHg7XG5cblx0LmJ0biB7XG5cdFx0ZmxleDogMSAxIDE0MHB4O1xuXHRcdG1pbi13aWR0aDogMTQwcHg7XG5cdH1cblxuXHQ+ICoge1xuXHRcdG1hcmdpbjogNXB4IDEwcHg7XG5cdH1cbn1cblxuLmJ0biB7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Zm9udC1zaXplOiAxNXB4O1xuXHR0ZXh0LXRyYW5zZm9ybTogY2FwaXRhbGl6ZTtcblx0cGFkZGluZzogMCAxMHB4O1xuXHRtaW4td2lkdGg6IDEyMHB4O1xuXHRoZWlnaHQ6IDMwcHg7XG5cdGNvbG9yOiB3aGl0ZTtcblx0YmFja2dyb3VuZC1jb2xvcjogJHJlZDAxO1xuXHR0ZXh0LWFsaWduOiBjZW50ZXI7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHR0cmFuc2l0aW9uOiAkZmFzdC1ob3Zlcjtcblx0Y3Vyc29yOiBkZWZhdWx0O1xuXHQtd2Via2l0LXVzZXItc2VsZWN0OiBub25lO1xuXG5cdCY6aG92ZXIge1xuXHRcdGJhY2tncm91bmQtY29sb3I6ICRyZWQwMjtcblx0fVxuXG5cdCY6YWN0aXZlIHtcblx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAkcmVkMDE7XG5cdH1cbn1cblxuLy8gY29udGVudFxuaGVhZGVyIHtcblx0ZmxleC1zaHJpbms6IDA7XG5cdGRpc3BsYXk6IGZsZXg7XG5cblx0PiAqOm9ubHktb2YtdHlwZSwgKiArICoge1xuXHRcdG1hcmdpbi1sZWZ0OiBhdXRvO1xuXHR9XG59XG5cbm1haW4ge1xuXHRwYWRkaW5nOiAzMHB4O1xuXHRmbGV4OiBhdXRvO1xuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXG5cdD4gKiArICoge1xuXHRcdG1hcmdpbi10b3A6IDIwcHg7XG5cdH1cblxuXHQ+IGgxICsgcCB7XG5cdFx0bWFyZ2luLXRvcDogM3B4O1xuXHR9XG59XG5cbi8vIHdpbmRvd19zaGFkb3dfYW5kX3Jlc2l6aW5nXG4kd2luZG93LW1hcmdpbjogMTBweDtcbiRyZXNpemUtaW5kZW50OiAkd2luZG93LW1hcmdpbiAvIDI7XG5cbmh0bWwge1xuXHRiYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDAuMDEpO1xuXHRwYWRkaW5nOiAkd2luZG93LW1hcmdpbjtcblxuXHQmLm1heGltaXplZCB7XG5cdFx0cGFkZGluZzogMDtcblxuXHRcdGJvZHkge1xuXHRcdFx0Ym94LXNoYWRvdzogbm9uZTtcblx0XHR9XG5cblx0XHQucmVzaXplIHtcblx0XHRcdHRyYW5zZm9ybTogbm9uZTtcblx0XHR9XG5cdH1cbn1cblxuYm9keSB7XG5cdGJveC1zaGFkb3c6IDAgMCAxMHB4IDAgcmdiYSgwLCAwLCAwLCAwLjc1KTtcblx0b3ZlcmZsb3c6IHZpc2libGU7XG59XG5cbi8vcmVzaXplXG4ucmVzaXplIHtcblx0cG9zaXRpb246IGZpeGVkO1xuXHR6LWluZGV4OiAxMDAwO1xuXHRvcGFjaXR5OiAuNTtcblxuXHRodG1sLm1heGltaXplZCAmIHtcblx0XHRkaXNwbGF5OiBub25lO1xuXHR9XG5cblx0Ji50b3Age1xuXHRcdHRvcDogJHJlc2l6ZS1pbmRlbnQ7XG5cdFx0Y3Vyc29yOiBuLXJlc2l6ZTtcblx0fVxuXG5cdCYuYm90dG9tIHtcblx0XHRib3R0b206ICRyZXNpemUtaW5kZW50O1xuXHRcdGN1cnNvcjogcy1yZXNpemU7XG5cdH1cblxuXHQmLmxlZnQge1xuXHRcdGxlZnQ6ICRyZXNpemUtaW5kZW50O1xuXHRcdGN1cnNvcjogZS1yZXNpemU7XG5cdH1cblxuXHQmLnJpZ2h0IHtcblx0XHRyaWdodDogJHJlc2l6ZS1pbmRlbnQ7XG5cdFx0Y3Vyc29yOiB3LXJlc2l6ZTtcblx0XHR6LWluZGV4OiAxO1xuXHR9XG5cblx0Ji5ob3Jpem9udGFsIHtcblx0XHRsZWZ0OiAkd2luZG93LW1hcmdpbiArICRyZXNpemUtaW5kZW50O1xuXHRcdHJpZ2h0OiAkd2luZG93LW1hcmdpbiArICRyZXNpemUtaW5kZW50O1xuXHRcdGhlaWdodDogJHdpbmRvdy1tYXJnaW47XG5cdFx0Ly8gYmFja2dyb3VuZC1jb2xvcjogeWVsbG93O1xuXHR9XG5cblx0Ji52ZXJ0aWNhbCB7XG5cdFx0dG9wOiAkd2luZG93LW1hcmdpbiArICRyZXNpemUtaW5kZW50O1xuXHRcdGJvdHRvbTogJHdpbmRvdy1tYXJnaW4gKyAkcmVzaXplLWluZGVudDtcblx0XHR3aWR0aDogJHdpbmRvdy1tYXJnaW47XG5cdFx0Ly8gYmFja2dyb3VuZC1jb2xvcjogcmVkO1xuXHR9XG5cblx0Ji5jb3JuZXIge1xuXHRcdHdpZHRoOiAkd2luZG93LW1hcmdpbjtcblx0XHRoZWlnaHQ6ICR3aW5kb3ctbWFyZ2luO1xuXHRcdC8vIGJhY2tncm91bmQtY29sb3I6IGdyZWVuO1xuXHR9XG5cblx0Ji50b3AtbGVmdCB7XG5cdFx0dG9wOiAkcmVzaXplLWluZGVudDtcblx0XHRsZWZ0OiAkcmVzaXplLWluZGVudDtcblx0XHRjdXJzb3I6IG53LXJlc2l6ZTtcblx0fVxuXG5cdCYudG9wLXJpZ2h0IHtcblx0XHR0b3A6ICRyZXNpemUtaW5kZW50O1xuXHRcdHJpZ2h0OiAkcmVzaXplLWluZGVudDtcblx0XHRjdXJzb3I6IG5lLXJlc2l6ZTtcblx0fVxuXG5cdCYuYm90dG9tLWxlZnQge1xuXHRcdGJvdHRvbTogJHJlc2l6ZS1pbmRlbnQ7XG5cdFx0bGVmdDogJHJlc2l6ZS1pbmRlbnQ7XG5cdFx0Y3Vyc29yOiBzdy1yZXNpemU7XG5cdH1cblxuXHQmLmJvdHRvbS1yaWdodCB7XG5cdFx0Ym90dG9tOiAkcmVzaXplLWluZGVudDtcblx0XHRyaWdodDogJHJlc2l6ZS1pbmRlbnQ7XG5cdFx0Y3Vyc29yOiBzZS1yZXNpemU7XG5cdH1cbn1cbiJdfQ== */
301 | 


--------------------------------------------------------------------------------
/Files/css/style.map:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"version": 3,
 3 | 	"file": "../scss/style.css",
 4 | 	"sources": [
 5 | 		"../scss/style.scss"
 6 | 	],
 7 | 	"sourcesContent": [
 8 | 		"// reset ----------------------------------\n\n* {\n\tmargin: 0;\n\tpadding: 0;\n\tbox-sizing: border-box;\n\tfont-weight: normal;\n}\n\nimg {\n\tmax-width: 100%;\n}\n\n// colors -------------------------------\n\n$red01: rgb(194, 25, 19); //red\n$red02: rgb(255, 0, 0); //red\n\n$gray019: rgb(19, 19, 19);\n$gray039: rgb(39, 39, 39);\n$gray051: rgb(51, 51, 51);\n$gray079: rgb(79, 79, 79);\n$gray108: rgb(108, 108, 108);\n$gray168: rgb(168, 168, 168);\n$gray182: rgb(182, 182, 182);\n$gray222: rgb(222, 222, 222);\n\n// dark theme\n$dark-background_main: $gray019;\n$dark-foreground_main-on-dark: $gray168;\n$dark-background_secondary: $gray039;\n$dark-background_third: $gray051;\n$dark-background_forth: $gray079;\n\n$dark-foreground_main: $gray182;\n$dark-foreground_secondary: $gray108;\n$dark-foreground_third: $gray079;\n\n$dark-background_main-hover: $dark-background_secondary;\n$dark-background_secondary-hover: $dark-background_third;\n$dark-foreground_main-hover: $gray222;\n\n// vars -----------------------\n$fast-hover: .15s;\n\nhtml, body {\n\theight: 100%;\n\tcursor: default;\n\tpadding: 0;\n\tmargin: 0;\n\toverflow: hidden;\n\tbackground: transparent;\n}\n\n// typography\nbody {\n\tfont-family: 'Titillium Web', sans-serif;\n\tfont-size: 16px;\n}\n\nh1 {\n\tfont-size: 22px;\n}\n\np {\n\tcolor: $dark-foreground_secondary;\n  font-size: 16px;\n  line-height: 18px;\n}\n\n// buttons\nbutton {\n  border: none;\n  font-family: inherit;\n  background-color: inherit;\n}\n\nbutton:focus {\n  outline: none;\n}\n\nbutton, i {\n  position: relative;\n  width: var(--size, 30px);\n  height: var(--size, 30px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  cursor: default;\n  transition: $fast-hover;\n\n  svg {\n    width: 100%;\n    height: 100%;\n    flex: 0 0 auto;\n    pointer-events: none;\n    user-select: none;\n  }\n}\n\n.svg-icon-fill {\n  fill: currentcolor;\n}\n\n.svg-icon-stroke {\n  fill: none;\n  stroke: currentcolor;\n}\n\n.toggle-icons {\n\tposition: absolute;\n\twidth: 100%;\n\theight: 100%;\n\topacity: 0;\n\n\t~ svg:first-of-type {\n\t\tdisplay: block;\n\t}\n\n\t~ svg:nth-of-type(2) {\n\t\tdisplay: none;\n\t}\n\n\t&:checked {\n\t\t~ svg:first-of-type {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t~ svg:nth-of-type(2) {\n\t\t\tdisplay: block;\n\t\t}\n\t}\n}\n\n.window-controls-group {\n  display: flex;\n\n  button {\n    --size: 30px;\n  }\n}\n\n.window-control {\n  color: $dark-foreground_main-on-dark;\n  background-color: transparent;\n\n  &:hover {\n  \tcolor: $dark-foreground_main-hover;\n  \tbackground-color: $dark-background_main-hover;\n  }\n}\n\n.window-control-close:hover {\n  background-color: $red01;\n}\n\n.content {\n\tposition: relative;\n\tcolor: $dark-foreground_main;\n\tbackground-color: $dark-background_main;\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t&:before {\n    content: \"\";\n    position: absolute;\n    border: 1px solid $dark-background_third;\n    top: -1px;\n    left: -1px;\n    right: -1px;\n    bottom: -1px;\n    pointer-events: none;\n  }\n}\n\n.btn-group {\n  display: flex;\n  flex-wrap: wrap;\n  margin-left: -10px;\n  margin-right: -10px;\n\n  .btn {\n    flex: 1 1 140px;\n    min-width: 140px;\n  }\n\n  > * {\n  \tmargin: 5px 10px;\n  }\n}\n\n.btn {\n  position: relative;\n  font-size: 15px;\n  text-transform: capitalize;\n  padding: 0 10px;\n  min-width: 120px;\n  height: 30px;\n  color: white;\n  background-color: $red01;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: $fast-hover;\n  cursor: default;\n  -webkit-user-select: none;\n\n  &:hover {\n    background-color: $red02;\n  }\n\n  &:active {\n    background-color: $red01;\n  }\n}\n\n// content\nheader {\n\tflex-shrink: 0;\n\tdisplay: flex;\n\n\t> *:only-of-type, * + * {\n\t\tmargin-left: auto;\n\t}\n}\n\nmain {\n\tpadding: 30px;\n\tflex: auto;\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t> * + * {\n\t\tmargin-top: 20px;\n\t}\n\n\t> h1 + p {\n\t\tmargin-top: 3px;\n\t}\n}\n\n// window_shadow_and_resizing\n$window-shadow: 10px;\n$resize-size: $window-shadow;\n$resize-indent: $resize-size/2;\n\nhtml {\n\tpadding: $window-shadow;\n\n\t&.maximized {\n\t\tpadding: 0;\n\n\t\tbody {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t.resize {\n\t\t\ttransform: none;\n\t\t}\n\t}\n}\n\nbody {\n\tbox-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.75);\n\toverflow: visible;\n}\n\n//resize\n.resize {\n\tposition: absolute;\n\tz-index: 1000;\n\topacity: .5;\n\n\t&.top {\n\t\ttop: 0;\n\t\ttransform: translateY($resize-indent);\n\t\tcursor: n-resize;\n\t}\n\n\t&.bottom {\n\t\tbottom: 0;\n\t\ttransform: translateY(-$resize-indent);\n\t\tcursor: s-resize;\n\t}\n\n\t&.left {\n\t\tleft: 0;\n\t\ttransform: translateX($resize-indent);\n\t\tcursor: e-resize;\n\t}\n\n\t&.right {\n\t\tright: 0;\n\t\ttransform: translateX(-$resize-indent);\n\t\tcursor: w-resize;\n\t}\n\n\t&.horizontal {\n\t\tleft: $resize-size;\n\t\tright: $resize-size;\n\t\theight: $resize-size;\n    // background-color: yellow;\n  }\n\n  &.vertical {\n  \ttop: $resize-size;\n  \tbottom: $resize-size;\n  \twidth: $resize-size;\n    // background-color: red;\n  }\n\n  &.corner {\n  \twidth: $resize-size;\n  \theight: $resize-size;\n    // background-color: green;\n  }\n\n  &.top-left {\n  \ttop: 0;\n  \tleft: 0;\n  \ttransform: translate($resize-indent, $resize-indent);\n  \tcursor: nw-resize;\n  }\n\n  &.top-right {\n  \ttop: 0;\n  \tright: 0;\n  \ttransform: translate(-$resize-indent, $resize-indent);\n  \tcursor: ne-resize;\n  }\n\n  &.bottom-left {\n  \tbottom: 0;\n  \tleft: 0;\n  \ttransform: translate($resize-indent, -$resize-indent);\n  \tcursor: sw-resize;\n  }\n\n  &.bottom-right {\n  \tbottom: 0;\n  \tright: 0;\n  \ttransform: translate(-$resize-indent, -$resize-indent);\n  \tcursor: se-resize;\n  }\n}"
 9 | 	],
10 | 	"mappings": "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",
11 | 	"names": []
12 | }


--------------------------------------------------------------------------------
/Files/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <link rel="stylesheet" href="css/style.css" />
  5 |     <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  6 |     <title>Demo app</title>
  7 |     <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600" rel="stylesheet">
  8 | 
  9 |     <script>
 10 |       function dragResize(edge){
 11 |         overwolf.windows.getCurrentWindow(function(result){
 12 |           if (result.status=="success"){
 13 |             overwolf.windows.dragResize(result.window.id, edge);
 14 |           }
 15 |         });
 16 |       };
 17 | 
 18 |       function dragMove(){
 19 |         overwolf.windows.getCurrentWindow(function(result){
 20 |           if (result.status=="success" && result.window.state !== "Maximized"){
 21 |             overwolf.windows.dragMove(result.window.id);
 22 |           }
 23 |         });
 24 |       };
 25 | 
 26 |       function closeWindow(){
 27 |         overwolf.windows.getCurrentWindow(function(result){
 28 |           if (result.status=="success"){
 29 |             overwolf.windows.close(result.window.id);
 30 |           }
 31 |         });
 32 |       };
 33 | 
 34 |       function minimize(){
 35 |         overwolf.windows.getCurrentWindow(function(result){
 36 |           if (result.status=="success"){
 37 |             overwolf.windows.minimize(result.window.id);
 38 |           }
 39 |         });
 40 |       };
 41 | 
 42 |       function toggleMaximize(){
 43 |         let element = document.querySelector('.maximize-restore-selector'),
 44 |             root = document.documentElement;
 45 | 
 46 |         overwolf.windows.getCurrentWindow(function(result){
 47 |           if (result.status !== "success") {
 48 |             return;
 49 |           }
 50 | 
 51 |           if (element.checked) {
 52 |             overwolf.windows.restore(result.window.id);
 53 |             root.classList.remove('maximized');
 54 |           } else {
 55 |             overwolf.windows.maximize(result.window.id);
 56 |             root.classList.add('maximized');
 57 |           }
 58 |         });
 59 |       };
 60 | 
 61 |       function showSupport() {
 62 |         window.location.href = "overwolf://settings/support";
 63 |       };
 64 | 
 65 |       function openSubWindow(){
 66 |         alert("the subwindow will only be visible inside a game");
 67 |         overwolf.windows.obtainDeclaredWindow("SubWindow", function(result){
 68 |           if (result.status == "success"){
 69 |             overwolf.windows.restore(result.window.id, function(result){
 70 |                 console.log(result);
 71 |             });
 72 |           }
 73 |         });
 74 |       };
 75 | 
 76 |       function takeScreenshot(){
 77 |         overwolf.media.takeScreenshot(function(result){
 78 |           if (result.status == "success"){
 79 |             var img = document.getElementById("screenshot");
 80 |             img.src = result.url;
 81 |             img.onload = function() {
 82 |               overwolf.media.shareImage(img, "Screen Shot");
 83 |             };
 84 |           }
 85 |         });
 86 |       }
 87 | 
 88 |       function runTeamSpeak(){
 89 |         overwolf.extensions.launch("lmkhofgknaclgcdplfkgcahdkdmomimaoklioonf");
 90 |       };
 91 |     </script>
 92 |   </head>
 93 | 
 94 |   <body>
 95 |     <div class="content" onmousedown="dragMove();">
 96 | 
 97 |       <header>
 98 | 
 99 | 
100 |         <div class="window-controls-group">
101 |           <button class="window-control" onclick="showSupport()">
102 |             <svg class="svg-icon-fill">
103 |               <use xlink:href="assets/svg/sprite.svg#window-control_support" />
104 |             </svg>
105 |           </button>
106 | 
107 |           <button class="window-control">
108 |             <svg class="svg-icon-fill">
109 |               <use xlink:href="assets/svg/sprite.svg#window-control_settings" />
110 |             </svg>
111 |           </button>
112 | 
113 |           <button class="window-control" onclick="minimize()">
114 |             <svg class="svg-icon-fill">
115 |               <use xlink:href="assets/svg/sprite.svg#window-control_minimize" />
116 |             </svg>
117 |           </button>
118 | 
119 |           <button class="window-control" onclick="toggleMaximize()">
120 |             <input type="checkbox" class="maximize-restore-selector toggle-icons" checked />
121 |             <svg class="svg-icon-fill svg-icon-restore">
122 |               <use xlink:href="assets/svg/sprite.svg#window-control_restore" />
123 |             </svg>
124 |             <svg class="svg-icon-fill svg-icon-maximize">
125 |               <use xlink:href="assets/svg/sprite.svg#window-control_maximize" />
126 |             </svg>
127 |           </button>
128 | 
129 |           <button class="window-control window-control-close" onclick="closeWindow();">
130 |             <svg class="svg-icon-fill">
131 |               <use xlink:href="assets/svg/sprite.svg#window-control_close" />
132 |             </svg>
133 |           </button>
134 |         </div>
135 |       </header>
136 | 
137 |       <main>
138 |         <h1>Hello, world!</h1>
139 |         <p>You can drag from anywhere you want, and resize from the edges</p>
140 | 
141 |         <div class="btn-group">
142 |           <button class="btn" id="close" onclick="closeWindow();">Close</button>
143 |           <button class="btn" id="run-teamspeak" onclick="runTeamSpeak();">Run TeamSpeak</button>
144 |           <button class="btn" onclick="takeScreenshot();">Take Screenshot</button>
145 |           <button class="btn" id="open-subwindow" onclick="openSubWindow();">Open Sub-Window</button>
146 |         </div>
147 | 
148 | 
149 |         <img id="screenshot" width="300px"></img>
150 |       </main>
151 |     </div>
152 | 
153 |     <div class="resize horizontal top" onmousedown="dragResize('Top');"></div>
154 |     <div class="resize vertical left" onmousedown="dragResize('Left');"></div>
155 |     <div class="resize vertical right" onmousedown="dragResize('Right');"></div>
156 |     <div class="resize horizontal bottom" onmousedown="dragResize('Bottom');"></div>
157 | 
158 |     <div class="resize corner top-left" onmousedown="dragResize('TopLeft');"></div>
159 |     <div class="resize corner top-right" onmousedown="dragResize('TopRight');"></div>
160 |     <div class="resize corner bottom-left" onmousedown="dragResize('BottomLeft');"></div>
161 |     <div class="resize corner bottom-right" onmousedown="dragResize('BottomRight');"></div>
162 |   </body>
163 | </html>
164 | 


--------------------------------------------------------------------------------
/Files/scss/style.scss:
--------------------------------------------------------------------------------
  1 | // reset ----------------------------------
  2 | 
  3 | * {
  4 | 	margin: 0;
  5 | 	padding: 0;
  6 | 	box-sizing: border-box;
  7 | 	font-weight: normal;
  8 | }
  9 | 
 10 | img {
 11 | 	max-width: 100%;
 12 | }
 13 | 
 14 | // colors -------------------------------
 15 | 
 16 | $red01: rgb(194, 25, 19); //red
 17 | $red02: rgb(255, 0, 0); //red
 18 | 
 19 | $gray019: rgb(19, 19, 19);
 20 | $gray039: rgb(39, 39, 39);
 21 | $gray051: rgb(51, 51, 51);
 22 | $gray079: rgb(79, 79, 79);
 23 | $gray108: rgb(108, 108, 108);
 24 | $gray168: rgb(168, 168, 168);
 25 | $gray182: rgb(182, 182, 182);
 26 | $gray222: rgb(222, 222, 222);
 27 | 
 28 | // dark theme
 29 | $dark-background_main: $gray019;
 30 | $dark-foreground_main-on-dark: $gray168;
 31 | $dark-background_secondary: $gray039;
 32 | $dark-background_third: $gray051;
 33 | $dark-background_forth: $gray079;
 34 | 
 35 | $dark-foreground_main: $gray182;
 36 | $dark-foreground_secondary: $gray108;
 37 | $dark-foreground_third: $gray079;
 38 | 
 39 | $dark-background_main-hover: $dark-background_secondary;
 40 | $dark-background_secondary-hover: $dark-background_third;
 41 | $dark-foreground_main-hover: $gray222;
 42 | 
 43 | // vars -----------------------
 44 | $fast-hover: .15s;
 45 | 
 46 | html, body {
 47 | 	height: 100%;
 48 | 	cursor: default;
 49 | 	padding: 0;
 50 | 	margin: 0;
 51 | 	overflow: hidden;
 52 | 	background: transparent;
 53 | }
 54 | 
 55 | // typography
 56 | body {
 57 | 	font-family: 'Titillium Web', sans-serif;
 58 | 	font-size: 16px;
 59 | }
 60 | 
 61 | h1 {
 62 | 	font-size: 22px;
 63 | }
 64 | 
 65 | p {
 66 | 	color: $dark-foreground_secondary;
 67 | 	font-size: 16px;
 68 | 	line-height: 18px;
 69 | }
 70 | 
 71 | // buttons
 72 | button {
 73 | 	border: none;
 74 | 	font-family: inherit;
 75 | 	background-color: inherit;
 76 | }
 77 | 
 78 | button:focus {
 79 | 	outline: none;
 80 | }
 81 | 
 82 | button, i {
 83 | 	position: relative;
 84 | 	width: var(--size, 30px);
 85 | 	height: var(--size, 30px);
 86 | 	display: flex;
 87 | 	align-items: center;
 88 | 	justify-content: center;
 89 | 	flex: 0 0 auto;
 90 | 	cursor: default;
 91 | 	transition: $fast-hover;
 92 | 
 93 | 	svg {
 94 | 		width: 100%;
 95 | 		height: 100%;
 96 | 		flex: 0 0 auto;
 97 | 		pointer-events: none;
 98 | 		user-select: none;
 99 | 	}
100 | }
101 | 
102 | .svg-icon-fill {
103 | 	fill: currentcolor;
104 | }
105 | 
106 | .svg-icon-stroke {
107 | 	fill: none;
108 | 	stroke: currentcolor;
109 | }
110 | 
111 | .toggle-icons {
112 | 	position: absolute;
113 | 	width: 100%;
114 | 	height: 100%;
115 | 	opacity: 0;
116 | 
117 | 	~ svg:first-of-type {
118 | 		display: block;
119 | 	}
120 | 
121 | 	~ svg:nth-of-type(2) {
122 | 		display: none;
123 | 	}
124 | 
125 | 	&:checked {
126 | 		~ svg:first-of-type {
127 | 			display: none;
128 | 		}
129 | 
130 | 		~ svg:nth-of-type(2) {
131 | 			display: block;
132 | 		}
133 | 	}
134 | }
135 | 
136 | .window-controls-group {
137 | 	display: flex;
138 | 
139 | 	button {
140 | 		--size: 30px;
141 | 	}
142 | }
143 | 
144 | .window-control {
145 | 	color: $dark-foreground_main-on-dark;
146 | 	background-color: transparent;
147 | 
148 | 	&:hover {
149 | 		color: $dark-foreground_main-hover;
150 | 		background-color: $dark-background_main-hover;
151 | 	}
152 | }
153 | 
154 | .window-control-close:hover {
155 | 	background-color: $red01;
156 | }
157 | 
158 | .content {
159 | 	position: relative;
160 | 	color: $dark-foreground_main;
161 | 	background-color: $dark-background_main;
162 | 	height: 100%;
163 | 	display: flex;
164 | 	flex-direction: column;
165 | 
166 | 	&:before {
167 | 		content: "";
168 | 		position: absolute;
169 | 		border: 1px solid $dark-background_third;
170 | 		top: -1px;
171 | 		left: -1px;
172 | 		right: -1px;
173 | 		bottom: -1px;
174 | 		pointer-events: none;
175 | 	}
176 | }
177 | 
178 | .btn-group {
179 | 	display: flex;
180 | 	flex-wrap: wrap;
181 | 	margin-left: -10px;
182 | 	margin-right: -10px;
183 | 
184 | 	.btn {
185 | 		flex: 1 1 140px;
186 | 		min-width: 140px;
187 | 	}
188 | 
189 | 	> * {
190 | 		margin: 5px 10px;
191 | 	}
192 | }
193 | 
194 | .btn {
195 | 	position: relative;
196 | 	font-size: 15px;
197 | 	text-transform: capitalize;
198 | 	padding: 0 10px;
199 | 	min-width: 120px;
200 | 	height: 30px;
201 | 	color: white;
202 | 	background-color: $red01;
203 | 	text-align: center;
204 | 	display: flex;
205 | 	align-items: center;
206 | 	justify-content: center;
207 | 	transition: $fast-hover;
208 | 	cursor: default;
209 | 	-webkit-user-select: none;
210 | 
211 | 	&:hover {
212 | 		background-color: $red02;
213 | 	}
214 | 
215 | 	&:active {
216 | 		background-color: $red01;
217 | 	}
218 | }
219 | 
220 | // content
221 | header {
222 | 	flex-shrink: 0;
223 | 	display: flex;
224 | 
225 | 	> *:only-of-type, * + * {
226 | 		margin-left: auto;
227 | 	}
228 | }
229 | 
230 | main {
231 | 	padding: 30px;
232 | 	flex: auto;
233 | 	display: flex;
234 | 	flex-direction: column;
235 | 
236 | 	> * + * {
237 | 		margin-top: 20px;
238 | 	}
239 | 
240 | 	> h1 + p {
241 | 		margin-top: 3px;
242 | 	}
243 | }
244 | 
245 | // window_shadow_and_resizing
246 | $window-margin: 10px;
247 | $resize-indent: $window-margin / 2;
248 | 
249 | html {
250 | 	background: rgba(0, 0, 0, 0.01);
251 | 	padding: $window-margin;
252 | 
253 | 	&.maximized {
254 | 		padding: 0;
255 | 
256 | 		body {
257 | 			box-shadow: none;
258 | 		}
259 | 
260 | 		.resize {
261 | 			transform: none;
262 | 		}
263 | 	}
264 | }
265 | 
266 | body {
267 | 	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.75);
268 | 	overflow: visible;
269 | }
270 | 
271 | //resize
272 | .resize {
273 | 	position: fixed;
274 | 	z-index: 1000;
275 | 	opacity: .5;
276 | 
277 | 	html.maximized & {
278 | 		display: none;
279 | 	}
280 | 
281 | 	&.top {
282 | 		top: $resize-indent;
283 | 		cursor: n-resize;
284 | 	}
285 | 
286 | 	&.bottom {
287 | 		bottom: $resize-indent;
288 | 		cursor: s-resize;
289 | 	}
290 | 
291 | 	&.left {
292 | 		left: $resize-indent;
293 | 		cursor: e-resize;
294 | 	}
295 | 
296 | 	&.right {
297 | 		right: $resize-indent;
298 | 		cursor: w-resize;
299 | 		z-index: 1;
300 | 	}
301 | 
302 | 	&.horizontal {
303 | 		left: $window-margin + $resize-indent;
304 | 		right: $window-margin + $resize-indent;
305 | 		height: $window-margin;
306 | 		// background-color: yellow;
307 | 	}
308 | 
309 | 	&.vertical {
310 | 		top: $window-margin + $resize-indent;
311 | 		bottom: $window-margin + $resize-indent;
312 | 		width: $window-margin;
313 | 		// background-color: red;
314 | 	}
315 | 
316 | 	&.corner {
317 | 		width: $window-margin;
318 | 		height: $window-margin;
319 | 		// background-color: green;
320 | 	}
321 | 
322 | 	&.top-left {
323 | 		top: $resize-indent;
324 | 		left: $resize-indent;
325 | 		cursor: nw-resize;
326 | 	}
327 | 
328 | 	&.top-right {
329 | 		top: $resize-indent;
330 | 		right: $resize-indent;
331 | 		cursor: ne-resize;
332 | 	}
333 | 
334 | 	&.bottom-left {
335 | 		bottom: $resize-indent;
336 | 		left: $resize-indent;
337 | 		cursor: sw-resize;
338 | 	}
339 | 
340 | 	&.bottom-right {
341 | 		bottom: $resize-indent;
342 | 		right: $resize-indent;
343 | 		cursor: se-resize;
344 | 	}
345 | }
346 | 


--------------------------------------------------------------------------------
/Files/subwindow.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 	<head> 
 4 | 		<link rel="stylesheet" href="css/style.css" />
 5 | 		<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 6 | 		<title>Sub window</title>
 7 | 		<script>
 8 | 			function dragMove(){
 9 | 				overwolf.windows.getCurrentWindow(function(result){
10 | 					if (result.status=="success"){
11 | 						overwolf.windows.dragMove(result.window.id);
12 | 					}
13 | 				});
14 | 			};
15 | 			
16 | 			function closeWindow(){
17 | 				overwolf.windows.getCurrentWindow(function(result){
18 | 					if (result.status=="success"){
19 | 						overwolf.windows.close(result.window.id);
20 | 					}
21 | 				});
22 | 			};
23 | 		</script>
24 | 	</head>
25 | 
26 | 	<body>
27 | 		<div class="content" onmousedown="dragMove();">
28 | 			<main>
29 | 				<h1>Hello again!</h1>
30 | 				<p>This is the sub window. You can drag from anywhere you want, but you can't resize it</p>
31 | 				<button class="btn" onclick="closeWindow();">Close</button>
32 | 			</main>
33 | 		</div>
34 | 	</body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/IconMouseNormal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/overwolf/demo-app/04fae227a00f7bb05db5b01b3837361df398f11e/IconMouseNormal.png


--------------------------------------------------------------------------------
/IconMouseOver.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/overwolf/demo-app/04fae227a00f7bb05db5b01b3837361df398f11e/IconMouseOver.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Overwolf demo-app
2 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"manifest_version":1,
 3 | 	"type":"WebApp",
 4 | 	"meta":{
 5 | 		"name":"Demo App",
 6 | 		"version":"1.0.0",
 7 | 		"minimum-overwolf-version":"0.77.10",
 8 | 		"author":"Developer Name",
 9 | 		"icon":"IconMouseOver.png",
10 | 		"icon_gray":"IconMouseNormal.png",
11 | 		"description":"Demo App"
12 | 	},
13 | 	"data": {
14 | 		"start_window":"MainWindow",
15 | 		"windows":{
16 | 			"MainWindow":{
17 | 					"file":"Files/index.html",
18 | 					"transparent": true,
19 | 					"resizable": true,
20 | 					"use_os_windowing": true,
21 | 					"size": {
22 | 						"width":700,
23 | 						"height":400
24 | 						},
25 | 					"min_size": {
26 | 						"width":400,
27 | 						"height":400
28 | 					}
29 | 				},
30 | 			"SubWindow":{
31 | 					"file":"Files/subwindow.html",
32 | 					"transparent":true,
33 | 					"resizable":false,
34 | 					"size":{
35 | 						"width":400,
36 | 						"height":300
37 | 					},
38 | 					"in_game_only":true
39 | 				}
40 | 		}
41 | 	}
42 | }
43 | 


--------------------------------------------------------------------------------