/* n9chung.css — dùng chung MỌI kích thước màn (nạp bởi bộ nạp N9K). Chốt tương phản + khối "More" mở rộng. */ /* Ô chọn màu: giá trị mặc định thường là #ffffff ⇒ ô trắng trên nền trắng trông như hộp TRỐNG (recolor-tools "Tint color", 23/10). Nền xám + viền quanh mẫu màu để màu nào cũng nhìn thấy. */ #tool-root input[type="color"] { background: #e7e9ee !important; border: 1px solid #9aa3ad !important; border-radius: 8px; cursor: pointer; } :root[data-theme="dark"] #tool-root input[type="color"] { background: #2a2d33 !important; border-color: #5b626b !important; } #tool-root input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; } #tool-root input[type="color"]::-webkit-color-swatch { border: 1px solid rgba(0, 0, 0, .45); border-radius: 5px; } #tool-root input[type="color"]::-moz-color-swatch { border: 1px solid rgba(0, 0, 0, .45); border-radius: 5px; } /* Nút tải dạng của recolor-tools: `#tool-root a{color:var(--nhan)}` đè chữ trắng của tool ⇒ chữ xanh trên nền xanh (1,11). */ #tool-root a.rprt-download-link, #tool-root a.rprt-download-link:hover { color: #fff !important; } #tool-root a.rprt-download-link[aria-disabled="true"] { color: #3f4a3b !important; } /* Khối "More on 9Minecraft" mở rộng: liên kết xem tất cả */ .t9b__rel .n9-tatca { margin: 12px 0 0; font-weight: 600; } .t9b__rel .n9-tatca a { color: var(--nhan, #0b57d0); text-decoration: none; } .t9b__rel .n9-tatca a:hover { text-decoration: underline; } :root[data-theme="dark"] .t9b__rel .n9-tatca a { color: #8ab4f8; } /* QUẢNG CÁO xuống DƯỚI khu đánh giá + bình luận (chủ site 23/10: "cho hết quảng cáo ở tool xuống phía dưới khu vực rating, comment", kể cả quảng cáo ĐẦU bài). Chỉ đổi THỨ TỰ HIỂN THỊ bằng `order` — KHÔNG chuyển nút DOM (iframe quảng cáo bị chuyển chỗ là tải lại / trắng). Quảng cáo video giữ nguyên chỗ (chủ site đính chính). Desktop: .t9b__chinh vốn là block ⇒ bật flex cột, mọi con cùng order 5 (giữ trật tự DOM), riêng .t9b__qc 8. Mobile: đã flex (khung n9k order -1 · cột nội dung order 7) ⇒ .t9b__qc 8. */ @media (min-width: 641px) { .t9b__chinh { display: flex !important; flex-direction: column; } .t9b__chinh > * { order: 5 !important; min-width: 0; width: 100%; box-sizing: border-box; } /* ⛔ flex cột + margin:auto ⇒ con CO về theo nội dung (seed-map desktop còn 617/1168px, bản đồ bị cắt) — width:100% trả lại đúng hành vi khối (max-width + margin:auto vẫn căn giữa như cũ). */ } .t9b__chinh > .t9b__qc { order: 8 !important; } /* Nút "9Minecraft Universal" trên header tools: `color:inherit` ⇒ chữ #202124 trên nền tối (1,12:1) ở theme tối. */ :root[data-theme="dark"] .n9-nut { color: #e8eaed !important; } /* seed-map: nút OpenLayers (+ − ⇧) hover chữ vàng #b88300 trên nền xám nhạt = 2,7:1, lại chuyển màu chậm (>0,5s). */ :root:not([data-theme="dark"]) #tool-root .ol-control button:is(:hover, :focus-visible) { color: #5c4200 !important; transition: none !important; } /* ── Trả lại THIẾT KẾ GỐC của tool bị luật chung `#tool-root:not([data-tool="seed-map-3d"]) button:not(.btn):not([class*="tab"])` {padding:9px 18px;font-size:14px;border-radius:tron} (ưu tiên 1,3,1) đè lên (tổng duyệt 24/10). 3d-skin-editor: sơ đồ thân người = các khối chữ nhật bo 6px, ẨN chữ (font-size:0) — bị biến thành vòng tròn chữ cắt đè nhau. */ #tool-root:not(#n9x) .part-figure .chip-button { font-size: 0 !important; line-height: 0 !important; padding: 0 !important; border-radius: 6px !important; min-width: 0 !important; } /* 3d-skin-editor: nút icon động tác (Animations / Attacks / Moves) rộng 36px — đệm 18px×2 bóp SVG còn 0px. */ #tool-root:not(#n9x) button.anim-icon-btn { padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; } #tool-root:not(#n9x) button.anim-icon-btn svg { flex: none; } /* sơ đồ thân người: khối trắng trên nền trắng gần như vô hình ⇒ nền xám nhạt + viền; khối đang chọn tô màu nhấn */ #tool-root:not(#n9x) .part-figure .chip-button { background: #e3e7ec !important; border: 1px solid #b9c1ca !important; } #tool-root:not(#n9x) .part-figure .chip-button:hover { background: #d3dae2 !important; } #tool-root:not(#n9x) .part-figure .chip-button.is-active { background: var(--nhan, #0b57d0) !important; border-color: var(--nhan, #0b57d0) !important; } :root[data-theme="dark"] #tool-root:not(#n9x) .part-figure .chip-button { background: #2e3338 !important; border-color: #4a525a !important; } :root[data-theme="dark"] #tool-root:not(#n9x) .part-figure .chip-button.is-active { background: #8ab4f8 !important; border-color: #8ab4f8 !important; } /* Thanh công cụ (desktop, nhận dạng tự động trong n9chung.js) — nền khác khung kết quả, nhẹ nhàng */ #tool-root .n9-thanh:not(.n9p *):not(.n9p-cot) { background: #f3f6f9 !important; border-radius: 12px; padding: 10px 12px !important; box-shadow: inset 0 0 0 1px rgba(60, 64, 67, .07); } :root[data-theme="dark"] #tool-root .n9-thanh:not(.n9p *):not(.n9p-cot) { background: #1c2126 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } /* Mobile: ngăn kéo (bảng công cụ xổ ra) cũng có nền riêng so với màn kết quả */ @media (max-width: 640px) { #tool-root .n9k .n9k-ngan { background: #f3f6f9 !important; } :root[data-theme="dark"] #tool-root .n9k .n9k-ngan { background: #1c2126 !important; } } /* armor-trim: nút "Reroll" là XÚC XẮC (chấm) nhưng bị luật chung bo TRÒN, không viền ⇒ trông như thiếu icon. Trả về hình con xúc xắc: vuông bo góc, viền rõ. */ #tool-root:not(#n9x) button.die { border-radius: 10px !important; border: 2px solid #9aa3ad !important; background: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,.12) !important; } :root[data-theme="dark"] #tool-root:not(#n9x) button.die { background: #2a2f35 !important; border-color: #5b646d !important; } /* Bảng tra cứu (data-browser): ô danh sách dài (biome, vật phẩm rơi…) bị CẮT CỤT không dấu "…" (tổng duyệt 24/10) ⇒ xuống dòng. */ #tool-root td.mcdb-list { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; max-width: none !important; } /* Nút chọn item ▦ (ipick) được chèn position:absolute dính mép phải ô nhập ⇒ ĐÈ lên nút đứng sau nó (datapack-studio: ▦ che mất nút xoá ×). Có nút khác theo sau ⇒ đưa ▦ về dòng chảy thường. */ #tool-root .ipick-open:has(+ button), #tool-root .ipick-open:has(+ [role="button"]) { position: static !important; transform: none !important; inset: auto !important; margin: 0 6px !important; flex: none; } /* hud-font-pack-tools: dòng chọn HUD — ô tích bị đẩy lên TRÊN chữ (.hfpt-panel label{flex-direction:column} thắng .hfpt-check-row) và luật chung label:has(checkbox){inline-flex} xếp 2 dòng cạnh nhau ⇒ đường dẫn dài tràn sang cột bên. */ #tool-root:not(#n9x) .hfpt-panel label.hfpt-check-row { display: flex !important; flex-direction: row !important; align-items: flex-start; width: 100%; gap: 10px; } #tool-root:not(#n9x) .hfpt-check-row input[type="checkbox"] { flex: none; margin-top: 3px; } #tool-root:not(#n9x) .hfpt-check-row .hfpt-check-path { display: block; white-space: normal; overflow-wrap: anywhere; font-size: 12px; opacity: .8; } /* crop-growth (mobile): hàng thống kê là flex ngang ⇒ thẻ cao 430px trống trơn và cột phải bị CẮT ⇒ lưới 2 cột, cao theo nội dung */ @media (max-width: 640px) { #tool-root .cgfc-summary { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; height: auto !important; } #tool-root .cgfc-summary > * { min-height: 0 !important; height: auto !important; min-width: 0; } } /* enchant-calculator: ô phù phép xếp dọc (ô tích trên / tên / ×hệ số dưới) ⇒ một dòng: ô tích · tên · hệ số */ #tool-root:not(#n9x) label.ecalc-chip { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; padding: 6px 12px !important; } #tool-root:not(#n9x) label.ecalc-chip input[type="checkbox"] { margin: 0; flex: none; } #tool-root:not(#n9x) label.ecalc-chip .ecalc-chip-mult { font-size: 11.5px; opacity: .7; } /* Hover KHÔNG tô cả khối (chủ site 24/10: 'hover vào chữ nào thì chỉ thay đổi ở chữ đó'). armor-trim: .card chứa nút/ô nhập nhấc lên + đổi nền khi rê ⇒ giữ nguyên dáng thường; chỉ nút/chữ bên trong phản hồi. */ #tool-root .card:not(.n9-thanh):has(button, input, select, textarea):hover { transform: none !important; background: var(--surface) !important; border-color: var(--line) !important; box-shadow: 0 1px 2px rgba(13,17,23,.08), 0 2px 6px rgba(13,17,23,.05) !important; } #tool-root .card.n9-thanh:has(button, input, select, textarea):hover { transform: none !important; border-color: var(--line) !important; } /* icon game cạnh tên gamerule (25/10) */ #tool-root img.n9-gr-ic { width: 20px; height: 20px; image-rendering: pixelated; vertical-align: middle; margin: 0 8px 0 0; flex: none; } #tool-root td:has(> img.n9-gr-ic) { white-space: nowrap; } /* ================= Breadcrumb 9minecraft (25/10) ================= * Bộ thiết kế chuẩn của www.9minecraft.net (#breadcrumbs) — bản gốc + tài liệu: C:\Son\_thiet_ke\breadcrumb-9minecraft\. * Map lên nav.t9b__duong của tools: khung nền nhạt bo 8px · icon nhà ở mục đầu · liên kết xanh · "»" vẽ bằng ::after · * mục cuối xám. ⛔ Luật cũ `.t9b__duong a,.t9b__duong span{min-width:44px;min-height:44px;display:inline-flex}` (vùng chạm * mobile) làm vỡ khung ⇒ ghi đè bằng `html body` + !important; điện thoại giữ cao chạm 44px cho LIÊN KẾT như www. */ html body nav.t9b__duong { box-sizing: border-box !important; display: flex !important; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0 0 16px; padding: 10px 14px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; font: 400 14px/1.5 Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; color: #64748b !important; width: fit-content; max-width: 100%; } html body nav.t9b__duong span, html body nav.t9b__duong a { min-width: 0 !important; min-height: 0 !important; display: inline !important; } html body nav.t9b__duong .t9b__duong-tach { display: none !important; } html body nav.t9b__duong a { color: #2563eb !important; font-weight: 500 !important; text-decoration: none !important; transition: color .15s; } html body nav.t9b__duong a:hover { color: #1d4ed8 !important; text-decoration: underline !important; text-underline-offset: 2px; } html body nav.t9b__duong > [property="itemListElement"]:first-child > a::before { content: ""; width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; } html body nav.t9b__duong > [property="itemListElement"]:not([aria-current]):not(:last-child)::after { content: "»"; color: #94a3b8; font-weight: 400; margin-left: 6px; user-select: none; } html body nav.t9b__duong > [aria-current], html body nav.t9b__duong > [property="itemListElement"]:last-child { color: #64748b !important; font-weight: 400 !important; } :root[data-theme="dark"] body nav.t9b__duong { background: #1a1f24 !important; color: #94a3b8 !important; border-color: #2a3038 !important; } :root[data-theme="dark"] body nav.t9b__duong a { color: #93c5fd !important; } :root[data-theme="dark"] body nav.t9b__duong a:hover { color: #bfdbfe !important; } :root[data-theme="dark"] body nav.t9b__duong > [property="itemListElement"]:not([aria-current]):not(:last-child)::after { color: #64748b; } :root[data-theme="dark"] body nav.t9b__duong > [aria-current], :root[data-theme="dark"] body nav.t9b__duong > [property="itemListElement"]:last-child { color: #cbd5e1 !important; } :root[data-theme="dark"] body nav.t9b__duong > [property="itemListElement"]:first-child > a::before { background-image: url("data:image/svg+xml;utf8,"); } @media (max-width: 600px) { html body nav.t9b__duong { font-size: 13px !important; padding: 8px 10px !important; gap: 0 4px; } html body nav.t9b__duong a { min-height: 44px !important; display: inline-flex !important; align-items: center !important; } } /* Ô CHỌN: mũi tên của theme vẽ ở 10–20px tính từ mép phải nhưng đệm phải chỉ 13px ⇒ mũi tên đè lên chữ ("Item▾", chủ site 25/10). Chừa đủ chỗ cho mũi tên ở MỌI ô chọn tự vẽ (appearance:none). */ #tool-root select { padding-right: 34px !important; min-width: 72px; text-overflow: ellipsis; } #tool-root select[multiple], #tool-root select[size]:not([size="1"]) { padding-right: 12px !important; background-image: none !important; } /* BẢNG: cột hẹp bẻ chữ thành cột dọc trên điện thoại ("false", "Y 232", "No (invisible…)" — quét 25/10) ⇒ ô tối thiểu ~4.5 chữ, mã/ID trong ô không xuống dòng, không bẻ giữa từ; bảng rộng hơn khung thì khung chứa cuộn ngang. */ #tool-root td, #tool-root th { min-width: 4.5em; word-break: normal !important; overflow-wrap: normal !important; } #tool-root td code, #tool-root td kbd, #tool-root th code { white-space: nowrap !important; } #tool-root a[download], #tool-root button { word-break: normal !important; } /* nhãn ngắn (VERSION, TARGET…) trong hàng flex chật: không bẻ giữa từ */ #tool-root label, #tool-root .n9-nhan, #tool-root [class*=label] { word-break: normal !important; overflow-wrap: normal !important; } #tool-root [class*=vlabel], #tool-root [class*=-version] > label { white-space: nowrap !important; flex-shrink: 0 !important; } /* VÙNG CHẠM điện thoại (kiểm tổng 25/10): nút icon nhỏ 28–30px ⇒ tối thiểu 40px để ngón tay bấm trúng */ @media (max-width: 640px) { #tool-root button.ipick-open, #tool-root .sq-btn-sm, #tool-root button.sts-seg { min-width: 40px !important; min-height: 40px !important; } #tool-root p a, #tool-root .scg-hint a, #tool-root label a { display: inline-block; padding: 6px 0; } } /* NÚT X ĐÓNG CHUẨN mọi cửa sổ bật lên (26/10) — tròn 44px nền tối, X trắng; góc phải trên */ html body .n9-x { display: inline-grid !important; place-items: center; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(32,33,36,.92) !important; color: #fff !important; box-shadow: 0 2px 10px rgba(0,0,0,.28) !important; cursor: pointer; flex: 0 0 44px !important; line-height: 0 !important; font-size: 0 !important; transition: transform .15s, background .15s; z-index: 5; } html body .n9-x:hover { background: #000 !important; transform: scale(1.06); } html body .n9-x:focus-visible { outline: 3px solid #8ab4f8 !important; outline-offset: 2px; } html body .n9-x .n9-x-ic { width: 22px !important; height: 22px !important; fill: none !important; stroke: #fff !important; stroke-width: 2.6; stroke-linecap: round; display: block; } :root[data-theme="dark"] body .n9-x { background: #e8eaed !important; } :root[data-theme="dark"] body .n9-x .n9-x-ic { stroke: #202124 !important; } :root[data-theme="dark"] body .n9-x:hover { background: #fff !important; } html body .n9-x-an { display: none !important; } /* nút X nổi (absolute) của hộp: đặt đúng góc phải trên */ html body .ipick-close.n9-x { margin-left: auto !important; }