gitea/web_src/css/shared/settings.css

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);
}
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> 2023-06-07 05:49:48 +03:00			`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;`
add `stylelint-stylistic` (#25285) Add [stylelint-stylistic](https://github.com/elirasza/stylelint-stylistic), autofix all issues with two manual tweaks. This restores all the stylistic rules removed in Stylelint 15. 2023-06-17 16:20:32 +03:00			`content: "";`
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> 2023-06-07 05:49:48 +03:00			`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);`
			`}`