093b6cd868
Message format has been changed so that all text boxes will be the same width, rather than they change depending on name length. TL;DR: changed location of name tag You can now format your messages with cmark flavored markdown. There still may be rendering bugs, but I will fix them as they come. Messages are now properly sanitized with the ammonia package. Messages now have proper timestamps with help from chrono. Right now previous versions are not compatible with the new timestamp format. A patch will be introduced in the next couple of updates to remedy that issue. Did some housekeeping in `static/index.css`
211 lines
2.8 KiB
CSS
211 lines
2.8 KiB
CSS
body {
|
|
margin: unset !important;
|
|
padding: unset;
|
|
max-width: unset;
|
|
}
|
|
|
|
.bar {
|
|
padding: 0.5em;
|
|
background-color: #111111;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.bar > div {
|
|
flex-grow: 1;
|
|
align-self: center;
|
|
}
|
|
|
|
.bar > div > h1 {
|
|
font-size: xx-large;
|
|
margin: unset;
|
|
}
|
|
|
|
.bar > div > p {
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
margin-right: 2em;
|
|
}
|
|
|
|
.bar > h1 {
|
|
width: fit-content;
|
|
height: fit-content;
|
|
}
|
|
|
|
.bar > h1 > a {
|
|
font-size: 0.5em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#login-status {
|
|
display: contents;
|
|
}
|
|
|
|
#description {
|
|
color: #777777;
|
|
}
|
|
|
|
#title {
|
|
width: 100%;
|
|
height: 3em;
|
|
position: inherit;
|
|
top: 0;
|
|
left: 0;
|
|
margin-bottom: 1rem;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
#title > h1 {
|
|
font-size: 2.5em !important;
|
|
}
|
|
|
|
.message {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
border-bottom: 1px solid #555;
|
|
display: flex;
|
|
flex-direction: inherit;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.message > b {
|
|
padding-left: 1em;
|
|
}
|
|
|
|
.message > * {
|
|
padding: 0.2em;
|
|
}
|
|
|
|
.message:hover {
|
|
background-color: #3a3a3a;
|
|
animation-duration: 0.1s;
|
|
animation-name: msg-hover;
|
|
}
|
|
|
|
@keyframes msg-hover {
|
|
from {
|
|
background-color: inherit;
|
|
}
|
|
to {
|
|
background-color: #3a3a3a;
|
|
}
|
|
}
|
|
|
|
.vertical-center {
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
-ms-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
table {
|
|
font-size: 1em;
|
|
}
|
|
|
|
table, th, td {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th {
|
|
text-align: left;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.auth {
|
|
margin: auto;
|
|
width: 20em;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
border: 2px solid white;
|
|
border-radius: 5px;
|
|
background-color: #3A3A3A;
|
|
}
|
|
|
|
#index {
|
|
padding: 3em;
|
|
padding-top: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@keyframes board-hover {
|
|
from {
|
|
background-color: inherit;
|
|
}
|
|
to {
|
|
background-color: #444;
|
|
}
|
|
}
|
|
|
|
tr.board {
|
|
border-bottom: 1px solid #555;
|
|
}
|
|
|
|
tr.board:nth-child(1n+1) {
|
|
font-weight: lighter;
|
|
}
|
|
|
|
tr.board:hover {
|
|
animation-duration: 0.25s;
|
|
animation-name: board-hover;
|
|
background-color: #444;
|
|
}
|
|
|
|
.message-content {
|
|
flex-grow: 1;
|
|
/*max-width: 90%; */
|
|
}
|
|
|
|
.message-content > pre {
|
|
margin-top: 0.1rem;
|
|
margin-bottom: 0.1rem;
|
|
}
|
|
|
|
pre {
|
|
white-space: pre-wrap; /* Since CSS 2.1 */
|
|
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
|
|
white-space: -pre-wrap; /* Opera 4-6 */
|
|
white-space: -o-pre-wrap; /* Opera 7 */
|
|
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
|
}
|
|
|
|
pre > h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
pre > h2 {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
pre > h3 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
pre > h4 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
pre > h5 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
pre > *:last-child {
|
|
margin-bottom: unset;
|
|
}
|
|
|
|
code {
|
|
background-color: #222;
|
|
padding: 0.5rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.message-time {
|
|
font-size: 0.75rem;
|
|
color: #555
|
|
}
|