sinbi

SIR 디자인 커스텀 CSS 코드

적용하실 분은 스타일봇 크롬 확장 프로그램 설치 후 적용해 보세요.

  • 장점: 글자가 커짐
  • 단점: 일부 페이지 레이아웃 엉망 (예) 매뉴얼 페이지 / 다크모드 지원 X / PC만 지원

 

[code]
/*************************************
▣ 전체 공통 (LIGHT ONLY)
*************************************/
html:not(.dark) body {
  padding:0 80px;
  background-color: white !important;
  box-sizing: border-box;
}
/* 폰트 종류 */
html:not(.dark) *:not(i) {
  font-family: inter, Roboto, Verdana, Arial, Geneva, Tahoma, sans-serif;
}
html:not(.dark) main div:not(.text-sm, .text-xs) {
  overflow: visible;
}
/* 글자 뿌연 효과 제거 */
html:not(.dark) html,
html:not(.dark) body {
  -webkit-font-smoothing: subpixel-antialiased !important;
  -moz-osx-font-smoothing: auto !important;
}
html:not(.dark) [class*="blur"],
html:not(.dark) [class*="backdrop"] {
  filter: none !important;
  backdrop-filter: none !important;
}
/*************************************
▣ 헤드
*************************************/
/* 탑 배너 숨기기 */
html:not(.dark) #announcement-banner,
html:not(.dark) #login-help-banner {
  display: none;
}
/* 1단 메뉴 글자크기 */
html:not(.dark) nav.hidden.md\:flex a {
  font-size: 18px;
}
/* 프로필 배경색 */
html:not(.dark) svg g:has(circle[cx="50"][cy="50"][r="50"]) {
  display: none !important;
}
/*************************************
▣ 게시판 목록 (List)
*************************************/
html:not(.dark) .board-post-link,
html:not(.dark) .flex.items-center > a {
  font-size: 22px !important;
  font-weight: 500;
  line-height: 1.56;
}
html:not(.dark) .hover\:text-qa-primary-light:hover {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
/* 댓글 개수 */
html:not(.dark) a.board-post-link span.text-orange-500 {
  font-size:22px;
  font-weight:bold;
}
/* hover */
html:not(.dark) .hover\:bg-gray-50:hover {
  --tw-bg-opacity: 0;
}
html:not(.dark) .hover\:bg-gray-50:hover a {
  text-decoration: underline;
}
/*************************************
▣ 게시판 본문 (view)
*************************************/
html:not(.dark) .board-content,
html:not(.dark) .comment-content,
html:not(.dark) .singo_view * {
  font-size: 22px !important;
  line-height: 1.6;
}
/*************************************
▣ 게시판 댓글 (Comment)
*************************************/
html:not(.dark) div.comment-content {
  font-size: 24px;
  color: blue;
  line-height: 1.6;
}
/*************************************
▣ 질문게시판 목록 (List)
*************************************/
/* 질문 상태 모양 */
html:not(.dark) .space-y-1 .flex-shrink-0 > div {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}
html:not(.dark) .space-y-1 .flex-shrink-0 > div span.text-xl,
html:not(.dark) .space-y-1 .flex-shrink-0 > div span.sm\:text-2xl {
  line-height: 1;
}
/* 답변대기 */
html:not(.dark) body div.flex.flex-col.items-center.justify-center.bg-gray-50.dark\:bg-gray-700\/50.border-gray-200 {
  background-color: #fff0f6 !important;
  border-color: #ffadd2 !important;
}
html:not(.dark) body div.flex.flex-col.items-center.justify-center.bg-gray-50.dark\:bg-gray-700\/50.border-gray-200 > span.text-gray-500 {
  color: #eb2f96 !important;
}
html:not(.dark) body div.flex.flex-col.items-center.justify-center.bg-gray-50.dark\:bg-gray-700\/50.border-gray-200 > span.text-gray-400.font-bold {
  color: #c41d7f !important;
}
/* 미채택 */
html:not(.dark) div.flex.flex-col.items-center.justify-center.bg-blue-50 {
  background-color: #fff7ed !important;
  border-color: #ffedd5 !important;
}
html:not(.dark) div.flex.flex-col.items-center.justify-center.bg-blue-50 > span {
  background: none !important;
  color: #f97316 !important;
}
html:not(.dark) div.flex.flex-col.items-center.justify-center.bg-blue-50 > span.font-bold {
  color: #ea580c !important;
}
/* 미채택 완료 */
html:not(.dark) div.flex.flex-col.items-center.justify-center.bg-orange-50 {
  background-color: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
}
html:not(.dark) div.flex.flex-col.items-center.justify-center.bg-orange-50 > span {
  background: none !important;
  color: #4a4a4a !important;
}
html:not(.dark) div.flex.flex-col.items-center.justify-center.bg-orange-50 > span.font-bold {
  color: #333333 !important;
}
/* 질문글 제목 글씨크기 */
html:not(.dark) .space-y-1 h3.text-base a,
html:not(.dark) .space-y-1 h3.sm\:text-lg a {
  font-size: 1.5rem;
  color: blue;
  word-break: break-word;
}
html:not(.dark) .space-y-1 h3.text-base a:hover,
html:not(.dark) .space-y-1 h3.sm\:text-lg a:hover {
  text-decoration: underline !important;
}
/* 리스트 배경 */
html:not(.dark) div.space-y-1 > div.border {
  border-width:0;
  border-radius:0;
  background-color: transparent !important;
}
html:not(.dark) div.space-y-1 > div.border:hover {
  box-shadow: none !important;
}
html:not(.dark) div.space-y-1 > div.border:nth-child(5n):not(:nth-child(n+16)) {
  border-bottom: 0 solid silver;
}
/*************************************
▣ 질문게시판 본문 (view)
*************************************/
html:not(.dark) .qa-content,
html:not(.dark) .qa-content * {
  font-size: 22px !important;
  line-height: 1.6;
}
html:not(.dark) .qa-content div[style*="background-color:#23272e"] {
  margin:30px 0;
}
/*************************************
▣ 질문게시판 답변 / 댓글
*************************************/
/* 채택 답변 상단 */
html:not(.dark) .bg-gradient-to-r.from-green-50.to-emerald-50.dark\:from-green-900\/20.dark\:to-emerald-900\/20 .px-6.py-3.border-b.border-green-200.dark\:border-green-800 {
  border-radius: 12px 12px 0 0;
}
/* 답변 댓글 */
html:not(.dark) div.text-xs.text-gray-700.leading-relaxed {
  font-size: 22px !important;
  color: blue !important;
}
/*************************************
▣ 갤러리 게시판 목록 (List)
*************************************/
html:not(.dark) .sm\:grid-cols-2 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/*************************************
▣ 웹진 게시판 목록 (List)
*************************************/
div.flex.p-2\.5.sm\:p-4.gap-2\.5.sm\:gap-4 > div.flex-1.min-w-0.flex.flex-col.justify-center > div.flex.items-start.gap-2 > a.flex-1.min-w-0 > h3 {
  font-size: 25px;
  line-height: 1.6;
  color:blue !important;
}
/*************************************
▣ 메인 / 그룹 페이지
*************************************/
html:not(.dark) div.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.gap-4.md\:gap-6,
html:not(.dark) div.grid.grid-cols-1.lg\:grid-cols-3.gap-4.mb-4,
html:not(.dark) div.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 {
  grid-template-columns: 1fr !important;
}
/* 글 제목 */
html:not(.dark) div.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.gap-4.md\:gap-6 p.text-sm.truncate,
html:not(.dark) #latestPosts div.flex-1 > div.text-sm.font-bold.truncate,
html:not(.dark) #popularPosts div.flex-1 > div.text-sm.font-bold.truncate,
html:not(.dark) #hero-recent-community div.text-sm.font-medium.truncate,
html:not(.dark) #popular-posts-section div.text-sm.font-medium.truncate,
html:not(.dark) #project-requests-section div.text-sm.font-medium.truncate,
html:not(.dark) #latestComments div.text-sm.truncate,
html:not(.dark) #hero-recent-makeit .text-sm.font-medium.truncate,
html:not(.dark) #stackguides-section .text-sm.font-medium.truncate,
html:not(.dark) #hero-recent-showcase .text-sm.font-medium.truncate,
html:not(.dark) div.p-3.space-y-2 > a.block.p-2.rounded > div.text-sm.font-bold.truncate,
html:not(.dark) div.p-3.space-y-2 > a.block.p-2.rounded > div:nth-of-type(1) {
  font-size: 24px;
  line-height: 1.6;
  color: blue;
  font-weight: 500;
  white-space: normal;
  word-break: break-word;
}
/* 글쓴이 · 시간 */
html:not(.dark) #hero-recent-community div.text-xs.text-gray-500,
html:not(.dark) #popular-posts-section div.text-xs.text-gray-500,
html:not(.dark) #project-requests-section div.text-xs.text-gray-500,
html:not(.dark) #latestPosts div.text-xs,
html:not(.dark) #popularPosts div.text-xs,
html:not(.dark) #latestComments div.text-xs,
html:not(.dark) #hero-recent-makeit .text-xs.text-gray-500,
html:not(.dark) #stackguides-section .text-xs.text-gray-500,
html:not(.dark) #hero-recent-showcase .text-xs.text-gray-500,
html:not(.dark) div.p-3.space-y-2 > a.block.p-2.rounded > div.text-xs.font-medium,
html:not(.dark) div.p-3.space-y-2 > a.block.p-2.rounded > div:nth-of-type(2) {
  font-size: 18px !important;
  line-height: 1.6 !important;
}
/* 섹션 설명 숨김 */
html:not(.dark) div.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.gap-4.md\:gap-6 > div > p.text-gray-700.mb-4 {
  display: none !important;
}
/* 카드 배경 제거 */
html:not(.dark) #hero-recent-community a,
html:not(.dark) #popular-posts-section a,
html:not(.dark) #project-requests-section a,
html:not(.dark) #hero-recent-makeit a,
html:not(.dark) #stackguides-section a,
html:not(.dark) #hero-recent-showcase a,
html:not(.dark) #hero-recent-community a:hover,
html:not(.dark) #popular-posts-section a:hover,
html:not(.dark) #project-requests-section a:hover,
html:not(.dark) #hero-recent-makeit a:hover,
html:not(.dark) #stackguides-section a:hover,
html:not(.dark) #hero-recent-showcase a:hover {
  background-color: transparent !important;
}
/*************************************
▣ 의뢰게시판
*************************************/
/* 의뢰게시판 */
html:not(.dark) body div.space-y-4 div.rounded-xl.shadow-md.hover\:shadow-lg.transition-shadow.p-6.border {
  background-color: transparent !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html:not(.dark) body div.space-y-4 span.inline-flex.items-center.rounded-full {
  font-size: 25px !important;
  line-height: 1.6 !important;
  vertical-align: baseline !important;
  padding: 0 10px !important;
  background-color: #f0f0f0 !important;
  display: inline-flex !important;
}
html:not(.dark) body div.space-y-4 a.text-xl.font-bold {
  font-size: 25px !important;
  line-height: 1.6 !important;
  vertical-align: baseline !important;
  text-decoration: none !important;
  color: #111827 !important;
}
/* 1. 배지(글상태표시)에도 취소선 추가 */
div.mb-3.break-all:has(span.bg-gray-100) span.inline-flex,
div.mb-3.break-all:has(span.bg-blue-100) span.inline-flex,
div.mb-3.break-all:has(span.bg-gray-100) a.text-xl.font-bold,
div.mb-3.break-all:has(span.bg-blue-100) a.text-xl.font-bold {
  text-decoration: line-through !important;
  color: #9ca3af !important;
}
/* 4. 마감/완료된 글의 하단 작은 글씨들(text-sm) 모두 제거 */
div.rounded-xl:has(span.bg-gray-100) div.text-sm,
div.rounded-xl:has(span.bg-blue-100) div.text-sm {
  display: none !important;
}
/* 일반 제목 호버 */
html:not(.dark) body div.space-y-4 a.text-xl.font-bold:hover {
  text-decoration: underline !important;
}
/* 마감/완료 호버 시 취소선+밑줄 유지 */
div.mb-3.break-all:has(span.bg-gray-100) a.text-xl.font-bold:hover,
div.mb-3.break-all:has(span.bg-blue-100) a.text-xl.font-bold:hover {
  text-decoration: line-through underline !important;
}
/* 하단 정보 20px 및 여백 설정 */
html:not(.dark) body div.space-y-4 div.text-sm {
  font-size: 20px !important;
  line-height: 1.6 !important;
  color: #666 !important;
  display: flex !important;
  gap: 15px !important;
}
html:not(.dark) body div.space-y-4 div.text-sm span,
html:not(.dark) body div.space-y-4 div.text-sm div {
  font-size: 20px !important;
}
html:not(.dark) body div.space-y-4 div.text-sm svg {
  width: 20px !important;
  height: 20px !important;
}
/* 호버 시 박스 변형 제거 */
html:not(.dark) body div.space-y-4 div.rounded-xl:hover {
  transform: none !important;
  box-shadow: none !important;
}
/*************************************
▣ 기타
*************************************/
html:not(.dark) .space-y-1 a:not([title*='태그 추가하기']) {
  font-size: 20px !important;
  font-weight: 500;
  line-height: 1.6;
}
html:not(.dark) #activityModal > div {
  overflow: auto !important;
  max-height: 90vh;
}
html:not(.dark) .mb-12 > .grid {
  display: none;
}
[/code]

 

