527 lines
24 KiB
CSS
527 lines
24 KiB
CSS
@charset "UTF-8";
|
|
|
|
/*초기화*/
|
|
|
|
body, h1, h2, h3, h4, h5, h6, p, ul, li, dl, dd, div, a, address, small, img, input,span,iframe, form, tr, td, table, fieldset, select, header, tbody, frame {margin:0; padding:0;}
|
|
h1, h2, h3, h4, h5, h6 {font-weight: 500;}
|
|
ul li {list-style:none;}
|
|
ul li {list-style:none;}
|
|
a {text-decoration: none; cursor: pointer;}
|
|
address {font-style: normal;}
|
|
button {border: none; cursor: pointer;}
|
|
.hidden {position: absolute; top: -9999px;}
|
|
img {border:0;}
|
|
textarea {resize:none;}
|
|
table {border-collapse:collapse;}
|
|
.borderNo {border: none;}
|
|
/* 바깥 테두리에만 border 추가 */
|
|
/*
|
|
table {
|
|
border: 1px solid black;
|
|
}
|
|
상단과 좌측 테두리 숨기기
|
|
tr:first-child th {
|
|
border-top: none;
|
|
}
|
|
tr th:first-child, tr td:first-child {
|
|
border-left: none;
|
|
}
|
|
우측 테두리 숨기기
|
|
tr th:last-child, tr td:last-child {
|
|
border-right: none;
|
|
}
|
|
하단 테두리 숨기기
|
|
tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
*/
|
|
|
|
/********************************공통*******************************/
|
|
html,body {height:100%;}
|
|
body {font-family: 'Noto Sans KR', sans-serif; width: 100%; font-size:13px;}
|
|
.dashboard_body {background: #eaf0f5;}
|
|
/* text-align*/
|
|
|
|
.align_l {text-align: left !important;}
|
|
.align_c {text-align: center !important;}
|
|
.align_r {text-align: right !important;}
|
|
|
|
/* float: right; */
|
|
|
|
.float_r {float:right !important;}
|
|
.float_l {float:left !important;}
|
|
|
|
.border1b {
|
|
border: 2px solid black;
|
|
}
|
|
|
|
/* width */
|
|
|
|
.w100 {width:100%; box-sizing: border-box; padding:5px; }
|
|
.w90 {width:calc( 90% - 10px ); box-sizing: border-box; padding:10px;}
|
|
.w80 {width:calc( 80% - 10px ); box-sizing: border-box; padding:10px;}
|
|
.w70 {width:calc( 70% - 10px ); box-sizing: border-box; padding:10px;}
|
|
.w60 {width:60%; box-sizing: border-box; padding:10px;}
|
|
.w50 {width:50%; box-sizing: border-box; padding:10px;}
|
|
.w45 {width:45%; box-sizing: border-box; padding:10px;}
|
|
.w40 {width:40%; box-sizing: border-box; padding:10px;}
|
|
.w35 {width:35%;box-sizing: border-box; padding:10px;}
|
|
.w31 {width:31%;box-sizing: border-box; padding:10px; }
|
|
.w30 {width:30%;box-sizing: border-box; padding:10px;}
|
|
.graphs-container {display: flex;justify-content: left;align-items: flex-start;}
|
|
.w25 {width:25%; box-sizing: border-box; padding:10px;}
|
|
.w20 {width:100%; box-sizing: border-box; }
|
|
.w10 {width:10%; box-sizing: border-box; padding:10px;}
|
|
|
|
.pl10 {padding-left:10px;}
|
|
.pr10 {padding-right:10px;}
|
|
.mt10 {margin-top:10px;}
|
|
.mr10 {margin-right:10px;}
|
|
.mb10 {margin-bottom:10px;}
|
|
|
|
.w30p {width:30px;}
|
|
.bd_box {box-sizing: border-box;}
|
|
|
|
/* button style */
|
|
|
|
.btn_style {display: inline-block; font-weight:bold; border-radius: 5px; padding:0 10px; cursor: pointer; transition: all 0.3s;}
|
|
|
|
.btns {background:#d8eeff; color:#0084ff; border-radius: 3px; font-size:12px; padding: 5px 7px; height:27px; vertical-align: bottom; transition: 0.3s ease;}
|
|
.btns span {display:inline-block; padding:0px 3px; text-align: center; background:#d4e9ff; color:#0066d3; border-radius: 2px;}
|
|
.btns:hover {background:#3999ff; color:#fff;}
|
|
|
|
.blue_btn2 {border:1px solid #3999ff;background:#3999ff;color:#fff;/* border-radius: 2px; */border-radius: 2px;padding: 3px 7px;font-size: 9px;transition: all 0.3s;margin-top: 7px;}
|
|
.blue_btn2:hover {background:#348ae6; color:#fff;}
|
|
|
|
.blue_btn3 {border:1px solid #0066cc ;background:#0066cc ;color:#fff;/* border-radius: 2px; */border-radius: 2px;padding: 3px 7px;font-size: 9px;transition: all 0.3s;margin-top: 7px;}
|
|
.blue_btn3:hover {background:#348ae6; color:#fff;}
|
|
|
|
.red_btn {display:inline-block; padding: 3px 7px; border-radius: 2px; background:#f36969; color:#ffffff; font-size:12px;transition: all 0.3s;}
|
|
.red_btn:hover {background: #eb6565; color:#fff;}
|
|
|
|
.green_btn {display:inline-block; padding: 3px 7px; border-radius: 2px; background:#6ac56f; color:#ffffff; font-size:12px;transition: all 0.3s;}
|
|
.green_btn:hover {background:#5faf63; color:#fff;}
|
|
|
|
|
|
|
|
.header_btn .btns {background:none; color:#000; font-weight: bold; letter-spacing: -0.3px;}
|
|
.header_btn .btns svg {color:#3999ff;}
|
|
.header_btn .btns:hover {background:none; color:#3999ff;}
|
|
|
|
/* color */
|
|
|
|
.red {color:#ff3939;}
|
|
.blue {color:#0066d3;}
|
|
.green {color:#16c21d;}
|
|
|
|
|
|
.container {min-width:1920px; height:100%; }
|
|
|
|
header {width:100%; height:45px; box-sizing: border-box; overflow: hidden;}
|
|
h1 {margin:10px; text-align: center;}
|
|
h1 a {width:70px; display: inline-block; margin-left: -10px;}
|
|
h1 a img {width:100%;}
|
|
header .btns_wrap {text-align: right;}
|
|
header .btns_wrap .btns { padding: 5px 7px; height:27px; vertical-align: bottom; }
|
|
header .btns_wrap .btns.blue { color:#0084ff; }
|
|
|
|
|
|
#menu {width:170px; height:100%; position:absolute;z-index: 2; transition: 0.3s; background:#fff;border-right:2px solid #eceff1; box-sizing: border-box; }
|
|
.menu_section {width:100%;}
|
|
.menu_section ul {width:100%;}
|
|
.menu_section ul li a {display: block; line-height:40px; text-align: left; box-sizing: border-box;
|
|
color:#616161; transition: 0.1s; font-weight: bold; font-size:13px;}
|
|
.menu_section ul li a::before {content: ''; display:inline-block; width:2px; height:2px; background:#fff; margin:0 10px 0 0;}
|
|
.menu_section ul li a:hover {color:#0084ff;}
|
|
.menu_on {background:#f1f7fb; color:#0084ff;}
|
|
.menu_section ul li a.menu_on {color:#0084ff;}
|
|
.menu_section ul li a.menu_on::before {content:''; display: inline-block; vertical-align: middle; width:2px; height:30px; background:#1c7fcf;}
|
|
|
|
#contentsR {width: calc(100% - 1px); height:98%; background:#eaf0f5; padding:10px 10px 10px 10px; box-sizing: border-box;}
|
|
.contents_section {height:820px;background:#fff;border-radius: 5px;box-sizing: border-box;padding: 5px;box-shadow: 0px 6px 6px 4px #00000012;display: flex;justify-content: left;align-items: flex-start; gap: 50px;}
|
|
.contents_section1 {height:814px;background:#fff;border-radius: 5px;box-sizing: border-box;padding: 5px; width:100%;}
|
|
.contents_section50 {height:814px;background:#fff;border-radius: 5px;box-sizing: border-box;padding: 5px; width:50%;}
|
|
.contents_section80 {height:814px;background:#fff;border-radius: 5px;box-sizing: border-box;padding: 5px; width:80%;}
|
|
|
|
|
|
|
|
/* thead other color */
|
|
|
|
.a_red {background:#ff3939; color:#fff;}
|
|
.thead_red {background:#ffc6c6; color:#000;}
|
|
.thead_orange {background:#ffd28f; color:#000;}
|
|
.thead_green {background:#d4eded; color:#000;}
|
|
.thead_green2 {background:#dfedd4; color:#000;}
|
|
.thead_skyblue {background:#dfecfa; color:#000;}
|
|
|
|
.sub_thead {background:#f2f8ff; color:#fff;}
|
|
.n_wrap {overflow: hidden;box-sizing: border-box;display: flex;flex-direction: column;width: 25%;}
|
|
.n_wrap40 {overflow: hidden;box-sizing: border-box;display: flex;flex-direction: column;width: 40%;}
|
|
.n_wrap30 {overflow: hidden;box-sizing: border-box;display: flex;flex-direction: column;width: 30%;}
|
|
.n_wrap2 {overflow: hidden;box-sizing: border-box;}
|
|
.n_wrap3 {overflow: hidden;box-sizing: border-box; height: 500px; margin-top:30px}
|
|
.section_title > div {font-weight:bold; color:#000;font-size:13px;line-height:33px;}
|
|
.section_title svg {margin-right:3px;color: #0084ff; font-size:21px;}
|
|
.section_title button {float:right; font-weight:bold;}
|
|
.select_box {width:100%; padding-bottom:10px;font-size:13px;}
|
|
.select_box select {width:150px; height:30px;}
|
|
.select_box .bluebox {float:right;border:1px solid #eee; padding: 0 0 0 10px;}
|
|
.select_box .bluebox span {display:inline-block; font-size: 15px;
|
|
background:#3999ff; color:#fff;
|
|
text-align: right;
|
|
padding: 0px 10px;
|
|
margin-left:5px;
|
|
text-align: right;
|
|
|
|
line-height: 30px;}
|
|
|
|
.graph_section {height: 226px;}
|
|
|
|
thead {border-bottom:2px solid #d6e2eb;}
|
|
|
|
|
|
.war {color:red;}
|
|
.status_green {display:inline-block; min-width:20px; padding:3px; height:20px; border-radius: 2px; background:#daffdc; color:#0f9616; text-align:center; }
|
|
.status_red {display:inline-block; min-width:20px; padding:3px; height:20px; border-radius: 2px; background:#ffd5d5; color:#ff1e1e; text-align: center;}
|
|
|
|
.n_table {width:100%; font-size:11.5px; text-align: center; border-collapse:collapse;}
|
|
.n_table thead {color:#fff;}
|
|
.n_table thead th {padding:8px 0;background:#646b70;}
|
|
|
|
.n_table1 {width:100%;font-size:11.5px;text-align: center;/* height: 190px; */}
|
|
.n_table1 thead {color:#fff;}
|
|
.n_table1 thead th {padding: 4px 0;background:#646b70;}
|
|
|
|
.n_table2 {width:100%; font-size:11.5px; text-align: center; border-collapse:collapse;}
|
|
.n_table2 thead {color:#fff;}
|
|
.n_table2 thead th {padding:8px 0;background:#646b70;}
|
|
|
|
.n_table tbody td {/*background:#fff */ }
|
|
.n_table tbody tr:hover td {background:#eaf0f5;}
|
|
.n_table td {padding:3px;}
|
|
|
|
.n_table2 tbody td {/*background:#fff */ }
|
|
.n_table2 tbody tr:hover td {background:#eaf0f5;}
|
|
|
|
/* 바깥 테두리에만 border 추가 */
|
|
/*
|
|
.n_table {border-collapse:collapse;}
|
|
.n_table thead th{
|
|
border: 1px solid black;
|
|
}
|
|
.n_table tbody tr td {
|
|
border: 1px solid black;
|
|
}
|
|
상단과 좌측 테두리 숨기기
|
|
.n_table tbody tr:first-child th {
|
|
border-top: none;
|
|
}
|
|
.n_table tbody tr th:first-child {
|
|
border-left: none;
|
|
}
|
|
.n_table tr td:first-child {
|
|
border-left: none;
|
|
}
|
|
우측 테두리 숨기기
|
|
.n_table tbody tr th:last-child {
|
|
border-right: none;
|
|
}
|
|
.n_table tr td:last-child {
|
|
border-right: none;
|
|
}
|
|
하단 테두리 숨기기
|
|
.n_table tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
*/
|
|
|
|
table th {border:1px solid #c8c8c8;}
|
|
table td {border:1px solid #c8c8c8;}
|
|
|
|
.p_name {display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 2px;
|
|
background: #374957;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
transition: all 0.3s;
|
|
}
|
|
.p_name:hover {background: #1e82d4;color: #fff;}
|
|
|
|
.red_on {display: inline-block; padding:0 5px; border-radius: 3px; font-weight: bold;
|
|
background:rgb(248, 42, 42); color:#fff; transition: all 0.3s;
|
|
}
|
|
.red_on:hover { background:rgb(216, 3, 3); color:#fff;}
|
|
|
|
|
|
.asd_box .section_title > div {opacity:0.5; transition: all 0.3s;}
|
|
.asd_box.show_table .section_title > div {opacity:1;}
|
|
.asd_box .n_table tbody tr td { transition: all 0.3s;}
|
|
.asd_box .n_table tbody {opacity:0; transition: all 0.3s; background:#fff;}
|
|
.asd_box .n_table thead {opacity:0.5; transition: all 0.3s;}
|
|
.asd_box.show_table .n_table tbody {opacity:1;}
|
|
.asd_box.show_table .n_table thead {opacity:1;}
|
|
|
|
|
|
|
|
/* scrolltable */
|
|
|
|
.tableBox{position: relative; top: 0px; left: 0px; width: 100%;border-bottom:1px solid #5e5e5e;border: 1px solid #5e5e5e;border-radius: 1px;}
|
|
.tableBox1{position: relative;top: 0px;left: 0px;width: 100%;overflow-y: scroll;border-bottom: 1px solid #5e5e5e;}
|
|
.scrolltable{width: 100%; border-collapse: collapse; text-align: center;}
|
|
|
|
|
|
/* */
|
|
.scrolltable thead tr th {position: sticky; top: -1; }
|
|
.scrolltable thead tr th, .scrolltable tbody tr td {
|
|
box-sizing: border-box;
|
|
word-break: break-all;
|
|
border:1px solid #c8c8c8;
|
|
}
|
|
.scrolltable thead tr th {
|
|
box-sizing: border-box;
|
|
word-break: break-all;
|
|
/*
|
|
border:1px solid #f4f5f5; 원본 rgb(128, 128, 0)
|
|
*/
|
|
border:0px solid;
|
|
}
|
|
|
|
.scrolltable thead tr.sub_thead th {position:sticky; top:33px;}
|
|
|
|
.noBordertable thead tr th, .noBordertable tbody tr td {
|
|
box-sizing: border-box;
|
|
word-break: break-all;
|
|
border:0px solid #f4f5f5;
|
|
}
|
|
|
|
/*
|
|
.scrolltable thead tr th {position: sticky; top: -0.1; background:#486381; color:#fff; }
|
|
.scrolltable thead tr th, .scrolltable tbody tr td {
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid #dedede;
|
|
border-right: 1px solid #ddd;
|
|
word-break: break-all;
|
|
}
|
|
*/
|
|
|
|
|
|
|
|
|
|
/* popup */
|
|
|
|
.subthead {background:#fff; color:#000;}
|
|
.popup2_graphbox {margin-top:10px; height:300px;}
|
|
|
|
.block_1 { width:95%; background:#2196F3; color:#fff; border-radius: 3px; padding:2px 0; margin: 0 auto;}
|
|
/* .block_1::before {content:''; position: absolute; left: -7px; top: 28px; display:inline-block; width:2px; height:610px; background:#0066d3;} */
|
|
.block_2 {width:95%; background:#1c7fcf; color:#fff; border-radius: 3px; padding:2px 0; margin: 0 auto;}
|
|
/* .block_2::before {content:''; position: absolute; left: -7px; top: 28px; display:inline-block; width:2px; height:610px; background:#0066d3;} */
|
|
.block_3 {width:95%; background:#16609c; color:#fff; border-radius: 3px; padding:2px 0; margin: 0 auto;}
|
|
/* .block_3::before {content:''; position: absolute; left: -7px; top: 28px; display:inline-block; width:2px; height:610px; background:#0066d3;} */
|
|
|
|
.tableBox.sch_table_wrap { width: 100%;}
|
|
|
|
/* 분기별 진행사항 그래프 */
|
|
.sch_table {}
|
|
.sch_table tr:hover td {background:#f2f5f7;}
|
|
.sch_table tr td {height:50px;}
|
|
|
|
.sch_table tr .ganttTd{vertical-align: top;}
|
|
.sch_table tr td .gantt {position:relative;margin-left: -2px;}
|
|
.sch_table tr .ganttTd .gantt div{/* position:; */border-radius: 2px;padding: 0px;width: 0px;height: 14px; margin-top: 4px;margin-bottom: 4px;top:0px;}
|
|
.sch_table tr td .gantt .b1 {background: #0076ff;color:#fff;z-index: 1; top: 0;margin-top:-10px;height:20px;} /* 설계 */
|
|
.sch_table tr td .gantt .b2 {background: #05d813;color:#fff;z-index: 1; top: 0;margin-top:-9px;height:20px;} /* 구매 */ /*left:100px; width: 200px; margin-left: 50px;*/
|
|
.sch_table tr td .gantt .b3 {background: grey/*#797979*/;color:#fff;z-index: 1; top: 0;margin-top:-9px;height:20px;} /* 조립 */
|
|
.sch_table tr td .gantt .b4 {background: #ef00ee/*#D24BFF*/;color:#fff;z-index: 1; top: 0;margin-top:-9px;height:20px;} /* 출고 */
|
|
.sch_table tr td .gantt .b5 {background: #ff8638/*#E69C95*/;color:#fff;z-index: 1; top: 0; margin-top:-9px;height:20px;} /* 셋업 */
|
|
|
|
.sch_table tr td .gantt .b11 {background: #0076ff;color:#fff;opacity: 0.5;z-index: 2;height:20px;} /* 설계 계획 */
|
|
.sch_table tr td .gantt .b22 {background: #05d813;color:#fff;opacity: 0.5;z-index: 2;height:20px;} /* 구매 계획 */ /*left:100px; width: 200px; margin-left: 50px;*/
|
|
.sch_table tr td .gantt .b33 {background: grey/*#797979*/;color:#fff;opacity: 0.5;z-index: 2;height:20px;} /* 조립 계획 */
|
|
.sch_table tr td .gantt .b44 {background: #ef00ee/*#D24BFF*/;color:#fff;opacity: 0.5;z-index: 2;height:20px;} /* 출고 계획 */
|
|
.sch_table tr td .gantt .b55 {background: #ff8638/*#E69C95*/;color:#fff;opacity: 0.5;z-index: 2;height:20px;} /* 셋업 계획 */
|
|
|
|
/* 종합현황 */
|
|
.sch_table tr td .gantt .p1 {background: #0076ff;color:#fff;} /* 설계 */
|
|
.sch_table tr td .gantt .p2 {background: #05d813;color:#fff;} /* 구매 */ /*left:100px; width: 200px; margin-left: 50px;*/
|
|
.sch_table tr td .gantt .p3 {background: grey/*#797979*/;color:#fff;} /* 조립 */
|
|
.sch_table tr td .gantt .p4 {background: #ef00ee/*#D24BFF*/;color:#fff;} /* 출고 */
|
|
.sch_table tr td .gantt .p5 {background: #ff8638/*#E69C95*/;color:#fff;} /* 셋업 */
|
|
|
|
/* 지연 */
|
|
.sch_table tr td .gantt .r1 {background: #f36969;color:#fff;}
|
|
.sch_table tr td .gantt .r2 {background: #f36969;color:#fff;}
|
|
.sch_table tr td .gantt .r3 {background: #f36969;color:#fff;}
|
|
.sch_table tr td .gantt .r4 {background: #f36969;color:#fff;}
|
|
.sch_table tr td .gantt .b6 {background: #f36969;color:#fff;}/**menu css**/
|
|
|
|
.diamond {
|
|
width: 8px !important;
|
|
height: 8px;
|
|
background-color: #ef00ee;
|
|
transform: rotate(45deg);
|
|
/*margin-top:-8px*/
|
|
}
|
|
|
|
.diamond2 {
|
|
width: 8px !important;
|
|
height: 8px;
|
|
background-color: #ef00ee;
|
|
transform: rotate(45deg);
|
|
opacity: 0.5;
|
|
/*margin-top:-8px*/
|
|
}
|
|
|
|
/*
|
|
.sch_table tr td .gantt .b1 {position:;border-radius: 2px;padding: 2px;width: 100px;height: 0px; margin-top: 7px;top:0px;} left: -3px; margin-top: 53px;top: -109px;
|
|
.sch_table tr td .gantt .r1 {position:;border-radius: 2px;padding: 2px;width: 100px;height: 0px; margin-top: 7px;top:0px;} left: -2px; margin-top: 53px;top: -109px;
|
|
.sch_table tr td .gantt .b2 {position:;border-radius: 2px;padding: 2px;width: 200px;height: 0px; margin-top: 7px;top:0px; left:100px} left: -2px; margin-top: 54px;top: -83px;
|
|
.sch_table tr td .gantt .r2 {position:;border-radius: 2px;padding: 2px;width: 100px;height: 0px; margin-top: 7px;top:0px;} left: -2px; margin-top: 52px;top: -83px;
|
|
.sch_table tr td .gantt .b3 {position:;border-radius: 2px;padding: 2px;width: 100px;height: 0px; margin-top: 7px;top:0px;} left: -2px; margin-top: 80px;top: -83px;
|
|
.sch_table tr td .gantt .r3 {position:;border-radius: 2px;padding: 2px;width: 100px;height: 0px; margin-top: 7px;top:0px;} left: -2px; margin-top: 80px;top: -83px;
|
|
.sch_table tr td .gantt .b4 {position:;border-radius: 2px;padding: 2px;width: 100px;height: 0px; margin-top: 7px;top:0px;} left: -2px; margin-top: 107px;top: -83px;
|
|
.sch_table tr td .gantt .r4 {position:;border-radius: 2px;padding: 2px;width: 100px;height: 0px; margin-top: 7px;top:0px;} left: -2px; margin-top: 109px;top: -83px;
|
|
.sch_table tr td .gantt .b5 {position:;border-radius: 2px;padding: 2px;width: 100px;height: 0px; margin-top: 7px;top:0px;} left: -2px; margin-top: 134px;top: -83px;
|
|
*/
|
|
|
|
.accordion {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.accordion ul > li {
|
|
overflow: hidden;
|
|
max-height: 40px;
|
|
transition: 0.3s;
|
|
cursor: pointer;
|
|
}
|
|
.accordion ul > li.on {
|
|
max-height: 600px;
|
|
color:#ffffff !important;background:#3f98f7;
|
|
}
|
|
.accordion ul > li.on .title {color:#fff;background:#3f98f7;}
|
|
.accordion ul > li.on .desc {color:#000;background:#fff;}
|
|
.accordion ul > li .title {
|
|
color:#041829;
|
|
font-weight:bold;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 0.5rem;
|
|
}
|
|
.accordion ul > li .title:hover {color:#ffffff;background:#3f98f7;}
|
|
.accordion ul > li .desc {
|
|
color:#2d3c49;
|
|
padding: 0.5rem;
|
|
}
|
|
.accordion ul > li .desc:hover {color:#3f98f7;background:#eaf0f5;}
|
|
|
|
.popup_title {font-size:14px; font-weight:bold; width:100%;padding:0px 0px 5px 0px; box-sizing: border-box;}
|
|
.ct_box {margin-bottom:5px;overflow: hidden;}
|
|
.input_block {float:left; padding: 1px !important;}
|
|
.input_block .label {width:80px; height:30px; float:left; box-sizing: border-box; border:1px solid #eee; line-height:30px; text-align: center; background:#556b7f; color:#fff;}
|
|
|
|
input[type="radio"] { height:15px; float:left; box-sizing: border-box; border:1px solid #eee;}
|
|
input[type="text"], select {width:calc( 100% - 80px ); height:30px; float:left; box-sizing: border-box; border:1px solid #eee;}
|
|
select option {height:30px;}
|
|
|
|
td input {width:100%;}
|
|
|
|
.delay_table {width:100%;}
|
|
.delay_table tr td {border: 1px solid #eee; height:30px; padding:10px; box-sizing: border-box;}
|
|
.delay_table tr td:first-child {background:#556b7f; width:40%; color:#fff;}
|
|
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.sch_table thead {
|
|
position: sticky;
|
|
top: 0;
|
|
background-color: white; /* 필요에 따라 적절한 배경색 지정 */
|
|
z-index: 1;
|
|
}
|
|
|
|
.n_table th,
|
|
.n_table td {
|
|
border: 1px solid #d0d0d0;
|
|
}
|
|
|
|
/* 테이블 헤더의 아래쪽 테두리는 별도로 지정하지 않음 */
|
|
.n_table thead th {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* 테이블 본문의 아래쪽 테두리만 지정 */
|
|
.n_table tbody th,
|
|
.n_table tbody td {
|
|
border-bottom: 1px solid #d0d0d0;
|
|
}
|
|
|
|
/* 테이블 컨테이너에 스크롤을 적용 */
|
|
.table-container {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* 상태별 진행사항 */
|
|
|
|
/* 완료 */
|
|
.green-ball {display: inline-block;width: 10px;height: 10px;background-color: #5faf63;border-radius: 50%;line-height: 20px; /* 필요에 따라 조절 */text-align: center;}
|
|
/* 지연완료 */
|
|
.yellow-ball {display: inline-block;width: 10px;height: 10px;background-color: #FFBB00;border-radius: 50%;line-height: 20px; /* 필요에 따라 조절 */text-align: center;}
|
|
/* 진행중 */
|
|
.bule-ball {display: inline-block;width: 10px;height: 10px;background-color: #3999ff;border-radius: 50%;line-height: 20px; /* 필요에 따라 조절 */text-align: center;}
|
|
/* 지연 */
|
|
.red-ball {display: inline-block;width: 10px;height: 10px;background-color: #f36969;border-radius: 50%;line-height: 20px; /* 필요에 따라 조절 */text-align: center;}
|
|
|
|
.black-ball {display: inline-block;width: 10px;height: 10px;background-color: black;border-radius: 50%;line-height: 20px; /* 필요에 따라 조절 */text-align: center;}
|
|
.white-ball {display: inline-block;width: 10px;height: 10px;background-color: white;border-radius: 50%;line-height: 20px; /* 필요에 따라 조절 */text-align: center; border:1px solid}
|
|
|
|
/* 단계별 */
|
|
|
|
/* 설계 */
|
|
.blue-name {border: #3999ff;background: #3999ff/*#007fff*/;color:#fff;border-radius: 2px;padding: 0px 12px 1px 12px;font-size: 9px;transition: all 0.3s;margin-top: 0px;line-height: 22px;}
|
|
.blue_name:hover {background:#0076ff; color:#fff;}
|
|
/* 구매 */
|
|
/**/
|
|
.green-name {border:#05d813;background: #05d813/*#00cc0d*/;color:#fff;border-radius: 2px;padding: 0px 12px 1px 12px;font-size: 9px;transition: all 0.3s;margin-top: 0px;line-height: 22px;}
|
|
.green-name:hover {background:#05d813; color:#fff;}
|
|
/* 조립 */
|
|
.black-name {border: #828181;background: grey/*#797979*/;color:#fff;border-radius: 2px;padding: 0px 12px 1px 12px;font-size: 9px;transition: all 0.3s;margin-top: 0px;line-height: 22px;}
|
|
.black-name:hover {background: #828181;color:#fff;}
|
|
/* 출고 */
|
|
.purple-name {border: #ef00ee;background: #ef00ee/*#d24bff*/;color:#fff;border-radius: 2px;padding: 0px 12px 1px 12px;font-size: 9px;transition: all 0.3s;margin-top: 0px;line-height: 22px;}
|
|
.purple-name:hover {background: #ef00ee;color:#fff;}
|
|
/* 셋업 */
|
|
.red-name {border: #f36969;background: #f36969/*#e69c48*/;color:#fff;border-radius: 2px;padding: 0px 12px 1px 12px;font-size: 9px;transition: all 0.3s;margin-top: 0px;line-height: 22px;}
|
|
.red-name:hover {background: #ff8638; color:#fff;}
|
|
.yellow-name {border: #f2c201;background: #f2c201;color:#fff;border-radius: 2px;padding: 0px 12px 1px 12px;font-size: 9px;transition: all 0.3s;margin-top: 0px;line-height: 22px;}
|
|
.yellow-name:hover {background: #f2c201; color:#fff;}
|
|
|
|
.status-container {display: flex; justify-content: space-between; width: 100%; }
|
|
.status-item {display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; padding: 2px; height: 50px;}
|
|
.status-box {width: 70%; aspect-ratio: 4 / 1; border: none; /* 0px solid #0076ff; margin-bottom: 10px; */ font-size:18px; text-align:center; /* padding-top: 17px; */ }
|
|
.status-text {margin: 0; text-align: center; font-size: 13px;font-weight:bold;}
|
|
.highlight-text {margin: 0; text-align: center; font-size: 26px;font-weight:bold;}
|
|
.highlight-textR {margin: 0; text-align: center; font-size: 26px;font-weight:bold;color: red;}
|
|
.highlight-textB {margin: 0; text-align: center; font-size: 26px;font-weight:bold;color: blue;}
|
|
.fRed{color: red;}
|
|
.fRedb{color: red;font-weight:bold;}
|
|
|
|
.colorful-div {
|
|
display: inline-block;
|
|
/*
|
|
width: 25px;
|
|
*/
|
|
height: 19px;
|
|
margin-right: 2px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.highlighted {
|
|
background-color: #eaf0f5; /* 연녹색 */
|
|
} |