markdown-it-info/reference-styles/zenn-styles.css

The markdown-it plugin that enables easy creation of Qiita and Zenn-style admonition boxes within Markdown documents.

@font-face {
    /* 
        Material Symbols and Icons (https://fonts.google.com/icons)
        Copyright (c) Google LLC
        Licensed under the Apache License, Version 2.0 ("../fonts/LICENSE.txt")
    */
    font-family: 'Material Symbols and Icons';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/MaterialSymbolsOutlined_Filled-Regular.woff") format('woff');
}
.zenn-admonition {
    position: relative;
    margin: 1.5625em 0;
    padding: 0 1.2rem;
    border-radius: 4px;
    overflow: auto;
    color: rgb(76,73,68);
}

.zenn-admonition>p {
    margin-top: .8rem;
}

.zenn-admonition>.zenn-admonition-title {
    margin: 0 -1.2rem;
    padding: .8rem 1.2rem .8rem 3.6rem;
    font-weight: 700;
}

.zenn-admonition>.zenn-admonition-title:before {
    font-family: 'Material Symbols and Icons';
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 2rem;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    position: absolute;
    left: 1.2rem;
    font-size: 1.5rem;
    top: 0.65rem;
}

.zenn-admonition.info {
    border-left: .4rem solid rgb(235,255,228);
    background-color: rgb(235,255,228);
    border-left-color: rgb(235,255,228);
}

.zenn-admonition.info>.zenn-admonition-title {
    background-color: rgb(235,255,228);
    border-bottom-color: rgb(235,255,228);
}

.zenn-admonition.info>.zenn-admonition-title:before {
    color: rgb(102,202,27) ;
    content: "\e000";
}

.zenn-admonition.warn,
.zenn-admonition.warning {
    border-left: .4rem solid rgb(254,247,228);
    background-color: rgb(254,247,228);
    border-left-color: rgb(254,247,228);
}

.zenn-admonition.warn>.zenn-admonition-title,
.zenn-admonition.warning>.zenn-admonition-title {
    background-color: rgb(254,247,228);
    border-bottom-color: rgb(254,247,228);
}

.zenn-admonition.warn>.zenn-admonition-title:before,
.zenn-admonition.warning>.zenn-admonition-title:before {
    color: rgb(255,185,77);
    content: "\e000";
}

.zenn-admonition.alert {
    border-left: .4rem solid rgb(255,238,243);
    background-color: rgb(255,238,243);
    border-left-color: rgb(255,238,243);
}

.zenn-admonition.alert>.zenn-admonition-title {
    background-color: rgb(255,238,243);
    border-bottom-color: rgb(255,238,243);
}

.zenn-admonition.alert>.zenn-admonition-title:before {
    color: rgb(255,118,112);
    content: "\e000";
}

.zenn-admonition.question {
    border-left: .4rem solid rgb(228, 241, 255);
    background-color: rgb(228, 241, 255);
    border-left-color: rgb(228, 241, 255);
}

.zenn-admonition.question>.zenn-admonition-title {
    background-color: rgb(228, 241, 255);
    border-bottom-color: rgb(228, 241, 255);
}

.zenn-admonition.question>.zenn-admonition-title:before {
    color: rgb(68, 138, 255);
    content: "\e000";
}