Naseongkim Light by asteriskyg

/* ==UserStyle==
@name         Naseongkim Light
@version      20231119.06.27
@namespace    userstyles.world/user/asteriskyg
@description  김나성 트게더에 적용할 수 있는 커스텀 CSS입니다. - 라이트 테마
@author       asteriskyg
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://tgd.kr/s/naseongkim"), url-prefix("https://tgd.kr/board/write_v2/naseongkim"), url-prefix("https://tgd.kr/board/modify_v2") {
/* tgd_variables.css */

:root {
  /* css version */
  --nsk-css-version: "2301119.01.a";

  /* opacity control */
  --o-0: 0;
  --o-10: 0.1;
  --o-20: 0.2;
  --o-30: 0.3;
  --o-40: 0.4;
  --o-50: 0.5;
  --o-60: 0.6;
  --o-70: 0.7;
  --o-80: 0.8;
  --o-90: 0.9;
  --o-100: 1;

  /* base theme color */
  --c-theme-50: 250, 250, 250;
  --c-theme-100: 245, 245, 245;
  --c-theme-200: 229, 229, 229;
  --c-theme-300: 212, 212, 212;
  --c-theme-400: 163, 163, 163;
  --c-theme-500: 115, 115, 115;
  --c-theme-600: 82, 82, 82;
  --c-theme-700: 64, 64, 64;
  --c-theme-800: 38, 38, 38;
  --c-theme-900: 23, 23, 23;
  --c-theme-950: 10, 10, 10;
  --c-white: 255, 255, 255;
  --c-black: 0, 0, 0;

  /* additional color palette */
  --c-red-50: 254, 242, 242;
  --c-red-100: 254, 226, 226;
  --c-red-200: 254, 202, 202;
  --c-red-300: 252, 165, 165;
  --c-red-400: 248, 113, 113;
  --c-red-500: 239, 68, 68;
  --c-red-600: 220, 38, 38;
  --c-red-700: 185, 28, 28;
  --c-red-800: 153, 27, 27;
  --c-red-900: 127, 29, 29;
  --c-red-950: 69, 10, 10;
  --c-yellow-50: 254, 252, 232;
  --c-yellow-100: 254, 249, 195;
  --c-yellow-200: 254, 240, 138;
  --c-yellow-300: 253, 224, 71;
  --c-yellow-400: 250, 204, 21;
  --c-yellow-500: 234, 179, 8;
  --c-yellow-600: 202, 138, 4;
  --c-yellow-700: 161, 98, 7;
  --c-yellow-800: 133, 77, 14;
  --c-yellow-900: 113, 63, 18;
  --c-yellow-950: 66, 32, 6;
  --c-green-50: 240, 253, 244;
  --c-green-100: 220, 252, 231;
  --c-green-200: 187, 247, 208;
  --c-green-300: 134, 239, 172;
  --c-green-400: 74, 222, 128;
  --c-green-500: 34, 197, 94;
  --c-green-600: 22, 163, 74;
  --c-green-700: 21, 128, 61;
  --c-green-800: 22, 101, 52;
  --c-green-900: 20, 83, 45;
  --c-green-950: 5, 46, 22;
  --c-sky-50: 239, 246, 255;
  --c-sky-100: 224, 242, 254;
  --c-sky-200: 186, 230, 253;
  --c-sky-300: 125, 211, 252;
  --c-sky-400: 56, 189, 248;
  --c-sky-500: 14, 165, 233;
  --c-sky-600: 2, 132, 199;
  --c-sky-700: 3, 105, 161;
  --c-sky-800: 7, 89, 133;
  --c-sky-900: 12, 74, 110;
  --c-sky-950: 8, 47, 73;
  --c-blue-50: 239, 246, 255;
  --c-blue-100: 219, 234, 254;
  --c-blue-200: 191, 219, 254;
  --c-blue-300: 147, 197, 253;
  --c-blue-400: 96, 165, 250;
  --c-blue-500: 59, 130, 246;
  --c-blue-600: 37, 99, 235;
  --c-blue-700: 29, 78, 216;
  --c-blue-800: 30, 64, 175;
  --c-blue-900: 30, 58, 138;
  --c-blue-950: 23, 37, 84;
  --c-pink-50: 253, 242, 248;
  --c-pink-100: 252, 231, 243;
  --c-pink-200: 251, 207, 232;
  --c-pink-300: 249, 168, 212;
  --c-pink-400: 244, 114, 182;
  --c-pink-500: 236, 72, 153;
  --c-pink-600: 219, 39, 119;
  --c-pink-700: 190, 24, 93;
  --c-pink-800: 157, 23, 77;
  --c-pink-900: 131, 24, 67;
  --c-pink-950: 80, 7, 36;
}

}

@-moz-document url-prefix("https://tgd.kr/s/naseongkim"), url-prefix("https://tgd.kr/board/write_v2/naseongkim"), url-prefix("https://tgd.kr/board/modify_v2") {
/* tgd_common.css */
* {
  font-family: Pretendard, "Noto Sans KR", "Segoe UI", "Malgun Gothic", sans-serif;
}

html {
  scroll-behavior: smooth;
  height: auto;
}

html,
body,
header,
footer,
#content-area {
  background-image: none !important;
  background-color: rgba(var(--c-theme-50));
}

/* 스크롤바 디자인 */
*::-webkit-scrollbar {
  width: 1.25rem;
  height: 1.25rem;
}

*::-webkit-scrollbar-track {
  background: rgba(var(--c-theme-50));
  border-left: 1px solid rgba(var(--c-theme-100));
}

*::-webkit-scrollbar-thumb {
  background: rgba(var(--c-theme-200));
  border-radius: 15px;
  background-clip: padding-box;
  border: 1px solid rgba(var(--c-theme-300));
}

}

@-moz-document url-prefix("https://tgd.kr/s/naseongkim"), url-prefix("https://tgd.kr/board/write_v2/naseongkim"), url-prefix("https://tgd.kr/board/modify_v2") {
/* tgd_header.css */
header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  padding: 1.5rem 0;
  margin: 0 0 1.5rem 0;
  background: rgba(var(--c-theme-100));
  border-bottom: 1px solid rgba(var(--c-theme-200));
}

header > div {
  padding: 0 1.5rem !important;
}

header .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
}

header .row div {
  width: auto !important;
  padding: 0 !important;
}

header .container::before, .container::after {
  display: none !important;
}

header .container .row::before, .row::after  {
  display: none !important;
}

header .container .row > div:first-child {
  height: 30px;
}

header .container .row > div:first-child a {
  height: 30px;
  filter: none;
}

/* 트게더 전체 검색창 */
header #right-search-form {
  display: flex;
  gap: 1rem;
  padding: 0;
}

header #right-search-form input[type="text"] {
  color: rgba(var(--c-theme-800));
  border: 1px solid rgba(var(--c-theme-200));
  background-color: rgba(var(--c-white));
  border-radius: 1rem;
  padding: 1rem 1.5rem;
  height: 35px;
  outline: 0;
  text-align: right;
}

header #right-search-form input[type="text"]:focus {
  border: 1px solid rgba(var(--c-blue-500));
}

header #right-search-form #right-search-btn {
  filter: none;
  color: rgba(var(--c-blue-500));
  padding: 0;
}

/* 헤더 하단메뉴 */
header #header-bar {
  margin: 0 auto;
}

header #header-bar .row {
  border: 0;
  background: none;
  padding: 0;
  justify-content: space-between;
  position: relative;
}

header #header-bar .row > div:empty {
  display: none;
}

header #header-menu-left, #header-menu-right {
  left: 0;
  right: 0;
}


/* 최근 방문 게시판 */
header #board-list-area {
  display: flex;
  overflow-x: unset;
  overflow-y: unset;
}

header #board-list-area a {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 4rem;
  padding: 0 1.5rem;
  background: rgba(var(--c-theme-200));
  border: 1px solid rgba(var(--c-theme-300));
  color: rgba(var(--c-theme-800));
  border-radius: 1rem;
  font-size: 1.3rem;
}

header #board-list-area a:hover {
  background: rgba(var(--c-theme-300));
}

header #board-list-area a .delrow {
  color: rgba(var(--c-theme-500));
}

/* 프로필 */
header #header-bar #header-menu-right #userDropdown {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  height: 4rem;
  padding: 0 1rem;
  margin: 0;
  border-radius: 1rem;
  background: rgba(var(--c-theme-200));
  border: 1px solid rgba(var(--c-theme-300));
  color: rgba(var(--c-theme-800));
}

