Add details summary for vertical menus in settings to allow toggling (#25098)

Close #25051
[referenced
answer](69722686 (69722686))
for marker overwrite. One limitation is that fomantic does not have
hover and active effects for the vertical submenu
([reference](https://fomantic-ui.com/collections/menu.html#sub-menu)).
And we might need to overwrite some styles if hover and active effects
are needed.

Update:
Used `data:image/svg` instead of `marker` content. And adjusted styles
for hover effect.

Take admin settings as an example:

63f69823-ef43-47d5-a518-544b5ea35ba6

---------

Co-authored-by: silverwind <me@silverwind.io>

web_src/css/shared/settings.css

@@ -0,0 +1,37 @@
+details.toggleable-item {
+  user-select: none !important;
+  padding: 0 !important;
+}
+
+details.toggleable-item .menu {
+  margin: 4px 0 10px !important;
+}
+
+details.toggleable-item summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.92857143em 1.14285714em;
+}
+
+details.toggleable-item summary::marker, /* Chrome, Edge, Firefox */
+details.toggleable-item summary::-webkit-details-marker /* Safari */ {
+  display: none;
+}
+
+details.toggleable-item summary::after {
+  transition: transform 0.25s ease;
+  content: '';
+  width: 14px;
+  height: 14px;
+  mask-size: cover;
+  -webkit-mask-size: cover;
+  mask-image: var(--octicon-chevron-right);
+  -webkit-mask-image: var(--octicon-chevron-right);
+  background: currentcolor;
+  border: 1px solid var(--color-body); /* workaround https://bugzilla.mozilla.org/show_bug.cgi?id=1671784 */
+}
+
+details.toggleable-item[open] summary::after {
+  transform: rotate(90deg);
+}