-
-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
287 lines (254 loc) · 9.12 KB
/
index.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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Add, edit, and delete markers from your Plex database">
<link rel="preload" href="Client/Style/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="Client/Style/Tooltip.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="Client/Style/Overlay.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="Client/Style/Settings.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="Client/Style/MarkerTable.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="Client/Style/BulkActionOverlay.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="icon" type="image/svg+xml; charset=UTF-8" href="SVG/favicon.svg">
<title>Marker Editor</title>
<!--
Before our full styles and scripts have loaded, set up the core set of styles.
This results in a smoother loading experience.
-->
<style id="themeTempLight">
:root {
--theme-primary: #212121;
--theme-border: #616161;
--background-grad: linear-gradient(#FFEFCCDD, #CCA066DD);
}
</style>
<style id="themeTempDark">
:root {
--theme-primary: #c1c1c1;
--theme-border: #616161;
--background-grad: linear-gradient(#212121CC, #402200CC);
}
</style>
<script type="text/javascript">
// Quickly check localStorage for a theme preference, falling back to
// the system theme. When the theme is determined, remove the temporary
// opposite theme's temporary node above.
let themeSet = false;
let isDark = false;
try {
// Keep synced with ClientSettings's #settingsKey
const theme = JSON.parse(localStorage.getItem('plexIntro_settings')).theme;
if (theme.userSet) {
themeSet = true;
isDark = theme.dark;
}
} catch {}
if (!themeSet) {
const match = window.matchMedia('(prefers-color-scheme: dark)');
isDark = match !== 'not all' && match.matches;
}
document.head.removeChild(document.getElementById(`themeTemp${isDark ? 'Light' : 'Dark'}`));
</script>
<!--
The below styles are the core styles necessary for the layout of the landing page
* Title text
* Dark mode toggle/hep button
* Library selector
This allows the elements to mostly stay where they are before the rest of our styles have loaded in.
NOTE: Most of these styles are shared with login.html. Try to keep them in sync.
-->
<style>
:root {
--noise-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"><filter id="n" x="0" y="0"><feTurbulence type="fractalNoise" baseFrequency="0.75" stitchTiles="stitch"/></filter><rect width="300" height="300" fill="black"/><rect width="300" height="300" filter="url(%23n)" opacity="0.80"/></svg>');
scrollbar-width: thin !important;
}
body {
font-family: sans-serif;
background: fixed var(--background-grad), var(--noise-svg);
margin: 0;
border: 0;
overflow: auto;
display: block;
height: 100vh;
color: var(--theme-primary);
}
#plexFrame {
height: 100vh;
}
::-webkit-scrollbar-track {
background: var(--background-grad), var(--noise-svg);
}
.hidden {
display: none !important;
}
#libraryList {
width: 100%;
margin: auto;
text-align: center;
}
#topRightControls {
position: relative;
top: 30px;
}
#helpContainer {
position: absolute;
top: 0;
right: 0;
}
.fancySelect,
#search {
padding: 5px;
border-radius: 5px;
background: transparent;
text-align: center;
font-size: 14pt;
}
.fancySelect {
min-width: 350px;
}
#intro {
max-width: 1000px;
text-align: center;
margin: auto;
}
#toggleContainer {
position: absolute;
right: 30px;
}
#darkModeToggle {
position: relative;
display: inline-block;
width: 50px;
height: 20px;
}
#darkModeCheckbox {
display: none;
width: 0;
height: 0;
}
.toggle {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #a1a1a1;
-webkit-transition: 0.3s;
transition: 0.3s;
cursor: pointer;
border-radius: 16px;
}
.toggle::before {
position: absolute;
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: black;
border-radius: 50%;
-webkit-transition: 0.3s;
transition: 0.3s;
content: "";
}
#darkModeCheckbox:checked+.toggle {
background-color: #616191;
}
#darkModeCheckbox:focus+.toggle {
box-shadow: 0 0 1px #616191;
}
#darkModeCheckbox:checked+.toggle:before {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
/* Handle */
::-webkit-scrollbar-thumb {
width: 5px;
border-radius: 5px;
background: rgba(97, 97, 97, 0.76);
opacity: 0.5;
}
/* corner */
::-webkit-scrollbar-corner {
background: rgba(97, 97, 97, 0.76);
border: none;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgba(129, 129, 129, 0.76); /* #818181C1 */
}
@media (min-width: 767px) { /* Probably not a phone */
/* width*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
#topRightControls {
right: 30px;
}
/* Force the vertical scrollbar to always be visible to avoid horizontal shifts when the scrollbar appears/
* disappears. There are some behavioral tradeoffs here (content is slightly off-center when no scrollbar
* is visible, but the lack of shifting wins for me. Also, apply this to #plexFrame instead of body, because
* overriding the body itself will prevent scrolling overlays from having a visible scrollbar. Only apply it
* to "probably not a phone", since this causes issues with mobile browsers' auto-hiding address bar */
#plexFrame {
overflow-y: scroll;
}
}
@media all and (max-width: 767px) { /* Probably a phone */
/* width*/
::-webkit-scrollbar {
width: 3px;
height: 3px;
}
#darkModeToggle {
display: none;
}
}
</style>
</head>
<body>
<div id="plexFrame">
<div id="topRightControls">
<div id="helpContainer" title="Show Help" tabindex="0">
<svg id="helpBtn"></svg>
</div>
<div id="toggleContainer" title="Toggle Dark Mode" tabindex="0">
<label id="darkModeToggle" for="darkModeCheckbox">
<input type="checkbox" name="darkModeCheckbox" id="darkModeCheckbox" title="Toggle Dark Mode">
<span class="toggle"></span>
</label>
</div>
</div>
<div id="intro">
<h1 id="siteTitle">Marker Editor <i id="settings" class="hidden" title="Settings" tabIndex="0"><svg></svg></i></h1>
</div>
<form>
<div id="libraryList"><label for="libraries" class="hidden">Library selection</label><select id="libraries" class="fancySelect"></select></div>
</form>
<div id='status'></div>
<div id='container' class='hidden'>
<div id="searchContainer"><label for='search' class="hidden">Search</label><input type='text' id='search' name='search' placeholder='Search for a Show...' autocomplete='off' /></div>
<br>
<div id="toplevellist"></div>
<div id="seasonlist"></div>
<div id="episodelist"></div>
</div>
</div>
<div id="toastContainer"></div>
<!-- Keep updated with jsconfig.json -->
<script type="importmap">
{
"imports": {
"./" : "[[BASE_URL]]",
"ResultRow": "./Client/Script/ResultRow/index.js",
"StickySettings": "./Client/Script/StickySettings/index.js",
"ServerSettingsDialog": "./Client/Script/ServerSettingsDialog/index.js",
"/Shared/": "[[BASE_URL]]Shared/"
}
}
</script>
<script src="Client/Script/index.js" type="module"></script>
</body>
</html>