tanuki-ui/dist/lib/layouts/style.css

HTML-first React component library with semantic elements, multi-OS themes, and production-ready visual node editor

.lytbase{overflow:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;touch-action:pan-y}.lytbaseE4I{display:flex;width:100%}.lytaside{position:relative;display:grid;min-width:120px;max-width:480px;height:100%;background:var(--sidebarBackground);box-sizing:border-box;box-shadow:1px 0 0 var(--sidebarBackground) inset;place-self:stretch;place-items:stretch;overflow:auto}.lytrsz{position:absolute;top:0;bottom:0;width:8px;cursor:col-resize;z-index:10;background:transparent;transition:background .2s}.lytmainTjq{display:flex;flex-direction:column;flex-grow:1}.lytbasefvK{display:flex;flex-direction:column;flex:1}.lythdr{display:grid;z-index:1;position:sticky;top:0;width:100%;height:var(--appMainToolbarHeight, 52px)}.lytmain{display:flex;flex-direction:column;flex:1}.lytautsiz{display:grid;flex-grow:1;width:100%;height:100%;overflow:hidden}.lytbody{display:grid;width:100%;height:100%}.lytbasebSr{display:grid;height:100dvh;--footerHeight: calc(var(--appMainToolbarHeight) + env(safe-area-inset-bottom));--headerHeight: calc(var(--appMainToolbarHeight) + env(safe-area-inset-top));--fullScreenHeight: calc(100dvh + env(safe-area-inset-bottom) + env(safe-area-inset-top)) }.lythdrTR2{position:fixed;top:0;left:0;z-index:2;width:100%;box-sizing:border-box;height:var(--headerHeight)}.lytmainzoo{position:relative;box-sizing:border-box;height:var(--fullScreenHeight)}.lytftr{position:fixed;bottom:0;left:0;z-index:2;width:100%;height:var(--footerHeight)}.lytctn{position:absolute;top:0;left:0;z-index:0;width:100%;min-height:100%;box-sizing:border-box;padding-top:var(--headerHeight);padding-bottom:var(--footerHeight)}.lytbaseSh4{position:relative}.lythdri1w{position:relative;padding-top:env(safe-area-inset-top);box-sizing:border-box}.lytcover{position:fixed;top:0;left:0;right:0;opacity:0;z-index:0;-webkit-user-select:none;user-select:none;pointer-events:none}.lytcover img,.lytcover video,.lytcover object{width:100%;height:100%;object-fit:cover}.lytbody7_6{z-index:1}.lytpage{position:relative}.lytline{position:absolute}.lytghost{display:block}.lytcnt{position:relative;width:100vw;max-width:100vw;height:100vh;overflow:hidden}.lytcontrols{position:fixed;top:0;left:0;right:0;width:100%;height:auto;z-index:9999;display:flex;justify-content:center;align-items:center;padding:8px 16px;background-color:var(--controlBackground, rgba(255, 255, 255, .95));border-radius:0;box-shadow:0 2px 10px #0000001a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:none!important;margin:0!important}.lytviewscnt{position:absolute;top:0;left:0;display:flex;width:auto;height:100vh;transform:translateZ(0);will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}.lytview{position:relative;flex:none;width:100vw;height:100vh;overflow-y:auto;overflow-x:hidden;transform:translateZ(0);user-select:text;-webkit-user-select:text;-webkit-overflow-scrolling:touch;contain:layout style}.lytcontrols:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:inherit;z-index:-1;border-radius:inherit}@media (prefers-reduced-motion: reduce){.lytviewscnt{transition:none!important}}.lytview *{touch-action:auto}@media (max-width: 320px){.lytcontrols{padding:4px 8px}}.pnlpnl{position:relative;width:100%;height:100%;overflow:hidden;background:var(--windowBackgroundColor, #ffffff);font-family:var(--themeDefaultFontFamily, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);font-size:13px;color:var(--textColor, #333333)}.pnlpnlcnt{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.pnlsplitcnt{position:relative;width:100%;height:100%;display:flex}.pnlpnlChild{position:relative;display:flex;flex-direction:column;overflow:hidden}.pnlsplitter{position:relative;background:var(--separatorColor, #e0e0e0);transition:background-color .15s ease;-webkit-user-select:none;user-select:none;z-index:10}.pnlsplitter:hover{background:var(--selectedContentBackgroundColor, #d0d0d0)}.pnlvtspl{width:4px;cursor:col-resize}.pnlhzspl{height:4px;cursor:row-resize}.pnlspl{background:var(--accentColor, #007acc)!important}.pnlleafcnt{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background:var(--controlColor, #f5f5f5);border:1px solid var(--separatorColor, #e0e0e0)}.pnlleafcnt.pnldrotar{border-color:var(--accentColor, #007acc);box-shadow:0 0 0 1px var(--accentColor, #007acc)}.pnltabBar{display:flex;align-items:center;background:var(--tabBarBackground, var(--controlColor, #f8f8f8));border-bottom:1px solid var(--separatorColor, #e0e0e0);padding:0;min-height:35px;overflow:hidden}.pnltabs{display:flex;flex:1;align-items:center;overflow:hidden;min-width:0}.pnltab{position:relative;display:flex;align-items:center;min-width:80px;max-width:200px;height:35px;padding:var(--controlPadding, 0 12px 0 16px);background:var(--controlColor, #efefef);border:1px solid var(--separatorColor, #e0e0e0);border-bottom:none;border-radius:var(--controlBorderRadius, 4px) var(--controlBorderRadius, 4px) 0 0;cursor:grab;-webkit-user-select:none;user-select:none;transition:transform .15s ease,opacity .15s ease,box-shadow .15s ease;margin-right:-1px;will-change:transform,opacity;font:var(--controlTextFont, normal normal 400 13px/1.23 var(--themeControlFontFamily));color:var(--controlTextColor, #333);touch-action:none}.pnltab:hover{background:var(--controlHoverBackground, #e8e8e8)}.pnltab.pnlactTab{background:var(--selectedContentBackgroundColor, #ffffff);border-color:var(--separatorColor, #e0e0e0);color:var(--selectedControlTextColor, #000);z-index:1}.pnltab.pnltabdrg{transform:scale(.95) rotate(2deg);opacity:.8;z-index:1000;cursor:grabbing!important;box-shadow:0 4px 12px #00000026;pointer-events:auto}.pnltab.pnltabdraove{transform:translate(2px);box-shadow:2px 0 4px var(--keyboardFocusIndicatorColor, rgba(0, 122, 204, .3));border-left-color:var(--accentColor, #007acc)}.pnltabdrozon{width:4px;height:35px;flex-shrink:0;transition:all .15s ease}.pnltabdrozon.pnltabdraove{width:20px;background:var(--keyboardFocusIndicatorColor, rgba(0, 122, 204, .3));border-radius:2px}.pnltabTitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1}.pnltabe5v{display:flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;background:none;border:none;border-radius:2px;cursor:pointer;font-size:12px;color:var(--secondaryLabelColor, #666666);transition:all .15s ease;opacity:0}.pnltab:hover .pnltabe5v{opacity:1}.pnltabe5v:hover{background:var(--controlHoverBackground, #e0e0e0);color:var(--controlTextColor, #333333)}.pnlnewtab{display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin:0 8px;background:none;border:1px solid transparent;border-radius:4px;cursor:pointer;font-size:16px;color:var(--secondaryLabelColor, #666666);transition:all .15s ease}.pnlnewtab:hover{background:var(--controlHoverBackground, #e0e0e0);border-color:var(--separatorColor, #e0e0e0);color:var(--controlTextColor, #333333)}.pnltabctn{position:relative;flex:1;overflow:hidden;background:var(--windowBackgroundColor, #ffffff)}.pnldrozonlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:1000}.pnlpnlcnt.pnldragact .pnldrozonlay{pointer-events:auto}.pnlpnlcnt.pnldragact .pnlleafcnt{position:relative}.pnlpnlcnt.pnldragact .pnlleafcnt:not(.pnldrotar){opacity:.8}.pnlpnlcnt.pnldragact .pnlleafcnt.pnldrotar{border-color:var(--accentColor, #007acc);box-shadow:0 0 0 2px var(--keyboardFocusIndicatorColor, rgba(0, 122, 204, .3));background:var(--keyboardFocusIndicatorColor, rgba(0, 122, 204, .05))}.pnldropZone{position:absolute;pointer-events:none;background:var(--keyboardFocusIndicatorColor, rgba(0, 122, 204, .2));border:2px dashed var(--accentColor, #007acc);opacity:0;transition:all .2s ease;border-radius:6px;z-index:100;box-shadow:0 0 8px var(--keyboardFocusIndicatorColor, rgba(0, 122, 204, .3))}.pnldropZone:hover,.pnldropZone.pnlact{opacity:1}.pnlpnlcnt.pnldragact .pnlleafcnt .pnldropZone{opacity:.6;pointer-events:auto;display:block}.pnlpnlcnt.pnldragact .pnlleafcnt .pnldropZone:hover,.pnlpnlcnt.pnldragact .pnlleafcnt .pnldropZone.pnlact{opacity:1;background:var(--keyboardFocusIndicatorColor, rgba(0, 122, 204, .25));border-color:var(--accentColor, #007acc)}.pnlpnlcnt:not(.pnldragact) .pnldropZone{opacity:0;pointer-events:none}.pnldropZone.pnlact{background:var(--keyboardFocusIndicatorColor, rgba(0, 122, 204, .2));border-color:var(--accentColor, #007acc)}.pnldrozonlef{top:0;left:0;width:30%;height:100%}.pnldrozonrig{top:0;right:0;width:30%;height:100%}.pnldrozontop{top:0;left:30%;right:30%;height:30%}.pnldrozonbot{bottom:0;left:30%;right:30%;height:30%}.pnldrozoncen{top:30%;left:30%;right:30%;bottom:30%}@media (max-width: 768px){.pnltab{min-width:60px;max-width:120px;padding:0 8px 0 12px}.pnltabTitle{font-size:12px}.pnlnewtab{width:24px;height:24px;margin:0 4px}.pnldrozonlef,.pnldrozonrig{width:40%}.pnldrozontop,.pnldrozonbot{left:40%;right:40%;height:40%}.pnldrozoncen{top:40%;left:40%;right:40%;bottom:40%}}.pnltab{transition:transform .15s ease,opacity .15s ease}.pnltab.pnldrg{transform:scale(.95);opacity:.7;z-index:100}.pnlsplitcnt{transition:opacity .15s ease}.pnlsplitcnt.pnlresizing{-webkit-user-select:none;user-select:none}.pnlleafcnt:focus-within{border-color:var(--accentColor, #007acc)}.pnltab:focus{outline:2px solid var(--accentColor, #007acc);outline-offset:-2px}.pnlnewtab:focus,.pnltabe5v:focus{outline:2px solid var(--accentColor, #007acc);outline-offset:-2px}@media (prefers-contrast: high){.pnltab{border-width:2px}.pnldropZone{border-width:3px}}@media (prefers-reduced-motion: reduce){.pnltab,.pnlsplitter,.pnldropZone,.pnlsplitcnt{transition:none}}