File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
.hr {
background-color: #eeeeee;
margin: 10px 0;
width: 100%;
height: 1px;
}
.hr.pink {
background-color: rgba(194, 61, 71, 0.1);
margin: 10px 0;
width: 100%;
height: 1px;
}
.content {
width: 1500px;
margin: 0 auto;
padding-top: 56px;
h2 {
font-family: "HAPPINESS-SANS-title";
font-size: 40px;
}
h3 {
font-family: "Pretendard-B";
font-size: 25px;
position: relative;
padding-left: 20px;
margin-bottom: 20px;
&::before {
content: '';
background: url(../../images/icon/subtitle.png);
width: 7px;
top: 6px;
left: 0;
height: 17px;
display: block;
position: absolute;
}
}
.gopage {
font-family: "Pretendard-L";
font-size: 17px;
text-align: right;
}
.gopage::after {
content: '\2192';
font-size: 18px;
}
/* pagination */
.pagination {
button {
width: 40px;
height: 40px;
margin: 0 4px;
border: 1px solid #f0f1f4;
background-color: #fff;
border-radius: 50px;
}
button.page-number {
font-size: 20px;
color: #555555;
width: 40px;
height: 40px;
background-color: #f0f1f4;
border-radius: 50px;
}
button.page-number.clicked {
background-color: #ce3e48;
color: #fff;
}
.anticon {
svg {
font-size: 17px;
path {
color: #636364;
}
}
}
}
}
.sub-title-area {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.breadcrumb-list {
ul {
display: flex;
align-items: center;
gap: 15px;
}
li {
font-size: 16px;
p {
font-size: 16px;
color: #000;
font-family: "Pretendard-L";
margin-left: 5px;
}
&:first-child {
display: flex;
align-items: center;
}
&:last-child {
font-family: "Pretendard-SB";
}
}
}
.btn-group {
gap: 10px;
button.cancel {
width: 130px;
background-color: #f9f9f9;
border: 1px solid #636364;
}
button.register {
width: 130px;
background-color: #ce3e48;
color: #fff;
a, span {
color: #fff;
}
}
}
form, .form {
margin: 0 auto;
border: 1px solid #dddddd;
border-radius: 20px;
input {
padding: 0 15px;
height: 50px;
border: 1px solid #dddddd;
border-radius: 5px;
font-size: 16px;
width: inherit;
}
dd {
display: flex;
align-items: center;
p {
font-size: 20px;
font-family: "Pretendard-L";
line-height: 30px;
}
span {
font-size: 20px;
font-family: "Pretendard-SB";
}
}
label {
position: relative;
width: 200px;
font-size: 18px;
flex-shrink: 0;
&.require::after {
position: absolute;
top: 5px;
padding-left: 3px;
content: "*";
color: #df2d2d;
}
}
}
/* 카테고리 */
.category {
display: flex;
gap: 5px;
.category-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
li {
width: fit-content;
border-radius: 3px;
padding: 5px 10px;
font-family: "Pretendard-SB" !important;
font-size: 14px;
&:nth-child(odd) {
color: #a5067b;
border: 1px solid #a5067b;
}
&:nth-child(even) {
color: #007ac3;
border: 1px solid #007ac3;
}
button {
margin-left: 15px;
}
}
}
/* 로그인 */
.login-form {
width: 600px;
padding: 50px 60px;
label {
color: #666;
font-size: 16px;
display: block;
margin-bottom: 6px;
}
button {
font-size: 22px;
font-family: "Pretendard-B";
background: linear-gradient(132deg, #3e355c, #763954);
width: 100%;
padding: 19px 0;
border-radius: 15px;
margin-top: 10px;
img {
margin: 0 12px 0 0;
}
span {
color: #fff;
}
}
.check-area {
input {
margin-right: 5px;
}
}
}
/* 내정보 */
.info-form,
.pwchange-form {
padding: 30px 50px;
}
.pwchange-form {
input {
width: 40%;
}
}
.invalid-feedback.border {
display: flex;
align-items: center;
gap: 4px;
background-color: #fbf1f2 !important;
border: 1px solid #ce3e48 !important;
border-radius: 20px;
padding: 8px 24px;
margin-left: 20px !important;
span {
font-size: 14px !important;
color: #e22d2d;
font-family: "Pretendard-EL" !important;
}
}
.info-form {
dd {
img {
margin-right: 17px;
}
span {
width: 118px;
}
}
}
/* 통합검색 */
.search-form {
dl {
padding: 35px 75px;
dd {
display: flex;
align-items: center;
p {
font-size: 18px;
font-family: "Pretendard-SB";
width: 180px;
flex-shrink: 0;
}
input[type="text"] {
background-color: #f6f6f6;
border: 0;
}
}
dd.category-dd{
ul{
flex-wrap: wrap;
max-height: 80px;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
}
.mark {
width: fit-content;
margin: 0 11px;
}
}
background-image: linear-gradient(#fff, #fff),
linear-gradient(-45deg, #ca3e49, #3f355c);
background-origin: border-box;
background-clip: content-box,
border-box;
border: 3px solid transparent;
border-radius: 32px;
.btn-group {
display: flex;
justify-content: center;
button {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 140px;
font-family: "Pretendard-B";
font-size: 16px;
border-radius: 30px;
&.reset {
border: 1px solid #ccc;
}
&.search {
background: linear-gradient(132deg, #3e355c, #763954);
p {
color: #fff;
}
}
}
}
ul {
display: flex;
gap: 15px;
}
li {
display: flex;
align-items: center;
width: 175px;
gap: 12px;
}
}
.select-box {
width: 106px;
height: 30px;
border: 1px solid #cccccc;
border-radius: 5px;
flex-shrink: 0;
padding: 0 10px;
line-height: 30px;
margin-left: 30px;
select {
width: 100%;
border: 0;
font-size: 14px;
}
}
.search-result {
margin-top: 40px;
.resultext {
.main-img {
width: 320px;
height: 220px;
border-radius: 24px;
}
display: flex;
align-items: center;
p {
width: max-content;
font-family: "Pretendard-L";
font-size: 17px;
b {
color: #ce3e48;
}
}
img {
object-fit: contain;
}
}
.result-box {
display: flex;
justify-content: space-between;
border: 1px solid #ddd;
border-radius: 24px;
padding: 30px;
margin-bottom: 30px;
.main-img{
width: 320px;
height: 220px;
border-radius: 24px;
img{
width: 100%;
height: 100%;
}
}
}
.text-box {
p,
li {
font-family: "Pretendard-L";
}
.text {
width: 1048px;
font-size: 16px;
color: #555555;
overflow: hidden;
/* Hide any overflow */
text-overflow: ellipsis;
/* Add an ellipsis at the end */
display: -webkit-box;
-webkit-line-clamp: 2;
/* Limit to 2 lines */
-webkit-box-orient: vertical;
margin-bottom: 20px;
}
h5 {
font-family: "Pretendard-B";
font-size: 25px;
margin-bottom: 20px;
}
.address {
font-size: 20px;
margin-bottom: 18px;
}
.date {
ul {
display: flex;
gap: 20px;
}
li {
font-size: 17px;
b {
margin-left: 5px;
}
}
}
}
.tabs {
.tab-box {
display: flex;
justify-content: end;
gap: 25px;
}
.tab-title {
display: flex;
align-items: center;
gap: 13px;
p {
cursor: pointer;
font-family: "HAPPINESS-SANS-REGULAR";
color: #cccccc;
font-size: 17px;
b {
color: #cccccc;
}
}
}
.tab-title.active p {
color: #000;
b {
color: #ff4141;
}
}
.tab-content {
.content-wrap {
margin-top: -23px;
}
.box-wrap {
width: 454px;
height: 370px;
.box {
background-image: linear-gradient(#fff, #fff),
linear-gradient(-45deg, #fff, #fff);
background-origin: border-box;
background-clip: content-box, border-box;
border: 3px solid transparent;
border-radius: 32px;
}
.box:hover {
background-image: linear-gradient(#fff, #fff),
linear-gradient(-45deg, #ca3e49, #3d355d);
}
.tab-image {
width: 100%;
height: 297px;
object-fit: cover;
border-radius: 30px;
}
}
}
}
.list-wrap {
border-top: 2px solid #000;
&>li {
border-bottom: 2px solid #eeeeee;
padding: 30px 10px;
}
}
}
/*사진 기록물 등록페이지 */
.insert-form {
padding: 10px 0;
border-top: 2px solid #000;
border-left: 0;
border-right: 0;
border-bottom: 1px solid #eee;
border-radius: 0;
dl {
dd {
padding: 0 24px;
li {
p {
font-family: "Pretendard-L";
font-size: 16px;
}
}
}
textarea {
min-height: 425px;
width: 100%;
}
.category-add {
width: 72px;
height: 29px;
color: #fff;
background-color: #000;
border-radius: 15px;
margin-left: 10px;
}
}
.invalid-feedback {
display: flex;
border: 0;
background-color: transparent;
margin-left: 10px;
span{
color: #e22d2d;
font-size: 14px;
font-family: "Pretendard-EL";
}
}
}
.file-input {
display: none;
}
/* Style the custom label (the clickable button) */
.file-label {
display: inline-block;
padding: 25px 0px;
width: 100% !important;
background-color: #f6f6f6;
border: 2px dashed #dadada;
color: white;
font-size: 16px;
border-radius: 10px;
cursor: pointer;
text-align: center;
transition: background-color 0.3s ease;
}
.file-label>div p {
font-family: "Pretendard-B" !important;
font-size: 20px !important;
}
/* Style the label on hover */
.file-label:hover {}
/* Style for the file names display */
.file-names {
display: block;
/* Make each file name appear on a new line */
font-size: 16px;
color: #333;
&> div, span {
color: #dadada;
}
.file-wrap {
border: 1px solid #dadada;
border-radius: 10px;
padding: 12px;
.file-name {
display: flex;
align-items: center;
img {
margin-right: 10px;
}
}
}
}
/* 모달 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
/* 배경 어두운 투명도 */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.modal-content {
background-color: #fff;
padding: 50px 35px;
border-radius: 8px;
max-width: 1000px;
width: 100%;
text-align: center;
h2 {
font-family: "Pretendard-B";
font-size: 30px;
}
/* pagination */
.pagination {
button {
width: 40px;
height: 40px;
margin: 0 4px;
border: 1px solid #f0f1f4;
background-color: #fff;
border-radius: 50px;
}
button.page-number {
font-size: 20px;
color: #555555;
width: 40px;
height: 40px;
background-color: #f0f1f4;
border-radius: 50px;
}
button.page-number.clicked {
background-color: #ce3e48;
color: #fff;
}
.anticon {
svg {
font-size: 17px;
path {
color: #636364;
}
}
}
}
.modal-search {
padding: 13px;
background-color: rgba(0, 61, 97, 0.05);
border-radius: 10px;
input {
padding: 0px 20px;
background-color: #fff;
border-radius: 5px;
width: 300px;
height: 45px;
font-size: 16px;
margin-right: 5px;
}
.search-btn {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 45px;
gap: 5px;
border-radius: 5px;
background-color: #000;
p {
font-size: 16px;
color: #fff;
font-family: "Pretendard-SB";
}
}
}
.register-b {
width: 110px;
height: 40px;
font-size: 18px;
background-color: #000;
color: #fff;
font-family: "Pretendard-M";
border-radius: 50px;
}
}
/* 사진기록물 상세페이지 */
.gallery-form {
border: 0;
dl {
padding: 30px 0 0 0;
border-top: 2px solid #000;
dd {
position: relative;
background: #f6f6f6;
padding: 25px 0px;
p {
flex: 1;
font-size: 35px;
text-align: center;
font-family: "Pretendard-B"
}
.date {
position: absolute;
right: 30px;
span {
font-family: "Pretendard-R";
font-size: 18px;
}
img {
object-fit: contain;
margin-right: 10px;
}
}
}
}
.gallery {
margin-bottom: 107px;
position: relative;
&.video {
margin-bottom: 50px;
img {
height: 800px;
border-radius: 20px;
}
}
.main-swiper {
.swiper {
width: 100%;
.swiper-slide {
img {
height: 800px;
width: 100%;
object-fit: contain;
background-color: #ddd;
}
}
}
}
.thumbnail {
width: 1127px;
padding: 30px 0px;
background-color: #fff;
border-radius: 90px;
position: absolute;
z-index: 1;
left: 50%;
transform: translateX(-50%);
bottom: -10%;
box-shadow: 1px 2px 19px 1px rgba(0, 0, 0, 0.04);
.swiper {
width: 940px;
position: initial;
height: 120px;
margin: 0 auto;
.swiper-wrapper {
margin: 0;
}
.swiper-slide img {
width: -webkit-fill-available;
}
}
}
.swiper-button-prev,
.swiper-button-next {
box-shadow: none;
margin-top: -35px;
}
.swiper-button-prev {
left: 20px;
}
.swiper-button-next {
right: 20px;
}
}
.img-box {
margin-right: 50px;
width: 600px;
height: 360px;
}
.info-form {
background-image: linear-gradient(#fff, #fff), linear-gradient(-45deg, #ca3e49, #3f355c);
background-origin: border-box;
background-clip: content-box, border-box;
border: 3px solid transparent;
border-radius: 32px;
padding: 0;
height: 360px;
.info-box {
padding: 50px 40px;
dl {
border: 0;
padding: 37px;
border-radius: 20px;
background-color: #f5f6f8;
dd {
background-color: transparent;
padding: 0;
p {
font-size: 20px;
text-align: left;
font-family: "Pretendard-L";
}
}
}
}
}
.btn-group {
margin-top: 24px;
text-align: center;
button {
width: 160px;
height: 46px;
font-family: "Pretendard-B";
font-size: 16px;
padding: 13px 21px;
text-align: left;
margin: 0 5px;
}
.select-down {
background-image: url(../../images/downbtn_border.png);
}
.all-down {
background-image: url(../../images/downbtn_bg.png);
color: #fff;
}
}
}
/* 회원관리, 카테고리 관리 */
.management {
.left-con {
width: 350px;
margin-right: 55px;
}
.search-area {
gap: 5px;
padding: 0;
height: 40px;
}
.search-wrap {
position: initial;
transform: none;
input {
width: 100%;
height: 100%;
border: 1px solid #000;
border-radius: 5px;
}
.select-box {
border-color: #000;
width: 100px;
height: 100%;
select {
width: 100%;
color: #000;
}
}
.search-btn {
position: relative;
flex-shrink: 0;
width: 40px;
height: 40px;
background-color: #000;
border-radius: 5px;
img {
position: absolute;
left: 50%;
right: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
}
.btn-group-small {
gap: 5px;
.button {
&.flex {
img {
text-align: left;
margin-right: 10px;
}
p {
text-align: center;
}
}
}
}
.select-box {
width: 230px;
height: 50px;
border: 1px solid #ddd;
padding: 0 15px;
margin: 0;
select {
width: 100%;
height: 100%;
font-size: 16px;
color: #999999;
}
}
.switch {
label {
margin-top: -12px;
}
}
table {
border-radius: 10px;
overflow: hidden;
thead {
display: table;
width: 100%;
background-color: #636364;
th {
color: #fff;
border: 1px solid #eee;
}
}
td {
/* border: 1px solid #eee; */
text-align: center;
}
tbody {
border: 1px solid #eee;
display: block;
min-height: 53rem;
max-height: 53rem; /* Adjust the height as per your requirement */
overflow-y: auto;
overflow-x: hidden; /* Optional: Prevent horizontal scroll */
}
tbody tr{
table-layout: fixed; display: table;width: 100%;
td{cursor: pointer;}
}
tbody tr:hover td {
background-color: rgba(194, 61, 74, 0.1);
}
}
.delete-member {
background-color: #f5f8f9;
td {
color: #aaaaaa;
}
}
textarea {
border-color: #ddd;
}
}
/* 인풋 커스텀 */
input[type="date"] {
position: relative;
width: 158px;
border-radius: 8px;
background: url(../../images/icon/calendar.png) no-repeat right 10px center / auto;
}
input[type="date"]::placeholder {
color: #fff;
;
}
input[type='date']::-webkit-calendar-picker-indicator {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: transparent;
color: transparent;
cursor: pointer;
}
input[type="checkbox"] {
position: relative;
width: 22px;
height: 22px;
padding: 0;
accent-color: #544483;
/* This will change the checkbox color when checked */
border: 1px solid #cccccc;
/* This controls the border color */
border-radius: 4px;
/* Optional: rounded corners */
background-color: #fff;
/* Default background */
appearance: none;
/* Remove the default checkbox appearance */
cursor: pointer;
}
/* Checked state of the checkbox */
input[type="checkbox"]:checked {
background-color: #544483;
/* Custom background when checked */
border-color: #544483;
/* Custom border color when checked */
}
input[type="checkbox"]:checked::before {
content: '';
background-image: url(../../images/check.png);
background-repeat: no-repeat;
position: absolute;
left: 2px;
top: 5px;
width: 15px;
height: 11px;
}
input[type="checkbox"]:checked+label {
color: rgba(0, 0, 0, 0.12);
/* Change the label color when checkbox is checked */
}
input[type="checkbox"]+label,
input[type='radio']+label {
font-size: 17px;
font-family: "Pretendard-L";
width: 140px;
flex-shrink: 0;
}
/* 기본스타일 제거, 버튼 모양 재설정 */
input[type='radio'] {
flex-shrink: 0;
-webkit-appearance: none;
/* 웹킷 브라우저에서 기본 스타일 제거*/
-moz-appearance: none;
/* 모질라 브라우저에서 기본 스타일 제거*/
appearance: none;
/*기본 브라우저에서 기본 스타일 제거*/
width: 22px;
height: 22px;
padding: 0;
border: 1px solid #ccc;
/*체크되지 않았을 때의 테두리 색상*/
border-radius: 50%;
outline: none;
/*focus 시에 나타나는 기본 스타일 제거*/
cursor: pointer;
}
/* 체크 시 버튼 모양 스타일*/
input[type='radio']:checked {
background-color: #544483;
/*체크 시 내부 원 색상*/
border: 4px solid #fff;
/*라인이 아닌, 라인과 원 사이 색상*/
box-shadow: 0 0 0 1px #ccc;
/*라인*/
}
.switch {
input[type="checkbox"] {
height: 0;
width: 0;
visibility: hidden;
}
label {
cursor: pointer;
text-indent: -9999px;
width: 65px;
height: 28px;
background: #544483;
display: block;
border-radius: 100px;
position: relative;
transition: background-color 0.3s ease;
/* Added smooth transition for background */
}
label:after {
content: '';
position: absolute;
top: 4px;
left: 5px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
transition: left 0.3s ease, transform 0.3s ease;
/* Smooth transition for the toggle ball */
}
/* When the input is checked */
input:checked+label {
background: #787878;
/* Color when active */
}
input:checked+label:after {
left: calc(100% - 5px);
transform: translateX(-100%);
/* Keeps the ball moving smoothly */
}
/* Optional: Make the toggle ball slightly larger during the click for a better effect */
label:active:after {
width: 20px;
/* Slightly increase the ball size */
height: 20px;
}
}
/* table*/
table {
width: 100%;
border-collapse: collapse;
border-top: 2px solid #000;
}
thead {
background-color: #f6f6f6;
}
th {
font-family: "Pretendard-SB";
font-size: 18px;
}
tbody tr {
border-bottom: 1px solid #eeeeee;
td {
font-size: 16px;
font-family: "Pretendard-L";
}
}
td,
th {
padding: 10px 0;
}