171 lines
2.5 KiB
CSS
171 lines
2.5 KiB
CSS
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: sans-serif;
|
|
font-size: clamp(0.5rem, 2vw, 1rem);
|
|
}
|
|
.xP {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
/* https://caniuse.com/viewport-unit-variants */
|
|
height: 100dvh;
|
|
}
|
|
|
|
.title, .status {
|
|
padding: .05em .3em;
|
|
background: #eee;
|
|
|
|
position: relative;
|
|
border-top: 3px solid #ccc;
|
|
border-bottom: 2px solid #888;
|
|
}
|
|
.title:before, .status:before {
|
|
content: " ";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
top: -2px;
|
|
background: #fff;
|
|
}
|
|
.title:after, .status:after {
|
|
content: " ";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
bottom: -1px;
|
|
background: #ccc;
|
|
}
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.middle {
|
|
flex: auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.list {
|
|
overflow-y: auto;
|
|
border-right: 1px solid #ccc;
|
|
min-width: 10em;
|
|
flex-shrink: 0;
|
|
}
|
|
.item {
|
|
padding: .05em .3em;
|
|
cursor: default;
|
|
}
|
|
.item.highlighted {
|
|
color: #ff5f00;
|
|
}
|
|
.item.activity {
|
|
font-weight: bold;
|
|
}
|
|
.item.current {
|
|
font-style: italic;
|
|
background: #f8f8f8;
|
|
border-top: 1px solid #eee;
|
|
border-bottom: 1px solid #eee;
|
|
margin-top: -1px;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
/* Only Firefox currently supports align-content: safe end, thus this. */
|
|
.buffer-container {
|
|
flex: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.filler {
|
|
flex: auto;
|
|
}
|
|
.buffer {
|
|
display: grid;
|
|
grid-template-columns: max-content minmax(0, 1fr);
|
|
overflow-y: auto;
|
|
}
|
|
.log {
|
|
font-family: monospace;
|
|
overflow-y: auto;
|
|
}
|
|
.log, .content {
|
|
padding: .1em .3em;
|
|
/* Note: https://bugs.chromium.org/p/chromium/issues/detail?id=1261435 */
|
|
white-space: break-spaces;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.leaked {
|
|
opacity: 50%;
|
|
}
|
|
.date {
|
|
padding: .3em;
|
|
grid-column: span 2;
|
|
font-weight: bold;
|
|
}
|
|
.unread {
|
|
height: 1px;
|
|
grid-column: span 2;
|
|
background: #ff5f00;
|
|
}
|
|
.time {
|
|
padding: .1em .3em;
|
|
background: #f8f8f8;
|
|
color: #bbb;
|
|
border-right: 1px solid #ccc;
|
|
}
|
|
.mark {
|
|
padding-right: .3em;
|
|
text-align: center;
|
|
display: inline-block;
|
|
min-width: 2em;
|
|
}
|
|
.mark.error {
|
|
color: red;
|
|
}
|
|
.mark.join {
|
|
color: green;
|
|
}
|
|
.mark.part {
|
|
color: red;
|
|
}
|
|
.mark.action {
|
|
color: darkred;
|
|
}
|
|
.content .b {
|
|
font-weight: bold;
|
|
}
|
|
.content .i {
|
|
font-style: italic;
|
|
}
|
|
.content .u {
|
|
text-decoration: underline;
|
|
}
|
|
.content .s {
|
|
text-decoration: line-through;
|
|
}
|
|
.content .m {
|
|
font-family: monospace;
|
|
}
|
|
|
|
textarea {
|
|
font: inherit;
|
|
padding: .05em .3em;
|
|
margin: 0;
|
|
border: 2px inset #eee;
|
|
flex-shrink: 0;
|
|
resize: vertical;
|
|
}
|
|
textarea:focus {
|
|
outline: none;
|
|
border-color: #ff5f00;
|
|
}
|