Overhaul CSS for details mechanism

static/css/general.css

@@ -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;
+  }
 }