-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopup.html
50 lines (47 loc) · 3.37 KB
/
popup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="encoding" content="utf-8" />
<title>Custom CSS</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body style="min-width: 250px;" ez-key-down="saveAll($)">
<div id="container" ez-loop="let style in styles">
<div class="style panel panel-default">
<input class="title panel-heading" contenteditable="true" ez-key-down="cancelEnter($)" ez-blur="trimText(style)"
ez-mouse-out="freeSelect" ez-mouse-over="select(styles[{style}].query)" name="styles[{style}].query" />
<button class="close top-right" ez-click="closeStyle({style})"></button>
<ol class="panel-body" ez-loop="let line in styles[{style}].lines">
<li class="line">
<button class="close visible-on-hover" ez-click="closeLine({style}, {line})"></button>
<input type="text" name="styles[{style}].lines[{line}]" spellcheck="false" ez-key-up="showHint(styles[{style}], {line}, $.keyCode)"
ez-key-down="onKeyDown({style}, {line}, $)" />
<span class="hint" ez-if="hint && this.previousElementSibling === global.document.activeElement">{hint}</span>
</li>
</ol>
</div>
</div>
<debug ez-pass-properties="styles, *" style="width: 100%; display: block;" ez-if="showDebug"></debug>
<button id="plus-style" class="simple" ez-click="addStyle">Add Style</button>
<button id="save" class="simple" ez-click="saveAndRefresh">Save</button>
<button id="export" class="simple" title="export" ez-click="export">
<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<path fill="currentColor" d="M384 112v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h80c0-35.29 28.71-64 64-64s64 28.71 64 64h80c26.51 0 48 21.49 48 48zM192 40c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24m96 114v-20a6 6 0 0 0-6-6H102a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h180a6 6 0 0 0 6-6z"></path>
</svg>
</button>
<button id="import" class="simple" title="import" ez-click="import">
<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"></path>
</svg>
</button>
<input name="showDebug" type="checkbox" id="toggle-debug" title="{showDebug?Hide:Show} Debug" />
<div class="lock"><input id="selector" /></div>
<!--<button id="drag-left" draggable="true"></button>-->
<script src="hints.js"></script>
<script src="functions.js"></script>
<script src="view.js"></script>
<script src="debug.js"></script>
<script src="popup.js"></script>
</body>
</html>