jotoho/my-website
1
0
Fork 0
Code Issues Pull requests Activity

Overhaul CSS for details mechanism

Browse source
This commit is contained in:
Jonas Tobias Hopusch 2024-01-13 00:34:39 +01:00
parent 722f5cb03a
commit e25df060ae
Signed by: jotoho
GPG key ID: 913BDF1196DCF600
1 changed files with 34 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
static/css/general.css
View file

@ -164,23 +164,43 @@ th {
img {
display: block;
width: fit-content;
min-height: unset;
min-width: unset;
height: auto;
width: auto;
max-width: 100%;
height: fit-content;
max-height: 90vh;
max-height: unset;
margin-left: auto;
margin-right: auto;
object-fit: scale-down;
object-position: center;
}
details {
border-color: grey;
border-width: 1px;
border-style: dashed;
padding: calc(1rem / 3);
backdrop-filter: invert(100%);
padding: max(1mm, 1px);
width: min-content;
max-width: fit-content;
min-width: unset;
display: block;
color: black;
}
details > summary {
max-width: fit-content;
width: max-content;
display: block;
}
details:not([open]) > summary::after {
content: "Click to expand";
display: block;
max-width: fit-content;
font-weight: bold;
}
details[open] > summary {
margin-bottom: calc(1rem / 3);
margin-bottom: max(1mm, 1px);
}
#licenseimg {
@ -232,8 +252,8 @@ details[open] > summary {
border-color: white;
}
.black-white-svg {
filter: invert(100%);
details {
color: black;
}
}
@ -256,4 +276,8 @@ details[open] > summary {
th {
border-color: black;
}
details {
color: white;
}
}