____ _ _______ __
/ __ \ | /| / / __/ |/ /
/ /_/ / |/ |/ / _// /
\____/|__/|__/___/_||_/
owenrtc / web/style.css
html, body {
background: #fdfcff;
color: #b0b0d0;
font-family: monospace;
margin: 0;
font-size: 14px;
line-height: 1.5;
-webkit-user-select: text;
user-select: text;
}
* {
box-sizing: border-box;
}
/* webkit2gtk: ensure inputs always selectable even if parent overrides */
input, select, textarea, [contenteditable] {
-webkit-user-select: text !important;
user-select: text !important;
-webkit-touch-callout: default;
}
a {
color: #a8a8d0;
text-decoration: none;
-webkit-user-select: text;
user-select: text;
}
a:visited { color: #d0a8c0; }
a:hover { color: #8e8ec8; }
.screen {
width: 100%;
max-width: 620px;
margin: 0 auto;
padding: 8vh 16px 0;
text-align: center;
}
.screen.hidden {
display: none;
}
.logo {
font-size: 11px;
line-height: 1.1;
margin: 0 auto 24px;
white-space: pre;
text-align: center;
display: inline-block;
color: #b0b0d0;
}
.logo-sm {
font-size: 14px;
font-weight: 400;
margin: 0;
}
h1 {
font-weight: 400;
margin: 0 0 10px;
font-size: 18px;
}
.s {
font-size: 12px;
opacity: 0.8;
}
.info {
width: 100%;
margin: 2em 0;
text-align: left;
}
.row {
display: flex;
align-items: center;
margin: 8px 0;
}
.label {
flex: 0 0 130px;
margin-right: 8px;
text-align: right;
font-size: 13px;
}
input, select {
flex: 1 1 auto;
width: 100%;
padding: 7px 9px;
border: 1px solid #d0d0e8;
background: #f5f5fd;
color: #6a6a90;
font-family: monospace;
font-size: 13px;
border-radius: 2px;
outline: none;
}
input:focus, select:focus {
border-color: #8e8ec8;
background: #ffffff;
}
input::placeholder {
color: #c8c8e0;
}
button {
padding: 7px 18px;
border: 1px solid #d0d0e8;
background: #f5f5fd;
color: #b0b0d0;
font-family: monospace;
font-size: 13px;
cursor: pointer;
border-radius: 2px;
}
button:hover {
border-color: #8e8ec8;
color: #8e8ec8;
}
.btn-row {
gap: 8px;
margin-top: 1.5em;
justify-content: center;
}
.btn-link {
border: none;
background: none;
color: #a8a8d0;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2em;
}
.server-list {
text-align: left;
margin: 1em 0;
}
.server-list:empty::after {
content: "no servers yet";
display: block;
text-align: center;
padding: 2em 0;
opacity: 0.6;
}
.server-card {
border: 1px solid #d0d0e8;
padding: 12px 16px;
margin: 8px 0;
border-radius: 2px;
display: flex;
justify-content: space-between;
align-items: center;
}
.server-card .name {
font-weight: 400;
font-size: 15px;
}
.server-card .meta {
font-size: 11px;
opacity: 0.7;
}
.add-btn {
width: 100%;
padding: 12px;
font-size: 18px;
border: 1px dashed #d0d0e8;
margin-top: 8px;
}
.log {
text-align: left;
font-size: 12px;
max-height: 200px;
overflow-y: auto;
background: #f5f5fd;
border: 1px solid #d0d0e8;
border-radius: 2px;
padding: 8px 12px;
margin: 8px 0;
white-space: pre-wrap;
word-break: break-all;
color: #8e8ec8;
}
.log.hidden {
display: none;
}
.log:empty {
display: none;
}