xK/xP/public/xP.css

246 lines
3.8 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;
}
.overlay {
padding: .6em .9em;
background: #eee;
border: 1px outset #eee;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.title, .status {
padding: .05em .3em;
background: #eee;
display: flex;
justify-content: space-between;
align-items: baseline;
column-gap: .3em;
position: relative;
border-top: 3px solid #ccc;
border-bottom: 2px solid #888;
}
.title {
/* To approximate right-aligned space-between. */
flex-direction: row-reverse;
}
.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;
}
.toolbar {
display: flex;
align-items: baseline;
column-gap: .3em;
}
button {
font: inherit;
background: transparent;
border: 1px solid transparent;
}
button:focus {
border: 1px dashed #000;
}
button:hover {
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #888;
border-bottom: 1px solid #888;
}
button:hover:active {
border-left: 1px solid #888;
border-top: 1px solid #888;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.middle {
flex: auto;
display: flex;
flex-direction: row;
overflow: hidden;
}
.list {
overflow-y: auto;
border-right: 2px 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: #eee;
}
/* Only Firefox currently supports align-content: safe end, thus this. */
.buffer-container {
flex: auto;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.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 {
/* Note: https://bugs.chromium.org/p/chromium/issues/detail?id=1261435 */
white-space: break-spaces;
overflow-wrap: break-word;
}
.log, .buffer .content {
padding: .1em .3em;
}
.leaked {
opacity: 50%;
}
.date {
padding: .3em;
grid-column: span 2;
font-weight: bold;
}
.unread {
grid-column: span 2;
border-top: 1px solid #ff5f00;
}
.time {
padding: .1em .3em;
background: #f8f8f8;
color: #bbb;
border-right: 1px solid #ccc;
}
.time.hidden:after {
border-top: .2em dotted #ccc;
display: block;
width: 50%;
margin: 0 auto;
content: "";
}
.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;
}
.completions {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: #fff;
padding: .05em .3em;
border-top: 1px solid #888;
max-height: 50%;
display: flex;
flex-flow: column wrap;
column-gap: .6em;
overflow-x: auto;
}
.input {
flex-shrink: 0;
border: 2px inset #eee;
overflow: hidden;
resize: vertical;
display: flex;
}
.input:focus-within {
border-color: #ff5f00;
}
.prompt {
padding: .05em .3em;
border-right: 1px solid #ccc;
background: #f8f8f8;
font-weight: bold;
}
textarea {
font: inherit;
padding: .05em .3em;
margin: 0;
border: 0;
flex-grow: 1;
resize: none;
}
textarea:focus {
outline: none;
}