Update github-admonitions.css #1
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Use CSS var to ease the changes
Author
| You could use these icons <!-- Circle Alert --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14Zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z"/> <path d="M7 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 5Z"/> </svg> <!-- Square Alert --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <path d="M4.5.1 5 0h6l.4.1 4.4 4.4.1.4V11l-.1.4-4.4 4.4-.4.1H5l-.4-.1-4.4-4.4L0 11V5l.1-.4L4.5.1Zm.6.9L1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1Z"/> <path d="M7 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 5Z"/> </svg> <!-- Box Alert --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12ZM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z"/> <path d="M7 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 5Z"/> </svg> <!-- Triangle Alert --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <path d="M8 2h.1L15 13.8v.2l-.1.1H1a.2.2 0 0 1 0-.3L7.8 2.1Zm1-.4a1.1 1.1 0 0 0-2 0L.2 13.2c-.5.8 0 1.8 1 1.8h13.7c.8 0 1.4-1 1-1.8l-7-11.6Z"/> <path d="M7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 6Z"/> </svg> <!-- Lightbulb --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <path d="M2 6a6 6 0 1 1 10.2 4.3 2 2 0 0 0-.5.6l-.7 1.8a.5.5 0 0 1-.5.3.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.2.4a1 1 0 0 1-1 .6H6.7a1 1 0 0 1-.9-.6l-.2-.4a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.5-.3l-.7-1.8a2 2 0 0 0-.5-.6A6 6 0 0 1 2 6Zm6-5a5 5 0 0 0-3.5 8.6c.3.2.5.6.7 1l.6 1.4h4.4l.6-1.5.7-1A5 5 0 0 0 8 1Z"/> </svg>This does render the following :  CSS values : .md-admonition { padding: .5em; display: flex; flex-direction: column; gap: .5em; border-left: .25em solid; border-color: var(--adminition-color); margin-bottom: 2rem; background: white; > * { margin-block: 0; } a { color: var(--adminition-color); } } .md-admonition-label { padding-left: 1.5em; font-weight: 600; background-repeat: no-repeat; background-position-y: 50%; background-image: var(--adminition-icon, currentColor); color: var(--adminition-color, currentColor); } .md-admonition :last-child { margin-bottom: 0; } .md-admonition.md-admonition-note { --adminition-color: #0969da; --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230969da'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14Zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z'/%3E%3Cpath d='M7 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 5Z'/%3E%3C/svg%3E"); } .md-admonition.md-admonition-tip { --adminition-color: #1a7f37; --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a7f37'%3E%3Cpath d='M2 6a6 6 0 1 1 10.2 4.3 2 2 0 0 0-.5.6l-.7 1.8a.5.5 0 0 1-.5.3.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.2.4a1 1 0 0 1-1 .6H6.7a1 1 0 0 1-.9-.6l-.2-.4a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.5-.3l-.7-1.8a2 2 0 0 0-.5-.6A6 6 0 0 1 2 6Zm6-5a5 5 0 0 0-3.5 8.6c.3.2.5.6.7 1l.6 1.4h4.4l.6-1.5.7-1A5 5 0 0 0 8 1Z'/%3E%3C/svg%3E"); } .md-admonition.md-admonition-important { --adminition-color: #8250df; --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238250df'%3E%3Cpath d='M4.5.1 5 0h6l.4.1 4.4 4.4.1.4V11l-.1.4-4.4 4.4-.4.1H5l-.4-.1-4.4-4.4L0 11V5l.1-.4L4.5.1Zm.6.9L1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1Z'/%3E%3Cpath d='M7 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 5Z'/%3E%3C/svg%3E"); } .md-admonition.md-admonition-caution { --adminition-color: #d1242f; --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d1242f'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12ZM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z'/%3E%3Cpath d='M7 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 5Z'/%3E%3C/svg%3E"); } .md-admonition.md-admonition-warning { --adminition-color: #9a6700; --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239a6700'%3E%3Cpath d='M8 2h.1L15 13.8v.2l-.1.1H1a.2.2 0 0 1 0-.3L7.8 2.1Zm1-.4a1.1 1.1 0 0 0-2 0L.2 13.2c-.5.8 0 1.8 1 1.8h13.7c.8 0 1.4-1 1-1.8l-7-11.6Z'/%3E%3Cpath d='M7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 6Z'/%3E%3C/svg%3E"); }Demo page <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Admonition Preview</title> <style> body { font-family: system-ui, sans-serif; padding: 2rem; background: #f4f4f4; } .md-admonition { padding: .5em; display: flex; flex-direction: column; gap: .5em; border-left: .25em solid; border-color: var(--adminition-color); margin-bottom: 2rem; background: white; > * { margin-block: 0; } a { color: var(--adminition-color); } } .md-admonition-label { padding-left: 1.5em; font-weight: 600; background-repeat: no-repeat; background-position-y: 50%; background-image: var(--adminition-icon, currentColor); color: var(--adminition-color, currentColor); } .md-admonition :last-child { margin-bottom: 0; } .md-admonition.md-admonition-note { --adminition-color: #0969da; --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230969da'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14Zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z'/%3E%3Cpath d='M7 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 5Z'/%3E%3C/svg%3E"); } .md-admonition.md-admonition-tip { --adminition-color: #1a7f37; --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a7f37'%3E%3Cpath d='M2 6a6 6 0 1 1 10.2 4.3 2 2 0 0 0-.5.6l-.7 1.8a.5.5 0 0 1-.5.3.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.2.4a1 1 0 0 1-1 .6H6.7a1 1 0 0 1-.9-.6l-.2-.4a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.5-.3l-.7-1.8a2 2 0 0 0-.5-.6A6 6 0 0 1 2 6Zm6-5a5 5 0 0 0-3.5 8.6c.3.2.5.6.7 1l.6 1.4h4.4l.6-1.5.7-1A5 5 0 0 0 8 1Z'/%3E%3C/svg%3E"); } .md-admonition.md-admonition-important { --adminition-color: #8250df; --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238250df'%3E%3Cpath d='M4.5.1 5 0h6l.4.1 4.4 4.4.1.4V11l-.1.4-4.4 4.4-.4.1H5l-.4-.1-4.4-4.4L0 11V5l.1-.4L4.5.1Zm.6.9L1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1Z'/%3E%3Cpath d='M7 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 5Z'/%3E%3C/svg%3E"); } .md-admonition.md-admonition-caution { --adminition-color: #d1242f; --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d1242f'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12ZM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z'/%3E%3Cpath d='M7 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 5Z'/%3E%3C/svg%3E"); } .md-admonition.md-admonition-warning { --adminition-color: #9a6700; --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239a6700'%3E%3Cpath d='M8 2h.1L15 13.8v.2l-.1.1H1a.2.2 0 0 1 0-.3L7.8 2.1Zm1-.4a1.1 1.1 0 0 0-2 0L.2 13.2c-.5.8 0 1.8 1 1.8h13.7c.8 0 1.4-1 1-1.8l-7-11.6Z'/%3E%3Cpath d='M7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 6Z'/%3E%3C/svg%3E"); } </style> </head> <body> <div class="md-admonition md-admonition-note"> <div class="md-admonition-label">Note</div> <p>This is a note with a <a href="#">circular alert</a> icon.</p> </div> <div class="md-admonition md-admonition-tip"> <div class="md-admonition-label">Tip</div> <p>This is a tip with a <a href="#">light bulb</a> icon.</p> </div> <div class="md-admonition md-admonition-important"> <div class="md-admonition-label">Important</div> <p>This is important content with a <a href="#">square alert</a> icon.</p> </div> <div class="md-admonition md-admonition-caution"> <div class="md-admonition-label">Caution</div> <p>This caution message uses the <a href="#">box-style alert</a> icon.</p> </div> <div class="md-admonition md-admonition-warning"> <div class="md-admonition-label">Warning</div> <p>This warning is styled with the <a href="#">triangle alert</a> icon.</p> </div> </body> </html> |
Member
| Thanks Simon, but I'm a bit confused - should we update the css file to the value you show in #1 (comment)? |
Author
| Wait, it was for the ux website ? 🥹 |
Member
| It was, but I like that you added here. I was just trying to understand why the code changed in the PR was different from your comment. |
javiereguiluz approved these changes Sep 9, 2025
| padding-left: 1.5em; | ||
| background-repeat: no-repeat; | ||
| background-position-y: 50%; | ||
| color: var(--adminition-color, currentColor); |
There was a problem hiding this comment.
There's a minor typo in the var name:
--adminition-color -> --admonition-color
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code. Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes. Only one suggestion per line can be applied in a batch. Add this suggestion to a batch that can be applied as a single commit. Applying suggestions on deleted lines is not supported. You must change the existing code in this line in order to create a valid suggestion. Outdated suggestions cannot be applied. This suggestion has been applied or marked resolved. Suggestions cannot be applied from pending reviews. Suggestions cannot be applied on multi-line comments. Suggestions cannot be applied while the pull request is queued to merge. Suggestion cannot be applied right now. Please check back later.
Use CSS var to ease the changes