mirror of
https://gitlab.com/octospacc/WinDog.git
synced 2025-06-05 22:09:20 +02:00
122 lines
2.4 KiB
CSS
Executable File
122 lines
2.4 KiB
CSS
Executable File
:root {
|
|
--bg-color: #fff;
|
|
--bg-color-2: #ddd;
|
|
--fg-color: #000;
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html.no-margin > body {
|
|
margin: 0;
|
|
}
|
|
body {
|
|
color: var(--fg-color);
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
html.wrapper > body {
|
|
overflow: hidden;
|
|
}
|
|
html.wrapper > body > iframe {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
border: none;
|
|
}
|
|
|
|
form > * {
|
|
min-height: 2em;
|
|
height: 98vh; height: calc(100vh - 1em);
|
|
}
|
|
form > input[type="text"], form > textarea {
|
|
width: 93%; width: calc(100% - 4em);
|
|
resize: none;
|
|
}
|
|
form > input[type="submit"] {
|
|
width: 3em;
|
|
float: right;
|
|
}
|
|
/* .on-connection-dropped {
|
|
color: red;
|
|
margin: 0;
|
|
display: none;
|
|
} */
|
|
|
|
.sticky-box {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background-color: var(--bg-color);
|
|
}
|
|
.input-frame {
|
|
overflow: auto;
|
|
height: 4em; height: calc(4em + 4px);
|
|
min-height: 4em; min-height: calc(4em + 4px);
|
|
resize: vertical;
|
|
border-bottom: 2px dotted var(--fg-color);
|
|
padding-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
.input-frame > iframe {
|
|
width: 100%;
|
|
height: 100%; height: calc(100% - 1em);
|
|
border: none;
|
|
}
|
|
.message {
|
|
margin: 0;
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
text-align: left;
|
|
background: linear-gradient(to left, var(--bg-color), var(--bg-color-2));
|
|
}
|
|
.message.from-self {
|
|
text-align: right;
|
|
background: linear-gradient(to left, var(--bg-color-2), var(--bg-color));
|
|
}
|
|
.message.blue, .message.color-1 {
|
|
background: linear-gradient(to left, var(--bg-color), #ccf);
|
|
}
|
|
.message.red, .message.color-2 {
|
|
background: linear-gradient(to left, var(--bg-color), #fcc);
|
|
}
|
|
.message.green, .message.color-3 {
|
|
background: linear-gradient(to left, var(--bg-color), #dfd);
|
|
}
|
|
.message.purple, .message.color-4 {
|
|
background: linear-gradient(to left, var(--bg-color), #fdf);
|
|
}
|
|
.message.cyan, .message.color-5 {
|
|
background: linear-gradient(to left, var(--bg-color), #dff);
|
|
}
|
|
.message.yellow, .message.color-6 {
|
|
background: linear-gradient(to left, var(--bg-color), #ffd);
|
|
}
|
|
/* .message:last-child { position: sticky; bottom: 0; } */
|
|
/* TODO .message:last-child-minus-1 { position: sticky; bottom: 0; } */
|
|
.message * {
|
|
max-width: 100%;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
.message p {
|
|
word-break: break-word;
|
|
}
|
|
.message pre {
|
|
overflow-x: auto;
|
|
padding-bottom: 1em;
|
|
}
|
|
.message img,
|
|
.message video {
|
|
max-height: 80vh; max-height: calc(90vh - 6em);
|
|
}
|
|
.message > .name {
|
|
display: inline-block;
|
|
padding: 1em;
|
|
padding-bottom: 0;
|
|
font-style: italic;
|
|
font-size: small;
|
|
}
|
|
#load-target:target {
|
|
display: revert !important;
|
|
padding-top: 1em;
|
|
}
|