/* icons.css — ชุดไอคอนเส้นกลางของทั้งแอป (29 ก.ค.69) — "แหล่งเดียว" ของรูปไอคอน
เจ้าของสั่ง: เลิกใช้อิโมจิสี ให้เป็นไอคอนเส้นสีเดียวเหมือนกันทั้งระบบ
วิธีใช้: — สีตามตัวอักษรที่ครอบอยู่เสมอ (currentColor)
— จุดสถานะ เขียว/แดง/เหลือง
ในโค้ด JS เรียก GmtIcon('box') ก็ได้ (icons.js) — คืนแท็กเดียวกันนี้
ขนาดปกติ 1.15em ไหลไปกับตัวอักษร · อยากได้ใหญ่/เล็กสั่ง width/height ทับได้
ทำงานด้วย CSS mask → ไม่ต้องมี JS ไม่ต้องรอ render อะไรทั้งนั้น */
.ic {
display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.18em; flex: none;
background-color: currentColor;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.ic.ok { color: var(--ok); } .ic.bad { color: var(--red); }
.ic.warn { color: var(--amber); } .ic.info { color: var(--blue); } .ic.mut { color: var(--mut); }
.ic-warn { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-check { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-checkbox { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-ban { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-xcircle { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-clock { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-hourglass { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-bolt { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-bell { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-sparkle { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-party { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-bulb { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-star { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-heart { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-hand { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-file { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-files { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-receipt { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-note { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-pencil { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-clipboard { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-book { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-folder { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-archive { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-paperclip { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-print { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-save { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-pin { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-mail { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-inbox { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-chat { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-calendar { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-coins { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-money { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-card { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-cart { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-tag { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-gift { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-box { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-truck { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-bank { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-building { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-store { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-chart { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-trend { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-scale { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-calc { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-search { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-refresh { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-lock { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-unlock { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-key { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-link { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-plug { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-settings { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-tool { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-trash { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-rocket { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-camera { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-video { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-image { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-eye { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-eyeoff { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-user { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-users { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-bot { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-brain { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-pulse { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-home { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-grid { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-bike { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-phone { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-music { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-mute { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-droplet { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-briefcase { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-plus { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-minus { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-download { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-upload { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-external { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-sort { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-help { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-logout { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-menu { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-dot { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-circle { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-undo { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ic-redo { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }