Pinned Loading

1. source-serif source-serif

   :host { --tooltip-top: var(--tool-tip-position-top, 0); --tooltip-left: var(--tool-tip-position-left, 0); padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important; font: var(--text-body-shorthand-small); color: var(--tooltip-fgColor, var(--fgColor-onEmphasis)) !important; text-align: center; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-wrap: break-word; white-space: pre; background: var(--tooltip-bgColor, var(--bgColor-emphasis)) !important; border-radius: var(--borderRadius-medium); border: 0 !important; opacity: 0; max-width: min(var(--overlay-width-small), 100vw); word-wrap: break-word; white-space: normal; width: max-content !important; inset: var(--tooltip-top) auto auto var(--tooltip-left) !important; overflow: visible !important; text-wrap: balance; } :host(:is(.tooltip-n, .tooltip-nw, .tooltip-ne)) { --tooltip-top: calc(var(--tool-tip-position-top, 0) - var(--overlay-offset, 0.25rem)); --tooltip-left: var(--tool-tip-position-left); } :host(:is(.tooltip-s, .tooltip-sw, .tooltip-se)) { --tooltip-top: calc(var(--tool-tip-position-top, 0) + var(--overlay-offset, 0.25rem)); --tooltip-left: var(--tool-tip-position-left); } :host(.tooltip-w) { --tooltip-top: var(--tool-tip-position-top); --tooltip-left: calc(var(--tool-tip-position-left, 0) - var(--overlay-offset, 0.25rem)); } :host(.tooltip-e) { --tooltip-top: var(--tool-tip-position-top); --tooltip-left: calc(var(--tool-tip-position-left, 0) + var(--overlay-offset, 0.25rem)); } :host:after{ position: absolute; display: block; right: 0; left: 0; height: var(--overlay-offset, 0.25rem); content: ""; } :host(.tooltip-s):after, :host(.tooltip-se):after, :host(.tooltip-sw):after { bottom: 100% } :host(.tooltip-n):after, :host(.tooltip-ne):after, :host(.tooltip-nw):after { top: 100%; } @keyframes tooltip-appear { from { opacity: 0; } to { opacity: 1; } } :host(:popover-open), :host(:popover-open):before { animation-name: tooltip-appear; animation-duration: .1s; animation-fill-mode: forwards; animation-timing-function: ease-in; } :host(.\:popover-open) { animation-name: tooltip-appear; animation-duration: .1s; animation-fill-mode: forwards; animation-timing-function: ease-in; } @media (forced-colors: active) { :host { outline: solid 1px transparent; } :host:before { display: none; } }

   Public

   Typeface for setting text in many sizes, weights, and languages. Designed to complement Source Sans.

   CSS 2.3k 165

2. source-sans source-sans

   :host { --tooltip-top: var(--tool-tip-position-top, 0); --tooltip-left: var(--tool-tip-position-left, 0); padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important; font: var(--text-body-shorthand-small); color: var(--tooltip-fgColor, var(--fgColor-onEmphasis)) !important; text-align: center; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-wrap: break-word; white-space: pre; background: var(--tooltip-bgColor, var(--bgColor-emphasis)) !important; border-radius: var(--borderRadius-medium); border: 0 !important; opacity: 0; max-width: min(var(--overlay-width-small), 100vw); word-wrap: break-word; white-space: normal; width: max-content !important; inset: var(--tooltip-top) auto auto var(--tooltip-left) !important; overflow: visible !important; text-wrap: balance; } :host(:is(.tooltip-n, .tooltip-nw, .tooltip-ne)) { --tooltip-top: calc(var(--tool-tip-position-top, 0) - var(--overlay-offset, 0.25rem)); --tooltip-left: var(--tool-tip-position-left); } :host(:is(.tooltip-s, .tooltip-sw, .tooltip-se)) { --tooltip-top: calc(var(--tool-tip-position-top, 0) + var(--overlay-offset, 0.25rem)); --tooltip-left: var(--tool-tip-position-left); } :host(.tooltip-w) { --tooltip-top: var(--tool-tip-position-top); --tooltip-left: calc(var(--tool-tip-position-left, 0) - var(--overlay-offset, 0.25rem)); } :host(.tooltip-e) { --tooltip-top: var(--tool-tip-position-top); --tooltip-left: calc(var(--tool-tip-position-left, 0) + var(--overlay-offset, 0.25rem)); } :host:after{ position: absolute; display: block; right: 0; left: 0; height: var(--overlay-offset, 0.25rem); content: ""; } :host(.tooltip-s):after, :host(.tooltip-se):after, :host(.tooltip-sw):after { bottom: 100% } :host(.tooltip-n):after, :host(.tooltip-ne):after, :host(.tooltip-nw):after { top: 100%; } @keyframes tooltip-appear { from { opacity: 0; } to { opacity: 1; } } :host(:popover-open), :host(:popover-open):before { animation-name: tooltip-appear; animation-duration: .1s; animation-fill-mode: forwards; animation-timing-function: ease-in; } :host(.\:popover-open) { animation-name: tooltip-appear; animation-duration: .1s; animation-fill-mode: forwards; animation-timing-function: ease-in; } @media (forced-colors: active) { :host { outline: solid 1px transparent; } :host:before { display: none; } }

   Public

   Sans serif font family for user interface environments

   CSS 3.7k 245

