520 lines
8.2 KiB
CSS
520 lines
8.2 KiB
CSS
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
* {
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0;
|
|
background-color: #586575;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#users > li,
|
|
#user-menu,
|
|
.notice,
|
|
#settings-menu,
|
|
#rooms-menu,
|
|
#room-settings-menu,
|
|
#midi-player-menu {
|
|
border: 1px solid rgba(0, 0, 0, 0.8);
|
|
border-radius: 4px;
|
|
box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
#playspace {
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
#piano-container {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
#piano {
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
#chat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
bottom: 0;
|
|
padding: 8px;
|
|
width: 100%;
|
|
max-height: 100%;
|
|
box-sizing: border-box;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
transition: background-color 200ms;
|
|
}
|
|
#chat.focus {
|
|
z-index: 1;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
#chat-messages {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
overflow-y: hidden;
|
|
}
|
|
#chat.focus #chat-messages {
|
|
overflow-y: auto;
|
|
}
|
|
#chat-messages > li {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
word-break: break-word;
|
|
text-shadow: 0px 0px 2px #000;
|
|
clear: left;
|
|
float: left;
|
|
}
|
|
#chat-messages > li.message > .nick {
|
|
font-weight: bold;
|
|
color: #4cabff;
|
|
}
|
|
#chat-messages > li.message > .nick::after {
|
|
content: ": ";
|
|
}
|
|
#chat-messages > li.message > .content {
|
|
color: #fff;
|
|
}
|
|
|
|
#chat-messages > li.rank, #chat-messages > li.disconnected {
|
|
width: auto;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
padding: 6px;
|
|
border: 1px solid #000;
|
|
display: inline-block;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
#chat-messages > li.join {
|
|
color: #71f114;
|
|
}
|
|
#chat-messages > li.leave {
|
|
color: #ff3c3c;
|
|
}
|
|
#chat-messages > li.nick {
|
|
color: #bf69ff;
|
|
}
|
|
#chat-messages > li.rank {
|
|
background-color: #16d2a8;
|
|
}
|
|
#chat-messages > li.disconnected {
|
|
background-color: #e82626;
|
|
}
|
|
|
|
#chat-box {
|
|
width: 100%;
|
|
padding-top: 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
#chat-box input {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 4px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
}
|
|
#chat-box input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
#users {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
#users > li {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin: 6px;
|
|
padding: 6px 10px;
|
|
background-color: #1ac2ff;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
#users > li.local::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin: 2px;
|
|
border: 1px solid rgba(0, 0, 0, 0.5);
|
|
background-color: #2e8eff;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* User Menu */
|
|
#user-menu {
|
|
display: none;
|
|
position: absolute;
|
|
width: 230px;
|
|
}
|
|
#user-menu.active {
|
|
display: block;
|
|
}
|
|
#user-uid {
|
|
display: block;
|
|
padding: 8px 8px;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
word-break: break-all;
|
|
}
|
|
#user-menu label {
|
|
display: block;
|
|
text-align: center;
|
|
padding: 8px;
|
|
}
|
|
#user-menu label:hover {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
#user-menu .nick {
|
|
display: none;
|
|
}
|
|
#user-menu.local .nick {
|
|
display: block;
|
|
}
|
|
#user-menu button {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: none;
|
|
background-color: transparent;
|
|
font-size: 16px;
|
|
}
|
|
#user-menu button:hover {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
#user-kick {
|
|
display: none;
|
|
}
|
|
body.owner #user-kick, body.admin #user-kick {
|
|
display: block;
|
|
}
|
|
|
|
|
|
#dimmer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-color: #000;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 200ms;
|
|
}
|
|
#dimmer.active {
|
|
opacity: 0.6;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
#rooms-menu {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 400px;
|
|
height: 300px;
|
|
padding: 16px;
|
|
background-color: #444652;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
|
|
transition: opacity 200ms;
|
|
}
|
|
#rooms-menu.active {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
#rooms {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
#rooms > li {
|
|
display: inline-block;
|
|
padding: 12px 10px;
|
|
margin: 4px;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border: 1px solid #000;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
#rooms > li > .users {
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
border: 1px solid #fff;
|
|
font-weight: bold;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
margin-left: 8px;
|
|
color: #000;
|
|
}
|
|
|
|
#room-settings-menu {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 400px;
|
|
height: 300px;
|
|
padding: 8px;
|
|
color: #fff;
|
|
background-color: #444652;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
|
|
transition: opacity 200ms;
|
|
}
|
|
#room-settings-menu.active {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
#room-settings-menu > label {
|
|
display: block;
|
|
margin: 16px;
|
|
}
|
|
#room-quota-note, #room-quota-time {
|
|
width: 54px;
|
|
}
|
|
#room-settings-save {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
padding: 8px 12px;
|
|
margin: 16px;
|
|
background-color: #3691ff;
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
}
|
|
|
|
#midi-player-menu {
|
|
position: absolute;
|
|
bottom: 48px;
|
|
left: 16px;
|
|
width: 400px;
|
|
height: 64px;
|
|
padding: 8px;
|
|
color: #fff;
|
|
background-color: #444652;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
|
|
transition: opacity 200ms;
|
|
}
|
|
#midi-player-menu.active {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
#settings-menu {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
position: absolute;
|
|
bottom: 48px;
|
|
right: -400px;
|
|
width: 400px;
|
|
height: 300px;
|
|
background-color: #444652;
|
|
box-sizing: border-box;
|
|
|
|
transition: right 400ms cubic-bezier(0.65, 0.05, 0.36, 1);
|
|
}
|
|
#settings-menu.active {
|
|
right: 16px;
|
|
}
|
|
#settings-menu > .tabs {
|
|
margin: 6px;
|
|
padding: 0;
|
|
list-style: none;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-radius: 4px;
|
|
}
|
|
#settings-menu > .tabs > li {
|
|
margin: 6px;
|
|
padding: 10px;
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
border-radius: 4px;
|
|
color: #eee;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
#settings-menu > .tabs > li.active {
|
|
border: 2px solid #eee;
|
|
padding: 8px;
|
|
}
|
|
#settings-menu > .tab {
|
|
display: none;
|
|
flex: 1;
|
|
padding: 16px;
|
|
color: #fff;
|
|
}
|
|
#settings-menu > .tab.active {
|
|
display: block;
|
|
}
|
|
#settings-menu > .tab > label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
|
|
|
|
#footer {
|
|
background-color: #444652;
|
|
font-size: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
#footer button {
|
|
background-color: transparent;
|
|
color: #fff;
|
|
border: none;
|
|
line-height: 38px;
|
|
padding: 0 14px;
|
|
}
|
|
#footer button:focus {
|
|
outline: none;
|
|
}
|
|
#footer button:hover {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
#room-settings-button {
|
|
display: none;
|
|
}
|
|
body.owner #room-settings-button, body.admin #room-settings-button {
|
|
display: inline-block;
|
|
}
|
|
|
|
#midi-player-button {
|
|
display: none;
|
|
}
|
|
body.owner #midi-player-button, body.admin #midi-player-button {
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
#footer > .right {
|
|
float: right;
|
|
}
|
|
|
|
#volume-indicator {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 32px;
|
|
height: 38px;
|
|
vertical-align: top;
|
|
}
|
|
#volume-indicator::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
background-color: #fff;
|
|
-webkit-mask: url(volume-up.svg) 0 / 32px;
|
|
mask: url(volume-up.svg) 0 / 32px;
|
|
}
|
|
#volume-indicator.low::before {
|
|
-webkit-mask: url(volume-down.svg) 0 / 32px;
|
|
mask: url(volume-down.svg) 0 / 32px;
|
|
}
|
|
#volume-indicator.mute::before {
|
|
-webkit-mask: url(volume-mute.svg) 0 / 32px;
|
|
mask: url(volume-mute.svg) 0 / 32px;
|
|
}
|
|
#volume {
|
|
margin: 0;
|
|
height: 38px;
|
|
width: 128px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
|
|
.notice {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: #ffe8a6;
|
|
padding: 10px;
|
|
margin: 16px;
|
|
font-size: 14px;
|
|
opacity: 1;
|
|
transition: opacity 1s;
|
|
}
|
|
|
|
.notice.hidden {
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
|
|
::-webkit-scrollbar{
|
|
width: 8px;
|
|
}
|
|
::-webkit-scrollbar-button {
|
|
display: none;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #707280;
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background-color: #424352;
|
|
}
|
|
|
|
|
|
input[type=range] {
|
|
-webkit-appearance: none;
|
|
width: 100%;
|
|
margin: 4px 0;
|
|
background-color: transparent;
|
|
}
|
|
input[type=range]:focus {
|
|
outline: none;
|
|
}
|
|
input[type=range]::-webkit-slider-runnable-track {
|
|
width: 100%;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
border-radius: 4px;
|
|
margin: 0 8px;
|
|
}
|
|
input[type=range]::-webkit-slider-thumb {
|
|
height: 20px;
|
|
width: 32px;
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
-webkit-appearance: none;
|
|
margin-top: -2px;
|
|
}
|