叶星优酸乳

> [!timeline] これはこのようなタイムラインを表示します
> - **2024-05-01** *00:00* これは休暇の始まりですね
> - *05:45* もう少し遅く起きたかったのですが、寝られませんでした
> - *06:30* ああ、コーヒー、まさに命を繋ぐものですね~
> - **2024-05-02** *08:00* 実際、これは無序リストです
> - **日付** リスト項目の最初の太字の内容が日付として表示されます
> - *時間* リスト項目の最初の斜体の内容が時間として表示されます
> - まあ、日付と時間を省略しても問題ありません

> [!chat-bubble]+ チャットバブルの効果
> 
> - 依然としてcalloutと無序リストの形式で、文字数が多くても全く問題ありません。
> + リストの表示方向を順番に切り替えます。異なるリストであり、リスト項目の方向は同じです。
> - `-`、`+`、`*`をリスト項目の前置記号として柔軟に使用することで、簡単に記述できます。
> - 同じ記号を連続して使用すると、バブルは同じ側に表示されます。
> 
> 2024-05-06 07:05:51
> 
> - 時間はどう書けばいいですか？
> + 普通の文字（段落）で大丈夫です。
> + Calloutの折りたたみ機能を使用することもできます。

/**
 * TimeLine
 * @author: 稲米鼠
 * @description: タイムラインのcalloutビューを表示
 * @created: 2023-09-16 09:23:10
 * @updated: 2024-05-05
 * @version: 0.0.1
 */
.callout[data-callout="timeline"] {
  --callout-color: 0, 191, 188;
  --callout-icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gantt-chart"><path d="M8 6h10"/><path d="M6 12h9"/><path d="M11 18h7"/></svg>;
}
.callout[data-callout="timeline"] > .callout-content > ul {
  position: relative;
  margin-left: 7rem;
  padding-left: 6rem;
  padding-bottom: 1rem;
  border-left: 3px solid rgba(0, 191, 188);
  font-size: 1rem;
}
.callout[data-callout="timeline"] > .callout-content > ul::before {
  content: " ";
  position: absolute;
  width: 13px;
  height: 13px;
  box-sizing: border-box;
  left: -7.5px;
  top: -12px;
  border: 2px solid rgba(0, 191, 188);
  border-radius: 50%;
}
.callout[data-callout="timeline"] > .callout-content > ul > li {
  position: relative;
  margin-bottom: .3rem;
  line-height: 1.6rem;
  list-style: none;
}
.callout[data-callout="timeline"] > .callout-content > ul > li > strong:first-child {
  position: absolute;
  left: -13rem;
  display: block;
  width: 6rem;
  font-size: .8rem;
  font-weight: normal;
  text-align: center;
  line-height: 1.2rem;
  margin-top: .2rem;
  border: 2px solid rgba(0, 191, 188);
  border-radius: 12px;
}
.callout[data-callout="timeline"] > .callout-content > ul > li > em:first-child,
.callout[data-callout="timeline"] > .callout-content > ul > li > strong:first-child+em {
  position: absolute;
  left: -5rem;
  display: block;
  width: 4rem;
  color: white;
  font-size: .8rem;
  font-weight: normal;
  text-align: center;
  line-height: 1.2rem;
  margin-top: .2rem;
  background-color: rgba(0, 191, 188);
  border-radius: 12px;
}
.callout[data-callout="timeline"] > .callout-content > ul > li > em:first-child::before,
.callout[data-callout="timeline"] > .callout-content > ul > li > strong:first-child+em::before {
  content: " ";
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  left: calc(-1rem - 6px);
  top: calc(.8rem - 4px);
  background-color: rgba(0, 191, 188);
  border-radius: 50%;
}

/**
 * チャットバブル
 * @author: 稲米鼠
 * @description: チャットバブルのcalloutビューを表示
 * @created: 2024-05-06
 * @updated: 2024-05-06
 * @version: 0.0.1
 */

 .callout[data-callout="chat-bubble"] {
  --callout-color: 238, 237, 239;
  --callout-text-color:  24, 23, 25;
  --callout-tip-color:  145,144,145;
  --bubble-left: 255,254,255;
  --bubble-right: 150,236,106;
  --callout-icon: chevron-left;
  background: rgb(var(--callout-color));
  max-width: 480px;
  border-radius: .8rem;
  margin-left: auto !important;
  margin-right: auto !important;
}
.callout[data-callout="chat-bubble"] > .callout-title,
.callout[data-callout="chat-bubble"] > .callout-title > .callout-icon
.callout[data-callout="chat-bubble"] > .callout-title > .callout-icon > .svg-icon {
  color: var(--callout-text-color);
}
.callout[data-callout="chat-bubble"] > .callout-title > .callout-title-inner {
  text-align: center;
  flex-grow: 1;
}
.callout[data-callout="chat-bubble"] > .callout-content {
  padding: 1rem 0;
}
.callout[data-callout="chat-bubble"] > .callout-content > p {
  text-align: center;
  color: rgb(var(--callout-tip-color));
  font-size: .8rem;
  padding: 0 2rem;
}
.callout[data-callout="chat-bubble"] > .callout-content ul {
  display: flex;
  flex-direction: column;
  margin: 0 1rem;
  padding: 0;
}
.callout[data-callout="chat-bubble"] > .callout-content ul > li {
  position: relative;
  max-width: 80%;
  flex-shrink: 1;
  padding: .5rem 1rem;
  border-radius: 1rem;
  margin: .5rem 0;
  list-style: none;
}
.callout[data-callout="chat-bubble"] > .callout-content ul > li::before {
  position: absolute;
  box-sizing: content-box;
  content: " ";
  width: 0;
  height: 0;
  border: 1rem solid transparent;
  top: 0;
}
.callout[data-callout="chat-bubble"] > .callout-content ul:nth-child(2n+1) {
  align-items: start;
}
.callout[data-callout="chat-bubble"] > .callout-content ul:nth-child(2n+1) > li {
  background: rgb(var(--bubble-left));
}
.callout[data-callout="chat-bubble"] > .callout-content ul:nth-child(2n+1) > li::before {
  left: -1rem;
  border-top: 1rem solid rgb(var(--bubble-left));
}
.callout[data-callout="chat-bubble"] > .callout-content ul:nth-child(2n) {
  align-items: end;
}
.callout[data-callout="chat-bubble"] > .callout-content ul:nth-child(2n) > li {
  background: rgb(var(--bubble-right));
}
.callout[data-callout="chat-bubble"] > .callout-content ul:nth-child(2n) > li::before {
  right: -1rem;
  border-top: 1rem solid rgb(var(--bubble-right));
}