/* 여기에 light css 작성 */ .display-block { display: block !important; } /* 휴가 */ .fc-daygrid-day-events { max-height: 100px !important; overflow-y: auto !important; } /* 이벤트 선 없게 */ .fc-event { border: none; } /* 오전전반차 그래프 */ .fc-daygrid-event.half-day-am { width: calc(50% - 4px) !important; } /* 오후반차 그래프프 */ .fc-daygrid-event.half-day-pm { width: calc(50% - 4px) !important; margin-left: auto !important } /* 공휴일,일요일 색상 */ .fc-day-sun .fc-daygrid-day-number, .fc-col-header-cell:first-child .fc-col-header-cell-cushion { color: #ff4500 !important; } /* 토요일 색상 */ .fc-day-sat .fc-daygrid-day-number, .fc-col-header-cell:last-child .fc-col-header-cell-cushion { color: #6076e0 !important; } /* 캘린더 날짜 왼쪽 상단 위치하게 */ .fc-daygrid-day-number { margin-right: auto; } /* 데이트피커 뾰족없게게 */ .flatpickr-calendar:before, .flatpickr-calendar:after { display: none !important; } /* 기본 스타일은 그대로 두고, 데이트피커 인풋의 추가 스타일 정의 */ .fc-toolbar-title { cursor: pointer; } /* 클릭 가능한 날짜 (오늘 + 미래) */ .fc-daygrid-day.clickable { cursor: pointer; transition: background-color 0.2s ease-in-out; } /* 마우스를 올렸을 때 효과 */ .fc-daygrid-day.clickable:hover { background-color: rgba(0, 0, 0, 0.05); /* 연한 배경 효과 */ } /* 주말 (토요일, 일요일) 및 공휴일 */ .fc-day-sat-sun { cursor: not-allowed !important; opacity: 0.6; /* 흐려 보이게 */ } /* 과거 날짜 (오늘 이전) */ .fc-daygrid-day.past { cursor: not-allowed !important; opacity: 0.6; /* 흐려 보이게 */ } /* 기본 이벤트 스타일 */ .fc-daygrid-event { border: none !important; border-radius: 4px; } /* 오전 반차 (왼쪽 절반) */ .selected-event.half-day-am { width: 50% !important; left: 0 !important; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } /* 오후 반차 (오른쪽 절반) */ .selected-event.half-day-pm { width: 50% !important; margin-left: auto !important; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } /* 본인 모달 */ /* 닫기 버튼 */ .close-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 18px; cursor: pointer; } /* 리스트 아이템 */ .vacation-item { display: flex; align-items: center; font-size: 16px; font-weight: bold; margin-bottom: 8px; padding: 5px 10px; border-radius: 5px; background: #f9f9f9; } /* 모달 본문 스크롤 */ .modal-body { max-height: 130px; overflow-y: auto; } /* 선물하기 모달 */ /* 연차 개수 버튼 */ .count-btn { font-size: 18px; padding: 2px 10px; border: none; background: #2C3E50; color: white; border-radius: 5px; cursor: pointer; } .count-btn:hover { background: #1d2c44; } .count-btn:disabled { background: #cccccc; cursor: not-allowed; } /* 버튼 컨테이너 (우측 정렬) */ .custom-button-container { display: flex; justify-content: flex-end; align-items: center; } /* 버튼 기본 스타일 */ .custom-button { background: none; /* 배경색 없음 */ border: none; /* 테두리 없음 */ padding: 10px; /* 크기 조정 */ cursor: pointer; /* 클릭 가능하도록 변경 */ } /* 아이콘 색상 변경 (기본) */ .custom-button i { color: #282538; /* 기본 아이콘 색상 */ font-size: 25px; /* 아이콘 크기 */ } /* 버튼 호버 효과 */ .custom-button:hover i { color: #ff0800; /* 호버 시 아이콘 색상 변경 */ } /* 모달 배경 투명하게 */ .modal-dialog { background: none !important; /* 배경 제거 */ box-shadow: none !important; /* 음영 제거 */ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* 모달 내용 스타일 */ .modal-content { background: #fff; /* 기존 흰색 배경 유지 */ border-radius: 8px; box-shadow: none !important; /* 내부 음영 제거 */ padding: 20px; max-width: 500px; width: 100%; } .grayscaleImg { filter: grayscale(100%); } /* scrollbar 안보이게 */ .scrollbar-none { scrollbar-width: none; } /* project list */ .map { top: -160px; left: -5px; } @keyframes sparkle { 0% { color: #ffcc00; } 50% { color: red; } 100% { color: #ffcc00; } } .bxs-map { animation: sparkle 1s infinite; /* 1초마다 반복 */ } .popover-close { position: absolute; top: 1rem; right: 1rem; z-index: 2; background-color: #fff !important; border-radius: 0.5rem; opacity: 1; padding: 0.635rem; box-shadow: 0 0.125rem 0.25rem rgba(161, 172, 184, 0.4); transition: all 0.23s ease 0.1s; transform: translate(23px, -25px); } .popover-close:hover { opacity: 1; outline: none; transform: translate(20px, -20px); } /* project list end */