Reformat

2 files changed, 115 insertions, 45 deletions

diff --git a/res/css/des.css b/res/css/des.css
index 6877c81..e6e9145 100644
--- a/res/css/des.css
+++ b/res/css/des.css
@@ -1,4 +1,5 @@
 @charset "utf-8";
+
 /* CSS Document */
 
 @import url(https://rsms.me/inter/inter.css);
@@ -19,7 +20,10 @@
 html {
   box-sizing: border-box;
 }
-*, *:before, *:after {
+
+*,
+*:before,
+*:after {
   box-sizing: inherit;
 }
 
@@ -140,7 +144,7 @@ button[disabled]:hover {
   cursor: default;
 }
 
-button > * {
+button>* {
   line-height: 1;
 }
 
@@ -174,7 +178,7 @@ textarea {
   color: var(--foreground);
   background-color: var(--background-video);
   border: .125rem solid;
-  border-color:  var(--border);
+  border-color: var(--border);
   transition: border-color ease-in-out .15s;
 }
 
@@ -218,14 +222,16 @@ button.danger-bg:focus {
   background-color: var(--error);
 }
 
-.server-msg-disconnect, .server-msg-reconnect {
+.server-msg-disconnect,
+.server-msg-reconnect {
   text-align: center;
 }
 
 .collapse {
-  display :none;
-  visibility :hidden;
+  display: none;
+  visibility: hidden;
 }
+
 .collapse.in {
   display: block;
   visibility: visible;
@@ -260,7 +266,7 @@ button.danger-bg:focus {
   margin-right: .5rem;
 }
 
-.info header > *:not(:last-child) {
+.info header>*:not(:last-child) {
   margin-right: .5rem;
 }
 
@@ -342,7 +348,7 @@ header h4 {
   padding-top: 0;
 }
 
-.metadata > span {
+.metadata>span {
   display: flex;
   align-items: center;
   margin-right: 1rem;
@@ -358,7 +364,7 @@ header h4 {
   min-width: 2rem;
 }
 
-#insert_template > div:first-child {
+#insert_template>div:first-child {
   text-align: center;
   flex-grow: 1;
 }
@@ -370,12 +376,13 @@ header h4 {
   max-width: 32rem;
 }
 
-#addfromurl > *,
-#customembed > * {
+#addfromurl>*,
+#customembed>* {
   margin-bottom: 1rem;
 }
 
-#mediatitle, #subsurl {
+#mediatitle,
+#subsurl {
   margin-left: 2rem;
   flex-grow: 1;
 }
@@ -384,8 +391,8 @@ header h4 {
   flex-grow: 2;
 }
 
-#customembed > input,
-#customembed > textarea {
+#customembed>input,
+#customembed>textarea {
   display: block;
   width: 100%;
 }
@@ -452,7 +459,7 @@ footer#footer {
   flex-direction: column;
   flex-wrap: nowrap;
   padding: 1rem;
-  height: calc( 100vh - 56.25vw );
+  height: calc(100vh - 56.25vw);
 }
 
 #chat header {
@@ -486,7 +493,7 @@ footer#footer {
   cursor: pointer;
 }
 
-.userlist_item > *:not(:last-child) {
+.userlist_item>*:not(:last-child) {
   margin-right: .25em;
 }
 
@@ -552,6 +559,7 @@ footer#footer {
 }
 
 /* Message buffer */
+
 #messagebuffer {
   flex-grow: 2;
   flex-shrink: 8;
@@ -562,7 +570,7 @@ footer#footer {
   height: 100%;
 }
 
-#messagebuffer > * {
+#messagebuffer>* {
   margin-bottom: 1em;
 }
 
@@ -601,7 +609,7 @@ footer#footer {
   flex-direction: row;
 }
 
-#chatbox > *:not(:first-child) {
+#chatbox>*:not(:first-child) {
   margin-left: .5rem;
 }
 
@@ -614,14 +622,14 @@ footer#footer {
 
 #smileswrap {
   display: none;
-  background: rgba(0,0,0,0.7);
+  background: rgba(0, 0, 0, 0.7);
   width: 100%;
   height: 12rem;
   padding: 1rem;
   border-radius: 1rem;
   overflow-y: scroll;
   text-align: center;
-  grid-template-columns: repeat( auto-fit, minmax( 4rem, 1fr ) );
+  grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
   grid-gap: .5rem;
   gap: .5rem;
 }
@@ -643,7 +651,8 @@ footer#footer {
   max-height: 12.5rem;
 }
 
-#guestlogin, #guestpassword {
+#guestlogin,
+#guestpassword {
   display: flex;
   flex-direction: column;
   padding-top: 1rem;
@@ -653,12 +662,13 @@ footer#footer {
 
 /* Guest login */
 
-#guestlogin label, #guestpassword label {
+#guestlogin label,
+#guestpassword label {
   display: block;
   margin-bottom: 1em;
 }
 
