/* Morioka Portal — 独自アイコンセット (PHP 版の配色哲学に準拠)
*
* 設計:
* - 機能ごとに固定アクセント色 (like=pink / repeat=green / reply=cyan ...)
* - PHP の --accent-* 変数を使うので、ダーク/ライト/その他テーマで自動切替
* - 塗り (solid) ベース、線画 (outline) は明確に意味がある場合のみ
*
* 使い方:
* ← 既定の色 (pink)
* ← 上書き
* ← テキスト色に追従
*/
.ico {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.15em;
background-color: var(--ico-color, currentColor);
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
flex-shrink: 0;
line-height: 1;
}
/* テキスト色に追従させたい場合 */
.ico-text { --ico-color: currentColor; }
/* 一回り大きく出したい場合 */
.ico-lg { width: 1.25em; height: 1.25em; vertical-align: -0.25em; }
.ico-xl { width: 1.5em; height: 1.5em; vertical-align: -0.3em; }
.ico-2x { width: 2em; height: 2em; vertical-align: -0.4em; }
.ico-3x { width: 3em; height: 3em; vertical-align: -0.5em; }
/* ========================================
* 色マッピング (機能別)
* ======================================== */
/* 感情・賞賛系 (ピンク) */
.ico-heart,
.ico-heart-outline,
.ico-fire,
.ico-warning,
.ico-flag,
.ico-x,
.ico-x-circle,
.ico-thumbs-down,
.ico-face-cry { --ico-color: var(--accent-pink); }
/* 確認・成功系 (グリーン) */
.ico-check,
.ico-check-circle,
.ico-phone,
.ico-thumbs-up,
.ico-face-laugh { --ico-color: var(--accent-green); }
/* 会話・情報系 (シアン) */
.ico-chat,
.ico-link,
.ico-question,
.ico-user,
.ico-face-wow { --ico-color: var(--accent-cyan); }
/* 評価・待機系 (ゴールド) */
.ico-star,
.ico-lightbulb,
.ico-hourglass,
.ico-party,
.ico-sparkles { --ico-color: var(--accent-gold); }
/* 拡散・引用系 (パープル) */
.ico-repeat,
.ico-quote,
.ico-graduation { --ico-color: var(--accent-purple); }
/* ナビ・物体系 (ブルー) */
.ico-inbox,
.ico-tag,
.ico-book { --ico-color: var(--accent-blue); }
/* 通知タイプ別 (PHP notif_icon と完全互換) */
.ico-retweet { --ico-color: var(--accent-green); } /* repost */
.ico-comment { --ico-color: var(--accent-cyan); } /* reply */
.ico-user-plus { --ico-color: var(--accent-purple); } /* follow */
.ico-user-clock { --ico-color: var(--accent-gold); } /* follow_request */
.ico-user-check { --ico-color: var(--accent-green); } /* follow_accept */
.ico-at { --ico-color: var(--accent-cyan); } /* mention */
.ico-envelope { --ico-color: var(--accent-cyan); } /* dm (PHP は cyan) */
.ico-bullhorn { --ico-color: var(--accent-gold); } /* admin_broadcast */
.ico-hand-heart { --ico-color: var(--accent-green); } /* admin_thanks */
.ico-clipboard { --ico-color: var(--accent-cyan); } /* genkyo_announce */
.ico-bell { --ico-color: var(--accent-cyan); } /* default notification */
.ico-coins { --ico-color: var(--accent-gold); } /* tip 投げ銭 */
/* テキスト色追従 (中立) */
.ico-search,
.ico-package,
.ico-scales,
.ico-face-neutral { --ico-color: currentColor; }
/* ========================================
* SVG path 定義 (統一された塗り中心スタイル)
* 全て viewBox=0 0 24 24、stroke-width 2、rounded
* ======================================== */
.ico-heart {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-heart-outline {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-check {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-check-circle {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-x {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-x-circle {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-warning {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-star {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-flag {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-quote {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-question {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-lightbulb {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-hourglass {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-scales {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-search {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-link {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-repeat {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-phone {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-envelope {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-inbox {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-package {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-book {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-tag {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-graduation {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-fire {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-sparkles {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-party {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-user {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-thumbs-up {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-thumbs-down {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-chat {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* ========================================
* 通知タイプ専用アイコン (PHP notif_icon 互換)
* ======================================== */
.ico-retweet {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-comment {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-user-plus {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-user-clock {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-user-check {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-at {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-bullhorn {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-hand-heart {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-clipboard {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-bell {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-coins {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* ========================================
* 顔系 (シンプル線画、neutral 色)
* ======================================== */
.ico-face-neutral {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-face-laugh {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-face-wow {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ico-face-cry {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* ========================================
* hover で背景色を加える (PHP のアクションボタン風)
* 例:
* ======================================== */
.ico-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25em;
height: 2.25em;
border-radius: 50%;
background: transparent;
border: 0;
cursor: pointer;
transition: background-color 0.15s;
}
.ico-btn:hover { background-color: color-mix(in srgb, var(--ico-color, currentColor) 12%, transparent); }