Template:Documentation/styles.css

.documentation { margin: 1.6rem 0; padding: 1.2rem; display: flex; flex-direction: column; font-size: 0.875rem; box-sizing: border-box; border: 1px solid; border-color: var( --border-color-base ); border-radius: 12px; background-color: var( --background-color-dp-04 ); box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.06); }

.documentation-header { margin-top: 0; margin-bottom: 0.8rem; line-height: 1.2; font-size: 1.25rem; color: var( --color-base--emphasized ); font-weight: 600; }

.documentation-subheader { margin: -0.6rem 0 1.6rem 0; color: var( --color-base--subtle ); font-size: 0.825rem; }

.documentation-links { float: right; margin: 0.3rem 0; font-size: 0.875rem; font-weight: 400; font-family: monospace; }

/** * Tooltip styles used by DependencyList, * shouldn't be here but it is only used here anyways */ .hatnote-container { position: relative; }

.tooltip-trigger { padding: 0.2rem 0.5rem; margin-right: 2px; color: white; background: var( --color-primary ); border-radius: 100px; }

.tooltip-trigger:hover { background: var( --color-primary--hover ); }

.tooltip-content { position: absolute; z-index: 1; right: 0; padding: 15px; border: 1px solid; border-color: var( --border-color-base ); border-radius: 8px; background: var( --background-color-dp-08 ); box-shadow: 0 14px 28px rgba( 0, 0, 0, 0.06 ), 0 10px 10px rgba( 0, 0, 0, 0.06 ); visibility: hidden; }

.tooltip-content > ol { margin-top: 0; margin-left: 1.2rem; }

.tooltip-content:hover, .tooltip-trigger:hover + .tooltip-content { visibility: visible; }