header #header-bar #header-menu-right #userDropdown:hover, #userDropdown:focus {
  background: rgba(var(--c-theme-300));
}

header #header-bar #header-menu-right #userDropdown #notification-badge {
  background: rgba(var(--c-white), var(--o-0));
  padding: 0;
  font-size: 1.5rem;
  color: rgba(var(--c-red-500));
}

header #header-bar #header-menu-right #userDropdown img.profile-img {
  margin: 0;
  border-radius: 100%;
}

header #userDropdown .caret {
  display: none;
}

.dropdown-menu {
  border-radius: 1rem;
  border: 1px solid rgba(var(--c-theme-200));
  background: rgba(var(--c-theme-50));
  margin: 1rem 0 0 0;
}

.dropdown-menu li.divider {
  background: rgba(var(--c-theme-200));
}

.dropdown-menu li a {
  color: rgba(var(--c-theme-800));
}

.dropdown-menu li a:hover {
  color: rgba(var(--c-theme-800));
  background: rgba(var(--c-theme-200));
}
}

@-moz-document url-prefix("https://tgd.kr/s/naseongkim"), url-prefix("https://tgd.kr/board/write_v2/naseongkim"), url-prefix("https://tgd.kr/board/modify_v2") {
/* tgd_menu.css */

/* 트게더 좌측 메뉴 컨테이너 */
#main-menu .menu-wrapper {
  border: 1px solid rgba(var(--c-theme-200));
  background-color: rgba(var(--c-white));
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* 메뉴 타이틀 */
#main-menu .menu-wrapper .header {
  background: rgba(var(--c-blue-500));
  color: rgba(var(--c-white));
  padding: 0.75rem;
  text-align: center;
  border-radius: 0;
}

/* 메뉴 리스트 */
#main-menu .menu-wrapper > a {
  color: rgba(var(--c-theme-800));
  background: rgba(var(--c-white));
  border-bottom: 1px solid rgba(var(--c-theme-200));
  padding: 0.75rem;
}

#main-menu .menu-wrapper > a[style*="color:#000000"] {
  color: rgba(var(--c-theme-800)) !important;
}

#main-menu .menu-wrapper a:last-child {
  border-bottom: 0;
}

#main-menu .menu-wrapper > a:hover {
  background: rgba(var(--c-theme-200));
}

#main .menu-wrapper>a.active {
  background: rgba(var(--c-theme-200));
}

/* 메뉴 아이콘 */
#main-menu .menu-wrapper a em {
  color: unset;
  margin-right: 0.25rem;
}

/* 메뉴 간 여백 */
#main-menu .menu-wrapper .spacer {
  display: none;
}

}

@-moz-document url-prefix("https://tgd.kr/s/naseongkim"), url-prefix("https://tgd.kr/board/write_v2/naseongkim"), url-prefix("https://tgd.kr/board/modify_v2") {
/* tgd_main.css */
body #content-area #main {
  padding: 0 1.5rem;
}

body #content-area #main::before, #main::after {
  display: none;
}

body #main .row {
  margin: 0;
}

footer {
display: none;
}

/* 게시판 정보 컨테이너 */
#board-info {
  height: auto;
  display: flex;
  flex-direction: column;
  background-color: rgba(var(--c-white));
  border: 1px solid rgba(var(--c-theme-200));
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* 스트리머 닉네임 */
#board-info h1 {
  border: 0;
  display: flex;
  align-items: center;
  padding: 0;
  font-size: 2.25rem;
  font-weight: 700;
  gap: 1rem;
  margin-bottom: 1rem;
}

#board-info h1 a {
  color: rgba(var(--c-theme-800));
}

#board-info h1 span {
  color: rgba(var(--c-theme-400));
}

#board-info h1 .badge-live {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: rgba(var(--c-red-500)) !important;
}

/* kns10 아이콘 (앞) */
i.fa.fa-user {
  display: none;
}

/* kns10 아이콘 (뒤) */
#board-info #viewers-area:after {
  content: "· " var(--nsk-css-version);
  color: rgba(var(--c-theme-400));
  padding: 0 0.5rem;
}

/* 스트리머 프...