julian.kiedaischandClaude Opus 5.5
6809a71300
ViewersRun takes the rows of Java's viewers from the firmware: a switch's table, a home router's NAT table, each after its reset, and the frames "Pakete verwerfen" drops while it is held. The core writes a frame as Java does and resets the NAT's dynamic entries; the room sends both tables as views, drops while any client holds the button, and sends the dropped frames, begun anew with each start, with the clock their times of day are written from; the editor opens a table with a tap on a switch or home router and holds "Pakete verwerfen" in its toolbar, which now wraps on a phone. This completes F4.6. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
1344 lines
24 KiB
CSS
1344 lines
24 KiB
CSS
/* A computer's desktop after Java's GUIDesktopPanel: 640 × 460 pixels below
|
||
* the title bar, a grey taskbar at the bottom (180, 180, 180; 44 pixels high
|
||
* for a finger, Java's has 30), icons of 120 × 96 with white names on Java's
|
||
* background. On a phone it fills the surface. Java's colours stay in both
|
||
* themes: the screen is the simulated computer's, not the editor's. */
|
||
.desktop-window {
|
||
position: absolute;
|
||
z-index: 5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 640px;
|
||
max-width: 100%;
|
||
height: calc(460px + 14px + 36px);
|
||
max-height: 100%;
|
||
box-sizing: border-box;
|
||
border: 1px solid var(--border-strong);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background: var(--surface-card);
|
||
box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-color) 25%, transparent);
|
||
}
|
||
|
||
/* Below the mode buttons, which stay in reach. */
|
||
@media (max-width: 639px) {
|
||
.desktop-window {
|
||
inset: 72px 0 0 0 !important;
|
||
width: auto;
|
||
height: auto;
|
||
border-radius: 0;
|
||
}
|
||
}
|
||
|
||
.desktop-titlebar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
min-height: 36px;
|
||
padding: 0 0 0 8px;
|
||
background: var(--surface-raised);
|
||
border-bottom: 1px solid var(--border-default);
|
||
cursor: move;
|
||
touch-action: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.desktop-titlebar img {
|
||
width: 24px;
|
||
height: 24px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.desktop-titlebar h2 {
|
||
flex: 1;
|
||
margin: 0;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.desktop-close {
|
||
min-width: 44px;
|
||
min-height: 36px;
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--text-secondary);
|
||
font: inherit;
|
||
font-size: 22px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.desktop-screen {
|
||
position: relative;
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: auto;
|
||
background-size: cover;
|
||
background-position: top left;
|
||
}
|
||
|
||
.desktop-icons {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px 5px;
|
||
margin: 0;
|
||
padding: 10px 5px;
|
||
list-style: none;
|
||
}
|
||
|
||
.desktop-icon {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
width: 120px;
|
||
height: 96px;
|
||
padding: 0;
|
||
border: none;
|
||
border-radius: 6px;
|
||
background: transparent;
|
||
color: #ffffff;
|
||
font: 13px Dialog, sans-serif;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.desktop-icon[aria-disabled='true'] {
|
||
cursor: default;
|
||
}
|
||
|
||
.desktop-icon:focus-visible {
|
||
outline: 2px solid #ffffff;
|
||
}
|
||
|
||
.desktop-icon img {
|
||
width: 64px;
|
||
height: 64px;
|
||
}
|
||
|
||
.desktop-info-layer {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.desktop-network {
|
||
margin: 0;
|
||
padding: 8px 12px;
|
||
border: 2px inset #c0c0c0;
|
||
background: #eeeeee;
|
||
color: #000000;
|
||
font: 13px Dialog, sans-serif;
|
||
}
|
||
|
||
.desktop-network div {
|
||
display: grid;
|
||
grid-template-columns: 110px 140px;
|
||
align-items: center;
|
||
min-height: 26px;
|
||
}
|
||
|
||
.desktop-network dt,
|
||
.desktop-network dd {
|
||
margin: 0;
|
||
}
|
||
|
||
.desktop-network dd {
|
||
padding: 2px 6px;
|
||
background: #ffffff;
|
||
border: 1px solid #b0b0b0;
|
||
font-variant-numeric: tabular-nums;
|
||
user-select: text;
|
||
}
|
||
|
||
.desktop-taskbar {
|
||
display: grid;
|
||
grid-template-columns: 52px 1fr 52px;
|
||
align-items: stretch;
|
||
height: 44px;
|
||
flex: none;
|
||
background: rgb(180 180 180);
|
||
}
|
||
|
||
.desktop-home,
|
||
.desktop-network-icon {
|
||
border: none;
|
||
background: transparent;
|
||
color: #000000;
|
||
font: 13px Dialog, sans-serif;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.desktop-home {
|
||
justify-self: center;
|
||
padding: 0 12px;
|
||
}
|
||
|
||
.desktop-network-icon img {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
/* A program's window over the desktop (GUIApplicationWindow): Java's dark
|
||
* grey title bar of 30 pixels with the icon at 16. */
|
||
.program-window {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.program-titlebar {
|
||
display: grid;
|
||
grid-template-columns: 30px 1fr 30px;
|
||
align-items: center;
|
||
height: 30px;
|
||
flex: none;
|
||
background: rgb(64 64 64);
|
||
}
|
||
|
||
.program-titlebar img {
|
||
justify-self: center;
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.program-titlebar h3 {
|
||
margin: 0;
|
||
text-align: center;
|
||
font: 13px Dialog, sans-serif;
|
||
color: rgb(225 225 225);
|
||
}
|
||
|
||
.program-content {
|
||
position: relative;
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* The command line (GUIApplicationTerminalWindow): grey on black, the input
|
||
* line right after the text in the same scrolling area. 16 pixels in the
|
||
* input: Safari on the iPad zooms into smaller fields. */
|
||
.terminal {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #000000;
|
||
}
|
||
|
||
.terminal-screen {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
padding: 5px 5px 5px;
|
||
color: rgb(222 222 222);
|
||
font: 14px ui-monospace, Menlo, Consolas, 'Courier New', monospace;
|
||
cursor: text;
|
||
}
|
||
|
||
.terminal-text {
|
||
margin: 0;
|
||
font: inherit;
|
||
white-space: pre-wrap;
|
||
overflow-wrap: anywhere;
|
||
user-select: text;
|
||
}
|
||
|
||
.terminal-input {
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
|
||
.terminal-prompt {
|
||
white-space: pre;
|
||
}
|
||
|
||
.terminal-input input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
padding: 0;
|
||
border: none;
|
||
outline: none;
|
||
background: transparent;
|
||
color: rgb(222 222 222);
|
||
caret-color: rgb(222 222 222);
|
||
font: 16px ui-monospace, Menlo, Consolas, 'Courier New', monospace;
|
||
}
|
||
|
||
.terminal-keys {
|
||
display: flex;
|
||
gap: 6px;
|
||
flex: none;
|
||
overflow-x: auto;
|
||
padding: 6px;
|
||
background: rgb(32 32 32);
|
||
}
|
||
|
||
.terminal-chip {
|
||
flex: none;
|
||
min-width: 44px;
|
||
min-height: 44px;
|
||
padding: 0 12px;
|
||
border: 1px solid rgb(90 90 90);
|
||
border-radius: 8px;
|
||
background: rgb(48 48 48);
|
||
color: rgb(222 222 222);
|
||
font: 14px ui-monospace, Menlo, Consolas, monospace;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* The software installation (GUIInstallationsDialog): two lists of 170
|
||
* pixels in Java, the arrows between them, "apply changes" below. */
|
||
.installation {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 10px;
|
||
background: #eeeeee;
|
||
color: #000000;
|
||
font: 13px Dialog, sans-serif;
|
||
}
|
||
|
||
.installation-lists {
|
||
flex: 1;
|
||
min-height: 0;
|
||
width: 100%;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
|
||
gap: 8px;
|
||
}
|
||
|
||
.installation-column {
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.installation-list {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
background: #ffffff;
|
||
border: 1px solid #a0a0a0;
|
||
}
|
||
|
||
.installation-list li {
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: 44px;
|
||
padding: 0 8px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
|
||
.installation-list li[aria-selected='true'] {
|
||
background: rgb(184 207 229);
|
||
}
|
||
|
||
.installation-list li:focus-visible {
|
||
outline: 2px solid rgb(99 130 191);
|
||
outline-offset: -2px;
|
||
}
|
||
|
||
.installation-arrows {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.installation-arrows button,
|
||
.installation-apply {
|
||
min-width: 44px;
|
||
min-height: 44px;
|
||
border: 1px solid #a0a0a0;
|
||
border-radius: 6px;
|
||
background: #f8f8f8;
|
||
color: #000000;
|
||
font: 13px Dialog, sans-serif;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.installation-apply {
|
||
padding: 0 16px;
|
||
flex: none;
|
||
}
|
||
|
||
/* The web browser (GUIApplicationWebBrowserWindow): the address line with
|
||
* its button above the page, five pixels around each as in Java; the page
|
||
* in a frame of its own on white. */
|
||
.browser {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #eeeeee;
|
||
font: 13px Dialog, sans-serif;
|
||
}
|
||
|
||
.browser-address {
|
||
display: flex;
|
||
gap: 5px;
|
||
flex: none;
|
||
padding: 5px;
|
||
}
|
||
|
||
.browser-address input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
min-height: 36px;
|
||
padding: 0 6px;
|
||
border: 1px solid #a0a0a0;
|
||
background: #ffffff;
|
||
color: #000000;
|
||
font: 16px Dialog, sans-serif;
|
||
}
|
||
|
||
.browser-address button,
|
||
.web-server-bar button {
|
||
min-width: 44px;
|
||
min-height: 36px;
|
||
padding: 0 14px;
|
||
border: 1px solid #a0a0a0;
|
||
border-radius: 6px;
|
||
background: #f8f8f8;
|
||
color: #000000;
|
||
font: 13px Dialog, sans-serif;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.browser-page {
|
||
flex: 1;
|
||
min-height: 0;
|
||
margin: 0 5px 5px;
|
||
display: flex;
|
||
background: #ffffff;
|
||
border: 1px solid #a0a0a0;
|
||
}
|
||
|
||
.browser-page iframe {
|
||
flex: 1;
|
||
width: 100%;
|
||
border: none;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.browser-start {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.browser-start img {
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* The web server (GUIApplicationWebServerWindow): the button and the check
|
||
* box above, the virtual hosts' table while it is ticked, the lines below. */
|
||
.web-server {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
padding: 5px 10px 10px;
|
||
background: #eeeeee;
|
||
color: #000000;
|
||
font: 13px Dialog, sans-serif;
|
||
}
|
||
|
||
.web-server-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 8px 24px;
|
||
flex: none;
|
||
}
|
||
|
||
.web-server-bar label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
min-height: 44px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.web-server-bar input[type='checkbox'] {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.web-server-hosts {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
flex: none;
|
||
}
|
||
|
||
.web-server-hosts table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
table-layout: fixed;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.web-server-hosts th {
|
||
padding: 4px;
|
||
border: 1px solid #a0a0a0;
|
||
background: #e4e4e4;
|
||
font-weight: normal;
|
||
text-align: left;
|
||
}
|
||
|
||
.web-server-hosts td {
|
||
padding: 0;
|
||
border: 1px solid #c0c0c0;
|
||
}
|
||
|
||
.web-server-hosts td input {
|
||
width: 100%;
|
||
min-height: 32px;
|
||
box-sizing: border-box;
|
||
padding: 0 5px;
|
||
border: none;
|
||
background: transparent;
|
||
color: #000000;
|
||
font: 16px Dialog, sans-serif;
|
||
}
|
||
|
||
.web-server-log {
|
||
flex: 1;
|
||
min-height: 120px;
|
||
margin: 0;
|
||
overflow: auto;
|
||
padding: 4px;
|
||
border: 1px solid #a0a0a0;
|
||
background: #ffffff;
|
||
font: 12px ui-monospace, Menlo, Consolas, monospace;
|
||
white-space: pre-wrap;
|
||
overflow-wrap: anywhere;
|
||
user-select: text;
|
||
}
|
||
|
||
/* The e-mail program and server (GUIApplicationEmailAnwendungWindow,
|
||
* GUIApplicationEmailServerWindow): buttons above, Java's tabs as a row,
|
||
* a list, below the mail chosen or the page's form; writing and the account
|
||
* as a window over the program (Java's showModularWindow), Java's dialogs as
|
||
* a notice with its buttons. */
|
||
.mail-client,
|
||
.mail-server {
|
||
position: relative;
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
padding: 5px;
|
||
background: #eeeeee;
|
||
color: #000000;
|
||
font: 13px Dialog, sans-serif;
|
||
}
|
||
|
||
.mail-toolbar,
|
||
.mail-server-bar,
|
||
.mail-dialog-buttons {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 5px 10px;
|
||
flex: none;
|
||
}
|
||
|
||
.mail-toolbar button,
|
||
.mail-server-bar button,
|
||
.mail-dialog button,
|
||
.mail-question button,
|
||
.mail-form button,
|
||
.mail-accounts > button {
|
||
min-width: 44px;
|
||
min-height: 40px;
|
||
padding: 0 12px;
|
||
border: 1px solid #a0a0a0;
|
||
border-radius: 6px;
|
||
background: #f8f8f8;
|
||
color: #000000;
|
||
font: 13px Dialog, sans-serif;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mail-toolbar img {
|
||
display: block;
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
.mail-server-bar label {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
min-width: 200px;
|
||
}
|
||
|
||
.mail-server-bar input,
|
||
.mail-form input,
|
||
.mail-dialog input,
|
||
.mail-dialog select {
|
||
flex: 1;
|
||
min-width: 0;
|
||
min-height: 32px;
|
||
padding: 0 6px;
|
||
border: 1px solid #a0a0a0;
|
||
background: #ffffff;
|
||
color: #000000;
|
||
font: 16px Dialog, sans-serif;
|
||
}
|
||
|
||
.mail-client [aria-invalid='true'],
|
||
.mail-server [aria-invalid='true'] {
|
||
border-color: #ff0000;
|
||
color: #ff0000;
|
||
}
|
||
|
||
.mail-tabs {
|
||
display: flex;
|
||
gap: 2px;
|
||
flex: none;
|
||
border-bottom: 1px solid #a0a0a0;
|
||
}
|
||
|
||
.mail-tabs button {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
min-height: 40px;
|
||
padding: 0 12px;
|
||
border: 1px solid #a0a0a0;
|
||
border-bottom: none;
|
||
border-radius: 6px 6px 0 0;
|
||
background: #e0e0e0;
|
||
color: #000000;
|
||
font: 13px Dialog, sans-serif;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mail-tabs button[aria-selected='true'] {
|
||
background: #ffffff;
|
||
}
|
||
|
||
.mail-list,
|
||
.mail-accounts {
|
||
flex: 1;
|
||
min-height: 80px;
|
||
overflow: auto;
|
||
background: #ffffff;
|
||
border: 1px solid #a0a0a0;
|
||
}
|
||
|
||
.mail-accounts {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
.mail-accounts > button {
|
||
align-self: flex-start;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.mail-list table,
|
||
.mail-accounts table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
table-layout: fixed;
|
||
}
|
||
|
||
.mail-list th,
|
||
.mail-accounts th {
|
||
padding: 4px 6px;
|
||
border-bottom: 1px solid #a0a0a0;
|
||
background: #e4e4e4;
|
||
font-weight: normal;
|
||
text-align: left;
|
||
}
|
||
|
||
.mail-list td,
|
||
.mail-accounts td {
|
||
height: 30px;
|
||
padding: 0 6px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mail-list tr[aria-selected='true'] td,
|
||
.mail-accounts tr[aria-selected='true'] td {
|
||
background: rgb(184 207 229);
|
||
}
|
||
|
||
.mail-preview {
|
||
flex: 1;
|
||
min-height: 80px;
|
||
overflow: auto;
|
||
padding: 4px;
|
||
border: 1px solid #a0a0a0;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.mail-preview pre,
|
||
.mail-log {
|
||
margin: 0;
|
||
font: 12px ui-monospace, Menlo, Consolas, monospace;
|
||
white-space: pre-wrap;
|
||
overflow-wrap: anywhere;
|
||
user-select: text;
|
||
}
|
||
|
||
.mail-welcome {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
margin: 0;
|
||
font-family: Arial, sans-serif;
|
||
}
|
||
|
||
.mail-log {
|
||
flex: 1;
|
||
min-height: 80px;
|
||
overflow: auto;
|
||
padding: 4px;
|
||
border: 1px solid #a0a0a0;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.mail-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 6px;
|
||
max-width: 420px;
|
||
}
|
||
|
||
.mail-form label,
|
||
.mail-dialog label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.mail-form label span,
|
||
.mail-dialog label span {
|
||
flex: none;
|
||
width: 140px;
|
||
}
|
||
|
||
.mail-form > button {
|
||
align-self: flex-start;
|
||
}
|
||
|
||
.mail-notice {
|
||
margin: 0;
|
||
}
|
||
|
||
.mail-dialog {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 2;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
overflow: auto;
|
||
padding: 0 8px 8px;
|
||
background: #eeeeee;
|
||
}
|
||
|
||
.mail-dialog h4 {
|
||
margin: 0 -8px;
|
||
padding: 6px;
|
||
background: rgb(100 100 100);
|
||
color: rgb(250 250 250);
|
||
font: 13px Dialog, sans-serif;
|
||
text-align: center;
|
||
}
|
||
|
||
.mail-dialog textarea {
|
||
flex: 1;
|
||
min-height: 120px;
|
||
padding: 4px;
|
||
border: 1px solid #a0a0a0;
|
||
font: 16px ui-monospace, Menlo, Consolas, monospace;
|
||
}
|
||
|
||
.mail-question {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 30%;
|
||
z-index: 3;
|
||
transform: translateX(-50%);
|
||
width: min(90%, 380px);
|
||
padding: 12px;
|
||
border: 1px solid #808080;
|
||
border-radius: 6px;
|
||
background: #ffffff;
|
||
box-shadow: 0 4px 16px rgb(0 0 0 / 30%);
|
||
}
|
||
|
||
.mail-question p {
|
||
margin: 0 0 10px;
|
||
}
|
||
|
||
.mail-question button + button {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
/* The text editor (GUIApplicationTextEditorWindow): Java's four buttons
|
||
* above, the text below in Courier; 16 pixels, as Safari on the iPad zooms
|
||
* into smaller fields. */
|
||
.text-editor {
|
||
position: relative;
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
padding: 5px;
|
||
background: #eeeeee;
|
||
}
|
||
|
||
.text-editor-bar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 5px;
|
||
flex: none;
|
||
}
|
||
|
||
.text-editor-bar button,
|
||
.file-dialog-folder button {
|
||
min-width: 44px;
|
||
min-height: 40px;
|
||
padding: 0 12px;
|
||
border: 1px solid #a0a0a0;
|
||
border-radius: 6px;
|
||
background: #f8f8f8;
|
||
color: #000000;
|
||
font: 13px Dialog, sans-serif;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.text-editor-bar button:disabled,
|
||
.file-dialog-folder button:disabled {
|
||
color: #a0a0a0;
|
||
cursor: default;
|
||
}
|
||
|
||
.text-editor-text {
|
||
flex: 1;
|
||
min-height: 0;
|
||
resize: none;
|
||
padding: 4px;
|
||
border: 1px solid #a0a0a0;
|
||
background: #ffffff;
|
||
color: #000000;
|
||
font: 16px 'Courier New', Courier, monospace;
|
||
}
|
||
|
||
/* Java's file dialog (DMTNFileChooser) over the program. */
|
||
.file-dialog-folder {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex: none;
|
||
}
|
||
|
||
.file-dialog-folder span {
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.file-dialog-entries {
|
||
flex: 1;
|
||
min-height: 96px;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: auto;
|
||
border: 1px solid #a0a0a0;
|
||
background: #ffffff;
|
||
list-style: none;
|
||
}
|
||
|
||
.file-dialog-entries button {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
width: 100%;
|
||
min-height: 32px;
|
||
padding: 0 6px;
|
||
border: 0;
|
||
background: transparent;
|
||
color: #000000;
|
||
font: 13px Dialog, sans-serif;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.file-dialog-entries button[aria-pressed='true'] {
|
||
background: #b8cfe5;
|
||
}
|
||
|
||
/* The file explorer (GUIApplicationFileExplorerWindow): the menu's actions
|
||
* as buttons, the tree beside the folder's entries (one above the other on
|
||
* a narrow screen). */
|
||
.file-explorer {
|
||
position: relative;
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
padding: 5px;
|
||
background: #eeeeee;
|
||
}
|
||
|
||
.file-explorer-bar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 5px;
|
||
flex: none;
|
||
}
|
||
|
||
.file-explorer-bar button {
|
||
min-width: 44px;
|
||
min-height: 40px;
|
||
padding: 0 10px;
|
||
border: 1px solid #a0a0a0;
|
||
border-radius: 6px;
|
||
background: #f8f8f8;
|
||
color: #000000;
|
||
font: 13px Dialog, sans-serif;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.file-explorer-bar button:disabled {
|
||
color: #a0a0a0;
|
||
cursor: default;
|
||
}
|
||
|
||
.file-explorer-body {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
gap: 5px;
|
||
}
|
||
|
||
.file-explorer-tree,
|
||
.file-explorer-entries {
|
||
flex: 1;
|
||
min-width: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: auto;
|
||
border: 1px solid #a0a0a0;
|
||
background: #ffffff;
|
||
list-style: none;
|
||
}
|
||
|
||
.file-explorer-tree button,
|
||
.file-explorer-entries button {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
width: 100%;
|
||
min-height: 32px;
|
||
padding: 0 6px;
|
||
border: 0;
|
||
background: transparent;
|
||
color: #000000;
|
||
font: 13px Dialog, sans-serif;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.file-explorer-tree button[aria-current='true'],
|
||
.file-explorer-tree button[aria-pressed='true'],
|
||
.file-explorer-entries button[aria-pressed='true'] {
|
||
background: #b8cfe5;
|
||
}
|
||
|
||
@media (max-width: 639px) {
|
||
.file-explorer-body {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
.file-import label button {
|
||
flex: none;
|
||
}
|
||
|
||
.file-import-output {
|
||
min-height: 1.5em;
|
||
margin: 0;
|
||
font-weight: bold;
|
||
white-space: pre-line;
|
||
}
|
||
|
||
/* The image viewer (GUIApplicationImageViewerWindow): "Öffnen" above, the picture below. */
|
||
.image-viewer {
|
||
position: relative;
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
padding: 5px;
|
||
background: #eeeeee;
|
||
}
|
||
|
||
.image-viewer-picture {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.image-viewer-picture img {
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* The echo server and the generic client (GUIApplicationServerBausteinWindow,
|
||
* GUIApplicationClientBausteinWindow), on the web server's look. */
|
||
.echo-server input,
|
||
.simple-client input,
|
||
.simple-client textarea {
|
||
min-height: 32px;
|
||
padding: 0 6px;
|
||
border: 1px solid #a0a0a0;
|
||
background: #ffffff;
|
||
color: #000000;
|
||
font: 16px Dialog, sans-serif;
|
||
}
|
||
|
||
.echo-server input {
|
||
width: 8em;
|
||
}
|
||
|
||
.echo-server [aria-invalid='true'],
|
||
.simple-client [aria-invalid='true'] {
|
||
border-color: #ff0000;
|
||
color: #ff0000;
|
||
}
|
||
|
||
.echo-server input:read-only,
|
||
.simple-client input:read-only {
|
||
background: #eeeeee;
|
||
}
|
||
|
||
.simple-client-field,
|
||
.simple-client-message {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
flex: none;
|
||
}
|
||
|
||
.simple-client-field span {
|
||
flex: none;
|
||
width: 140px;
|
||
}
|
||
|
||
.simple-client-field input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.simple-client-message {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.simple-client-message textarea {
|
||
min-height: 3.5em;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
}
|
||
|
||
/* The DNS server (GUIApplicationDNSServerWindow): button and box, three tabs
|
||
* of two fields, two buttons and a table whose cells are written in place. */
|
||
.dns-server-page {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.dns-server input:not([type='checkbox']) {
|
||
min-height: 32px;
|
||
padding: 0 6px;
|
||
border: 1px solid #a0a0a0;
|
||
background: #ffffff;
|
||
color: #000000;
|
||
font: 16px Dialog, sans-serif;
|
||
}
|
||
|
||
.dns-server [aria-invalid='true'] {
|
||
border-color: #ff0000;
|
||
color: #ff0000;
|
||
}
|
||
|
||
.dns-server-notice {
|
||
white-space: pre-line;
|
||
}
|
||
|
||
.dns-server-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.dns-server-table th {
|
||
padding: 4px 6px;
|
||
border-bottom: 1px solid #a0a0a0;
|
||
text-align: left;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.dns-server-table td {
|
||
padding: 2px;
|
||
border-bottom: 1px solid #dddddd;
|
||
}
|
||
|
||
.dns-server-table td input {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
border-color: transparent;
|
||
}
|
||
|
||
.dns-server-table tr[aria-selected='true'] td,
|
||
.dns-server-table tr[aria-selected='true'] input {
|
||
background: #b8cfe5;
|
||
}
|
||
|
||
/* A computer's firewall (GUIApplicationFirewallWindow): two tabs, the boxes,
|
||
* the port with its two lists, two buttons and the table of rules; the log. */
|
||
.personal-firewall-page {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.personal-firewall-boxes {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.personal-firewall-boxes label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
min-height: 44px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.personal-firewall-boxes input {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.personal-firewall-hint {
|
||
margin: 0;
|
||
}
|
||
|
||
.personal-firewall input:not([type='checkbox']),
|
||
.personal-firewall select {
|
||
min-height: 32px;
|
||
padding: 0 6px;
|
||
border: 1px solid #a0a0a0;
|
||
background: #ffffff;
|
||
color: #000000;
|
||
font: 16px Dialog, sans-serif;
|
||
}
|
||
|
||
.personal-firewall input:not([type='checkbox']) {
|
||
width: 6em;
|
||
}
|
||
|
||
.personal-firewall [aria-invalid='true'] {
|
||
border-color: #ff0000;
|
||
color: #ff0000;
|
||
}
|
||
|
||
.personal-firewall-table td {
|
||
min-height: 32px;
|
||
padding: 6px;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.personal-firewall-table tr {
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Gnutella (GUIApplicationPeerToPeerAnwendungWindow): four tabs with Java's
|
||
* symbols — the network, the search, the files, the settings. */
|
||
.gnutella-page {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.gnutella .mail-tabs button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.gnutella .mail-tabs img {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
.gnutella-label {
|
||
margin: 0;
|
||
}
|
||
|
||
.gnutella input {
|
||
min-height: 32px;
|
||
padding: 0 6px;
|
||
border: 1px solid #a0a0a0;
|
||
background: #ffffff;
|
||
color: #000000;
|
||
font: 16px Dialog, sans-serif;
|
||
}
|
||
|
||
.gnutella [aria-invalid='true'] {
|
||
border-color: #ff0000;
|
||
color: #ff1414;
|
||
}
|
||
|
||
.gnutella-table td {
|
||
padding: 6px;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.gnutella-table tbody tr[tabindex] {
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* A switch's or home router's viewer (SatViewer, NatViewer): a table and its
|
||
* reset, in a window as small as Java's dialog allows the NAT table's six columns. */
|
||
.viewer-window {
|
||
width: 600px;
|
||
height: 320px;
|
||
}
|
||
|
||
.viewer-body {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding: 8px;
|
||
overflow: auto;
|
||
background: var(--surface-card);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.viewer-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.viewer-table th,
|
||
.viewer-table td {
|
||
padding: 6px;
|
||
border-bottom: 1px solid var(--border-default);
|
||
text-align: left;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.viewer-table th {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.viewer-bar button,
|
||
.drop-control button {
|
||
min-height: 44px;
|
||
padding: 0 12px;
|
||
border: 1px solid var(--border-default);
|
||
border-radius: 8px;
|
||
background: var(--surface-raised);
|
||
color: var(--text-primary);
|
||
font: inherit;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* "Pakete verwerfen" (SimulationControl): held, then the list of dropped frames below. */
|
||
.drop-control {
|
||
position: relative;
|
||
}
|
||
|
||
.drop-control-bar {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
.drop-control-hold {
|
||
touch-action: none;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
-webkit-touch-callout: none;
|
||
}
|
||
|
||
.drop-control button[aria-pressed='true'] {
|
||
background: var(--danger-soft);
|
||
border-color: var(--danger);
|
||
color: var(--danger-on-soft);
|
||
}
|
||
|
||
.drop-control-list {
|
||
position: absolute;
|
||
top: calc(100% + 6px);
|
||
left: 0;
|
||
width: min(720px, calc(100vw - 32px));
|
||
max-height: 240px;
|
||
margin: 0;
|
||
overflow: auto;
|
||
padding: 6px;
|
||
border: 1px solid var(--border-default);
|
||
border-radius: 8px;
|
||
background: var(--surface-card);
|
||
color: var(--text-primary);
|
||
font: 12px ui-monospace, Menlo, Consolas, monospace;
|
||
white-space: pre-wrap;
|
||
overflow-wrap: anywhere;
|
||
}
|