-#guestpassword span > *:not(:first-child) {
+#guestpassword span>*:not(:first-child) {
   margin-left: .5rem;
 }
 
@@ -666,6 +676,16 @@ footer#footer {
   cursor: pointer;
 }
 
+#passwordbox {
+  display: flex;
+  flex-direction: row;
+}
+
+#guestpass {
+  flex-grow: 2;
+  width: 2rem;
+}
+
 /*
  * End chat
  */
@@ -673,19 +693,24 @@ footer#footer {
 /*
  * Scrollbar
  */
+
 html {
   scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
   scrollbar-width: thin;
 }
+
 ::-webkit-scrollbar {
   width: 5px;
 }
+
 ::-webkit-scrollbar-track {
   background: transparent;
 }
+
 ::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.1);
 }
+
 ::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.2);
 }
@@ -703,12 +728,15 @@ html {
     width: 100%;
     height: 100vh;
   }
+
   body.swap {
     grid-template-areas: "chat gutter video";
   }
+
   .info {
     flex-wrap: nowrap;
   }
+
   #video {
     grid-area: video;
     width: 100%;
@@ -716,6 +744,7 @@ html {
     overflow: auto;
     background: var(--background-video);
   }
+
   #header {
     display: flex;
     flex: 1;
@@ -725,10 +754,12 @@ html {
     text-overflow: ellipsis;
     font-size: 1.953rem;
   }
+
   #currenttitle {
     text-overflow: ellipsis;
     overflow: hidden;
   }
