thinkingEverytime/QuantOracle
1
1@import "maplibre-gl/dist/maplibre-gl.css";2 3@tailwind base;4@tailwind components;5@tailwind utilities;6 7:root {8 --bg: #0a0a0a;9 --panel: #141414;10 --panel-2: #101010;11 --border: #2a2a2a;12 --text: #e8e8e8;13 --muted: #9c9c9c;14 --accent: #4ade80;15 --accent-2: #22d3ee;16 --ok: #22c55e;17 --warn: #f59e0b;18 --down: #ef4444;19}20 21* {22 box-sizing: border-box;23}24 25html,26body {27 margin: 0;28 padding: 0;29 min-height: 100%;30 background: var(--bg);31 color: var(--text);32}33 34body {35 font-family: var(--font-mono), "SF Mono", "Monaco", "Cascadia Code", "Fira Code", "DejaVu Sans Mono", "Liberation Mono", monospace;36 letter-spacing: 0;37}38 39a {40 color: inherit;41 text-decoration: none;42}43 44.panel {45 background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);46 border: 1px solid var(--border);47 border-radius: 0;48}49 50.wm-shell {51 min-height: 100vh;52 display: flex;53 flex-direction: column;54 background:55 radial-gradient(1100px 500px at 90% -25%, rgba(34, 211, 238, 0.12), transparent 60%),56 radial-gradient(900px 440px at 15% -35%, rgba(74, 222, 128, 0.1), transparent 60%),57 var(--bg);58}59 60.wm-header-strip {61 height: 42px;62 border-bottom: 1px solid var(--border);63 display: flex;64 justify-content: space-between;65 align-items: center;66 padding: 0 10px;67 background: #111;68 gap: 8px;69}70 71.wm-header-left,72.wm-header-right {73 display: flex;74 align-items: center;75 gap: 6px;76 min-width: 0;77}78 79.wm-brand {80 font-weight: 700;81 font-size: 12px;82 color: var(--accent);83 letter-spacing: 0.08em;84}85 86.wm-sep {87 color: #4a4a4a;88}89 90.wm-mono {91 color: var(--muted);92 font-size: 11px;93 white-space: nowrap;94}95 96.wm-plan-pill {97 border: 1px solid;98 border-radius: 999px;99 padding: 2px 8px;100 font-size: 10px;101 font-weight: 700;102}103 104.wm-indicator {105 border-radius: 2px;106 padding: 2px 6px;107 border: 1px solid;108 font-size: 10px;109}110 111.wm-indicator.ok,112.ok {113 color: var(--ok);114}115 116.wm-indicator.warn,117.warn {118 color: var(--warn);119}120 121.down {122 color: var(--down);123}124 125.up {126 color: var(--ok);127}128 129.wm-header-btn {130 background: #191919;131 border: 1px solid #2f2f2f;132 color: #d5d5d5;133 padding: 4px 8px;134 font-size: 10px;135 cursor: pointer;136}137 138.wm-header-btn.strong {139 border-color: #2f6d4f;140 color: #b6f7cf;141}142 143.wm-header-btn:hover {144 background: #232323;145}146 147.wm-header-btn.disabled {148 opacity: 0.65;149}150 151.wm-ticker {152 height: 28px;153 border-bottom: 1px solid var(--border);154 background: #0f0f0f;155 overflow: hidden;156 display: flex;157 align-items: center;158}159 160.wm-ticker-track {161 display: inline-flex;162 white-space: nowrap;163 min-width: 200%;164 animation: wm-ticker-scroll 28s linear infinite;165 color: #cfcfcf;166 font-size: 11px;167}168 169.wm-ticker-track span {170 padding-right: 48px;171}172 173@keyframes wm-ticker-scroll {174 0% {175 transform: translateX(0);176 }177 100% {178 transform: translateX(-50%);179 }180}181 182.wm-body {183 flex: 1;184 display: grid;185 grid-template-columns: var(--wm-left-width, 260px) 1fr var(--wm-right-width, 310px);186 min-height: 0;187 transition: grid-template-columns 180ms ease;188}189 190.wm-drawer {191 border-right: 1px solid var(--border);192 min-width: 0;193 background: #101010;194 display: flex;195 flex-direction: column;196 position: relative;197}198 199.wm-drawer.right {200 border-right: none;201 border-left: 1px solid var(--border);202}203 204.wm-drawer.closed {205 width: 0;206 min-width: 0;207 overflow: hidden;208 border: none;209}210 211.wm-resizer {212 position: absolute;213 top: 0;214 bottom: 0;215 width: 8px;216 cursor: col-resize;217 z-index: 6;218}219 220.wm-resizer.left {221 right: -4px;222}223 224.wm-resizer.right {225 left: -4px;226}227 228.wm-resizer::after {229 content: "";230 position: absolute;231 top: 0;232 bottom: 0;233 left: 3px;234 width: 1px;235 background: rgba(255, 255, 255, 0.08);236}237 238.wm-resizer:hover::after {239 background: rgba(74, 222, 128, 0.65);240}241 242.wm-drawer-header {243 height: 34px;244 display: flex;245 align-items: center;246 padding: 0 10px;247 border-bottom: 1px solid var(--border);248 font-size: 11px;249 color: #c6c6c6;250 text-transform: uppercase;251}252 253.wm-drawer-body {254 padding: 8px;255 overflow: auto;256 display: flex;257 flex-direction: column;258 gap: 10px;259}260 261.wm-center {262 min-width: 0;263 padding: 8px;264 display: flex;265 flex-direction: column;266 gap: 8px;267}268 269.wm-map-stage {270 min-height: 40vh;271 display: flex;272 flex-direction: column;273}274 275.wm-map-header {276 height: 34px;277 border-bottom: 1px solid var(--border);278 display: flex;279 align-items: center;280 justify-content: space-between;281 padding: 0 10px;282 font-size: 11px;283 color: #cacaca;284}285 286.wm-map-sub {287 color: #9ea19f;288}289 290.wm-map-canvas {291 position: relative;292 flex: 1;293 min-height: 280px;294 background: #090909;295 overflow: hidden;296}297 298.wm-map-view,299.wm-map-vignette {300 position: absolute;301 inset: 0;302}303 304.wm-map-vignette {305 pointer-events: none;306 background:307 radial-gradient(120% 95% at 50% 50%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%),308 linear-gradient(180deg, rgba(9, 9, 9, 0.04), rgba(9, 9, 9, 0.36));309}310 311.wm-map-canvas .maplibregl-ctrl-top-right {312 top: 8px;313 right: 8px;314}315 316.wm-map-canvas .maplibregl-ctrl-group {317 background: rgba(14, 14, 14, 0.88);318 border: 1px solid var(--border);319 border-radius: 0;320}321 322.wm-map-canvas .maplibregl-ctrl button {323 width: 28px;324 height: 28px;325}326 327.wm-map-canvas .maplibregl-ctrl button span {328 filter: invert(92%);329}330 331.wm-map-legend {332 position: absolute;333 right: 10px;334 bottom: 12px;335 display: flex;336 gap: 8px;337 align-items: center;338 font-size: 10px;339 color: #cdcdcd;340 background: rgba(12, 12, 12, 0.82);341 border: 1px solid var(--border);342 padding: 5px 8px;343}344 345.wm-map-legend .dot {346 width: 8px;347 height: 8px;348 border-radius: 999px;349 display: inline-block;350 margin-left: 4px;351}352 353.wm-map-legend .dot.up {354 background: var(--ok);355}356 357.wm-map-legend .dot.down {358 background: var(--down);359}360 361.wm-map-legend .dot.warn {362 background: var(--warn);363}364 365.wm-map-legend .dot.active {366 background: #ffffff;367}368 369.wm-map-overlay {370 position: absolute;371 left: 12px;372 bottom: 12px;373 border: 1px solid var(--border);374 background: rgba(14, 14, 14, 0.9);375 padding: 8px;376 min-width: 240px;377 font-size: 11px;378}379 380.wm-map-focus {381 color: var(--accent);382 font-weight: 700;383 margin-bottom: 4px;384}385 386.wm-map-line {387 color: #d6d6d6;388}389 390.wm-grid {391 min-height: 0;392 display: grid;393 grid-template-columns: 2fr 2fr 1fr 1fr;394 gap: 8px;395}396 397.wm-layout-atlas .wm-grid {398 grid-template-columns: 2fr 2fr 1fr 1fr;399}400 401.wm-layout-focus .wm-grid {402 grid-template-columns: 2.2fr 1.2fr 1.2fr;403}404 405.wm-layout-focus .wm-grid .wm-panel:nth-child(1) {406 grid-column: span 2;407 min-height: 340px;408}409 410.wm-layout-focus .wm-grid .wm-panel:nth-child(2) {411 grid-column: 3;412 grid-row: 1 / span 2;413}414 415.wm-layout-stack .wm-grid {416 grid-template-columns: 1fr;417}418 419.wm-layout-stack .wm-grid .wm-panel {420 min-height: 210px;421}422 423.wm-panel {424 min-height: 280px;425 display: flex;426 flex-direction: column;427 overflow: hidden;428 cursor: default;429 transition: box-shadow 120ms ease, transform 120ms ease, opacity 120ms ease;430}431 432.active-pane {433 box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.5);434}435 436.wm-panel.dragging {437 opacity: 0.55;438 transform: scale(0.995);439}440 441.wm-panel.drop-target {442 box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.5);443}444 445.wm-panel-head {446 height: 34px;447 border-bottom: 1px solid var(--border);448 display: flex;449 align-items: center;450 justify-content: space-between;451 padding: 0 10px;452 font-size: 11px;453 color: #d4d4d4;454 text-transform: uppercase;455}456 457.wm-drag-chip {458 font-size: 9px;459 color: #8f8f8f;460 border: 1px solid rgba(255, 255, 255, 0.18);461 padding: 1px 5px;462 cursor: grab;463}464 465.wm-panel:active .wm-drag-chip {466 cursor: grabbing;467}468 469.wm-table-wrap {470 overflow: auto;471 padding: 6px;472}473 474.wm-table {475 width: 100%;476 border-collapse: collapse;477 font-size: 11px;478}479 480.wm-table th,481.wm-table td {482 text-align: left;483 padding: 7px 6px;484 border-bottom: 1px solid rgba(255, 255, 255, 0.06);485 white-space: nowrap;486}487 488.wm-table th {489 color: #9fa09f;490 font-weight: 600;491}492 493.wm-news-list {494 padding: 8px;495 overflow: auto;496 display: flex;497 flex-direction: column;498 gap: 6px;499}500 501.wm-news-item {502 border: 1px solid rgba(255, 255, 255, 0.08);503 padding: 8px;504 font-size: 11px;505 background: rgba(255, 255, 255, 0.015);506}507 508.wm-news-item:hover {509 background: rgba(255, 255, 255, 0.04);510}511 512.wm-news-title {513 color: #ececec;514 margin-bottom: 4px;515}516 517.wm-news-meta {518 color: #939393;519}520 521.wm-news-flags {522 margin-top: 6px;523 display: flex;524 gap: 5px;525 flex-wrap: wrap;526}527 528.wm-news-flag {529 font-size: 10px;530 line-height: 1;531 border: 1px solid rgba(255, 255, 255, 0.18);532 color: #bfbfbf;533 padding: 3px 5px;534 border-radius: 3px;535 text-transform: uppercase;536 letter-spacing: 0.04em;537}538 539.wm-news-flag-tier-official {540 border-color: rgba(113, 190, 255, 0.45);541 color: #8fd0ff;542}543 544.wm-news-flag-tier-wire {545 border-color: rgba(170, 187, 255, 0.45);546 color: #a8bbff;547}548 549.wm-news-flag-tier-media,550.wm-news-flag-tier-unknown {551 border-color: rgba(255, 255, 255, 0.2);552 color: #bfbfbf;553}554 555.wm-news-flag-risk-high {556 border-color: rgba(255, 112, 112, 0.55);557 color: #ff8d8d;558}559 560.wm-news-flag-risk-medium {561 border-color: rgba(255, 196, 112, 0.55);562 color: #ffc87a;563}564 565.wm-news-flag-risk-low {566 border-color: rgba(124, 213, 162, 0.55);567 color: #90dcae;568}569 570.wm-news-flag-oil {571 border-color: rgba(240, 214, 120, 0.5);572 color: #f0d678;573}574 575.wm-news-impact {576 margin-top: 6px;577 color: #b5b5b5;578 font-size: 10px;579 line-height: 1.35;580}581 582.wm-kpi-grid {583 padding: 8px;584 display: grid;585 grid-template-columns: 1fr 1fr;586 gap: 6px;587}588 589.wm-kpi {590 border: 1px solid rgba(255, 255, 255, 0.08);591 padding: 8px;592 display: flex;593 flex-direction: column;594 gap: 2px;595 min-height: 64px;596}597 598.wm-kpi span {599 font-size: 10px;600 color: #8f8f8f;601}602 603.wm-kpi strong {604 font-size: 14px;605 color: #e9e9e9;606}607 608.wm-list {609 display: flex;610 flex-direction: column;611 gap: 3px;612}613 614.wm-list-item {615 border: 1px solid rgba(255, 255, 255, 0.08);616 background: #171717;617 color: #dfdfdf;618 font-size: 11px;619 display: flex;620 justify-content: space-between;621 padding: 6px 8px;622 cursor: pointer;623}624 625.wm-list-item.active {626 border-color: rgba(74, 222, 128, 0.55);627 background: rgba(74, 222, 128, 0.12);628}629 630.wm-mini-section {631 border: 1px solid rgba(255, 255, 255, 0.08);632 padding: 7px;633}634 635.wm-mini-title {636 font-size: 10px;637 color: #9ea09f;638 text-transform: uppercase;639 margin-bottom: 6px;640}641 642.wm-mini-row {643 font-size: 11px;644 display: flex;645 justify-content: space-between;646 gap: 8px;647 color: #d9d9d9;648 padding: 2px 0;649}650 651.wm-meter-row {652 margin-bottom: 6px;653}654 655.wm-meter {656 height: 5px;657 background: #262626;658}659 660.wm-meter-fill {661 height: 5px;662 background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);663}664 665.wm-command-overlay {666 position: fixed;667 inset: 0;668 background: rgba(0, 0, 0, 0.62);669 display: flex;670 align-items: flex-start;671 justify-content: center;672 padding-top: 12vh;673 z-index: 90;674}675 676.wm-command-card {677 width: min(760px, 92vw);678 border: 1px solid #3a3a3a;679 background: #0f0f0f;680}681 682.wm-command-input {683 width: 100%;684 height: 44px;685 border: none;686 border-bottom: 1px solid #2f2f2f;687 background: #131313;688 color: #eaeaea;689 padding: 0 12px;690 font-size: 12px;691 outline: none;692}693 694.wm-command-list {695 max-height: 360px;696 overflow: auto;697}698 699.wm-command-item {700 width: 100%;701 border: none;702 background: transparent;703 color: #d9d9d9;704 display: flex;705 justify-content: space-between;706 align-items: center;707 padding: 10px 12px;708 text-align: left;709 cursor: pointer;710 border-bottom: 1px solid rgba(255, 255, 255, 0.05);711}712 713.wm-command-item.active,714.wm-command-item:hover {715 background: rgba(74, 222, 128, 0.13);716}717 718.wm-command-hint {719 color: #98cca8;720 font-size: 10px;721}722 723.wm-command-empty {724 padding: 16px;725 color: #989898;726 font-size: 11px;727}728 729.wm-modal-overlay {730 position: fixed;731 inset: 0;732 background: rgba(0, 0, 0, 0.62);733 display: flex;734 align-items: center;735 justify-content: center;736 z-index: 80;737 padding: 16px;738}739 740.wm-modal {741 width: min(860px, 96vw);742}743 744.wm-modal-head {745 height: 44px;746 border-bottom: 1px solid var(--border);747 display: flex;748 align-items: center;749 justify-content: space-between;750 padding: 0 12px;751 font-size: 12px;752}753 754.wm-modal-grid {755 padding: 12px;756 display: grid;757 grid-template-columns: repeat(3, minmax(0, 1fr));758 gap: 8px;759}760 761.wm-plan-card {762 border: 1px solid rgba(255, 255, 255, 0.12);763 background: #171717;764 color: #e3e3e3;765 padding: 10px;766 text-align: left;767 cursor: pointer;768}769 770.wm-plan-card.active {771 border-color: rgba(74, 222, 128, 0.55);772 background: rgba(74, 222, 128, 0.12);773}774 775.wm-plan-title {776 font-size: 11px;777 font-weight: 700;778 margin-bottom: 4px;779}780 781.wm-plan-note {782 font-size: 11px;783 color: #ababab;784}785 786.wm-density-comfortable .wm-panel,787.wm-density-comfortable .wm-map-stage {788 min-height: 320px;789}790 791.wm-density-comfortable .wm-table th,792.wm-density-comfortable .wm-table td,793.wm-density-comfortable .wm-mini-row,794.wm-density-comfortable .wm-list-item,795.wm-density-comfortable .wm-news-item {796 font-size: 12px;797}798 799.wm-density-comfortable .wm-panel-head,800.wm-density-comfortable .wm-map-header,801.wm-density-comfortable .wm-drawer-header {802 height: 38px;803}804 805@media (max-width: 1400px) {806 .wm-grid {807 grid-template-columns: 1.6fr 1.6fr 1fr;808 }809 810 .wm-grid .wm-panel:nth-child(4) {811 grid-column: span 3;812 min-height: 170px;813 }814}815 816@media (max-width: 1180px) {817 .wm-body {818 grid-template-columns: 1fr;819 position: relative;820 }821 822 .wm-drawer {823 position: fixed;824 top: 70px;825 bottom: 0;826 width: min(320px, 85vw) !important;827 z-index: 70;828 background: #111;829 box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 20px 50px rgba(0, 0, 0, 0.5);830 }831 832 .wm-resizer {833 display: none;834 }835 836 .wm-drawer.left {837 left: 0;838 }839 840 .wm-drawer.right {841 right: 0;842 }843 844 .wm-drawer.closed {845 transform: translateX(-110%);846 width: min(320px, 85vw);847 border-right: 1px solid var(--border);848 }849 850 .wm-drawer.right.closed {851 transform: translateX(110%);852 border-left: 1px solid var(--border);853 border-right: none;854 }855 856 .wm-center {857 padding: 6px;858 }859 860 .wm-grid {861 grid-template-columns: 1fr;862 }863 864 .wm-panel {865 min-height: 220px;866 }867}868 869@media (max-width: 900px) {870 .wm-header-right .wm-mono,871 .wm-header-left .wm-sep,872 .wm-header-left .wm-mono {873 display: none;874 }875 876 .wm-header-strip {877 height: 46px;878 }879 880 .wm-map-canvas {881 min-height: 220px;882 }883}884