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

Close #25051
[referenced
answer](https://stackoverflow.com/questions/10813581/can-i-replace-the-expand-icon-of-the-details-element/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:

https://github.com/go-gitea/gitea/assets/17645053/63f69823-ef43-47d5-a518-544b5ea35ba6

---------

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

3 files changed, 41 insertions, 1 deletions

diff --git a/web_src/css/base.css b/web_src/css/base.css
index b352e6d98e..a35eccb26b 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -12,6 +12,7 @@
   /* backgrounds */
   --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
   --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
+  --octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
   /* non-color variables */
   --border-radius: 0.28571429rem;
   --opacity-disabled: 0.55;
@@ -534,7 +535,8 @@ a.label,
 }
 
 .ui.menu .dropdown.item:hover,
-.ui.menu a.item:hover {
+.ui.menu a.item:hover,
+.ui.menu details.item summary:hover {
   color: var(--color-text);
   background: var(--color-hover);
 }
diff --git a/web_src/css/index.css b/web_src/css/index.css
index 90ee41f524..689c3f4a29 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -9,6 +9,7 @@
 
 @import "./shared/issuelist.css";
 @import "./shared/repoorg.css";
+@import "./shared/settings.css";
 
 @import "./features/dropzone.css";
 @import "./features/gitgraph.css";
diff --git a/web_src/css/shared/settings.css b/web_src/css/shared/settings.css
new file mode 100644
index 0000000000..297b691a48
--- /dev/null
+++ b/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);
+}