/* * ╔══════════════════════════════════════════════════════════════════╗ * ║ Cutter4D — Tool Pages Responsive Fix ║ * ║ Sayfalar: Nesting, Cutting1D, Cutting2D ║ * ║ wwwroot/css/ klasörüne ekleyin ║ * ║ _Layout.cshtml 'ine link olarak dahil edin ║ * ╚══════════════════════════════════════════════════════════════════╝ */ /* ================================================================ 1. GENEL — Yatay kayma önleme (tüm sayfalarda aktif) ================================================================ */ html, body { overflow-x: hidden; max-width: 100%; } /* Container'ların taşmaması için */ .container, .container-xl, .container-fluid { padding-right: max(1rem, env(safe-area-inset-right)); padding-left: max(1rem, env(safe-area-inset-left)); } /* Card'ların minimum 0'a inmesi (Bootstrap bug fix) */ .card { min-width: 0; overflow: hidden; } /* ================================================================ 2. QUALITY MODE CARDS (Nesting — fast / balanced / ultra) ================================================================ */ /* Tablet: ikonlar biraz küçülür */ @media (max-width: 992px) { .quality-mode-card { padding: 0.85rem 0.5rem; font-size: 0.82rem; } } /* Mobil 576px altı: 3 kart yan yana yerine 3 sütunlu grid */ @media (max-width: 576px) { /* Eğer kartlar bootstrap col-4 içindeyse */ .quality-modes-row > [class*="col-4"], .quality-modes-row > .col { flex: 0 0 33.333%; max-width: 33.333%; padding: 0.25rem; } .quality-mode-card { padding: 0.6rem 0.25rem; font-size: 0.72rem; text-align: center; } .quality-mode-card .fa, .quality-mode-card .fas { display: block; margin-bottom: 4px; font-size: 1rem; } /* Kalite bilgi kutucuğu */ #qualityModeInfo .quality-info-content { flex-direction: column; gap: 0.4rem; padding: 0.75rem !important; } .quality-time, .quality-warning { font-size: 0.78rem; } } /* ================================================================ 3. DXF DOSYA YÜKLEME ALANI (Nesting — #uploadZone) ================================================================ */ @media (max-width: 768px) { #uploadZone { padding: 1.5rem 0.75rem; min-height: 110px; } #uploadZone svg, #uploadZone .upload-icon, #uploadZone i.fa-cloud-upload-alt, #uploadZone i.fa-file-upload { font-size: 2rem !important; } #uploadZone p, #uploadZone small { font-size: 0.8rem; } } /* ================================================================ 4. DXF DOSYA LİSTESİ ÖĞELERİ (.dxf-file-item) ================================================================ */ #dxfFileList { /* Listeyi taşmaktan koru */ overflow-x: hidden; } @media (max-width: 576px) { .dxf-file-item { display: grid !important; grid-template-columns: 28px 1fr 64px 32px; grid-template-rows: auto; gap: 0 0.4rem; align-items: center; padding: 0.5rem 0.6rem !important; flex-wrap: nowrap !important; } .dxf-file-item .file-icon { grid-column: 1; font-size: 0.9rem; } .dxf-file-item .file-name { grid-column: 2; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .dxf-file-item .qty-input, .dxf-file-item input[type="number"] { grid-column: 3; width: 58px !important; padding: 0.25rem 0.35rem; font-size: 0.82rem; } .dxf-file-item .remove-btn { grid-column: 4; padding: 0.25rem 0.4rem; font-size: 0.75rem; } } /* ================================================================ 5. TOPLAM PARÇA KUTUSU (#totalPartsBox) ================================================================ */ @media (max-width: 576px) { #totalPartsBox { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.85rem; padding: 0.6rem 0.75rem !important; } } /* ================================================================ 6. FORM GİRİŞLERİ — Plaka / Stok Boyutları ================================================================ */ @media (max-width: 768px) { /* Yan yana 2 input (genişlik/yükseklik) küçük ekranda taşıyorsa */ .c4-input-pair .col-6, .plate-settings .col-6 { width: 50%; /* Yan yana kalmaya devam et ama sıkışmasın */ } .form-label { font-size: 0.8rem; margin-bottom: 0.2rem; } .form-control, .form-select { font-size: 0.88rem; padding: 0.4rem 0.6rem; } } @media (max-width: 480px) { /* Çok küçük ekranda boyut inputları da alt alta düşsün */ .c4-input-pair .col-6, .plate-settings .col-6 { width: 100%; flex: 0 0 100%; max-width: 100%; } } /* ================================================================ 7. OPTİMİZASYON BUTONU — Mobilde sticky bottom ================================================================ */ @media (max-width: 768px) { .c4-optimize-btn-wrapper { position: sticky; bottom: 0; z-index: 200; background: rgba(8, 12, 20, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 0.75rem 1rem; margin: 0 -1rem; border-top: 1px solid var(--c4-border, rgba(0,212,255,0.15)); } /* Butonu tam genişlik yap */ .c4-optimize-btn-wrapper .btn, #btnOptimizeNesting, #btnOptimize1D, #btnOptimize2D { width: 100%; justify-content: center; font-size: 0.95rem; padding: 0.65rem 1rem; } } /* ================================================================ 8. İŞ GEÇMİŞİ TABLOSU (Nesting, Cutting1D, Cutting2D) ================================================================ */ /* Tablo mutlaka yatay kaydırılabilir olmalı */ .jobs-table-wrapper, .c4-jobs-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; } /* table-responsive Bootstrap sınıfı da garantilenir */ .table-responsive { overflow-x: auto !important; } @media (max-width: 768px) { /* Tablonun minimum genişliği */ #jobsTableBody, .c4-jobs-table { min-width: 580px; } .c4-jobs-table td, .c4-jobs-table th, #jobsTableBody td, #jobsTableBody ~ thead th { font-size: 0.78rem; padding: 0.4rem 0.5rem; white-space: nowrap; } /* Badge boyutu küçülür */ .badge { font-size: 0.68rem; padding: 0.3em 0.5em; } /* Eylem butonları */ .btn-sm { padding: 0.25rem 0.4rem; font-size: 0.75rem; } } /* ================================================================ 9. NESTING SONUÇ MODALİ (#nestingResultModal) ================================================================ */ @media (max-width: 768px) { /* Modal tüm ekranı kaplar, margin azalır */ #nestingResultModal .modal-dialog { margin: 0.4rem; max-width: calc(100vw - 0.8rem); } #nestingResultModal .modal-xl { max-width: calc(100vw - 0.8rem); } #nestingResultModal .modal-header { padding: 0.75rem 1rem; flex-wrap: wrap; gap: 0.5rem; } #nestingResultModal .modal-body { padding: 0.75rem; } /* Header istatistikleri satıra sığdır */ #modalHeaderStats { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.78rem; } #modalHeaderStats span { white-space: nowrap; } /* Stat kartları 2'li grid (5 yerine) */ #modalNestingContent .col-md-2.col-4 { flex: 0 0 50%; max-width: 50%; } } /* ================================================================ 10. CANVAS KONTEYNER — Nesting görselleştirme ================================================================ */ /* Canvas'ın kapsayıcısı yatay scroll'u destekler */ .canvas-container { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; } @media (max-width: 768px) { /* Modal içindeki canvas kartları */ #modalNestingContent .card-body { padding: 0.5rem; overflow-x: auto; } #modalNestingContent .col-12 { padding-left: 0.4rem; padding-right: 0.4rem; } } /* ================================================================ 11. CUTTING 1D — STOK & PARÇA GİRİŞ TABLOSU ================================================================ */ @media (max-width: 768px) { .c4-cutting-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; margin-bottom: 1rem; } .c4-cutting-table-wrapper table { min-width: 480px; } .c4-cutting-table-wrapper td, .c4-cutting-table-wrapper th { font-size: 0.8rem; padding: 0.35rem 0.5rem; white-space: nowrap; } .c4-cutting-table-wrapper input[type="number"], .c4-cutting-table-wrapper input[type="text"] { width: 80px !important; min-width: 60px; font-size: 0.82rem; padding: 0.3rem 0.4rem; } } /* ================================================================ 12. CUTTING 1D — BAR GÖRSELLEŞTIRME ================================================================ */ @media (max-width: 768px) { /* Her bar sonuç kartı yatay kaydırılabilir */ .c4-bar-result, .c4-bar-card { overflow-x: auto; -webkit-overflow-scrolling: touch; } .c4-bar-visualization { min-width: 320px; } /* 1D sonuç istatistikleri 2'li */ .c4-result-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; } .c4-stat-item { flex: 0 0 calc(50% - 0.25rem); min-width: 0; } } /* ================================================================ 13. CUTTING 2D — PANEL GÖRSELLEŞTIRME ================================================================ */ @media (max-width: 768px) { /* Panel sonuç kartları yatay scroll */ .c4-panel-result-card .card-body { overflow-x: auto; padding: 0.5rem; } .c4-panel-canvas, .c4-cutting-svg, .c4-panel-canvas svg, .c4-cutting-result canvas { max-width: 100%; display: block; } /* 2D cutting stats */ .c4-2d-stats-row > [class*="col-"] { margin-bottom: 0.5rem; } } /* ================================================================ 14. AYARLAR KOL — Tablet ve mobil ================================================================ */ @media (max-width: 992px) { /* Sağ border kaldırılır, alt border eklenir */ .c4-tool-settings-col { border-right: none !important; border-bottom: 1px solid var(--c4-border, rgba(0,212,255,0.15)); margin-bottom: 1.5rem; padding-bottom: 1.25rem; } } @media (max-width: 768px) { /* Ayar kartları tam genişlik */ .c4-settings-card { margin-bottom: 1rem; } } /* ================================================================ 15. YÜKLEME OVERLAY'İ — Mobilde uyarlama ================================================================ */ @media (max-width: 576px) { #loadingOverlay { padding: 1rem; } #loadingOverlay .loading-content { padding: 1.5rem; font-size: 0.88rem; max-width: 95vw; } #loadingOverlay .spinner-border { width: 2.5rem; height: 2.5rem; } } /* ================================================================ 16. SAYFA BAŞLIĞI & TAB NAVİGASYON ================================================================ */ @media (max-width: 576px) { .c4-page-header h1, .c4-page-title { font-size: 1.35rem; } .c4-page-tabs { flex-wrap: wrap; gap: 0.4rem; } .c4-page-tabs .nav-link { padding: 0.35rem 0.65rem; font-size: 0.8rem; } /* Breadcrumb */ .breadcrumb { font-size: 0.8rem; flex-wrap: wrap; } } /* ================================================================ 17. GENEL UTILITY — Overflow helper ================================================================ */ /* Herhangi bir element için yatay scroll yardımcısı */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Taşan metinleri kırp */ .text-truncate-mobile { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 769px) { .text-truncate-mobile { white-space: normal; } } /* Col sıfırlama — Bootstrap bozuk col davranışları için */ @media (max-width: 576px) { .col-xs-12 { flex: 0 0 100%; max-width: 100%; width: 100%; } .col-xs-6 { flex: 0 0 50%; max-width: 50%; width: 50%; } } /* ================================================================ 18. MOBİL MENÜ — Araç sayfası spesifik düzeltme ================================================================ */ /* Mobil menü açıkken arka plan kaymaması için */ body.mobile-menu-open { overflow: hidden; } /* ================================================================ 19. NESTING LEGEND — Küçük ekran ================================================================ */ @media (max-width: 576px) { /* CAD legend kaydırılabilir yap */ .nesting-legend { overflow-x: auto; -webkit-overflow-scrolling: touch; } .nesting-legend .d-flex { flex-wrap: wrap; justify-content: flex-start; gap: 0.4rem; } } /* ================================================================ 20. DARK TABLE OVERRIDE — Bootstrap table dark fix ================================================================ */ @media (max-width: 768px) { /* Bootstrap table'ı dark tema renklerine uyarla */ .table-bordered { border-color: var(--c4-border, rgba(0,212,255,0.15)); } .table > :not(caption) > * > * { background-color: transparent; } }