Skip to content

Commit 0646a42

Browse files
DRSDavidSoftDRSDavidSoft
committed
Improved web interface
- Dark mode support - Default viewport for mobile - Transparency for rounded title corners - Added note regarding future updates to index
1 parent 7c08a3a commit 0646a42

File tree

10 files changed

+64
-15
lines changed

10 files changed

+64
-15
lines changed

‎src/mpc-hc/res/web/404.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
<head>
44
<meta charset="utf-8">
55
<title>MPC-HC WebServer - Page Not Found</title>
6-
<link rel="stylesheet" href="default.css">
7-
<link rel="icon" href="favicon.ico">
6+
<meta name="viewport" content="width=device-width">
7+
<meta name="color-scheme" content="light dark">
8+
<link rel="stylesheet" href="/default.css">
9+
<link rel="icon" href="/favicon.ico">
810
</head>
911
<body class="page-four-oh-four">
1012
<h1>Page Not Found</h1>

‎src/mpc-hc/res/web/browser.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
<head>
44
<meta charset="utf-8">
55
<title>MPC-HC WebServer - File Browser</title>
6-
<link rel="stylesheet" href="default.css">
7-
<link rel="icon" href="favicon.ico">
6+
<meta name="viewport" content="width=device-width">
7+
<meta name="color-scheme" content="light dark">
8+
<link rel="stylesheet" href="/default.css">
9+
<link rel="icon" href="/favicon.ico">
810
</head>
911
<body class="page-file-browser">
1012
<div>

‎src/mpc-hc/res/web/controls.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
<head>
44
<meta charset="utf-8">
55
<title>MPC-HC WebServer - Controls</title>
6-
<link rel="stylesheet" href="default.css">
7-
<link rel="icon" href="favicon.ico">
6+
<meta name="color-scheme" content="light dark">
7+
<link rel="stylesheet" href="/default.css">
8+
<link rel="icon" href="/favicon.ico">
89
<script src="javascript.js"></script>
910
</head>
1011
<body onload='controlsInit("[filepatharg]", [position], [duration], [state], [playbackrate], [reloadtime], [volumelevel], [muted])' class="page-controls">

‎src/mpc-hc/res/web/default.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@ textarea{overflow:auto}
4242

4343

4444
/* common */
45+
:root {
46+
color-scheme: light dark;
47+
}
48+
4549
* {
4650
-webkit-box-sizing: border-box;
4751
-moz-box-sizing: border-box;
@@ -55,6 +59,10 @@ textarea{overflow:auto}
5559
box-sizing: border-box;
5660
}
5761

62+
html, body {
63+
min-height: 100%;
64+
}
65+
5866
body {
5967
font: 14px Arial, Verdana, Helvetica, Sans-Serif;
6068
}
@@ -104,6 +112,14 @@ img {
104112
font-weight: bold;
105113
}
106114

115+
@media (prefers-color-scheme: dark) {
116+
.browser-table,
117+
.browser-table th,
118+
.browser-table td {
119+
border-color: gray;
120+
}
121+
}
122+
107123

108124

109125
/* controls.html */
@@ -151,6 +167,7 @@ form input {
151167
/* player.html */
152168
#player {
153169
margin: 0 auto;
170+
color: black;
154171
}
155172

156173
#player,
@@ -348,3 +365,23 @@ form input {
348365
#header {
349366
width: 100%;
350367
}
368+
369+
370+
371+
/* variables.html */
372+
.page-variables {
373+
display: table;
374+
margin: 1em;
375+
}
376+
377+
.page-variables p {
378+
display: table-row;
379+
line-height: 1.5;
380+
}
381+
382+
.page-variables p:before {
383+
content: attr(id) ": ";
384+
display: table-cell;
385+
color: gray;
386+
padding-right: 1em;
387+
}

‎src/mpc-hc/res/web/img/headerclose.png‎

1.47 KB
Loading

‎src/mpc-hc/res/web/img/headericon.png‎

1.47 KB
Loading

‎src/mpc-hc/res/web/index.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@
33
<head>
44
<meta charset="utf-8">
55
<title>MPC-HC WebServer</title>
6-
<link rel="stylesheet" href="default.css">
7-
<link rel="icon" href="favicon.ico">
6+
<meta name="viewport" content="width=device-width">
7+
<meta name="color-scheme" content="light dark">
8+
<link rel="stylesheet" href="/default.css">
9+
<link rel="icon" href="/favicon.ico">
810
</head>
911
<body class="page-index">
10-
<p>Demo page; submit patches if you want this page updated.</p>
12+
<p>Demo page; this page is being revamped and will be updated.</p>
1113
<p>And if you are already here, why don't you try sending a few commands to MPC-HC, just to see if it works :)</p>
1214
<div>
1315
<form action="[commandpath]" method="post">

‎src/mpc-hc/res/web/info.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
<head>
44
<meta charset="utf-8">
55
<title>MPC-HC WebServer - Info</title>
6-
<link rel="stylesheet" href="default.css">
7-
<link rel="icon" href="favicon.ico">
6+
<meta name="viewport" content="width=device-width">
7+
<meta name="color-scheme" content="light dark">
8+
<link rel="stylesheet" href="/default.css">
9+
<link rel="icon" href="/favicon.ico">
810
</head>
911
<body class="page-info">
1012
<!-- The mpchc_np id is used by the mIRC and Python now playing snippet -->

‎src/mpc-hc/res/web/player.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
<head>
44
<meta charset="utf-8">
55
<title>MPC-HC WebServer - Player</title>
6-
<link rel="stylesheet" href="default.css">
7-
<link rel="icon" href="favicon.ico">
6+
<meta name="color-scheme" content="light dark">
7+
<link rel="stylesheet" href="/default.css">
8+
<link rel="icon" href="/favicon.ico">
89
<script src="javascript.js"></script>
910
</head>
1011
<body onload="playerInit()" class="page-player">

‎src/mpc-hc/res/web/variables.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
<head>
44
<meta charset="utf-8">
55
<title>MPC-HC WebServer - Variables</title>
6-
<link rel="stylesheet" href="default.css">
7-
<link rel="icon" href="favicon.ico">
6+
<meta name="viewport" content="width=device-width">
7+
<meta name="color-scheme" content="light dark">
8+
<link rel="stylesheet" href="/default.css">
9+
<link rel="icon" href="/favicon.ico">
810
</head>
911
<body class="page-variables">
1012
<p id="file">[file]</p>

0 commit comments

Comments
 (0)