3. source-code-pro source-code-pro

   :host { --tooltip-top: var(--tool-tip-position-top, 0); --tooltip-left: var(--tool-tip-position-left, 0); padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important; font: var(--text-body-shorthand-small); color: var(--tooltip-fgColor, var(--fgColor-onEmphasis)) !important; text-align: center; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-wrap: break-word; white-space: pre; background: var(--tooltip-bgColor, var(--bgColor-emphasis)) !important; border-radius: var(--borderRadius-medium); border: 0 !important; opacity: 0; max-width: min(var(--overlay-width-small), 100vw); word-wrap: break-word; white-space: normal; width: max-content !important; inset: var(--tooltip-top) auto auto var(--tooltip-left) !important; overflow: visible !important; text-wrap: balance; } :host(:is(.tooltip-n, .tooltip-nw, .tooltip-ne)) { --tooltip-top: calc(var(--tool-tip-position-top, 0) - var(--overlay-offset, 0.25rem)); --tooltip-left: var(--tool-tip-position-left); } :host(:is(.tooltip-s, .tooltip-sw, .tooltip-se)) { --tooltip-top: calc(var(--tool-tip-position-top, 0) + var(--overlay-offset, 0.25rem)); --tooltip-left: var(--tool-tip-position-left); } :host(.tooltip-w) { --tooltip-top: var(--tool-tip-position-top); --tooltip-left: calc(var(--tool-tip-position-left, 0) - var(--overlay-offset, 0.25rem)); } :host(.tooltip-e) { --tooltip-top: var(--tool-tip-position-top); --tooltip-left: calc(var(--tool-tip-position-left, 0) + var(--overlay-offset, 0.25rem)); } :host:after{ position: absolute; display: block; right: 0; left: 0; height: var(--overlay-offset, 0.25rem); content: ""; } :host(.tooltip-s):after, :host(.tooltip-se):after, :host(.tooltip-sw):after { bottom: 100% } :host(.tooltip-n):after, :host(.tooltip-ne):after, :host(.tooltip-nw):after { top: 100%; } @keyframes tooltip-appear { from { opacity: 0; } to { opacity: 1; } } :host(:popover-open), :host(:popover-open):before { animation-name: tooltip-appear; animation-duration: .1s; animation-fill-mode: forwards; animation-timing-function: ease-in; } :host(.\:popover-open) { animation-name: tooltip-appear; animation-duration: .1s; animation-fill-mode: forwards; animation-timing-function: ease-in; } @media (forced-colors: active) { :host { outline: solid 1px transparent; } :host:before { display: none; } }

   Public

   Monospaced font family for user interface and coding environments

   CSS 20.4k 1.6k

