초기 커밋: 5130 레거시 시스템
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경 - DB 연결 하드코딩 → .env 기반으로 변경 - MySQL strict mode DATE 오류 수정
This commit is contained in:
303
css/eworks.css
Normal file
303
css/eworks.css
Normal file
@@ -0,0 +1,303 @@
|
||||
|
||||
.nav-link:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.no-hover:hover {
|
||||
/* hover 상태에서의 특별한 스타일 없음 */
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background: -webkit-linear-gradient(left, #dcdcdc 0%,#3c3c3c 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
}
|
||||
.progress-bar2 {
|
||||
background: -webkit-linear-gradient(left, #CCCCFF 0%,#aaaaaa 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
}
|
||||
|
||||
@charset "utf-8";
|
||||
|
||||
.typing-txt{display: none;}
|
||||
.typeing-txt ul{list-style:none;}
|
||||
.typing {
|
||||
display: inline-block;
|
||||
animation-name: cursor;
|
||||
animation-duration: 0.3s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
@keyframes cursor{
|
||||
0%{border-right: 1px solid #fff}
|
||||
50%{border-right: 1px solid #000}
|
||||
100%{border-right: 1px solid #fff}
|
||||
}
|
||||
|
||||
|
||||
#myMsgDialog {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width:60%;
|
||||
background-color: #FFF0F5;
|
||||
border:1px solid black;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
#closeDialog {
|
||||
width:25%;
|
||||
background-color: #DC6089;
|
||||
border:1px solid black;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
#mButton, #closeButton {
|
||||
padding: 7px 30px;
|
||||
background-color: #DC6089;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
#cButton {
|
||||
padding: 7px 30px;
|
||||
background-color: #FFC0CB;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
#myMsgDialog {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width:100%;
|
||||
background-color: #BEEFFF;
|
||||
border:1px solid black;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
#closeDialog {
|
||||
width:25%;
|
||||
background-color: #BEEFFF;
|
||||
border:1px solid black;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
#mButton, #closeButton {
|
||||
padding: 7px 30px;
|
||||
background-color: #66ccff;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
#cButton {
|
||||
padding: 7px 30px;
|
||||
background-color: #2828CD;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.blink {
|
||||
animation: blink-animation 3s steps(2, start) infinite;
|
||||
}
|
||||
|
||||
@keyframes blink-animation {
|
||||
to {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.my-card-padding {
|
||||
padding: 2px; /* 원하는 값으로 설정 */
|
||||
}
|
||||
|
||||
/* 우측배너 제작 */
|
||||
.sideBanner {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 200px;
|
||||
top: calc(100vh - 32vh);
|
||||
left: calc(100vw - 8vw);
|
||||
z-index: 999; /* 높은 양의 값으로 변경 */
|
||||
}
|
||||
|
||||
/* 우측 결재도착 배너 제작 */
|
||||
.sideEworksBanner {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: calc(100vh - 13vh);
|
||||
left: calc(100vw - 8vw);
|
||||
z-index: 9999; /* 높은 양의 값으로 변경 */
|
||||
overflow: hidden; /* 가상 요소가 박스를 벗어나지 않도록 함 */
|
||||
}
|
||||
|
||||
/* 빛나는 효과를 위한 가상 요소 */
|
||||
.sideEworksBanner::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
bottom: -50%;
|
||||
left: -50%;
|
||||
background: linear-gradient(to left, rgba(255, 255, 255, 0.8), transparent 50%);
|
||||
transform: skewX(-25deg);
|
||||
animation: shine 1.5s infinite linear;
|
||||
}
|
||||
|
||||
.sideEworksBanner:hover {
|
||||
cursor: pointer; /* 마우스 hover 시 커서 모양 변경 */
|
||||
}
|
||||
|
||||
|
||||
/* 애니메이션 정의 */
|
||||
@keyframes shine {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(200%);
|
||||
}
|
||||
}
|
||||
|
||||
.truncate {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer; /* 마우스를 올렸을 때 손가락 모양으로 변경 */
|
||||
}
|
||||
.truncate:hover {
|
||||
background-color: #f5f5f5; /* 원하는 배경색으로 변경 */
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
background-color: transparent;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
#bellIcon , #alertEworks {
|
||||
animation: blink 1.5s linear infinite;
|
||||
color: white; /* 아이콘 색상을 흰색으로 설정 */
|
||||
border-radius: 15%; /* 원형 모양으로 보이게 함 */
|
||||
padding: 3px; /* 아이콘 주변에 여백 추가 */
|
||||
}
|
||||
#bellIcon, #alertEworks {
|
||||
font-size: 1.1em; /* 또는 원하는 크기 */
|
||||
display: none; /* 초기에는 숨겨져 있음 */
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-menu, .dropdown-item {
|
||||
display: block;
|
||||
font-size:13px;
|
||||
}
|
||||
|
||||
|
||||
/* 미래기업 형태 .navbar-custom { */
|
||||
/* background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); */
|
||||
/* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); */
|
||||
/* } */
|
||||
/* 대한 형태
|
||||
.navbar-custom {
|
||||
background: linear-gradient(270deg, rgba(10,10,5,1) 0%, rgba(0,9,10
|
||||
,1) 35%, rgba(0,160,180,1) 80%);
|
||||
box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.2);
|
||||
} */
|
||||
|
||||
.navbar-custom {
|
||||
background: linear-gradient(270deg, rgba(0,0,50,1) 0%, rgba(0,0,100,1) 35%, rgba(0,0,180,1) 80%);
|
||||
box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
.navbar-custom .navbar-brand,
|
||||
.navbar-custom .navbar-nav .nav-link {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
/* 모바일 화면에 대한 스타일 설정 */
|
||||
.container-fluid {
|
||||
/* 스타일 변경 */
|
||||
width : 940px;
|
||||
|
||||
}
|
||||
.container {
|
||||
/* 스타일 변경 */
|
||||
width : 900px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 마우스 오버 효과를 위한 CSS */
|
||||
.nav-item:hover .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: 0 0 5px rgba(10, 10, 5, 0.5); /* x-offset, y-offset, blur-radius, shadow color */
|
||||
}
|
||||
|
||||
.sitemap-dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%; /* 큰 메뉴 아래로 위치시킵니다. */
|
||||
left: -25%;
|
||||
width: 150%; /* 화면 전체 너비를 사용합니다. */
|
||||
max-height: none; /* 최대 높이 제한을 해제합니다. */
|
||||
background-color: #ffffff; /* 배경색을 원하는 색상으로 수정하세요 */
|
||||
z-index: 999; /* 원하는 숫자를 사용하여 z-index 설정 */
|
||||
font-size: 16px;
|
||||
border-radius: 10px; /* 4각 라운드 테두리를 설정합니다. */
|
||||
border: 1px solid #ccc; /* 테두리 선 스타일과 색상을 지정합니다. */
|
||||
}
|
||||
|
||||
/* 기본 체크박스 숨기기 */
|
||||
.master-checkbox, .checkItem {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 사용자 정의 체크박스 레이블 스타일 */
|
||||
.checkbox-numbered-label {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
background-color: #f2f2f2;
|
||||
border: 2px solid #d1d1d1;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
line-height: 20px; /* 라벨 내의 텍스트를 중앙에 위치시킴 */
|
||||
}
|
||||
|
||||
/* 체크박스가 선택됐을 때의 스타일 */
|
||||
.master-checkbox:checked + .checkbox-numbered-label,
|
||||
.checkItem:checked + .checkbox-numbered-label {
|
||||
background-color: #00008B ;
|
||||
border-color: #4CAF50;
|
||||
color: white; /* 체크박스 내의 텍스트 색상 변경 */
|
||||
}
|
||||
|
||||
/* 체크박스 숫자 스타일 */
|
||||
.checkbox-numbered-container {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user