xK/xP/public/xP.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;
}