TOKIMEKI 용 OpenTween 스타일.css

/* =========================================================
   TOKIMEKI -> OpenTween Classic Compact UI
   Stylebot용 사용자 CSS

   기능:
   - 타임라인을 OpenTween식 1행 리스트로 표시
   - 이름:본문 형태
   - 아바타, 핸들, 날짜, 이미지, 동영상, 카드, 인용, 번역, 반응 버튼 숨김
   - FHD / QHD / 4K 자동 대응
   ========================================================= */


/* =========================================================
   0. 기본 변수
   ========================================================= */

:root {
  /* FHD 기본값 */
  --ot-row-height: 18px !important;
  --ot-font-size: 12px !important;
  --ot-name-width: 13em !important;
  --ot-header-height: 22px !important;
  --ot-row-pad-x: 4px !important;

  /* OpenTween / Windows Classic 느낌 */
  --ot-app-bg: #d4d0c8 !important;
  --ot-bg: #ffffff !important;
  --ot-bg-alt: #f6f6f6 !important;
  --ot-bg-hover: #eaf3ff !important;
  --ot-bg-focus: #0a246a !important;
  --ot-bg-new: #fff7d7 !important;

  --ot-text: #000000 !important;
  --ot-text-muted: #666666 !important;
  --ot-name: #000080 !important;
  --ot-link: #0000cc !important;
  --ot-link-focus: #ffff80 !important;

  --ot-border-light: #ffffff !important;
  --ot-border-mid: #b8b8b8 !important;
  --ot-border-dark: #808080 !important;

  /* TOKIMEKI 쪽 테마 변수가 쓰이는 경우도 같이 얇게 보이게 보정 */
  --main-area-opacity: 1 !important;
  --border-radius-small: 0 !important;
  --border-radius-middle: 0 !important;
  --border-radius-large: 0 !important;
}


/* =========================================================
   1. 해상도별 자동 대응
   ========================================================= */

/* FHD / 1600~2199 CSS px */
@media (min-width: 1600px) and (max-width: 2199px) {
  :root {
    --ot-row-height: 18px !important;
    --ot-font-size: 12px !important;
    --ot-name-width: 13em !important;
    --ot-header-height: 22px !important;
    --ot-row-pad-x: 4px !important;
  }
}

/* QHD / 2200~3199 CSS px */
@media (min-width: 2200px) and (max-width: 3199px) {
  :root {
    --ot-row-height: 19px !important;
    --ot-font-size: 13px !important;
    --ot-name-width: 15em !important;
    --ot-header-height: 24px !important;
    --ot-row-pad-x: 5px !important;
  }
}

/* QHD인데 OS 배율/브라우저 확대 때문에 CSS px가 줄어든 경우 */
@media (min-width: 1700px) and (max-width: 2199px) and (min-resolution: 1.2dppx) {
  :root {
    --ot-row-height: 19px !important;
    --ot-font-size: 13px !important;
    --ot-name-width: 15em !important;
    --ot-header-height: 24px !important;
    --ot-row-pad-x: 5px !important;
  }
}

/* 4K / UHD */
@media (min-width: 3200px),
       (min-width: 3000px) and (min-resolution: 1.2dppx),
       (min-width: 2400px) and (min-resolution: 1.45dppx),
       (min-width: 2100px) and (min-resolution: 1.65dppx),
       (min-width: 1900px) and (min-resolution: 1.95dppx) {
  :root {
    --ot-row-height: 22px !important;
    --ot-font-size: 14px !important;
    --ot-name-width: 17em !important;
    --ot-header-height: 26px !important;
    --ot-row-pad-x: 6px !important;
  }
}


/* =========================================================
   2. 전체 앱을 Classic UI 느낌으로
   ========================================================= */

html,
body {
  background: var(--ot-app-bg) !important;
  color: var(--ot-text) !important;
  font-family:
    Tahoma,
    "MS UI Gothic",
    "Meiryo UI",
    "Yu Gothic UI",
    system-ui,
    sans-serif !important;
  font-size: var(--ot-font-size) !important;
}

