716 lines
14 KiB
CSS
716 lines
14 KiB
CSS
.header {
|
|
|
|
border-bottom: 1px solid #ededed !important;
|
|
}
|
|
/**
|
|
* @license
|
|
* Copyright 2019 Google LLC. All Rights Reserved.
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
/* [START maps_advanced_markers_html] */
|
|
:root {
|
|
--red-color:#e74141;
|
|
--blue-color: #0288D1;
|
|
--green-color: #558B2F;
|
|
--yellow-color: #fcd706;
|
|
--orange-color: #FF9800;
|
|
--transparency-color:#ffffff00;
|
|
}
|
|
|
|
|
|
/*
|
|
* Optional: Makes the sample page fill the window.
|
|
*/
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
-ms-overflow-style: none; /* IE, Edge 브라우저용 */
|
|
scrollbar-width: none; /* Firefox 브라우저용 */
|
|
}
|
|
html::-webkit-scrollbar,
|
|
body::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.pg-location{
|
|
margin-top: 0px;
|
|
width:100%;
|
|
/*height:calc(100% - 111px);*/
|
|
height:calc(100%);
|
|
position:relative;
|
|
}
|
|
.pg-location .td-title-map{
|
|
font-size: 16px !important;
|
|
width: auto !important;
|
|
}
|
|
.pg-location .custom-select-map-orderby {
|
|
border: 1px solid #b5b5b5;
|
|
border-radius: 3px;
|
|
padding: 3px 10px;
|
|
width: 100%;
|
|
}
|
|
.pg-location td{
|
|
font-size: 14px !important;
|
|
}
|
|
.width-20{
|
|
position: absolute;
|
|
top: 40px;
|
|
right: 10px;
|
|
z-index: 995;
|
|
width: 200px;
|
|
min-width: 200px;
|
|
padding: 10px;
|
|
background-color: #ffffffc7;
|
|
}
|
|
.btn-primary-map {
|
|
margin-top: 5px;
|
|
width: 100%;
|
|
font-weight: 500;
|
|
font-size: 15px;
|
|
letter-spacing: 1px;
|
|
padding: 3px 10px;
|
|
border-radius: 5px;
|
|
transition: 0.5s;
|
|
color: #fff;
|
|
background: var(--color-primary);
|
|
border: 1px solid var(--color-primary);
|
|
}
|
|
|
|
.btn-orange-map {
|
|
margin-top: 5px;
|
|
width: 100%;
|
|
font-weight: 500;
|
|
font-size: 15px;
|
|
letter-spacing: 1px;
|
|
padding: 3px 10px;
|
|
border-radius: 5px;
|
|
transition: 0.5s;
|
|
color: #fff;
|
|
background: var(--color-orange);
|
|
border: 1px solid var(--color-orange);
|
|
}
|
|
|
|
.btn-blue-map {
|
|
margin-top: 5px;
|
|
width: 100%;
|
|
font-weight: 500;
|
|
font-size: 15px;
|
|
letter-spacing: 1px;
|
|
padding: 3px 10px;
|
|
border-radius: 5px;
|
|
transition: 0.5s;
|
|
color: #fff;
|
|
background: #007bff;
|
|
border: 1px solid #007bff;
|
|
}
|
|
|
|
.btn-red-map {
|
|
margin-top: 5px;
|
|
width: 100%;
|
|
font-weight: 500;
|
|
font-size: 15px;
|
|
letter-spacing: 1px;
|
|
padding: 3px 10px;
|
|
border-radius: 5px;
|
|
transition: 0.5s;
|
|
color: #fff;
|
|
background: red;
|
|
border: 1px solid red;
|
|
}
|
|
/*
|
|
.width-20{
|
|
position: relative;
|
|
top: 0;
|
|
right: 0;
|
|
float: right;
|
|
z-index: 995;
|
|
width: 20%;
|
|
min-width: 200px;
|
|
padding: 10px;
|
|
}
|
|
*/
|
|
|
|
|
|
/*
|
|
* Always set the map height explicitly to define the size of the div element
|
|
* that contains the map.
|
|
*/
|
|
#map {
|
|
height: 100%;
|
|
width: 100%;
|
|
/*position: fixed!important;*/
|
|
/*z-index: 33;*/
|
|
}
|
|
#map:focus {
|
|
outline:none;
|
|
}
|
|
|
|
|
|
/*
|
|
* Property styles in unhighlighted state.
|
|
*/
|
|
.property {
|
|
align-items: center;
|
|
background-color: #FFFFFF;
|
|
border-radius: 50%;
|
|
color: #263238;
|
|
display: flex;
|
|
font-size: 14px;
|
|
gap: 15px;
|
|
height: 20px;
|
|
justify-content: center;
|
|
position: relative;
|
|
position: relative;
|
|
transition: all 0.3s ease-out;
|
|
width: 20px;
|
|
}
|
|
|
|
.property::after {
|
|
border-left: 7px solid transparent;
|
|
border-right: 7px solid transparent;
|
|
border-top: 7px solid #FFFFFF;
|
|
content: "";
|
|
height: 0;
|
|
left: 50%;
|
|
position: absolute;
|
|
top: 86%;
|
|
transform: translate(-50%, 0);
|
|
transition: all 0.3s ease-out;
|
|
width: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.property .icon {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
color: #ffffff;
|
|
}
|
|
.property .flag-megenta {
|
|
color: #e650df !important;
|
|
font-size: 30px !important;
|
|
}
|
|
.property .flag-light-green {
|
|
color: #25de66 !important;
|
|
font-size: 30px !important;
|
|
}
|
|
.property .flag-navy {
|
|
color: #3249bb !important;
|
|
font-size: 30px !important;
|
|
}
|
|
.property .flag-purple {
|
|
color: #8f3ed2 !important;
|
|
font-size: 30px !important;
|
|
}
|
|
|
|
|
|
.property .icon .flag-megenta,
|
|
.property .icon .flag-light-green,
|
|
.property .icon .flag-navy,
|
|
.property .icon .flag-purple
|
|
{
|
|
height: 20px;
|
|
width: auto;
|
|
}
|
|
|
|
.property .icon svg {
|
|
height: 18px;
|
|
width: auto;
|
|
}
|
|
|
|
.property .details {
|
|
display: none;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
height: 320px;
|
|
z-index: 9999;
|
|
}
|
|
.property .details .modal-header{
|
|
padding: 10px;
|
|
}
|
|
.property .details .modal-title{
|
|
font-size: 18px;
|
|
}
|
|
.property .store-info {
|
|
padding: 10px;
|
|
}
|
|
.property .store-info .tb-info-box .td-title-info,
|
|
#map-modal-input .td-title-info,
|
|
#map-modal-history .td-title-info,
|
|
#map-modal-info .td-title-info,
|
|
#map-modal-note .td-title-info {
|
|
background-color: var(--color-sub);
|
|
color: #fff;
|
|
}
|
|
|
|
.property .address {
|
|
color: #9E9E9E;
|
|
font-size: 10px;
|
|
margin-bottom: 10px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.property .features {
|
|
align-items: flex-end;
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
}
|
|
|
|
.property .features > div {
|
|
align-items: center;
|
|
background: #F5F5F5;
|
|
border-radius: 5px;
|
|
border: 1px solid #ccc;
|
|
display: flex;
|
|
font-size: 10px;
|
|
gap: 5px;
|
|
padding: 0px 5px;
|
|
}
|
|
.property.highlight .modal-header{
|
|
border-top-left-radius: 8px;
|
|
border-top-right-radius: 8px;
|
|
|
|
}
|
|
/*
|
|
* Property styles in highlighted state.
|
|
*/
|
|
.property.highlight {
|
|
background-color: #FFFFFF;
|
|
border-radius: 8px;
|
|
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
|
|
width: 300px;
|
|
height: 320px;
|
|
}
|
|
|
|
.property.highlight::after {
|
|
border-top: 9px solid #FFFFFF;
|
|
}
|
|
|
|
.property.highlight .details {
|
|
display: flex;
|
|
}
|
|
/*기존 샘플에서 모달창에 중복으로 나오는 아이콘 스타일*/
|
|
.property.highlight .icon{
|
|
display:none;
|
|
}
|
|
|
|
.property.highlight .icon svg {
|
|
width: 0px;
|
|
height: 0px;
|
|
display: none;
|
|
}
|
|
|
|
/*
|
|
* square icon colors.
|
|
*/
|
|
.property.highlight:has(.locator-blue) .icon {
|
|
color: var(--blue-color);
|
|
}
|
|
|
|
.property:not(.highlight):has(.locator-blue) {
|
|
background-color: var(--blue-color);
|
|
}
|
|
|
|
.property:not(.highlight):has(.locator-blue)::after {
|
|
border-top: 9px solid var(--blue-color);
|
|
}
|
|
/*
|
|
.property.highlight:has(.fa-square) .icon {
|
|
color: var(--blue-color);
|
|
}
|
|
|
|
.property:not(.highlight):has(.fa-square) {
|
|
background-color: var(--blue-color);
|
|
}
|
|
|
|
.property:not(.highlight):has(.fa-square)::after {
|
|
border-top: 9px solid var(--blue-color);
|
|
}
|
|
*/
|
|
/*
|
|
* circle icon colors.
|
|
*/
|
|
|
|
.property.highlight:has(.locator-orange) .icon {
|
|
color: var(--orange-color);
|
|
}
|
|
|
|
.property:not(.highlight):has(.locator-orange) {
|
|
background-color: var(--orange-color);
|
|
}
|
|
|
|
.property:not(.highlight):has(.locator-orange)::after {
|
|
border-top: 9px solid var(--orange-color);
|
|
}
|
|
/*
|
|
.property.highlight:has(.fa-circle) .icon {
|
|
color: var(--orange-color);
|
|
}
|
|
|
|
.property:not(.highlight):has(.fa-circle) {
|
|
background-color: var(--orange-color);
|
|
}
|
|
|
|
.property:not(.highlight):has(.fa-circle)::after {
|
|
border-top: 9px solid var(--orange-color);
|
|
}
|
|
*/
|
|
/*
|
|
* star icon colors.
|
|
*/
|
|
.property.highlight:has(.locator-green) .icon {
|
|
color: var(--green-color);
|
|
}
|
|
|
|
.property:not(.highlight):has(.locator-green) {
|
|
background-color: var(--green-color);
|
|
}
|
|
|
|
.property:not(.highlight):has(.locator-green)::after {
|
|
border-top: 9px solid var(--green-color);
|
|
}
|
|
/*
|
|
.property.highlight:has(.fa-star) .icon {
|
|
color: var(--green-color);
|
|
}
|
|
|
|
.property:not(.highlight):has(.fa-star) {
|
|
background-color: var(--green-color);
|
|
}
|
|
|
|
.property:not(.highlight):has(.fa-star)::after {
|
|
border-top: 9px solid var(--green-color);
|
|
}
|
|
*/
|
|
.property.highlight:has(.locator-red) .icon {
|
|
color: var(--red-color);
|
|
}
|
|
|
|
.property:not(.highlight):has(.locator-red) {
|
|
background-color: var(--red-color);
|
|
}
|
|
|
|
.property:not(.highlight):has(.locator-red)::after {
|
|
border-top: 9px solid var(--red-color);
|
|
}
|
|
|
|
|
|
.property.highlight:has(.locator-yellow) .icon {
|
|
color: var(--yellow-color);
|
|
}
|
|
|
|
.property:not(.highlight):has(.locator-yellow) {
|
|
background-color: var(--yellow-color);
|
|
}
|
|
|
|
.property:not(.highlight):has(.locator-yellow)::after {
|
|
border-top: 9px solid var(--yellow-color);
|
|
}
|
|
|
|
.property.highlight:has(.locator-transparency) .icon {
|
|
color: var(--transparency-color);
|
|
}
|
|
|
|
.property:not(.highlight):has(.locator-transparency) {
|
|
background-color: var(--transparency-color);
|
|
}
|
|
|
|
.property:not(.highlight):has(.locator-transparency)::after {
|
|
border-top: 9px solid var(--transparency-color);
|
|
}
|
|
|
|
|
|
|
|
/*Modal*/
|
|
|
|
|
|
|
|
#map-modal-history .modal-header,
|
|
#map-modal-info .modal-header,
|
|
#map-modal-note .modal-header{
|
|
padding: 0px 15px !important;
|
|
}
|
|
#map-modal-input .modal-header{
|
|
padding: 10px 15px !important;
|
|
}
|
|
#map-modal-history .modal-header h4,
|
|
#map-modal-info .modal-header h4,
|
|
#map-modal-note .modal-header h4,
|
|
#map-modal-input .modal-header h4{
|
|
font-size: 18px !important;
|
|
}
|
|
|
|
#map-modal-input .modal-content,
|
|
#map-modal-history .modal-content,
|
|
#map-modal-info .modal-content,
|
|
#map-modal-note .modal-content{
|
|
border-radius: 0.5em !important;
|
|
}
|
|
|
|
#map-modal-input,
|
|
#map-modal-history,
|
|
#map-modal-info,
|
|
#map-modal-note{
|
|
top: 55px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
#map-modal-input input{
|
|
border: 1px solid #b5b5b5;
|
|
border-radius: 3px;
|
|
width: 100%;
|
|
}
|
|
|
|
.mapBtn{
|
|
border:none;
|
|
color: #fff;
|
|
padding: 15px ;
|
|
border-radius: 5px;
|
|
font-size: 12px;
|
|
}
|
|
.btn-primary-modal{
|
|
background-color: #558B2F;
|
|
}
|
|
.btn-sub-modal{
|
|
background-color: #0288D1;
|
|
}
|
|
.btn-grey-modal{
|
|
background-color: #848484;
|
|
}
|
|
.btn-orange-modal{
|
|
background-color: #FF9800;
|
|
}
|
|
.btn-red-modal{
|
|
background-color: #FF0000;
|
|
}
|
|
.btn-purple-modal{
|
|
background-color: #bb50d0;
|
|
}
|
|
.btn-nearby-modal{
|
|
background-color: #e24400;
|
|
}
|
|
.btn-info-modal{
|
|
background-color: var(--color-sub);
|
|
}
|
|
/*Sidebar filter*/
|
|
.pg-location .td-search td {
|
|
height: auto;
|
|
}
|
|
|
|
.pg-location #sidebar-map td.td-title {
|
|
text-align: left !important;
|
|
}
|
|
.pg-location .form-forecast-search table.td-search td {
|
|
padding: 0px;
|
|
}
|
|
|
|
|
|
input#Liter{
|
|
max-width: 100%;
|
|
}
|
|
.sp-liter {
|
|
padding: -4px 10px;
|
|
width: 70px !important;
|
|
font-size: 13px;
|
|
display: block;
|
|
}
|
|
.td-col-qty {
|
|
padding: 1px 0px 1px 0px !important;
|
|
}
|
|
|
|
.col-line{
|
|
width: 25px;
|
|
}
|
|
.col-left{
|
|
}
|
|
|
|
.col-second{
|
|
width: 20px;
|
|
|
|
padding-left: 5px !important;
|
|
text-align: center;
|
|
}
|
|
.col-third{
|
|
padding-left: 5px !important;
|
|
}
|
|
|
|
|
|
|
|
|
|
.input-colour-bar{
|
|
border: 1px solid #b5b5b5;
|
|
border-radius: 3px;
|
|
padding: 2px 10px !important;
|
|
width: 50px;
|
|
}
|
|
.level-line{
|
|
height: 25px;
|
|
width: 20px;
|
|
display: block;
|
|
}
|
|
.colour-bar-red{
|
|
background-color: var(--red-color);
|
|
border: 1px solid var(--red-color);
|
|
color: #fff;
|
|
}
|
|
|
|
.colour-bar-blue{
|
|
background-color: var(--blue-color);
|
|
border: 1px solid var(--blue-color);
|
|
color: #fff;
|
|
|
|
}
|
|
.colour-bar-green{
|
|
background-color: var(--green-color);
|
|
border: 1px solid var(--green-color);
|
|
color: #fff;
|
|
}
|
|
.colour-bar-yellow{
|
|
background-color: var(--yellow-color);
|
|
border: 1px solid var(--yellow-color);
|
|
color: #fff;
|
|
}
|
|
.colour-bar-orange{
|
|
background-color: var(--orange-color);
|
|
border: 1px solid var(--orange-color);
|
|
color: #fff;
|
|
}
|
|
#sidebar-map .container-chk {
|
|
position: relative;
|
|
padding-left: 31px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
#sidebar-map .checkmark {
|
|
position: absolute;
|
|
top: -4px;
|
|
left: 0;
|
|
height: 25px;
|
|
width: 25px;
|
|
background-color: #ffffff;
|
|
border:1px solid #558B2F;
|
|
}
|
|
#sidebar-map .container-chk input:checked ~ .checkmark {
|
|
background-color: var(--color-primary);
|
|
}
|
|
#sidebar-map .container-chk .checkmark:after {
|
|
left: 8px;
|
|
top: 2px;
|
|
width: 8px;
|
|
height: 14px;
|
|
border: solid white;
|
|
border-width: 0 3px 3px 0;
|
|
-webkit-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
|
|
|
|
/*Line bar */
|
|
|
|
/* Create a custom checkbox */
|
|
.box-chk .checkmark {
|
|
position: absolute;
|
|
top: -12px;
|
|
left: 0px;
|
|
height: 25px;
|
|
width: 25px;
|
|
background-color: #ffffff;
|
|
border: 1px solid #558B2F;
|
|
}
|
|
.box-chk .container-chk {
|
|
margin-right: 4px;
|
|
}
|
|
/* On mouse-over, add a grey background color */
|
|
.box-chk .container-chk:hover input ~ .checkmark {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
/* When the checkbox is checked, add a blue background */
|
|
.box-chk .container-chk input:checked ~ .checkmark {
|
|
background-color: var(--color-primary);
|
|
}
|
|
|
|
/* Create the checkmark/indicator (hidden when not checked) */
|
|
.box-chk .checkmark:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
|
|
/* Show the checkmark when checked */
|
|
.box-chk .container-chk input:checked ~ .checkmark:after {
|
|
display: block;
|
|
}
|
|
|
|
/* Style the checkmark/indicator */
|
|
.box-chk .container-chk .checkmark:after {
|
|
left: 8px;
|
|
top: 2px;
|
|
width: 8px;
|
|
height: 14px;
|
|
border: solid white;
|
|
border-width: 0 3px 3px 0;
|
|
-webkit-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
|
|
/*Line bar */
|
|
|
|
|
|
@media (max-width: 640px) {
|
|
.modal-dialog {
|
|
width:300px !important;
|
|
margin: 30px auto !important;
|
|
}
|
|
}
|
|
|
|
.map-grid-layout-col-3 {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
gap: .3rem;
|
|
}
|
|
@media (min-width: 300px) {
|
|
.map-grid-layout-col-3 { grid-template-columns: repeat(3, 1fr); }
|
|
}
|
|
@media (max-width: 819px) {
|
|
.map-grid-layout-col-3 {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
gap: .3rem;
|
|
}
|
|
.map-grid-col-3 a{
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
#sidebar-map #Search {
|
|
width: 100%;
|
|
}
|
|
|
|
.footer {
|
|
font-size: 14px;
|
|
background-color: #77B469;
|
|
padding: 15px 0;
|
|
color: #fff;
|
|
position: fixed;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
z-index: 34;
|
|
} |