클모앙 (Classic Damoang) UserStyle

cmoang.css

/*
 * 클모앙 v1.13.0 (2024/11/02)
 * 제작: 8086
   _     _          __          _      _          _          __ 
  / |\/|/ \ /\ |\ |/__  _ _ _ _|__ ._ | \ /\ |\/|/ \ /\ |\ |/__ 
  \_|  |\_//--\| \|\_|o(__>_>  |(_)|  |_//--\|  |\_//--\| \|\_| 
 */

/*
 * Global Color
 */

/* Light */
[data-bs-theme="light"] {
	--bs-body-bg: #ffffff !important;
	--bs-tertiary-bg: #eeeeee !important;
	--bs-border-color: #e2e2e2 !important;
	--na-nav-bg: #232f3e !important;
	--cm-btn-bg: #232f3e !important;
    --cm-board-head-div: #999999 !important;
	--cm-cmtbx4-bg: #527492;
	--cm-cmtbx4-txt: #ffffff;
	--cm-cmtbx3-bg: #afcae2;
	--cm-cmtbx3-txt: #ffffff;
	--cm-cmtbx2-bg: #ccdfed;
	--cm-cmtbx2-txt: #000000;
	--cm-cmtbx1-bg: #eeeeee;
	--cm-cmtbx1-txt: #000000;
	--cm-cmtbx0-bg: #fafafa;
	--cm-cmtbx0-txt: #cccccc;
	--cm-sidekey-bg: #f1f1f1;
	--cm-sidekey-txt: #000000;
	--cm-sidekey-border: #0000000d;
	--cm-noti-bg: #f5f5f5;
	--cm-noti-txt: #000000;
    --cm-sidehead-bg: #516B82;
    --cm-sidehead-sg-bg: #71A064;
    --cm-sidehead-txt: #ffffff;
    --cm-usermodbtn-bg: #bbbbbb;
    --cm-usermodbtn-txt: #ffffff;
    --cm-userlevel-progress: #516B82;
    --cm-poll-seeres: #eeeeee; /* poll see result */
    --cm-poll-bg: #827b51;
    --cm-sign-posts-bg: #f1fdff;
    --cm-sign-comments-bg: #feffed
}

/* Dark */
[data-bs-theme="dark"] {
	--bs-body-bg: #222222 !important;
	--bs-tertiary-bg: #000000 !important;
	--bs-border-color: #333333 !important;
	--na-nav-bg: rgb(35, 47, 62) !important;
	--cm-btn-bg: #37475a !important;
    --cm-board-head-div: #555555;
	--cm-cmtbx4-bg: #1c77c7;
	--cm-cmtbx4-txt: #e0e0e0;
	--cm-cmtbx3-bg: #01579b;
	--cm-cmtbx3-txt: #e0e0e0;
	--cm-cmtbx2-bg: #486382;
	--cm-cmtbx2-txt: #e0e0e0;
	--cm-cmtbx1-bg: #25323c;
	--cm-cmtbx1-txt: #cccccc;
	--cm-cmtbx0-bg: #292929;
	--cm-cmtbx0-txt: #444444;
	--cm-sidekey-bg: #333333;
	--cm-sidekey-txt: #e0e0e0;
	--cm-sidekey-border: #3d3d3d;
	--cm-noti-bg: #333333;
	--cm-noti-txt: #ffffff;
    --cm-sidehead-bg: #4C7AA2;
    --cm-sidehead-sg-bg: #71A064;
    --cm-sidehead-txt: #E0E0E0;
    --cm-usermodbtn-bg: #333333;
    --cm-usermodbtn-txt: #999999;
    --cm-userlevel-progress: #1e90ff;
    --cm-poll-seeres: #eeeeee; /* poll see result */
    --cm-poll-bg: #a2994c;
    --cm-sign-posts-bg: #152225;
    --cm-sign-comments-bg: #222213
}

/* 
 * Common
 */