4. source-han-serif source-han-serif

   :host { --tooltip-top: var(--tool-tip-position-top, 0); --tooltip-left: var(--tool-tip-position-left, 0); padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important; font: var(--text-body-shorthand-small); color: var(--tooltip-fgColor, var(--fgColor-onEmphasis)) !important; text-align: center; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-wrap: break-word; white-space: pre; background: var(--tooltip-bgColor, var(--bgColor-emphasis)) !important; border-radius: var(--borderRadius-medium); border: 0 !important; opacity: 0; max-width: min(var(--overlay-width-small), 100vw); word-wrap: break-word; white-space: normal; width: max-content !important; inset: var(--tooltip-top) auto auto var(--tooltip-left) !important; overflow: visible !important; text-wrap: balance; } :host(:is(.tooltip-n, .tooltip-nw, .tooltip-ne)) { --tooltip-top: calc(var(--tool-tip-position-top, 0) - var(--overlay-offset, 0.25rem)); --tooltip-left: var(--tool-tip-position-left); } :host(:is(.tooltip-s, .tooltip-sw, .tooltip-se)) { --tooltip-top: calc(var(--tool-tip-position-top, 0) + var(--overlay-offset, 0.25rem)); --tooltip-left: var(--tool-tip-position-left); } :host(.tooltip-w) { --tooltip-top: var(--tool-tip-position-top); --tooltip-left: calc(var(--tool-tip-position-left, 0) - var(--overlay-offset, 0.25rem)); } :host(.tooltip-e) { --tooltip-top: var(--tool-tip-position-top); --tooltip-left: calc(var(--tool-tip-position-left, 0) + var(--overlay-offset, 0.25rem)); } :host:after{ position: absolute; display: block; right: 0; left: 0; height: var(--overlay-offset, 0.25rem); content: ""; } :host(.tooltip-s):after, :host(.tooltip-se):after, :host(.tooltip-sw):after { bottom: 100% } :host(.tooltip-n):after, :host(.tooltip-ne):after, :host(.tooltip-nw):after { top: 100%; } @keyframes tooltip-appear { from { opacity: 0; } to { opacity: 1; } } :host(:popover-open), :host(:popover-open):before { animation-name: tooltip-appear; animation-duration: .1s; animation-fill-mode: forwards; animation-timing-function: ease-in; } :host(.\:popover-open) { animation-name: tooltip-appear; animation-duration: .1s; animation-fill-mode: forwards; animation-timing-function: ease-in; } @media (forced-colors: active) { :host { outline: solid 1px transparent; } :host:before { display: none; } }

   Public

   Source Han Serif | 思源宋体 | 思源宋體 | 思源宋體 香港 | 源ノ明朝 | 본명조

   Shell 9.5k 680

5. source-han-sans source-han-sans

   :host { --tooltip-top: var(--tool-tip-position-top, 0); --tooltip-left: var(--tool-tip-position-left, 0); padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important; font: var(--text-body-shorthand-small); color: var(--tooltip-fgColor, var(--fgColor-onEmphasis)) !important; text-align: center; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-wrap: break-word; white-space: pre; background: var(--tooltip-bgColor, var(--bgColor-emphasis)) !important; border-radius: var(--borderRadius-medium); border: 0 !important; opacity: 0; max-width: min(var(--overlay-width-small), 100vw); word-wrap: break-word; white-space: normal; width: max-content !important; inset: var(--tooltip-top) auto auto var(--tooltip-left) !important; overflow: visible !important; text-wrap: balance; } :host(:is(.tooltip-n, .tooltip-nw, .tooltip-ne)) { --tooltip-top: calc(var(--tool-tip-position-top, 0) - var(--overlay-offset, 0.25rem)); --tooltip-left: var(--tool-tip-position-left); } :host(:is(.tooltip-s, .tooltip-sw, .tooltip-se)) { --tooltip-top: calc(var(--tool-tip-position-top, 0) + var(--overlay-offset, 0.25rem)); --tooltip-left: var(--tool-tip-position-left); } :host(.tooltip-w) { --tooltip-top: var(--tool-tip-position-top); --tooltip-left: calc(var(--tool-tip-position-left, 0) - var(--overlay-offset, 0.25rem)); } :host(.tooltip-e) { --tooltip-top: var(--tool-tip-position-top); --tooltip-left: calc(var(--tool-tip-position-left, 0) + var(--overlay-offset, 0.25rem)); } :host:after{ position: absolute; display: block; right: 0; left: 0; height: var(--overlay-offset, 0.25rem); content: ""; } :host(.tooltip-s):after, :host(.tooltip-se):after, :host(.tooltip-sw):after { bottom: 100% } :host(.tooltip-n):after, :host(.tooltip-ne):after, :host(.tooltip-nw):after { top: 100%; } @keyframes tooltip-appear { from { opacity: 0; } to { opacity: 1; } } :host(:popover-open), :host(:popover-open):before { animation-name: tooltip-appear; animation-duration: .1s; animation-fill-mode: forwards; animation-timing-function: ease-in; } :host(.\:popover-open) { animation-name: tooltip-appear; animation-duration: .1s; animation-fill-mode: forwards; animation-timing-function: ease-in; } @media (forced-colors: active) { :host { outline: solid 1px transparent; } :host:before { display: none; } }

   Public

   Source Han Sans | 思源黑体 | 思源黑體 | 思源黑體 香港 | 源ノ角ゴシック | 본고딕

   Python 16.8k 1.4k

