/* * HAIRA AI Attachment Final Fix V7 * - Menyembunyikan input file bawaan browser * - Memperjelas ikon foto, dokumen, video, dan file * - Mempertahankan tombol lampiran dan tombol kirim */ /* ======================================== SEMBUNYIKAN INPUT FILE BAWAAN BROWSER ======================================== */ form.composer input[type="file"], form.composer input.haira-file-input, .haira-file-input { display: none !important; visibility: hidden !important; opacity: 0 !important; position: fixed !important; left: -99999px !important; top: -99999px !important; width: 1px !important; height: 1px !important; min-width: 1px !important; min-height: 1px !important; max-width: 1px !important; max-height: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; appearance: none !important; -webkit-appearance: none !important; pointer-events: none !important; } /* ======================================== MENU LAMPIRAN ======================================== */ form.composer > .haira-attachment-menu { border: 1px solid rgba(62, 181, 255, 0.2) !important; background: linear-gradient( 145deg, rgba(10, 160, 255, 0.075), rgba(255, 214, 0, 0.035) ), rgba(8, 12, 18, 0.995) !important; box-shadow: 0 28px 85px rgba(0, 0, 0, 0.78), 0 0 35px rgba(0, 140, 255, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important; } /* Kartu pilihan attachment */ form.composer .haira-attachment-menu button.haira-attachment-option { border: 1px solid rgba(255, 255, 255, 0.085) !important; color: #f4f7fa !important; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015) ), rgba(8, 12, 17, 0.98) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important; } form.composer .haira-attachment-menu button.haira-attachment-option:hover, form.composer .haira-attachment-menu button.haira-attachment-option:focus-visible { border-color: rgba(32, 172, 255, 0.32) !important; background: linear-gradient( 145deg, rgba(20, 165, 255, 0.095), rgba(255, 214, 0, 0.035) ), rgba(9, 14, 20, 0.99) !important; outline: none !important; } /* ======================================== WARNA IKON MENU ======================================== */ form.composer .haira-attachment-option-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; flex: 0 0 38px !important; border-radius: 12px !important; opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; } /* Foto dan video: biru */ form.composer .haira-attachment-option:nth-child(1) .haira-attachment-option-icon, form.composer .haira-attachment-option:nth-child(3) .haira-attachment-option-icon { color: #31b3ff !important; border: 1px solid rgba(49, 179, 255, 0.34) !important; background: linear-gradient( 145deg, rgba(49, 179, 255, 0.17), rgba(49, 179, 255, 0.055) ) !important; box-shadow: 0 0 18px rgba(49, 179, 255, 0.08) !important; } /* Dokumen dan file: kuning */ form.composer .haira-attachment-option:nth-child(2) .haira-attachment-option-icon, form.composer .haira-attachment-option:nth-child(4) .haira-attachment-option-icon { color: #ffd600 !important; border: 1px solid rgba(255, 214, 0, 0.32) !important; background: linear-gradient( 145deg, rgba(255, 214, 0, 0.15), rgba(255, 214, 0, 0.045) ) !important; box-shadow: 0 0 18px rgba(255, 214, 0, 0.07) !important; } /* Paksa semua garis SVG mengikuti warna ikon */ form.composer .haira-attachment-option-icon svg { display: block !important; width: 20px !important; height: 20px !important; overflow: visible !important; color: inherit !important; opacity: 1 !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; filter: none !important; mix-blend-mode: normal !important; } form.composer .haira-attachment-option-icon svg path, form.composer .haira-attachment-option-icon svg rect, form.composer .haira-attachment-option-icon svg circle, form.composer .haira-attachment-option-icon svg line, form.composer .haira-attachment-option-icon svg polyline, form.composer .haira-attachment-option-icon svg polygon { fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; opacity: 1 !important; visibility: visible !important; stroke-linecap: round !important; stroke-linejoin: round !important; } /* ======================================== TEKS MENU ======================================== */ form.composer .haira-attachment-option-text { min-width: 0 !important; color: #ffffff !important; } form.composer .haira-attachment-option-text strong { color: #f7f8fa !important; opacity: 1 !important; } form.composer .haira-attachment-option-text small { color: #8d97a4 !important; opacity: 1 !important; } /* ======================================== TOMBOL LAMPIRAN ======================================== */ form.composer > button.haira-attach-button { color: #42b9ff !important; border: 1px solid rgba(42, 185, 255, 0.4) !important; background: linear-gradient( 145deg, rgba(42, 185, 255, 0.13), rgba(255, 214, 0, 0.025) ), rgba(6, 11, 17, 0.99) !important; } form.composer > button.haira-attach-button:hover, form.composer > button.haira-attach-button:focus-visible, form.composer > button.haira-attach-button.is-open { color: #ffd600 !important; border-color: rgba(255, 214, 0, 0.58) !important; background: linear-gradient( 145deg, rgba(255, 214, 0, 0.12), rgba(42, 185, 255, 0.08) ), rgba(7, 12, 18, 0.99) !important; } form.composer > button.haira-attach-button svg, form.composer > button.haira-attach-button svg path { fill: none !important; stroke: currentColor !important; opacity: 1 !important; } /* ======================================== PREVIEW FILE ======================================== */ .haira-file-preview { color: #40b9ff !important; border: 1px solid rgba(64, 185, 255, 0.24) !important; background: rgba(64, 185, 255, 0.09) !important; } .haira-file-preview.is-yellow { color: #ffd600 !important; border-color: rgba(255, 214, 0, 0.24) !important; background: rgba(255, 214, 0, 0.075) !important; } .haira-file-preview svg, .haira-file-preview svg path { fill: none !important; stroke: currentColor !important; opacity: 1 !important; } /* ======================================== MOBILE ======================================== */ @media (max-width: 430px) { form.composer > .haira-attachment-menu { background: linear-gradient( 145deg, rgba(10, 160, 255, 0.075), rgba(255, 214, 0, 0.035) ), rgba(8, 12, 18, 0.998) !important; } form.composer .haira-attachment-option-icon { width: 36px !important; height: 36px !important; flex-basis: 36px !important; } form.composer .haira-attachment-option-icon svg { width: 19px !important; height: 19px !important; } }