I tried achieve similar look than one finnish media company uses.
Screenshot tells enough, I reckon:
I have only basic skill manipulate CSS, and I’m not sure if that can be done (easily) by CSS. But my first try went… well, not that good.
This I used (comment are for me, of course)
/*- Mukautettu tyyli details-elementille - */
/* Korvaa painikkeen taustakuva ja ulkoasu */
summary {
background-color: #f5f5f5; /* Taustaväri */
border: 1px solid #d8d8d8; /* Reunaviiva */
padding: 10px; /* Sisennys */
border-radius: 5px; /* Pyöristetyt kulmat */
cursor: pointer; /* Kursorin tyyli */
display: flex; /* Flexbox käyttö */
justify-content: space-between; /* Tasaus */
align-items: center; /* Kohdistus keskelle */
}
summary:hover {
background-color: #eaeaea;
}
summary::marker {
display: none; /* Poista oletus listamerkki */
}
summary::after {
content: '⮟'; /* Lisää nuoli */
font-size: 20px; /* Nuolen koko */
}
/*- Mukautettu tyyli details-elementin sisällölle - */
details[open] summary::after {
content: '⮝'; /* Muuta nuoli ylös avatessa */
}
details {
margin-bottom: 10px; /* Väliaika lohkoon */
}
details > div {
padding: 10px; /* Sisennys sisältöön */
}
Some I made by myself and some are suggestions from GPT.
Ideas?
And now I’ll dig what the heck you did.