Last active
May 21, 2026 15:44
-
-
Save lunamoth/375de6443995b8ceb81f3ee28b08a004 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ========================================================= | |
| Klearsky -> OpenTween compact one-line timeline | |
| Stylebot에 그대로 붙여 넣기 | |
| ========================================================= */ | |
| /* ----- 조절용 변수 ----- */ | |
| :root { | |
| --ot-row-height: 19px; /* 한 줄 높이: 18~22px 정도로 조절 */ | |
| --ot-font-size: 12px; /* 글자 크기 */ | |
| --ot-name-width: 13em; /* 이름 칸 최대 폭 */ | |
| --ot-border: #b8b8b8; | |
| --ot-bg: #ffffff; | |
| --ot-bg-alt: #f6f6f6; | |
| --ot-bg-hover: #eaf3ff; | |
| --ot-bg-selected: #0a246a; | |
| --ot-text: #000000; | |
| --ot-name: #000080; | |
| } | |
| /* ----- 전체를 Windows Classic / OpenTween 느낌으로 ----- */ | |
| body { | |
| background: #d4d0c8 !important; | |
| color: var(--ot-text) !important; | |
| font-family: | |
| Tahoma, | |
| "MS UI Gothic", | |
| "Meiryo UI", | |
| "Yu Gothic UI", | |
| sans-serif !important; | |
| font-size: var(--ot-font-size) !important; | |
| } | |
| /* 둥근 모서리 제거 */ | |
| body { | |
| --border-radius-small: 0 !important; | |
| --border-radius-middle: 0 !important; | |
| --border-radius-large: 0 !important; | |
| } | |
| /* 중앙 타임라인 영역을 데스크톱 앱 리스트처럼 */ | |
| .main-view__main { | |
| max-width: none !important; | |
| width: 100% !important; | |
| } | |
| .router-view-wrapper { | |
| max-width: none !important; | |
| background: var(--ot-bg) !important; | |
| border-left: 1px solid #808080 !important; | |
| border-right: 1px solid #ffffff !important; | |
| } | |
| /* 헤더/탭을 낮고 납작하게 */ | |
| .page-header, | |
| .slider-menu, | |
| .tab { | |
| min-height: 22px !important; | |
| max-height: 24px !important; | |
| background: linear-gradient(#f8f8f8, #dcdcdc) !important; | |
| border-bottom: 1px solid #808080 !important; | |
| } | |
| .page-header { | |
| padding: 0 4px !important; | |
| } | |
| .page-header > h1, | |
| .page-header > h2, | |
| .slider-menu__link > span, | |
| .tab__button > span { | |
| font-size: var(--ot-font-size) !important; | |
| line-height: 20px !important; | |
| } | |
| .tab__button, | |
| .slider-menu__link { | |
| min-height: 22px !important; | |
| max-height: 22px !important; | |
| padding: 0 6px !important; | |
| } | |
| /* 피드/게시물 사이 간격 제거 */ | |
| .feed, | |
| .feeds, | |
| .feed-list, | |
| .post-container, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view { | |
| gap: 0 !important; | |
| } | |
| .post-wrapper { | |
| margin: 0 !important; | |
| border: 0 !important; | |
| } | |
| .post-wrapper:not(:first-child)[data-is-latest="true"] { | |
| margin-top: 0 !important; | |
| border-top: 1px solid #808080 !important; | |
| } | |
| /* ----- 핵심: 게시물을 1행 "이름:텍스트"로 만들기 ----- */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post:not([data-position="preview"]):not([data-position="chatMessage"]):not([data-position="postInPost"]) { | |
| --post-padding: 0 !important; | |
| --left-space: 0 !important; | |
| --avatar-size: 0 !important; | |
| display: block !important; | |
| height: var(--ot-row-height) !important; | |
| min-height: var(--ot-row-height) !important; | |
| max-height: var(--ot-row-height) !important; | |
| padding: 0 4px !important; | |
| overflow: hidden !important; | |
| background: var(--ot-bg) !important; | |
| color: var(--ot-text) !important; | |
| border-bottom: 1px solid #d0d0d0 !important; | |
| font-family: | |
| Tahoma, | |
| "MS UI Gothic", | |
| "Meiryo UI", | |
| "Yu Gothic UI", | |
| sans-serif !important; | |
| font-size: var(--ot-font-size) !important; | |
| line-height: var(--ot-row-height) !important; | |
| user-select: text !important; | |
| } | |
| /* 偶数行を薄く変える */ | |
| .post-wrapper:nth-child(even) | |
| > .post:not([data-position="preview"]):not([data-position="chatMessage"]):not([data-position="postInPost"]) { | |
| background: var(--ot-bg-alt) !important; | |
| } | |
| /* ホバー */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post:not([data-position="preview"]):not([data-position="chatMessage"]):not([data-position="postInPost"]):hover { | |
| background: var(--ot-bg-hover) !important; | |
| } | |
| /* 選択/フォーカス行 */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post[data-focus="true"]:not([data-position="preview"]):not([data-position="chatMessage"]):not([data-position="postInPost"]) { | |
| background: var(--ot-bg-selected) !important; | |
| color: #ffffff !important; | |
| } | |
| /* スレッドの縦線などを消す */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post::before { | |
| display: none !important; | |
| } | |
| /* 返信/リポスト見出し、古い投稿警告などを消す */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post > .header, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .replier, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .reposter, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .old-post-notification { | |
| display: none !important; | |
| } | |
| /* body를横一列にする */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post > .body { | |
| display: flex !important; | |
| align-items: center !important; | |
| gap: 0 !important; | |
| height: var(--ot-row-height) !important; | |
| min-width: 0 !important; | |
| overflow: hidden !important; | |
| white-space: nowrap !important; | |
| } | |
| /* headerコンテナ自体は消して、中身だけ横並びに流す */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post > .body > .body__header { | |
| display: contents !important; | |
| } | |
| /* アバター、ハンドル、時刻、メニューボタンを非表示 */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .body__header__avatar, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .body__header__detail, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .body__header__menu-button { | |
| display: none !important; | |
| } | |
| /* 名前部分 */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .body__header__display-name { | |
| display: inline-flex !important; | |
| align-items: center !important; | |
| flex: 0 1 auto !important; | |
| max-width: var(--ot-name-width) !important; | |
| min-width: 2em !important; | |
| overflow: hidden !important; | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| color: var(--ot-name) !important; | |
| line-height: var(--ot-row-height) !important; | |
| } | |
| /* 名前の後ろに ":" を付ける */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .body__header__display-name::after { | |
| content: ":" !important; | |
| flex: 0 0 auto !important; | |
| margin: 0 3px 0 0 !important; | |
| color: var(--ot-text) !important; | |
| font-weight: normal !important; | |
| } | |
| /* 名前内の表示調整 */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .body__header__display-name > a, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .body__header__display-name .display-name { | |
| display: inline-flex !important; | |
| align-items: center !important; | |
| min-width: 0 !important; | |
| max-width: 100% !important; | |
| overflow: hidden !important; | |
| color: var(--ot-name) !important; | |
| font-size: var(--ot-font-size) !important; | |
| line-height: var(--ot-row-height) !important; | |
| font-weight: normal !important; | |
| } | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .display-name__name { | |
| display: inline-block !important; | |
| min-width: 0 !important; | |
| max-width: 100% !important; | |
| overflow: hidden !important; | |
| color: var(--ot-name) !important; | |
| text-overflow: ellipsis !important; | |
| white-space: nowrap !important; | |
| font-size: var(--ot-font-size) !important; | |
| line-height: var(--ot-row-height) !important; | |
| font-weight: normal !important; | |
| } | |
| /* pronouns / verified / label icon 등 이름 옆 장식 제거 */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .display-name__pronouns, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .body__header__display-name .svg-icon, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .body__header__display-name .verified-icon, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .body__header__display-name .verifier-icon, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .body__header__display-name .account-labeler-icon, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .body__header__display-name .automated-account-icon, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .body__header__display-name .account-label-icon { | |
| display: none !important; | |
| } | |
| /* 本文コンテナ */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .post__content { | |
| display: block !important; | |
| flex: 1 1 auto !important; | |
| min-width: 0 !important; | |
| height: var(--ot-row-height) !important; | |
| padding-left: 0 !important; | |
| margin: 0 !important; | |
| overflow: hidden !important; | |
| line-height: var(--ot-row-height) !important; | |
| } | |
| /* 本文を1行にする */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .post__content > .text, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .post__content > .text--slim, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .post__content > .html-text { | |
| display: block !important; | |
| height: var(--ot-row-height) !important; | |
| max-height: var(--ot-row-height) !important; | |
| overflow: hidden !important; | |
| color: var(--ot-text) !important; | |
| text-overflow: ellipsis !important; | |
| white-space: nowrap !important; | |
| word-break: normal !important; | |
| line-height: var(--ot-row-height) !important; | |
| font-size: var(--ot-font-size) !important; | |
| font-weight: normal !important; | |
| } | |
| /* 本文内 링크/spanも同じ行に流す */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .post__content > .text *, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .post__content > .text--slim *, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .post__content > .html-text * { | |
| display: inline !important; | |
| line-height: var(--ot-row-height) !important; | |
| font-size: var(--ot-font-size) !important; | |
| vertical-align: baseline !important; | |
| } | |
| /* 改行をスペース扱いに寄せる */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .post__content br { | |
| display: none !important; | |
| } | |
| /* リンク色 */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .textlink, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .textlink > span { | |
| color: #0000cc !important; | |
| text-decoration: none !important; | |
| } | |
| /* 画像/動画/引用/カード/翻訳/ラベル/リアクションなど全部消す */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .reaction-container, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .label-tags, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .post__content-filtering-toggle, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .content-filtering-toggle, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .quad-images, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .image-list, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .image-folder-button, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .omit-images, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .video-container, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .external, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .repost, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .quote-post-toggle, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .feed-card, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .list-card, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .starter-pack-card, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .translated-text, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .post__mask { | |
| display: none !important; | |
| } | |
| /* 빈 본문일 때 높이가 튀는 것 방지 */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .post__content:empty { | |
| display: block !important; | |
| } | |
| /* 더 보기/로드 버튼도 얇게 */ | |
| .load-button { | |
| min-height: 22px !important; | |
| max-height: 22px !important; | |
| background: #efefef !important; | |
| border-top: 1px solid #ffffff !important; | |
| border-bottom: 1px solid #808080 !important; | |
| } | |
| /* ========================================================= | |
| Klearsky OpenTween Compact UI | |
| FHD / QHD / 4K 해상도별 자동 대응 패치 | |
| 사용법: | |
| 1. 이전 OpenTween화 CSS 전체를 먼저 붙입니다. | |
| 2. 이 블록을 반드시 맨 아래에 붙입니다. | |
| ========================================================= */ | |
| /* --------------------------------------------------------- | |
| 기본값: FHD / 1920x1080 계열 | |
| --------------------------------------------------------- */ | |
| :root { | |
| --ot-row-height: 18px !important; | |
| --ot-font-size: 12px !important; | |
| --ot-name-width: 12.5em !important; | |
| --ot-header-height: 22px !important; | |
| --ot-row-pad-x: 4px !important; | |
| /* 좌측 메뉴는 아이콘만 남기는 폭 */ | |
| --ot-left-menu-width: 44px !important; | |
| /* OpenTween 느낌을 위해 우측 서브메뉴는 기본 숨김 */ | |
| --ot-right-menu-width: 0px !important; | |
| --ot-right-menu-display: none !important; | |
| } | |
| /* --------------------------------------------------------- | |
| FHD 명시값 | |
| 1920x1080 / 1920x1200 / 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: 12.5em !important; | |
| --ot-header-height: 22px !important; | |
| --ot-row-pad-x: 4px !important; | |
| --ot-left-menu-width: 44px !important; | |
| } | |
| } | |
| /* --------------------------------------------------------- | |
| QHD | |
| 2560x1440 / 2560x1600 계열 | |
| --------------------------------------------------------- */ | |
| @media (min-width: 2200px) and (max-width: 3199px) { | |
| :root { | |
| --ot-row-height: 19px !important; | |
| --ot-font-size: 13px !important; | |
| --ot-name-width: 14.5em !important; | |
| --ot-header-height: 24px !important; | |
| --ot-row-pad-x: 5px !important; | |
| --ot-left-menu-width: 50px !important; | |
| } | |
| } | |
| /* QHD에서 Windows 배율 125~150% 또는 브라우저 확대가 걸린 경우 */ | |
| @media (min-width: 1700px) and (max-width: 2199px) and (min-resolution: 1.2dppx) and (max-resolution: 1.64dppx) { | |
| :root { | |
| --ot-row-height: 19px !important; | |
| --ot-font-size: 13px !important; | |
| --ot-name-width: 14.5em !important; | |
| --ot-header-height: 24px !important; | |
| --ot-row-pad-x: 5px !important; | |
| --ot-left-menu-width: 50px !important; | |
| } | |
| } | |
| /* --------------------------------------------------------- | |
| 4K / UHD | |
| 3840x2160 계열 | |
| --------------------------------------------------------- */ | |
| @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; | |
| --ot-left-menu-width: 56px !important; | |
| } | |
| } | |
| /* ========================================================= | |
| 해상도별 변수 실제 적용부 | |
| 이전 CSS의 값들을 마지막에 다시 덮어씁니다. | |
| ========================================================= */ | |
| /* 전체 폰트 크기 */ | |
| body { | |
| font-size: var(--ot-font-size) !important; | |
| } | |
| /* 중앙 영역을 해상도 전체 폭으로 사용 */ | |
| @media (min-width: 512px) { | |
| .main-view__main { | |
| max-width: none !important; | |
| width: 100vw !important; | |
| margin: 0 !important; | |
| } | |
| .router-view-wrapper { | |
| flex: 1 1 auto !important; | |
| min-width: 0 !important; | |
| max-width: none !important; | |
| width: auto !important; | |
| } | |
| } | |
| /* 좌측 메뉴를 OpenTween식 얇은 도구막대처럼 */ | |
| @media (min-width: 512px) { | |
| .main-menu-vertical-wrapper, | |
| .main-menu-vertical-wrapper__inner, | |
| .main-menu-vertical { | |
| min-width: var(--ot-left-menu-width) !important; | |
| max-width: var(--ot-left-menu-width) !important; | |
| } | |
| .main-menu-vertical { | |
| padding: 2px 3px 4px !important; | |
| gap: 2px !important; | |
| grid-gap: 2px !important; | |
| } | |
| .main-menu-vertical__scroller { | |
| gap: 2px !important; | |
| grid-gap: 2px !important; | |
| } | |
| .main-menu-vertical .label, | |
| .main-menu-vertical .profile-button > .label { | |
| display: none !important; | |
| } | |
| .main-menu-vertical .link-button { | |
| grid-template-columns: min-content !important; | |
| justify-content: center !important; | |
| border-radius: 0 !important; | |
| width: 100% !important; | |
| } | |
| .main-menu-vertical .link-button .icon { | |
| display: flex !important; | |
| align-items: center !important; | |
| justify-content: center !important; | |
| margin: 2px !important; | |
| min-width: calc(var(--ot-left-menu-width) - 8px) !important; | |
| max-width: calc(var(--ot-left-menu-width) - 8px) !important; | |
| min-height: calc(var(--ot-header-height) - 4px) !important; | |
| max-height: calc(var(--ot-header-height) - 4px) !important; | |
| } | |
| .main-menu-vertical .link-button .icon .svg-icon { | |
| font-size: calc(var(--ot-font-size) + 4px) !important; | |
| } | |
| .main-menu-vertical .profile-button { | |
| --size: calc(var(--ot-left-menu-width) - 12px) !important; | |
| --padding: 3px !important; | |
| margin-top: 2px !important; | |
| padding: var(--padding) !important; | |
| } | |
| } | |
| /* 우측 서브메뉴는 기본 숨김 */ | |
| @media (min-width: 1024px) { | |
| .sub-menu-wrapper, | |
| .sub-menu-wrapper__inner, | |
| .sub-menu-wrapper .sub-menu { | |
| display: var(--ot-right-menu-display) !important; | |
| min-width: var(--ot-right-menu-width) !important; | |
| max-width: var(--ot-right-menu-width) !important; | |
| } | |
| } | |
| /* 헤더 / 탭 / 슬라이더 메뉴 높이 해상도별 적용 */ | |
| .page-header, | |
| .slider-menu, | |
| .tab { | |
| min-height: var(--ot-header-height) !important; | |
| max-height: var(--ot-header-height) !important; | |
| } | |
| .slider-menu::before { | |
| height: var(--ot-header-height) !important; | |
| } | |
| .page-header { | |
| padding-top: 0 !important; | |
| padding-bottom: 0 !important; | |
| } | |
| .page-header > h1, | |
| .page-header > h2, | |
| .slider-menu__link > span, | |
| .tab__button > span { | |
| font-size: var(--ot-font-size) !important; | |
| line-height: var(--ot-header-height) !important; | |
| } | |
| .page-header button, | |
| .tab__button, | |
| .slider-menu__link { | |
| min-height: var(--ot-header-height) !important; | |
| max-height: var(--ot-header-height) !important; | |
| padding-top: 0 !important; | |
| padding-bottom: 0 !important; | |
| } | |
| /* 게시물 1행 높이 해상도별 재적용 */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post:not([data-position="preview"]):not([data-position="chatMessage"]):not([data-position="postInPost"]) { | |
| height: var(--ot-row-height) !important; | |
| min-height: var(--ot-row-height) !important; | |
| max-height: var(--ot-row-height) !important; | |
| padding-left: var(--ot-row-pad-x) !important; | |
| padding-right: var(--ot-row-pad-x) !important; | |
| font-size: var(--ot-font-size) !important; | |
| line-height: var(--ot-row-height) !important; | |
| } | |
| /* 선택된 글에서 Klearsky 기본 CSS가 글자를 키우는 현상 방지 */ | |
| .post[data-focus="true"]:not([data-position="preview"]) .text:not([data-is-text-only-emoji="true"]), | |
| .post[data-focus="true"]:not([data-position="preview"]) .text--slim, | |
| .post[data-focus="true"]:not([data-position="preview"]) .html-text { | |
| font-size: var(--ot-font-size) !important; | |
| } | |
| /* body / 이름 / 본문 높이 재적용 */ | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post > .body { | |
| height: var(--ot-row-height) !important; | |
| line-height: var(--ot-row-height) !important; | |
| } | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .body__header__display-name { | |
| max-width: var(--ot-name-width) !important; | |
| line-height: var(--ot-row-height) !important; | |
| } | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .display-name__name { | |
| font-size: var(--ot-font-size) !important; | |
| line-height: var(--ot-row-height) !important; | |
| } | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .post__content { | |
| height: var(--ot-row-height) !important; | |
| line-height: var(--ot-row-height) !important; | |
| } | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .post__content > .text, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .post__content > .text--slim, | |
| :is( | |
| .feed-list, | |
| .post-container, | |
| .feeds, | |
| .post-view, | |
| .timeline-view, | |
| .profile-view, | |
| .search-view, | |
| .globalline-view | |
| ) .post .post__content > .html-text { | |
| height: var(--ot-row-height) !important; | |
| max-height: var(--ot-row-height) !important; | |
| font-size: var(--ot-font-size) !important; | |
| line-height: var(--ot-row-height) !important; | |
| } | |
| /* 더 보기 버튼도 해상도별로 얇게 */ | |
| .load-button { | |
| min-height: calc(var(--ot-row-height) + 4px) !important; | |
| max-height: calc(var(--ot-row-height) + 4px) !important; | |
| } | |
| .load-button > .svg-icon { | |
| font-size: calc(var(--ot-font-size) + 3px) !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment