Mudanças entre as edições de "Predefinição:Teste/styles.css"

De Wiki Gla
Ir para navegação Ir para pesquisar
Etiqueta: Revertido
Etiqueta: Revertido
Linha 1: Linha 1:
.news-grid {
.map-wrapper {
   display: flex;
   position: relative;
   flex-wrap: wrap;
   display: inline-block;
  gap: 16px;
  margin-top: 12px;
}
}


.news-card {
.map-wrapper img {
  background-color: #1f1f1f;
   display: block;
  color: white;
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
   display: flex;
  flex-direction: column;
}
 
.news-card img {
   width: 100%;
   width: 100%;
   height: auto;
   height: auto;
  display: block;
}
.news-content {
  padding: 10px 12px;
}
}


.news-title {
.map-point {
   font-weight: bold;
   position: absolute;
   font-size: 14px;
  width: 16px;
   margin-bottom: 4px;
  height: 16px;
  border-radius: 50%;
   background: rgba(255, 0, 0, 0.8);
  cursor: pointer;
  transform: translate(-50%, -50%);
   box-shadow: 0 0 2px #000;
}
}


.news-sub {
.map-point .tooltip {
  display: none;
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
   font-size: 12px;
   font-size: 12px;
   color: #ccc;
   white-space: nowrap;
  z-index: 10;
}
}


/* Responsivo */
.map-point:hover .tooltip {
@media screen and (min-width: 600px) {
   display: block;
  .news-card {
    flex: 1 1 calc(50% - 8px);
  }
}
 
@media screen and (min-width: 1000px) {
   .news-card {
    flex: 1 1 calc(50% - 8px); /* se quiser 3 cards, troca pra 33.3% */
  }
}
}

Edição das 22h02min de 5 de junho de 2025

.map-wrapper {
  position: relative;
  display: inline-block;
}

.map-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

.map-point {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 0, 0, 0.8);
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 2px #000;
}

.map-point .tooltip {
  display: none;
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 10;
}

.map-point:hover .tooltip {
  display: block;
}