/* ========================================================== VRTORRENTS - PORNSTARS / STUDIOS DIRECTORY + PROFILE PAGES ----------------------------------------------------------- Ported from Lewdova's ".doujin-directory-*" / ".doujin-profile-*" design (dedicated CPT directory grid + profile header with big round avatar + sort tabs + linked-content grid), re-themed here to match VRTorrents' own light/white card look instead of Lewdova's dark theme, so it fits the rest of this site. Used by: archive-pornstar.php / archive-studio.php -> .vrt-directory-* single-pornstar.php / single-studio.php -> .vrt-profile-* Loaded as its own stylesheet (see vrt_enqueue_directory_style() in functions.php) after the theme's main style.css, so it wins the cascade without needing to edit that huge file directly. ========================================================== */ /* ========================================================== SINGLE VIDEO PAGE - FEATURED IMAGE (COVER) ----------------------------------------------------------- [NEW] "อยากให้เอารูปปกมาแสดงที่ใต้ชื่อมา" - the single Video page (single.php) never displayed the Featured Image anywhere; this shows it directly under the title, above the "Video Information" table, styled to match the white card look already used for the rest of the page. ========================================================== */ .single-featured-image{ width:100%; margin:0 0 30px; border-radius:12px; overflow:hidden; background:#eef2f6; border:1px solid #e5e7eb; box-shadow:0 8px 24px rgba(0,0,0,.08); } .single-featured-image img{ display:block; width:100%; height:auto; max-height:600px; object-fit:cover; margin:0; } @media(max-width:700px){ .single-featured-image{ margin-bottom:20px; border-radius:10px; } .single-featured-image img{ max-height:360px; } } /* ========================================================== FIX: หน้ารายละเอียดวิดีโอ (single.php) กลายเป็นกล่องแคบ มีขอบโค้ง ครอบทั้งหน้ารวม header ไปด้วย (ต่างจากหน้าแรกที่ปกติดี) ----------------------------------------------------------- ต้นเหตุ: style.css มีกฎเก่าที่จำกัดความกว้าง/มุมโค้ง/overflow ของ เฉพาะตอนเป็นหน้าโพสต์เดี่ยว (WordPress ใส่คลาส "single-post" ให้ อัตโนมัติเฉพาะหน้ารายละเอียด ไม่มีใน หน้าแรก) ทำให้ทั้งหน้า - รวมถึง
ที่ปกติต้องเต็มความกว้าง เสมอ - ถูกบีบให้แคบลงและถูกครอบด้วยมุมโค้งเดียวกัน นี่คือ !important override ที่โหลดหลัง style.css (ผ่าน vrt_enqueue_directory_style() ใน functions.php) บังคับให้ body และ header กลับมาเต็มความกว้างปกติเสมอบนหน้าโพสต์เดี่ยว โดยไม่ แตะโครงสร้างการ์ดขาว (.video-box) หรือรูปปก (.single-featured-image) ที่ต้องแสดงอยู่เหมือนเดิม ========================================================== */ html, body{ overflow-x:visible !important; } body.single-post, body:has(article.single-page){ max-width:none !important; width:auto !important; margin:0 !important; padding:0 !important; border-radius:0 !important; border:0 !important; box-shadow:none !important; overflow:visible !important; } .main-header{ width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; border-radius:0 !important; left:0 !important; right:0 !important; } /* ========================================================== FIX:
/
ถูกเหมารวมเข้ากับกฎ "main{display:grid}" ของธีมเดิม ----------------------------------------------------------- ธีมเดิมมีกฎทั่วไป (ใน style.css) ที่บังคับให้
ทุกตัว เป็น CSS Grid หลายคอลัมน์ (ตั้งใจไว้สำหรับ
ที่ใช้จัดการ์ดโพสต์เป็นตารางในหน้าแรก/archive) แต่กฎนี้ไม่ได้ เจาะจง class เอาไว้ เลยไปจับ
และ
ที่เราเพิ่มใหม่ด้วย ทำให้ลูก ตรงๆ ของมัน (header + กริดการ์ด บนหน้า directory, หรือ 2 ส่วน header/content บนหน้าโปรไฟล์) ถูกดันให้กลายเป็น "คอลัมน์" เรียง ข้างกันแทนที่จะเป็นบนลงล่างตามปกติ - อาการตรงกับที่เห็น: กล่อง หัวข้อยืดสูงตามกริด, และส่วนเนื้อหาโปรไฟล์ถูกบีบเหลือแค่ 1 ใน 3 ของความกว้าง เหลือพื้นที่ว่างด้านขวาเยอะ แก้โดยปิด display:grid เฉพาะ
ที่ไม่ใช่ class "posts" -
(ทั้งตัวนอกสุดในหน้าแรก และตัวที่ซ้อนอยู่ใน หน้าโปรไฟล์สำหรับแสดงกริดวิดีโอ) ยังคงใช้ grid ตามปกติเหมือนเดิม ไม่กระทบ ========================================================== */ main[class]:not(.posts){ display:block !important; grid-template-columns:none !important; grid-gap:0 !important; } /* ---------- Directory grid (archive-pornstar.php / archive-studio.php) ---------- */ .vrt-directory-page{ width:min(1200px, calc(100% - 40px)); margin:42px auto 80px; box-sizing:border-box; } .vrt-directory-header{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:30px 32px; margin-bottom:28px; background:#ffffff; border:1px solid #000000; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.10); } .vrt-directory-eyebrow{ display:block; margin-bottom:8px; color:#2ea3f2; font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; } .vrt-directory-header h1{ margin:0; color:#1e293b; font-size:34px; line-height:1.2; font-weight:800; text-align:left; background:none; text-shadow:none; } .vrt-directory-header p{ margin:8px 0 0; color:#6b7280; font-size:14px; } .vrt-directory-count{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:100px; min-height:80px; padding:12px 18px; border-radius:14px; background:#eef2f6; border:1px solid #d8dee8; } .vrt-directory-count strong{ color:#1e293b; font-size:27px; line-height:1; } .vrt-directory-count span{ margin-top:7px; color:#6b7280; font-size:12px; } .vrt-directory-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,170px)); justify-content:start; gap:16px; } .vrt-directory-card{ min-width:0; overflow:hidden; background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.06); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; } .vrt-directory-card:hover{ transform:translateY(-4px); border-color:#2ea3f2; box-shadow:0 16px 32px rgba(0,0,0,.12); } .vrt-directory-card > a{ display:block; color:inherit !important; text-decoration:none !important; } /* [CHANGED] "อยากให้ทรงสูงกว้างหน่อย เหมือนรูป pornstar ของเว็บอื่น" * ----------------------------------------------------------- * เดิมใช้ aspect-ratio 16/10 (แนวนอน เตี้ย) - เปลี่ยนเป็นทรงสูงแบบ * portrait (3/4) ตามภาพตัวอย่างที่ส่งมา รูปจะเต็มพื้นที่การ์ดสูงขึ้น * ชัดเจนขึ้น โดยยังคงโทนสีขาว/สว่างของเว็บเดิม ไม่ได้ทำเข้มแบบเว็บ * ตัวอย่างทั้งหมด */ .vrt-directory-image{ width:100%; aspect-ratio:3/4; overflow:hidden; background:#eef2f6; } .vrt-directory-image img{ width:100% !important; height:100% !important; display:block !important; object-fit:cover !important; margin:0 !important; } .vrt-directory-placeholder{ width:100%; height:100%; min-height:140px; display:grid; place-items:center; color:#9ca3af; font-size:36px; background:#eef2f6; } .vrt-directory-card-content{ padding:11px 12px; } .vrt-directory-card-content h2{ margin:0; color:#1e293b; font-size:14px; font-weight:800; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .vrt-directory-card-content span{ display:inline-flex; align-items:center; gap:5px; margin-top:8px; color:#6b7280; font-size:11px; } .vrt-directory-card-content span i{ color:#2ea3f2; } /* ---------- Profile pages (single-pornstar.php / single-studio.php) ---------- */ .vrt-profile-page{ width:100%; max-width:1400px; margin:0 auto; padding:50px 20px 80px; box-sizing:border-box; } .vrt-profile-header{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; margin:0 auto 35px; } .vrt-profile-avatar{ width:150px; height:150px; flex:0 0 150px; margin:0 auto 20px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#eef2f6; border:3px solid #2ea3f2; box-shadow:0 0 0 5px rgba(46,163,242,.10), 0 12px 35px rgba(0,0,0,.12); } .vrt-profile-avatar img{ width:100% !important; height:100% !important; display:block !important; object-fit:cover !important; } .vrt-profile-avatar-empty{ color:#9ca3af; font-size:50px; } .vrt-profile-header h1{ margin:0 !important; padding:0 !important; color:#1e293b !important; background:transparent !important; border:0 !important; box-shadow:none !important; font-size:38px !important; font-weight:800 !important; line-height:1.2 !important; text-align:center !important; text-shadow:none !important; } .vrt-profile-stats{ display:flex; justify-content:center; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; } .vrt-profile-stats .cv-item{ background:rgba(46,163,242,.10); border:1px solid rgba(46,163,242,.25); color:#1e293b; padding:8px 16px; font-size:14px; font-weight:700; } .vrt-profile-stats .cv-item i{ color:#0284c7; } .vrt-profile-content{ width:100%; } .vrt-profile-filters{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; margin:0 auto 35px; } .vrt-profile-filters a{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; border-radius:9px; background:#e5e7eb; border:1px solid #d1d5db; color:#374151 !important; text-decoration:none !important; font-size:13px; font-weight:800; transition:.2s; } .vrt-profile-filters a:hover, .vrt-profile-filters a.active{ background:#2ea3f2; border-color:#2ea3f2; color:#ffffff !important; } .vrt-profile-empty{ text-align:center; padding:60px 20px; color:#6b7280; } .vrt-profile-empty i{ display:block; font-size:36px; margin-bottom:12px; color:#9ca3af; } @media(max-width:1000px){ .vrt-directory-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,160px)); gap:14px; } } @media(max-width:700px){ .vrt-directory-page{ width:calc(100% - 24px); margin-top:24px; } .vrt-directory-header{ padding:22px; flex-direction:column; align-items:flex-start; } .vrt-directory-header h1{ font-size:28px; } .vrt-directory-grid{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); justify-content:start; gap:12px; } .vrt-profile-page{ padding-left:12px; padding-right:12px; } .vrt-profile-avatar{ width:120px; height:120px; flex-basis:120px; } .vrt-profile-header h1{ font-size:28px !important; } } @media(max-width:430px){ .vrt-directory-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .vrt-directory-card-content{ padding:11px 12px; } .vrt-directory-card-content h2{ font-size:15px; } }