/* TrendMap Montage — canonical production stylesheet */ body.tm-auto-open{ overflow:hidden!important } .tm-build, .tm-build *, .tm-auto-entry, .tm-auto-card-entry, .tm-auto-repeat-entry{ box-sizing:border-box;font-family:inherit!important } .tm-build{ position:fixed;inset:0;z-index:1000000;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(2,7,7,.90);backdrop-filter:blur(9px);color:#f4f8f4 } .tm-build.is-open{ display:flex } .tm-build__card{ width:min(1500px,98vw);height:min(900px,96dvh);display:grid;grid-template-rows:70px minmax(0,1fr);overflow:hidden;border:1px solid #263131;border-radius:17px;background:#091010;box-shadow:0 28px 90px rgba(0,0,0,.55) } .tm-build__header{ display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:14px;padding:0 20px;border-bottom:1px solid #1c2626;background:#0b1212 } .tm-build__close{ width:46px;height:46px;border:1px solid #2d3939;border-radius:11px;background:#131b1b;color:#fff;font:inherit;font-size:27px;cursor:pointer } .tm-build__title{ display:flex;align-items:baseline;gap:12px;min-width:0 } .tm-build__title strong{ font-size:21px;font-weight:900 } .tm-build__title span{ color:#9ba6a6;font-size:13px } .tm-build__body{ min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 290px;overflow:hidden } .tm-build__content{ min-width:0;min-height:0;overflow:auto;padding:22px 22px 28px;background:#080d0d } .tm-build__intro h2{ margin:0 0 7px;font-size:20px;font-weight:900 } .tm-build__intro p{ margin:0;color:#a5afaf;font-size:13px;line-height:1.5 } .tm-build__grip{ min-width:18px;color:#7d8a8a;font-size:12px;letter-spacing:-3px;text-align:right;cursor:grab } .tm-build__personal{ display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:center;margin-top:22px;padding:15px 16px;border:1px solid rgba(130,255,87,.2);border-radius:13px;background:rgba(130,255,87,.055) } .tm-build__personal-icon{ width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:rgba(130,255,87,.12);color:#9eff82;font-size:20px } .tm-build__personal strong{ display:block;color:#caffb9;font-size:14px;font-weight:900 } .tm-build__personal p{ margin:4px 0 0;max-width:980px;color:#9faaab;font-size:12px;line-height:1.55 } .tm-build__side{ min-height:0;overflow:auto;padding:106px 18px 22px;border-left:1px solid #1c2626;background:#0b1212 } .tm-build__side-inner{ display:flex;flex-direction:column;gap:12px } .tm-build__voiceover{ display:flex;flex-direction:column;gap:10px;margin-bottom:10px;padding-bottom:16px;border-bottom:1px solid #1d2929 } .tm-build__music-head{ display:flex;align-items:baseline;justify-content:space-between;gap:10px } .tm-build__music-head::after{ content:none!important;display:none!important } .tm-build__music-head h3{ margin:0;font-size:17px;font-weight:900 } .tm-build__music-head span{ color:#7f8b8b;font-size:10px } .tm-build__voiceover-btn, .tm-build__audio-btn{ width:100%;height:48px;border:1px solid rgba(130,255,87,.36);border-radius:11px;background:rgba(130,255,87,.08);color:#baffaa;font:inherit;font-size:13px;font-weight:850;cursor:pointer;box-shadow:none } .tm-build__voiceover-btn:hover, .tm-build__audio-btn:hover{ border-color:rgba(130,255,87,.72);background:rgba(130,255,87,.13) } .tm-build__audio-info{ padding:10px 11px;border:1px solid #263131;border-radius:10px;background:#0a1010 } .tm-build__audio-info[hidden]{ display:none } .tm-build__audio-file{ display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:8px } .tm-build__audio-file span{ overflow:hidden;color:#e8eeee;font-size:11px;text-overflow:ellipsis;white-space:nowrap } .tm-build__audio-file button{ width:28px;height:28px;border:0;border-radius:7px;background:#202929;color:#d5dada;font-size:17px;cursor:pointer } .tm-build__create{ width:100%;height:56px;margin-top:4px;border:0;border-radius:12px;background:#82ff57;color:#071006;font:inherit;font-size:17px;font-weight:900;cursor:pointer } .tm-build__create.tm-create-incomplete{ opacity:.38!important;cursor:not-allowed!important;filter:saturate(.55)!important } .tm-build__create:not(.tm-create-incomplete){ opacity:1!important;cursor:pointer!important } .tm-build__status{ min-height:20px;color:#9da8a8;font-size:11px;text-align:center } .tm-build__status.is-busy{ color:#baffaa } .tm-build__status.is-ok{ color:#a5ff88 } .tm-build__status.is-error{ color:#ff9c9c } .tm-build__download{ height:auto!important;min-height:0!important;margin-top:2px!important;padding:7px 0!important;border:0!important;background:transparent!important;color:#91a19d!important;font-size:11px!important;font-weight:750!important;text-decoration:underline!important;text-underline-offset:3px!important;text-align:center } .tm-build__download:hover{ color:#baffaa!important } .tm-build__download[hidden]{ display:none!important } .tm-build__replay{ width:100%;height:46px;margin-top:8px;border:1px solid rgba(130,255,87,.45);border-radius:10px;background:rgba(130,255,87,.09);color:#b5ff9e;font:inherit;font-size:12px;font-weight:850;cursor:pointer } .tm-build__replay:hover{ background:rgba(130,255,87,.14) } .tm-build__replay[hidden]{ display:none!important } .tm-missing-toast{ position:fixed;right:34px;bottom:34px;z-index:1000015;display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;align-items:center;min-width:270px;max-width:340px;padding:13px 15px;border:1px solid rgba(130,255,87,.38);border-radius:14px;background:rgba(10,18,18,.97);color:#f4f8f4;box-shadow:0 18px 55px rgba(0,0,0,.48);backdrop-filter:blur(12px);opacity:0;transform:translateY(12px) scale(.985);pointer-events:none;transition:opacity .18s ease,transform .18s ease } .tm-missing-toast.is-visible{ opacity:1;transform:translateY(0) scale(1) } .tm-missing-toast__icon{ width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:rgba(130,255,87,.13);color:#9eff80;font-size:20px;font-weight:900 } .tm-missing-toast strong{ display:block;margin-bottom:3px;font-size:13px;font-weight:900 } .tm-missing-toast span{ display:block;color:#aeb9b9;font-size:11px;line-height:1.35 } .tm-build__result{ position:fixed;inset:0;z-index:1000002;display:flex;align-items:center;justify-content:center;padding:14px;overflow:hidden;background:rgba(0,0,0,.84) } .tm-build__result[hidden]{ display:none } .tm-build__result-card{ position:relative;width:min(560px,94vw);height:calc(100dvh - 28px);max-width:94vw;max-height:calc(100dvh - 28px);display:grid;grid-template-rows:42px minmax(0,1fr) 50px;gap:10px;padding:14px;overflow:hidden;border:1px solid #2b3737;border-radius:16px;background:#0c1313;box-shadow:0 24px 80px rgba(0,0,0,.6) } .tm-build__result-card h2{ margin:0 52px 0 0;display:flex;align-items:center;min-height:0;font-size:18px } .tm-build__result-card video{ grid-row:2;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;aspect-ratio:auto;align-self:stretch;justify-self:stretch;object-fit:contain;border-radius:11px;background:#000 } .tm-build__result-close{ position:absolute;top:13px;right:13px;z-index:30;width:42px;height:42px;border:2px solid #82ff57;border-radius:10px;background:#0b1212;color:#fff;font:inherit;font-size:24px;cursor:pointer } .tm-build__result-download{ grid-row:3;width:100%;height:50px;min-height:50px;margin:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:11px;background:#82ff57;color:#071006;font:inherit;font-size:14px;font-weight:900;text-decoration:none } .tm-auto-entry{ width:calc(100% - 16px);min-height:38px;margin:6px 8px;padding:8px 12px;border:1px solid rgba(130,255,87,.28);border-radius:9px;background:rgba(130,255,87,.09);color:inherit;font:inherit;cursor:pointer } .tm-auto-card-entry, .tm-auto-repeat-entry{ min-height:34px;padding:7px 12px;border:1px solid rgba(130,255,87,.3);border-radius:9px;background:rgba(130,255,87,.11);color:#98ff77;font:inherit;font-size:11px;font-weight:750;cursor:pointer } @media(max-width:1250px){ .tm-build__body{ grid-template-columns:minmax(0,1fr) 270px } } @media(max-width:900px){ .tm-build__side{ padding-top:106px } } @media(max-width:760px){ .tm-build{ padding:0 } .tm-build__card{ width:100vw;height:100dvh;border:0;border-radius:0 } .tm-build__header{ grid-template-columns:40px minmax(0,1fr) auto;padding:0 9px;gap:8px } .tm-build__close{ width:40px;height:40px;font-size:23px } .tm-build__title strong{ font-size:15px } .tm-build__title span{ display:none } .tm-build__body{ display:block;overflow:auto } .tm-build__content, .tm-build__side{ overflow:visible;padding:15px } .tm-build__side{ border-left:0;border-top:1px solid #1c2626 } .tm-build__personal{ margin-top:18px } .tm-missing-toast{ left:14px;right:14px;bottom:18px;min-width:0;max-width:none } .tm-build__result{ padding:6px } .tm-build__result-card{ width:calc(100vw - 12px);height:calc(100dvh - 12px);max-width:calc(100vw - 12px);max-height:calc(100dvh - 12px);grid-template-rows:40px minmax(0,1fr) 48px;padding:10px;gap:8px;border-radius:13px } .tm-build__result-card h2{ font-size:16px } .tm-build__result-download{ height:48px;min-height:48px } .tm-build__result-close{ top:9px;right:9px;width:38px;height:38px } } .tm-build__scenario-btn{ min-width:150px; height:40px; padding:0 15px; border:1px solid rgba(130,255,87,.42); border-radius:10px; background:rgba(130,255,87,.08); color:#baffaa; font:inherit; font-size:12px; font-weight:850; cursor:pointer; white-space:nowrap; } .tm-build__scenario-btn:hover{ background:rgba(130,255,87,.14); border-color:rgba(130,255,87,.7); } .tm-build__scenario-btn.is-loaded{ background:rgba(130,255,87,.17); border-color:#82ff57; color:#d7ffca; } @media(max-width:760px){ .tm-build__scenario-btn{ min-width:0; max-width:130px; height:36px; padding:0 9px; font-size:10px; } } .tm-editor{ margin-top:18px; padding:14px; border:1px solid #2a3730; border-radius:15px; background: linear-gradient( 180deg, #111915 0%, #0c120f 100% ); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); } .tm-editor__head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; } .tm-editor__head strong{ display:block; color:#d2dad5; font-size:13px; font-weight:850; } .tm-editor__head span{ display:block; margin-top:3px; color:#738078; font-size:9px; } .tm-editor__actions{ display:flex; gap:7px; } .tm-editor__actions button{ height:34px; padding:0 11px; border:1px solid #405047; border-radius:8px; background:#17211b; color:#aab7ae; font:inherit; font-size:9px; font-weight:750; cursor:pointer; } .tm-editor__actions button:first-child{ border-color:#657b6d; background:#25342b; color:#c0cdc4; } .tm-editor__actions button:hover{ background:#202d25; } .tm-editor__actions button:disabled{ opacity:.4; cursor:not-allowed; } .tm-editor__summary{ display:flex; align-items:center; justify-content:space-between; padding:0 3px 6px; color:#647169; font-size:8px; } .tm-editor__summary strong{ color:#8c9991; font-size:9px; } .tm-editor__track{ display:flex; width:100%; gap:4px; min-height:72px; padding:5px; overflow-x:auto; overflow-y:hidden; border:1px solid #27332c; border-radius:10px; background:#090e0b; scrollbar-width:thin; scrollbar-color:#35443b transparent; } .tm-editor__clip{ position:relative; display:flex; align-items:center; flex-basis:72px; min-width:72px; min-height:60px; padding:7px 23px 7px 7px; overflow:hidden; border:1px solid #35433a; border-radius:8px; background: linear-gradient( 135deg, #1b2720, #111913 ); cursor:grab; transition: border-color .15s ease, transform .15s ease, opacity .15s ease, background .15s ease; } .tm-editor__clip:hover{ border-color:#57695e; } .tm-editor__clip.is-selected{ border-color:#7b9182; background: linear-gradient( 135deg, #26362c, #17221b ); } .tm-editor__clip.is-dragging{ opacity:.3; } .tm-editor__clip.is-drag-over{ border-color:#93a99b; transform:translateY(-2px); } .tm-editor__clip-number{ display:flex; align-items:center; justify-content:center; flex:none; width:21px; height:21px; margin-right:7px; border-radius:6px; background:#2b3b31; color:#94a49a; font-size:8px; font-weight:900; } .tm-editor__clip-copy{ min-width:0; } .tm-editor__clip-copy strong{ display:block; overflow:hidden; color:#cad4cd; font-size:9px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; } .tm-editor__clip-copy span{ display:block; margin-top:3px; color:#8e9f95; font-size:8px; } .tm-editor__clip-copy small{ display:block; margin-top:2px; overflow:hidden; color:#59675f; font-size:7px; text-overflow:ellipsis; white-space:nowrap; } .tm-editor__grip{ position:absolute; top:50%; right:6px; transform:translateY(-50%); color:#526159; font-size:10px; } .tm-editor__voice{ display:grid; grid-template-columns:76px minmax(0,1fr); gap:7px; margin-top:7px; } .tm-editor__voice-title{ display:flex; flex-direction:column; justify-content:center; padding:7px 9px; border:1px solid #27332c; border-radius:8px; background:#101712; } .tm-editor__voice-title strong{ color:#9fada4; font-size:8px; } .tm-editor__voice-title span{ margin-top:3px; color:#637068; font-size:7px; } .tm-editor__wavebox{ position:relative; min-width:0; overflow:hidden; border:1px solid #27332c; border-radius:8px; background:#0a0f0c; } #tmVoiceWave{ display:block; width:100%; height:48px; } .tm-editor__phrases{ position:relative; height:23px; border-top:1px solid #202a24; } .tm-editor__phrase{ position:absolute; top:3px; height:16px; min-width:3px; padding:2px 3px; overflow:hidden; border-left:1px solid #7d9485; border-radius:3px; background:rgba(125,148,133,.16); color:#8e9f95; font-size:6px; line-height:12px; text-overflow:ellipsis; white-space:nowrap; } .tm-editor__empty{ position:absolute; top:5px; left:7px; right:7px; overflow:hidden; color:#58655e; font-size:7px; text-overflow:ellipsis; white-space:nowrap; } .tm-editor__inspector{ display:grid; grid-template-columns: minmax(130px,1.3fr) repeat(4,minmax(88px,.65fr)); gap:7px; align-items:end; margin-top:9px; } .tm-editor__selected{ padding:7px 9px; border:1px solid #29352f; border-radius:8px; background:#111813; } .tm-editor__selected strong{ display:block; overflow:hidden; color:#c7d1ca; font-size:9px; text-overflow:ellipsis; white-space:nowrap; } .tm-editor__selected span{ display:block; margin-top:3px; color:#647169; font-size:7px; } .tm-editor__inspector label{ display:block; min-width:0; } .tm-editor__inspector label>span{ display:block; margin:0 0 3px 2px; color:#69766e; font-size:7px; } .tm-editor__inspector input, .tm-editor__inspector select{ width:100%; height:32px; padding:0 8px; border:1px solid #344139; border-radius:7px; outline:none; background:#0d1410; color:#b7c2ba; font:inherit; font-size:9px; } .tm-editor__inspector input:focus, .tm-editor__inspector select:focus{ border-color:#718679; } .tm-editor__inspector input:disabled{ opacity:.38; } .tm-build__scenario-btn{ border-color:#52675a !important; background:#18231c !important; color:#afbeb4 !important; } .tm-build__scenario-btn:hover{ background:#202e25 !important; border-color:#758c7d !important; } .tm-build__scenario-btn.is-loaded{ border-color:#819788 !important; background:#28382e !important; color:#c8d4cc !important; } @media(max-width:1100px){ .tm-editor__inspector{ grid-template-columns: repeat(2,minmax(0,1fr)); } .tm-editor__selected{ grid-column:1/-1; } } @media(max-width:760px){ .tm-editor{ padding:10px; } .tm-editor__head{ flex-direction:column; align-items:flex-start; } .tm-editor__actions{ width:100%; } .tm-editor__actions button{ flex:1; } .tm-editor__voice{ grid-template-columns:1fr; } } #tmBuildReel.tm-build--v3{ overflow:hidden !important; } .tm-build__scenario-v3{ display:block !important; width:100% !important; min-height:52px !important; margin:0 0 14px !important; border-radius:12px !important; font-size:12px !important; font-weight:800 !important; } #tmBuildReel.tm-build--v3 .tm-editor{ margin-top:9px !important; padding:10px 11px !important; border-radius:12px !important; } #tmBuildReel.tm-build--v3 .tm-editor__head{ margin-bottom:7px !important; } .tm-editor__transport:not([hidden]){ display:grid; grid-template-columns: 36px 86px minmax(0,1fr); gap:8px; align-items:center; margin-bottom:5px; } .tm-editor__play{ width:36px; height:31px; padding:0; border:1px solid #506358; border-radius:8px; background:#1b2921; color:#b8c7bd; cursor:pointer; } .tm-editor__play:disabled{ opacity:.3; cursor:not-allowed; } .tm-editor__time{ color:#91a097; font-size:9px; font-variant-numeric: tabular-nums; } .tm-editor__range{ width:100%; margin:0; accent-color:#829a8a; cursor:pointer; } .tm-editor__track{ align-items:stretch !important; min-height:86px !important; gap:3px !important; padding:4px !important; } .tm-editor__clip{ min-width:108px !important; min-height:76px !important; padding: 7px 18px 6px 6px !important; } .tm-editor__clip.is-playing{ border-color:#a3b9aa !important; box-shadow: inset 0 0 0 1px rgba(163,185,170,.30); } .tm-editor__clip-copy strong{ max-width:135px; font-size:9px !important; } .tm-editor__clip-copy small{ max-width:135px; margin-top:2px; } .tm-editor__clip-settings{ display:flex; gap:5px; margin-top:5px; } .tm-editor__mini{ display:flex; align-items:center; gap:3px; color:#66736b; font-size:7px; } .tm-editor__mini input{ width:44px; height:22px; padding:0 4px; border:1px solid #39473f; border-radius:5px; outline:none; background:#0d1410; color:#b8c3bb; font-size:8px; } .tm-editor__transition{ display:flex; flex:0 0 72px; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:72px; } .tm-editor__transition>span{ color:#67756d; font-size:11px; line-height:8px; } .tm-editor__transition select{ width:70px; height:23px; padding:0 3px; border:1px solid #405047; border-radius:5px; outline:none; background:#111913; color:#a2b0a7; font-size:7px; } .tm-editor__transition input{ width:48px; height:20px; padding:0 3px; border:1px solid #344138; border-radius:5px; outline:none; background:#0c120f; color:#87958c; text-align:center; font-size:7px; } .tm-editor__voice{ grid-template-columns: 67px minmax(0,1fr) !important; gap:5px !important; margin-top:5px !important; } .tm-editor__voice-title{ padding:5px 7px !important; } .tm-editor__wavebox{ position:relative !important; min-height:61px !important; } #tmVoiceWave{ height:39px !important; } .tm-editor__phrases{ height:20px !important; } .tm-editor__phrase{ top:2px !important; height:15px !important; line-height:11px !important; } .tm-editor__voice-cursor{ position:absolute; z-index:20; top:0; bottom:0; left:0; width:1px; pointer-events:none; background:#d36b72; } .tm-editor__voice-cursor:before{ content:""; position:absolute; top:0; left:-3px; width:7px; height:7px; border-radius:50%; background:#d36b72; } #tmSceneInspector, .tm-editor__inspector{ display:none !important; } @media(max-width:900px){ .tm-editor__track{ overflow-x:auto !important; } .tm-editor__transport:not([hidden]){ grid-template-columns: 34px 74px minmax(180px,1fr); } .tm-editor__transition{ min-width:65px; flex-basis:65px; } .tm-editor__transition select{ width:63px; } } .tm-reference-template{ margin-bottom:8px; } .tm-reference-template__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; } .tm-reference-template__head strong{ display:block; color:#d6dfd9; font-size:12px; } .tm-reference-template__head span{ display:block; margin-top:2px; color:#78857d; font-size:8px; } .tm-reference-template__head button{ flex:none; height:32px; padding:0 11px; border:1px solid #52665a; border-radius:8px; background:#17221b; color:#aab8af; font-size:9px; cursor:pointer; } .tm-reference-grid{ display:grid; grid-template-columns: repeat( auto-fit, minmax(68px,1fr) ); gap:6px; } .tm-reference-scene{ position:relative; min-width:0; overflow:hidden; border:1px solid #334138; border-radius:9px; background:#0c120f; } .tm-reference-scene video{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:#080b09; } .tm-reference-scene__meta{ position:absolute; left:4px; right:4px; bottom:4px; display:flex; align-items:center; justify-content:space-between; padding:3px 5px; border-radius:6px; background: rgba(7,12,9,.78); backdrop-filter: blur(4px); } .tm-reference-scene__meta strong{ color:#cbd6cf; font-size:8px; } .tm-reference-scene__meta span{ color:#9aaa9f; font-size:7px; } .tm-reference-template__your{ display:flex; align-items:baseline; gap:7px; margin:8px 0 5px; color:#cdd7d0; font-size:10px; font-weight:800; } .tm-reference-template__your span{ color:#6f7c74; font-size:8px; font-weight:500; } .tm-reference-template-mode #tmMontageTimeline{ margin-top:7px !important; } .tm-reference-template__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px !important; } .tm-reference-template__head strong{ font-size:11px !important; } .tm-reference-template__head span{ display:none !important; } .tm-reference-grid{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; overflow-y:hidden !important; gap:8px !important; padding:2px 2px 6px !important; scrollbar-width:thin; -webkit-overflow-scrolling:touch; } .tm-reference-grid::-webkit-scrollbar{ height:8px; } .tm-reference-grid::-webkit-scrollbar-thumb{ background:#28332d; border-radius:999px; } .tm-reference-scene{ position:relative !important; flex:0 0 92px !important; width:92px !important; min-width:92px !important; aspect-ratio:1 / 1 !important; overflow:hidden !important; border:1px solid #334138 !important; border-radius:10px !important; background:#0d120f !important; scroll-snap-align:start; } .tm-reference-scene video{ display:block !important; width:100% !important; height:100% !important; aspect-ratio:1 / 1 !important; object-fit:cover !important; background:#090d0b !important; } .tm-reference-scene__meta{ position:absolute !important; top:5px !important; left:5px !important; right:auto !important; bottom:auto !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:20px !important; height:20px !important; padding:0 6px !important; border-radius:999px !important; background:rgba(8,12,10,.82) !important; backdrop-filter:blur(4px); } .tm-reference-scene__meta strong{ color:#d7e0da !important; font-size:8px !important; line-height:1 !important; } .tm-reference-template__your{ margin:8px 0 6px !important; color:#d4ddd7 !important; font-size:10px !important; font-weight:800 !important; } .tm-reference-template__your span{ display:none !important; } .tm-template-user-strip{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; overflow-y:hidden !important; gap:8px !important; padding:2px 2px 8px !important; scrollbar-width:thin; -webkit-overflow-scrolling:touch; } .tm-template-user-strip::-webkit-scrollbar{ height:8px; } .tm-template-user-strip::-webkit-scrollbar-thumb{ background:#28332d; border-radius:999px; } .tm-reference-template-mode #tmMontageTimeline{ margin-top:6px !important; } @media(max-width:760px){ .tm-reference-scene{ flex-basis:84px !important; width:84px !important; min-width:84px !important; min-height:84px !important; height:84px !important; } } .tm-reference-grid{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; overflow-y:hidden !important; gap:8px !important; padding: 3px 2px 8px !important; scrollbar-width:thin; scrollbar-color: #334039 transparent; -webkit-overflow-scrolling: touch; } .tm-reference-grid::-webkit-scrollbar{ height:7px; } .tm-reference-grid::-webkit-scrollbar-thumb{ border-radius:999px; background:#334039; } .tm-reference-scene{ position:relative !important; flex: 0 0 142px !important; width: 142px !important; min-width: 142px !important; height: 142px !important; min-height: 142px !important; aspect-ratio: 1 / 1 !important; box-sizing: border-box !important; overflow: hidden !important; border-radius: 11px !important; } .tm-reference-scene{ border: 1px solid #36443b !important; background: #0b110e !important; } .tm-reference-scene video{ display:block !important; width: 100% !important; height: 100% !important; max-height: none !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; } .tm-reference-scene__meta{ position:absolute !important; z-index:10 !important; top:7px !important; left:7px !important; right:auto !important; bottom:auto !important; display:flex !important; align-items:center !important; justify-content:center !important; min-width: 23px !important; height: 23px !important; padding: 0 7px !important; border-radius: 999px !important; background: rgba(8,12,10,.82) !important; } .tm-reference-scene__meta strong{ color: #e3e9e5 !important; font-size: 9px !important; font-weight: 800 !important; } .tm-reference-scene__meta span{ display:none !important; } .tm-hidden-play-range{ display: none !important; } .tm-editor__transport:not([hidden]){ display:grid !important; grid-template-columns: 38px 84px minmax(0,1fr) !important; align-items:center !important; gap: 9px !important; margin: 5px 0 7px !important; } .tm-editor__transport .tm-editor__wavebox{ position:relative !important; width: 100% !important; min-width: 0 !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; border: 1px solid #34423a !important; border-radius: 8px !important; background: #0a100d !important; overflow: hidden !important; cursor: ew-resize !important; } .tm-editor__transport #tmVoiceWave{ width: 100% !important; height: 31px !important; } .tm-editor__transport .tm-editor__phrases{ bottom: 0 !important; height: 15px !important; } .tm-editor__bottom-actions{ display:flex !important; grid-template-columns: none !important; align-items:center !important; justify-content:flex-end !important; gap: 8px !important; margin: 7px 0 0 !important; padding: 0 !important; } .tm-editor__bottom-actions .tm-editor__actions{ display:flex !important; align-items:center !important; justify-content:flex-end !important; gap: 8px !important; width: 100% !important; } .tm-editor__bottom-actions .tm-editor__actions button{ min-width: 150px !important; height: 34px !important; border-radius: 8px !important; } .tm-editor__head{ min-height: 28px !important; } @media(max-width:760px){ .tm-reference-scene{ flex-basis: 118px !important; width: 118px !important; min-width: 118px !important; height: 118px !important; min-height: 118px !important; } } .tm-reference-scene{ flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; height: 112px !important; min-height: 112px !important; aspect-ratio: 1 / 1 !important; } .tm-reference-template{ margin-bottom: 4px !important; } .tm-reference-template__head{ margin-bottom: 4px !important; } .tm-reference-template__your{ margin: 5px 0 4px !important; } .tm-reference-template-mode #tmMontageTimeline{ margin-top: 4px !important; } .tm-build-header-v5{ display:flex !important; align-items:center !important; min-height: 66px !important; gap: 12px !important; padding-top: 8px !important; padding-bottom: 8px !important; } .tm-header-actions-v5{ display:flex; align-items:center; gap: 7px; margin-left: auto; min-width: 0; } .tm-header-actions-v5 .tm-header-action-v5{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width: 118px !important; max-width: none !important; min-height: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 13px !important; border-radius: 9px !important; white-space: nowrap !important; font-size: 10px !important; line-height: 1 !important; box-sizing: border-box !important; } .tm-header-actions-v5 .is-create{ min-width: 108px !important; border-color: #617c68 !important; background: #607d64 !important; color: #071009 !important; font-weight: 900 !important; } .tm-header-actions-v5 .is-scenario, .tm-header-actions-v5 .is-voice, .tm-header-actions-v5 .is-music{ background: #111b15 !important; border-color: #43564a !important; color: #b7c3bb !important; } .tm-header-actions-v5 label{ cursor: pointer; } @media(max-width:1200px){ .tm-header-actions-v5 .tm-header-action-v5{ min-width: 96px !important; padding: 0 8px !important; font-size: 8px !important; } } .tm-reference-template-mode .tm-build__side{ padding: 14px !important; overflow: hidden !important; background: #090f0c !important; } .tm-reference-template-mode .tm-build__side-inner{ display:flex !important; flex-direction:column !important; align-items:center !important; gap: 10px !important; height: 100% !important; } .tm-reference-template-mode .tm-build__side .tm-build__voiceover, .tm-reference-template-mode .tm-build__side .tm-build__music-head, .tm-reference-template-mode .tm-build__side .tm-build__audio-info{ display: none !important; } .tm-live-preview{ width: 100%; max-width: 252px; margin: 0 auto; padding: 0; } .tm-live-preview__head{ display:flex; align-items:center; justify-content:space-between; gap: 8px; margin-bottom: 8px; } .tm-live-preview__head strong{ display:block; color: #dce5df; font-size: 12px; font-weight: 850; } .tm-live-preview__head span{ display:block; margin-top: 1px; color: #69786f; font-size: 8px; } .tm-live-preview__scene{ display:flex; align-items:center; justify-content:center; min-width: 46px; height: 26px; padding: 0 8px; border: 1px solid #35463b; border-radius: 8px; background: #101913; color: #9dacA2; font-size: 9px; font-variant-numeric: tabular-nums; } .tm-live-preview__stage{ position:relative; width: 100%; aspect-ratio: 9 / 16; max-height: calc(100vh - 235px); overflow: hidden; border: 1px solid #33453a; border-radius: 15px; background: #050806; box-shadow: 0 12px 36px rgba(0,0,0,.32); } .tm-live-preview__media{ position:absolute; inset: 0; display:block; width: 100%; height: 100%; object-fit: cover; background: #050806; } .tm-live-preview__empty{ position:absolute; z-index:2; inset: 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 7px; color: #68776e; text-align:center; } .tm-live-preview__empty span{ display:flex; align-items:center; justify-content:center; width: 44px; height: 44px; border: 1px solid #34443a; border-radius: 50%; background: #111a14; color: #8da095; font-size: 17px; } .tm-live-preview__empty strong{ font-size: 9px; } .tm-live-preview__badge{ position:absolute; z-index:10; top: 9px; left: 9px; display:inline-flex; align-items:center; height: 24px; padding: 0 9px; border: 1px solid rgba(255,255,255,.10); border-radius: 999px; background: rgba(8,13,10,.80); backdrop-filter: blur(8px); color: #c6d0ca; font-size: 8px; font-weight: 750; } .tm-live-preview__badge.is-user{ border-color: rgba(130,170,140,.35); background: rgba(25,55,32,.84); color: #b9e1c1; } .tm-live-preview__foot:not([hidden]){ display:flex; align-items:center; justify-content:space-between; gap: 8px; margin-top: 7px; color: #627168; font-size: 7px; } #tmLivePreviewTime{ color: #9baaa1; font-size: 9px; font-variant-numeric: tabular-nums; } .tm-reference-template-mode #tmBuildStatus{ width: 100%; max-width: 252px; margin: 0 auto; } .tm-reference-template-mode #tmBuildDownload, .tm-reference-template-mode #tmBuildReplay{ width: 100%; max-width: 252px; } @media(max-width:1100px){ .tm-live-preview{ max-width: 210px; } .tm-live-preview__stage{ max-height: calc(100vh - 225px); } } .tm-reference-template-mode .tm-build__intro{ display:none !important; } .tm-reference-template-mode .tm-build__content{ padding-top:8px !important; } .tm-reference-template-mode .tm-reference-template{ margin-top:0 !important; } .tm-editor__head--actions{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; min-height:36px !important; margin-bottom:6px !important; } .tm-editor__head--actions > div:first-child{ min-width:0 !important; } .tm-editor__actions--head{ display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; width:auto !important; margin:0 0 0 auto !important; padding:0 !important; } .tm-editor__actions--head button{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:142px !important; height:32px !important; min-height:32px !important; margin:0 !important; padding:0 12px !important; border-radius:8px !important; white-space:nowrap !important; font-size:9px !important; line-height:1 !important; } .tm-editor__bottom-actions{ min-height:0 !important; margin:0 !important; padding:0 !important; } .tm-editor__voice:empty{ display:none !important; } #tmBuildReel{ --tm-green:#7fe969; --tm-green-strong:#91f276; --tm-green-border:#367b3b; --tm-green-border-soft:#294f2d; --tm-green-bg:#102416; --tm-green-bg-hover:#17331e; --tm-green-fill:#62875c; } .tm-header-actions-v5 .tm-header-action-v5{ border: 1px solid var(--tm-green-border) !important; background: var(--tm-green-bg) !important; color: var(--tm-green) !important; } .tm-header-actions-v5 .tm-header-action-v5:hover{ border-color: var(--tm-green) !important; background: var(--tm-green-bg-hover) !important; color: var(--tm-green-strong) !important; } .tm-header-actions-v5 .tm-header-action-v5.is-create{ border-color: #698f62 !important; background: var(--tm-green-fill) !important; color: #081009 !important; font-weight: 900 !important; } .tm-header-actions-v5 .tm-header-action-v5.is-create:hover{ background: #71996a !important; border-color: #8fba85 !important; } .tm-header-actions-v5 .tm-header-action-v5:disabled, .tm-header-actions-v5 .tm-header-action-v5[aria-disabled="true"]{ opacity: .42 !important; } .tm-editor__actions--head button{ border: 1px solid var(--tm-green-border) !important; background: var(--tm-green-bg) !important; color: var(--tm-green) !important; } .tm-editor__actions--head button:hover{ border-color: var(--tm-green) !important; background: var(--tm-green-bg-hover) !important; color: var(--tm-green-strong) !important; } .tm-editor__actions--head button:disabled{ opacity: .38 !important; } .tm-editor__play{ border-color: var(--tm-green-border) !important; background: var(--tm-green-bg) !important; color: var(--tm-green) !important; } .tm-editor__play:hover{ border-color: var(--tm-green) !important; background: var(--tm-green-bg-hover) !important; } .tm-live-preview__scene{ border-color: var(--tm-green-border) !important; background: var(--tm-green-bg) !important; color: var(--tm-green) !important; } .tm-live-preview__badge{ border: 1px solid var(--tm-green-border) !important; background: rgba(16,36,22,.90) !important; color: var(--tm-green) !important; } .tm-live-preview__badge.is-user{ border-color: var(--tm-green) !important; background: rgba(25,58,31,.94) !important; color: var(--tm-green-strong) !important; } .tm-editor__transition select, .tm-editor__transition input{ border-color: var(--tm-green-border-soft) !important; background: #0c1810 !important; color: #a9cfa6 !important; } .tm-editor__transition select:hover, .tm-editor__transition input:hover, .tm-editor__transition select:focus, .tm-editor__transition input:focus{ border-color: var(--tm-green-border) !important; outline: none !important; } #tmBuildReel, #tmBuildReel strong, #tmBuildReel span, #tmBuildReel small, #tmBuildReel p, #tmBuildReel h1, #tmBuildReel h2, #tmBuildReel h3, #tmBuildReel h4, #tmBuildReel button, #tmBuildReel select, #tmBuildReel input, #tmBuildReel label{ color:#ffffff !important; } #tmBuildReel input::placeholder{ color:rgba(255,255,255,.62) !important; } .tm-reference-template__head strong, .tm-reference-template__your{ display:block !important; margin:0 !important; padding:0 !important; color:#ffffff !important; font-family:inherit !important; font-size:11px !important; font-weight:800 !important; line-height:14px !important; letter-spacing:0 !important; } .tm-reference-template__head span, .tm-reference-template__your span{ display:none !important; } .tm-reference-template__head{ min-height:14px !important; margin:0 0 7px 0 !important; padding:0 !important; } .tm-reference-template__your{ min-height:14px !important; margin:8px 0 7px 0 !important; padding:0 !important; } .tm-reference-grid{ margin-left:0 !important; margin-right:0 !important; } .tm-header-actions-v5 .tm-header-action-v5, .tm-editor__actions--head button, .tm-editor__play{ color:#ffffff !important; } .tm-editor__transition select, .tm-editor__transition input, .tm-editor__mini input, .tm-editor__time, .tm-editor__summary, .tm-editor__clip-copy strong, .tm-editor__clip-copy span, .tm-editor__clip-copy small{ color:#ffffff !important; } .tm-live-preview__head strong, .tm-live-preview__head span, .tm-live-preview__badge, .tm-live-preview__foot, #tmLivePreviewTime{ color:#ffffff !important; } #tmBuildReel .tm-editor__clip-number{ display:none !important; } #tmBuildReel .tm-editor__clip-copy span{ display:none !important; } #tmBuildReel .tm-editor__grip{ display:none !important; } #tmBuildReel .tm-editor__clip{ padding-right:14px !important; } #tmBuildReel .tm-editor__clip-copy{ gap:0 !important; } #tmBuildReel .tm-editor__clip-copy strong{ margin:0 !important; color:#ffffff !important; } #tmBuildReel #tmTimelineTrack .tm-editor__clip-number{ display:none !important; } #tmBuildReel #tmTimelineTrack .tm-editor__clip-copy > small{ display:none !important; } #tmBuildReel #tmTimelineTrack .tm-editor__grip{ display:flex !important; position:absolute !important; right:8px !important; top:50% !important; transform: translateY(-50%) !important; align-items:center !important; justify-content:center !important; color:#ffffff !important; opacity:.85 !important; font-size:14px !important; line-height:1 !important; } #tmBuildReel #tmTimelineTrack .tm-editor__clip{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; padding: 10px 24px 10px 12px !important; text-align:center !important; } #tmBuildReel #tmTimelineTrack .tm-editor__clip-copy{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; width:100% !important; gap:8px !important; text-align:center !important; } #tmBuildReel #tmTimelineTrack .tm-editor__clip-copy > strong{ display:block !important; width:100% !important; margin:0 !important; color:#ffffff !important; text-align:center !important; font-size:10px !important; line-height:1.1 !important; } #tmBuildReel #tmTimelineTrack .tm-editor__clip-settings{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; margin:0 !important; } #tmBuildReel #tmTimelineTrack .tm-editor__mini{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:7px !important; width:auto !important; margin:0 auto !important; color:#ffffff !important; } #tmBuildReel #tmTimelineTrack .tm-editor__mini > span{ display:inline-block !important; flex:0 0 auto !important; margin:0 !important; color:#ffffff !important; font-size:9px !important; font-weight:600 !important; line-height:24px !important; white-space:nowrap !important; } #tmBuildReel #tmTimelineTrack .tm-editor__mini > input{ display:block !important; flex:0 0 58px !important; width:58px !important; height:28px !important; margin:0 !important; padding:0 7px !important; border-radius:7px !important; color:#ffffff !important; text-align:left !important; font-size:9px !important; font-weight:600 !important; line-height:28px !important; } #tmBuildReel .tm-preview-progress{ width:100%; height:4px; margin-top:6px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.10); box-shadow:inset 0 0 0 1px rgba(122,255,92,.12); } #tmBuildReel .tm-preview-progress__bar{ width:0%; height:100%; border-radius:999px; background:linear-gradient(90deg,#53d769 0%,#7CFF5C 100%); box-shadow:0 0 10px rgba(124,255,92,.25); transition:width .12s linear; } .tm-live-preview__foot:not([hidden]){ display:grid !important; grid-template-columns:42px minmax(0,1fr) !important; align-items:center !important; gap:9px !important; width:100% !important; margin-top:8px !important; } #tmLivePreviewTime{ color:#ffffff !important; font-size:9px !important; font-weight:600 !important; font-variant-numeric:tabular-nums; } .tm-live-preview__progress{ position:relative !important; width:100% !important; height:5px !important; overflow:hidden !important; border-radius:999px !important; background:rgba(255,255,255,.15) !important; cursor:pointer; } .tm-live-preview__progress-bar{ width:0; height:100% !important; border-radius:999px !important; background:#72e766 !important; box-shadow: 0 0 7px rgba(114,231,102,.35); transition:width .10s linear; } #tmLivePreviewBadge, .tm-live-preview__badge{ display:none !important; } .tm-live-preview__foot:not([hidden]){ position:relative !important; display:block !important; width:100% !important; height:30px !important; margin:5px 0 0 !important; padding:0 !important; } .tm-live-preview__progress{ position:absolute !important; z-index:1 !important; left:0 !important; right:0 !important; top:13px !important; width:100% !important; height:4px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border-radius:999px !important; background: rgba(255,255,255,.20) !important; cursor:pointer !important; } .tm-live-preview__progress-bar{ width:0; height:100% !important; border-radius:999px !important; background: #76e86a !important; box-shadow: 0 0 7px rgba(118,232,106,.38); transition: width .08s linear; } .tm-live-preview__play{ position:absolute !important; z-index:3 !important; left:0 !important; top:1px !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; width:27px !important; height:26px !important; margin:0 !important; padding:0 6px 0 0 !important; border:0 !important; background: #090f0c !important; color: #ffffff !important; font-size:14px !important; font-weight:800 !important; line-height:1 !important; cursor:pointer !important; } .tm-live-preview__time, #tmLivePreviewTime{ position:absolute !important; z-index:3 !important; right:0 !important; top:5px !important; display:block !important; margin:0 !important; padding-left:7px !important; background: #090f0c !important; color: #ffffff !important; font-size:9px !important; font-weight:600 !important; line-height:18px !important; font-variant-numeric: tabular-nums; } .tm-preview-progress, #tmLivePreviewBadge, .tm-live-preview__badge{ display:none !important; } .tm-live-preview__head > div > span{ display:none !important; } #tmBuildReel #tmTimelineTrack .tm-editor__clip .tm-editor__mini input[type="number"]{ width:52px !important; min-width:52px !important; max-width:52px !important; padding-left:7px !important; padding-right:7px !important; box-sizing:border-box !important; text-align:center !important; } #tmBuildReel #tmTimelineTrack .tm-editor__clip .tm-editor__mini input[type="number"]::-webkit-inner-spin-button, #tmBuildReel #tmTimelineTrack .tm-editor__clip .tm-editor__mini input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance:none !important; appearance:none !important; margin:0 !important; } #tmBuildReel #tmTimelineTrack .tm-editor__clip .tm-editor__mini input[type="number"]{ -moz-appearance:textfield !important; appearance:textfield !important; } #tmBuildReel #tmTimelineTrack .tm-editor__clip .tm-editor__clip-settings{ padding-right:12px !important; } #tmBuildReel #tmTimelineTrack .tm-editor__grip{ display:flex !important; } #tmBuildReel [data-timeline].tm-scene-selected{ border-color: #7dff78; box-shadow: 0 0 0 1px rgba(125,255,120,.62), 0 0 18px rgba(72,214,104,.14); } /* ========================================================== CANONICAL USER MATERIALS ========================================================== */ #tmBuildSlots { display:flex; align-items:flex-start; gap:var(--tm-user-slot-gap, 10px); width:100%; padding:8px 0 10px var(--tm-user-slot-left, 0px); overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:#315c40 transparent; } #tmBuildSlots::-webkit-scrollbar { height:5px; } #tmBuildSlots::-webkit-scrollbar-thumb { background:#315c40; border-radius:999px; } #tmBuildSlots > .tm-build__slot { position:relative; flex:0 0 var(--tm-user-slot-width, 100px); width:var(--tm-user-slot-width, 100px); aspect-ratio:9 / 16; padding:0; overflow:hidden; border:1px dashed #315c40; border-radius:11px; background:#07100b; box-sizing:border-box; } #tmBuildSlots > .tm-build__slot.is-filled { border-style:solid; } #tmBuildSlots > .tm-build__slot.is-dragging { opacity:.48; } #tmBuildSlots > .tm-build__slot.is-drag-over { border-color:#7dff78; box-shadow: 0 0 0 1px rgba(125,255,120,.45); } #tmBuildSlots .tm-build__drop { position:absolute; inset:0; width:100%; height:100%; padding:0; overflow:hidden; display:flex; align-items:center; justify-content:center; border:0; border-radius:10px; background:#06100b; color:#ffffff; cursor:pointer; } #tmBuildSlots .tm-build__drop img, #tmBuildSlots .tm-build__drop video { width:100%; height:100%; display:block; object-fit:contain; object-position:center; background:#000000; } #tmBuildSlots .tm-slot-number { position:absolute; z-index:4; top:6px; left:6px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(124,255,119,.72); border-radius:50%; background:#113b24; color:#ffffff; font-size:12px; font-weight:800; line-height:1; pointer-events:none; } #tmBuildSlots .tm-slot-plus { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border: 1px solid #39784d; border-radius:10px; background:#123b24; color:#ffffff; font-size:28px; font-weight:400; line-height:1; } #tmBuildSlots .tm-slot-remove { position:absolute; z-index:5; top:6px; right:6px; width:24px; height:24px; padding:0; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(255,255,255,.22); border-radius:50%; background: rgba(4,10,7,.78); color:#ffffff; font-size:17px; line-height:1; cursor:pointer; } #tmBuildSlots > .tm-build__slot.tm-scene-selected { border-color:#7dff78; box-shadow: 0 0 0 1px rgba(125,255,120,.62), 0 0 18px rgba(72,214,104,.14); } /* ========================================================== CANONICAL VOICE DELETE ========================================================== */ #tmBuildReel #tmDeleteVoice { flex:0 0 32px; width:32px; min-width:32px; max-width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:7px; background:transparent; color:#ffffff; box-shadow:none; cursor:pointer; opacity:.86; } #tmBuildReel #tmDeleteVoice:hover { color:#7dff78; background: rgba(125,255,120,.06); opacity:1; } #tmBuildReel #tmDeleteVoice:disabled { opacity:.28; cursor:default; } #tmBuildReel #tmDeleteVoice svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; } /* TM_CLEAN_DELETE_V1 */ /* * Верхняя корзина: * чистая SVG-иконка без плашки. */ #tmBuildClearAll.tm-build__clear-all{ flex:0 0 auto !important; width:32px !important; min-width:32px !important; max-width:32px !important; height:32px !important; min-height:32px !important; margin:0 !important; padding:6px !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:#91a19d !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; } #tmBuildClearAll.tm-build__clear-all:hover{ color:#baffaa !important; background:transparent !important; } #tmBuildClearAll svg{ width:18px !important; height:18px !important; fill:none !important; stroke:currentColor !important; stroke-width:1.8 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } /* * Нижняя корзина таймлайна: * тоже только голая иконка. */ #tmDeleteVoice.tm-editor__trash{ flex:0 0 32px !important; width:32px !important; min-width:32px !important; max-width:32px !important; height:32px !important; min-height:32px !important; padding:6px !important; margin:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:#91a19d !important; } #tmDeleteVoice.tm-editor__trash:hover{ color:#baffaa !important; background:transparent !important; } #tmDeleteVoice.tm-editor__trash svg{ width:18px !important; height:18px !important; fill:none !important; stroke:currentColor !important; stroke-width:1.8 !important; } /* * Пустая единственная сцена: * оставляем компактной. */ #tmTimelineTrack > .tm-editor__clip:only-child{ flex-grow:0 !important; } /* TM_RIGHT_PREVIEW_COMPACT_V1 */ /* * Чуть уменьшаем только вертикальный Reel-preview. * Колонка, заголовок, controls и верхние кнопки не меняются. */ #tmLivePreviewStage.tm-live-preview__stage { width: 87% !important; margin-left: auto !important; margin-right: auto !important; } /* * Кнопка просмотра остается полноценной, * но занимает меньше вертикального места. */ #tmBuildReplay.tm-build__replay { height: 32px !important; min-height: 32px !important; margin-top: 4px !important; padding: 0 10px !important; font-size: 11px !important; border-radius: 9px !important; } /* * Ссылка результата остается отдельной строкой * непосредственно над кнопкой просмотра. */ #tmBuildDownload.tm-build__download { margin-bottom: 2px !important; } /* TM_MOBILE_CAPCUT_CSS_V1 */ #tmMobileCapcutUi { display:none; } @media(max-width:760px){ body.tm-auto-open{ overflow:hidden !important; background:#101010 !important; } #tmBuildReel.tm-build{ padding:0 !important; align-items:stretch !important; justify-content:stretch !important; background:#101010 !important; backdrop-filter:none !important; } #tmBuildReel .tm-build__card{ width:100vw !important; max-width:none !important; height:100dvh !important; max-height:none !important; display:grid !important; grid-template-rows: 64px minmax(0,1fr) !important; overflow:hidden !important; border:0 !important; border-radius:0 !important; background:#101010 !important; box-shadow:none !important; } /* ===== CAPCUT TOP ===== */ #tmBuildReel .tm-build__header{ position:relative !important; z-index:30 !important; height:64px !important; min-height:64px !important; display:flex !important; align-items:center !important; padding:0 14px !important; border:0 !important; background:#101010 !important; } #tmBuildReel .tm-build__title, #tmBuildReel .tm-header-actions-v5, #tmBuildReel #tmBuildClearAll{ display:none !important; } #tmBuildReel #tmBuildClose{ width:46px !important; height:46px !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:#f4f4f4 !important; font-size:38px !important; font-weight:300 !important; } #tmMobileCapcutUi{ display:block; } .tm-mobile-top{ position:fixed; z-index:1000008; top:0; right:12px; height:64px; display:flex; align-items:center; gap:10px; } #tmMobileResolution, #tmMobileExport{ height:42px; border:0; border-radius:10px; font:inherit; font-size:15px; font-weight:650; } #tmMobileResolution{ padding:0 15px; background:#282828; color:#f1f1f1; } #tmMobileExport{ padding:0 18px; background:#19c4d8; color:#061012; } /* ===== PREVIEW + TIMELINE ===== */ #tmBuildReel .tm-build__body{ min-height:0 !important; display:grid !important; grid-template-columns: minmax(0,1fr) !important; grid-template-rows: minmax(300px,50dvh) minmax(0,1fr) !important; overflow:hidden !important; background:#101010 !important; } #tmBuildReel .tm-build__side{ grid-column:1 !important; grid-row:1 !important; min-height:0 !important; overflow:hidden !important; padding:4px 0 0 !important; border:0 !important; background:#101010 !important; } #tmBuildReel .tm-build__side-inner{ width:100% !important; height:100% !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:0 !important; } #tmBuildReel .tm-build__side-inner > :not(.tm-live-preview){ display:none !important; } #tmBuildReel .tm-live-preview{ width:100% !important; max-width:none !important; height:100% !important; display:flex !important; flex-direction:column !important; align-items:center !important; padding:0 !important; } #tmBuildReel .tm-live-preview__head{ display:none !important; } #tmBuildReel #tmLivePreviewStage.tm-live-preview__stage{ flex:1 1 auto !important; width:auto !important; height:calc(100% - 38px) !important; max-width:calc(100vw - 82px) !important; max-height:none !important; aspect-ratio:9 / 16 !important; margin:0 auto !important; border:0 !important; border-radius:0 !important; background:#000 !important; box-shadow:none !important; } #tmBuildReel .tm-live-preview__media{ object-fit:cover !important; } #tmBuildReel .tm-live-preview__foot:not([hidden]){ position:relative !important; flex:0 0 38px !important; width:calc(100% - 34px) !important; height:38px !important; margin:0 auto !important; display:block !important; } #tmBuildReel .tm-live-preview__progress{ top:18px !important; left:34px !important; right:42px !important; width:auto !important; height:3px !important; background:#4b4b4b !important; } #tmBuildReel .tm-live-preview__play{ left:0 !important; top:7px !important; width:25px !important; height:25px !important; border:0 !important; background:transparent !important; color:#fff !important; font-size:19px !important; } #tmBuildReel .tm-live-preview__time, #tmBuildReel #tmLivePreviewTime{ top:10px !important; right:0 !important; color:#f2f2f2 !important; font-size:10px !important; } #tmBuildReel .tm-build__content{ position:relative !important; grid-column:1 !important; grid-row:2 !important; min-width:0 !important; min-height:0 !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; padding:0 0 78px !important; background:#151515 !important; } #tmBuildReel .tm-build__intro, #tmBuildReel .tm-build__personal, #tmBuildReel .tm-build__scenario-v3{ display:none !important; } /* ===== ORIGINAL TEMPLATE STRIP ===== */ #tmBuildReel #tmReferenceTemplate{ flex:0 0 auto !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; } #tmBuildReel .tm-reference-template__head{ display:none !important; } #tmBuildReel .tm-reference-grid{ display:flex !important; flex:0 0 76px !important; width:100% !important; height:76px !important; gap:1px !important; margin:0 !important; padding: 4px calc(50vw - 34px) !important; overflow-x:auto !important; overflow-y:hidden !important; background:#171717 !important; scrollbar-width:none !important; -webkit-overflow-scrolling:touch; } #tmBuildReel .tm-reference-grid::-webkit-scrollbar{ display:none; } #tmBuildReel .tm-reference-scene{ flex:0 0 68px !important; width:68px !important; min-width:68px !important; height:68px !important; min-height:68px !important; overflow:hidden !important; border:0 !important; border-radius:2px !important; background:#222 !important; } #tmBuildReel .tm-reference-scene video{ width:100% !important; height:100% !important; object-fit:cover !important; } #tmBuildReel .tm-reference-scene__meta{ display:none !important; } /* * Пока исходный шаблон активен — * показываем его как главный видеоряд. */ #tmBuildReel.tm-reference-template-mode #tmBuildSlots{ display:none !important; } /* ===== USER MEDIA STRIP ===== */ #tmBuildReel #tmBuildSlots{ --tm-user-slot-left:0px !important; --tm-user-slot-width:68px !important; flex:0 0 76px !important; width:100% !important; height:76px !important; display:flex !important; flex-wrap:nowrap !important; align-items:center !important; gap:1px !important; margin:0 !important; padding: 4px calc(50vw - 34px) !important; overflow-x:auto !important; overflow-y:hidden !important; background:#171717 !important; scrollbar-width:none !important; -webkit-overflow-scrolling:touch; } #tmBuildReel #tmBuildSlots::-webkit-scrollbar{ display:none; } #tmBuildReel #tmBuildSlots > .tm-build__slot{ flex:0 0 68px !important; width:68px !important; min-width:68px !important; height:68px !important; min-height:68px !important; margin:0 !important; overflow:hidden !important; border:0 !important; border-radius:2px !important; background:#242424 !important; } #tmBuildReel #tmBuildSlots > .tm-build__slot.tm-scene-selected{ box-shadow: inset 0 0 0 2px #fff !important; } #tmBuildReel #tmBuildSlots .tm-slot-number{ display:none !important; } #tmBuildReel #tmBuildSlots .tm-build__drop img, #tmBuildReel #tmBuildSlots .tm-build__drop video{ width:100% !important; height:100% !important; object-fit:cover !important; } /* ===== CURRENT AUDIO TRACK ===== */ #tmBuildReel #tmMontageTimeline{ flex:1 1 auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border:0 !important; border-radius:0 !important; background:#151515 !important; box-shadow:none !important; } #tmBuildReel #tmMontageTimeline .tm-editor__head, #tmBuildReel #tmMontageTimeline .tm-editor__summary, #tmBuildReel #tmMontageTimeline #tmTimelineTrack, #tmBuildReel #tmMontageTimeline .tm-editor__bottom-actions, #tmBuildReel #tmMontageTimeline .tm-editor__voice{ display:none !important; } #tmBuildReel #tmMontageTimeline .tm-editor__transport:not([hidden]){ display:grid !important; grid-template-columns: 34px 70px minmax(0,1fr) !important; align-items:center !important; gap:8px !important; margin:6px 12px 0 !important; padding:0 !important; } #tmBuildReel #tmMontageTimeline .tm-editor__play{ width:34px !important; height:30px !important; border:0 !important; background:transparent !important; color:#f2f2f2 !important; } #tmBuildReel #tmMontageTimeline .tm-editor__time{ color:#c8c8c8 !important; font-size:10px !important; } #tmBuildReel #tmMontageTimeline .tm-editor__transport .tm-editor__wavebox{ height:48px !important; min-height:48px !important; border:0 !important; border-radius:3px !important; background:#262626 !important; } /* ===== CENTER PLAYHEAD ===== */ .tm-mobile-playhead{ position:fixed; z-index:1000006; left:50%; top:calc(64px + 50dvh + 2px); bottom:78px; width:2px; transform: translateX(-1px); pointer-events:none; background:#f4f4f4; } .tm-mobile-playhead::before{ content:""; position:absolute; top:-4px; left:-3px; width:8px; height:8px; border-radius:50%; background:#f4f4f4; } /* ===== BOTTOM TOOLBAR ===== */ .tm-mobile-toolbar{ position:fixed; z-index:1000009; left:0; right:0; bottom:0; height:78px; display:flex; align-items:center; justify-content:space-around; padding: 4px 6px max( 4px, env(safe-area-inset-bottom) ); border-top: 1px solid #292929; background:#111; } .tm-mobile-toolbar button{ width:20%; min-width:0; height:68px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0 2px; border:0; background:transparent; color:#e9e9e9; font:inherit; } .tm-mobile-toolbar button b{ height:28px; display:flex; align-items:center; justify-content:center; font-size:27px; font-weight:400; } .tm-mobile-toolbar button span{ font-size:10px; font-weight:500; white-space:nowrap; } /* ===== SOUND SHEET ===== */ .tm-mobile-sheet{ position:fixed; z-index:1000010; left:50%; bottom:84px; width:min( 290px, calc(100vw - 32px) ); transform: translateX(-50%); display:flex; gap:8px; padding:8px; border: 1px solid #333; border-radius:12px; background:#242424; } .tm-mobile-sheet[hidden]{ display:none !important; } .tm-mobile-sheet button{ flex:1; height:42px; border:0; border-radius:8px; background:#333; color:#f5f5f5; font:inherit; font-size:12px; font-weight:650; } /* ===== COMPRESSION ===== */ .tm-mobile-compression{ position:fixed; z-index:1000020; inset:0; display:flex; align-items:center; justify-content:center; } .tm-mobile-compression[hidden]{ display:none !important; } .tm-mobile-compression__shade{ position:absolute; inset:0; background: rgba(0,0,0,.62); } .tm-mobile-compression__box{ position:relative; z-index:2; width:220px; min-height:165px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; padding:24px 18px; background:#282828; color:#ededed; } .tm-mobile-compression__icon{ color:#4ccac1; font-size:48px; line-height:1; } #tmMobileCompressionText{ width:100%; overflow:hidden; color:#eee; font-size:16px; text-align:center; text-overflow:ellipsis; white-space:nowrap; } /* * Старые desktop-кнопки остаются * функциональными в DOM. * Mobile UI просто вызывает их. */ #tmBuildReel #tmBuildCreate, #tmBuildReel #tmBuildScenarioBtn, #tmBuildReel #tmBuildVoiceoverBtn, #tmBuildReel #tmBuildAudioBtn, #tmBuildReel #tmBuildReplay, #tmBuildReel #tmBuildDownload{ display:none !important; } } /* ========================================================== TM_TRACK_WORKSPACE_CSS_V3 ========================================================== */ .tm-editor__audio-track{ position:relative; display:grid; grid-template-columns:92px minmax(0,1fr); align-items:stretch; width:100%; min-width:0; min-height:54px; margin:5px 0; overflow:hidden; border:1px solid rgba(255,255,255,.10); border-radius:8px; background:#111816; } .tm-editor__audio-track-title{ display:flex; flex-direction:column; justify-content:center; min-width:0; padding:6px 8px; border-right: 1px solid rgba(255,255,255,.08); } .tm-editor__audio-track-title strong{ color:#fff; font-size:10px; } .tm-editor__audio-track-title span{ display:block; margin-top:3px; overflow:hidden; color:rgba(255,255,255,.68); font-size:8px; text-overflow:ellipsis; white-space:nowrap; } .tm-editor__audio-wave{ position:relative; display:flex; align-items:center; gap:1px; min-width:0; height:52px; padding:5px 4px; overflow:hidden; color:#55d8c9; } .tm-editor__audio-wave > i{ display:block; flex:1 1 0; min-width:1px; max-width:4px; border-radius:2px; background:currentColor; opacity:.82; } .tm-editor__audio-loading{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.55); font-size:9px; } .tm-editor__audio-cursor{ position:absolute; z-index:20; top:0; bottom:0; left:0; width:2px; pointer-events:none; background:#fff; } @media (max-width:760px){ #tmBuildReel .tm-build__content{ overflow-y:auto !important; overflow-x:hidden !important; padding-bottom:92px !important; -webkit-overflow-scrolling:touch; } #tmBuildReel #tmMontageTimeline{ display:flex !important; flex-direction:column !important; flex:0 0 auto !important; width:100% !important; min-width:0 !important; min-height:250px !important; max-height:none !important; margin:0 !important; padding:5px 0 10px !important; overflow:visible !important; border:0 !important; background:#141414 !important; } #tmBuildReel #tmMontageTimeline .tm-editor__head{ display:flex !important; width:calc(100% - 24px) !important; min-height:30px !important; margin:0 12px 4px !important; } #tmBuildReel #tmMontageTimeline .tm-editor__transport:not([hidden]){ display:grid !important; grid-template-columns: 34px 72px minmax(0,1fr) !important; align-items:center !important; width:calc(100% - 24px) !important; min-height:38px !important; margin:0 12px 4px !important; gap:6px !important; } #tmBuildReel #tmMontageTimeline .tm-editor__summary{ display:flex !important; align-items:center !important; justify-content:space-between !important; width:calc(100% - 24px) !important; margin:0 12px 3px !important; font-size:9px !important; } /* * Настоящий существующий timeline. */ #tmBuildReel #tmMontageTimeline #tmTimelineTrack{ display:flex !important; flex-wrap:nowrap !important; align-items:stretch !important; width:100% !important; min-width:0 !important; min-height:88px !important; max-height:88px !important; margin:0 !important; padding: 4px 12px 6px !important; gap:2px !important; overflow-x:auto !important; overflow-y:hidden !important; touch-action:pan-x !important; overscroll-behavior-x:contain; scrollbar-width:none !important; -webkit-overflow-scrolling:touch; background:#171717 !important; } #tmBuildReel #tmTimelineTrack::-webkit-scrollbar{ display:none !important; } #tmBuildReel #tmTimelineTrack > .tm-editor__clip{ flex:0 0 115px !important; width:115px !important; min-width:115px !important; max-width:115px !important; height:78px !important; } #tmBuildReel #tmTimelineTrack > .tm-editor__transition{ flex:0 0 34px !important; width:34px !important; min-width:34px !important; max-width:34px !important; overflow:hidden !important; } /* * Выбранный track прямо под видеорядом. */ #tmBuildReel #tmSelectedAudioTrack{ display:grid !important; grid-template-columns: 62px minmax(0,1fr) !important; width:calc(100% - 24px) !important; height:52px !important; min-height:52px !important; margin:4px 12px !important; border-radius:4px !important; } #tmBuildReel #tmSelectedAudioWave{ height:50px !important; } /* * Штатная озвучка тоже видна. */ #tmBuildReel #tmMontageTimeline .tm-editor__voice{ display:grid !important; grid-template-columns: 62px minmax(0,1fr) !important; width:calc(100% - 24px) !important; min-height:48px !important; margin:4px 12px !important; overflow:hidden !important; } /* * Убираем огромные искусственные поля slots. */ #tmBuildReel #tmBuildSlots{ padding:4px 12px !important; overflow-x:auto !important; overflow-y:hidden !important; touch-action:pan-x !important; scrollbar-width:none !important; -webkit-overflow-scrolling:touch; } #tmBuildReel #tmBuildSlots::-webkit-scrollbar{ display:none !important; } } /* ========================================================== TM_MOBILE_COMPACT_V4 ========================================================== */ @media (max-width:760px){ /* * Превью делаем компактнее, * чтобы влезали остальные блоки. */ #tmBuildReel .tm-live-preview, #tmBuildReel .tm-live-preview__stage, #tmBuildReel #tmLivePreviewStage{ width:44vw !important; max-width:180px !important; min-width:150px !important; max-height:300px !important; min-height:0 !important; margin-left:auto !important; margin-right:auto !important; } #tmBuildReel .tm-live-preview__media, #tmBuildReel #tmLivePreviewStage img, #tmBuildReel #tmLivePreviewStage video, #tmBuildReel .tm-live-preview__stage img, #tmBuildReel .tm-live-preview__stage video{ width:100% !important; height:auto !important; max-height:300px !important; object-fit:cover !important; } /* * Материалы тоже слегка компактнее. */ #tmBuildReel #tmBuildSlots{ padding:3px 10px !important; gap:6px !important; } #tmBuildReel #tmBuildSlots > *{ flex:0 0 66px !important; width:66px !important; min-width:66px !important; max-width:66px !important; } /* * Верх таймлайна компактнее. */ #tmBuildReel #tmMontageTimeline{ min-height:170px !important; padding:4px 0 6px !important; } #tmBuildReel #tmMontageTimeline .tm-editor__head{ width:calc(100% - 20px) !important; min-height:24px !important; margin:0 10px 3px !important; } #tmBuildReel #tmMontageTimeline .tm-editor__transport:not([hidden]){ width:calc(100% - 20px) !important; min-height:34px !important; margin:0 10px 3px !important; gap:5px !important; } #tmBuildReel #tmMontageTimeline .tm-editor__summary{ width:calc(100% - 20px) !important; margin:0 10px 2px !important; font-size:8px !important; } /* * Сами блоки таймлайна режем примерно вдвое. */ #tmBuildReel #tmTimelineTrack{ min-height:62px !important; max-height:62px !important; padding:3px 10px 4px !important; gap:2px !important; } #tmBuildReel #tmTimelineTrack > .tm-editor__clip{ flex:0 0 84px !important; width:84px !important; min-width:84px !important; max-width:84px !important; height:54px !important; min-height:54px !important; padding:5px !important; border-radius:10px !important; } #tmBuildReel #tmTimelineTrack > .tm-editor__transition{ flex:0 0 22px !important; width:22px !important; min-width:22px !important; max-width:22px !important; } #tmBuildReel .tm-editor__clip-copy, #tmBuildReel .tm-editor__clip-copy strong, #tmBuildReel .tm-editor__clip-copy span, #tmBuildReel .tm-editor__clip-number, #tmBuildReel .tm-editor__grip{ font-size:8px !important; line-height:1.05 !important; } #tmBuildReel .tm-editor__clip-copy strong{ font-size:9px !important; } /* * Дорожки компактнее. */ #tmBuildReel #tmSelectedAudioTrack{ height:40px !important; min-height:40px !important; margin:3px 10px !important; } #tmBuildReel #tmSelectedAudioWave{ height:38px !important; } #tmBuildReel .tm-editor__voice{ min-height:40px !important; margin:3px 10px !important; } /* * Белую палку скрываем и CSS-ом тоже. */ #tmBuildReel #tmVoiceCursor, #tmBuildReel #tmAudioCursor, #tmBuildReel .tm-editor__cursor, #tmBuildReel .tm-mobile-playhead, #tmBuildReel .tm-playhead, #tmBuildReel .tm-playhead-line, #tmBuildReel .tm-mobile-needle, #tmBuildReel .tm-mobile-playhead-line{ display:none !important; opacity:0 !important; } /* * Кнопки, которые мы программно переназначаем. */ #tmBuildReel .tm-mobile-template-action, #tmBuildReel .tm-mobile-create-action{ min-width:70px !important; } #tmBuildReel .tm-mobile-template-action svg, #tmBuildReel .tm-mobile-create-action svg{ display:block !important; margin:0 auto 2px !important; } }