:root {
	--na-title-bg: var(--bs-body-bg) !important;;
	--cm-mainbar-txt: #ffffff;
	--bs-primary: var(--na-nav-bg) !important;
	--bs-body-bg-rgb: var(--bs-body-bg) !important;
	--bs-border-radius: 2px !important;
	--bs-badge-font-size: 10px;
	--bs-border-width: 0.5px !important;
	--bs-border-radius-sm: 2px !important;
	--bs-body-font-family:Gulim !important;
	--bs-body-font-size: 14px !important;
	--bs-body-line-height:1.3 !important;
}

.sticky-top {
    padding-top: 0rem !important;
} /* 홈 게시판 멘 위 패딩 */

.site-navbar {
    display: block !important;
    position: absolute !important;
}

.order-1.col-md-4.col-lg-3 {
    order: 1 !important; 
    width: 145px !important;
    margin: 18px 0 0 15px !important;
}
.order-2.col-md-8.col-lg-9 {
    order: 2 !important;
  	width: 895px !important;
	margin: 18px 0 0 15px !important;
    background: var(--bs-body-bg) !important;
}

container { max-width: 1400px !important;}
#sidebar-site-menu { width: 145px !important; }
#fsearch .col-lg-8 { width: 230px !important; }
#fsearch .col-lg-2 { width: 85px !Important; }
.bg-body { margin-top: 39px !important; }
.bg-body-tertiary { background-color: var(--bs-tertiary-bg) }
.nav-pills { --bs-nav-pills-border-radius: 0rem !important; }
.profile_img img, .rounded-circle, .rounded-3 { border-radius: 2px !important; }
.row { --bs-gutter-x: 0rem !important; }
.p-3 .row { --bs-gutter-x: 0.5rem !Important; }
.col { flex: none !important; }
.nav-icon { display: none !important; }
.header-copy { padding: 0px 0; }
.small, small { font-size: 12px !important; }
.mt-3 { margin-top: 0.25rem !important; }
.pt-4 { padding-top: 0rem !important; }
.mb-4, .mb-3 { margin-bottom: 0.5rem !important; }
#sidebar-site-menu { margin-bottom: 0rem !important; }
.line-top { border-color: var(--cm-board-head-div) !important; }
.fs-4.mb-0 { font-size: 20px !important; }
.py-2.px-3 { font-size: 13px !important; }
.py-3 {
    background: var(--na-title-bg) !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    
}
.order-1.col-md-4.col-lg-3 {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
}
.order-2.col-md-8.col-lg-9 {
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
}
.rcmd-pc { min-width: 35px !important; }
.rcmd-sm { min-width: 35px !important; }
.form-select-sm { font-size: 12px !important; }
.nav-link{
    font-size: 12px !important;
    height: 28px !important; /* 240808: 28 -> 26 */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#bo_list { width: 895px !important; }
/*************************************/
#bo_list .col-md-8.col-lg-9 { width: 660px !Important;}
.card {
    --bs-card-spacer-y: 0.3rem !Important;
    --bs-card-spacer-x: 0.3rem !Important;
}
/*************************************/
#bo_list .hd-wrap { display: none !important; }
#bo_list .hd-num, #bo_list .wr-num { width: 40px; }
.btn[title="초기화"] { display: none !important; }
#fboardlist { order: 0; }
#bo_list_wrap { display: grid !important; }
#bo_list_wrap .order-3.pe-1 { display: none !important; }
/*************************************/

/* 소모임 */
.nav-vertical.nav-pills .nav-collapse { background-color: var(--bs-body-bg) !important; }
.nav-vertical.nav-pills .nav-collapse.show { display: block !important; } /* 기본값이 접기인 상태에서 */

/* HACK: 기본 펼쳐진 것 접기 (240807: 비활성화)
.nav-vertical.nav-pills .nav-collapse.show {
    display: none !important;
}

.na-menu .dropdown-toggle:not(.dropdown-toggle-empty)::after { transform: rotate(-180deg); }
.na-menu .nav-item > .nav-link[aria-expanded='true']::after { transform: rotate(0deg); }*/

/*************************************/
.da-noti-indicator { background-color: #f00 !important; }
.rcmd-box.step4 { background-color: var(--cm-cmtbx4-bg) !important; color: var(--cm-cmtbx4-txt) !important; }
.rcmd-box.step3 { background-color: var(--cm-cmtbx3-bg) !important; color: var(--cm-cmtbx3-txt) !important; }
.rcmd-box.step2 { background-color: var(--cm-cmtbx2-bg) !important; color: var(--cm-cmtbx2-txt) !important; }
.rcmd-box.step1 { background-color: var(--cm-cmtbx1-bg) !important; color: var(--cm-cmtbx1-txt) !important; }
.rcmd-box.step0 { background-color: var(--cm-cmtbx0-bg) !important; color: var(--cm-cmtbx0-txt) !important; }
.container.px-0.px-sm-3 { padding: 0px 0px !important; }
.row.row-cols-1.row-cols-md-2.g-3 { flex-wrap: nowrap !important; }
.na-menu .nav-vertical.nav-pills .nav-link {
    padding: 5px 10px !important;
    margin-bottom: 0rem !important;
    display: flex !important;
}
.border.mx-0.mb-3.p-3.rounded-3 { padding: 0rem !important; }
.page-first .page-link,.page-item:nth-child(2) .page-link { border-left-width: 0.5px !Important; }
#toTop, #float_comment { display: none !important; }
/* sign old */
/*#sign-content .mt-3 { margin: .5em !important;}
#sign-content .list-group.border-bottom { border-bottom: none !important; }
#sign-profile-container { align-items: stretch !important; }
#sign-profile { 
    display: grid !important;
    align-content: center !important;
    width: 20% !important;
    padding: 0.5rem !important;
}

#sign-recent-list-container {
    width: 80% !important;
    font-size: 13px !important;
    line-height: 14px !important;
}*/
/* sign temp
#bo_v_sign .border {
    margin: 0px !important;
    border-top: 0px !important;
}
#sign-top-left {
    width: 115px !important;
    height: 115px !important;
    padding: 10px !important;
}
#sign-top-right {
    overflow-y: scroll !important;
    height: 115px !important;
    width: 750px !important;
}
#posts-tab, #comments-tab { display: none !important; }
#sign-middle-container #myTabContent {
    display: flex !important;
}
#sign-middle-container #myTabContent .tab-pane {
    display: block !important;
    opacity: 1 !important;
    width: 50% !important;

#sign-middle-container #posts .list-group-item { background-color: var(--cm-sign-posts-bg) !important; }
#sign-middle-container #comments .list-group-item { background-color: var(--cm-sign-comments-bg) !important; }*/

/* sign tempv2 */
#bo_v_sign .border {
    margin: 0px !important;
    border-top: 0px !important;
}
#sign-top-container { display: block !important; }

/* sign temp end */
#fboardlist .da-link-block {
    font-size: 14px !important;
}
#boardSearch {
    display: flex !important;
    order: 1;
    justify-content: center !important;
}
#boardSearch .px-3.py-2.border-top {
    border: none !important;
    padding-top: 0rem !important;
}
#bo_category.border-top.py-2 {
    padding-bottom: 0rem !important;
}

