MediaWiki:Gadget-common-ShowMore.css

/* Show more */ .toggle-content-text+.toggle-content { --size: 30px; --margin: calc(var(--size) * 0.1);

border: none; outline: none; display: block; opacity: 0.9; font-size: 16px; font-weight: 500; cursor: pointer; margin: var(--margin) 0 var(--margin) calc(50% - var(--size) / 2); height: var(--size); padding: 0 0 0 var(--size); background-position: left center; background-color: transparent; background-repeat: no-repeat; background-size: var(--size) var(--size); /* minus sign */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E"); }

.toggle-content-text.hidden+.toggle-content { /* plus sign */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E"); }

/* Handle transitions */ .toggle-content-text { /* fade out, then expand */ transition: font-size .3s, opacity .15s .3s; }

.toggle-content-text.hidden { font-size: 0; opacity: 0; /* fade out, then shrink */ transition: opacity .15s, font-size .3s .15s; }

.toggle-content-text.hidden.initial { font-size: 0; opacity: 0; transition: none; }

/* Hide expand button when JS isn't active */ .toggle-content.no-js-hidden { display: none; }

.toggle-content>* { display: none; }

/* Handle more/less text */ @media (hover: hover) and (pointer: fine) { .toggle-content>* { margin-left: 5px; }

.toggle-content-text.hidden+.toggle-content:hover>.more, .toggle-content-text:not(.hidden)+.toggle-content:hover>.less { display: inline; vertical-align: middle; } }