/* Five-color accent layer. Palette classes are applied to by widget/themes.html. */ html.mac-accent-green, html.mac-accent-green body.bstem { --tpl-accent: #40cc92; --tpl-accent-hover: #36b67e; --tpl-accent-muted: rgba(64, 204, 146, .24); --tpl-accent-rgb: 64, 204, 146; --tpl-accent-gradient-start: #03d0a1; --tpl-accent-gradient-end: #04c98f; } html.mac-accent-blue, html.mac-accent-blue body.bstem { --tpl-accent: #438ff0; --tpl-accent-hover: #347bd5; --tpl-accent-muted: rgba(67, 143, 240, .24); --tpl-accent-rgb: 67, 143, 240; --tpl-accent-gradient-start: #61a9ff; --tpl-accent-gradient-end: #347bd5; } html.mac-accent-pink, html.mac-accent-pink body.bstem { --tpl-accent: #ed6297; --tpl-accent-hover: #d94c83; --tpl-accent-muted: rgba(237, 98, 151, .24); --tpl-accent-rgb: 237, 98, 151; --tpl-accent-gradient-start: #ff86b4; --tpl-accent-gradient-end: #dc4e86; } html.mac-accent-red, html.mac-accent-red body.bstem { --tpl-accent: #eb554f; --tpl-accent-hover: #d9403c; --tpl-accent-muted: rgba(235, 85, 79, .24); --tpl-accent-rgb: 235, 85, 79; --tpl-accent-gradient-start: #ff746e; --tpl-accent-gradient-end: #db423e; } html.mac-accent-gold, html.mac-accent-gold body.bstem { --tpl-accent: #ad7710; --tpl-accent-hover: #90600a; --tpl-accent-muted: rgba(173, 119, 16, .24); --tpl-accent-rgb: 173, 119, 16; --tpl-accent-gradient-start: #d4a331; --tpl-accent-gradient-end: #a96f09; } html[class*="mac-accent-"] { --tpl-primary: var(--tpl-accent); --mac-drawer-accent: var(--tpl-accent); --notify-accent: var(--tpl-accent); --notify-accent-mid: rgba(var(--tpl-accent-rgb), .22); --notify-accent-soft: rgba(var(--tpl-accent-rgb), .14); } html[class*="mac-accent-"] body.bstem { --tpl-accent-muted: rgba(var(--tpl-accent-rgb), .22); } html.mac-accent-blue body.ai-chat-page { --ai-brand: #438ff0; --ai-brand-press: #347bd5; --ai-link: #2f72c8; --ai-match-title: #245b9e; --ai-match-bg: rgba(67, 143, 240, .10); } html.mac-accent-pink body.ai-chat-page { --ai-brand: #ed6297; --ai-brand-press: #d94c83; --ai-link: #bd3f72; --ai-match-title: #9f315c; --ai-match-bg: rgba(237, 98, 151, .10); } html.mac-accent-red body.ai-chat-page { --ai-brand: #eb554f; --ai-brand-press: #d9403c; --ai-link: #bc332f; --ai-match-title: #9f2926; --ai-match-bg: rgba(235, 85, 79, .10); } html.mac-accent-gold body.ai-chat-page { --ai-brand: #ad7710; --ai-brand-press: #90600a; --ai-link: #855a0b; --ai-match-title: #704a07; --ai-match-bg: rgba(173, 119, 16, .11); } html[class*="mac-accent-"] body.ai-chat-page { --ai-brand: var(--tpl-accent); --ai-brand-press: var(--tpl-accent-hover); --ai-link: var(--tpl-accent); --ai-nav-border: rgba(var(--tpl-accent-rgb), .38); --ai-nav-tab: var(--tpl-accent); --ai-match-title: var(--tpl-accent-hover); --ai-match-bg: rgba(var(--tpl-accent-rgb), .11); } html[class*="mac-accent-"] body.ai-chat-page .ai-nav::before { background: linear-gradient(129deg, var(--tpl-accent-gradient-start), var(--tpl-accent-gradient-end)); } html[class*="mac-accent-"] body.ai-chat-page .ai-nav__brand-text { color: var(--tpl-accent); } html[class*="mac-accent-"] body.ai-chat-page .user-bubble { box-shadow: 0 2px 8px rgba(var(--tpl-accent-rgb), .25); } html[class*="mac-accent-"] body.bstem.ai-chat-page .user-bubble { box-shadow: 0 2px 12px rgba(var(--tpl-accent-rgb), .22); } .extra-accent-tool { position: relative; } .mac-accent-picker { align-items: center; background: var(--tpl-bg-base, #fff); border: 1px solid var(--tpl-border-soft, #eee); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); display: none; gap: 8px; padding: 10px; position: absolute; right: 52px; top: 50%; transform: translateY(-50%); width: max-content; z-index: 3; } .extra-accent-tool.is-open .mac-accent-picker { display: flex; } .mac-accent-swatch { border: 2px solid transparent; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); cursor: pointer; height: 28px; padding: 0; position: relative; width: 28px; } .mac-accent-swatch[aria-pressed="true"] { border-color: var(--tpl-bg-base, #fff); box-shadow: 0 0 0 2px var(--tpl-accent); } .mac-accent-swatch[data-mac-accent="green"] { background: #40cc92; } .mac-accent-swatch[data-mac-accent="blue"] { background: #438ff0; } .mac-accent-swatch[data-mac-accent="pink"] { background: #ed6297; } .mac-accent-swatch[data-mac-accent="red"] { background: #eb554f; } .mac-accent-swatch[data-mac-accent="gold"] { background: #ad7710; } .mac-accent-reset { background: transparent; border: 0; color: var(--tpl-text-muted, #666); cursor: pointer; font-size: 12px; padding: 3px 4px; white-space: nowrap; } .mac-accent-reset:hover { color: var(--tpl-accent); } body.bstem .mac-accent-picker { background: var(--tpl-bg-muted, #1e1d23); border-color: var(--tpl-border-soft, #2a2a2a); } @media (max-width: 820px) { .mac-accent-picker { gap: 7px; max-width: calc(100vw - 76px); overflow-x: auto; right: 50px; } }