.fs-5.px-3.py-2.mb-0 {
	font-size: 18px !important;
	border: 0px !important;
}
.gap-3 {
	color: var(--cm-mainbar-txt) !important;
	--bs-link-color-rgb: var(--cm-mainbar-txt) !important;
	height: 44px !important;
}
.pagination{
	--bs-pagination-active-bg: var(--na-nav-bg) !important;
	--bs-pagination-active-border-color: var(--na-nav-bg) !important;
}
.pagination-group .btn-basic { /* Bottom search/submit button */
    display: none !Important;
}
.p-1 {
	padding: 0rem !important;
	font-size: 10px !important;
}
.btn[data-bs-original-title="추천"] {
	background-color: #EF5350 !important;
	color: #fff !important;
}
.btn-primary {
	--bs-btn-bg: var(--cm-btn-bg) !important;
	--bs-btn-border-color: var(--bs-btn-bg) !important;
}
.text-bg-secondary {
	color: var(--cm-sidekey-txt) !important;
	background-color: var(--cm-sidekey-bg) !important;
}
.sch_word {
    background: #ff00a7 !important;
    padding: 0px !Important;
}
.rcmd-box {
	border-radius: 2px;
	width: 35px;
	height: 14px;
}
.p-3 {
	padding: 0.5rem !important;
    padding-top: 1rem !important; /* wip */
	margin-left: 0.5rem !important;
	margin-right: 0.5rem !important;
}
.badge {
	--bs-badge-font-weight: normal !important;
	--bs-badge-padding-y: 0em !important;
	--bs-badge-padding-x: 0em !important;
	border: 1px solid var(--cm-sidekey-border) !important;
	width: 1.4em !important;
	height: 1.4em !important;
	justify-content: center;
	line-height: 1.2em; 
}
.btn {
	--bs-btn-line-height: 1.0;
	--bs-btn-font-size: 12px !important;
	--bs-btn-padding-x: 0.25rem !important;
	--bs-btn-padding-y: 0.35rem !important;
	--bs-btn-box-shadow: none !important;
	--bs-btn-border-radius: 2px !important;
}
.dropdown-menu {
	--bs-dropdown-font-size: 0.9em !important;
	--bs-dropdown-padding-y: 0em !important;
	--bs-dropdown-item-padding-x: 0.4rem !important;
}
.pagination-sm {
	--bs-pagination-padding-x: 0 !important;
	--bs-pagination-padding-y: 0 !important;
    --bs-pagination-font-size: 12px !important;
    margin-bottom: 10px !Important;
}
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn { 
    font-size: 12px !important;
}
.page-item, .page-link {
    width: 32px !Important;
    height: 32px !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
    border-left-width: 0px !important;
}
.da-member-memo__memo {
	display: inline !important;
	border-radius: 2px !important;
	font-size: 0.9em !important;
}
.rolling-noti-container-list,
.rolling-noti-container-view,
.rolling-noti-container-write {
	height: 30px !important;
	background-color: var(--cm-noti-bg) !important;
	color: var(--cm-noti-txt) !important;
	border-top: 0px !important;
	border-bottom: 0px !important;
}
.text-bg-info {
    color: var(--cm-sidekey-txt) !important; 
    background-color: var(--cm-sidekey-bg) !important;
}
.badge.rounded-pill.text-bg-light{ /* "앙님" badge */
    display: none !important;
}
.fs-2.fw-bold img { height: 40px !important; } /* Header */
.fs-2.fw-bold { font-size: 10px !important; }
.pe-2 { display: none !important; }

