/*
弾力のある水平線 — drop-in CSS.
-----------------------------------------------------------------
使い方:
1. を に追加
2. を または body の末尾に
3. 配置したい場所に以下を1行書くだけ:
色:
線の色は currentColor を継承する。配置先の text color が反映されるので
周囲の文字と統一されたトーンになる。明示したい場合は配置先で
.elastic-line { color: #2c292a; }
のように上書き。
*/
.elastic-line,
.elastic-line-rnd {
display: block;
width: 100%;
height: 80px; /* 物理計算用の振幅レンジ。視覚的には中央の 1px のみ */
overflow: visible;
/*margin: 1.5em 0; */
margin: 0;
cursor: crosshair;
touch-action: pan-y; /* スマホで縦スクロールを妨げない */
}
.elastic-line path,
.elastic-line-rnd path {
fill: none;
stroke: currentColor;
stroke-width: 1;
vector-effect: non-scaling-stroke; /* 拡大表示でも 1px のまま */
}