html, body {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
body {
display: grid;
grid-template-rows: auto max-content;
grid-template-columns: max-content auto;
font-family: monospace;
}
#sidebar, #buffer, #connect {
width: 100%;
height: 100%;
overflow: auto;
}
#sidebar {
background-color: #e3e3e3;
grid-row: 1 / 3;
}
#sidebar ul {
list-style-type: none;
margin: 0;
padding: 10px;
}
#sidebar ul a {
display: inline-block;
width: 100%;
}
#composer {
grid-column: 2;
border-top: 1px solid #e3e3e3;
}
#composer input {
display: block;
height: 35px;
width: 100%;
box-sizing: border-box;
padding: 10px;
border: none;
background: none;
}
#composer.read-only {
display: none;
}
#connect {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: white;
}
#connect form {
margin: 0 auto;
max-width: 300px;
}
#connect input[type="text"],
#connect input[type="username"],
#connect input[type="password"],
#connect input[type="url"] {
box-sizing: border-box;
width: 100%;
}
a {
color: green;
}
#sidebar a, a.timestamp, a.nick {
color: #4a4a4a;
text-decoration: none;
}
#sidebar .active a {
color: black;
}
#sidebar a:hover, #sidebar a:active,
a.timestamp:hover, a.timestamp:active,
a.nick:hover, a.nick:active {
text-decoration: underline;
}
details summary {
cursor: default;
}
#buffer {
box-sizing: border-box;
padding: 10px;
color: #4a4a4a;
}
#buffer .talk {
color: black;
}
#buffer .me-tell {
color: #b37400;
}
#buffer .nick-1 {
color: #f25e0d;
}
#buffer .nick-2 {
color: #e43611;
}
#buffer .nick-3 {
color: #f98a11;
}
#buffer .nick-4 {
color: #b4a700;
}
#buffer .nick-5 {
color: #89bd3b;
}
#buffer .nick-6 {
color: #4ea847;
}
#buffer .nick-7 {
color: #287e52;
}
#buffer .nick-8 {
color: #117873;
}
#buffer .nick-9 {
color: #0083a7;
}
#buffer .nick-10 {
color: #2a6596;
}
#buffer .nick-11 {
color: #385189;
}
#buffer .nick-12 {
color: #434078;
}
#buffer .nick-13 {
color: #5e4279;
}
#buffer .nick-14 {
color: #7a447a;
}
#buffer .nick-15 {
color: #e92980;
}
#buffer .nick-16 {
color: #ec273e;
}