팬비닛 작성글/댓글보기 표 CSS 커스텀시트

 이번에도 들고와봤습니다.

 

/* 프로필 정보 위쪽 활성탭 흰색->회색 */

.xm .nav-tabs > .active > a, .xm .nav-tabs > .active > a:hover, .xm .nav-tabs > .active > a:focus {
  color: var(--color-gray-800);
  background-color: var(--color-gray-200);
  border: 1px solid var(--color-gray-300);
    border-bottom-color: var(--color-gray-700);
}

/* 프로필 정보 탭 디자인 */

.app-content--tight, .app-content > .x, .app-content > .xm, .app-content > .xc, .app-content > .xl {
    padding: 10px;
    border-radius: 10px;
}

/* 프로필 정보 테이블 색 가시성 */

.xm .table-striped tbody > tr:nth-child(2n+1) > td, .xm .table-striped tbody > tr:nth-child(2n+1) > th {
    background-color: var(--color-gray-300);
}

.xc .table-striped tbody > tr:nth-child(2n+1) > td, .xc .table-striped tbody > tr:nth-child(2n+1) > th {
    background-color: var(--color-gray-300);
}

/* 프로필 정보 검색 및 버튼 */

.xm select, .xm textarea, .xm input[type="text"], .xm input[type="password"], .xm input[type="datetime"], .xm input[type="datetime-local"], .xm input[type="date"], .xm input[type="month"], .xm input[type="time"], .xm input[type="week"], .xm input[type="number"], .xm input[type="email"], .xm input[type="url"], .xm input[type="search"], .xm input[type="tel"], .xm input[type="color"] {
    height: 30px;
    color: var(--color-gray-900);
    background-color: var(--color-gray-300);
}

.xc select, .xc textarea, .xc input[type="text"], .xc input[type="password"], .xc input[type="datetime"], .xc input[type="datetime-local"], .xc input[type="date"], .xc input[type="month"], .xc input[type="time"], .xc input[type="week"], .xc input[type="number"], .xc input[type="email"], .xc input[type="url"], .xc input[type="search"], .xc input[type="tel"], .xc input[type="color"] {
    height: 30px;
    color: var(--color-gray-900);
    background-color: var(--color-gray-300);
}

button.btn{
    height: 30px !important;
    line-height: 20px !important;   
}

.btn {
    height: 30px !important;
    line-height: 20px !important;   
    padding: 4px 6px !important;
    color: var(--color-gray-900) !important;
    text-shadow: none  !important;
    vertical-align: top  !important;
    background-image: none !important;
    background-color: var(--color-gray-300) !important;
    border-color: var(--color-gray-800) !important;
    box-shadow: unset !important;
}

/* 링크 색 변경 */

a {
    color: var(--color-gray-900)
}

a:visited {
    color: var(--color-gray-600)
}

/* 페이지 버튼 색 */

.xm .pagination ul > li > a:hover, .xm .pagination ul > li > a:focus, .xm .pagination ul > .active > a, .xm .pagination ul > .active > span {
    background-color: var(--color-gray-300);
}

.xm .pagination ul > li > a, .xm .pagination ul > li > span {
    background-color: var(--color-gray-100);
}

.xc .pagination ul > li > a:hover, .xc .pagination ul > li > a:focus, .xc .pagination ul > .active > a, .xc .pagination ul > .active > span {
    background-color: var(--color-gray-300);
}

.xc .pagination ul > li > a, .xc .pagination ul > li > span {
    background-color: var(--color-gray-100);
}

/* 스크랩 보기 아래 넘침 수정 */

.xm .pagination {
  overflow: hidden;
}

 

...또 바로 채용될거같은 기시감이...