.quake-container {
display: flex;
flex-wrap: wrap;
position: relative;
}
#map {
flex: 1;
height: 80vh;
min-width: 300px;
}
.list-container {
background-color: #fff;
padding: 1rem;
width: 100%;
}
.list-header {
font-size: 1.375rem;
font-weight: 700;
margin-bottom: .75rem;
}
.list-item {
border: .0625rem solid #ddd;
border-radius: .75rem;
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.1);
cursor: pointer;
margin-bottom: .75rem;
padding: .625rem 1rem;
transition: background-color 0.3s;
}
.list-item:hover {
background: #dcefff;
}
.list-item.selected {
background-color: #dcefff;
border-color: #007bff;
}
.list-item p {
font-size: .9375rem;
margin: .0625rem 0;
} .quake-icon {
animation: pulse 1.5s infinite ease-in-out;
background-color: rgba(255, 69, 0, 0.8); border-radius: 50%;
height: 1rem;
position: relative;
width: 1rem;
} .quake-icon::after {
animation: ripple 1.5s infinite ease-in-out;
border: .125rem solid rgba(255, 69, 0, 0.5);
border-radius: 50%;
content: '';
height: 1rem;
left: 0;
position: absolute;
top: 0;
width: 1rem;
}
@media (min-width: 1024px) {
.quake-container {
flex-direction: row;
}
.list-container {
border-right: .0625rem solid #ddd;
height: 75.25vh;
left: 0;
overflow-y: auto;
position: absolute;
top: 0;
width: 18.5rem;
z-index: 1000;
}
#map {
margin-left: 20.5rem;
}
} @keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
} @keyframes ripple {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(3);
opacity: 0;
}
}
.quake-widget-shakemap {
block-size: auto;
cursor: zoom-in;
margin-block: -1.125rem -.25rem;
max-inline-size: 100%;
}
.quake-widget-time {
font-size: .9375rem;
font-weight: 700;
}
.quake-widget-detail {
align-items: center;
display: flex;
line-height: 1.375;
margin-block-end: .875rem;
}
.quake-widget-detail-icon {
height: 25px;
margin-inline-end: .875rem;
width: 25px;
}
.quake-widget-detail-name {
font-size: .8125rem;
}
.quake-widget-detail-value {
font-size: .9375rem;
font-weight: 700;
}
.quake-widget-more-link {
display: block;
font-weight: 700;
margin-block-start: 1.75rem;
text-decoration: underline;
}
.lightbox-shakemap {
background-color: rgba(0, 0, 0, 0.8); display: none; height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
.lightbox-content-shakemap {
display: block;
margin: auto;
max-height: 80%;
max-width: 90%;
position: relative;
top: 10%;
}
.close-shakemap {
color: #fff;
cursor: pointer;
font-size: 1.875rem;
font-weight: bold;
position: absolute;
right: 1.875rem;
top: 1.25rem;
}
.next-prev {
display: flex;
justify-content: space-between;
}
.prev-page,
.next-page {
text-align: center;
}
.arrow {
block-size: 4rem;
border-radius: 4rem;
max-inline-size: 100%;
}
.arrow:hover {
box-shadow: 1px 5px 13px -3px rgba(0,0,0,0.4);
}
.spacer {
display: inline-block;
visibility: hidden;
width: 4rem;
}