css/neuroshield.css - master - CEPBEP/OPS

css/neuroshield.css
149 строк4 KB
George Kwa
Add files via upload
29 май 2025, 17:57
29 май 2025, 17:5762e839a
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');
    :root {
      --bg: #151b23;
      --fg: #fff;
      --card-bg: #1f2937;
      --accent: #11171f;    /*#3498db;*/
      --accent2: #2ecc71;
      --accent3: #f1c40f;
      --accent4: #9b59b6;
      --accent5: #e74c3c;
      --modal-bg: rgba(0,0,0,0.8);
      --scrollbar-bg: rgba(255,255,255,0.1);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0; padding: 0;
      display: flex; height: 100vh;
      font-family: 'Roboto Mono', monospace;
      color: var(--fg);
      background: var(--bg);
      overflow: hidden;
    }

    ::-webkit-scrollbar{width:0;}

    img.chi {width: 40%;border-radius: 10px;}
    #neuroProg{width: 88%;border-radius: 10px;}

    /* Header */
    header {
      position: fixed; top: 0; left: 0; right: 0;
      height: 50px; background: var(--card-bg);
      display: flex; align-items: center; padding: 0 20px;
      z-index: 10;
    }
    header nav { flex: 1; }
    header nav a {
      color: var(--fg); margin-right: 16px; text-decoration: none;
      font-weight: bold;
    }
    header button {
      background: var(--accent); border: none; color: #fff;
      margin-left: 12px; padding: 6px 12px; cursor: pointer;
      border-radius: 4px;
    }
    /* Sidebar cards */
    #cards {
      margin-top: 50px; /* header height */
      width: 35%; padding: 20px;
      overflow-y: auto; display: grid;
      grid-template-columns: 1fr 1fr; gap: 12px;
    }
    .card {
      background: var(--card-bg); border-left: 4px solid var(--accent);
      border-radius: 6px; padding: 12px; cursor: pointer;
      transition: transform .2s, border-color .2s;
      display: flex; align-items: center;
    }
    .card:nth-child(3n+2) { border-color: var(--accent2); }
    .card:nth-child(3n+3) { border-color: var(--accent3); }
    .card:hover {
      transform: translateY(-3px); border-color: var(--accent4);
    }
    .card .icon {
      font-size: 1.5rem; margin-right: 8px;
    }
    .card h3 {
      margin: 0; font-size: 1rem;
    }
    /* Chart container */
    #chartContainer {
      margin-top: 50px; /* header height */
      flex: 1; padding: 20px;
      background: #1a222d;
      display: block;
    }
    #defaultChart {
      width: 100%; height: 300px;
      background: #11171f;
      border-radius: 8px;
    }
    /* Detail panel */
    #detail {
      margin-top: 50px; /* header */
      flex: 1; padding: 20px;
      overflow-y: auto; position: relative;
      background: #1a222d;
      display: none;
    }
    #detail h2 {
      margin-top: 0; font-size: 1.5rem;
      border-bottom: 2px solid var(--accent5);
      padding-bottom: 8px;
    }
    #detail .close {
      position: absolute; top: 20px; right: 20px;
      background: var(--accent5); border: none; color: #fff;
      padding: 4px 8px; cursor: pointer; border-radius: 4px;
    }
    /* Tab headers */
    .tabs {
      display: flex; border-bottom: 1px solid var(--scrollbar-bg);
      margin-bottom: 12px;
    }
    .tabs button {
      background: none; border: none; color: var(--fg);
      padding: 8px 16px; cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: border-color .2s;
    }
    .tabs button.active {
      border-color: #fff;
    }
    .tab-content {
      display: none;
    }
    .tab-content.active {
      display: block;
    }
    /* Modals */
    .modal {
      display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: var(--modal-bg); align-items: center; justify-content: center;
      z-index: 20;
    }
    .modal .modal-content {
      background: var(--card-bg); padding: 20px;
      border-radius: 6px; width: 80%; max-width: 800px;
      position: relative;
      color: #ddd;
    }
    .modal .modal-content h3 {
      margin-top: 0; color: var(--accent);
    }
    .modal .close-modal {
      position: absolute; top: 10px; right: 10px;
      background: var(--accent5); border: none; color: #fff;
      padding: 4px 8px; cursor: pointer; border-radius: 4px;
    }
    .modal-content table {
      width: 100%; border-collapse: collapse; margin-top: 12px;
    }
    .modal-content th, .modal-content td {
      border: 1px solid var(--scrollbar-bg); padding: 6px;
      text-align: center;
    }
    .modal-content th {
      background: var(--card-bg);
    }