ai-control-center 1.15.2

package/lib/web/public/office/css/office.css

@@ -0,0 +1,678 @@
+/* ── AI Office Visualizer — Retro RPG Pixel Art Theme ────────────────────── */
+
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+:root {
+  --bg: #0a0a1a;
+  --bg2: #12122a;
+  --bg3: #1a1a3a;
+  --text: #e0e0e0;
+  --text-dim: #8888aa;
+  --text-bright: #ffffff;
+  --accent: #40d8c0;
+  --accent2: #ff6080;
+  --accent3: #f8d030;
+  --panel: #181838;
+  --panel-border: #3a3a6a;
+  --border: #2a2a5a;
+  --rpg-gold: #e8c020;
+  --rpg-blue: #4080d0;
+  --rpg-red: #d04040;
+  --rpg-green: #40b060;
+  --font-pixel: 'Press Start 2P', monospace;
+  --font-ui: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
+}
+
+body {
+  font-family: var(--font-ui);
+  background: var(--bg);
+  color: var(--text);
+  height: 100vh;
+  overflow: hidden;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+/* ── Top Bar (RPG-styled) ────────────────────────────────────────────────── */
+
+#topbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  background: var(--bg2);
+  border-bottom: 3px solid var(--panel-border);
+  z-index: 10;
+  /* RPG border effect */
+  box-shadow:
+    inset 0 -1px 0 #4a4a8a,
+    0 2px 8px rgba(0,0,0,0.5);
+}
+
+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.topbar-left .logo {
+  font-size: 20px;
+  filter: drop-shadow(0 0 4px rgba(64, 216, 192, 0.5));
+}
+
+.topbar-left h1 {
+  font-family: var(--font-pixel);
+  font-size: 10px;
+  font-weight: 400;
+  letter-spacing: 1px;
+  color: var(--accent);
+  text-shadow: 0 0 8px rgba(64, 216, 192, 0.3);
+}
+
+.topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  font-size: 11px;
+  color: var(--text-dim);
+  font-family: var(--font-pixel);
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  display: inline-block;
+  /* Pixel style - square instead of circle */
+  border-radius: 0;
+  image-rendering: pixelated;
+}
+
+.status-dot.online {
+  background: var(--rpg-green);
+  box-shadow: 0 0 6px var(--rpg-green), 0 0 12px rgba(64, 176, 96, 0.3);
+  animation: pulse-green 2s infinite;
+}
+
+.status-dot.offline {
+  background: var(--rpg-red);
+  box-shadow: 0 0 6px var(--rpg-red);
+}
+
+@keyframes pulse-green {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+/* ── RPG Buttons ─────────────────────────────────────────────────────────── */
+
+.btn {
+  padding: 6px 14px;
+  border: 2px solid var(--panel-border);
+  background: var(--panel);
+  color: var(--text);
+  cursor: pointer;
+  font-family: var(--font-pixel);
+  font-size: 8px;
+  letter-spacing: 0.5px;
+  /* RPG box style */
+  box-shadow:
+    inset 1px 1px 0 #4a4a8a,
+    inset -1px -1px 0 #0a0a1a,
+    2px 2px 0 #000;
+  transition: all 0.1s;
+  image-rendering: pixelated;
+}
+
+.btn:hover {
+  background: var(--bg3);
+  transform: translate(1px, 1px);
+  box-shadow:
+    inset 1px 1px 0 #4a4a8a,
+    inset -1px -1px 0 #0a0a1a,
+    1px 1px 0 #000;
+}
+
+.btn:active {
+  transform: translate(2px, 2px);
+  box-shadow: inset 1px 1px 0 #0a0a1a;
+}
+
+.btn-primary {
+  background: #1a3a5a;
+  border-color: var(--accent);
+  color: var(--accent);
+  box-shadow:
+    inset 1px 1px 0 #4ac0b0,
+    inset -1px -1px 0 #0a2a3a,
+    2px 2px 0 #000;
+}
+
+.btn-primary:hover {
+  background: #1a4a6a;
+  color: var(--text-bright);
+}
+
+.btn-sm { padding: 4px 10px; font-size: 7px; }
+
+/* RPG action button colors */
+.btn-report-bug {
+  border-color: var(--rpg-red);
+  color: var(--rpg-red);
+}
+
+.btn-new-feature {
+  border-color: var(--rpg-green);
+  color: var(--rpg-green);
+}
+
+.btn-check-status {
+  border-color: var(--rpg-blue);
+  color: var(--rpg-blue);
+}
+
+/* ── Canvas Container ────────────────────────────────────────────────────── */
+
+#canvas-container {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  background: #08081a;
+  /* Scanline effect */
+  background-image: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.03) 2px,
+    rgba(0, 0, 0, 0.03) 4px
+  );
+}
+
+#office-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+  cursor: crosshair;
+}
+
+/* ── Character Popup (RPG Dialog Box) ────────────────────────────────────── */
+
+.popup {
+  position: absolute;
+  background: var(--panel);
+  min-width: 260px;
+  z-index: 20;
+  font-size: 11px;
+  image-rendering: pixelated;
+  /* RPG dialog box border */
+  border: 3px solid var(--panel-border);
+  box-shadow:
+    inset 2px 2px 0 #3a3a7a,
+    inset -2px -2px 0 #0a0a1a,
+    4px 4px 0 rgba(0,0,0,0.5);
+  /* Pixel corners */
+  border-radius: 0;
+}
+
+.popup.hidden { display: none; }
+
+.popup-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px 8px;
+  border-bottom: 2px solid var(--border);
+  font-family: var(--font-pixel);
+  font-size: 8px;
+  color: var(--accent3);
+}
+
+.popup-close {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-family: var(--font-pixel);
+  font-size: 8px;
+  padding: 2px 6px;
+}
+
+.popup-close:hover { color: var(--accent2); }
+
+.popup-body {
+  padding: 8px 12px;
+}
+
+.popup-row {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 4px;
+  font-family: var(--font-pixel);
+  font-size: 7px;
+  line-height: 1.8;
+}
+
+.popup-row .label {
+  color: var(--text-dim);
+  min-width: 55px;
+}
+
+.popup-row .value {
+  color: var(--text-bright);
+}
+
+/* Features / package info panel */
+.fp-row {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 3px;
+  font-family: var(--font-pixel);
+  font-size: 7px;
+  line-height: 1.8;
+  flex-wrap: wrap;
+}
+
+.fp-row .label {
+  color: var(--text-dim);
+  min-width: 60px;
+}
+
+.fp-current {
+  background: rgba(64, 180, 90, 0.12);
+  border-left: 2px solid #40b45a;
+  padding-left: 4px;
+  margin-bottom: 6px;
+}
+
+.popup-actions {
+  display: flex;
+  gap: 6px;
+  padding: 8px 12px 10px;
+  border-top: 2px solid var(--border);
+}
+
+/* PM interaction menu */
+.pm-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 12px 10px;
+  border-top: 2px solid var(--border);
+}
+
+.pm-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: var(--bg2);
+  border: 2px solid var(--border);
+  color: var(--text);
+  cursor: pointer;
+  font-family: var(--font-pixel);
+  font-size: 7px;
+  transition: all 0.1s;
+}
+
+.pm-menu-item:hover {
+  background: var(--bg3);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.pm-menu-item .arrow {
+  margin-left: auto;
+  color: var(--text-dim);
+}
+
+/* ── Submit Modal (RPG Menu) ─────────────────────────────────────────────── */
+
+.modal {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
+}
+
+.modal.hidden { display: none; }
+
+.modal-content {
+  background: var(--panel);
+  width: 420px;
+  max-width: 90vw;
+  /* RPG dialog box */
+  border: 3px solid var(--panel-border);
+  border-radius: 0;
+  box-shadow:
+    inset 2px 2px 0 #3a3a7a,
+    inset -2px -2px 0 #0a0a1a,
+    6px 6px 0 rgba(0,0,0,0.6);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 18px 10px;
+  border-bottom: 2px solid var(--border);
+}
+
+.modal-header h2 {
+  font-family: var(--font-pixel);
+  font-size: 9px;
+  font-weight: 400;
+  color: var(--accent3);
+}
+
+.modal-body {
+  padding: 14px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.modal-body label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-family: var(--font-pixel);
+  font-size: 7px;
+  color: var(--text-dim);
+}
+
+.modal-body select,
+.modal-body textarea {
+  padding: 8px 10px;
+  background: var(--bg);
+  border: 2px solid var(--border);
+  border-radius: 0;
+  color: var(--text);
+  font-family: var(--font-ui);
+  font-size: 12px;
+  resize: vertical;
+  image-rendering: pixelated;
+}
+
+.modal-body select:focus,
+.modal-body textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 8px rgba(64, 216, 192, 0.2);
+}
+
+.modal-footer {
+  padding: 10px 18px 14px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* ── Activity Feed (RPG Log) ─────────────────────────────────────────────── */
+
+#activity-feed {
+  height: 130px;
+  background: var(--bg2);
+  border-top: 3px solid var(--panel-border);
+  overflow: hidden;
+  box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
+}
+
+.feed-header {
+  padding: 6px 16px;
+  font-family: var(--font-pixel);
+  font-size: 7px;
+  color: var(--accent3);
+  border-bottom: 2px solid var(--border);
+  letter-spacing: 1px;
+}
+
+#feed-entries {
+  padding: 4px 16px;
+  font-size: 11px;
+  font-family: var(--font-ui);
+  overflow-y: auto;
+  height: calc(100% - 28px);
+}
+
+/* Custom scrollbar */
+#feed-entries::-webkit-scrollbar {
+  width: 6px;
+}
+
+#feed-entries::-webkit-scrollbar-track {
+  background: var(--bg);
+}
+
+#feed-entries::-webkit-scrollbar-thumb {
+  background: var(--border);
+}
+
+.feed-entry {
+  padding: 2px 0;
+  color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 11px;
+}
+
+.feed-entry .time { color: #6a6a8a; }
+.feed-entry .project { color: var(--accent); font-weight: 600; }
+.feed-entry .msg { color: var(--text); }
+
+/* ── Animations ──────────────────────────────────────────────────────────── */
+
+@keyframes rpg-appear {
+  0% { transform: scale(0.8); opacity: 0; }
+  50% { transform: scale(1.02); }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+.popup:not(.hidden),
+.modal:not(.hidden) .modal-content {
+  animation: rpg-appear 0.15s ease-out;
+}
+
+/* Blinking cursor for text inputs */
+.modal-body textarea::placeholder {
+  color: var(--text-dim);
+  font-style: italic;
+}
+
+/* ── Pipeline action buttons ─────────────────────────────────────────────── */
+
+#popup-pipeline-menu {
+  flex-direction: column;
+  gap: 4px;
+  padding: 6px 12px 10px;
+}
+
+.pipeline-label {
+  font-family: var(--font-pixel);
+  font-size: 7px;
+  color: var(--accent2);
+  margin-bottom: 2px;
+}
+
+.pipeline-btns {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.btn-action {
+  font-size: 7px !important;
+  padding: 3px 7px !important;
+  flex: 0 0 auto;
+  transition: all 0.15s;
+}
+
+.btn-action:hover {
+  background: var(--accent);
+  color: var(--bg);
+  border-color: var(--accent);
+}
+
+.btn-action.btn-dim { opacity: 0.5; }
+.btn-action.btn-dim:hover { opacity: 1; }
+.btn-action.btn-danger { background: #8b2020; border-color: #c04040; color: #ffcccc; }
+.btn-action.btn-danger:hover { background: #a03030; border-color: #e05050; }
+
+.btn-action.pipeline-hidden { display: none; }
+
+/* ── Command Bar (Slash Commands) ────────────────────────────────────────── */
+
+.command-bar {
+  position: fixed;
+  bottom: 140px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 420px;
+  max-width: 90vw;
+  z-index: 200;
+  animation: rpg-appear 0.12s ease-out;
+}
+
+.command-bar input {
+  width: 100%;
+  padding: 10px 14px;
+  background: var(--panel);
+  border: 3px solid var(--accent);
+  border-radius: 0;
+  color: var(--text-bright);
+  font-family: var(--font-pixel);
+  font-size: 9px;
+  letter-spacing: 0.5px;
+  image-rendering: pixelated;
+  box-shadow:
+    inset 2px 2px 0 #3a3a7a,
+    inset -2px -2px 0 #0a0a1a,
+    0 0 16px rgba(64, 216, 192, 0.25),
+    4px 4px 0 rgba(0,0,0,0.5);
+}
+
+.command-bar input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow:
+    inset 2px 2px 0 #3a3a7a,
+    inset -2px -2px 0 #0a0a1a,
+    0 0 20px rgba(64, 216, 192, 0.35),
+    4px 4px 0 rgba(0,0,0,0.5);
+}
+
+.command-bar input::placeholder {
+  color: var(--text-dim);
+  font-family: var(--font-pixel);
+  font-size: 8px;
+}
+
+.command-dropdown {
+  display: none;
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  margin-bottom: 4px;
+  background: var(--panel);
+  border: 3px solid var(--panel-border);
+  border-radius: 0;
+  max-height: 300px;
+  overflow-y: auto;
+  box-shadow:
+    inset 2px 2px 0 #3a3a7a,
+    inset -2px -2px 0 #0a0a1a,
+    4px 4px 0 rgba(0,0,0,0.5);
+}
+
+.command-dropdown.visible {
+  display: block;
+  animation: rpg-appear 0.1s ease-out;
+}
+
+.command-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--border);
+  transition: all 0.08s;
+}
+
+.command-dropdown-item:last-child {
+  border-bottom: none;
+}
+
+.command-dropdown-item:hover,
+.command-dropdown-item.active {
+  background: var(--bg3);
+  border-left: 3px solid var(--accent);
+  padding-left: 9px;
+}
+
+.command-dropdown-item .cmd-icon {
+  font-size: 14px;
+  width: 22px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.command-dropdown-item .cmd-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.command-dropdown-item .cmd-name {
+  font-family: var(--font-pixel);
+  font-size: 8px;
+  color: var(--accent);
+}
+
+.command-dropdown-item .cmd-desc {
+  font-family: var(--font-ui);
+  font-size: 10px;
+  color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.command-dropdown-hint {
+  padding: 6px 12px;
+  font-family: var(--font-pixel);
+  font-size: 7px;
+  color: var(--text-dim);
+  border-top: 1px solid var(--border);
+  text-align: center;
+  letter-spacing: 0.5px;
+}
+
+/* Scrollbar for command dropdown */
+.command-dropdown::-webkit-scrollbar { width: 6px; }
+.command-dropdown::-webkit-scrollbar-track { background: var(--bg); }
+.command-dropdown::-webkit-scrollbar-thumb { background: var(--border); }
+
+/* ── Responsive ──────────────────────────────────────────────────────────── */
+
+@media (max-width: 768px) {
+  .topbar-left h1 { font-size: 8px; }
+  .topbar-right { gap: 8px; }
+  .topbar-right span:not(.status-dot) { display: none; }
+  .popup { min-width: 200px; }
+  .modal-content { width: 95vw; }
+  #activity-feed { height: 80px; }
+  .command-bar { width: 95vw; bottom: 90px; }
+}