.px-3.mb-4 {
	padding-left: 10px !important;
	padding-right: 10px !important;
    padding-top: 10px !important;
}

.mt-2 .bi { display: none !important; }
.mt-2.btn-group { margin-top: 0px !important; }
.mt-2 .btn.btn-sm {
    background-color: var(--cm-usermodbtn-bg) !important;
    color: var(--cm-usermodbtn-txt) !important;
    padding: .25em !important;
    letter-spacing: -0.8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    margin: 2px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

.d-flex.align-items-center.gap-2 { min-height: 10px !important; } /* wip */
.text-truncate .lh-base {
    line-height: 1.0 !important;
    height: 18px !important;
}
.win_profile {
    letter-spacing: 1px !important;
    background-color: #666 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 3px 3px !important;
    height: 18px !important;
    border-radius: 2px !important;
    white-space: nowrap !important;
}
.my-2 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/********************************************************/
.na-menu .dropdown-header {
    background-color: var(--cm-sidehead-bg) !important;
    color: var(--cm-sidehead-txt) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    opacity: .9 !important;
    outline: none !important;
    padding: 9px 10px !important;
    margin: 0 !important;
    margin-top: 10px !important; /* wip */
    border: 0 !important;
    line-height: 1 !important;   
}
.na-menu .dropdown-header.bbs_group_recommend {
    display: block !important;
    background-color: var(--cm-sidehead-sg-bg) !important;
} /* workaround: dropdown-header가 너무 많아져 "커뮤니티", "소모임 추천"만 보이게 */
#sidebar-site-menu .line-top, /* 사이드바 직접 홍보 숨기기 */
#sidebar-site-menu .fs-5.px-3.py-2.mb-0 {
    display: none !important;
}
/********************************************************/

