{theme}: let fg = "#${theme.colors.fg}"; bg = "#${theme.colors.bg}"; surface-fg = "#${theme.colors.surface.fg}"; surface-bg = "#${theme.colors.surface.bg}"; primary = "#${theme.colors.primary}"; fontSize = "${toString theme.font.size}px"; outerGap = "${toString theme.outerGap}px"; innerGap = "${toString theme.innerGap}px"; outerRadius = "${toString theme.outerRadius}px"; innerRadius = "${toString theme.innerRadius}px"; borderWidth = "${toString theme.borderWidth}px"; in '' * { font-family: ${theme.font.monospace}; font-size: ${fontSize}; } /* Window */ window { margin: 0px; border: ${borderWidth} solid ${primary}; border-radius: ${outerRadius}; background-color: ${bg}; } /* Outer Box */ #outer-box { padding: ${outerGap}; } /* Scroll */ #scroll { margin: 0px; padding: ${innerGap}; border: none; } /* Input */ #input { margin: ${innerGap}; padding: ${innerGap}; border: none; color: ${surface-fg}; background-color: ${surface-bg}; border-radius: ${outerRadius}; } #input:focus, #input:active { border: ${borderWidth} solid ${primary}; box-shadow: none; outline: none; } /* Text */ #text { margin: ${innerGap}; padding: ${innerGap}; border: none; color: ${fg}; } /* Selected Entry */ #entry:selected { background-color: ${primary}; border-radius: ${outerRadius}; } #entry:selected #text { color: ${bg}; } ''