From 69c4bd7e336152835eddde4d0dd3300f31cbfca4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kimjh=28=EA=B9=80=EC=9E=A5=ED=98=84=29?= Date: Thu, 17 Nov 2022 16:51:11 +0900 Subject: [PATCH] merge --- src/assets/css/custom.css | 3351 +++++++++++++++++++++++++++++-------- 1 file changed, 2680 insertions(+), 671 deletions(-) diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 534276d3..a17d685e 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -1,731 +1,2527 @@ @charset "utf-8"; @import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); -@font-face {font-family: 'NotoSansKR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');} -@font-face {font-family: 'NotoSansKR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');} -@font-face {font-family: 'NotoSansKR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');} -@font-face {font-family: 'NotoSansKR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');} -@font-face {font-family: 'NotoSansKR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');} -@font-face {font-family: 'NotoSansKR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');} +@font-face { + font-family: 'NotoSansKR'; + font-style: normal; + font-weight: 100; + src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) + format('woff2'), + url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) + format('woff'), + url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) + format('opentype'); +} +@font-face { + font-family: 'NotoSansKR'; + font-style: normal; + font-weight: 300; + src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) + format('woff2'), + url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) + format('woff'), + url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) + format('opentype'); +} +@font-face { + font-family: 'NotoSansKR'; + font-style: normal; + font-weight: 400; + src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) + format('woff2'), + url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) + format('woff'), + url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) + format('opentype'); +} +@font-face { + font-family: 'NotoSansKR'; + font-style: normal; + font-weight: 500; + src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) + format('woff2'), + url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) + format('woff'), + url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) + format('opentype'); +} +@font-face { + font-family: 'NotoSansKR'; + font-style: normal; + font-weight: 700; + src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) + format('woff2'), + url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) + format('woff'), + url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) + format('opentype'); +} +@font-face { + font-family: 'NotoSansKR'; + font-style: normal; + font-weight: 900; + src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) + format('woff2'), + url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) + format('woff'), + url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) + format('opentype'); +} @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;800;900&display=swap'); -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video, button { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - /* font-family:'Rubik','NotoSansKR',맑은고딕, Arial,sans-serif, Dotum, 돋움, "Apple SD Gothic Neo", arial; */ - font-family: 'Rubik', 'NotoSansKR', sans-serif; - font-style: normal; - font-weight:300; - vertical-align: baseline; - letter-spacing: -0.3px; - -webkit-font-smoothing: antialiased; -} -select{ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video, +button { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + /* font-family:'Rubik','NotoSansKR',맑은고딕, Arial,sans-serif, Dotum, 돋움, "Apple SD Gothic Neo", arial; */ + font-family: 'Rubik', 'NotoSansKR', sans-serif; + font-style: normal; + font-weight: 300; + vertical-align: baseline; + letter-spacing: -0.3px; + -webkit-font-smoothing: antialiased; +} +select { /* font-family:'Rubik','NotoSansKR',맑은고딕, Arial,sans-serif, Dotum, 돋움, "Apple SD Gothic Neo", arial; */ font-family: 'Rubik', 'NotoSansKR', sans-serif; } /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; } body { - line-height: 1.4; + line-height: 1.4; } -ol, ul { - list-style: none; +ol, +ul { + list-style: none; } -blockquote, q{ - quotes: none; +blockquote, +q { + quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; } table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } -*, :after, :before { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; +*, +:after, +:before { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } -html body .content.pal-content .content-wrapper{margin-top:0;} -html body .content.pal-content{min-height:100vh;} -html body .content.pal-content .content-wrapper{min-height:100vh;} -button{border:0;background:transparent;} - +html body .content.pal-content .content-wrapper { + margin-top: 0; +} +html body .content.pal-content { + min-height: 100vh; +} +html body .content.pal-content .content-wrapper { + min-height: 100vh; +} +button { + border: 0; + background: transparent; +} /*레이아웃*/ -.pal-container{background:#ddd;height:100vh;position:relative;} -.map{width:calc(100% - 80px);position:absolute;right:0;} -.left-layer{width:350px;height:100vh;background:#10163A;position:absolute;left:80px;color:#fff;z-index: 999;padding:14px;overflow: auto;} -.right-layer{width:350px;height:100vh;background:#10163A;position:absolute;right:-350px;color:#fff;z-index: 999;padding:14px;transition: 0.5s ease;-webkit-transition: 0.5s ease;overflow:auto;} -.right-layer.active{right:0px;transition: 0.5s ease;-webkit-transition: 0.5s ease;} -.right-layer-btn{width:40px;height:40px;position:absolute;right:0px;top:50%;transform: translateY(-50%);border:0;background:#7367f0;border-top-left-radius:5px;border-bottom-left-radius:5px;transition: 0.5s ease;-webkit-transition: 0.5s ease;} -.right-layer-btn svg{color:#fff;} -.right-menu.active .right-layer-btn{right:350px;transition: 0.5s ease;-webkit-transition: 0.5s ease;} -.layer-content + .layer-content{margin-top:14px;} -.right-menu{position: absolute;right:0;height: 100vh;} +.pal-container { + background: #ddd; + height: 100vh; + position: relative; +} +.map { + width: calc(100% - 80px); + position: absolute; + right: 0; +} +.left-layer { + width: 350px; + height: 100vh; + background: #10163a; + position: absolute; + left: 80px; + color: #fff; + z-index: 999; + padding: 14px; + overflow: auto; +} +.right-layer { + width: 350px; + height: 100vh; + background: #10163a; + position: absolute; + right: -350px; + color: #fff; + z-index: 999; + padding: 14px; + transition: 0.5s ease; + -webkit-transition: 0.5s ease; + overflow: auto; +} +.right-layer.active { + right: 0px; + transition: 0.5s ease; + -webkit-transition: 0.5s ease; +} +.right-layer-btn { + width: 40px; + height: 40px; + position: absolute; + right: 0px; + top: 50%; + transform: translateY(-50%); + border: 0; + background: #7367f0; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + transition: 0.5s ease; + -webkit-transition: 0.5s ease; +} +.right-layer-btn svg { + color: #fff; +} +.right-menu.active .right-layer-btn { + right: 350px; + transition: 0.5s ease; + -webkit-transition: 0.5s ease; +} +.layer-content + .layer-content { + margin-top: 14px; +} +.right-menu { + position: absolute; + right: 0; + height: 100vh; +} /*버튼 기본css*/ -.btn{font-size:0.825rem;font-weight:400;} +.btn { + font-size: 0.825rem; + font-weight: 400; +} /*레이어 상세정보-상단타이틀*/ -.layer-ti{display:flex;margin-bottom:10px;} -.layer-ti h4{flex:1;color:#bbb;font-weight:500;font-size:1rem;} -.btn-icon{background:transparent;color:#bbb;border: 0;padding:0;margin-top: -3px;} -.layer-ti .badge{font-weight:500;font-size:13px;} +.layer-ti { + display: flex; + margin-bottom: 10px; +} +.layer-ti h4 { + flex: 1; + color: #bbb; + font-weight: 500; + font-size: 1rem; +} +.btn-icon { + background: transparent; + color: #bbb; + border: 0; + padding: 0; + margin-top: -3px; +} +.layer-ti .badge { + font-weight: 500; + font-size: 13px; +} /*레이어 상세정보-검색*/ -.layer-search .input-group .form-control{height:35px;font-size: 0.875rem;color:#b5b5b7;background:#283046;border:1px solid #404656;border-right:0;} -.layer-search .input-group .form-control:focus{border-color:#7367f0;border-right:1px solid #7367f0;border-right:0px;} -.layer-search .input-group .form-control::placeholder{color:#777;} -.layer-search .btn{height:35px;border-top-left-radius:0;border-bottom-left-radius:0;position:relative;background:#283046;border-color:#404656;} -.layer-search .btn:active{background:#7367f0;border:1px solid #7367f0;} -.layer-search .btn svg{position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);} +.layer-search .input-group .form-control { + height: 35px; + font-size: 0.875rem; + color: #b5b5b7; + background: #283046; + border: 1px solid #404656; + border-right: 0; +} +.layer-search .input-group .form-control:focus { + border-color: #7367f0; + border-right: 1px solid #7367f0; + border-right: 0px; +} +.layer-search .input-group .form-control::placeholder { + color: #777; +} +.layer-search .btn { + height: 35px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + position: relative; + background: #283046; + border-color: #404656; +} +.layer-search .btn:active { + background: #7367f0; + border: 1px solid #7367f0; +} +.layer-search .btn svg { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} /*레이어 상세정보-필터*/ -.layer-filter{background:#283046;border:1px solid #404656;border-radius: 5px;} -.layer-filter-ti{display:flex;align-items: center;} -.layer-filter-ti h4{padding:10px;color:#bbb;font-weight:500;flex:1;} -.layer-filter-ti svg{margin-right:10px;color:#bbb;} -.layer-filter-content .filter-content-box{padding:10px;display:none;} -.layer-filter-content .filter-content-box + .filter-content-box{padding-top:0;} -.layer-filter-content .filter-content-box h5{color:#c3c3c3;font-size:0.9375rem;margin-bottom:10px;font-weight:500;} -.layer-filter.active .layer-filter-ti{border-bottom:1px solid #404656;} -.layer-filter.active .layer-filter-content .filter-content-box{display:block;} -.layer-filter.active .layer-filter-ti svg {transform: rotate(180deg);} +.layer-filter { + background: #283046; + border: 1px solid #404656; + border-radius: 5px; +} +.layer-filter-ti { + display: flex; + align-items: center; +} +.layer-filter-ti h4 { + padding: 10px; + color: #bbb; + font-weight: 500; + flex: 1; +} +.layer-filter-ti svg { + margin-right: 10px; + color: #bbb; +} +.layer-filter-content .filter-content-box { + padding: 10px; + display: none; +} +.layer-filter-content .filter-content-box + .filter-content-box { + padding-top: 0; +} +.layer-filter-content .filter-content-box h5 { + color: #c3c3c3; + font-size: 0.9375rem; + margin-bottom: 10px; + font-weight: 500; +} +.layer-filter.active .layer-filter-ti { + border-bottom: 1px solid #404656; +} +.layer-filter.active .layer-filter-content .filter-content-box { + display: block; +} +.layer-filter.active .layer-filter-ti svg { + transform: rotate(180deg); +} /*레이어 상세정보-필터-체크박스*/ -.square_check{width:100%;} -.square_check > div{text-align:center;border-top:1px solid #404656;} -.square_check .btn{border:1px solid #404656;border-left:0px;border-radius:0px;font-size: 13px;color:#bbb;font-weight:300;} -.square_check .btn:first-child{border-left:1px solid #404656;} -.square_check .btn.btn-checked{background:#7367f0;color:#fff;font-weight:400;} -.square_check .btn-group, .btn-group-vertical{display:flex;flex-wrap: wrap;} -.square_check .btn-group.box_3n .btn{width:33.333%;padding: 14px 0;} -.box_3n label:nth-child(n+1):nth-child(-n+99999){border-top:0px;} -.box_3n label:nth-child(3n+1){border-left:1px solid #404656;} -.square_check .btn-group.box_2n .btn{width:50%;padding: 14px 0;} -.box_2n label:nth-child(n+1):nth-child(-n+99999){border-top:0px;} -.box_2n label:nth-child(2n+1){border-left:1px solid #404656;} -.square_check .btn-group > .btn:not(:first-child), [dir=ltr] .btn-group > .btn-group:not(:first-child){ - margin-left:0px; -} -.square_check .btn-group > .btn:not([class*='btn-outline-']):not([class*='btn-flat-']):not([class*='btn-gradient-']):not([class*='btn-relief-']):first-child, -.square_check .btn-group > .btn:not([class*='btn-outline-']):not([class*='btn-flat-']):not([class*='btn-gradient-']):not([class*='btn-relief-']):first-of-type{ - border-left-color:#404656!important; -} -.square_check .btn-group > .btn:not([class*='btn-outline-']):not([class*='btn-flat-']):not([class*='btn-gradient-']):not([class*='btn-relief-']):last-child, -.square_check .btn-group > .btn:not([class*='btn-outline-']):not([class*='btn-flat-']):not([class*='btn-gradient-']):not([class*='btn-relief-']):last-of-type{ - border-right-color:#404656!important; +.square_check { + width: 100%; +} +.square_check > div { + text-align: center; + border-top: 1px solid #404656; +} +.square_check .btn { + border: 1px solid #404656; + border-left: 0px; + border-radius: 0px; + font-size: 13px; + color: #bbb; + font-weight: 300; +} +.square_check .btn:first-child { + border-left: 1px solid #404656; +} +.square_check .btn.btn-checked { + background: #7367f0; + color: #fff; + font-weight: 400; +} +.square_check .btn-group, +.btn-group-vertical { + display: flex; + flex-wrap: wrap; +} +.square_check .btn-group.box_3n .btn { + width: 33.333%; + padding: 14px 0; +} +.box_3n label:nth-child(n + 1):nth-child(-n + 99999) { + border-top: 0px; +} +.box_3n label:nth-child(3n + 1) { + border-left: 1px solid #404656; +} +.square_check .btn-group.box_2n .btn { + width: 50%; + padding: 14px 0; +} +.box_2n label:nth-child(n + 1):nth-child(-n + 99999) { + border-top: 0px; +} +.box_2n label:nth-child(2n + 1) { + border-left: 1px solid #404656; +} +.square_check .btn-group > .btn:not(:first-child), +[dir='ltr'] .btn-group > .btn-group:not(:first-child) { + margin-left: 0px; +} +.square_check + .btn-group + > .btn:not([class*='btn-outline-']):not([class*='btn-flat-']):not([class*='btn-gradient-']):not([class*='btn-relief-']):first-child, +.square_check + .btn-group + > .btn:not([class*='btn-outline-']):not([class*='btn-flat-']):not([class*='btn-gradient-']):not([class*='btn-relief-']):first-of-type { + border-left-color: #404656 !important; +} +.square_check + .btn-group + > .btn:not([class*='btn-outline-']):not([class*='btn-flat-']):not([class*='btn-gradient-']):not([class*='btn-relief-']):last-child, +.square_check + .btn-group + > .btn:not([class*='btn-outline-']):not([class*='btn-flat-']):not([class*='btn-gradient-']):not([class*='btn-relief-']):last-of-type { + border-right-color: #404656 !important; } /*레이어 상세정보-리스트*/ -.drone-list .layer-content-list{cursor: pointer;} -.layer-content-list{background:#283046;border-radius: 5px;padding:10px;color:#bbb;border: 1px solid #404656;} -.layer-content-list.on{border:2px solid #7367f0;} -.layer-content-list + .layer-content-list{margin-top:14px;} -.layer-content-list dl dt{display:flex;} -.layer-content-list dl dt + dt{margin-top:14px;} -.layer-content-list dl dt div{flex:auto;font-size: 0.875rem;} -.layer-content-list dl dt .list-left-txt{text-align: left;font-weight:500;min-width: 70px;} -.layer-content-list dl dt .list-right-txt{text-align: right;} +.drone-list .layer-content-list { + cursor: pointer; +} +.layer-content-list { + background: #283046; + border-radius: 5px; + padding: 10px; + color: #bbb; + border: 1px solid #404656; +} +.layer-content-list.on { + border: 2px solid #7367f0; +} +.layer-content-list + .layer-content-list { + margin-top: 14px; +} +.layer-content-list dl dt { + display: flex; +} +.layer-content-list dl dt + dt { + margin-top: 14px; +} +.layer-content-list dl dt div { + flex: auto; + font-size: 0.875rem; +} +.layer-content-list dl dt .list-left-txt { + text-align: left; + font-weight: 500; + min-width: 70px; +} +.layer-content-list dl dt .list-right-txt { + text-align: right; +} /*레이어 상세정보-드론상세정보*/ -.layer-content-box{background:#283046;border-radius: 5px;color:#bbb; border: 1px solid #404656;} -.layer-content-box .drone-ti{display:flex;align-items: center;font-weight:500; color: #f8c023;padding:10px;} -.layer-content-box .drone-ti img{margin-right:6px;} -.layer-content-box .drone-img img{width:100%;} -.layer-content-box .layer-content-info{padding:10px;} -.layer-content-box dl dt{display:flex;} -.layer-content-box dl dt + dt{margin-top:14px;} -.layer-content-box dl dt div{flex:auto;font-size: 0.875rem;} -.layer-content-box dl dt .list-left-txt{text-align: left;font-weight:500;min-width: 70px;} -.layer-content-box dl dt .list-right-txt{text-align: right;} - +.layer-content-box { + background: #283046; + border-radius: 5px; + color: #bbb; + border: 1px solid #404656; +} +.layer-content-box .drone-ti { + display: flex; + align-items: center; + font-weight: 500; + color: #f8c023; + padding: 10px; +} +.layer-content-box .drone-ti img { + margin-right: 6px; +} +.layer-content-box .drone-img img { + width: 100%; +} +.layer-content-box .layer-content-info { + padding: 10px; +} +.layer-content-box dl dt { + display: flex; +} +.layer-content-box dl dt + dt { + margin-top: 14px; +} +.layer-content-box dl dt div { + flex: auto; + font-size: 0.875rem; +} +.layer-content-box dl dt .list-left-txt { + text-align: left; + font-weight: 500; + min-width: 70px; +} +.layer-content-box dl dt .list-right-txt { + text-align: right; +} /* 스크롤바 설정*/ -*::-webkit-scrollbar{width: 6px;height:6px;} +*::-webkit-scrollbar { + width: 6px; + height: 6px; +} /* 스크롤바 막대 설정*/ -*::-webkit-scrollbar-thumb{height:auto;background-color:#b4b7bd;/* 스크롤바 둥글게 설정*/border-radius: 10px; } +*::-webkit-scrollbar-thumb { + height: auto; + background-color: #b4b7bd; /* 스크롤바 둥글게 설정*/ + border-radius: 10px; +} /* 스크롤바 뒷 배경 설정*/ -*::-webkit-scrollbar-track{background-color: rgba(0,0,0,0);} +*::-webkit-scrollbar-track { + background-color: rgba(0, 0, 0, 0); +} /*레이어 상세정보-날씨정보*/ -.layer-weather-table > div{border-radius: 5px;} -.layer-weather-address{font-size: 0.875rem;margin-bottom:10px;} -.layer-weather-address span{display:block;font-weight:400;margin-top:10px;} -.layer-weather-address svg{margin-top:-2px;margin-right:4px;} -.layer-weather-table table{margin:0;} -.layer-weather-table tr th, .layer-weather-table tr td{padding:10px 4px;text-align:center;color:#bbb;} -.layer-weather-table tr th{font-weight:500;border:0;background:#343D55;} -.layer-weather-table tr td{border:0;border-top:1px solid #404656;background:#10163A;font-size:13px;} -.rotate-45{transform:rotate(45deg);} -.rotate-75{transform:rotate(75deg);} -.rotate-90{transform:rotate(90deg);} -.rotate-135{transform:rotate(135deg);} -.rotate-180{transform:rotate(180deg);} -.rotate-225{transform:rotate(225deg);} +.layer-weather-table > div { + border-radius: 5px; +} +.layer-weather-address { + font-size: 0.875rem; + margin-bottom: 10px; +} +.layer-weather-address span { + display: block; + font-weight: 400; + margin-top: 10px; +} +.layer-weather-address svg { + margin-top: -2px; + margin-right: 4px; +} +.layer-weather-table table { + margin: 0; +} +.layer-weather-table tr th, +.layer-weather-table tr td { + padding: 10px 4px; + text-align: center; + color: #bbb; +} +.layer-weather-table tr th { + font-weight: 500; + border: 0; + background: #343d55; +} +.layer-weather-table tr td { + border: 0; + border-top: 1px solid #404656; + background: #10163a; + font-size: 13px; +} +.rotate-45 { + transform: rotate(45deg); +} +.rotate-75 { + transform: rotate(75deg); +} +.rotate-90 { + transform: rotate(90deg); +} +.rotate-135 { + transform: rotate(135deg); +} +.rotate-180 { + transform: rotate(180deg); +} +.rotate-225 { + transform: rotate(225deg); +} /*tab-menu*/ -.tab-menu ul{display:flex;} -.tab-menu ul li{flex:1;text-align: center;padding:10px 0;font-weight:500;cursor: pointer;} -.tab-menu ul li.active{border-bottom:2px solid #7367f0;} -.tab-content{display:none;} -.tab-content.active{display:block;} +.tab-menu ul { + display: flex; +} +.tab-menu ul li { + flex: 1; + text-align: center; + padding: 10px 0; + font-weight: 500; + cursor: pointer; +} +.tab-menu ul li.active { + border-bottom: 2px solid #7367f0; +} +.tab-content { + display: none; +} +.tab-content.active { + display: block; +} /*날씨상세정보*/ -.layer-weather-box{color:#bbb;} -.layer-weather-box .layer-weather-table table{border:1px solid #404656;} -.layer-weather-box .layer-weather-table thead tr th{border-bottom:1px solid #404656;} -.layer-weather-box .layer-weather-table tr td{border-top:0;} -.layer-weather-box .layer-weather-table table tbody tr:nth-child(2n) td{background:#182444;} +.layer-weather-box { + color: #bbb; +} +.layer-weather-box .layer-weather-table table { + border: 1px solid #404656; +} +.layer-weather-box .layer-weather-table thead tr th { + border-bottom: 1px solid #404656; +} +.layer-weather-box .layer-weather-table tr td { + border-top: 0; +} +.layer-weather-box .layer-weather-table table tbody tr:nth-child(2n) td { + background: #182444; +} /*오른쪽레이어*/ -.layer-switch-list dl dt{align-items: center;} -.layer-switch-list dl dt + dt{margin-top:14px;} -.layer-switch-list .custom-control-inline{margin-right:0;} -.layer-switch-list .custom-switch .custom-control-label::before{height:20px;} -.layer-switch-list .custom-switch .custom-control-label:after{left:6px;width:16px;height:16px;} -.layer-switch-list .custom-switch .custom-control-label{height:16px;} -.layer-switch-list .dot-icon{display:inline-block;width:6px;height:6px;border-radius:100%;vertical-align:middle;margin-right:8px;margin-top:-2px;} -.layer-switch-list .dot-icon.color-red{background:#FF3648;} -.layer-switch-list .dot-icon.color-pink{background:#FFA1AA;} -.layer-switch-list .dot-icon.color-orange{background:#FFA800;} -.layer-switch-list .dot-icon.color-brown{background:#A16B00;} -.layer-switch-list .dot-icon.color-purple{background:#AB40FF;} -.layer-switch-list .dot-icon.color-skyblue{background:#009cad;} -.layer-switch-list svg{margin-right:8px;} -.layer-switch-list .custom-switch .custom-control-label:after{top:2px;} -.map-btn .btn-group, .btn-group-vertical{width:100%;} -.map-btn button:hover{box-shadow:none!important;} -.map-btn button{color:#bbb!important;background:#283046!important;border-color:rgba(34, 41, 47, 0.08) !important;} -.map-btn button:focus{color:#7367f0;background:#7367f0!important;color:#fff!important;border-color:rgba(34, 41, 47, 0.08) !important} -.map-btn .btn-primary{background:#7367f0!important;color:#fff!important;} +.layer-switch-list dl dt { + align-items: center; +} +.layer-switch-list dl dt + dt { + margin-top: 14px; +} +.layer-switch-list .custom-control-inline { + margin-right: 0; +} +.layer-switch-list .custom-switch .custom-control-label::before { + height: 20px; +} +.layer-switch-list .custom-switch .custom-control-label:after { + left: 6px; + width: 16px; + height: 16px; +} +.layer-switch-list .custom-switch .custom-control-label { + height: 16px; +} +.layer-switch-list .dot-icon { + display: inline-block; + width: 6px; + height: 6px; + border-radius: 100%; + vertical-align: middle; + margin-right: 8px; + margin-top: -2px; +} +.layer-switch-list .dot-icon.color-red { + background: #ff3648; +} +.layer-switch-list .dot-icon.color-pink { + background: #ffa1aa; +} +.layer-switch-list .dot-icon.color-orange { + background: #ffa800; +} +.layer-switch-list .dot-icon.color-brown { + background: #a16b00; +} +.layer-switch-list .dot-icon.color-purple { + background: #ab40ff; +} +.layer-switch-list .dot-icon.color-skyblue { + background: #009cad; +} +.layer-switch-list svg { + margin-right: 8px; +} +.layer-switch-list .custom-switch .custom-control-label:after { + top: 2px; +} +.map-btn .btn-group, +.btn-group-vertical { + width: 100%; +} +.map-btn button:hover { + box-shadow: none !important; +} +.map-btn button { + color: #bbb !important; + background: #283046 !important; + border-color: rgba(34, 41, 47, 0.08) !important; +} +.map-btn button:focus { + color: #7367f0; + background: #7367f0 !important; + color: #fff !important; + border-color: rgba(34, 41, 47, 0.08) !important; +} +.map-btn .btn-primary { + background: #7367f0 !important; + color: #fff !important; +} /* .map-btn .btn-group > .btn:not([class*='btn-outline-']):not([class*='btn-flat-']):not([class*='btn-gradient-']):not([class*='btn-relief-']):first-child, .map-btn .btn-group > .btn:not([class*='btn-outline-']):not([class*='btn-flat-']):not([class*='btn-gradient-']):not([class*='btn-relief-']):first-of-type{border-left-color:transparent!important;} .map-btn .btn-group [class*='btn-']:not([class*='btn-outline-']):not([class*='btn-flat-']):not([class*='btn-gradient-']):not([class*='btn-relief-']){border-left-color:#9489ff!important;} */ /*left메뉴*/ -h1.logo{width:50px;height:50px;margin:0px auto 60px auto;text-align:center;} -h1.logo img{width:100%;} -h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;font-size:0.9375rem;} -.left-menu{width:80px;height:100vh;background:#283046;padding-top:20px;position:fixed;} -.left-menu-nav, .left-menu-footer{color:#bbb;} -.left-menu-nav li, .left-menu-footer li{margin-top:20px;text-align:center;} -.left-menu-footer{position:absolute;bottom:20px;left:50%;transform: translateX(-50%);} -.socket_on{display:block;width:32px;height:32px;border-radius:100%;background:#28C76F;position: relative;} -.socket_on svg{color:#fff;margin-top:4px;} -.socket_on::after{content:'';display:block;width:10px;height:10px;border:2px solid #ddd;border-radius:100%;background:#28C76F;position: absolute;right:0;bottom:0px;} -.socket_off{display:block;width:32px;height:32px;border-radius:100%;background:#ed1125;position: relative;} -.socket_off svg{color:#fff;margin-top:4px;} -.socket_off::after{content:'';display:block;width:10px;height:10px;border:2px solid #ddd;border-radius:100%;background:#ed1125;position: absolute;right:0;bottom:0px;} -.logout-btn{cursor: pointer;color:#f4f4f4;} -.socket_on svg{animation: rotate-icon 5s linear infinite;transform-origin: 50% 50%;} -@keyframes rotate-icon{100% {transform: rotate(360deg);}} -.left-menu-nav li{margin-top:40px;} -.left-menu-nav li button{color:#f4f4f4;} -.left-menu-nav li button svg{color:#f4f4f4;} -.left-menu-nav li button svg path{fill:#f4f4f4;} +h1.logo { + width: 50px; + height: 50px; + margin: 0px auto 60px auto; + text-align: center; +} +h1.logo img { + width: 100%; +} +h1.logo span { + display: block; + color: #f4f4f4; + font-weight: bold; + letter-spacing: 2px; + font-size: 0.9375rem; +} +.left-menu { + width: 80px; + height: 100vh; + background: #283046; + padding-top: 20px; + position: fixed; +} +.left-menu-nav, +.left-menu-footer { + color: #bbb; +} +.left-menu-nav li, +.left-menu-footer li { + margin-top: 20px; + text-align: center; +} +.left-menu-footer { + position: absolute; + bottom: 20px; + left: 50%; + transform: translateX(-50%); +} +.socket_on { + display: block; + width: 32px; + height: 32px; + border-radius: 100%; + background: #28c76f; + position: relative; +} +.socket_on svg { + color: #fff; + margin-top: 4px; +} +.socket_on::after { + content: ''; + display: block; + width: 10px; + height: 10px; + border: 2px solid #ddd; + border-radius: 100%; + background: #28c76f; + position: absolute; + right: 0; + bottom: 0px; +} +.socket_off { + display: block; + width: 32px; + height: 32px; + border-radius: 100%; + background: #ed1125; + position: relative; +} +.socket_off svg { + color: #fff; + margin-top: 4px; +} +.socket_off::after { + content: ''; + display: block; + width: 10px; + height: 10px; + border: 2px solid #ddd; + border-radius: 100%; + background: #ed1125; + position: absolute; + right: 0; + bottom: 0px; +} +.logout-btn { + cursor: pointer; + color: #f4f4f4; +} +.socket_on svg { + animation: rotate-icon 5s linear infinite; + transform-origin: 50% 50%; +} +@keyframes rotate-icon { + 100% { + transform: rotate(360deg); + } +} +.left-menu-nav li { + margin-top: 40px; +} +.left-menu-nav li button { + color: #f4f4f4; +} +.left-menu-nav li button svg { + color: #f4f4f4; +} +.left-menu-nav li button svg path { + fill: #f4f4f4; +} /* fligth path draw */ -.left-menu-nav li .check{background-color: #283046; font-size:0.9rem; color: white; width:70px; border: 0px;} -.left-menu-nav.test{position: relative; z-index: 1; cursor: pointer; float: left; display: block; margin: 0px; padding: 0px; width: 28px; height: 28px; list-style: none; box-sizing: content-box !important; background: rgb(255, 255, 255);} -.left-menu-nav .test .btn-stop{margin-left:25px; width: 28px; height: 28px; display: block; border: 0px solid transparent; box-sizing: content-box !important;} -.left-menu-nav .test .btn-use{margin-left:20px; width: 35px; height: 35px; display: block; border: 0px solid transparent; box-sizing: content-box !important; background-color: #009cad;} +.left-menu-nav li .check { + background-color: #283046; + font-size: 0.9rem; + color: white; + width: 70px; + border: 0px; +} +.left-menu-nav.test { + position: relative; + z-index: 1; + cursor: pointer; + float: left; + display: block; + margin: 0px; + padding: 0px; + width: 28px; + height: 28px; + list-style: none; + box-sizing: content-box !important; + background: rgb(255, 255, 255); +} +.left-menu-nav .test .btn-stop { + margin-left: 25px; + width: 28px; + height: 28px; + display: block; + border: 0px solid transparent; + box-sizing: content-box !important; +} +.left-menu-nav .test .btn-use { + margin-left: 20px; + width: 35px; + height: 35px; + display: block; + border: 0px solid transparent; + box-sizing: content-box !important; + background-color: #009cad; +} -.measure-control{position:absolute; z-index:100;} +.measure-control { + position: absolute; + z-index: 100; +} -.control-btn{margin-left: 7px; border-bottom: solid 1px #283046; margin-bottom:5px;} -.buffer-input{text-align: center; border-radius: 100px; border: 1px solid #283046; width: 70px; margin-left: 5px;} -.buffer-btn{text-align: center; border-radius: 100px; border: 1px solid #283046; width: 30px; margin-left: 5px;} +.control-btn { + margin-left: 7px; + border-bottom: solid 1px #283046; + margin-bottom: 5px; +} +.buffer-input { + text-align: center; + border-radius: 100px; + border: 1px solid #283046; + width: 70px; + margin-left: 5px; +} +.buffer-btn { + text-align: center; + border-radius: 100px; + border: 1px solid #283046; + width: 30px; + margin-left: 5px; +} /*메인-알림*/ -.notice{width:650px;height:45px;overflow:hidden;position:absolute;left:50%;top:20px;transform: translate(-50%,0px);background:#283046;display:flex;font-size:0.9375rem;color:#f4f4f4;padding:0px 20px;border-radius:30px;} -.notice-icon{padding:10px 0;} -.notice-txt .time{margin-right:8px;} -.notice-txt{flex:1;padding:0 10px;} -.notice-txt dl dt{height:45px;padding:12px 0;transition: 0.5s ease;-webkit-transition: 0.5s ease;} -.notice-btn{display:flex;flex-direction: column;} -.notice-btn svg{color:#f4f4f4;} +.notice { + width: 650px; + height: 45px; + overflow: hidden; + position: absolute; + left: 50%; + top: 20px; + transform: translate(-50%, 0px); + background: #283046; + display: flex; + font-size: 0.9375rem; + color: #f4f4f4; + padding: 0px 20px; + border-radius: 30px; +} +.notice-icon { + padding: 10px 0; +} +.notice-txt .time { + margin-right: 8px; +} +.notice-txt { + flex: 1; + padding: 0 10px; +} +.notice-txt dl dt { + height: 45px; + padding: 12px 0; + transition: 0.5s ease; + -webkit-transition: 0.5s ease; +} +.notice-btn { + display: flex; + flex-direction: column; +} +.notice-btn svg { + color: #f4f4f4; +} /*알림목록*/ -.layer-content-list dl.notice-list dt div.list-ti .list-right-txt{font-weight:500;} -.layer-content-list dl.notice-list dt{flex-direction: column;} -.layer-content-list dl.notice-list dt div.list-ti{display:flex;} -.layer-content-list dl.notice-list dt div.list-txt{margin-top:8px;} +.layer-content-list dl.notice-list dt div.list-ti .list-right-txt { + font-weight: 500; +} +.layer-content-list dl.notice-list dt { + flex-direction: column; +} +.layer-content-list dl.notice-list dt div.list-ti { + display: flex; +} +.layer-content-list dl.notice-list dt div.list-txt { + margin-top: 8px; +} /*로그인*/ -.login{display:flex;height:100vh;color:#bbb;position:relative;} -.login-logo{position:absolute;top:80px;left:100px;color:#bbb;font-weight:bold;font-size:1.8rem;width: 100%;} -.login-img, .login-form {display: flex;align-items: center;justify-content: center;} -.login-img{flex:1.2;background:#161d31;} -.login-form{background:#283046;width:100%;flex:0.8;flex-direction: column;} -.login-form form{width:100%;padding:0 120px;} -.login-form .form-control{background:transparent;border:1px solid #404656;} -.login-form .form-control:focus{border-color:#7367f0;border-right:1px solid #7367f0;} -.login-form .form-label-group > label{color:#bbb;} -.login-form .form-control-position svg{color:#bbb;} -.login-form .form-control::placeholder{color:#bbb;} -.login-form .vx-checkbox-con .vx-checkbox{border-color: #404656;} -.login-txt{width:100%;margin-bottom:20px;} -.login-txt h2{color:#f4f4f4;font-family: "Montserrat", serif;font-size:1.8rem;font-weight:bold;text-align: center;} -.login-txt p{color:#bbb;font-family: "Montserrat", serif;font-size:1.125rem;font-weight:normal;text-align: center;margin-top:20px;} -.full-btn button{width:100%;margin-bottom:10px;} -.login-link{margin-top:10px;} -@media screen and (max-width:1280px){ - .login-img, .login-form{flex:1;} - .login-form form, .login-txt{padding:0 40px;} -} -@media screen and (max-width:900px){ - .login-img{display:none;} - .login-logo{left:50%;transform: translateX(-50%);text-align: center;} +.login { + display: flex; + height: 100vh; + color: #bbb; + position: relative; +} +.login-logo { + position: absolute; + top: 80px; + left: 100px; + color: #bbb; + font-weight: bold; + font-size: 1.8rem; + width: 100%; +} +.login-img, +.login-form { + display: flex; + align-items: center; + justify-content: center; +} +.login-img { + flex: 1.2; + background: #161d31; +} +.login-form { + background: #283046; + width: 100%; + flex: 0.8; + flex-direction: column; +} +.login-form form { + width: 100%; + padding: 0 120px; +} +.login-form .form-control { + background: transparent; + border: 1px solid #404656; +} +.login-form .form-control:focus { + border-color: #7367f0; + border-right: 1px solid #7367f0; +} +.login-form .form-label-group > label { + color: #bbb; +} +.login-form .form-control-position svg { + color: #bbb; +} +.login-form .form-control::placeholder { + color: #bbb; +} +.login-form .vx-checkbox-con .vx-checkbox { + border-color: #404656; +} +.login-txt { + width: 100%; + margin-bottom: 20px; +} +.login-txt h2 { + color: #f4f4f4; + font-family: 'Montserrat', serif; + font-size: 1.8rem; + font-weight: bold; + text-align: center; +} +.login-txt p { + color: #bbb; + font-family: 'Montserrat', serif; + font-size: 1.125rem; + font-weight: normal; + text-align: center; + margin-top: 20px; +} +.full-btn button { + width: 100%; + margin-bottom: 10px; +} +.login-link { + margin-top: 10px; +} +@media screen and (max-width: 1280px) { + .login-img, + .login-form { + flex: 1; } - + .login-form form, + .login-txt { + padding: 0 40px; + } +} +@media screen and (max-width: 900px) { + .login-img { + display: none; + } + .login-logo { + left: 50%; + transform: translateX(-50%); + text-align: center; + } +} + /*메인 대시보드*/ -.main-dashboard .card{margin-bottom:0px;} -.dashboard-section{margin-top:2rem;} -.menu-page div{height:120px;} -.menu-page div a {width: 100%;height: 100%;padding: 0 20px;word-break: keep-all;font-size: 1.25rem;font-weight: bold;color: rgba(255,255,255,0.8);display: flex;justify-content: center;align-items: center;} -.menu-list01{background:url('../../assets/images/menu001.png')#10163A;background-size:cover;background-position:50% 50%;} -.menu-list02{background:url('../../assets/images/menu002.png')#10163A;background-size:cover;background-position:50% 50%;} -.menu-list03{background:url('../../assets/images/menu003.png')#10163A;background-size:cover;background-position:50% 50%;} -.menu-list04{background:url('../../assets/images/menu004.png')#10163A;background-size:cover;background-position:50% 50%;} -.dashboard-list-ti{font-weight: 500;font-size: 1.285rem;font-size:1.125rem;border-bottom:1px solid #404656;margin:0 1rem;padding:1rem;} -.dashboard-list-ti svg{margin-top:-3px;margin-right:10px;} -.dashboard-list-cont .card{padding:1rem;} -.dashboard-section .card-header svg{color:#bbb;} -.dashboard-chart .card{height:520px;} -.dashboard-chart .card .card-title{margin:10px 0;} -.doughnut-chart-list{display: flex;flex-wrap: wrap;justify-content: space-evenly;margin-top:4rem;margin-bottom:1rem;} -.doughnut-chart-list-ti{display:flex;align-items: center;} -.doughnut-chart-list-ti .ti{font-weight:500;} -.dot-icon{width:8px;height:8px;display:inline-block;background:#ddd;border-radius:100%;margin-right:10px;} -.lineChartPrimary{background-color:#666ee8} -.lineChartDanger{background-color:#ff4961;} -.warningColorShade{background-color:#ffe802;} -.warningLightColor{background-color:#FDAC34;} -.successColorShade{background-color:#28dac6;} -.primaryColorShade{background-color:#836AF9;} -.infoColorShade{background-color:#299AFF;} -.yellowColor{background-color:#ffe800;} -.greyColor{background-color:#4F5D70;} -.blueColor{background-color:#2c9aff;} -.blueLightColor{background-color:#84D0FF;} -.greyLightColor{background-color:#EDF1F4;} - -@media screen and (max-width:990px){ - .dashboard-chart + .dashboard-chart{margin-top:2rem;} +.main-dashboard .card { + margin-bottom: 0px; +} +.dashboard-section { + margin-top: 2rem; +} +.menu-page div { + height: 120px; +} +.menu-page div a { + width: 100%; + height: 100%; + padding: 0 20px; + word-break: keep-all; + font-size: 1.25rem; + font-weight: bold; + color: rgba(255, 255, 255, 0.8); + display: flex; + justify-content: center; + align-items: center; +} +.menu-list01 { + background: url('../../assets/images/menu001.png') #10163a; + background-size: cover; + background-position: 50% 50%; +} +.menu-list02 { + background: url('../../assets/images/menu002.png') #10163a; + background-size: cover; + background-position: 50% 50%; +} +.menu-list03 { + background: url('../../assets/images/menu003.png') #10163a; + background-size: cover; + background-position: 50% 50%; +} +.menu-list04 { + background: url('../../assets/images/menu004.png') #10163a; + background-size: cover; + background-position: 50% 50%; +} +.dashboard-list-ti { + font-weight: 500; + font-size: 1.285rem; + font-size: 1.125rem; + border-bottom: 1px solid #404656; + margin: 0 1rem; + padding: 1rem; +} +.dashboard-list-ti svg { + margin-top: -3px; + margin-right: 10px; +} +.dashboard-list-cont .card { + padding: 1rem; +} +.dashboard-section .card-header svg { + color: #bbb; +} +.dashboard-chart .card { + height: 520px; +} +.dashboard-chart .card .card-title { + margin: 10px 0; +} +.doughnut-chart-list { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + margin-top: 4rem; + margin-bottom: 1rem; +} +.doughnut-chart-list-ti { + display: flex; + align-items: center; +} +.doughnut-chart-list-ti .ti { + font-weight: 500; +} +.dot-icon { + width: 8px; + height: 8px; + display: inline-block; + background: #ddd; + border-radius: 100%; + margin-right: 10px; +} +.lineChartPrimary { + background-color: #666ee8; +} +.lineChartDanger { + background-color: #ff4961; +} +.warningColorShade { + background-color: #ffe802; +} +.warningLightColor { + background-color: #fdac34; +} +.successColorShade { + background-color: #28dac6; +} +.primaryColorShade { + background-color: #836af9; +} +.infoColorShade { + background-color: #299aff; +} +.yellowColor { + background-color: #ffe800; +} +.greyColor { + background-color: #4f5d70; +} +.blueColor { + background-color: #2c9aff; +} +.blueLightColor { + background-color: #84d0ff; +} +.greyLightColor { + background-color: #edf1f4; +} + +@media screen and (max-width: 990px) { + .dashboard-chart + .dashboard-chart { + margin-top: 2rem; } -@media screen and (max-width:767px){ - .menu-page div a, .dashboard-section .card .card-title{font-size:1.125rem;} - .menu-page > div + div{margin-top:2rem;} +} +@media screen and (max-width: 767px) { + .menu-page div a, + .dashboard-section .card .card-title { + font-size: 1.125rem; + } + .menu-page > div + div { + margin-top: 2rem; } +} + +.map-drone-icon { + position: absolute; + top: 300px; + left: 500px; +} +.map-drone-icon.test02 { + top: 400px; + left: 550px; +} +.map-drone-icon.test03 { + top: 500px; + left: 700px; +} +.map-drone-icon.test04 { + top: 600px; + left: 800px; +} +.map-drone-icon.test05 { + top: 600px; + left: 900px; +} +.map-drone-icon.test06 { + top: 450px; + left: 600px; +} +.map-drone-icon img { + width: 30px; + height: 30px; +} +.map-drone-icon .num { + display: block; + width: 15px; + height: 15px; + border-radius: 100%; + background: #ff6207; + color: #fff; + font-size: 10px; + font-weight: 600; + position: absolute; + left: 50%; + top: 8px; + transform: translateX(-50%); + text-align: center; +} +.map-drone-icon.icon-red .num { + background: #ed1125; +} +.map-drone-icon.icon-yellow .num { + background: #fbff00; + color: #000; +} +.map-drone-icon.icon-skyblue .num { + background: #00e7ff; + color: #000; +} +.map-drone-icon.icon-pulple .num { + background: #e682ff; +} +.drone-icon { + width: 35px; +} -.map-drone-icon{position: absolute;top:300px;left:500px;} -.map-drone-icon.test02{top:400px;left:550px;} -.map-drone-icon.test03{top:500px;left:700px;} -.map-drone-icon.test04{top:600px;left:800px;} -.map-drone-icon.test05{top:600px;left:900px;} -.map-drone-icon.test06{top:450px;left:600px;} -.map-drone-icon img{width:30px;height:30px;} -.map-drone-icon .num{display:block;width:15px;height:15px;border-radius:100%;background:#ff6207;color:#fff;font-size:10px;font-weight:600;position:absolute;left:50%;top:8px;transform: translateX(-50%);text-align:center;} -.map-drone-icon.icon-red .num{background:#ed1125;} -.map-drone-icon.icon-yellow .num{background:#fbff00;color:#000;} -.map-drone-icon.icon-skyblue .num{background:#00e7ff;color:#000;} -.map-drone-icon.icon-pulple .num{background:#e682ff;} -.drone-icon{width:35px;} - -.line-test{display:block;position:absolute;left:564px;top:425px;height:180px;width:3px;background:#ed1125;} -.line-test02{display:block;position:absolute;left:713px;top:525px;height:180px;width:3px;background:#fbff00;} -.line-test03{display:block;position:absolute;left:813px;top:625px;height:180px;width:3px;background:#00e7ff;} -.line-test04{display:block;position:absolute;left:914px;top:625px;height:180px;width:3px;background:#e682ff;} +.line-test { + display: block; + position: absolute; + left: 564px; + top: 425px; + height: 180px; + width: 3px; + background: #ed1125; +} +.line-test02 { + display: block; + position: absolute; + left: 713px; + top: 525px; + height: 180px; + width: 3px; + background: #fbff00; +} +.line-test03 { + display: block; + position: absolute; + left: 813px; + top: 625px; + height: 180px; + width: 3px; + background: #00e7ff; +} +.line-test04 { + display: block; + position: absolute; + left: 914px; + top: 625px; + height: 180px; + width: 3px; + background: #e682ff; +} /*분석이력-검색조건*/ -.search-cont dl dt + dt{margin-top:-1px;} -.search-box{display:flex;border:1px solid #404656;align-items: center;font-size: 0.875rem;height:50px;} -.search-box input{font-size: 0.875rem;} -.search-list-ti{background:#343D55;min-width:150px;width:150px;text-align:center;height:48px;line-height:48px;font-weight:500;} -.search-list{display:flex;align-items: center;padding:0 20px;width:100%;} -.search-list .calendar-flat{border:1px solid #404656;border-radius: 0.357rem;height: 2.142rem;padding: 0 20px;} -.search-list .calendar-flat input{padding:0px;text-align:center;} -.search-list .calendar-flat:hover{border:1px solid #7367f0;} -.search-list-cont{width:100%;} -.search-list-cont-btn .btn{border-radius:0px;border-color: #404656!important;color:#bbb;} +.search-cont dl dt + dt { + margin-top: -1px; +} +.search-box { + display: flex; + border: 1px solid #404656; + align-items: center; + font-size: 0.875rem; + height: 50px; +} +.search-box input { + font-size: 0.875rem; +} +.search-list-ti { + background: #343d55; + min-width: 150px; + width: 150px; + text-align: center; + height: 48px; + line-height: 48px; + font-weight: 500; +} +.search-list { + display: flex; + align-items: center; + padding: 0 20px; + width: 100%; +} +.search-list .calendar-flat { + border: 1px solid #404656; + border-radius: 0.357rem; + height: 2.142rem; + padding: 0 20px; +} +.search-list .calendar-flat input { + padding: 0px; + text-align: center; +} +.search-list .calendar-flat:hover { + border: 1px solid #7367f0; +} +.search-list-cont { + width: 100%; +} +.search-list-cont-btn .btn { + border-radius: 0px; + border-color: #404656 !important; + color: #bbb; +} /* .search-list-cont-btn .btn:focus{background-color: #7367f0!important;color:#fff!important;} */ -.search-list-cont-btn .btn.active{background-color: #7367f0!important;color:#fff!important;} -.search-list-cont .custom-control-label{color:#bbb;font-size: 0.875rem;} -.cont-ti{padding-bottom:10px!important;} -.cont-ti > div{display:flex;justify-content: space-between;align-items: center;} +.search-list-cont-btn .btn.active { + background-color: #7367f0 !important; + color: #fff !important; +} +.search-list-cont .custom-control-label { + color: #bbb; + font-size: 0.875rem; +} +.cont-ti { + padding-bottom: 10px !important; +} +.cont-ti > div { + display: flex; + justify-content: space-between; + align-items: center; +} /* .cont-ti button{margin-right:8px;} */ -.cont-ti h4{font-weight:500;color:#bbb;font-size:1.125rem;} -.pt-14{padding-top:14px;} -.cont-ti .btn svg{margin-top:-4px;margin-right:4px;} -.pal-card-body{padding:0px;} -.table.pal-table {color:#bbb;text-align: center;border-bottom:1px solid #3b4253;} -.table.pal-table tr th{font-size: 0.875rem;font-weight:500;padding: 0.72rem 0.5rem;} -.table.pal-table tr td{font-size: 0.875rem;padding: 0.72rem 0.5rem;} -.table.pal-table .td-link{color:#bbb;text-decoration:underline;cursor: pointer;} -.search-case{font-weight:500;font-size:13px;margin-left:14px;color:#ff9f43 ;background-color:rgba(255, 159, 67, 0.12);padding: 0.3rem 0.5rem;border-radius: 0.358rem;} -.pd-0{padding: 0px!important;} -.search-list-cont .form-group{margin-bottom:0px;justify-content: space-between;} +.cont-ti h4 { + font-weight: 500; + color: #bbb; + font-size: 1.125rem; +} +.pt-14 { + padding-top: 14px; +} +.cont-ti .btn svg { + margin-top: -4px; + margin-right: 4px; +} +.pal-card-body { + padding: 0px; +} +.table.pal-table { + color: #bbb; + text-align: center; + border-bottom: 1px solid #3b4253; +} +.table.pal-table tr th { + font-size: 0.875rem; + font-weight: 500; + padding: 0.72rem 0.5rem; +} +.table.pal-table tr td { + font-size: 0.875rem; + padding: 0.72rem 0.5rem; +} +.table.pal-table .td-link { + color: #bbb; + text-decoration: underline; + cursor: pointer; +} +.search-case { + font-weight: 500; + font-size: 13px; + margin-left: 14px; + color: #ff9f43; + background-color: rgba(255, 159, 67, 0.12); + padding: 0.3rem 0.5rem; + border-radius: 0.358rem; +} +.pd-0 { + padding: 0px !important; +} +.search-list-cont .form-group { + margin-bottom: 0px; + justify-content: space-between; +} /* .search-list-cont .form-group input{width:calc(100% - 50px);} */ -.search-list-cont .form-group button{height: 2.142rem;margin:0px;} -.search-list-cont .form-group button svg{margin-top:-7px;} -.search-list-cont .form-label-group > label{font-size:0px;} -@media (max-width: 768px){ - .search-box{display:block;height:auto;} - .search-list-ti{width:100%;height:40px;line-height:40px;} - .search-list{padding: 10px 20px;width:100%;display: block;} - /* .search-list-cont + .search-list-cont{margin-left:0px;} */ - .search-list-cont-btn{width:100%;} - .search-list-cont-btn .btn{width:25%} - .search-list-cont .list-input + .list-input{padding-left:1rem;} - .search-box-date .list-input{flex: 0 0 100%;max-width: 100%;} -} -@media (max-width: 767px){ - .search-list-cont .list-input + .list-input{margin-top:10px;} -} -.tooltip-test{position:absolute;left:500px;top:500px;} -.tooltip-box{background:#283046;padding:10px;border-radius:6px;position:relative;max-width:150px;word-break: break-all;} +.search-list-cont .form-group button { + height: 2.142rem; + margin: 0px; +} +.search-list-cont .form-group button svg { + margin-top: -7px; +} +.search-list-cont .form-label-group > label { + font-size: 0px; +} +@media (max-width: 768px) { + .search-box { + display: block; + height: auto; + } + .search-list-ti { + width: 100%; + height: 40px; + line-height: 40px; + } + .search-list { + padding: 10px 20px; + width: 100%; + display: block; + } + /* .search-list-cont + .search-list-cont{margin-left:0px;} */ + .search-list-cont-btn { + width: 100%; + } + .search-list-cont-btn .btn { + width: 25%; + } + .search-list-cont .list-input + .list-input { + padding-left: 1rem; + } + .search-box-date .list-input { + flex: 0 0 100%; + max-width: 100%; + } +} +@media (max-width: 767px) { + .search-list-cont .list-input + .list-input { + margin-top: 10px; + } +} +.tooltip-test { + position: absolute; + left: 500px; + top: 500px; +} +.tooltip-box { + background: #283046; + padding: 10px; + border-radius: 6px; + position: relative; + max-width: 150px; + word-break: break-all; +} /* .tooltip-box div{text-align:left;font-size:13px;} */ -.tooltip-ti{border-bottom:1px solid #bbb;padding-bottom:4px;} +.tooltip-ti { + border-bottom: 1px solid #bbb; + padding-bottom: 4px; +} /* .tooltip-ti span, .tooltip-txt .ti{color:#f4f4f4;font-weight:400;} */ -.tooltip-txt{color:#f4f4f4;font-weight:400;font-size:12px} -.tooltip-txt-list + .tooltip-txt-list{margin-top:4px;} -.tooltip-box .arrow {position:absolute;bottom:-10px;left:50%;transform: translateX(-50%);display:block;width: 0px;height: 0px;border-top:10px solid #283046;border-bottom:10px solid none;border-right: 10px solid transparent;border-left: 10px solid transparent;} -.tooltip-txt-list .ti:before{content:'/';margin:0 2px;} -.tooltip-txt-list .ti:first-child::before{display:none;} +.tooltip-txt { + color: #f4f4f4; + font-weight: 400; + font-size: 12px; +} +.tooltip-txt-list + .tooltip-txt-list { + margin-top: 4px; +} +.tooltip-box .arrow { + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + display: block; + width: 0px; + height: 0px; + border-top: 10px solid #283046; + border-bottom: 10px solid none; + border-right: 10px solid transparent; + border-left: 10px solid transparent; +} +.tooltip-txt-list .ti:before { + content: '/'; + margin: 0 2px; +} +.tooltip-txt-list .ti:first-child::before { + display: none; +} /* 데이터블록 */ -.dblock-box{background:#283046;padding:6px 8px;border-radius:6px;max-width:150px;word-break: break-all;} -.dblock-box div{text-align:left;font-size:11px;color:#bbb;} +.dblock-box { + background: #283046; + padding: 6px 8px; + border-radius: 6px; + max-width: 150px; + word-break: break-all; + position: absolute; +} +.dblock-box div { + text-align: left; + font-size: 11px; + color: #bbb; +} /* .dblock-ti{border-bottom:1px solid #bbb;padding-bottom:4px;} */ -.dblock-ti span, .dblock-txt .ti{color:#f4f4f4;font-weight:500;display:block;} -.dblock-txt{ line-height: 1.2;} -.dblock-txt-list + .dblock-txt-list{margin-top:4px;} +.dblock-ti span, +.dblock-txt .ti { + color: #f4f4f4; + font-weight: 500; + display: block; +} +.dblock-txt { + line-height: 1.2; +} +.dblock-txt-list + .dblock-txt-list { + margin-top: 4px; +} /* .dblock-box .arrow {position:absolute;bottom:-10px;left:50%;transform: translateX(-50%);display:block;width: 0px;height: 0px;border-top:10px solid #283046;border-bottom:10px solid none;border-right: 10px solid transparent;border-left: 10px solid transparent;} */ -.dblock-txt-list span{font-size:10px;} -.dblock-txt-list span::before{content:'/';margin:0 2px;} -.dblock-txt-list span:first-child::before{display:none;} +.dblock-txt-list span { + font-size: 10px; +} +.dblock-txt-list span::before { + content: '/'; + margin: 0 2px; +} +.dblock-txt-list span:first-child::before { + display: none; +} /*회원가입*/ -.pal-register .auth-wrapper.auth-v1 .auth-inner{max-width:1200px;} -.pal-register .content-header .sub-txt{display:block;margin-bottom:1rem;} -.pal-register .content-header h5{font-size:1.25rem;font-weight:500;margin-bottom:10px;} -.pal-register .form-border .custom-checkbox{border-bottom:1px solid #404656;padding-bottom:14px;} -.pal-register .terms-box{width:100%;background:#161d31;height:150px;border:1px solid #404656;border-radius:6px;padding:14px;font-size: 0.875rem;margin-top:14px;overflow: auto;} -.pal-register .form-border-terms{border-bottom:1px solid #404656;padding-bottom:14px;} +.pal-register .auth-wrapper.auth-v1 .auth-inner { + max-width: 1200px; +} +.pal-register .content-header .sub-txt { + display: block; + margin-bottom: 1rem; +} +.pal-register .content-header h5 { + font-size: 1.25rem; + font-weight: 500; + margin-bottom: 10px; +} +.pal-register .form-border .custom-checkbox { + border-bottom: 1px solid #404656; + padding-bottom: 14px; +} +.pal-register .terms-box { + width: 100%; + background: #161d31; + height: 150px; + border: 1px solid #404656; + border-radius: 6px; + padding: 14px; + font-size: 0.875rem; + margin-top: 14px; + overflow: auto; +} +.pal-register .form-border-terms { + border-bottom: 1px solid #404656; + padding-bottom: 14px; +} input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { - transition: background-color 5000s ease-in-out 0s; - -webkit-transition: background-color 9999s ease-out; - -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; - -webkit-text-fill-color: #b4b7bd !important; + transition: background-color 5000s ease-in-out 0s; + -webkit-transition: background-color 9999s ease-out; + -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; + -webkit-text-fill-color: #b4b7bd !important; } input:-internal-autofill-selected { - background-color: transparent !important; - background-image: none !important; - color: rgb(0, 0, 0) !important; + background-color: transparent !important; + background-image: none !important; + color: rgb(0, 0, 0) !important; } /* .pal-register .bs-stepper-header{display:none;} */ -.pal-register .app-collapse .card-header{padding:1rem 0;} -.terms-all-check{border-bottom:1px solid #3b4253;padding-bottom:1rem;} -.terms-check{padding:14px 0;border-bottom:1px solid #3b4253;} -.terms-cont{background:#161d31;padding:10px;margin-top:10px;border-radius:6px;font-size: 0.875rem;height:200px;overflow:auto;} +.pal-register .app-collapse .card-header { + padding: 1rem 0; +} +.terms-all-check { + border-bottom: 1px solid #3b4253; + padding-bottom: 1rem; +} +.terms-check { + padding: 14px 0; + border-bottom: 1px solid #3b4253; +} +.terms-cont { + background: #161d31; + padding: 10px; + margin-top: 10px; + border-radius: 6px; + font-size: 0.875rem; + height: 200px; + overflow: auto; +} /* .pal-register .form-group label{margin-bottom:0px;} */ -.pal-register .bs-stepper .bs-stepper-header{padding-bottom:0px;} +.pal-register .bs-stepper .bs-stepper-header { + padding-bottom: 0px; +} /* .terms-check .collapse-default .card:last-child{border-bottom:1px solid #3b4253;} .terms-check .card-body .card-text{height:110px;background:#161d31;padding:10px;font-size: 0.875rem;overflow:auto;border-radius:6px;} .terms-check [class*='collapse-'] .card .card-body{padding:0 0 1rem 0;} */ -.pal-register input, .pal-register select{font-size: 0.875rem;} -.input-btn{display:flex;flex-wrap: wrap;} -.input-btn [class*='col']{padding:0px;} -.input-btn [class*='col'] + [class*='col']{padding-left:10px;} -@media screen and (max-width:767px){ - .input-btn [class*='col'] + [class*='col']{padding-left:0px;margin-top:10px;} +.pal-register input, +.pal-register select { + font-size: 0.875rem; +} +.input-btn { + display: flex; + flex-wrap: wrap; +} +.input-btn [class*='col'] { + padding: 0px; +} +.input-btn [class*='col'] + [class*='col'] { + padding-left: 10px; +} +@media screen and (max-width: 767px) { + .input-btn [class*='col'] + [class*='col'] { + padding-left: 0px; + margin-top: 10px; } +} -.input-btn input + input{margin-right:10px;} -.input-btn button{padding:0.5rem;min-width:130px;} -.pal-register .form-label{margin-bottom:4px;font-weight: 400;} -.necessary{vertical-align: middle;margin-right:4px;} -.user-phone-btn{position: absolute;top: -6px;right: 17px;} -.user-phone-btn .time{font-size: 0.875rem;font-weight:400;margin-right:10px;vertical-align: middle;} -.user-phone-btn button{height:25px;line-height:23px;padding:0px 14px;} -.user-phone-btn button span{font-size:13px;} +.input-btn input + input { + margin-right: 10px; +} +.input-btn button { + padding: 0.5rem; + min-width: 130px; +} +.pal-register .form-label { + margin-bottom: 4px; + font-weight: 400; +} +.necessary { + vertical-align: middle; + margin-right: 4px; +} +.user-phone-btn { + position: absolute; + top: -6px; + right: 17px; +} +.user-phone-btn .time { + font-size: 0.875rem; + font-weight: 400; + margin-right: 10px; + vertical-align: middle; +} +.user-phone-btn button { + height: 25px; + line-height: 23px; + padding: 0px 14px; +} +.user-phone-btn button span { + font-size: 13px; +} /*헤더메뉴*/ -.header-main-menu{margin-bottom:0px;} +.header-main-menu { + margin-bottom: 0px; +} /*팝업창*/ -.modal-title{font-weight:500;font-size:1.125rem;} +.modal-title { + font-weight: 500; + font-size: 1.125rem; +} /*기본css 수정*/ -.badge{font-weight:500;} -.form-control-sm{line-height: 1.4;} -.table{margin-bottom:0px;} -.form-group label{margin-bottom:4px;} -.custom-control-inline{align-items: center;} +.badge { + font-weight: 500; +} +.form-control-sm { + line-height: 1.4; +} +.table { + margin-bottom: 0px; +} +.form-group label { + margin-bottom: 4px; +} +.custom-control-inline { + align-items: center; +} /* .flatpickr-input{min-width:235px;} */ -.flatpickr-monthDropdown-months{line-height: 1.2!important;} +.flatpickr-monthDropdown-months { + line-height: 1.2 !important; +} /*creatable-select*/ -.creatable-select .select__control{border:1px solid #3b4253;padding:0 10px;min-height: 2.142rem;cursor: text;} -.creatable-select .select__menu div div{padding:10px;} -.creatable-select .select__control input{color:#bbb!important;} +.creatable-select .select__control { + border: 1px solid #3b4253; + padding: 0 10px; + min-height: 2.142rem; + cursor: text; +} +.creatable-select .select__menu div div { + padding: 10px; +} +.creatable-select .select__control input { + color: #bbb !important; +} /*상세정보*/ -.search-info-box{display:flex;align-items: center;justify-content:center;font-size: 0.875rem;height:auto;width:100%;} +.search-info-box { + display: flex; + align-items: center; + justify-content: center; + font-size: 0.875rem; + height: auto; + width: 100%; +} /* @media (max-width: 768px){ .search-info-box{justify-content:center;} } */ -.search-info-box .row{width:100%;} -.complete-txt{text-align: center;border-radius:6px;padding:0px 20px 40px 20px;} -.big-txt{font-size:30px;font-weight:200;display:block;margin:20px 0;} -.complete-txt button{width:100%;max-width:200px;margin-top:30px;} -.search-info-ti .ti{font-size:1rem;font-weight:500;margin-bottom: 10px;} -.search-info dl dt + dt{border-top:1px dotted #404656;padding-top:1rem;} -.search-info .final span{font-weight:500;font-size: 0.875rem;} -.mb-10p{margin-bottom:10px;} +.search-info-box .row { + width: 100%; +} +.complete-txt { + text-align: center; + border-radius: 6px; + padding: 0px 20px 40px 20px; +} +.big-txt { + font-size: 30px; + font-weight: 200; + display: block; + margin: 20px 0; +} +.complete-txt button { + width: 100%; + max-width: 200px; + margin-top: 30px; +} +.search-info-ti .ti { + font-size: 1rem; + font-weight: 500; + margin-bottom: 10px; +} +.search-info dl dt + dt { + border-top: 1px dotted #404656; + padding-top: 1rem; +} +.search-info .final span { + font-weight: 500; + font-size: 0.875rem; +} +.mb-10p { + margin-bottom: 10px; +} /*서브 레프트메뉴*/ -.pal-main-menu-content .pal-navigation-main > li:first-child a{cursor: default;padding-left:8px;/*border-bottom:2px solid #7367f0;*/} -.pal-navigation-main > li:first-child a > span{font-size:1.125rem;font-weight:500;} -.pal-navigation-main li:first-child a > *{transition: none!important;} -.pal-navigation-main li:first-child a:hover > *{transition: none!important;transform: none!important;} -.pal-navigation-main li a{font-size:1rem;} -.pal-navigation-main li .menu-content li a{font-size: 0.875rem;} -.pal-navigation-main li .menu-content li a span{position: relative;padding-left:14px;} -.pal-navigation-main li .menu-content li a span::before{content:'';display:block;width:5px;height:1px;position:absolute;top:50%;left:0px;background:#d0d2d6;} +.pal-main-menu-content .pal-navigation-main > li:first-child a { + cursor: default; + padding-left: 8px; /*border-bottom:2px solid #7367f0;*/ +} +.pal-navigation-main > li:first-child a > span { + font-size: 1.125rem; + font-weight: 500; +} +.pal-navigation-main li:first-child a > * { + transition: none !important; +} +.pal-navigation-main li:first-child a:hover > * { + transition: none !important; + transform: none !important; +} +.pal-navigation-main li a { + font-size: 1rem; +} +.pal-navigation-main li .menu-content li a { + font-size: 0.875rem; +} +.pal-navigation-main li .menu-content li a span { + position: relative; + padding-left: 14px; +} +.pal-navigation-main li .menu-content li a span::before { + content: ''; + display: block; + width: 5px; + height: 1px; + position: absolute; + top: 50%; + left: 0px; + background: #d0d2d6; +} /*카드형식 레이아웃*/ -.pal-card{background:#343D55;border-radius:6px;padding:1rem;} -.pal-card-box{background:#283046;padding:20px;border-radius:6px;} -.pal-card-box + .pal-card-box{margin-top:2rem;} -.pal-card-box .card{margin-bottom:0px;} -.pal-card-header{display: flex;min-height:40px;align-items: center;justify-content: space-between;flex-direction: row;margin-bottom:14px;} -.pal-card-header h3{font-size:1.1875rem;font-weight:500;} -.pal-card .card{margin-bottom:0px;} -.search-info{padding:20px;} -.search-info .cont-ti{padding-bottom:14px!important;border-bottom:1px solid #404656;} -.font-sm{font-size: 0.875rem;} -.pal-card-body .form-group label{margin-bottom:4px;} -.count-del-btn button{height: 2.142rem; width: 100%;padding: 0 12px;} -@media screen and (max-width:768px){ - .count-del-btn{margin-top:10px;} - .count-del-btn button span{display:none;} - .count-del-btn button svg{margin:0px!important;} +.pal-card { + background: #343d55; + border-radius: 6px; + padding: 1rem; +} +.pal-card-box { + background: #283046; + padding: 20px; + border-radius: 6px; +} +.pal-card-box + .pal-card-box { + margin-top: 2rem; +} +.pal-card-box .card { + margin-bottom: 0px; +} +.pal-card-header { + display: flex; + min-height: 40px; + align-items: center; + justify-content: space-between; + flex-direction: row; + margin-bottom: 14px; +} +.pal-card-header h3 { + font-size: 1.1875rem; + font-weight: 500; +} +.pal-card .card { + margin-bottom: 0px; +} +.search-info { + padding: 20px; +} +.search-info .cont-ti { + padding-bottom: 14px !important; + border-bottom: 1px solid #404656; +} +.font-sm { + font-size: 0.875rem; +} +.pal-card-body .form-group label { + margin-bottom: 4px; +} +.count-del-btn button { + height: 2.142rem; + width: 100%; + padding: 0 12px; +} +@media screen and (max-width: 768px) { + .count-del-btn { + margin-top: 10px; + } + .count-del-btn button span { + display: none; + } + .count-del-btn button svg { + margin: 0px !important; } -.count-add-btn{padding-left:-10px;} -.count-box{margin-bottom:1rem;} -.count-box .form-label-group{margin-bottom:0px;} -.count-box form + form{margin-top:1rem;} -.count-box .sm-ti{margin-bottom:4px;display: inline-block;} -.sm-ti{font-weight:500;font-size: 14px;} +} +.count-add-btn { + padding-left: -10px; +} +.count-box { + margin-bottom: 1rem; +} +.count-box .form-label-group { + margin-bottom: 0px; +} +.count-box form + form { + margin-top: 1rem; +} +.count-box .sm-ti { + margin-bottom: 4px; + display: inline-block; +} +.sm-ti { + font-weight: 500; + font-size: 14px; +} /*그리드*/ -.react-dataTable.pal-dateTable{border-bottom:1px solid #3b4253;} -.react-dataTable.pal-dateTable .rdt_TableHead .rdt_TableHeadRow .rdt_TableCol div[role='button'] div{font-size: 0.875rem;font-weight:500;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow{min-height:40px;background: #242b3d !important;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow .rdt_TableCell{height:40px;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow .rdt_TableCell{font-size: 0.875rem;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow .rdt_TableCell .badge.btn{font-size:85%!important;} -.pal-dateTable a{color:#bbb;text-decoration: underline;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.primary{background: #7367f0 !important;color:#fff;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.secondary{background: #82868b !important;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.success{background: #28c76f !important;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.danger{background: #ea5455 !important;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.warning{background: #ff9f43 !important;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.info{background: #00cfe8 !important;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.dark{background: #4b4b4b !important;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.yellow{background: #fff600 !important;} - -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.primary .rdt_TableCell, .rdt_TableRow.primary .rdt_TableCell a{color:#fff;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.secondary .rdt_TableCell, .rdt_TableRow.secondary .rdt_TableCell a{color:#fff;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.success .rdt_TableCell, .rdt_TableRow.success .rdt_TableCell a{color:#fff;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.danger .rdt_TableCell, .rdt_TableRow.danger .rdt_TableCell a{color:#fff;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.warning .rdt_TableCell, .rdt_TableRow.warning .rdt_TableCell a{color:#fff;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.info .rdt_TableCell, .rdt_TableRow.info .rdt_TableCell a{color:#fff;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.dark .rdt_TableCell, .rdt_TableRow.dark .rdt_TableCell a{color:#fff;} -.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.yellow .rdt_TableCell, .rdt_TableRow.yellow .rdt_TableCell a{color:#000;} - -.rdt_TableRow.primary .rdt_TableCell a:hover{color:#7367f0;} -.rdt_TableRow.secondary .rdt_TableCell a:hover{color:#7367f0;} -.rdt_TableRow.success .rdt_TableCell a:hover{color:#7367f0;} -.rdt_TableRow.danger .rdt_TableCell a:hover{color:#7367f0;} -.rdt_TableRow.warning .rdt_TableCell a:hover{color:#7367f0;} -.rdt_TableRow.info .rdt_TableCell a:hover{color:#7367f0;} -.rdt_TableRow.dark .rdt_TableCell a:hover{color:#7367f0;} -.rdt_TableRow.yellow .rdt_TableCell a:hover{color:#7367f0;} - - -@media only screen and (min-width: 768px) and (max-width: 1024px){ - .search-list-cont-btn button{font-size:12px;padding:10px 4px;} -} - -.no-dataTable{font-size: 0.875rem;} +.react-dataTable.pal-dateTable { + border-bottom: 1px solid #3b4253; +} +.react-dataTable.pal-dateTable + .rdt_TableHead + .rdt_TableHeadRow + .rdt_TableCol + div[role='button'] + div { + font-size: 0.875rem; + font-weight: 500; +} +.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow { + min-height: 40px; + background: #242b3d !important; +} +.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow .rdt_TableCell { + height: 40px; +} +.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow .rdt_TableCell { + font-size: 0.875rem; +} +.react-dataTable.pal-dateTable + .rdt_TableBody + .rdt_TableRow + .rdt_TableCell + .badge.btn { + font-size: 85% !important; +} +.pal-dateTable a { + color: #bbb; + text-decoration: underline; +} +.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.primary { + background: #7367f0 !important; + color: #fff; +} +.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.secondary { + background: #82868b !important; +} +.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.success { + background: #28c76f !important; +} +.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.danger { + background: #ea5455 !important; +} +.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.warning { + background: #ff9f43 !important; +} +.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.info { + background: #00cfe8 !important; +} +.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.dark { + background: #4b4b4b !important; +} +.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.yellow { + background: #fff600 !important; +} + +.react-dataTable.pal-dateTable + .rdt_TableBody + .rdt_TableRow.primary + .rdt_TableCell, +.rdt_TableRow.primary .rdt_TableCell a { + color: #fff; +} +.react-dataTable.pal-dateTable + .rdt_TableBody + .rdt_TableRow.secondary + .rdt_TableCell, +.rdt_TableRow.secondary .rdt_TableCell a { + color: #fff; +} +.react-dataTable.pal-dateTable + .rdt_TableBody + .rdt_TableRow.success + .rdt_TableCell, +.rdt_TableRow.success .rdt_TableCell a { + color: #fff; +} +.react-dataTable.pal-dateTable + .rdt_TableBody + .rdt_TableRow.danger + .rdt_TableCell, +.rdt_TableRow.danger .rdt_TableCell a { + color: #fff; +} +.react-dataTable.pal-dateTable + .rdt_TableBody + .rdt_TableRow.warning + .rdt_TableCell, +.rdt_TableRow.warning .rdt_TableCell a { + color: #fff; +} +.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.info .rdt_TableCell, +.rdt_TableRow.info .rdt_TableCell a { + color: #fff; +} +.react-dataTable.pal-dateTable .rdt_TableBody .rdt_TableRow.dark .rdt_TableCell, +.rdt_TableRow.dark .rdt_TableCell a { + color: #fff; +} +.react-dataTable.pal-dateTable + .rdt_TableBody + .rdt_TableRow.yellow + .rdt_TableCell, +.rdt_TableRow.yellow .rdt_TableCell a { + color: #000; +} + +.rdt_TableRow.primary .rdt_TableCell a:hover { + color: #7367f0; +} +.rdt_TableRow.secondary .rdt_TableCell a:hover { + color: #7367f0; +} +.rdt_TableRow.success .rdt_TableCell a:hover { + color: #7367f0; +} +.rdt_TableRow.danger .rdt_TableCell a:hover { + color: #7367f0; +} +.rdt_TableRow.warning .rdt_TableCell a:hover { + color: #7367f0; +} +.rdt_TableRow.info .rdt_TableCell a:hover { + color: #7367f0; +} +.rdt_TableRow.dark .rdt_TableCell a:hover { + color: #7367f0; +} +.rdt_TableRow.yellow .rdt_TableCell a:hover { + color: #7367f0; +} + +@media only screen and (min-width: 768px) and (max-width: 1024px) { + .search-list-cont-btn button { + font-size: 12px; + padding: 10px 4px; + } +} + +.no-dataTable { + font-size: 0.875rem; +} /*메뉴 관리*/ -.tree-menu {border-radius: 2px;box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);margin-top:1rem;padding:20px;border-radius:6px;background:#161d31;max-height: 610px;overflow: auto;} -.tree-menu-list ul {margin-left:10px;padding-left:20px;border-left: 1px dashed #bbb;} -.tree-menu-list li {color:#bbb;font-size: 14px;font-weight:300;line-height:2rem;} -.tree-menu-list li > div{display:inline-block;} -.tree-menu-list li span{cursor: pointer;} -.tree-menu-list.no-cursor li span{cursor: default;} -.tree-menu-list li a{color:#bbb;} +.tree-menu { + border-radius: 2px; + box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); + margin-top: 1rem; + padding: 20px; + border-radius: 6px; + background: #161d31; + max-height: 610px; + overflow: auto; +} +.tree-menu-list ul { + margin-left: 10px; + padding-left: 20px; + border-left: 1px dashed #bbb; +} +.tree-menu-list li { + color: #bbb; + font-size: 14px; + font-weight: 300; + line-height: 2rem; +} +.tree-menu-list li > div { + display: inline-block; +} +.tree-menu-list li span { + cursor: pointer; +} +.tree-menu-list.no-cursor li span { + cursor: default; +} +.tree-menu-list li a { + color: #bbb; +} .tree-menu-list .folder, -.tree-menu-list .folder > a {color: #ddd;font-size:0.9375rem;font-weight: 400;} +.tree-menu-list .folder > a { + color: #ddd; + font-size: 0.9375rem; + font-weight: 400; +} .tree-menu-list li:before { -margin-right: 8px; -content: ""; -height: 20px; -vertical-align: middle; -width: 20px; -background-repeat: no-repeat; -display: inline-block; -background-image: url("data:image/svg+xml;utf8,"); -background-position: center 2px; -background-size: 60% auto; + margin-right: 8px; + content: ''; + height: 20px; + vertical-align: middle; + width: 20px; + background-repeat: no-repeat; + display: inline-block; + background-image: url("data:image/svg+xml;utf8,"); + background-position: center 2px; + background-size: 60% auto; } .tree-menu-list li.folder:before { -background-image: url("data:image/svg+xml;utf8,"); -background-position: center top; -background-size: 75% auto; + background-image: url("data:image/svg+xml;utf8,"); + background-position: center top; + background-size: 75% auto; +} +.tree-menu-list .custom-checkbox { + padding-left: 1.8rem; + margin-right: 0; + min-height: 1rem; } -.tree-menu-list .custom-checkbox{padding-left:1.8rem;margin-right:0;min-height: 1rem;} -@media screen and (max-width:991px){ - .pal-card-box-many > [class*='col'] + [class*='col']{margin-top:2rem;} +@media screen and (max-width: 991px) { + .pal-card-box-many > [class*='col'] + [class*='col'] { + margin-top: 2rem; } +} -.card-body-tab-cont{padding:20px;} -.card-body-tab-cont .tab-content{display:block;} -.card-body-tab-cont .form-group label{margin-bottom:4px;} +.card-body-tab-cont { + padding: 20px; +} +.card-body-tab-cont .tab-content { + display: block; +} +.card-body-tab-cont .form-group label { + margin-bottom: 4px; +} -.modal-box{padding:20px 0;} -.modal-box .ti{font-weight:500;font-size:1.5rem;margin:0 0 20px 0;} -.modal-box .ti svg{margin:0 4px;} +.modal-box { + padding: 20px 0; +} +.modal-box .ti { + font-weight: 500; + font-size: 1.5rem; + margin: 0 0 20px 0; +} +.modal-box .ti svg { + margin: 0 4px; +} -.input-inline-btn{align-items: flex-end;} -.input-inline-btn button{padding:0.6rem;width:100%;} -.input-inline-btn .time{font-size: 0.875rem;font-weight:400;vertical-align: middle;display:block;text-align:right;margin-bottom:4px;} -@media screen and (min-width:767px){ - .input-inline-btn div:first-child{padding-right:0px;} - } -@media screen and (max-width:768px){ - .input-inline-btn button{margin-top:10px;} - .input-inline-btn .time{position: absolute;top: -58px;right: 17px;} - } +.input-inline-btn { + align-items: flex-end; +} +.input-inline-btn button { + padding: 0.6rem; + width: 100%; +} +.input-inline-btn .time { + font-size: 0.875rem; + font-weight: 400; + vertical-align: middle; + display: block; + text-align: right; + margin-bottom: 4px; +} +@media screen and (min-width: 767px) { + .input-inline-btn div:first-child { + padding-right: 0px; + } +} +@media screen and (max-width: 768px) { + .input-inline-btn button { + margin-top: 10px; + } + .input-inline-btn .time { + position: absolute; + top: -58px; + right: 17px; + } +} /* .input-inline-btn [class*='col']{padding:0px;} .input-inline-btn [class*='col'] + [class*='col']{padding-left:10px;} @media screen and (max-width:767px){ .input-inline-btn [class*='col'] + [class*='col']{padding-left:0px;margin-top:10px;} } */ - -.media-img{width:300px;height:300px;margin: 0px auto;border-radius:6px;} -.media-img img{width:100%;height:100%;border-radius:6px;} -.no-img{width:300px;background:#404656;border-radius:6px;height:300px;display: flex;flex-direction: column;align-items: center;justify-content: center;} -.no-img svg{width:100px;height:100px;} +.media-img { + width: 300px; + height: 300px; + margin: 0px auto; + border-radius: 6px; +} +.media-img img { + width: 100%; + height: 100%; + border-radius: 6px; +} +.no-img { + width: 300px; + background: #404656; + border-radius: 6px; + height: 300px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.no-img svg { + width: 100px; + height: 100px; +} /* .no-img:after {content: "";display: block;padding-bottom: 100%;} */ -.media-btn-2n > label, .media-btn-2n > button{flex:1;} -@media screen and (max-width:1600px){ - .media-img{width:200px;height:200px;} - .no-img{width:200px;height:200px;} - } - @media screen and (max-width:990px){ - .media-img{width:280px;height:280px;} - .no-img{width:280px;height:280px;} - } +.media-btn-2n > label, +.media-btn-2n > button { + flex: 1; +} +@media screen and (max-width: 1600px) { + .media-img { + width: 200px; + height: 200px; + } + .no-img { + width: 200px; + height: 200px; + } +} +@media screen and (max-width: 990px) { + .media-img { + width: 280px; + height: 280px; + } + .no-img { + width: 280px; + height: 280px; + } +} -@media screen and (max-width:768px){ - .pal-media{margin-bottom:1rem;} - } +@media screen and (max-width: 768px) { + .pal-media { + margin-bottom: 1rem; + } +} -.layer-search-form > div + div{margin-top:10px;} -.layer-search-form > div .btn{border-radius:0.358rem;width:100%;} +.layer-search-form > div + div { + margin-top: 10px; +} +.layer-search-form > div .btn { + border-radius: 0.358rem; + width: 100%; +} /*데이터피커 (달력) 기본 css*/ -.calendar-flat{border:1px solid #404656;background: #283046;border-radius: 0.357rem;height: 2.142rem;padding: 0 20px;} -.calendar-flat input{padding:0px;font-size: 0.875rem;} -.calendar-flat:hover{border:1px solid #7367f0;} +.calendar-flat { + border: 1px solid #404656; + background: #283046; + border-radius: 0.357rem; + height: 2.142rem; + padding: 0 20px; +} +.calendar-flat input { + padding: 0px; + font-size: 0.875rem; +} +.calendar-flat:hover { + border: 1px solid #7367f0; +} /*시뮬레이터*/ -.sm-txt{font-size: 0.875rem;color:#bbb;} -.pd-20{padding:20px;} -.simulation-wrap{position:absolute;right:0;bottom:0px;height:auto;width:calc(100% - 430px);z-index: 999;background:#283046;border-left:1px solid #404656;border-bottom:0;overflow:hidden;transition: 0.5s ease;-webkit-transition: 0.5s ease;} -.simulation-wrap.full{width:calc(100% - 80px);transition: 0.5s ease;-webkit-transition: 0.5s ease;} -.simulation-cont{display:flex;width:100%;justify-content:space-between;align-items: center;} -.simulation-slider{width:100%;} -.simulation-ti{display:flex;background: #7367f0;color: #fff; padding: 10px 20px;} -.simulation-ti div{font-size:1rem;font-weight:500;} -.simulation-ti-btn{padding:0;background-color: transparent!important;border:none;margin-right:1rem;} -.simulation-ti-btn:focus{background-color: transparent!important;border:none;} -.simulation-slider-time{display:flex;padding:0 50px 0 20px;} -.simulation-slider-time .noUi-pips{display:none;} -.simulation-slider-time .btn{margin-right:20px;padding:0;width:35px;height:35px;} -.simulation-cont-box{display:flex;flex-direction: column;} -.simulation-cont-box + .simulation-cont-box{margin-left:2rem;} -.simulation-cont-box > div{flex:1;} -.simulation-cont-box-row{display:flex;flex-direction: row;justify-content: space-between;align-items: center;} -.simulation-cont-box span.ti, .simulation-cont-box span.txt{display:block;font-size: 0.875rem;} -.simulation-cont-box span.ti{font-weight:500;} -.simulation-cont-box-info{margin-top:20px;} -.simulation-cont-box-list{flex:1;min-width:100px;flex-direction: column;border:1px solid #82868b;border-radius:6px;} -.simulation-cont-box-list .ti{background:#82868b;display: block;color:#fff;padding:4px 10px;} -.simulation-cont-box-list .txt{padding:4px 10px;} -.simulation-cont-box-list:nth-child(4){min-width:180px;} -.simulation-cont-box-list + .simulation-cont-box-list{margin-left:1rem;} -.drone-info .badge{min-width:180px;display: flex;justify-content: space-between;} -.drone-info .badge + .badge{margin-top:10px;} -.drone-info .badge .txt{display:inline-block;} -.simulation-cont-box .drone-location{justify-content: space-between;align-items: center;text-align:center;} -.drone-location{ flex: 1;text-align: center;} -.drone-location .border-primary{flex: 1;border-radius:6px;} -.drone-location .border-primary .ti{padding:4px 10px;font-size: 0.875rem;background:#7367f0;color:#fff;} -.drone-location .border-primary .txt{padding:4px 10px;} -.drone-location .border-secondary{flex: 1;border-radius:6px;} -.drone-location .border-secondary .ti{padding:4px 10px;font-size: 0.875rem;background:#82868b;color:#fff;} -.drone-location .border-secondary .txt{padding:4px 10px;} -.drone-location .simulation-icon{flex:0.7;} -.simulation-date{height:auto;padding:0 20px;} -.simulation-date-cont{height: auto;display:flex;font-size: 0.875rem;} -.simulation-date-cont-ti{width:100px;position:fixed;background:#283046;border-right:1px solid #404656;} -.simulation-date-cont-ti div{font-weight:500} -.simulation-date-cont-ti div:first-child{color:#ff9f43;font-weight:600;} -.simulation-date-num div:first-child{background-color: rgba(255, 159, 67, 0.12);color: #ff9f43;padding: 0.3rem 0.5rem;text-align: center;border-radius: 0.358rem;display: inline-block;font-weight: 600;line-height: 1;white-space: nowrap;vertical-align: baseline; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0s, border 0s;} -.simulation-date-num{padding:0 0.5rem;text-align:center;font-size:13px;} -.simulation-date-num{border-right:1px solid #404656;} -.simulation-date-cont-ti div, .simulation-date-num div{margin-bottom:4px;} -.simulation-date-num-pd{display: flex;padding-left:100px;} -.simulation-cont-box-img{flex-direction: row;} -.simulation-cont-box-img .img-box{width:130px;height:130px;margin-right:10px;} -.simulation-cont-box-img .img-box img{width:100%;height:100%;} -.simulation-cont-box-img .no-img{max-height:auto;} -.simulation-cont-box-img .no-img svg{width:50px;height:50px;} -.simulation-cont-box-img .badge{min-width:180px;display:flex;justify-content:space-between;} -.simulation-cont-box-img .badge + .badge{margin-top:10px;} -.simulation-icon svg{fill:#5d6373} -.date-num-focus{background:#7367f0;border-radius: 6px;color:#fff;} -.simulation-date-num.date-num-focus div:first-child{background: #ff9f43;color:#fff;} - -.scroll-container {padding-bottom:10px;} +.sm-txt { + font-size: 0.875rem; + color: #bbb; +} +.pd-20 { + padding: 20px; +} +.simulation-wrap { + position: absolute; + right: 0; + bottom: 0px; + height: auto; + width: calc(100% - 430px); + z-index: 999; + background: #283046; + border-left: 1px solid #404656; + border-bottom: 0; + overflow: hidden; + transition: 0.5s ease; + -webkit-transition: 0.5s ease; +} +.simulation-wrap.full { + width: calc(100% - 80px); + transition: 0.5s ease; + -webkit-transition: 0.5s ease; +} +.simulation-cont { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; +} +.simulation-slider { + width: 100%; +} +.simulation-ti { + display: flex; + background: #7367f0; + color: #fff; + padding: 10px 20px; +} +.simulation-ti div { + font-size: 1rem; + font-weight: 500; +} +.simulation-ti-btn { + padding: 0; + background-color: transparent !important; + border: none; + margin-right: 1rem; +} +.simulation-ti-btn:focus { + background-color: transparent !important; + border: none; +} +.simulation-slider-time { + display: flex; + padding: 0 50px 0 20px; +} +.simulation-slider-time .noUi-pips { + display: none; +} +.simulation-slider-time .btn { + margin-right: 20px; + padding: 0; + width: 35px; + height: 35px; +} +.simulation-cont-box { + display: flex; + flex-direction: column; +} +.simulation-cont-box + .simulation-cont-box { + margin-left: 2rem; +} +.simulation-cont-box > div { + flex: 1; +} +.simulation-cont-box-row { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} +.simulation-cont-box span.ti, +.simulation-cont-box span.txt { + display: block; + font-size: 0.875rem; +} +.simulation-cont-box span.ti { + font-weight: 500; +} +.simulation-cont-box-info { + margin-top: 20px; +} +.simulation-cont-box-list { + flex: 1; + min-width: 100px; + flex-direction: column; + border: 1px solid #82868b; + border-radius: 6px; +} +.simulation-cont-box-list .ti { + background: #82868b; + display: block; + color: #fff; + padding: 4px 10px; +} +.simulation-cont-box-list .txt { + padding: 4px 10px; +} +.simulation-cont-box-list:nth-child(4) { + min-width: 180px; +} +.simulation-cont-box-list + .simulation-cont-box-list { + margin-left: 1rem; +} +.drone-info .badge { + min-width: 180px; + display: flex; + justify-content: space-between; +} +.drone-info .badge + .badge { + margin-top: 10px; +} +.drone-info .badge .txt { + display: inline-block; +} +.simulation-cont-box .drone-location { + justify-content: space-between; + align-items: center; + text-align: center; +} +.drone-location { + flex: 1; + text-align: center; +} +.drone-location .border-primary { + flex: 1; + border-radius: 6px; +} +.drone-location .border-primary .ti { + padding: 4px 10px; + font-size: 0.875rem; + background: #7367f0; + color: #fff; +} +.drone-location .border-primary .txt { + padding: 4px 10px; +} +.drone-location .border-secondary { + flex: 1; + border-radius: 6px; +} +.drone-location .border-secondary .ti { + padding: 4px 10px; + font-size: 0.875rem; + background: #82868b; + color: #fff; +} +.drone-location .border-secondary .txt { + padding: 4px 10px; +} +.drone-location .simulation-icon { + flex: 0.7; +} +.simulation-date { + height: auto; + padding: 0 20px; +} +.simulation-date-cont { + height: auto; + display: flex; + font-size: 0.875rem; +} +.simulation-date-cont-ti { + width: 100px; + position: fixed; + background: #283046; + border-right: 1px solid #404656; +} +.simulation-date-cont-ti div { + font-weight: 500; +} +.simulation-date-cont-ti div:first-child { + color: #ff9f43; + font-weight: 600; +} +.simulation-date-num div:first-child { + background-color: rgba(255, 159, 67, 0.12); + color: #ff9f43; + padding: 0.3rem 0.5rem; + text-align: center; + border-radius: 0.358rem; + display: inline-block; + font-weight: 600; + line-height: 1; + white-space: nowrap; + vertical-align: baseline; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0s, + border 0s; +} +.simulation-date-num { + padding: 0 0.5rem; + text-align: center; + font-size: 13px; +} +.simulation-date-num { + border-right: 1px solid #404656; +} +.simulation-date-cont-ti div, +.simulation-date-num div { + margin-bottom: 4px; +} +.simulation-date-num-pd { + display: flex; + padding-left: 100px; +} +.simulation-cont-box-img { + flex-direction: row; +} +.simulation-cont-box-img .img-box { + width: 130px; + height: 130px; + margin-right: 10px; +} +.simulation-cont-box-img .img-box img { + width: 100%; + height: 100%; +} +.simulation-cont-box-img .no-img { + max-height: auto; +} +.simulation-cont-box-img .no-img svg { + width: 50px; + height: 50px; +} +.simulation-cont-box-img .badge { + min-width: 180px; + display: flex; + justify-content: space-between; +} +.simulation-cont-box-img .badge + .badge { + margin-top: 10px; +} +.simulation-icon svg { + fill: #5d6373; +} +.date-num-focus { + background: #7367f0; + border-radius: 6px; + color: #fff; +} +.simulation-date-num.date-num-focus div:first-child { + background: #ff9f43; + color: #fff; +} + +.scroll-container { + padding-bottom: 10px; +} /* @media screen and (max-width:1400px){ } @@ -744,98 +2540,311 @@ background-size: 75% auto; } */ /*datepicker-custom*/ -.datepicker-custom {display: flex;align-items:center;cursor: pointer;} -.datepicker-custom input{cursor: pointer;} -.datepicker-custom .react-datepicker{background:#161d31;border-color:#161d31;color:#b4b7bd;font-size:0.875rem;font-weight:400;} -.datepicker-custom .react-datepicker__header{background:transparent;border-color:transparent;color:#b4b7bd;font-size: 1.1rem;font-weight:300;} +.datepicker-custom { + display: flex; + align-items: center; + cursor: pointer; +} +.datepicker-custom input { + cursor: pointer; +} +.datepicker-custom .react-datepicker { + background: #161d31; + border-color: #161d31; + color: #b4b7bd; + font-size: 0.875rem; + font-weight: 400; +} +.datepicker-custom .react-datepicker__header { + background: transparent; + border-color: transparent; + color: #b4b7bd; + font-size: 1.1rem; + font-weight: 300; +} .datepicker-custom .react-datepicker__year-read-view--down-arrow, .datepicker-custom .react-datepicker__month-read-view--down-arrow, .datepicker-custom .react-datepicker__month-year-read-view--down-arrow, -.datepicker-custom .react-datepicker__navigation-icon::before{border-width: 1px 1px 0 0;top: 12px;} -.datepicker-custom .react-datepicker__navigation:hover *::before {border-color: #7367f0;} +.datepicker-custom .react-datepicker__navigation-icon::before { + border-width: 1px 1px 0 0; + top: 12px; +} +.datepicker-custom .react-datepicker__navigation:hover *::before { + border-color: #7367f0; +} .datepicker-custom .react-datepicker__day--keyboard-selected, .datepicker-custom .react-datepicker__month-text--keyboard-selected, .datepicker-custom .react-datepicker__quarter-text--keyboard-selected, -.datepicker-custom .react-datepicker__year-text--keyboard-selected{background:#7367f0;} -.datepicker-custom .react-datepicker__month-text.react-datepicker__month--selected:hover, -.datepicker-custom .react-datepicker__month-text.react-datepicker__month--in-range:hover, -.datepicker-custom .react-datepicker__month-text.react-datepicker__quarter--selected:hover, -.datepicker-custom .react-datepicker__month-text.react-datepicker__quarter--in-range:hover, -.datepicker-custom .react-datepicker__quarter-text.react-datepicker__month--in-range:hover, -.datepicker-custom .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover, -.datepicker-custom .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {background-color:#7367f0;color:#b4b7bd;} +.datepicker-custom .react-datepicker__year-text--keyboard-selected { + background: #7367f0; +} +.datepicker-custom + .react-datepicker__month-text.react-datepicker__month--selected:hover, +.datepicker-custom + .react-datepicker__month-text.react-datepicker__month--in-range:hover, +.datepicker-custom + .react-datepicker__month-text.react-datepicker__quarter--selected:hover, +.datepicker-custom + .react-datepicker__month-text.react-datepicker__quarter--in-range:hover, +.datepicker-custom + .react-datepicker__quarter-text.react-datepicker__month--in-range:hover, +.datepicker-custom + .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover, +.datepicker-custom + .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover { + background-color: #7367f0; + color: #b4b7bd; +} .datepicker-custom .react-datepicker__month-text:hover, -.datepicker-custom .react-datepicker__quarter-text:hover {background-color: rgba(57,57,57,0.3);} +.datepicker-custom .react-datepicker__quarter-text:hover { + background-color: rgba(57, 57, 57, 0.3); +} .datepicker-custom .react-datepicker__month .react-datepicker__month-text, -.datepicker-custom .react-datepicker__month .react-datepicker__quarter-text{width:40px;height:40px;line-height:40px;border-radius:100%;} +.datepicker-custom .react-datepicker__month .react-datepicker__quarter-text { + width: 40px; + height: 40px; + line-height: 40px; + border-radius: 100%; +} .datepicker-custom .react-datepicker__month .react-datepicker__month-text, -.datepicker-custom .react-datepicker__month .react-datepicker__quarter-text {margin:5px;} -.datepicker-custom .react-datepicker__triangle{display:none;} -.datepicker-border-sm{border:1px solid #404656;padding:0 20px;border-radius:20px;} -.datepicker-border-sm input{width:100px;height:34px;padding:0 0 0 1rem;} - - -.m_ft{display:flex;align-items:flex-end; justify-content: space-between;} -.m_ft_box{flex:0 0 49%} -.m_ft_box + .m_ft_box{margin-left:1%} - -.layer-content-box .history-btn{border-radius:4px;display:block;width:100%;height:45px;line-height:45px;text-align:center;font-size: 0.875rem;color:#ddd;font-weight:500;} -.layer-content-box .history-btn:hover{border-radius:4px;background:#00cfe8;border-color:#00cfe8;transition: 0.3s ease;-webkit-transition: 0.3s ease;} -.historyModal .drone-ti span{font-weight:500;margin-top:6px} -.historyModal .drone-name{color:#00cfe8;margin:0 10px 0 0;} - -.search-info-box-del-btn{display: flex; align-items: center;} -.search-info-box-del-btn button{cursor: pointer;margin-top:10px} -@media (max-width: 992px){ - .search-info-box-del-btn button { - margin-bottom:1rem; - margin-top:0px; - } -} - -.login .info-search .pal-card{width:95%;} -.login-form.info-search form{padding:0;} -.info-search .input-btn button{width:100%; padding: 0.786rem 1.5rem;} -.full-btn-2n{display:flex;justify-content:space-between;} -.full-btn-2n button{width:49%;} -.timeInput{position:relative;} -.timeInput .time{position:absolute;right:16px;top:50%;transform: translateY(-50%);font-size:14px;} -.user-search-id{font-weight:500;} -.user-search-modal .modal-body{font-size:1.125rem;padding:30px 20px} -.user-search-modal .modal-body .etc-txt{display:block;font-weight:500;margin-bottom:1rem} -.user-search-link button{font-size:0.875rem;margin-top:20px} +.datepicker-custom .react-datepicker__month .react-datepicker__quarter-text { + margin: 5px; +} +.datepicker-custom .react-datepicker__triangle { + display: none; +} +.datepicker-border-sm { + border: 1px solid #404656; + padding: 0 20px; + border-radius: 20px; +} +.datepicker-border-sm input { + width: 100px; + height: 34px; + padding: 0 0 0 1rem; +} + +.m_ft { + display: flex; + align-items: flex-end; + justify-content: space-between; +} +.m_ft_box { + flex: 0 0 49%; +} +.m_ft_box + .m_ft_box { + margin-left: 1%; +} + +.layer-content-box .history-btn { + border-radius: 4px; + display: block; + width: 100%; + height: 45px; + line-height: 45px; + text-align: center; + font-size: 0.875rem; + color: #ddd; + font-weight: 500; +} +.layer-content-box .history-btn:hover { + border-radius: 4px; + background: #00cfe8; + border-color: #00cfe8; + transition: 0.3s ease; + -webkit-transition: 0.3s ease; +} +.historyModal .drone-ti span { + font-weight: 500; + margin-top: 6px; +} +.historyModal .drone-name { + color: #00cfe8; + margin: 0 10px 0 0; +} + +.search-info-box-del-btn { + display: flex; + align-items: center; +} +.search-info-box-del-btn button { + cursor: pointer; + margin-top: 10px; +} +@media (max-width: 992px) { + .search-info-box-del-btn button { + margin-bottom: 1rem; + margin-top: 0px; + } +} + +.login .info-search .pal-card { + width: 95%; +} +.login-form.info-search form { + padding: 0; +} +.info-search .input-btn button { + width: 100%; + padding: 0.786rem 1.5rem; +} +.full-btn-2n { + display: flex; + justify-content: space-between; +} +.full-btn-2n button { + width: 49%; +} +.timeInput { + position: relative; +} +.timeInput .time { + position: absolute; + right: 16px; + top: 50%; + transform: translateY(-50%); + font-size: 14px; +} +.user-search-id { + font-weight: 500; +} +.user-search-modal .modal-body { + font-size: 1.125rem; + padding: 30px 20px; +} +.user-search-modal .modal-body .etc-txt { + display: block; + font-weight: 500; + margin-bottom: 1rem; +} +.user-search-link button { + font-size: 0.875rem; + margin-top: 20px; +} /* 지도 검색 */ -.search-comp{position:relative; z-index:100;margin:10px} -.search-feather{width:400px;} -.search-result-comp{background-color:#fff;} -.search-result{padding:8px 10px} -.search-result:hover{background-color:#e7e7e7} -.search-result .title{font-size:0.9rem;color:#000;} -.search-result .address{font-size:0.875rem;color:#343D55} +.search-comp { + position: relative; + z-index: 100; + margin: 10px; +} +.search-feather { + width: 400px; +} +.search-result-comp { + background-color: #fff; +} +.search-result { + padding: 8px 10px; +} +.search-result:hover { + background-color: #e7e7e7; +} +.search-result .title { + font-size: 0.9rem; + color: #000; +} +.search-result .address { + font-size: 0.875rem; + color: #343d55; +} -.pal-modal-body{padding:0;} -.pal-modal-body .pal-card-box + .pal-card-box{margin-top:0;} +.pal-modal-body { + padding: 0; +} +.pal-modal-body .pal-card-box + .pal-card-box { + margin-top: 0; +} /*그리드 로딩*/ -.grid-loading{width:100%;height:100%;position: absolute;background:rgba(35, 41, 58, 0.7);z-index:999;display:flex;align-items:center;justify-content: center;text-align:center;} -.grid-loading span{display:block;font-weight:500;margin-top:4px;} +.grid-loading { + width: 100%; + height: 100%; + position: absolute; + background: rgba(35, 41, 58, 0.7); + z-index: 999; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} +.grid-loading span { + display: block; + font-weight: 500; + margin-top: 4px; +} -.pa-input-box{display:flex;} -.pa-input{width:48px;margin-right:8px;} +.pa-input-box { + display: flex; +} +.pa-input { + width: 48px; + margin-right: 8px; +} /*관제 메인 데이터들(날씨,비행정보)*/ -.notice{display:none;} -.main-data-test{left:450px!important;transition: 0.5s ease;-webkit-transition: 0.5s ease;} -.main-data{position:absolute;z-index: 999;top:10px;left:150px;display:flex;font-size:0.875rem;} -.main-data-box + .main-data-box{margin-left:20px;} -.main-data-box .card{min-height:88px;margin:0;padding:10px 12px; background: #10163A;} -.box-ti{color: #f4f4f4;font-weight: 500;} -.data-box-header{display:flex;;align-items:center;justify-content: space-between;} -.data-box-header svg{color:#fff;} -.data-list-box{display:flex;margin:10px 0 4px 0;} -.data-list{background: #7367f0;border-radius: 5px;border: 1px solid #7367f0;display:flex;align-items: center;padding:0.4rem;} -.data-list + .data-list{margin-left:10px;} -.data-list span{font-size:0.8rem;color: #ddd;font-weight:400;} -.data-list span + span{margin-left:4px;} -.data-list .navigation-icon{width:16px;margin-top:-5px;margin-left:2px;} \ No newline at end of file +.notice { + display: none; +} +.main-data-test { + left: 450px !important; + transition: 0.5s ease; + -webkit-transition: 0.5s ease; +} +.main-data { + position: absolute; + z-index: 999; + top: 10px; + left: 150px; + display: flex; + font-size: 0.875rem; +} +.main-data-box + .main-data-box { + margin-left: 20px; +} +.main-data-box .card { + min-height: 88px; + margin: 0; + padding: 10px 12px; + background: #10163a; +} +.box-ti { + color: #f4f4f4; + font-weight: 500; +} +.data-box-header { + display: flex; + align-items: center; + justify-content: space-between; +} +.data-box-header svg { + color: #fff; +} +.data-list-box { + display: flex; + margin: 10px 0 4px 0; +} +.data-list { + background: #7367f0; + border-radius: 5px; + border: 1px solid #7367f0; + display: flex; + align-items: center; + padding: 0.4rem; +} +.data-list + .data-list { + margin-left: 10px; +} +.data-list span { + font-size: 0.8rem; + color: #ddd; + font-weight: 400; +} +.data-list span + span { + margin-left: 4px; +} +.data-list .navigation-icon { + width: 16px; + margin-top: -5px; + margin-left: 2px; +}