This repository has been archived by the owner on Jun 6, 2020. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 8
/
options.html
149 lines (144 loc) · 5.28 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="options.css">
</head>
<body>
<h1>Options</h1>
<form id="options-form">
<table>
<thead>
<tr>
<th>Option</th>
<th>Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<!-- #accent-color -->
<tr>
<td>
<label for="accent-color">Static Color</label>
</td>
<td>
<input type="text" id="accent-color-text" class="hex-color-text" maxlength="7" value="#505050">
<input type="color" id="accent-color" name="accentColor" value="#505050">
</td>
<td class="faded">Color to use if adaptive mode is disabled, or unsupported by your OS.</td>
</tr>
<!-- #accent-color -->
<!-- #enable-adaptive -->
<tr>
<td>
<label for="enable-adaptive">Enable Adaptive</label>
</td>
<td>
<input type="checkbox" id="enable-adaptive" name="accentColor" value="-moz-win-accentcolor">
<span class="checkbox"></span>
</td>
<td class="faded">Use the operating system's accent colors (on Windows only, in Personalization Settings).</td>
</tr>
<!-- #enable-adaptive -->
<!-- #toolbar-opacity -->
<tr>
<td>
<label for="toolbar-opacity">Toolbar Difference</label>
</td>
<td>
<input type="range" id="toolbar-opacity" name="toolbarOpacity" min="0" max="100">
<input type="number" id="toolbar-opacity-number" class="percent-number" min="0" max="100">
</td>
<td class="faded">The percent to darken the accent color by for the tabs and toolbar.</td>
</tr>
<!-- #toolbar-opacity -->
<!-- #omnibar-opacity -->
<tr>
<td>
<label for="omnibar-opacity">Omnibar Difference</label>
</td>
<td>
<input type="range" id="omnibar-opacity" name="omnibarOpacity" min="0" max="100">
<input type="number" id="omnibar-opacity-number" class="percent-number" min="0" max="100">
</td>
<td class="faded">The percent to darken the accent color by for the address bar.</td>
</tr>
<!-- #omnibar-opacity -->
<!-- #highlight-color -->
<tr>
<td>
<label for="highlight-color">Highlight Color</label>
</td>
<td>
<input type="text" id="highlight-color-text" class="hex-color-text" maxlength="7">
<input type="color" id="highlight-color" name="highlightColor">
</td>
<td class="faded">Color of the highlights, or accent color used for borders, etc.</td>
</tr>
<!-- #highlight-color -->
<!-- #highlight-borders -->
<tr>
<td>
<label for="highlight-borders">Highlight Borders</label>
</td>
<td>
<input type="checkbox" id="highlight-borders" name="highlightBorders">
<span class="checkbox"></span>
</td>
<td class="faded">Use the highlight color to border the popups and omnibar.</td>
</tr>
<!-- #highlight-borders -->
<!-- #mask-color -->
<tr>
<td>Difference Mode</td>
<td>
<input type="radio" id="mask-color-black" name="maskColor" value="#000000">
<label for="mask-color-black">Darker</label>
<input type="radio" id="mask-color-white" name="maskColor" value="#ffffff">
<label for="mask-color-white">Lighter</label>
</td>
<td class="faded">Color to use for the mask that covers the accent color on the omnibar and toolbar.</td>
</tr>
<!-- #mask-color -->
<!-- #bottom-separator -->
<tr>
<td>
<label for="bottom-separator">Bottom Separator</label>
</td>
<td>
<input type="checkbox" id="bottom-separator" name="bottomSeparator">
<span class="checkbox"></span>
</td>
<td class="faded">Enable highlight of the line under the toolbar.</td>
</tr>
<!-- #bottom-separator -->
<!-- #unfocused-theme -->
<tr>
<td>
<label for="unfocused-theme">Unfocused theme</label>
</td>
<td>
<select id="unfocused-theme" name="unfocusedTheme">
<option value="tabs">Light toolbar</option>
<option value="title">Light titlebar</option>
<option value="both">Light toolbar and titlebar</option>
<option value="fade">Faded toolbar</option>
<option value="reset">Default reset</option>
<option value="none">Dimmed text</option>
</select>
</td>
<td class="faded">Color scheme of unfocused windows, when you're clicked away from Firefox.</td>
</tr>
<!-- #unfocused-theme -->
</tbody>
</table>
</div>
<br>
<input id="options-reset" type="button" value="Reset all values and refresh">
<input id="options-sumbit" type="submit">
</form>
<script src="options.js"></script>
</body>
</html>