de index.html. */ #w-find .xpt{display:flex;align-items:center;flex-wrap:wrap;gap:1px;padding:2px 3px;background:#c0c0c0;border-bottom:1px solid #808080;font-size:11px} #w-find .xpt__b{display:inline-flex;align-items:center;gap:3px;height:24px;min-width:24px;padding:0 4px;border:1px solid transparent;background:none;color:#000;font:11px Arial,sans-serif;cursor:pointer;justify-content:center} #w-find .xpt__b:hover:not(:disabled){border-color:#fff #808080 #808080 #fff} #w-find .xpt__b:active:not(:disabled){border-color:#808080 #fff #fff #808080;padding-top:1px} #w-find .xpt__b:disabled{cursor:default;color:#808080} #w-find .xpt__i{flex:none;display:block} #w-find .xpt__b:disabled .xpt__i{opacity:.75} #w-find .xpt__dd{display:inline-block;width:0;height:0;margin:0 3px 0 0;border:3px solid transparent;border-top:4px solid #000;border-bottom:0;opacity:.8} #w-find .xpt__sep{width:2px;height:20px;margin:0 3px;border-left:1px solid #808080;border-right:1px solid #fff} @media (max-width:520px){ #w-find .xpt__l{display:none} #w-find .xpt{gap:0;padding:2px 2px} #w-find .xpt__b{height:32px;min-width:26px;padding:0 2px} #w-find .xpt__dd{margin:0 1px 0 0} #w-find .xpt__sep{height:24px;margin:0 1px} /* Botones de la solapa Carpetas (celular): botones Win98 con icono y texto, faciles de tocar */ #w-find .xp__bar .btn, #w-find[data-view="both"] .xp__x{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 12px;border:0;background:#c0c0c0;color:#000;font:700 12px Arial,sans-serif;line-height:1;cursor:pointer;box-shadow:inset -1px -1px #000,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf} #w-find .xp__bar .btn:active,#w-find[data-view="both"] .xp__x:active{box-shadow:inset 1px 1px #000,inset -1px -1px #fff,inset 2px 2px #808080,inset -2px -2px #dfdfdf;padding:2px 11px 0 13px} #w-find .xp__bar .btn{font-size:0} #w-find .xp__bar .btn>span{display:none} #w-find .xp__bar .btn::before{content:'';width:16px;height:16px;flex:none;background:url('../img/win98/folder-16.png') center/16px 16px no-repeat} #w-find .xp__bar .btn::after{content:'Carpetas';font-size:12px} html[lang="en"] #w-find .xp__bar .btn::after{content:'Folders'} #w-find[data-view="both"] .xp__x{font-size:0;min-width:0;min-height:30px;padding:0 10px} #w-find[data-view="both"] .xp__x::before{content:'';flex:none;border:5px solid transparent;border-right:7px solid #000;border-left:0} #w-find[data-view="both"] .xp__x::after{content:attr(aria-label);font-size:11px} #w-find[data-view="both"] .xp__hd{padding:4px 4px} #w-find[data-view="both"] .xp__hd>b{display:none} #w-find[data-view="both"] .xp__x{flex:1;min-width:0;white-space:nowrap;overflow:hidden} } /* Boton Ocultar/Mostrar carpetas como icono de la barra (antes de Atras), parecido al Ocultar/Mostrar de la Ayuda. Solo celular (<=520px): en escritorio el panel de carpetas siempre se ve. Reemplaza a los botones grandes "Ocultar carpetas" y "Carpetas". */ #w-find #xpt-tree,#w-find .xpt__sep--tree{display:none} @media (max-width:520px){ #w-find #xpt-tree{display:inline-flex} #w-find .xpt__sep--tree{display:block} #w-find #xpt-tree[aria-pressed="true"]{border-color:#808080 #fff #fff #808080;background:#dfdfdf} #w-find #xpt-tree .xpt__i{image-rendering:pixelated} #w-find[data-view="both"] .xp__hd{display:none} #w-find[data-view="list"] .xp__bar{display:none} } /* Iconos de la barra del Explorador = los mismos PNG de Ayuda / Correo / Internet (img/win98/tb98/, mail98/). Atras/Adelante/Subir deshabilitados usan su version gris (-off.png), asi que no se atenuan por CSS. */ #w-find .xpt__i{image-rendering:pixelated;width:auto;height:auto} #w-find .xpt__b:disabled .xpt__i{opacity:1} /* Ocultar/Mostrar carpetas (celular) = el mismo icono de la Ayuda (tb98/help-hide.png <-> help-show.png), sin marco de "presionado" */ @media (max-width:520px){ #w-find #xpt-tree[aria-pressed="true"]{border-color:transparent;background:none} #w-find #xpt-tree[aria-pressed="true"] .xpt__i{content:url('../img/win98/tb98/help-show.png')} } /* Barra del Explorador igual a la foto: Atras, Adelante, Subir | Cortar, Copiar, Pegar, Deshacer | Eliminar, Propiedades | Vistas. Ninguno tiene funcion todavia: salen en GRIS (version -off.png) con el texto gris; al tocarlos pasan a color 1 segundo (.is-flash, javascript/toolbar-flash.js). Si un boton gana una funcion real: sacarle la clase is-off y aria-disabled (queda siempre en color). Ocultar carpetas (celular) no se toca. */ #w-find .xpt__b.is-off{color:#808080;text-shadow:1px 1px #fff} #w-find .xpt__b.is-off.is-flash{color:#000!important;text-shadow:none} #w-find .xpt__b.is-off .xpt__i{filter:none;opacity:1} /* extras.css (.is-off img) atenuaria de nuevo el PNG ya gris */ #w-find .xpt__b.is-off:active{padding-top:0} #w-find .xpt--back:not(.is-flash) .xpt__i{content:url('../img/win98/tb98/back-off.png')} #w-find .xpt--fwd:not(.is-flash) .xpt__i{content:url('../img/win98/tb98/forward-off.png')} #w-find .xpt--up:not(.is-flash) .xpt__i{content:url('../img/win98/tb98/up-off.png')} #w-find .xpt--cut:not(.is-flash) .xpt__i{content:url('../img/win98/tb98/cut-off.png')} #w-find .xpt--copy:not(.is-flash) .xpt__i{content:url('../img/win98/tb98/copy-off.png')} #w-find .xpt--paste:not(.is-flash) .xpt__i{content:url('../img/win98/tb98/paste-off.png')} #w-find .xpt--undo:not(.is-flash) .xpt__i{content:url('../img/win98/tb98/undo-off.png')} #w-find .xpt--del:not(.is-flash) .xpt__i{content:url('../img/win98/tb98/delete-off.png')} #w-find .xpt--props:not(.is-flash) .xpt__i{content:url('../img/win98/tb98/props-off.png')} #w-find .xpt--views:not(.is-flash) .xpt__i{content:url('../img/win98/tb98/views-off.png')} /* Atras / Adelante ya funcionan (historial en extras.js): habilitados salen en color; sin historial siguen grises (.is-off). */ #w-find .xpt--back:not(.is-off) .xpt__i{content:url('../img/win98/tb98/back.png')} #w-find .xpt--fwd:not(.is-off) .xpt__i{content:url('../img/win98/tb98/forward.png')} #w-find .xpt--back:not(.is-off), #w-find .xpt--fwd:not(.is-off){color:#000;text-shadow:none}