Visual diferente para o bloco de detalhes

Dev
1

Tentei obter um visual semelhante ao que uma empresa de mídia finlandesa usa.

A captura de tela diz o suficiente, eu acho:

IMG_3465
IMG_34651306×887 166 KB

Eu só tenho habilidades básicas para manipular CSS e não tenho certeza se isso pode ser feito (facilmente) com CSS. Mas minha primeira tentativa foi… bem, não muito boa.

Isso eu usei (os comentários são para mim, é claro)

/*- Estilo personalizado para o elemento details - */
/* Substitui o plano de fundo e a aparência do botão */
summary {
  background-color: #f5f5f5; /* Cor de fundo */
  border: 1px solid #d8d8d8; /* Borda */
  padding: 10px; /* Preenchimento */
  border-radius: 5px; /* Cantos arredondados */
  cursor: pointer; /* Estilo do cursor */
  display: flex; /* Uso de Flexbox */
  justify-content: space-between; /* Alinhamento */
  align-items: center; /* Alinhamento ao centro */
}
summary:hover {
  background-color: #eaeaea;
}
summary::marker {
  display: none; /* Remove o marcador de lista padrão */
}
summary::after {
  content: '⮟'; /* Adiciona uma seta */
  font-size: 20px; /* Tamanho da seta */
}

/*- Estilo personalizado para o conteúdo do elemento details - */
details[open] summary::after {
  content: '⮝'; /* Muda a seta para cima ao abrir */
}
details {
  margin-bottom: 10px; /* Margem para o bloco */
}
details > div {
  padding: 10px; /* Preenchimento para o conteúdo */
}

Alguns eu fiz sozinho e outros são sugestões do GPT.

Ideias?

2

Olá @Jagster :wave:

Eu fiz um componente de tema para isso… :tada:

3

Você é incrível :+1: E agora vou investigar o que diabos você fez.

Obrigado!

6

Primeiro, fiz uma coisa de “hello world” usando Visual Basic há cerca de 20 anos. E ajustei alguns plugins do WordPress usando o método de tentativa e erro, e uma vez consegui alterar todas as permissões de propriedade no meu VPS, começando pela raiz.

Essa ótima solução não segue mais o [details .. open]. Conectado a isso Details block doesn’t obey open, eu acho.

O problema vem desta parte:


cookedDetails.forEach((details) => {
            details.setAttribute("open", "");

Por quê? Porque é semelhante a isto do Discourse :joy:

expect(cooked_html).to match_html <<~HTML
      <details open="">
      <summary></summary>
        <p>bar</p>
      </details>