diff options
Diffstat (limited to 'res')
| -rw-r--r-- | res/css/des.css | 79 | ||||
| -rw-r--r-- | res/index.html | 81 |
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}'. ${acceptableEmbedCodesAre} <iframe> ${or} <object>. ${customEmbedsCannotBeSynchronized}."></textarea> + <textarea id="customembed-content" rows="5" + placeholder="${pasteEmbedCodeAndClick} '${queueNext}' ${or} '${queueLast}'. ${acceptableEmbedCodesAre} <iframe> ${or} <object>. ${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> |