/* Manglish → Malayalam demo + IME widget styles. The .mlim-* rules belong to manglish-ime.js and are page-independent. */ .mlm { --brand:#0891b2; --brand2:#06b6d4; } .mlm-ml { font-family: "Noto Sans Malayalam", "Meera", "Rachana", system-ui, sans-serif; line-height: 1.9; } .mlm-editor { width: 100%; min-height: 190px; resize: vertical; padding: .9rem 2.6rem .9rem 1rem; font-size: 1.15rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); } .mlm-editor:focus { outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); border-color: var(--brand); } .mlm-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .7rem; } .mlm-count { margin-left: auto; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; } .mlm-hint { color: var(--muted); font-size: .82rem; margin: .3rem 0 0; } .mlm-hint code { background: var(--panel2); padding: .05rem .35rem; border-radius: 5px; font-size: .9em; } /* reference chart */ .mlm-chart { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .mlim-chart-grp h4 { margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .mlim-chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: .3rem; } .mlim-chart-cell { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .4rem .2rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); } .mlim-chart-cell code { font-size: .72rem; color: var(--muted); } .mlim-chart-cell b { font-size: 1.1rem; font-family: "Noto Sans Malayalam", system-ui, sans-serif; } /* candidate popup (created on by the IME) */ .mlim-pop { position: absolute; z-index: 9999; min-width: 140px; max-width: 320px; background: #fff; color: #0f172a; border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: 0 12px 34px -10px rgba(15, 23, 42, .35); padding: .25rem; font-size: 1rem; font-family: "Noto Sans Malayalam", system-ui, sans-serif; } .mlim-pop[hidden] { display: none; } .mlim-opt { display: flex; align-items: center; gap: .55rem; padding: .38rem .5rem; border-radius: 7px; cursor: pointer; } .mlim-opt.is-sel { background: #0891b2; color: #fff; } .mlim-opt.is-sel .mlim-k { background: rgba(255, 255, 255, .25); color: #fff; } .mlim-k { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 5px; background: #e2e8f0; color: #475569; font-size: .68rem; font-weight: 700; } .mlim-v { flex: 1; } /* per-field toggle badge */ .mlim-badge { position: absolute; top: 6px; right: 6px; z-index: 5; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line, #e2e8f0); background: #fff; color: #0891b2; font: 700 .8rem/1 "Noto Sans Malayalam", system-ui, sans-serif; cursor: pointer; } .mlim-badge[aria-pressed="false"] { color: #94a3b8; } .mlim-badge:hover { border-color: #0891b2; } @media (prefers-color-scheme: dark) { .mlim-pop { background: #0b1220; color: #e5e7eb; border-color: #1e293b; } .mlim-k { background: #1e293b; color: #94a3b8; } .mlim-badge { background: #0b1220; border-color: #1e293b; } }