/* ============================================================ TradeHub CZ — designový systém ------------------------------------------------------------ Tři barevné kanály, které se nikdy nepotkají na stejném prvku: PENÍZE gain / loss — jen částky, R-multiply, výnos STAV clear / caution / stop — jen verdikt Brány a kontroly UI accent — odkazy, focus, aktivní navigace Dřív zelená znamenala zisk, splněný check i aktivní stav zároveň. ============================================================ */ /* ─── SVĚTLÝ REŽIM (výchozí) ─────────────────────────────── */ :root { --bg:#F4F3F0; --surface:#FFFFFF; --surface-2:#EDEBE7; --surface-sunk:#E7E5E0; --line:#DAD7D1; --line-soft:#E6E3DE; --text:#1A1D21; --text-2:#5C5F66; --text-3:#8A8C92; --gain:#1F7A4D; --gain-bg:rgba(31,122,77,.10); --loss:#C0392B; --loss-bg:rgba(192,57,43,.09); --clear:#2F7A72; --clear-bg:rgba(47,122,114,.10); --caution:#A5741A; --caution-bg:rgba(165,116,26,.12); --stop:#A5342A; --stop-bg:rgba(165,52,42,.10); --accent:#9A6B1F; --accent-soft:rgba(154,107,31,.12); --accent-hover:#7E560F; /* Krivky prubehu uvnitr mesice. Odliseni merene, ne odhadnute: nejhorsi dvojice ma delta-E 64, pri deuteranopii 50. Zelena a cervena se nepouzivaji - znamenaji zisk a ztratu. */ --krivka-1:#1A1D21; --krivka-2:#9A6B1F; --krivka-3:#7B3FA0; --on-accent:#FFFFFF; --shadow-1:0 1px 2px rgba(20,22,26,.06); --shadow-2:0 4px 14px rgba(20,22,26,.10); --shadow-3:0 12px 32px rgba(20,22,26,.16); --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --r1:4px; --r2:7px; --r3:12px; --r-pill:999px; --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; --sidebar-w:244px; --topbar-h:52px; --z-overlay:890; --z-drawer:900; --z-topbar:800; color-scheme: light; } /* ─── TMAVÝ REŽIM ────────────────────────────────────────── */ :root[data-theme="dark"] { --bg:#14161A; --surface:#1B1E24; --surface-2:#232730; --surface-sunk:#101216; --line:#2B2F37; --line-soft:#23262D; --text:#E9E7E2; --text-2:#9B9891; --text-3:#6E6C67; --gain:#35B37E; --gain-bg:rgba(53,179,126,.12); --loss:#E2563D; --loss-bg:rgba(226,86,61,.13); --clear:#5E9E96; --clear-bg:rgba(94,158,150,.13); --caution:#D9A441; --caution-bg:rgba(217,164,65,.13); --stop:#C4463A; --stop-bg:rgba(196,70,58,.15); --accent:#C9964A; --accent-soft:rgba(201,150,74,.14); --accent-hover:#DDAB60; --krivka-1:#E9E7E2; --krivka-2:#C9964A; --krivka-3:#B98BD6; --on-accent:#14161A; --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 4px 14px rgba(0,0,0,.40); --shadow-3:0 12px 32px rgba(0,0,0,.50); color-scheme: dark; } /* Sledovat systém, dokud si uživatel nevybere ručně */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#14161A; --surface:#1B1E24; --surface-2:#232730; --surface-sunk:#101216; --line:#2B2F37; --line-soft:#23262D; --text:#E9E7E2; --text-2:#9B9891; --text-3:#6E6C67; --gain:#35B37E; --gain-bg:rgba(53,179,126,.12); --loss:#E2563D; --loss-bg:rgba(226,86,61,.13); --clear:#5E9E96; --clear-bg:rgba(94,158,150,.13); --caution:#D9A441; --caution-bg:rgba(217,164,65,.13); --stop:#C4463A; --stop-bg:rgba(196,70,58,.15); --accent:#C9964A; --accent-soft:rgba(201,150,74,.14); --accent-hover:#DDAB60; --krivka-1:#E9E7E2; --krivka-2:#C9964A; --krivka-3:#B98BD6; --on-accent:#14161A; --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 4px 14px rgba(0,0,0,.40); --shadow-3:0 12px 32px rgba(0,0,0,.50); color-scheme: dark; } } /* ═══ ZÁKLAD ═══════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{font-family:var(--sans);font-size:15px;line-height:1.55;background:var(--bg);color:var(--text); min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-hover)} h1{font-size:25px;font-weight:700;letter-spacing:-.022em;line-height:1.2} h2{font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.3} h3{font-size:15px;font-weight:600;letter-spacing:-.008em} h4{font-size:13px;font-weight:600} img{max-width:100%;height:auto} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r1)} ::selection{background:var(--accent-soft);color:var(--text)} /* Čísla mono s tabulkovými číslicemi → desetinná čárka v tabulce sedí */ .num,.money,.stat-value,.inst-val,.slider-value,.checklist-score, .risk-result-value,.data-table td.text-right,.table td.text-right{ font-family:var(--mono);font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;letter-spacing:-.01em} /* ═══ ROZVRŽENÍ ════════════════════════════════════════════ */ .app-layout{display:flex;min-height:100vh} .sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--line); position:fixed;inset:0 auto 0 0;z-index:var(--z-drawer);display:flex;flex-direction:column} .sidebar-brand{display:flex;align-items:center;gap:var(--s2);padding:var(--s4); border-bottom:1px solid var(--line);font-weight:700;font-size:15px;letter-spacing:-.02em; color:var(--text);flex-shrink:0} .sidebar-brand .mark{width:22px;height:22px;border-radius:var(--r1);background:var(--accent); color:var(--on-accent);display:grid;place-content:center;font-family:var(--mono); font-size:11px;font-weight:600;flex-shrink:0} .sidebar-brand .cz{color:var(--text-3);font-weight:500} .sidebar-nav{flex:1;overflow-y:auto;padding:var(--s2) 0 var(--s4)} .sidebar-nav::-webkit-scrollbar{width:8px} .sidebar-nav::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-pill)} .nav-section{padding:var(--s4) var(--s4) var(--s1);font-family:var(--mono);font-size:10px; letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)} .nav-section:first-child{padding-top:var(--s2)} .nav-item{display:flex;align-items:center;gap:var(--s3);padding:7px var(--s4);color:var(--text-2); font-size:13.5px;border-left:2px solid transparent;transition:background .12s,color .12s} .nav-item:hover{background:var(--surface-2);color:var(--text)} .nav-item.active{background:var(--accent-soft);color:var(--accent);border-left-color:var(--accent);font-weight:600} .nav-item svg{width:15px;height:15px;flex-shrink:0} .nav-item .chev{margin-left:auto;width:12px;height:12px;transition:transform .15s;opacity:.6} .nav-item.expanded .chev{transform:rotate(90deg)} .nav-sub{display:none} .nav-sub.open{display:block;padding-bottom:var(--s1)} .nav-subitem{display:block;padding:5px var(--s4) 5px 42px;font-size:12.5px;color:var(--text-3); border-left:2px solid transparent} .nav-subitem:hover{color:var(--text);background:var(--surface-2)} .nav-subitem.active{color:var(--accent);border-left-color:var(--accent);font-weight:600} .sidebar-foot{flex-shrink:0;border-top:1px solid var(--line);padding:var(--s3) var(--s4); display:flex;align-items:center;gap:var(--s2)} .sidebar-user-name{flex:1;min-width:0;font-size:13px;font-weight:500;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .icon-btn{width:28px;height:28px;display:grid;place-content:center;border:1px solid var(--line); border-radius:var(--r1);background:transparent;color:var(--text-2);cursor:pointer;flex-shrink:0; transition:background .12s,color .12s,border-color .12s} .icon-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--text-3)} .icon-btn svg{width:15px;height:15px} .theme-toggle .icon-sun{display:none} :root[data-theme="dark"] .theme-toggle .icon-sun{display:block} :root[data-theme="dark"] .theme-toggle .icon-moon{display:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block} :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none} } .main-content{margin-left:var(--sidebar-w);flex:1;min-width:0;padding:var(--s5)} .topbar{display:none} .nav-overlay{display:none;position:fixed;inset:0;background:rgba(10,11,13,.5);z-index:var(--z-overlay)} .nav-overlay.show{display:block} /* ═══ PŘEPÍNAČ ÚČTU ════════════════════════════════════════ */ .account-switch{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);flex-shrink:0} .account-switch select{font-size:12.5px;padding:5px 26px 5px 9px;background:var(--surface-2)} .account-switch .bal{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px; color:var(--text-2);margin-top:5px;display:block} /* ═══ KARTY ════════════════════════════════════════════════ */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3); margin-bottom:var(--s4);overflow:hidden} .card-header{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);display:flex; align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap} .card-header h3{font-size:14px} .card-body{padding:var(--s4)} .card-footer{padding:var(--s3) var(--s4);border-top:1px solid var(--line);background:var(--surface-2)} /* Formulář rovnou v kartě dostane odsazení jako .card-body. ───────────────────────────────────────────────────────────────── .card sama odsazení nemá — má ho až .card-body. Patnáct formulářů v aplikaci je v kartě bez něj, takže se pole dotýkala okrajů: účty (založení, úprava, pohyby), checklisty, import, cíle, chybové tagy, psychologie (ranní i večerní), obchody (úprava, seznam, detail, import sezónnosti, co kdyby). Pravidlo je tady, ne v patnácti šablonách. Cílí jen na PŘÍMÉHO potomka — formulář vnořený hlouběji už je v nějakém obalu a odsazení má odtamtud. Prověřeno, že žádný z těch patnácti nemá uvnitř vlastní .card-body ani .card-header, takže se odsazení nikde nesečte. Kdyby takový vznikl, dá se mu .card-body a tohle pravidlo se na něj přestane vztahovat. */ .card > form{padding:var(--s4)} /* Hodnota, která se jen ukazuje. Vypadá jako pole, ale nejde do ní psát — používá se u zůstatku účtu, který se dopočítává a zadat nejde. */ /* Křivka průběhu uvnitř měsíce. Vykresluje se jako SVG na serveru — Chart.js na té stránce načtený není a tahat ho kvůli jedné křivce by znamenalo 200 kB navíc. */ .prubeh-svg{width:100%;height:auto;display:block} .prubeh-popisek{ font-size:11px; fill:var(--text-3); font-family:var(--mono, ui-monospace, monospace); } .prubeh-popisek.je-nula{fill:var(--text-2);font-weight:600} .prubeh-popisek.je-tlumeny{fill:var(--line);font-family:inherit;font-size:10px} .prubeh-popisek.je-dnes{fill:var(--loss);font-family:inherit;font-size:10px} .prubeh-okno{font-size:11.5px;font-weight:600} .form-control--readonly{ background:var(--surface-2); color:var(--text-2); cursor:default; font-variant-numeric:tabular-nums; } .page-header{display:flex;align-items:center;justify-content:space-between;gap:var(--s4); flex-wrap:wrap;margin-bottom:var(--s5)} .page-header .subtitle{color:var(--text-2);font-size:13.5px;margin-top:2px} /* ═══ BRÁNA — verdikt RiskGuardu ═══════════════════════════ */ .gate{border:1px solid var(--line);border-radius:var(--r3);background:var(--surface); overflow:hidden;margin-bottom:var(--s4)} .gate-bar{display:flex;align-items:center;gap:var(--s4);padding:var(--s4); border-left:3px solid var(--line);flex-wrap:wrap} .gate-verdict{font-family:var(--mono);font-size:16px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;flex-shrink:0} .gate-why{color:var(--text-2);font-size:13.5px;flex:1;min-width:180px} .gate--clear .gate-bar{border-left-color:var(--clear);background:var(--clear-bg)} .gate--clear .gate-verdict{color:var(--clear)} .gate--caution .gate-bar{border-left-color:var(--caution);background:var(--caution-bg)} .gate--caution .gate-verdict{color:var(--caution)} .gate--stop .gate-bar{border-left-color:var(--stop);background:var(--stop-bg)} .gate--stop .gate-verdict{color:var(--stop)} .instruments{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); border-top:1px solid var(--line)} .inst{padding:var(--s3) var(--s4);border-right:1px solid var(--line-soft);position:relative} .inst:last-child{border-right:0} .inst::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--line)} .inst--ok::before{background:var(--clear)} .inst--warn::before{background:var(--caution)} .inst--stop::before{background:var(--stop)} .inst-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:2px} .inst-val{font-size:15px;font-weight:500} .inst-lim{color:var(--text-3);font-size:12.5px} /* ═══ STATISTIKY ═══════════════════════════════════════════ */ .stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4)} .stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);font-weight:500} .stat-value{font-size:23px;font-weight:500;line-height:1.15;margin-top:6px;letter-spacing:-.02em} .stat-sub{font-family:var(--mono);font-size:12px;color:var(--text-2);margin-top:3px} .stat-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3); padding:var(--s2) 0;border-bottom:1px solid var(--line-soft)} .stat-row:last-child{border-bottom:0} .stat-row .label{color:var(--text-2);font-size:13px} .stat-row .value{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;font-size:13.5px} /* ═══ TABULKY ══════════════════════════════════════════════ */ .table-wrap,.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch} /* Poslední sloupec se dotýkal pravého okraje. Posuvný obal končí přesně na hraně tabulky, takže „+140,00" v sloupci Rok leželo na rámečku. */ .table-wrap > table, .table-container > table{padding-right:2px} .table-wrap th:last-child,.table-wrap td:last-child, .table-container th:last-child,.table-container td:last-child{padding-right:var(--s3)} table.data-table,table.table{width:100%;border-collapse:collapse;background:var(--surface);font-size:13.5px} .data-table th,.table th{text-align:left;font-weight:500;font-size:10.5px;text-transform:uppercase; letter-spacing:.08em;color:var(--text-3);padding:var(--s3) var(--s4); border-bottom:1px solid var(--line);white-space:nowrap} .data-table td,.table td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line-soft);vertical-align:middle} .data-table tbody tr:last-child td,.table tbody tr:last-child td{border-bottom:0} .data-table tbody tr:hover,.table tbody tr:hover{background:var(--surface-2)} /* ═══ TLAČÍTKA ═════════════════════════════════════════════ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);padding:8px 14px; border:1px solid transparent;border-radius:var(--r2);font-family:var(--sans);font-size:13.5px; font-weight:500;line-height:1.3;cursor:pointer;background:var(--surface-2);color:var(--text); transition:background .12s,border-color .12s,color .12s;white-space:nowrap} .btn:hover{background:var(--line-soft);color:var(--text)} .btn svg{width:15px;height:15px} .btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed} .btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)} .btn-outline{background:transparent;border-color:var(--line);color:var(--text-2)} .btn-outline:hover{border-color:var(--text-3);color:var(--text);background:var(--surface-2)} .btn-danger{background:transparent;border-color:var(--loss);color:var(--loss)} .btn-danger:hover{background:var(--loss-bg);color:var(--loss)} .btn-success{background:var(--gain);color:#fff;border-color:var(--gain)} .btn-sm,.btn-delete-sm{padding:5px 10px;font-size:12.5px} .btn-lg{padding:11px 20px;font-size:15px} .btn-block{width:100%} /* ═══ FORMULÁŘE ════════════════════════════════════════════ */ .form-group{margin-bottom:var(--s4)} label{display:block;font-size:12.5px;font-weight:500;color:var(--text-2);margin-bottom:5px} .form-control,input[type=text],input[type=email],input[type=password],input[type=number], input[type=date],input[type=datetime-local],input[type=time],input[type=search],select,textarea{ width:100%;padding:8px 11px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r2); color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.4; transition:border-color .12s,box-shadow .12s} input[type=number]{font-family:var(--mono);font-variant-numeric:tabular-nums} .form-control:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)} textarea{min-height:96px;resize:vertical;line-height:1.55} select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%238A8C92' d='M6 8L2 4h8z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center;padding-right:30px} .form-row{display:flex;gap:var(--s3)} .form-row>*{flex:1;min-width:0} .form-hint{font-size:12px;color:var(--text-3);margin-top:4px} .form-error{font-size:12px;color:var(--loss);margin-top:4px} input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent);cursor:pointer} .direction-toggle{display:flex;gap:var(--s2)} .direction-btn{flex:1;text-align:center;cursor:pointer;padding:10px;border:1px solid var(--line); border-radius:var(--r2);font-weight:600;font-size:13.5px;transition:all .12s} .direction-btn input{position:absolute;opacity:0;pointer-events:none} .direction-btn:hover{border-color:var(--text-3)} .direction-btn.selected{border-width:2px} .direction-btn.long.selected{border-color:var(--gain);background:var(--gain-bg);color:var(--gain)} .direction-btn.short.selected{border-color:var(--loss);background:var(--loss-bg);color:var(--loss)} /* ═══ ODZNAKY ══════════════════════════════════════════════ */ .badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:var(--r1); font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.04em; text-transform:uppercase;border:1px solid transparent;white-space:nowrap} .badge-profit,.badge-long{background:var(--gain-bg);color:var(--gain);border-color:var(--gain)} .badge-loss,.badge-short{background:var(--loss-bg);color:var(--loss);border-color:var(--loss)} .badge-info{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)} .badge-warning{background:var(--caution-bg);color:var(--caution);border-color:var(--caution)} .badge-danger{background:var(--stop-bg);color:var(--stop);border-color:var(--stop)} .badge-muted{background:var(--surface-2);color:var(--text-3);border-color:var(--line)} /* Směr má i tvar → čitelný při poruše barvocitu */ .badge-long::before{content:"▲";font-size:8px} .badge-short::before{content:"▼";font-size:8px} /* ═══ HLÁŠKY ═══════════════════════════════════════════════ */ .alert{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) var(--s4); border-radius:var(--r2);border:1px solid;border-left-width:3px;margin-bottom:var(--s4);font-size:13.5px} .alert-success{background:var(--clear-bg);border-color:var(--clear);color:var(--text)} .alert-error{background:var(--stop-bg);border-color:var(--stop);color:var(--text)} .alert-warning{background:var(--caution-bg);border-color:var(--caution);color:var(--text)} .alert-info{background:var(--accent-soft);border-color:var(--accent);color:var(--text)} /* ═══ MŘÍŽKY ═══════════════════════════════════════════════ */ .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)} .grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s3)} /* ═══ PRÁZDNÉ STAVY ════════════════════════════════════════ */ .empty-state{text-align:center;padding:var(--s7) var(--s4);color:var(--text-2)} .empty-state .icon{font-size:30px;opacity:.35;margin-bottom:var(--s3);display:block} .empty-state h3{color:var(--text);margin-bottom:var(--s2)} .empty-state p{font-size:13.5px;max-width:44ch;margin:0 auto var(--s4)} /* ═══ STRÁNKOVÁNÍ ══════════════════════════════════════════ */ .pagination{display:flex;gap:var(--s1);align-items:center;justify-content:center; padding:var(--s4);flex-wrap:wrap} .pagination a,.pagination span{min-width:32px;padding:5px 9px;text-align:center; border:1px solid var(--line);border-radius:var(--r1);font-family:var(--mono); font-size:12.5px;color:var(--text-2)} .pagination a:hover{border-color:var(--accent);color:var(--accent)} .pagination .current,.pagination .active{background:var(--accent);border-color:var(--accent); color:var(--on-accent);font-weight:600} /* ═══ PŘIHLÁŠENÍ ═══════════════════════════════════════════ */ .auth-page{display:grid;place-items:center;min-height:100vh;padding:var(--s4);background:var(--bg)} .auth-container{width:100%;max-width:380px} .auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3); padding:var(--s6);box-shadow:var(--shadow-2)} .auth-header{text-align:center;margin-bottom:var(--s5)} .auth-header h1{font-size:22px;margin-bottom:var(--s1)} .auth-header p{color:var(--text-2);font-size:13.5px} .auth-footer{text-align:center;margin-top:var(--s5);color:var(--text-3);font-size:12.5px} /* ═══ UTILITY — nahrazují 267 inline stylů ═════════════════ */ .text-gain,.text-profit,.text-green{color:var(--gain)} .text-loss,.text-red{color:var(--loss)} .text-caution,.text-warning,.text-yellow{color:var(--caution)} .text-accent,.text-blue{color:var(--accent)} .text-muted{color:var(--text-3)} .text-dim{color:var(--text-2)} .text-right{text-align:right}.text-center{text-align:center}.text-left{text-align:left} .fs-xs{font-size:11px}.fs-sm{font-size:12.5px}.fs-md{font-size:14px} .fs-lg{font-size:17px}.fs-xl{font-size:21px}.fs-2xl{font-size:27px} .fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700} .mt-0{margin-top:0}.mb-0{margin-bottom:0} .mt-1{margin-top:var(--s2)}.mb-1{margin-bottom:var(--s2)} .mt-2{margin-top:var(--s4)}.mb-2{margin-bottom:var(--s4)} .mt-3{margin-top:var(--s5)}.mb-3{margin-bottom:var(--s5)} .mt-4{margin-top:var(--s6)}.mb-4{margin-bottom:var(--s6)} .m-0{margin:0}.p-0{padding:0}.p-2{padding:var(--s4)}.p-3{padding:var(--s5)} .flex{display:flex}.flex-col{display:flex;flex-direction:column} .flex-between{display:flex;justify-content:space-between;align-items:center} .flex-center{display:flex;align-items:center;justify-content:center} .flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end} .self-center{align-self:center}.self-end{align-self:flex-end} .gap-1{gap:var(--s2)}.gap-2{gap:var(--s3)}.gap-3{gap:var(--s4)} .flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-half{flex:.5}.flex-none{flex:none} .w-full{width:100%} .mw-sm{max-width:320px}.mw-md{max-width:560px}.mw-lg{max-width:800px} .minw-sm{min-width:90px}.minw-md{min-width:130px}.minw-lg{min-width:190px} .hidden{display:none}.inline{display:inline} .divider-top{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)} .plan-rules{white-space:pre-wrap;line-height:1.65;font-size:13.5px;color:var(--text-2)} .plan-rules strong{color:var(--text)} .progress{height:5px;background:var(--surface-sunk);border-radius:var(--r-pill);overflow:hidden} .progress-bar{height:100%;background:var(--accent);border-radius:var(--r-pill);transition:width .3s} .progress-bar.gain{background:var(--gain)} .progress-bar.loss{background:var(--loss)} /* ═══ DOMÉNOVÉ KOMPONENTY Převzato z původního CSS, přepsáno na nové tokeny a slito — každý selektor je nyní právě jednou. Dřív byla .risk-guard definovaná 7×, .pagination 9× a kaskáda se přebíjela sama se sebou. ══════════════════════════════════════════════════════ */ /* ═══ DOMÉNOVÉ KOMPONENTY ═════════════════════════════════ Převzato z původního CSS, přepsáno na nové tokeny. ══════════════════════════════════════════════════════ */ .risk-guard { padding: var(--s3) var(--s4); margin-bottom: var(--s4); border-radius: var(--r2); font-size: 13.5px; } .risk-guard.blocked { background: var(--loss-bg); border: 1px solid var(--loss); color: var(--loss); } .risk-guard.warning { background: var(--caution-bg); border: 1px solid var(--caution); color: var(--caution); } .risk-guard.ok { background: var(--gain-bg); border: 1px solid var(--gain); color: var(--gain); } .chart-container { position: relative; height: 250px; } .mood-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; } .risk-calc-box { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 0.75rem; font-size: 0.85rem; } .risk-calc-box div { margin-bottom: 0.25rem; } .risk-calc-box div:last-child { margin-bottom: 0; } .risk-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .risk-result-label { display: block; font-size: 0.75rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; } .risk-result-value { display: block; font-size: 1.1rem; font-weight: 600; margin-top: 0.15rem; } .screenshot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .screenshot-item img { width: 100%; border-radius: 6px; border: 1px solid var(--line); } .screenshot-label { font-size: 0.75rem; color: var(--text-3); margin-top: 0.25rem; } .mood-dot.mood-1, .mood-dot.mood-2 { background: var(--gain); } .mood-dot.mood-3, .mood-dot.mood-4 { background: color-mix(in srgb, var(--gain) 50%, var(--caution)); } .mood-dot.mood-5, .mood-dot.mood-6 { background: var(--caution); } .mood-dot.mood-7, .mood-dot.mood-8 { background: var(--loss); } .template-card { padding: 1rem; border: 2px solid var(--line); border-radius: var(--r2); cursor: pointer; transition: border-color 0.2s, background 0.2s; } .template-card:hover { border-color: var(--accent); background: rgba(59, 130, 246, 0.05); } .template-card.selected { border-color: var(--accent); background: rgba(59, 130, 246, 0.1); } .template-card h4 { margin: 0 0 0.5rem 0; font-size: 0.95rem; } .template-card p { font-size: 0.8rem; margin-bottom: 0.5rem; } .checklist-item { padding: 0.6rem 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .checklist-item:last-child { border-bottom: none; } .checklist-item-header { display: flex; align-items: center; gap: 0.5rem; flex: 1; } .checklist-item-desc { font-size: 0.8rem; color: var(--text-3); margin-left: 2rem; width: 100%; } .checklist-order { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--surface-2); font-size: 0.75rem; font-weight: 600; flex-shrink: 0; } .checklist-builder-item { padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--r2); margin-bottom: 0.75rem; background: var(--surface-2); } .checklist-exec-item { padding: 0.5rem 0; border-bottom: 1px solid var(--line); } .checklist-exec-item:last-child { border-bottom: none; } .checklist-exec-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.9rem; } .checklist-exec-order { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--surface-2); font-size: 0.7rem; font-weight: 600; flex-shrink: 0; } .checklist-exec-desc { font-size: 0.75rem; color: var(--text-3); margin-left: 3rem; } .checklist-checkbox { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); flex-shrink: 0; } .checklist-score { font-size: 1.1rem; font-weight: 700; padding: 0.75rem; margin-top: 0.75rem; border-radius: var(--r2); background: var(--surface-2); text-align: center; } .checklist-result-group { margin-bottom: 1rem; } .checklist-result-group:last-child { margin-bottom: 0; } .checklist-result-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; border-bottom: 2px solid var(--line); margin-bottom: 0.5rem; } .checklist-result-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.85rem; } .mood-option { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; border: 2px solid var(--line); cursor: pointer; transition: all 0.2s; background: var(--surface-2); } .mood-selector-sm .mood-option { width: 2rem; height: 2rem; } .mood-option:hover { border-color: var(--accent); background: rgba(59, 130, 246, 0.1); } .mood-option.selected, .mood-option:has(input:checked) { border-color: var(--mood-color, var(--accent)); background: rgba(59, 130, 246, 0.15); box-shadow: 0 0 0 1px var(--mood-color, var(--accent)); } .mood-option input { display: none; } .ritual-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .ritual-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; border-radius: var(--r2); border: 1px solid var(--line); cursor: pointer; transition: all 0.2s; background: var(--surface-2); } .ritual-option:has(input:checked) { border-color: var(--accent); background: rgba(59, 130, 246, 0.1); } .ritual-option input { accent-color: var(--accent); } .emotion-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .emotion-option { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem; border-radius: var(--r2); border: 2px solid var(--line); cursor: pointer; transition: all 0.2s; background: var(--surface-2); } .emotion-option input { accent-color: var(--accent); } .emotion-option span { font-weight: 600; } .emotion-option small { font-size: 0.75rem; color: var(--text-3); } .emotion-option:has(input:checked) { border-color: var(--loss); background: rgba(239, 68, 68, 0.1); } .emotion-log-item { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.4rem 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; } .emotion-log-item:last-child { border-bottom: none; } .mood-slider { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .mood-slider .slider { flex: 1; min-width: 120px; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: var(--surface-2); outline: none; } .mood-slider .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); cursor: pointer; } .mood-slider .slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); cursor: pointer; border: none; } .slider-value { font-size: 1.4rem; font-weight: 700; min-width: 2rem; text-align: center; color: var(--accent); } .slider-labels { width: 100%; display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-3); margin-top: -0.25rem; } .emotion-checks, .routine-checks { display: flex; flex-wrap: wrap; gap: 0.75rem; } .check-label { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border-radius: var(--r2); background: var(--surface-2); cursor: pointer; font-size: 0.85rem; transition: background 0.2s; } .check-label:hover { background: var(--surface-2); } .check-label input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--accent); } .emotion-bad { border-left: 3px solid var(--loss); } .emotion-good { border-left: 3px solid var(--gain); } .direction-bar { flex: 1; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; } .direction-bar-fill { height: 100%; border-radius: 4px; } .direction-bar-fill.profit { background: var(--gain); } .direction-bar-fill.loss { background: var(--loss); } .calendar-summary { display: flex; gap: 2rem; flex-wrap: wrap; } .calendar-grid { width: 100%; border-collapse: collapse; table-layout: fixed; } .calendar-grid th { padding: 0.5rem; text-align: center; font-size: 0.75rem; color: var(--text-3); font-weight: 600; text-transform: uppercase; } /* Buňka kalendáře. ───────────────────────────────────────────────────────────────── Tyhle čtyři třídy v CSS chyběly úplně, přestože je šablona používala. Buňky proto neměly výšku, rámeček ani odsazení a celý měsíc se slil do sloupců holých čísel. Ostatní části kalendáře stylované byly — .calendar-grid, .cal-day-num, .cal-pnl i .cal-meta. Chyběl jen ten obal, tedy to jediné, co dělá z tabulky kalendář. */ .cal-cell{ height:88px; vertical-align:top; padding:var(--s2); border:1px solid var(--line); transition:background .12s ease; } .cal-cell:hover{background:var(--surface-2)} /* Dny mimo měsíc: místo zůstane, obsah ne. */ .cal-empty{background:var(--bg);border-color:var(--line-soft,var(--line))} .cal-empty:hover{background:var(--bg)} .cal-weekend{background:color-mix(in srgb,var(--text-3) 4%,transparent)} /* Dnešek se pozná bez čtení čísla. */ .cal-today{box-shadow:inset 0 0 0 2px var(--accent)} .cal-today .cal-day-num{color:var(--accent);font-weight:700} /* Ziskový a ztrátový den. Barva je jen podklad — samotné číslo nese text-gain/text-loss, takže se to nesmí přebít. */ .cal-profit{background:color-mix(in srgb,var(--gain) 10%,transparent)} .cal-loss{background:color-mix(in srgb,var(--loss) 10%,transparent)} .cal-profit:hover{background:color-mix(in srgb,var(--gain) 16%,transparent)} .cal-loss:hover{background:color-mix(in srgb,var(--loss) 16%,transparent)} /* Na úzké obrazovce se dny zmenší, ale mřížka zůstane mřížkou. */ @media (max-width:640px){ .cal-cell{height:56px;padding:var(--s1)} .cal-pnl{font-size:.75rem} .cal-meta{display:none} } .cal-day-num { font-size: 0.75rem; font-weight: 600; color: var(--text-3); } .mistake-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; background: color-mix(in srgb, var(--tag, var(--loss)) 13%, transparent); color: var(--tag, var(--loss)); border: 1px solid color-mix(in srgb, var(--tag, var(--loss)) 25%, transparent); } .tag-ink { color: var(--tag, var(--loss)); } .heatmap-table { border-collapse: collapse; width: 100%; } .heatmap-table th { font-size: 0.75rem; padding: 0.4rem; white-space: nowrap; } .heatmap-table td { padding: 0.3rem; } .heatmap-cell { min-width: 52px; border-radius: 4px; } .heatmap-total-row { border-top: 2px solid var(--line); } .market-season-table .market-row { cursor: pointer; transition: background 0.15s; } .market-season-table .market-row:hover { background: var(--accent-soft); } .mistake-check { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.5rem; border-radius: 6px; cursor: pointer; font-size: 0.8rem; transition: background 0.15s; border: 1px solid color-mix(in srgb, var(--tag, var(--line)) 25%, transparent); } .mistake-check:hover { background: color-mix(in srgb, var(--tag, var(--loss)) 7%, transparent); } .mistake-check input[type="checkbox"] { margin: 0; } @media (max-width: 768px) { .ritual-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .emotion-grid { grid-template-columns: 1fr; } } /* ═══ DOPLNĚNÉ KOMPONENTY ═════════════════════════════════ Kalendář, R:R pruh, modální okno, denní příprava. Obnoveno z původního CSS a přepsáno na nové tokeny. ══════════════════════════════════════════════════════ */ .form-label { display: block; margin-bottom: 0.35rem; font-size: 0.8rem; font-weight: 500; color: var(--text-2); } .btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); } .btn-secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--text-3); } .rr-visual { margin-top: 0.5rem; } .rr-bar { display: flex; height: 40px; border-radius: 6px; overflow: hidden; } .rr-segment { display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; min-width: 30px; transition: width 0.3s; } .rr-loss { background: var(--loss); color: white; } .rr-entry { background: var(--surface-2); color: var(--text); width: 40px; flex-shrink: 0; } .rr-profit { background: var(--gain); color: white; } .rr-profit2 { background: color-mix(in srgb, var(--gain) 65%, var(--surface)); color: var(--text); } .big-stat { font-size: 2rem; font-weight: 700; text-align: center; margin: 1rem 0; } .big-stat small { font-size: 0.8rem; color: var(--text-3); } .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal.hidden { display: none !important; } .modal-content { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.5rem; width: 90%; max-width: 500px; position: relative; } .modal-content h3 { margin-bottom: 1rem; } .modal-close-btn { background: none; border: none; color: var(--text-3); font-size: 1.5rem; cursor: pointer; padding: 0 0.25rem; line-height: 1; border-radius: 4px; } .modal-close-btn:hover { color: var(--text); background: var(--surface-2); } .form-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 1rem; } .level-row, .event-row { margin-bottom: 0.5rem; } .fit-to-trade-box { padding: 0.75rem; border-radius: var(--r2); background: var(--surface-2); border: 2px solid var(--line); transition: border-color 0.3s; } .level-row, .macro-row { align-items: center; } .period-selector { display: flex; gap: 0.25rem; } .direction-stat { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); } .direction-stat:last-child { border-bottom: none; } .cal-stat { text-align: center; } .cal-stat-value { display: block; font-size: 1.4rem; font-weight: 700; } .cal-stat-label { font-size: 0.75rem; color: var(--text-3); } .cal-pnl { font-size: 0.9rem; font-weight: 700; margin-top: 0.15rem; } .cal-meta { font-size: 0.65rem; color: var(--text-3); margin-top: 0.1rem; } .hm-val { font-weight: 700; font-size: 0.8rem; line-height: 1.2; } .hm-sub { font-size: 0.6rem; opacity: 0.7; line-height: 1; } /* ═══ MOBIL ════════════════════════════════════════════════ */ @media (max-width:900px){ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)} } @media (max-width:768px){ /* Sidebar je vysouvací zásuvka. Dřív se jen schoval přes display:none a tlačítko, které ho mělo vrátit, se nikdy nevykreslilo. */ .topbar{display:flex;align-items:center;gap:var(--s3);position:sticky;top:0; z-index:var(--z-topbar);height:var(--topbar-h);padding:0 var(--s3); background:var(--surface);border-bottom:1px solid var(--line)} .topbar-title{flex:1;min-width:0;font-size:15px;font-weight:600;letter-spacing:-.015em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sidebar{transform:translateX(-100%);transition:transform .22s ease; box-shadow:var(--shadow-3);width:268px} .sidebar.open{transform:translateX(0)} .main-content{margin-left:0;padding:var(--s4) var(--s3) var(--s6)} .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} .form-row{flex-direction:column;gap:0} .instruments{grid-template-columns:repeat(2,1fr)} .inst{border-bottom:1px solid var(--line-soft)} .page-header{margin-bottom:var(--s4)} h1{font-size:21px} table.data-table,table.table{min-width:620px} .card{border-radius:var(--r2)} /* Cíle pro prst */ .btn{padding:10px 15px} .btn-sm,.btn-delete-sm{padding:7px 11px} .nav-item{padding:10px var(--s4);font-size:14.5px} .nav-subitem{padding:8px var(--s4) 8px 42px;font-size:13.5px} .icon-btn{width:34px;height:34px} } @media (max-width:400px){ .gate-bar{gap:var(--s2)} .instruments{grid-template-columns:1fr} .stat-value{font-size:20px} } /* ═══ TISK ═════════════════════════════════════════════════ */ @media print{ .sidebar,.topbar,.nav-overlay,.btn,.pagination{display:none!important} .main-content{margin-left:0;padding:0} body{background:#fff;color:#000} .card{border-color:#ccc;break-inside:avoid} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ═══ DROBNOSTI, KTERÉ V PŮVODNÍM CSS CHYBĚLY ═════════════ */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); } .stat-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s3) var(--s4); } .notes { white-space: pre-wrap; line-height: 1.65; color: var(--text-2); font-size: 13.5px; } .sub { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; } .header { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; } @media print { .no-print { display: none !important; } .page-break { break-before: page; } } /* Stavy obchodu — neutrální, nesahají do barev peněz */ .badge-planned { background: var(--surface-2); color: var(--text-2); border-color: var(--line); } .badge-open { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .badge-partial_close { background: var(--caution-bg); color: var(--caution); border-color: var(--caution); } .badge-closed { background: var(--surface-2); color: var(--text-3); border-color: var(--line); } .badge-cancelled{ background: var(--surface-2); color: var(--text-3); border-color: var(--line); text-decoration: line-through; } .tag-badge { display: inline-block; padding: 1px 6px; margin: 0 2px 2px 0; border-radius: var(--r1); background: var(--surface-2); color: var(--text-2); font-size: 11px; border: 1px solid var(--line); white-space: nowrap; } .pnl-positive { color: var(--gain); } .pnl-negative { color: var(--loss); } /* Čísla se nikdy nelámou přes dva řádky */ .num, .money, .stat-value, .inst-val, .data-table td.text-right, .table td.text-right { white-space: nowrap; } /* Karty v mřížce mají stejnou výšku — patička patří dolů, ne doprostřed */ .grid-2 > .card, .grid-3 > .card, .grid-auto > .card { display: flex; flex-direction: column; margin-bottom: 0; } .grid-2 > .card > .card-body, .grid-3 > .card > .card-body, .grid-auto > .card > .card-body { flex: 1; } /* ═══ SEZÓNNOST TRHŮ ══════════════════════════════════════ */ .seasonality-table th.row-label { text-align: left; white-space: nowrap; font-size: 11.5px; text-transform: none; letter-spacing: 0; color: var(--text-2); font-weight: 500; } .seasonality-table td { padding: var(--s2) var(--s3); } /* Tabulkove cislice: kazda cifra stejne siroka, takze se +2.8 a -19.7 ve sloupci pod sebou kryji. Bez toho ma kazda hodnota jinou sirku a sloupec vypada roztreseny. */ .seasonality-table td.num { font-variant-numeric: tabular-nums; } .seasonality-table thead th { text-align: center; } .seasonality-table thead th:first-child { width: 130px; } /* Utilitni zarovnani MUSI prebit komponentu. ───────────────────────────────────────────────────────────────── .text-right ma specificitu 0,1,0. Komponenty si ale zarovnani bunek resi samy s vyssi specificitou: .data-table th,.table th 0,1,1 → left .seasonality-table thead th 0,1,2 → center Utilitni trida na se proto NEUPLATNILA. V aplikaci bylo 73 takovych hlavicek v 16 souborech - vsechny se tvarily zarovnane a nebyly. Na to fungovalo, protoze tam zadne pravidlo nebylo. Overeno v prohlizeci, ne odhadem: th s text-right zustavalo left v .data-table a center v .seasonality-table. Tohle je nejuzsi oprava, ktera to spravi vsude naraz - zvedne specificitu utility jen tam, kde ji komponenta prebijela. */ .data-table th.text-left,.table th.text-left, .seasonality-table thead th.text-left{text-align:left} .data-table th.text-center,.table th.text-center, .seasonality-table thead th.text-center{text-align:center} .data-table th.text-right,.table th.text-right, .seasonality-table thead th.text-right{text-align:right} .seasonality-table tbody tr:hover { background: transparent; } /* Vlastní výsledky jsou jiná data než reference — oddělit je linkou */ .seasonality-table .own-row td, .seasonality-table .own-row th { border-top: 1px solid var(--line); } .seasonality-table .own-row:not(:first-of-type) td, .seasonality-table .own-row:not(:first-of-type) th { border-top: 0; } .import-problems { padding-left: 1.2em; line-height: 1.75; font-size: 12.5px; color: var(--text-2); } .code-block { background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s3); font-family: var(--mono); font-size: 11.5px; line-height: 1.6; overflow-x: auto; white-space: pre; color: var(--text-2); } code { font-family: var(--mono); font-size: .92em; background: var(--surface-2); padding: 1px 4px; border-radius: var(--r1); } /* Průměr, kterému se nedá věřit — křížek u čísla */ .seasonality-table td.zkreslene sup { color: var(--caution); font-weight: 700; } /* Šedé pole = tendence nerozlišitelná od náhody */ /* Neobarvené číslo je tlumené, obarvené má plnou barvu textu. Dřív se to poznávalo podle style="background:...", jenže od v85 je v atributu jen --i, takže se tlumily i obarvené buňky. */ .seasonality-table td.num { color: var(--text-2); } .seasonality-table td.num .heat { color: var(--text); } /* Přehled trhů — kompaktnější než detailní tabulky */ .seasonality-table.overview th.row-label { width: auto; font-weight: 600; color: var(--text); } .seasonality-table.overview td { padding: 6px 8px; } .seasonality-table.overview thead th:first-child { width: 90px; } .card-body.pb-0 { padding-bottom: 0; } /* ═══════════════════════════════════════════════════════════════════ v85 — třídy, které nahradily inline styly ve šablonách ─────────────────────────────────────────────────────────────────── Do v84 mělo 62 míst ve views vlastní style="…". Vzhled se tím rozpadl do šablon a přebarvení aplikace neznamenalo přepsat jeden soubor, ale obejít 62 míst. Statické styly jsou teď tady. Co ve views v atributu style zůstalo, jsou už jen HODNOTY, ne vzhled: šířka pruhu v procentech, sytost políčka heatmapy, barva štítku z databáze. Předávají se jako vlastní vlastnosti (--w, --i, --tag) a vzhled si k nim dodá CSS tady. Když se bude aplikace přebarvovat, šablon se to nedotkne. ═══════════════════════════════════════════════════════════════════ */ /* — rozvržení — */ .span-2{grid-column:span 2} .ml-1{margin-left:var(--s2)} .ml-4{margin-left:var(--s6)} .p-1{padding:var(--s2)} .p-3{padding:var(--s5)} /* Řádek makro události: čas úzký, název široký, dopad střední. Platí i pro řádky, které dosype JS — proto v CSS, ne v šabloně. */ .macro-row .form-group:first-child{flex:.7} .macro-row .form-group:nth-child(3){flex:.8} /* — vodorovná linka uvnitř karty — */ hr.rule{border:0;border-top:1px solid var(--line);margin:var(--s2) 0} .row-total{border-top:2px solid var(--line)} /* — zvýrazněný blok s vlastním pozadím — Pozadí drží kanál: peníze berou --gain-bg/--loss-bg, poznámky rozhraní --accent-soft. Dřív to byly natvrdo zapsané rgba() ze staré palety, které se nehnuly ani při přepnutí motivu. */ .callout{padding:var(--s3);border-radius:var(--r2)} .callout--gain{background:var(--gain-bg)} .callout--loss{background:var(--loss-bg)} .callout--accent{background:var(--accent-soft)} /* — proužky, jejichž šířku počítá PHP — */ .bar-fill{width:var(--w,0%)} /* — heatmapa: sytost jde z PHP jako --i, odstín z tokenů — Dřív si seasonality.php mísila vlastní rgba(16,185,129,…), což byla jiná zelená než --gain o kus vedle, a na světlém motivu zůstávala tmavá. Teď obojí bere ze stejného zdroje. */ /* Dlaždice heatmapy. ───────────────────────────────────────────────────────────────── Pozadí sedí na vnitřním prvku, ne na buňce. Do v92 bylo na , jenže .data-table má border-collapse:collapse a padding na buňce — barva tak vyplnila i mezeru mezi čísly a dlaždice se slily v souvislý pruh. Vnitřní prvek to řeší bez zásahu do tabulky. */ .dlazdice,.heat{display:block;padding:4px 5px;border-radius:var(--r1); font-variant-numeric:tabular-nums} .heat{background:color-mix(in srgb, var(--heat) var(--i,0%), transparent);color:var(--text)} .heat--gain{--heat:var(--gain)} .heat--loss{--heat:var(--loss)} /* — drobnosti, které bývaly v atributu — */ .clickable{cursor:pointer} .input-color{height:38px} .empty-inline{padding:var(--s5)} /* Výchozí poměr proužku rizika, než ho JS přepočítá podle zadaných cen. */ .rr-bar #vis_sl{width:30%} .rr-bar #vis_tp1{width:40%} .rr-bar #vis_tp2{width:20%} /* Značka u zkresleného průměru. Ne — vlnovka je sama o sobě vysoký znak a jako horní index by se vznášela nad řádkem. */ /* Sipka u sloupce "lisi se od bezneho mesice". Vlastni mezera vpravo - glyfy trojuhelniku nemaji bocni vuli a text se na ne lepil ("▼ano"). */ .sipka{margin-right:4px;font-size:.85em;display:inline-block} /* Značka zkreslení za číslem. Do v148 měla margin-left 1px a lepila se na číslo — „+27,13~" se četlo jako jeden údaj. Horní index ji oddělí a zároveň dá najevo, že je to poznámka k číslu, ne jeho část. */ .znacka{ font-size:.7em; color:var(--text-3); margin-left:3px; vertical-align:super; line-height:0; } /* Přepínač „jen průkazné" u heatmapy sezónnosti. Skryje barvu měsíců, které se nedají odlišit od náhody — zůstane jen to, co vybočuje. */ .prepinac{display:inline-flex;align-items:center;gap:var(--s1);cursor:pointer; color:var(--text-2);user-select:none;white-space:nowrap} .prepinac input{margin:0;cursor:pointer} .jen-prukazne td[data-sila="sum"] .heat, .jen-prukazne td[data-sila="nevime"] .heat{background:transparent;color:var(--text-2)} /* ── v91: kategorie v přehledu sezónnosti ────────────────────────── */ .filtr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s3)} .stitek{font-size:12.5px;line-height:1;padding:6px 11px;border-radius:var(--r-pill); border:1px solid var(--line);background:transparent;color:var(--text-2); cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s} .stitek:hover{border-color:var(--text-3);background:var(--surface-2)} .stitek--aktivni{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .stitek--aktivni:hover{background:var(--accent-hover);border-color:var(--accent-hover)} .stitek-pocet{opacity:.65;margin-left:3px;font-variant-numeric:tabular-nums} .form-control-sm{height:30px;padding:0 var(--s2);font-size:12.5px;width:auto;min-width:0} /* Přehled trhů je heatmapa, ne výpis. ───────────────────────────────────────────────────────────────── Do v92 tu byla jen .heat s pozadím a zbytek si vzala .data-table: border-collapse:collapse slepilo buňky k sobě, padding se obarvil taky a linka pod řádkem vedla napříč barvou. Z dlaždic se stal souvislý pruh a tabulka vypadala jako tabulkový procesor. Oddělené buňky s poloměrem to vracejí zpátky. */ .seasonality-table.overview td, .seasonality-table.overview tbody th{border-bottom:0} .seasonality-table.overview td{padding:2px 3px} .seasonality-table.overview thead th{padding-bottom:var(--s2)} .seasonality-table td{padding:2px 3px} /* Nadpis kategorie je název sekce, ne hlavička tabulky. .data-table th mu jinak vnutí verzálky a prostrkání. */ .seasonality-table tr.skupina th{padding:var(--s5) var(--s2) var(--s2); font-size:12.5px;font-weight:600;color:var(--text); text-transform:none;letter-spacing:0; border-bottom:1px solid var(--line-soft);background:transparent} .seasonality-table tbody tr:first-child.skupina th{padding-top:var(--s2)} .seasonality-table tr.skupina th .text-muted{font-weight:400} .seasonality-table tr.souhrn td{padding:var(--s2) var(--s2) var(--s5); background:transparent;border:0;color:var(--text-3)} /* Karta trhu sbalená do proužku */ .karta-trhu{padding:0} .karta-souhrn{display:flex;align-items:center;justify-content:space-between;gap:var(--s3); padding:var(--s3) var(--s4);cursor:pointer;list-style:none;user-select:none; border-radius:var(--r3)} .karta-souhrn::-webkit-details-marker{display:none} .karta-souhrn:hover{background:var(--surface-2)} .karta-souhrn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .karta-nazev{display:inline-flex;align-items:baseline;gap:var(--s2);min-width:0} .karta-souhrn::before{content:"›";display:inline-block;margin-right:var(--s2); color:var(--text-3);transition:transform .15s;font-size:15px;line-height:1} /* Otoceni sipky po rozbaleni. Bylo vazane jen na .karta-trhu[open], takze sekce uvnitr karty (Stabilita napric historii, Prubeh uvnitr mesice, Po jednotlivych letech) mely po rozbaleni sipku porad lezatou - vypadaly zavrene, i kdyz byly otevrene. Nove plati pro kazdy otevreny
, jehoz summary ma .karta-souhrn. */ details[open] > .karta-souhrn::before{transform:rotate(90deg)} .karta-trhu[open] > .karta-souhrn{border-bottom:1px solid var(--line-soft); border-radius:var(--r3) var(--r3) 0 0} .karta-trhu[open] > .karta-souhrn .karta-nazev{font-size:17px} .skryto{display:none} /* Podle kterého sloupce se řadí. Šipka je zpětná vazba, ne ozdoba: u pár trhů se abeceda, počet let i počet průkazných měsíců často shodnou a bez ní nejde poznat, že se řazení vůbec uplatnilo. */ .seasonality-table th[data-radi]{cursor:pointer;user-select:none} .seasonality-table th[data-radi]:hover{color:var(--text-2)} .seasonality-table th.radi{color:var(--accent)} .seasonality-table th.radi::after{content:"↓";margin-left:3px;font-size:9px;vertical-align:1px} .seasonality-table th.radi[data-radi="symbol"]::after{content:"↑"} /* Vnorene sekce uvnitr karty trhu. ───────────────────────────────────────────────────────────────── Do v151 sdilely .karta-souhrn s hlavickou trhu, takze mely STEJNOU VAHU: stejny prouzek pres celou sirku, stejne vystredeny nadpis, zadne odsazeni. Pri ctyrech trzich pod sebou neslo poznat, jestli je "Stabilita napric historii" cast ADAUSD, nebo samostatny trh. Nove jsou zretelne podrizene: - odsazene doprava a se svislou linkou - nadpis VLEVO u sipky, ne na stred - mensi pismo a tlumena barva - podbarveni az pri najeti, ne ramecek porad Karta trhu zustava beze zmeny - velky vystredeny nazev. */ .surova{ margin:0 var(--s4) var(--s2) calc(var(--s4) + var(--s3)); border-left:2px solid var(--line); border-radius:0 var(--r2) var(--r2) 0; border-top:0; } /* Sousedni sekce na sebe navazuji BEZ zaporneho okraje. Do v152 tu byl margin-top se zapornou hodnotou - sekce se prekryvaly a jejich svisle linky se navazovaly nakrivo. */ .surova + .surova{margin-top:0} /* Vlastni hlavicka, uz nesdili tvar s hlavickou trhu */ .surova > .karta-souhrn{ /* Vlevo vic mista, at se sipka nelepi na svislou linku */ padding:var(--s2) var(--s3) var(--s2) var(--s3); gap:var(--s2); justify-content:flex-start; border-radius:0 var(--r2) var(--r2) 0; } .surova > .karta-souhrn::before{font-size:12px;margin-right:0;color:var(--line)} .surova:hover > .karta-souhrn::before{color:var(--text-3)} .surova > .karta-souhrn .karta-nazev{ flex:0 1 auto; font-size:13px; font-weight:500; color:var(--text-2); } .surova[open] > .karta-souhrn .karta-nazev{color:var(--text);font-weight:600} /* Popisek vpravo, ale az za nazvem - ne pritisknuty k okraji */ .surova > .karta-souhrn > :last-child{margin-left:auto} .surova[open]{border-left-color:var(--accent)} .surova[open] > .karta-souhrn{border-bottom:0} .surova > .karta-souhrn:hover{background:var(--surface-2)} .surova .seasonality-table.overview thead th:first-child{width:60px} /* Kontejner grafu drží výšku, Chart.js si ji nepočítá sám. ───────────────────────────────────────────────────────────────── Do v103 měla plátna atribut height a poměr stran zapnutý. Chart.js tak výšku dopočítal ze šířky: stránka se prodloužila, naskočil svislý posuvník, kontejner se o jeho šířku zúžil, graf se zmenšil, posuvník zmizel — a dokola. Graf při pohybu myší poskakoval. */ .chart-container--md{height:210px} .chart-container--sm{height:180px} @media (max-width:640px){ .chart-container{height:200px} .chart-container--md{height:180px} .chart-container--sm{height:160px} } /* Zvýraznění buňky heatmapy nesmí měnit rozměry. ───────────────────────────────────────────────────────────────── Bylo to transform: scale(1.05) na . Dvě potíže: transform na buňce tabulky prohlížeče neřeší jednotně a posouval sousedy, a zvětšený prvek přetéká přes .table-container, který má overflow-x:auto — takže při najetí myší naskočil vodorovný posuvník. Obrys geometrii nemění a přetéct nemůže. */ .heatmap-cell .heat,.heatmap-cell .dlazdice{transition:box-shadow .1s} .heatmap-cell:hover .heat,.heatmap-cell:hover .dlazdice{ box-shadow:0 0 0 2px var(--accent)} /* Dlaždice se neroztahuje přes celou kartu. .heatmap-table má width:100 %, takže při jediném sloupci — třeba když máš obchody jen v jedné hodině — zabrala buňka celou šířku a z heatmapy byl pruh. Buňka si šířku nechá, vidět je dlaždice. */ .heatmap-cell .heat,.heatmap-cell .dlazdice{max-width:110px;margin-inline:auto} /* Štítky pozorování v denní přípravě. Nahradily tři volné textarey — klikání je ráno rychlejší než psaní a hlavně se ze štítků dá po roce něco spočítat. */ .stitky-rada{display:flex;flex-wrap:wrap;gap:var(--s2)} .stitek-volba{display:inline-flex;align-items:center;gap:var(--s1); padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line); background:transparent;color:var(--text-2);cursor:pointer;font-size:13px; user-select:none;white-space:nowrap;transition:background .12s,border-color .12s,color .12s} .stitek-volba:hover{border-color:var(--text-3);background:var(--surface-2)} .stitek-volba input{margin:0;cursor:pointer} .stitek-volba:has(input:checked){background:var(--accent-soft); border-color:var(--accent);color:var(--text)} .stitek-volba:focus-within{outline:2px solid var(--accent);outline-offset:2px} /* Tlačítko v řádku formuláře se nemá roztahovat. ───────────────────────────────────────────────────────────────── .form-row > * { flex: 1 } platí i na