58536093b3
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>
38 lines
947 B
CSS
38 lines
947 B
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);
|
|
}
|