MIX · extractor de estilos
Template: demo-bar-1/index.php · mtime: 2025-08-19 16:31
← Volver al álbum Descargar mixed.css Descargar manifest.json
CSS links: 1 Embebidos: 0 Externos: 1 Inline styles: 3 Missing: 0
CSS externos (no embebidos)
CSS embebidos (locales)
No se pudieron embebir CSS locales.
Preview de mixed.css
/* MIXED CSS PACK */
/* Template: demo-bar-1/index.php */
/* Template mtime: 2025-08-19 16:31:56 */

/* external link (no embedded): https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Orbitron:wght@500&family=Press+Start+2P&display=swap */

/* ===== INLINE <style> BLOCK #1 ===== */
:root {
      --primary-color: #ff00c1;
      --secondary-color: #00f0ff;
      --accent-color: #ff3e9d;
      --text-color: #ffffff;
      --dark-bg: #0f0f1a;
      --neon-glow: 0 0 10px var(--primary-color), 
                  0 0 20px var(--secondary-color),
                  0 0 30px rgba(255, 62, 157, 0.5);
    }

    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
      font-family: 'Montserrat', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: var(--text-color);
      overflow-x: hidden;
      position: relative;
    }

    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        linear-gradient(rgba(255, 0, 193, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 193, 0.1) 1px, transparent 1px);
      background-size: 20px 20px;
      z-index: -1;
      opacity: 0.5;
    }

    body.fade-in {
      animation: fadeIn 1s ease-out forwards;
    }

    body.fade-out {
      animation: fadeOut 1s ease-out forwards;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes fadeOut {
      from { opacity: 1; }
      to { opacity: 0; }
    }

    .title {
      font-family: 'Press Start 2P', 'Orbitron', sans-serif;
      font-size: 2.5rem;
      margin-bottom: 1.5rem;
      text-transform: uppercase;
      letter-spacing: 3px;
      color: var(--text-color);
      text-shadow: var(--neon-glow);
      position: relative;
      padding: 15px;
      border: 2px solid var(--secondary-color);
      box-shadow: inset 0 0 15px var(--primary-color), 0 0 15px var(--secondary-color);
      background: rgba(15, 15, 26, 0.7);
    }

    .title::after {
      content: 'â–¼';
      position: absolute;
      bottom: -25px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--secondary-color);
      font-size: 1rem;
      animation: bounce 2s infinite;
    }

    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {transform: translateY(0) translateX(-50%);}
      40% {transform: translateY(-10px) translateX(-50%);}
      60% {transform: translateY(-5px) translateX(-50%);}
    }

    .video-container {
      position: relative;
      max-width: 90%;
      max-height: 70vh;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 0 0 30px rgba(106, 17, 203, 0.5);
      margin-bottom: 2rem;
      border: 1px solid var(--primary-color);
      transition: all 0.5s ease;
    }

    .video-container:hover {
      box-shadow: 0 0 50px rgba(255, 0, 193, 0.7);
      transform: scale(1.01);
    }

    .video-container.fade-out {
      opacity: 0;
      transform: scale(0.9);
    }

    video {
      max-width: 100%;
      max-height: 100%;
      display: block;
      filter: hue-rotate(0deg) saturate(1.2);
      transition: filter 0.5s ease;
    }

    .video-container:hover video {
      filter: hue-rotate(10deg) saturate(1.5);
    }

    .buttons-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
      perspective: 1000px;
    }

    .boton {
      padding: 14px 30px;
      font-size: 1rem;
      font-weight: 600;
      color: white;
      background: linear-gradient(45deg, var(--primary-color) 0%, var(--secondary-color) 100%);
      border: none;
      border-r    /* ...cortado... agregá ?full=1 para ver todo ... */
      
Ver preview completo
Manifest preview
{
    "template": "demo-bar-1/index.php",
    "template_mtime": 1755621116,
    "template_mtime_human": "2025-08-19T16:31:56+00:00",
    "css_links_found": [
        "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Orbitron:wght@500&family=Press+Start+2P&display=swap"
    ],
    "css_links_external": [
        "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Orbitron:wght@500&family=Press+Start+2P&display=swap"
    ],
    "css_links_embedded": [],
    "inline_style_blocks": 3,
    "inline_imports_external": [],
    "inline_imports_embedded": [],
    "missing_css_files": []
}