-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathoptions.html
166 lines (148 loc) · 4.09 KB
/
options.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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html />
<html>
<head>
<title>Comic Text Extension: Options</title>
<script type="module" src="./options.js"></script>
<script type="module" src="./options-page.js"></script>
<style type="text/css">
body,
html
{
margin: 0;
padding: 0;
color: #000;
background: #ffffff;
font-family: 'Segoe UI', Calibri, Helvetica, Verdana, sans-serif;
font-size: 14px;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
p { margin: 0; padding: 0; }
.clear { clear: both; }
#header
{
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#e4e5f0));
padding: 8px;
}
#header img
{
vertical-align: -12px;
}
#header h1
{
font-size: 2em;
display: inline;
margin-left: 24px;
margin-bottom: 14px;
text-shadow: 1px 2px 2px #fff;
}
.options td
{
padding-top: 24px;
padding-left: 24px;
padding-right: 36px;
padding-bottom: 24px;
border-top: 1px solid #cecece;
vertical-align: top;
}
.options td:first-of-type
{
padding-top: 16px;
text-align: right;
width: 24%;
background-image: -webkit-gradient( linear,
right top,
left top,
color-stop(0, rgb(228,229,240)),
color-stop(0, rgb(228,229,240)),
color-stop(0.06, rgb(245,246,255)),
color-stop(0.53, rgb(255,255,255))
);
}
.options td:first-of-type label
{
font-size: 1.4em;
font-weight: bold;
}
.options tr
{
min-height: 200px;
}
input[type=button]
{
margin-top: 8px;
margin-right: 8px;
}
input[type=button].resetCss
{
margin-top: 0;
}
.note
{
margin-top: 20px;
font-size: .9em;
}
/* override the too-big buttons in the jquery ui theme */
.ui-widget {
font-size: 0.8em;
}
</style>
</head>
<body>
<div id="main">
<div id="header">
<img src="sigh-92.png" alt="Sigh" />
<h1>Comic Text: Options</h1>
</div>
<form id="optionsForm">
<table class="options">
<tr>
<td>
<label for="whitelist">Enable Comic Text for these domains</label>
<p class="note">One per line, or enter * for all sites.</p>
<p class="note">Default is: xkcd.com</p>
</td>
<td>
<p><textarea id="whitelist" rows="10" cols="50"></textarea></p>
<p><button class="save">Save</button></p>
</td>
</tr>
<tr>
<td>
<label>Use Comic Text just for images, or for everything?</label>
<p class="note">Tooltips and mouseover texts are (usually) defined by setting the "title" attribute on an HTML element; and the "title" attribute
is <a href="http://www.w3.org/TR/html-markup/global-attributes.html" target="_blank">valid for <em>ALL</em> HTML elements</a>.<br /><br />
Although it defaults to images only, Comic Text is capable of scanning the entire page and replacing tooltips for <em>any</em> element.</p>
</td>
<td>
<p><input type="radio" value="img" name="tags" id="chkAll" /><label for="chkAll">Only process images (default)</label></p>
<p><input type="radio" value="all" name="tags" id="chkImg" /><label for="chkImg">Process ALL html elements</label></p>
<p><button class="save">Save</button></p>
</td>
</tr>
<tr>
<td>
<label for="css">Tooltip CSS</label>
<p class="note">
By default Comic Text will approximately mimic Chrome's tooltips, but feel free
to tweak the CSS to best suit your own needs.
</p>
<p class="note">
For example, you may increase the font size for easier reading by changing the "font-size" entry:
</p>
<pre>font-size: 14px;</pre>
</td>
<td>
<p><button class="resetCss">Reset to default CSS</button></p>
<p><textarea id="css" rows="20" cols="90"></textarea></p>
<p><button class="save">Save</button></p>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>