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

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

/*  Original Code: [qjebbs/vscode-markdown-extended: Extended syntaxes to built-in markdown & What you see is what you get exporter.](https://github.com/qjebbs/vscode-markdown-extended)
    * 
    * MIT License (MIT)
    * 
    * Copyright (c) 2018 jebbs
    * 
    * オリジナルコードの`styles/markdown-it-admonition.css`をコピーし､改変して実装している｡
    * 
    * 以下、主な改変部分の説明｡
    * 1. font-familyの変更。
    * 2. 属性をinfo, warn, warning, alert, questionに絞る｡
    * 3. 色やコンテンツの変更｡
*/

@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');
}

.default-admonition {
  position: relative;
  margin: 1.5625em 0;
  padding: 0 1.2rem;
  border-left: .4rem solid rgba(68, 138, 255, .8);
  border-radius: .2rem;
  background-color: rgba(255, 255, 255, 0.05);
  overflow: auto;
}

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

.default-admonition>.default-admonition-title {
  margin: 0 -1.2rem;
  padding: .8rem 1.2rem .8rem 3.6rem;
  border-bottom: 1px solid rgba(68, 138, 255, .2);
  background-color: rgba(68, 138, 255, .1);
  font-weight: 700;
}

.default-admonition>.default-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;
}

.default-admonition.info {
  border-left-color: rgba(100, 221, 23, .8);
}

.default-admonition.info>.default-admonition-title {
  background-color: rgba(100, 221, 23, .1);
  border-bottom-color: rgba(100, 221, 23, .2);
}

.default-admonition.info>.default-admonition-title:before {
  color: rgba(100, 221, 23, 1);
  content: "\E88E";
}

.default-admonition.warn,
.default-admonition.warning {
  border-left-color: rgba(255, 145, 0, .8);
}

.default-admonition.warn>.default-admonition-title,
.default-admonition.warning>.default-admonition-title {
  background-color: rgba(255, 145, 0, .1);
  border-bottom-color: rgba(255, 145, 0, .2);
}

.default-admonition.warn>.default-admonition-title:before,
.default-admonition.warning>.default-admonition-title:before {
  color: rgba(255, 145, 0, 1);
  content: "\E002";
}

.default-admonition.alert {
  border-left-color: rgba(255, 23, 68, .8);
}

.default-admonition.alert>.default-admonition-title {
  background-color: rgba(255, 23, 68, .1);
  border-bottom-color: rgba(255, 23, 68, .2);
}

.default-admonition.alert>.default-admonition-title:before {
  color: rgba(255, 23, 68, 1);
  content: "\E14C";
}

.default-admonition.question {
  border-left-color: rgba(0, 184, 212, .8);
}

.default-admonition.question>.default-admonition-title {
  background-color: rgba(0, 184, 212, .1);
  border-bottom-color: rgba(0, 184, 212, .2);
}

.default-admonition.question>.default-admonition-title:before {
  color: rgba(0, 184, 212, 1);
  content: "\E887";
}