PS.
메뉴 노출 제거 커스텀 CSS 필요한 분은 쪽지주세요.
공개된 게시판에 적기에는 부적합한 듯 하니....

4명이 반응했습니다
|

댓글 2개

베스트 댓글

'유엑스아이'가 불편해 맞춤 의자를 만드셨군요.
감사합니다~
감사합니다~
'유엑스아이'가 불편해 맞춤 의자를 만드셨군요.
댓글을 작성하시려면 로그인이 필요합니다.

자유게시판

+
제목 글쓴이 날짜 조회
3주 전 조회 1,984
3주 전 조회 2,002
3주 전 조회 1,893
3주 전 조회 2,386
3주 전 조회 1,985
3주 전 조회 1,916
3주 전 조회 1,903
3주 전 조회 1,836
3주 전 조회 1,825
3주 전 조회 1,819
3주 전 조회 1,852
3주 전 조회 1,764
3주 전 조회 1,716
3주 전 조회 1,965
3주 전 조회 1,724
3주 전 조회 1,710
3주 전 조회 1,678
3주 전 조회 1,945
3주 전 조회 1,729
3주 전 조회 1,703
3주 전 조회 1,589
3주 전 조회 1,577
3주 전 조회 1,514
3주 전 조회 1,703
3주 전 조회 1,296
3주 전 조회 1,398
3주 전 조회 1,430
3주 전 조회 1,404
3주 전 조회 1,437
3주 전 조회 1,429