-
-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathoptions.html
138 lines (122 loc) · 4.01 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
<!DOCTYPE html>
<html>
<head>
<title>Video Auto Pause options</title>
<style>
@charset "UTF-8";
@import 'https://fonts.googleapis.com/css?family=Nunito:300';
body {
font-family: "Nunito", sans-serif;
font-weight: 300;
padding: 0;
margin: 0;
}
.container {
padding: 10px;
}
label {
cursor: pointer;
color: #383A3F;
display: block;
font-size: 1.2em;
}
p, label {
margin-top: 5px;
margin-bottom: 5px;
}
h2 {
font-size: 20px;
text-align: center;
user-select: none;
}
h4, hr, h2 {
margin: 0;
}
#logo {
margin-right: 6px;
margin-left: 3px;
width: 22px;
height: 22px;
vertical-align: sub;
}
#version {
float: right;
}
a, a:hover, a:focus, a:active {
text-decoration: underline;
color: inherit;
}
.collapsible_button {
cursor: pointer;
color: #383A3F;
background-color: white;
padding: 2px 0 2px 0;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 13px;
}
.collapsible_button::after {
content: ' \25BC'
}
.collapsible_button.active::after {
content: ' \25B2'
}
.collapsible_content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<div style="width: 350px">
<div class="container">
<h2><img src="images/icon_32.png" id="logo" alt="Video Auto Pause"/>Video Auto Pause</h2>
</div>
<hr>
<div class="container">
<h4>Settings</h4>
<label><input type="checkbox" id="autopause"><span class="label-text">Enable auto pause on tab unfocus</span></label>
<label><input type="checkbox" id="autoresume"><span class="label-text">Enable auto resume on tab focus</span></label>
<label><input type="checkbox" id="focuspause"><span class="label-text">Enable auto pause on window unfocus</span></label>
<label><input type="checkbox" id="focusresume"><span class="label-text">Enable auto resume on window focus</span></label>
<label><input type="checkbox" id="disabledTabs"><span class="label-text">Disable on this tab</span></label>
<label><input type="checkbox" id="disableOnFullscreen"><span class="label-text">Disable on full screen</span></label>
<label><input type="checkbox" id="disabled"><span class="label-text">Disable extension</span></label>
</div>
<hr>
<div class="container">
<button class="collapsible_button">Advanced settings</button>
<div class="collapsible_content">
<h4>Other settings</h4>
<label><input type="checkbox" id="lockpause"><span class="label-text">Enable auto pause on computer lock</span></label>
<label><input type="checkbox" id="lockresume"><span class="label-text">Enable auto resume on computer unlock</span></label>
<label><input type="checkbox" id="scrollpause"><span class="label-text">Enable auto pause when out of viewport</span></label>
<label><input type="checkbox" id="cursorTracking"><span class="label-text">Enable cursor on window tracking</span></label>
<label><input type="checkbox" id="manualPause"><span class="label-text">Manual pause disables auto resume</span></label>
<label><input type="checkbox" id="debugMode"><span class="label-text">Enable debug mode</span></label>
</div>
</div>
<hr>
<div class="container">
<h4>Hotkeys</h4>
<div id="hotkeys">
</div>
<p>You can configure hotkeys in the Extensions menu</p>
</div>
<hr>
<div class="container" style="padding-top: 0">
<p style="float: left;"><a href="https://github.com/drodil/video_auto_pause" target="_blank">Source</a></p>
<p id="version"></p>
</div>
<hr style="clear: both">
<div class="container" style="padding-top: 0">
<p style="float: left"><a href="https://github.com/sponsors/drodil" target="_blank">Support on GitHub</a></p>
<p style="float: right"><a href="https://patreon.com/drodil" target="_blank">Support on Patreon</a></p>
</div>
</div>
<script src="options.js"></script>
</body>
</html>