6. source-han-mono source-han-mono

   :host { --tooltip-top: var(--tool-tip-position-top, 0); --tooltip-left: var(--tool-tip-position-left, 0); padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed) !important; font: var(--text-body-shorthand-small); color: var(--tooltip-fgColor, var(--fgColor-onEmphasis)) !important; text-align: center; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-wrap: break-word; white-space: pre; background: var(--tooltip-bgColor, var(--bgColor-emphasis)) !important; border-radius: var(--borderRadius-medium); border: 0 !important; opacity: 0; max-width: min(var(--overlay-width-small), 100vw); word-wrap: break-word; white-space: normal; width: max-content !important; inset: var(--tooltip-top) auto auto var(--tooltip-left) !important; overflow: visible !important; text-wrap: balance; } :host(:is(.tooltip-n, .tooltip-nw, .tooltip-ne)) { --tooltip-top: calc(var(--tool-tip-position-top, 0) - var(--overlay-offset, 0.25rem)); --tooltip-left: var(--tool-tip-position-left); } :host(:is(.tooltip-s, .tooltip-sw, .tooltip-se)) { --tooltip-top: calc(var(--tool-tip-position-top, 0) + var(--overlay-offset, 0.25rem)); --tooltip-left: var(--tool-tip-position-left); } :host(.tooltip-w) { --tooltip-top: var(--tool-tip-position-top); --tooltip-left: calc(var(--tool-tip-position-left, 0) - var(--overlay-offset, 0.25rem)); } :host(.tooltip-e) { --tooltip-top: var(--tool-tip-position-top); --tooltip-left: calc(var(--tool-tip-position-left, 0) + var(--overlay-offset, 0.25rem)); } :host:after{ position: absolute; display: block; right: 0; left: 0; height: var(--overlay-offset, 0.25rem); content: ""; } :host(.tooltip-s):after, :host(.tooltip-se):after, :host(.tooltip-sw):after { bottom: 100% } :host(.tooltip-n):after, :host(.tooltip-ne):after, :host(.tooltip-nw):after { top: 100%; } @keyframes tooltip-appear { from { opacity: 0; } to { opacity: 1; } } :host(:popover-open), :host(:popover-open):before { animation-name: tooltip-appear; animation-duration: .1s; animation-fill-mode: forwards; animation-timing-function: ease-in; } :host(.\:popover-open) { animation-name: tooltip-appear; animation-duration: .1s; animation-fill-mode: forwards; animation-timing-function: ease-in; } @media (forced-colors: active) { :host { outline: solid 1px transparent; } :host:before { display: none; } }

   Public

   Source Han Mono | 思源等宽 | 思源等寬 | 思源等寬 香港 | 源ノ等幅 | 본모노

   1.3k 50