farming-code 2.2.6

package/frontend/skins/crt/styles/monochrome-green.css

@@ -0,0 +1,509 @@
+@font-face {
+    font-family: "Departure Mono CRT";
+    src: url("../assets/fonts/departure-mono/DepartureMonoNerdFontMono-Regular.otf") format("opentype");
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+}
+
+#farming-crt {
+    --crt-phosphor: #0ccc68;
+    --crt-phosphor-bright: #55f59b;
+    --crt-phosphor-muted: #087a42;
+    --crt-phosphor-faint: rgba(12, 204, 104, 0.16);
+    --crt-background: #000d06;
+    --crt-panel: #030806;
+    --crt-panel-raised: #07110b;
+    --crt-border: rgba(12, 204, 104, 0.76);
+    --crt-font: "Departure Mono CRT", "Sarasa Mono SC", "PingFang SC", "Hiragino Sans GB", "Noto Sans Mono CJK SC", "Microsoft YaHei UI", monospace;
+    --crt-terminal-font: "JetBrains Mono", "SF Mono", Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Sarasa Mono SC", "PingFang SC", "Hiragino Sans GB", "Noto Sans Mono CJK SC", "Microsoft YaHei UI", monospace;
+    color: var(--crt-phosphor);
+    background: var(--crt-background);
+    border-color: var(--crt-phosphor);
+    font-family: var(--crt-font);
+    font-variant-ligatures: none;
+    text-shadow:
+        0 0 1px currentColor,
+        0 0 4px rgba(12, 204, 104, 0.3);
+}
+
+#farming-crt :where(button, input, textarea, select) {
+    font-family: var(--crt-font);
+    font-variant-ligatures: none;
+}
+
+#farming-crt :where(.top-bar, .sidebar, .modal-header, .dialog-header) {
+    background: var(--crt-panel-raised);
+    border-color: var(--crt-border);
+}
+
+#farming-crt .crt-brand-lockup {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    min-height: 58px;
+    margin: 10px 0 4px;
+    padding: 7px 4px 8px;
+    overflow: hidden;
+    border-top: 1px solid rgba(12, 204, 104, 0.22);
+    border-bottom: 1px solid rgba(12, 204, 104, 0.34);
+    background: radial-gradient(ellipse at 24% 50%, rgba(12, 204, 104, 0.075), transparent 62%);
+    filter: drop-shadow(0 0 3px rgba(12, 204, 104, 0.18));
+    animation: crt-brand-power-on 680ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+#farming-crt .crt-keyboard-guide {
+    width: calc(100% + 20px);
+    max-width: none;
+    margin: 0 -10px 10px;
+    padding: 0;
+    overflow: visible;
+    pointer-events: none;
+    user-select: none;
+}
+
+#farming-crt .crt-keyboard-guide svg {
+    display: block;
+    width: 100%;
+    height: auto;
+    overflow: visible;
+}
+
+#farming-crt .crt-keycap-side,
+#farming-crt .crt-keycap-top {
+    stroke-linejoin: bevel;
+    vector-effect: non-scaling-stroke;
+}
+
+#farming-crt .crt-keycap-side {
+    fill: #03120a;
+    stroke: rgba(12, 122, 63, 0.9);
+    stroke-width: 1;
+}
+
+#farming-crt .crt-keycap-top {
+    fill: #06150d;
+    stroke: rgba(32, 200, 107, 0.92);
+    stroke-width: 1;
+}
+
+#farming-crt .crt-keycap-label {
+    fill: rgba(116, 233, 167, 0.96);
+    font-family: var(--crt-font);
+    font-size: 9px;
+    text-anchor: middle;
+    dominant-baseline: middle;
+    text-shadow: none;
+}
+
+#farming-crt .crt-keycap-label-small {
+    font-size: 6.5px;
+    letter-spacing: 0.25px;
+}
+
+#farming-crt .crt-keycap-return {
+    font-size: 12px;
+}
+
+#farming-crt .crt-keyboard-guide-hint {
+    fill: rgba(116, 233, 167, 0.92);
+    font-family: var(--crt-font);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.3px;
+    dominant-baseline: middle;
+}
+
+#farming-crt .crt-brand-lockup::after {
+    content: "";
+    position: absolute;
+    inset: 6px 0;
+    pointer-events: none;
+    opacity: 0;
+    transform: translate3d(-110%, 0, 0);
+    background: linear-gradient(90deg, transparent, rgba(85, 245, 155, 0.16), transparent);
+    animation: crt-brand-sync 720ms 260ms ease-out both;
+}
+
+#farming-crt .crt-brand-mark {
+    flex: 0 0 51px;
+    width: 51px;
+    line-height: 0;
+}
+
+#farming-crt .crt-brand-mark svg {
+    display: block;
+    width: 100%;
+    height: auto;
+    overflow: visible;
+}
+
+#farming-crt .crt-brand-case,
+#farming-crt .crt-brand-pane,
+#farming-crt .crt-brand-prompt,
+#farming-crt .crt-brand-stand {
+    fill: none;
+    stroke-linecap: square;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
+}
+
+#farming-crt .crt-brand-case,
+#farming-crt .crt-brand-stand {
+    stroke: var(--crt-phosphor);
+    stroke-width: 2;
+    filter: drop-shadow(0 0 2px rgba(12, 204, 104, 0.52));
+}
+
+#farming-crt .crt-brand-pane {
+    stroke-width: 1.5;
+    opacity: 0.38;
+    transition: opacity 160ms ease, filter 160ms ease;
+}
+
+#farming-crt .crt-brand-pane-main,
+#farming-crt .crt-brand-prompt-main {
+    stroke: var(--crt-phosphor-bright);
+}
+
+#farming-crt .crt-brand-pane-worker-a,
+#farming-crt .crt-brand-prompt-worker-a {
+    stroke: #42d9ee;
+}
+
+#farming-crt .crt-brand-pane-worker-b,
+#farming-crt .crt-brand-prompt-worker-b {
+    stroke: #efaa3b;
+}
+
+#farming-crt .crt-brand-prompt {
+    stroke-width: 1.5;
+    opacity: 0.42;
+}
+
+#farming-crt .crt-brand-pane.is-live,
+#farming-crt .crt-brand-lockup[data-main-live="true"] .crt-brand-prompt-main,
+#farming-crt .crt-brand-lockup[data-worker-a-live="true"] .crt-brand-prompt-worker-a,
+#farming-crt .crt-brand-lockup[data-worker-b-live="true"] .crt-brand-prompt-worker-b {
+    opacity: 0.92;
+}
+
+#farming-crt .crt-brand-pane.is-signaling {
+    animation: crt-brand-pane-signal 560ms ease-out;
+}
+
+#farming-crt .crt-brand-wordmark {
+    min-width: 0;
+    margin-top: 1px;
+    line-height: 1;
+    white-space: nowrap;
+}
+
+#farming-crt .crt-brand-name {
+    display: block;
+    color: #f5e8bd;
+    font-family: var(--crt-font);
+    font-size: 15px;
+    font-weight: 400;
+    letter-spacing: 0.035em;
+    text-shadow: 0 0 5px rgba(245, 232, 189, 0.38);
+}
+
+#farming-crt .crt-brand-model {
+    display: block;
+    width: max-content;
+    margin-top: 5px;
+    color: var(--crt-phosphor-bright);
+    font-size: 9px;
+    letter-spacing: 0.22em;
+    text-shadow: 0 0 5px rgba(85, 245, 155, 0.45);
+}
+
+#farming-crt .crt-brand-lockup:hover {
+    border-color: rgba(85, 245, 155, 0.72);
+    filter: drop-shadow(0 0 5px rgba(12, 204, 104, 0.34));
+}
+
+@keyframes crt-brand-power-on {
+    0% {
+        opacity: 0;
+        transform: scale3d(1, 0.04, 1);
+    }
+    42% {
+        opacity: 0.88;
+        transform: scale3d(1, 0.04, 1);
+    }
+    100% {
+        opacity: 1;
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+@keyframes crt-brand-sync {
+    0% {
+        opacity: 0;
+        transform: translate3d(-110%, 0, 0);
+    }
+    35% {
+        opacity: 0.8;
+    }
+    100% {
+        opacity: 0;
+        transform: translate3d(110%, 0, 0);
+    }
+}
+
+@keyframes crt-brand-pane-signal {
+    0%, 100% {
+        opacity: 0.92;
+        filter: drop-shadow(0 0 0 currentColor);
+    }
+    34% {
+        opacity: 1;
+        filter: drop-shadow(0 0 5px currentColor);
+    }
+}
+
+#farming-crt :where(.agent-block, .agent-item, .sidebar-item, .modal-content, .input-dialog-content, .settings-panel, .settings-static-value) {
+    background: var(--crt-panel);
+    border-color: var(--crt-border);
+    box-shadow:
+        0 0 7px rgba(12, 204, 104, 0.15),
+        inset 0 0 10px rgba(12, 204, 104, 0.025);
+}
+
+#farming-crt :where(.agent-block:hover, .agent-item:hover, .sidebar-item:hover) {
+    background: rgba(12, 204, 104, 0.075);
+    border-color: var(--crt-phosphor-bright);
+    box-shadow:
+        0 0 10px rgba(12, 204, 104, 0.32),
+        inset 0 0 12px rgba(12, 204, 104, 0.055);
+}
+
+#farming-crt :where(.agent-block, .agent-item, .sidebar-item, .theme-item).crt-nav-selected {
+    background: rgba(12, 204, 104, 0.12) !important;
+    border-color: var(--crt-phosphor-bright) !important;
+}
+
+#farming-crt :where(.agent-block, .sidebar-main-agent-content).crt-nav-selected .agent-header {
+    margin-left: -4px;
+    padding-left: 4px;
+    color: #001409;
+    background: var(--crt-phosphor-bright);
+    text-shadow: none;
+}
+
+#farming-crt .sidebar-item.crt-nav-selected {
+    color: #001409;
+    background: var(--crt-phosphor-bright) !important;
+    text-shadow: none;
+}
+
+#farming-crt .sidebar-item.crt-nav-selected .key {
+    color: #001409;
+}
+
+#farming-crt :where(.crt-checkbox-label, button, input).crt-nav-selected {
+    outline: 1px solid var(--crt-phosphor-bright);
+    outline-offset: 2px;
+}
+
+#farming-crt .crt-checkbox-label.crt-nav-selected {
+    background: rgba(12, 204, 104, 0.1);
+    box-shadow: inset 3px 0 var(--crt-phosphor-bright);
+}
+
+#farming-crt .agent-block.unread,
+#farming-crt .agent-block.unread:hover {
+    box-shadow:
+        0 0 0 2px #000,
+        0 0 0 5px var(--crt-phosphor-bright),
+        0 0 14px rgba(85, 245, 155, 0.58),
+        inset 0 0 10px rgba(12, 204, 104, 0.025);
+}
+
+#farming-crt :where(.agent-header, .agent-status, .agent-output, .agent-list-group-title, .agent-item .name, .workspace-field-copy, .settings-static-value, .input-dialog-content h3, .dialog-header h3) {
+    color: var(--crt-phosphor);
+}
+
+#farming-crt .agent-header {
+    color: var(--crt-phosphor-bright);
+    letter-spacing: 0.015em;
+}
+
+#farming-crt .agent-output {
+    font-family: var(--crt-terminal-font);
+    font-size: 12px;
+    line-height: 1.28;
+    letter-spacing: 0;
+    text-shadow:
+        0 0 1px currentColor,
+        0 0 3px rgba(12, 204, 104, 0.22);
+}
+
+#farming-crt :where(.key-hint, .agent-item .key-hint, .workspace-history-badge, .input-dialog-content button:not(.workspace-history-item), .close-btn) {
+    color: #001409;
+    background: var(--crt-phosphor);
+    box-shadow: 0 0 8px rgba(12, 204, 104, 0.4);
+    text-shadow: none;
+}
+
+#farming-crt :where(.input-dialog-content button:not(.workspace-history-item):hover, .close-btn:hover) {
+    background: var(--crt-phosphor-bright);
+}
+
+#farming-crt .session-header-actions > .close-btn {
+    color: var(--crt-phosphor-bright) !important;
+    background: rgba(12, 204, 104, 0.2) !important;
+    border: 1px solid rgba(85, 245, 155, 0.72) !important;
+    box-shadow:
+        0 0 6px rgba(12, 204, 104, 0.16),
+        inset 0 0 8px rgba(12, 204, 104, 0.08);
+    text-shadow: 0 0 3px rgba(85, 245, 155, 0.34);
+}
+
+#farming-crt .session-header-actions > .close-btn:hover {
+    background: rgba(12, 204, 104, 0.3) !important;
+    box-shadow:
+        0 0 8px rgba(12, 204, 104, 0.22),
+        inset 0 0 9px rgba(12, 204, 104, 0.12);
+}
+
+#farming-crt .session-header-actions > .kill-btn {
+    color: #ff7770 !important;
+    background: rgba(204, 40, 40, 0.18) !important;
+    border: 1px solid rgba(255, 88, 80, 0.72) !important;
+    box-shadow:
+        0 0 6px rgba(255, 50, 45, 0.12),
+        inset 0 0 8px rgba(204, 40, 40, 0.08);
+    text-shadow: 0 0 3px rgba(255, 88, 80, 0.3);
+}
+
+#farming-crt .session-header-actions > .kill-btn:hover {
+    background: rgba(204, 40, 40, 0.28) !important;
+    box-shadow:
+        0 0 8px rgba(255, 50, 45, 0.18),
+        inset 0 0 9px rgba(204, 40, 40, 0.12);
+}
+
+#farming-crt :where(.workspace-input, .workspace-history) {
+    color: var(--crt-phosphor);
+    background: rgba(0, 8, 3, 0.96);
+    border-color: var(--crt-border);
+}
+
+#farming-crt :where(.workspace-history-header, .workspace-history-item) {
+    color: var(--crt-phosphor);
+    background: transparent;
+    border-color: rgba(12, 204, 104, 0.24);
+}
+
+#farming-crt .workspace-history-item.active {
+    color: var(--crt-phosphor-bright);
+    border-color: var(--crt-phosphor);
+    box-shadow: inset 0 0 0 1px var(--crt-phosphor);
+}
+
+#farming-crt .crt-checkbox:not(.danger) {
+    color: var(--crt-phosphor);
+}
+
+#farming-crt .crt-range {
+    appearance: none;
+    height: 12px;
+    background: rgba(0, 8, 3, 0.96);
+    border: 1px solid var(--crt-border);
+    border-radius: 0;
+    box-shadow: inset 0 0 5px rgba(12, 204, 104, 0.12);
+}
+
+#farming-crt .crt-range::-webkit-slider-thumb {
+    appearance: none;
+    width: 12px;
+    height: 22px;
+    background: var(--crt-phosphor);
+    border: 0;
+    border-radius: 0;
+    box-shadow: 0 0 7px rgba(12, 204, 104, 0.44);
+}
+
+#farming-crt .crt-range::-moz-range-thumb {
+    width: 12px;
+    height: 22px;
+    background: var(--crt-phosphor);
+    border: 0;
+    border-radius: 0;
+    box-shadow: 0 0 7px rgba(12, 204, 104, 0.44);
+}
+
+#farming-crt .crt-range-label {
+    color: var(--crt-phosphor-bright);
+}
+
+#farming-crt .crt-range-label output,
+#farming-crt .crt-range-limits {
+    color: var(--crt-phosphor-muted);
+}
+
+#farming-crt .theme-item {
+    border-color: var(--crt-border) !important;
+    background: var(--crt-panel) !important;
+}
+
+#farming-crt .theme-item > div:not(:last-child) {
+    color: var(--crt-phosphor-bright) !important;
+}
+
+#farming-crt #session-modal {
+    padding: 7px;
+    background: var(--crt-background);
+    align-items: stretch;
+    justify-content: stretch;
+}
+
+#farming-crt #session-modal .modal-content {
+    width: 100%;
+    max-width: none;
+    height: 100%;
+    max-height: none;
+    background: var(--crt-background);
+    border: 1px solid rgba(12, 204, 104, 0.3);
+    box-shadow: none;
+}
+
+#farming-crt #session-modal .terminal {
+    background: var(--crt-background);
+}
+
+#farming-crt .terminal canvas {
+    filter: drop-shadow(0 0 3px rgba(12, 204, 104, 0.3));
+}
+
+#farming-crt .xterm,
+#farming-crt .xterm * {
+    text-shadow: none;
+}
+
+@media (max-width: 980px) {
+    #farming-crt #session-modal {
+        padding: 4px;
+    }
+
+    #farming-crt .crt-keyboard-guide {
+        display: none;
+    }
+
+    #farming-crt .agent-output {
+        font-size: 11px;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    #farming-crt .crt-brand-lockup,
+    #farming-crt .crt-brand-lockup::after,
+    #farming-crt .crt-brand-pane.is-signaling {
+        animation: none;
+    }
+}