+
   .gutter {
     grid-area: gutter;
     display: block;
@@ -736,9 +767,11 @@ html {
     background-color: var(--border);
     transition: background-color ease-in-out .15s;
   }
+
   .gutter:hover {
     background-color: var(--accent);
   }
+
   #chat {
     grid-area: chat;
     height: 100vh;
diff --git a/res/index.html b/res/index.html
index c7673b1..766ec7c 100644
--- a/res/index.html
+++ b/res/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <meta charset="utf-8">
@@ -11,11 +12,12 @@
   <script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule="" src="https://cdn.jsdelivr.net/npm/ionicons@5.0.0/dist/ionicons/ionicons.js"></script>
 </head>
+
 <body style="grid-template-columns: 1fr 4px 300px;">
   <!-- Video -->
   <main id="video">
     <!-- Player -->
-    <section id="player" >
+    <section id="player">
       <div id="ytapiplayer" class="embed-responsive embed-responsive-16by9"></div>
       <!-- Video info -->
       <div class="info">
@@ -24,10 +26,18 @@
         </header>
         <!-- Video controls -->
         <span class="controls">
-          <button id="togglesynch" title="${toggleVideoSync}"><ion-icon id="pause-indicator" name="play"></ion-icon></button>
-          <button id="mediarefresh" title="${refreshPlayer}"><ion-icon name="refresh"></ion-icon></button>
-          <button id="fullscreenbtn" title="${fullscreenPlayer}"><ion-icon name="expand"></ion-icon></button>
-          <button id="voteskip" title="${voteForSkip}"><ion-icon name="play-skip-forward"></ion-icon></button>
+          <button id="togglesynch" title="${toggleVideoSync}">
+            <ion-icon id="pause-indicator" name="play"></ion-icon>
+          </button>
+          <button id="mediarefresh" title="${refreshPlayer}">
+            <ion-icon name="refresh"></ion-icon>
+          </button>
+          <button id="fullscreenbtn" title="${fullscreenPlayer}">
+            <ion-icon name="expand"></ion-icon>
+          </button>
+          <button id="voteskip" title="${voteForSkip}">
+            <ion-icon name="play-skip-forward"></ion-icon>
+          </button>
         </span>
       </div>
     </section>
@@ -37,21 +47,39 @@
       <div class="info">
         <header>
           <h3>${playlist}</h3>
-          <button id="lockplaylist" title="${playlistOpen}"><ion-icon name="lock-open"></ion-icon></button>
-          <button id="getplaylist" title="${retrievePlaylistLinks}"><ion-icon name="link"></ion-icon></button>
+          <button id="lockplaylist" title="${playlistOpen}">
+            <ion-icon name="lock-open"></ion-icon>
+          </button>
+          <button id="getplaylist" title="${retrievePlaylistLinks}">
+            <ion-icon name="link"></ion-icon>
+          </button>
         </header>
         <!-- Playlist controls -->
         <span class="controls">
-          <button class="collapsed" id="showmediaurl" title="${addVideoFromUrl}" data-toggle="collapse" data-target="#addfromurl" aria-expanded="false"><ion-icon name="add"></ion-icon></button>
-          <button class="collapsed" id="showcustomembed" title="${embedCustomFrame}" data-toggle="collapse" data-target="#customembed" aria-expanded="false"><ion-icon name="code"></ion-icon></button>
-          <button id="shuffleplaylist" title="${shufflePlaylist}"><ion-icon name="shuffle"></ion-icon></button>
-          <button id="clearplaylist" title="${clearPlaylist}"><ion-icon name="close"></ion-icon></button>
+          <button class="collapsed" id="showmediaurl" title="${addVideoFromUrl}" data-toggle="collapse"
+            data-target="#addfromurl" aria-expanded="false">
+            <ion-icon name="add"></ion-icon>
+          </button>
+          <button class="collapsed" id="showcustomembed" title="${embedCustomFrame}" data-toggle="collapse"
+            data-target="#customembed" aria-expanded="false">
+            <ion-icon name="code"></ion-icon>
+          </button>
+          <button id="shuffleplaylist" title="${shufflePlaylist}">
+            <ion-icon name="shuffle"></ion-icon>
+          </button>
+          <button id="clearplaylist" title="${clearPlaylist}">
+            <ion-icon name="close"></ion-icon>
+          </button>
         </span>
       </div>
       <!-- Playlist metadata -->
       <div class="metadata">
-        <span><ion-icon name="logo-youtube"></ion-icon><span id="plcount">0 ${videos}</span></span>
-        <span><ion-icon name="time"></ion-icon><span id="pllength">00:00</span></span>
+        <span>
+          <ion-icon name="logo-youtube"></ion-icon><span id="plcount">0 ${videos}</span>
+        </span>
+        <span>
+          <ion-icon name="time"></ion-icon><span id="pllength">00:00</span>
+        </span>
       </div>
       <!-- Add video -->
       <div class="collapse" id="addfromurl" aria-expanded="false">
@@ -77,7 +105,8 @@
       </div>
       <div class="collapse" id="customembed" aria-expanded="false">
         <input id="customembed-title" type="text" placeholder="${optionalTitle}">
-        <textarea id="customembed-content" rows="5" placeholder="${pasteEmbedCodeAndClick} '${queueNext}' ${or} '${queueLast}'. &#10;${acceptableEmbedCodesAre} &lt;iframe&gt; ${or} &lt;object&gt;. &#10;${customEmbedsCannotBeSynchronized}."></textarea>
+        <textarea id="customembed-content" rows="5"
+          placeholder="${pasteEmbedCodeAndClick} '${queueNext}' ${or} '${queueLast}'. &#10;${acceptableEmbedCodesAre} &lt;iframe&gt; ${or} &lt;object&gt;. &#10;${customEmbedsCannotBeSynchronized}."></textarea>
         <div>
           <button id="ce_queue_next">${queueNext}</button>
           <button id="ce_queue_end">${queueLast}</button>
@@ -87,15 +116,15 @@
         </div>
       </div>
       <!-- Queue -->
-      <div id="queuefail">
-      </div>
+      <div id="queuefail"></div>
       <div>
         <ul class="ui-sortable queue_sortable" id="queue"></ul>
       </div>
     </section>
     <!-- Footer -->
     <footer id="footer">
-      <p>Powered by <a href="https://github.com/RblSb/SyncTube" target="_blank" rel="noreferrer noopener">SyncTube</a></p>
+      <p>Powered by <a href="https://github.com/RblSb/SyncTube" target="_blank" rel="noreferrer noopener">SyncTube</a>
+      </p>
     </footer>
   </main>
 
@@ -113,7 +142,10 @@
       <span>
         <button id="leader_btn" title="${leaderDesc}">${leader}</button>
         <!-- Settings button -->
-        <button id="showoptions" class="collapsed" data-toggle="collapse" data-target="#optionsPanel" aria-expanded="false"><ion-icon name="settings-sharp"></ion-icon></button>
+        <button id="showoptions" class="collapsed" data-toggle="collapse" data-target="#optionsPanel"
+          aria-expanded="false">
+          <ion-icon name="settings-sharp"></ion-icon>
+        </button>
       </span>
     </div>
     <!-- User list -->
@@ -144,7 +176,9 @@
     <!-- Message input -->
     <div id="chatbox">
       <input id="chatline" type="text" placeholder="${chatlinePlaceholder}">
-      <button id="smilesbtn" title="${emotes}"><ion-icon name="happy"></ion-icon></button>
+      <button id="smilesbtn" title="${emotes}">
+        <ion-icon name="happy"></ion-icon>
+      </button>
     </div>
     <div id="smileswrap"></div>
     <!-- Guest login -->
@@ -154,10 +188,12 @@
     </div>
     <div id="guestpassword" style="display: none;">
       <label>${enterUserPassword}</label>
-      <span>
+      <div id="passwordbox">
         <input id="guestpass" type="text" placeholder="${yourPassword}">
-        <button id="guestpass_icon"><ion-icon name="eye"></ion-icon></button>
-      </span>
+        <button id="guestpass_icon">
+          <ion-icon name="eye"></ion-icon>
+        </button>
+      </div>
     </div>
   </aside>
 
@@ -165,4 +201,5 @@
   <script src="client.js"></script>
   <script src="js/custom.js"></script>
 </body>
+
 </html>