https://wiki.infinf.info/index.php?action=history&feed=atom&title=%E6%A8%A1%E5%9D%97%3AMbox%2Fstyles.css 2026-04-13T21:19:37Z 本wiki上该页面的版本历史 MediaWiki 1.43.3 https://wiki.infinf.info/index.php?title=%E6%A8%A1%E5%9D%97:Mbox/styles.css&diff=1399&oldid=prev 2025-08-02T10:18:46Z

<p>创建页面，内容为“.mbox { position: relative; display: flex; flex-direction: column; margin-block: var(--space-md); background-color: var(--color-surface-1); border: var(--border-base); border-radius: var(--border-radius-medium); font-size: var(--font-size-small); line-height: var(--line-height-xx-small); } .mbox.mbox-high { background-color: var(--background-color-destructive-subtle); } .mbox.mbox-med { background-color: var(--background-color-warning-subtle); } .…”</p> <p><b>新页面</b></p><div>.mbox {<br /> position: relative;<br /> display: flex;<br /> flex-direction: column;<br /> margin-block: var(--space-md);<br /> background-color: var(--color-surface-1);<br /> border: var(--border-base);<br /> border-radius: var(--border-radius-medium);<br /> font-size: var(--font-size-small);<br /> line-height: var(--line-height-xx-small);<br /> }<br /> <br /> .mbox.mbox-high {<br /> background-color: var(--background-color-destructive-subtle);<br /> }<br /> <br /> .mbox.mbox-med {<br /> background-color: var(--background-color-warning-subtle);<br /> }<br /> <br /> .mbox-title,<br /> .mbox-text {<br /> padding: var(--space-sm) var(--space-md);<br /> }<br /> <br /> .mbox-title {<br /> display: flex;<br /> align-items: center;<br /> }<br /> <br /> .mbox-icon img {<br /> display: block;<br /> width: var(--font-size-small);<br /> height: auto;<br /> margin-right: var(--space-xs);<br /> opacity: var(--opacity-icon-base);<br /> filter: var(--filter-invert);<br /> }<br /> <br /> .mbox-text {<br /> position: absolute;<br /> top: 100%;<br /> left: 0;<br /> right: 0;<br /> z-index: 10;<br /> margin-inline: -1px;<br /> box-sizing: border-box;<br /> background-color: var(--color-surface-1);<br /> border-inline: var(--border-base);<br /> border-bottom: var(--border-base);<br /> border-bottom-left-radius: var(--border-radius-medium);<br /> border-bottom-right-radius: var(--border-radius-medium);<br /> box-shadow: var(--box-shadow-drop-xx-large);<br /> opacity: 0;<br /> visibility: hidden;<br /> }<br /> <br /> .mbox-text::before {<br /> content: &#039;&#039;;<br /> display: block;<br /> position: absolute;<br /> top: 0;<br /> left: var(--space-md);<br /> right: var(--space-md);<br /> height: var(--border-width-base);<br /> background: var(--border-color-subtle);<br /> }<br /> <br /> .mbox:hover {<br /> /* Merge with popup */<br /> border-bottom-left-radius: 0;<br /> border-bottom-right-radius: 0;<br /> box-shadow: var(--box-shadow-drop-xx-large);<br /> }<br /> <br /> .mbox:hover .mbox-text {<br /> opacity: 1;<br /> visibility: visible;<br /> }</div>

9Yan