#poll header { /* wip - 240802 poll patch */
    background-color: var(--cm-poll-bg) !important;
    color: var(--cm-sidehead-txt) !important;
    margin-top: 10px !important;
    padding: 9px 10px !important;
    opacity: .9 !important;
    outline: none !important;
    border: 0 !important;
}
#poll header h2, #poll header a, #poll .poll_con {
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 500 !Important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0.03125rem !important; /* from damoang style.css */
}
#poll header a {
    color: var(--cm-poll-seeres) !important;
    border: 0 !important;
}
#poll .poll_con p {
    padding: 10px 10px !important;
    margin: 0px !important;
}
#poll .poll_con ul {
    padding: 0px 5px !important;
    margin: 0px !important;
    line-height: 1.2 !important;
}
#poll_btn {
    padding: 10px 10px !important;
}
#poll {
    border: 0px !important;
    background-color: var(--bs-body-bg) !important;
}

.progress-bar { background: var(--cm-userlevel-progress) !important; }
.progress { height: 3px !important; border-radius: 2px !important;}
.na-menu { background-color: var(--bs-tertiary-bg) !important; }
.nav-link { background-color: var(--bs-body-bg) !important; }
.na-menu .nav-item.da-menu--device-mode { display: none !important; } /* mobile mode */
#menuOffcanvas, .offcanvas-backdrop, a[href="#menuOffcanvas"] { display: none !important; } /* menu key */

.my-4 {
    margin-top: unset !important;
    margin-bottom: unset !important;
}

#searchOffcanvas {
    margin-top: 44px !important;
    height: 90px !important;
}

#searchOffcanvas .offcanvas-header {
    height: 0px !important;
}

/*
 * Animation
 */
body { opacity: 1 !important; }
body.cu_init {
    animation-name: cm_body_op;
    animation-duration: 0s;
    animation-delay: 0s;
    animation-iteration-count: 0;
    animation-timing-function: linear;
    animation-direction: alternate;
}
@keyframes cm_body_op {
    0%   {opacity: 1;} 
    50%  {opacity: 1;} 
    100% {opacity: 1;}
}
div#toTop a.ui-custom-expand-hidden.d-none-start {
    display: block !important;
    opacity: 0;transform: scale(0.5) rotate(0deg) translateY(200%);
    border-radius: 100%;
}
div#toTop a#ui-custom-expand-button:has(i.opacity-25) {
    transform: rotateX(-180deg) scale(1.2);
}

.offcanvas { transition: none !important; }

/*
 * Misc. Hide
 */
div[data-testid="board-ads-banner"] { display: none !important; } /* 홈 메인 배너 */
#sidebar-site-menu .nav-item .mb-4, /* 공지사항 */
#sidebar-site-menu .nav-item .mb-0, /* 공지사항 */
.site-nav .list-unstyled .nav-link, /* nav bar menu */
.list-group-item.text-center.py-5,  /* 서명 위 광고 게시글 목록 */
.col-lg-3 span[data-bs-title="새글/새댓글"] {
    display: none !important;
}
.na-new { display: none !important; } /* new 아이콘이 안 이쁨 */

#sidebar-site-menu .nav-item .fst-italic { font-style: normal !important; } /* 소모임 추천 normal font */
.ratio { --bs-aspect-ratio: 0% !important; } /* 임베드->링크 공백 제거 */
.na-videoframe {
    padding-bottom: 0% !important;
    height: unset !important;
} /* 임베드->링크 공백 제거 2 */