/* * GLR Camera Upload - Estilos de Visibilidade e Campo da Câmera * Arquivo CSS dedicado. */ /* Estilos base para controle de visibilidade - Escondido por padrão */ .mobile-only, .desktop-only, .camera-mobile-only, .upload-desktop-only { display: none !important; } /* Regras de visibilidade baseadas nas classes adicionadas ao por PHP/JS */ body.glr-is-mobile .mobile-only, body.glr-is-mobile .camera-mobile-only { display: block !important; } body.glr-is-desktop .desktop-only, body.glr-is-desktop .upload-desktop-only { display: block !important; } /* Mensagem informativa para desktop */ .mobile-required-message { display: none; /* Escondido por padrão, exibido apenas em desktop via body.glr-is-desktop */ background: #fff3cd; border: 1px solid #ffeaa7; color: #856404; padding: 12px; border-radius: 6px; margin: 10px 0; font-size: 14px; } body.glr-is-desktop .mobile-required-message { display: block !important; } /* Estilos base para campos de câmera */ .camera-required .ginput_container, .camera-front .ginput_container, .camera-mobile-only .ginput_container { border: 2px dashed #0073aa; padding: 15px; border-radius: 8px; /* Background será definido dinamicamente via JS ou por classes específicas se necessário */ } .camera-hint { display: block; color: #0073aa; font-style: italic; margin-top: 8px; font-size: 12px; } /* Estilos específicos para mobile (ícone de câmera no input) */ body.glr-is-mobile input[type="file"][capture] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230073aa' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.2l3.2-2.2L12 10.8 8.8 13l3.2 2.2zM21 6h-3.17l-1.24-1.35c-.37-.41-.91-.65-1.47-.65H8.88c-.56 0-1.1.24-1.47.65L6.17 6H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 20px !important; padding-right: 40px !important; } /* Responsivo */ @media (max-width: 768px) { .camera-required .ginput_container, .camera-front .ginput_container, .camera-mobile-only .ginput_container { padding: 10px; } .camera-hint { font-size: 11px; } }