/*
* JadTrip Modern UI layer for comiis_app (mobile) v1.0.0 2026-10-25
* Loaded right after comiis.css. Every rule is scoped to body.jt-ui, so
* removing the (or the class) brings back the original look.
* Colours are NOT changed here - they still come from comiis_app_color
* (light / night mode). Only layout, typography, motion and polish.
*/
/* ---------- tokens ---------- */
.jt-ui {
--jt-r: 14px;
--jt-r-sm: 10px;
--jt-sh: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .06);
--jt-sh-up: 0 -4px 18px rgba(15, 23, 42, .06);
--jt-accent: #53bcf5;
--jt-ease: cubic-bezier(.2, .8, .2, 1);
}
/* ---------- base / typography (Thai friendly) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.jt-ui {
font-family: 'Prompt', 'Noto Sans Thai', 'Sukhumvit Set', 'Thonburi', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.jt-ui ::selection { background: rgba(83, 188, 245, .25); }
.jt-ui a, .jt-ui button { -webkit-tap-highlight-color: transparent; }
.jt-ui a:focus-visible, .jt-ui button:focus-visible {
outline: 2px solid var(--jt-accent);
outline-offset: 2px;
border-radius: 6px;
}
/* iOS: allow pinch-zoom but stop the automatic zoom when an input gets focus */
@supports (-webkit-touch-callout: none) {
.jt-ui input[type="text"], .jt-ui input[type="search"], .jt-ui input[type="password"],
.jt-ui input[type="email"], .jt-ui input[type="tel"], .jt-ui input[type="number"],
.jt-ui input[type="url"], .jt-ui input:not([type]), .jt-ui textarea, .jt-ui select {
font-size: 16px !important;
}
}
/* ---------- smooth page-to-page transitions (Chrome / Edge / Safari 18+) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
animation-duration: .18s;
animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
@view-transition { navigation: none; }
}
/* ---------- top bar ---------- */
.jt-ui #comiis_head .comiis_head.f_top { box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 6px 16px rgba(15, 23, 42, .08); }
/* the bar title becomes on list / home pages: keep the original h2 layout */
.jt-ui .comiis_head h1 {
float: left; width: 50%; margin: 0; padding: 0;
text-align: center; font-size: 18px; line-height: 38px;
position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.jt-ui .comiis_head h1 img { height: 38px; }
.jt-ui .comiis_head h1 i.kmxiao { margin-left: 5px; font-size: 14px; }
.comiis_head_show_avatar .comiis_head h1 { width: auto; }
/* ---------- breadcrumb ---------- */
.jt-bc { padding: 10px 14px 0; font-size: 13px; line-height: 1.5; }
.jt-bc ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0; padding: 0; list-style: none; }
.jt-bc li { display: inline-flex; align-items: center; max-width: 100%; list-style: none; }
.jt-bc li + li:before { content: "\203A"; margin-right: 6px; opacity: .45; }
.jt-bc a { display: inline-block; max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comiis_wzv .jt-bc { padding: 4px 0 6px; }
/* ---------- thread page ---------- */
.jt-ui .comiis_viewtit h1 {
padding: 8px 14px 10px;
font-size: 21px !important;
line-height: 1.45;
font-weight: 600 !important;
letter-spacing: -.005em;
}
.jt-ui .comiis_viewtit h1 .km_tits { font-size: inherit; line-height: inherit; font-weight: inherit; }
.jt-ui .comiis_viewtit h1 .mb5 { margin-bottom: 8px !important; }
.jt-ui .comiis_viewtit h1 span { font-size: 12px; }
.jt-ui .comiis_viewtit h1 span.top_jh, .jt-ui .comiis_viewtit h1 span.top_jg {
float: left; height: 12px; line-height: 12px; margin-right: 4px; margin-bottom: 8px;
text-align: center; padding: 2px; border-radius: 1.5px;
}
.jt-ui .comiis_viewtit h1 a { font-weight: 400; }
.jt-ui .comiis_viewtit_v2 h1 { padding: 5px 0; }
.jt-ui .comiis_postli .comiis_message {
font-size: 16px !important;
line-height: 1.8;
overflow-wrap: anywhere;
word-break: break-word;
}
.jt-ui .comiis_postli .comiis_message p { margin: 0 0 .35em; }
.jt-ui .comiis_postimg { margin: 8px 0; }
.jt-ui .comiis_postimg img,
.jt-ui .comiis_messages .comiis_img_list img { border-radius: 12px; }
.jt-ui .comiis_postimg img,
.jt-ui .comiis_pyqlist_img img,
.jt-ui .comiis_pyqlist_imgs img { background-color: rgba(127, 127, 127, .08); }
/* ---------- portal article ---------- */
.jt-ui .comiis_wzv .view_top h1, .jt-ui .comiis_wzv .view_topv1 h1 {
font-size: 22px !important;
line-height: 1.45;
font-weight: 600 !important;
letter-spacing: -.005em;
}
.jt-ui .comiis_wzv .view_body { font-size: 17px; line-height: 1.85; overflow-wrap: anywhere; }
.jt-ui .comiis_wzv .view_body img:not([src*="smiley"]) { border-radius: 12px; height: auto; }
/* ---------- thread lists -> cards ---------- */
.jt-ui .comiis_forumlist .forumlist_li {
margin: 10px 10px 0;
border-radius: var(--jt-r);
box-shadow: var(--jt-sh);
border-top: 0 !important;
border-bottom: 0 !important;
overflow: hidden;
}
.jt-ui .comiis_forumlist .forumlist_li:last-child { margin-bottom: 10px; }
.jt-ui .forumlist_li .comiis_pyqlist_img img,
.jt-ui .forumlist_li .comiis_pyqlist_imgs li,
.jt-ui .forumlist_li .comiis_pyqlist_imgs img { border-radius: var(--jt-r-sm); }
/* ---------- buttons & touch feedback ---------- */
.jt-ui .comiis_btn, .jt-ui .comiis_sendbtn, .jt-ui .comiis_loadbtn, .jt-ui .tip_btn {
transition: transform .12s ease, opacity .12s ease;
}
.jt-ui .comiis_btn:active, .jt-ui .comiis_sendbtn:active, .jt-ui .comiis_loadbtn:active { transform: scale(.97); }
.jt-ui .comiis_foot_memu li a i { transition: transform .15s var(--jt-ease); }
.jt-ui .comiis_foot_memu li a:active i { transform: scale(.88); }
.jt-ui .comiis_foot_memu { box-shadow: var(--jt-sh-up); }
/* ---------- "explore" block (home / forum index) ---------- */
.jt-explore {
margin: 12px 10px;
padding: 16px 14px 6px;
border-radius: var(--jt-r);
box-shadow: var(--jt-sh);
}
.jt-explore .jt-explore__t { margin: 0 0 10px; font-size: 17px; line-height: 1.4; font-weight: 600 !important; }
.jt-explore__cats ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; padding: 0; list-style: none; }
.jt-explore__cats li { list-style: none; }
.jt-explore__cats a { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: 13px; line-height: 1.4; }
.jt-explore__st { margin: 12px 0 2px; font-size: 13px; font-weight: 500 !important; letter-spacing: .02em; }
.jt-explore__list { margin: 0; padding: 0; list-style: none; }
.jt-explore__list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 0; list-style: none; }
.jt-explore__list li:first-child { border-top: 0 !important; }
.jt-explore__list a {
flex: 1; min-width: 0; font-size: 15px; line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jt-explore__list time { flex: none; font-size: 12px; }
/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
.jt-ui .comiis_btn:active, .jt-ui .comiis_sendbtn:active, .jt-ui .comiis_loadbtn:active,
.jt-ui .comiis_foot_memu li a:active i { transform: none; }
}
/* r22 2026-11-06: "ให้กำลังใจผู้เขียน" did not fit the 52px square of the reward button (made for one Chinese letter) */
body.jt-ui .comiis_rate h2 a{display:inline-block!important;width:auto!important;min-width:52px;height:auto!important;min-height:40px;line-height:22px!important;padding:9px 22px!important;border-radius:999px!important;font-size:15px!important;font-weight:600;white-space:nowrap;overflow:visible!important}
/* r22c 2026-11-06: home icon row - label on one line (was 15px text in a 14px-high box, long words broke into 2 lines) */
body.jt-ui .comiis_mh_hdico5 li p{height:auto;min-height:18px;line-height:18px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:-8px;margin-right:-8px}
/* r24b 2026-11-06: boards two per row (เว็บบอร์ด) - a long board name ends with "…" instead of being cut in the middle of a word */
body.jt-ui .comiis_forum_two li a span{white-space:nowrap;text-overflow:ellipsis}