playermap_graph
Version:
A React library for intuition visualization using force-directed graphs
2 lines (1 loc) • 3.83 kB
CSS
.App{text-align:center;height:100vh;display:flex;flex-direction:column;background-color:#1a1a1a}.App-header{padding:1rem;color:#fff;z-index:1;position:fixed;width:100%}.App-header h1{margin:0;font-size:1.5rem;font-weight:500}.App-main{flex:1;position:relative;overflow:hidden}.App-main>div{position:absolute;top:0;left:0;right:0;bottom:0}.graph-visualization-container{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden}canvas{border-radius:4px}.force-graph-container{width:100%;height:100%;background-color:#1a1a1a}.navigation-button{padding:"5px";border-radius:4px;border:"none";cursor:"pointer";font-size:"14px";height:30px;border:none}.agent-btn{background:#ffd32a;color:#18181b;font-weight:700;text-transform:uppercase;border:none;border-radius:8px;padding:8px 18px;font-size:14px;box-shadow:0 2px 8px #0000001a;cursor:pointer;transition:background .2s,color .2s,transform .1s;margin-bottom:8px;width:150px;display:block}.agent-btn:disabled{opacity:.5;cursor:not-allowed}.agent-btn:hover:not(:disabled){background:#ffe066;color:#18181b;transform:translateY(-2px) scale(1.03)}.agent-navbar{background:#18181b;border-radius:10px;box-shadow:0 2px 8px #0000001a;padding:10px 18px;display:flex;align-items:center;gap:12px;color:#ffd32a}.agent-navbar label{color:#ffd32a;font-weight:700;margin-right:6px}.agent-navbar select,.agent-navbar input[type=text]{background:#232326;color:#fff;border:1px solid #ffd32a;border-radius:6px;padding:6px 10px;font-size:15px;margin-right:8px;transition:border .2s,box-shadow .2s}.agent-navbar select:focus,.agent-navbar input[type=text]:focus{outline:none;border-color:#ffd32a;box-shadow:0 0 0 2px #ffd32a33}.agent-navbar button{background:#ffd32a;color:#18181b;font-weight:700;border:none;border-radius:6px;padding:6px 16px;font-size:14px;cursor:pointer;transition:background .2s,color .2s,transform .1s}.agent-navbar button:hover{background:#ffe066;color:#18181b;transform:translateY(-2px) scale(1.03)}.agent-legend{background:#18181b;border:2px solid #ffd32a;border-radius:10px;box-shadow:0 2px 8px #0000001a;color:#ffd32a;padding:14px 20px 10px;font-size:14px;min-width:160px}.agent-legend h4{margin:0 0 10px;font-size:16px;color:#ffd32a;font-weight:700}.agent-legend ul{list-style:none;padding:0;margin:0}.agent-legend li{display:flex;align-items:center;margin-bottom:5px;color:#fff}.agent-legend span{width:15px;height:15px;border-radius:50%;display:inline-block;margin-right:10px;border:1.5px solid #ffd32a}.drawer-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000059;opacity:0;pointer-events:none;transition:opacity .25s;z-index:1200}.drawer-backdrop.open{opacity:1;pointer-events:auto}.drawer-panel{position:absolute;left:0;right:0;bottom:0;background:#18181b;border-top-left-radius:18px;border-top-right-radius:18px;box-shadow:0 -2px 16px #0000002e;transform:translateY(100%);transition:transform .35s cubic-bezier(.4,1.3,.5,1);z-index:1300;max-width:600px;margin:0 auto;width:100%;border:2px solid #ffd32a;color:#ffd32a;display:flex;flex-direction:column;overflow:hidden}.drawer-panel.open{transform:translateY(0)}.drawer-close-btn{background:none;border:none;color:#ffd32a;font-size:2rem;position:absolute;top:10px;right:18px;cursor:pointer;z-index:2;transition:color .2s}.drawer-close-btn:hover{color:#ffe066}.drawer-content{padding:48px 24px 24px;overflow-y:auto;flex:1}.sidebar-drawer-panel{position:absolute;top:0;left:0;bottom:0;background:#18181b;border-top-right-radius:18px;border-bottom-right-radius:18px;box-shadow:2px 0 16px #0000002e;transform:translate(-100%);transition:transform .35s cubic-bezier(.4,1.3,.5,1);z-index:1300;max-width:90vw;width:350px;border:2px solid #ffd32a;color:#ffd32a;display:flex;flex-direction:column;overflow:hidden}.sidebar-drawer-panel.open{transform:translate(0)}