449 lines
8.2 KiB
CSS
449 lines
8.2 KiB
CSS
/*
|
|
css-only-tooltip version 1.0.0
|
|
ⓒ 2015 AHN JAE-HA http://github.com/eu81273
|
|
MIT License
|
|
*/
|
|
|
|
|
|
[data-tooltip-text]:hover {
|
|
position: relative;
|
|
}
|
|
|
|
[data-tooltip-text]:hover:after {
|
|
background-color: #000000;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
|
|
-webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
|
|
-moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
|
|
box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
|
|
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
border-radius: 5px;
|
|
|
|
color: #FFFFFF;
|
|
font-size: 12px;
|
|
|
|
content:"캐시키보드1 : " attr(data-tooltip-text) "\A캐시키보드2 : " attr(data-tooltip-text2);
|
|
white-space:pre;
|
|
|
|
margin-bottom: 10px;
|
|
top: 130%;
|
|
left: 0;
|
|
padding: 7px 12px;
|
|
position: absolute;
|
|
text-align: left;
|
|
|
|
z-index: 9999;
|
|
}
|
|
|
|
|
|
|
|
.mngOff {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
|
|
|
|
.progress-group {
|
|
display: flex;
|
|
align-items: center; /* 세로 축에서 중앙 정렬 */
|
|
justify-content: space-between; /* 자식 요소들 사이에 공간을 균등하게 배분 */
|
|
margin-bottom: 5px; /* 그룹 간의 여백 */
|
|
}
|
|
|
|
.progress-group:last-child {
|
|
margin-bottom: 0; /* 마지막 progress-group에 대한 여백을 제거 */
|
|
}
|
|
|
|
.progressbar-label {
|
|
/* 필요한 추가 스타일링 */
|
|
flex: 0 0 auto; /* 라벨이 컨텐츠 크기에 따라 크기가 정해지도록 설정 */
|
|
margin-right: 5px; /* 라벨과 진행율 바 사이의 여백 */
|
|
padding : 0 5px;
|
|
width:45px;
|
|
}
|
|
|
|
.progressbar-container {
|
|
flex: 1; /* 진행율 바 컨테이너가 남은 공간을 모두 차지하도록 설정 */
|
|
width: 0; /* flex: 1 속성을 활성화하기 위해 width를 0으로 설정 */
|
|
position: relative;
|
|
}
|
|
|
|
.progressbar-border {
|
|
border: 1px solid #ccc;
|
|
height: 15px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progressbar-background {
|
|
height: 100%;
|
|
background-color: white;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.progressbar {
|
|
position: absolute;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.progress-group2 {
|
|
display : none;
|
|
}
|
|
|
|
|
|
|
|
/*** 이슈관리 > 업무이슈 [S] ***/
|
|
#columns{
|
|
column-width:350px;
|
|
column-gap: 15px;
|
|
}
|
|
#columns figure{
|
|
display: inline-block;
|
|
border:1px solid rgba(0,0,0,0.2);
|
|
margin:0;
|
|
margin-bottom: 15px;
|
|
padding:10px;
|
|
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
|
|
line-height: 15px;
|
|
font-size: 9pt;
|
|
color:gray;
|
|
width:100%;
|
|
}
|
|
#columns figure img {
|
|
width:100%;
|
|
}
|
|
|
|
|
|
.columns-figure-title > span.card-title{
|
|
font-size: 10pt;
|
|
/*font-weight: bold;*/
|
|
line-height: 20px;
|
|
}
|
|
.columns-figure-title > span.card-date{
|
|
color:navy;
|
|
padding-left:10px;
|
|
line-height: 20px;
|
|
}
|
|
.columns-figure-title > .repeat{
|
|
color: #6666bd;
|
|
}
|
|
|
|
.columns-figure-footer{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.columns-figure-footer > div > span{
|
|
margin-right:10px;
|
|
}
|
|
.columns-figure-footer > div > span.strong{
|
|
color:navy;
|
|
}
|
|
.columns-figure-detail{
|
|
background: #fffaee;
|
|
border:1px solid #faecb9;
|
|
border-radius: 5px;
|
|
padding:5px;
|
|
margin-bottom: 10px;
|
|
/*max-height:150px;*/
|
|
overflow-y: scroll;
|
|
color:gray;
|
|
font-size: 9pt;
|
|
line-height: 20px;
|
|
word-break: break-all;
|
|
}
|
|
.columns-figure-detail.repeat{
|
|
background: #eef7fd;
|
|
border:1px solid #d2f2ff;
|
|
}
|
|
|
|
.columns-figure-comment{
|
|
padding-bottom: 10px;
|
|
}
|
|
.columns-figure-comment > .cmt-list{
|
|
background: #f4ffe6;
|
|
border:1px solid #b2e5b7;
|
|
border-radius: 5px;
|
|
padding:3px;
|
|
color:gray;
|
|
margin-top: 3px;
|
|
word-break: break-all;
|
|
}
|
|
.columns-figure-comment > .appendix{
|
|
background: white;
|
|
border:1px solid #bdbdbd;
|
|
border-radius: 5px;
|
|
padding:3px 10px;
|
|
color:gray;
|
|
margin: 0px;
|
|
}
|
|
.columns-figure-comment > .appendix > span{
|
|
color:black;
|
|
font-weight: bold;
|
|
line-height: 20px;
|
|
border:1px solid #c0c0c0;
|
|
margin-right:0px;
|
|
}
|
|
.columns-figure-comment > div > span{
|
|
color:black;
|
|
font-weight: bold;
|
|
line-height: 20px;
|
|
}
|
|
/*** 이슈관리 > 업무이슈 [E] ***/
|
|
|
|
|
|
/** 회의록 - 파일첨부 [S] **/
|
|
.insert {
|
|
display: block;
|
|
width:100%;
|
|
border: 1px solid #dbdbdb;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
.insert .file-list {
|
|
height: 100px;
|
|
overflow: auto;
|
|
border: 1px solid #989898;
|
|
padding: 10px;
|
|
text-align: left;
|
|
}
|
|
.insert .file-list .filebox p {
|
|
font-size: 14px;
|
|
/*margin-top: 10px;*/
|
|
display: inline-block;
|
|
}
|
|
.insert .file-list .filebox .delete i{
|
|
color: #ff5353;
|
|
margin-left: 5px;
|
|
}
|
|
/** 회의록 [E] **/
|
|
|
|
|
|
/** 파일 BOX [S] **/
|
|
span.file-delete{
|
|
padding:2px 5px;
|
|
margin:5px;
|
|
border-radius: 5px;
|
|
border:1px solid red;
|
|
background: white;
|
|
color:red;
|
|
}
|
|
|
|
.appendix{
|
|
padding:2px 5px;
|
|
margin:5px;
|
|
border:1px solid silver;
|
|
border-radius: 5px;
|
|
background: white;
|
|
display: inline-block;
|
|
}
|
|
/** 파일 BOX [E] **/
|
|
|
|
|
|
/** 좌우정렬 [S] **/
|
|
.container_div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
.left_div {
|
|
flex-grow: 1; /* 남는 공간을 모두 차지하도록 설정 */
|
|
display: flex; /* Flexbox 사용 */
|
|
justify-content: left; /* 가로 중앙 정렬 */
|
|
align-items: center; /* 세로 중앙 정렬 */
|
|
}
|
|
.right_div {
|
|
width: 80px; /* 고정 너비 설정 */
|
|
display: flex; /* Flexbox 사용 */
|
|
justify-content: right; /* 가로 중앙 정렬 */
|
|
align-items: center; /* 세로 중앙 정렬 */
|
|
}
|
|
/** 좌우정렬 [E] **/
|
|
|
|
|
|
|
|
/** 진행업무 리스트 [S] **/
|
|
.site_01{
|
|
color:blue;
|
|
}
|
|
|
|
.site_10{
|
|
color:red;
|
|
}
|
|
/** 진행업무 리스트 [E] **/
|
|
|
|
|
|
/** 달력(스케쥴) [S] **/
|
|
div.cal_box{
|
|
display: inline-block;
|
|
padding: 2px 5px;
|
|
border-radius: 5px;
|
|
border: 1px solid #d0d0d0;
|
|
margin-top: 5px;
|
|
width: 100%;
|
|
max-width: 160px;
|
|
text-align: left;
|
|
background: white;
|
|
z-index: 10;
|
|
}
|
|
span.cal_box{
|
|
margin:5px;
|
|
padding: 3px 0px;
|
|
border-radius: 5px;
|
|
border: 1px solid #d0d0d0;
|
|
text-align: left;
|
|
background: white;
|
|
}
|
|
.cal_today{
|
|
background: #f1f1f1 !important;
|
|
}
|
|
.cal_td{
|
|
vertical-align: top !important;
|
|
height: 80px;
|
|
text-align: left !important;
|
|
}
|
|
.schedule>tbody>tr>td:first-child{
|
|
background: #fff3f3;
|
|
}
|
|
.schedule>tbody>tr>td:last-child{
|
|
background: #f3f3ff;
|
|
}
|
|
.cal_td > div:first-child{
|
|
text-align: right;
|
|
}
|
|
|
|
/* 숫자 기본 표시 */
|
|
.schedule-btn-add .day-num {
|
|
display: inline-block;
|
|
background-color: transparent; /* 배경색 없음 */
|
|
border: none; /* 테두리 없음 */
|
|
}
|
|
|
|
/* plus-btn은 초기에는 숨깁니다. */
|
|
.schedule-btn-add .plus-btn {
|
|
display: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 마우스를 요소 위로 올릴 때 plus-btn을 보이게 합니다. */
|
|
.schedule-btn-add:hover .day-num {
|
|
display: none;
|
|
}
|
|
.schedule-btn-add:hover .plus-btn {
|
|
display: inline-block;
|
|
}
|
|
|
|
.day {
|
|
position: relative;
|
|
width: 100%;
|
|
height:100%;
|
|
overflow: hidden;
|
|
}
|
|
.day::before {
|
|
content: attr(data-date);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 40px;
|
|
color: rgba(0, 0, 0, 0.1); /* 연한 색상으로 설정 */
|
|
z-index: 0;
|
|
}
|
|
|
|
/** 달력(스케쥴) [E] **/
|
|
|
|
|
|
|
|
/* 모달 스타일 */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 9999;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: #fff;
|
|
border-radius: 5px;
|
|
padding: 20px;
|
|
width: 300px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.modal-header {
|
|
margin-top: -20px;
|
|
padding: 0px 40px 0px 0px; /* X 버튼 공간 확보 */
|
|
}
|
|
|
|
.modal-form {
|
|
padding: 0px; /* X 버튼 공간 확보 */
|
|
}
|
|
|
|
/* 하단 버튼 영역 스타일 */
|
|
.modal-footer {
|
|
padding: 15px 00px; /* 상하좌우 패딩 조정 */
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-close-button:hover,
|
|
.footer-close-button:focus {
|
|
color: black;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 닫기 버튼 스타일 */
|
|
.close-button {
|
|
|
|
color: #aaa;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.close-button:hover,
|
|
.close-button:focus {
|
|
color: black;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.close-button {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
color: #aaa;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.close-button:hover,
|
|
.close-button:focus {
|
|
color: black;
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
/* 업체정보 스타일 */
|
|
.company-user-td {
|
|
border:0px solid white !important;
|
|
text-align: center;
|
|
}
|
|
.company-user-td > button {
|
|
margin-bottom: 5px;
|
|
line-height:15px;
|
|
padding: 0px 10px;
|
|
}
|