/* 앱 전체 둥근 모서리 제거 */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* 버튼, 입력, 메뉴도 Windows Classic 쪽으로 */
button,
input,
textarea,
select {
  font-family:
    Tahoma,
    "MS UI Gothic",
    "Meiryo UI",
    "Yu Gothic UI",
    system-ui,
    sans-serif !important;
  font-size: var(--ot-font-size) !important;
}

/* 스크롤바를 조금 더 데스크톱 앱처럼 */
* {
  scrollbar-width: thin !important;
  scrollbar-color: var(--ot-border-dark) var(--ot-app-bg) !important;
}

*::-webkit-scrollbar {
  width: 14px !important;
  height: 14px !important;
  background: var(--ot-app-bg) !important;
}

*::-webkit-scrollbar-thumb {
  background: #a0a0a0 !important;
  border: 1px solid #707070 !important;
}

*::-webkit-scrollbar-track {
  background: var(--ot-app-bg) !important;
}


/* =========================================================
   3. 컬럼 / 헤더 / 탭류 압축
   TOKIMEKI의 멀티 컬럼 UI에도 최대한 안전하게 적용
   ========================================================= */

:where(
  .column-header,
  .deck-column-header,
  .deck-header,
  .timeline-header,
  .app-header,
  .topbar,
  .tab,
  .tabs,
  .tab-list,
  .slider-menu
) {
  min-height: var(--ot-header-height) !important;
  max-height: var(--ot-header-height) !important;
  background: linear-gradient(#f8f8f8, #dcdcdc) !important;
  border-top: 1px solid var(--ot-border-light) !important;
  border-bottom: 1px solid var(--ot-border-dark) !important;
  color: var(--ot-text) !important;
  overflow: hidden !important;
}

:where(
  .column-header,
  .deck-column-header,
  .deck-header,
  .timeline-header,
  .app-header,
  .topbar,
  .tab,
  .tabs,
  .tab-list,
  .slider-menu
) * {
  font-size: var(--ot-font-size) !important;
  line-height: var(--ot-header-height) !important;
}

/* 컬럼이 있는 경우 OpenTween의 탭/리스트 창처럼 경계선을 줌 */
:where(
  .deck-column,
  .deck-column-content,
  .timeline-column,
  .column,
  .column-content
) {
  border-left: 1px solid var(--ot-border-dark) !important;
  border-right: 1px solid var(--ot-border-light) !important;
  background: var(--ot-bg) !important;
}


/* =========================================================
   4. 타임라인 컨테이너
   ========================================================= */

.timeline,
.timeline--default,
.virtual-timeline {
  background: var(--ot-bg) !important;
  color: var(--ot-text) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family:
    Tahoma,
    "MS UI Gothic",
    "Meiryo UI",
    "Yu Gothic UI",
    system-ui,
    sans-serif !important;
  font-size: var(--ot-font-size) !important;
}

/* VirtualList 내부 여백이 생기는 경우 방지 */
.virtual-timeline > *,
.timeline > * {
  gap: 0 !important;
}


/* =========================================================
   5. 핵심: 게시물 하나를 OpenTween식 1행으로 만들기
   ========================================================= */

article.timeline__item {
  display: block !important;
  position: relative !important;

  height: var(--ot-row-height) !important;
  min-height: var(--ot-row-height) !important;
  max-height: var(--ot-row-height) !important;

  margin: 0 !important;
  padding: 0 var(--ot-row-pad-x) !important;

  overflow: hidden !important;
  background: var(--ot-bg) !important;
  color: var(--ot-text) !important;

  border: 0 !important;
  border-bottom: 1px solid #d0d0d0 !important;
  box-shadow: none !important;

  font-family:
    Tahoma,
    "MS UI Gothic",
    "Meiryo UI",
    "Yu Gothic UI",
    system-ui,
    sans-serif !important;
  font-size: var(--ot-font-size) !important;
  line-height: var(--ot-row-height) !important;

  cursor: default !important;
  user-select: text !important;
}

/* 짝수 행 배경 */
article.timeline__item:nth-of-type(even) {
  background: var(--ot-bg-alt) !important;
}

/* 호버 행 */
article.timeline__item:hover {
  background: var(--ot-bg-hover) !important;
}

/* 포커스/선택 행 */
article.timeline__item:focus-within,
article.timeline__item[data-focus="true"],
article.timeline__item[data-selected="true"],
article.timeline__item[aria-selected="true"] {
  background: var(--ot-bg-focus) !important;
  color: #ffffff !important;
}

/* 기본 타임라인 카드/버블/최소/컴팩트 레이아웃의 여분 제거 */
article.timeline__item.timeline__item--compact,
article.timeline__item.timeline__item--minimum,
article.timeline__item.timeline__item--bubble {
  height: var(--ot-row-height) !important;
  min-height: var(--ot-row-height) !important;
  max-height: var(--ot-row-height) !important;
  margin: 0 !important;
  padding: 0 var(--ot-row-pad-x) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 숨김 처리된 항목은 그대로 숨김 유지 */
article.timeline__item.timeline__item--hide {
  display: none !important;
}

/* article 직계 자식 중 실제 본문 컬럼이 아닌 것들 숨김
   - 메뉴
   - 고정글 표시
   - 리포스트 표시
   - 기타 보조 UI */
article.timeline__item > :not(.timeline__column) {
  display: none !important;
}

/* 답글 연결용 보조 컬럼 숨김 */
article.timeline__item > .timeline__column--reply {
  display: none !important;
}

/* 메인 컬럼만 1행으로 */
article.timeline__item > .timeline__column:not(.timeline__column--reply) {
  display: block !important;
  position: relative !important;

  width: 100% !important;
  height: var(--ot-row-height) !important;
  min-height: var(--ot-row-height) !important;
  max-height: var(--ot-row-height) !important;

  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  line-height: var(--ot-row-height) !important;
}


/* =========================================================
   6. 아바타 / 메타 / 본문 배치
   ========================================================= */

/* 아바타 영역 제거 */
article.timeline__item .timeline__image,
article.timeline__item .avatar,
article.timeline__item .avatar-link,
article.timeline__item .avatar-thumbnail {
  display: none !important;
}

/* 실제 내용 영역을 flex 1행으로 */
article.timeline__item .timeline__content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;

  width: 100% !important;
  min-width: 0 !important;

  height: var(--ot-row-height) !important;
  min-height: var(--ot-row-height) !important;
  max-height: var(--ot-row-height) !important;

  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  white-space: nowrap !important;
  line-height: var(--ot-row-height) !important;
}

/* 메타 컨테이너 자체는 없애고, 작성자명만 flex item으로 올림 */
article.timeline__item .timeline__meta {
  display: contents !important;
}

/* 작성자명 외의 메타 정보 숨김 */
article.timeline__item .timeline__meta > :not(.timeline__user) {
  display: none !important;
}

/* 핸들, 날짜, 번역 버튼, 인증 아이콘 등 숨김 */
article.timeline__item .timeline__handle,
article.timeline__item .timeline__date,
article.timeline__item .timeline__verified,
article.timeline__item .timeline-translate-button,
article.timeline__item .verified-icon,
article.timeline__item .verifier-icon,
article.timeline__item .account-labeler-icon,
article.timeline__item .automated-account-icon,
article.timeline__item .account-label-icon {
  display: none !important;
}

/* 작성자명 */
article.timeline__item .timeline__user {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 1 var(--ot-name-width) !important;

  min-width: 2em !important;
  max-width: var(--ot-name-width) !important;

  height: var(--ot-row-height) !important;
  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  color: var(--ot-name) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  font-size: var(--ot-font-size) !important;
  font-weight: normal !important;
  line-height: var(--ot-row-height) !important;
}

/* 이름 뒤 콜론 */
article.timeline__item .timeline__user::after {
  content: ":" !important;
  flex: 0 0 auto !important;
  margin: 0 3px 0 0 !important;
  color: var(--ot-text) !important;
  font-weight: normal !important;
}

/* 선택 행에서 이름/콜론 색상 */
article.timeline__item:focus-within .timeline__user,
article.timeline__item[data-focus="true"] .timeline__user,
article.timeline__item[data-selected="true"] .timeline__user,
article.timeline__item[aria-selected="true"] .timeline__user {
  color: #ffffff !important;
}

article.timeline__item:focus-within .timeline__user::after,
article.timeline__item[data-focus="true"] .timeline__user::after,
article.timeline__item[data-selected="true"] .timeline__user::after,
article.timeline__item[aria-selected="true"] .timeline__user::after {
  color: #ffffff !important;
}


/* =========================================================
   7. 본문을 1행으로 만들기
   ========================================================= */

/* 본문과 미디어를 감싸는 영역 */
article.timeline__item .timeline-warn-wrap {
  display: block !important;
  flex: 1 1 auto !important;

  min-width: 0 !important;
  width: auto !important;

  height: var(--ot-row-height) !important;
  min-height: var(--ot-row-height) !important;
  max-height: var(--ot-row-height) !important;

  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;

  line-height: var(--ot-row-height) !important;
  white-space: nowrap !important;
}

/* warn-wrap 안에서는 실제 텍스트만 남김 */
article.timeline__item .timeline-warn-wrap > :not(.timeline__text) {
  display: none !important;
}

/* 본문 */
article.timeline__item .timeline__text {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;

  height: var(--ot-row-height) !important;
  min-height: var(--ot-row-height) !important;
  max-height: var(--ot-row-height) !important;

  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;

  color: var(--ot-text) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: normal !important;

  font-size: var(--ot-font-size) !important;
  font-weight: normal !important;
  line-height: var(--ot-row-height) !important;
}

/* 본문 내부 span/link/tag를 모두 한 줄 흐름으로 */
article.timeline__item .timeline__text *,
article.timeline__item .timeline__text [data-timeline-text],
article.timeline__item .timeline__text .tag-wrap,
article.timeline__item .timeline__text .tag-wrap * {
  display: inline !important;
  float: none !important;

  margin: 0 !important;
  padding: 0 !important;

  white-space: nowrap !important;
  word-break: normal !important;
  vertical-align: baseline !important;

  font-size: var(--ot-font-size) !important;
  font-weight: normal !important;
  line-height: var(--ot-row-height) !important;
}

/* 줄바꿈 제거 */
article.timeline__item .timeline__text br {
  display: none !important;
}

/* 링크 색상 */
article.timeline__item .timeline__text a,
article.timeline__item .timeline__text .textlink,
article.timeline__item .timeline__text .link,
article.timeline__item .timeline__text [data-timeline-text] a {
  color: var(--ot-link) !important;
  text-decoration: none !important;
}

/* 선택 행 링크 색상 */
article.timeline__item:focus-within .timeline__text,
article.timeline__item:focus-within .timeline__text *,
article.timeline__item[data-focus="true"] .timeline__text,
article.timeline__item[data-focus="true"] .timeline__text *,
article.timeline__item[data-selected="true"] .timeline__text,
article.timeline__item[data-selected="true"] .timeline__text *,
article.timeline__item[aria-selected="true"] .timeline__text,
article.timeline__item[aria-selected="true"] .timeline__text * {
  color: #ffffff !important;
}

article.timeline__item:focus-within .timeline__text a,
article.timeline__item[data-focus="true"] .timeline__text a,
article.timeline__item[data-selected="true"] .timeline__text a,
article.timeline__item[aria-selected="true"] .timeline__text a {
  color: var(--ot-link-focus) !important;
}


/* =========================================================
   8. 이미지 / 동영상 / 카드 / 인용 / 번역 / 반응 버튼 숨김
   ========================================================= */

article.timeline__item .timeline-images-wrap,
article.timeline__item .timeline-image-wrap,
article.timeline__item .timeline-video-wrap,
article.timeline__item .timeline-external-wrap,
article.timeline__item .timeline-translated-text,
article.timeline__item .timeline-reaction,
article.timeline__item .timeline-read-thread-link,
article.timeline__item .timeline-repost-message,
article.timeline__item .timeline-hidden-item,
article.timeline__item .sticky-text,
article.timeline__item .whisper-indicator,
article.timeline__item .embed-record,
article.timeline__item .embed-post,
article.timeline__item .embed-card,
article.timeline__item .feed-card,
article.timeline__item .list-card,
article.timeline__item .starter-pack-card,
article.timeline__item .media-list,
article.timeline__item .skyblur-show,
article.timeline__item video,
article.timeline__item img:not(.emoji) {
  display: none !important;
}

/* 반응 버튼이 display:grid/flex로 살아나는 경우까지 차단 */
article.timeline__item [class*="reaction"],
article.timeline__item [class*="Reaction"],
article.timeline__item [class*="repost-message"],
article.timeline__item [class*="read-thread"] {
  display: none !important;
}

/* 단, 본문 안의 텍스트 링크/태그는 유지 */
article.timeline__item .timeline__text [class*="tag"],
article.timeline__item .timeline__text [class*="link"],
article.timeline__item .timeline__text a,
article.timeline__item .timeline__text span {
  display: inline !important;
}


/* =========================================================
   9. 로딩 / 더 보기 / 무한 로딩 영역 압축
   ========================================================= */

.infinite-loading,
.load-more,
.loading,
.timeline-loading {
  min-height: calc(var(--ot-row-height) + 4px) !important;
  max-height: calc(var(--ot-row-height) + 4px) !important;
  height: calc(var(--ot-row-height) + 4px) !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #efefef !important;
  border-top: 1px solid var(--ot-border-light) !important;
  border-bottom: 1px solid var(--ot-border-dark) !important;

  font-size: var(--ot-font-size) !important;
  line-height: calc(var(--ot-row-height) + 4px) !important;
  overflow: hidden !important;
}


/* =========================================================
   10. 프로필/검색 결과의 글 목록도 같은 톤으로
   ========================================================= */

.profile-post-popover article.timeline__item,
.post-search-view article.timeline__item,
.timeline-view article.timeline__item,
.feed article.timeline__item {
  height: var(--ot-row-height) !important;
  min-height: var(--ot-row-height) !important;
  max-height: var(--ot-row-height) !important;
}


/* =========================================================
   11. 선택사항: 모바일에서도 같은 1행 리스트 강제
   모바일에서 너무 좁으면 이 블록을 삭제하셔도 됩니다.
   ========================================================= */

@media not all and (min-width: 512px) {
  :root {
    --ot-row-height: 20px !important;
    --ot-font-size: 12px !important;
    --ot-name-width: 9em !important;
    --ot-header-height: 24px !important;
    --ot-row-pad-x: 4px !important;
  }

  article.timeline__item {
    height: var(--ot-row-height) !important;
    min-height: var(--ot-row-height) !important;
    max-height: var(--ot-row-height) !important;
  }
}


/* =========================================================
   12. 선택사항: 작성자명을 더 진한 OpenTween풍 파란색으로
   ========================================================= */

article.timeline__item .timeline__user {
  color: #000080 !important;
}

article.timeline__item:hover .timeline__user {
  color: #0000a0 !important;
}


/* =========================================================
   13. 선택사항: 새 글/강조 배경처럼 보이는 항목을 더 옅게
   TOKIMEKI 내부 상태 클래스가 붙는 경우만 적용됩니다.
   ========================================================= */

article.timeline__item[data-is-new="true"],
article.timeline__item.timeline__item--new,
article.timeline__item.is-new {
  background: var(--ot-bg-new) !important;
}

/* =========================================================
   TOKIMEKI 1컬럼 가로폭 확장
   기본 1컬럼 / Single layout용
   ========================================================= */

:root,
.app {
  /* 여기 숫자만 바꾸시면 됩니다.
     FHD: 900~1000px
     QHD: 1050~1200px
     4K: 1300~1600px 권장 */
  --tok-single-width: min(96vw, 2000px) !important;

  /* TOKIMEKI single column 폭 변수 덮어쓰기 */
  --single-column-width: var(--tok-single-width) !important;
  --single-m-width: var(--tok-single-width) !important;
  --single-l-width: var(--tok-single-width) !important;
  --single-xl-width: var(--tok-single-width) !important;
  --single-xxl-width: var(--tok-single-width) !important;
}

/* 실제 1컬럼 래퍼 */
.single-wrap {
  width: var(--tok-single-width) !important;
  max-width: min(100vw, var(--tok-single-width)) !important;
}

/* 내부 타임라인도 부모 폭을 따라가게 */
.single-timeline-wrap,
.single-wrap .deck-row,
.single-wrap .deck-row--single,
.single-wrap .timeline {
  width: 100% !important;
  max-width: none !important;
}

/* 1컬럼 모드에서는 deck-row 쪽 폭 제한을 제거 */
.single-wrap .deck-row--single {
  width: 100% !important;
  max-width: none !important;
}