Bucket Feature Flags MCP Server

/* Animations */ @keyframes bounceInUp { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; transform: translate3d(0, 50px, 0) scaleY(2); } 60% { opacity: 1; transform: translate3d(0, -6px, 0) scaleY(0.9); } 75% { transform: translate3d(0, 3px, 0) scaleY(0.95); } 90% { transform: translate3d(0, -2px, 0) scaleY(0.985); } to { transform: translate3d(0, 0, 0); } } @keyframes gelatine { from, to { transform: scale(1, 1); } 25% { transform: scale(0.9, 1.1); } 50% { transform: scale(1.1, 0.9); } 75% { transform: scale(0.95, 1.05); } } /* Toolbar */ .toolbar { --brand300: #9cc4d3; --brand400: #77adc1; --gray500: #787c91; --gray600: #3c3d49; --gray700: #22232a; --gray800: #17181c; --gray900: #0e0e11; --gray950: #09090b; --black: #1e1f24; --white: white; --bg-color: var(--gray900); --bg-light-color: var(--gray700); --border-color: var(--gray700); --dimmed-color: var(--gray500); --logo-color: white; --text-color: white; --text-size: 13px; --text-small-size: 12px; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: var(--text-size); } :focus { outline: none; } .dialog { color: #ffffff; box-sizing: border-box; background: var(--bg-color); border: 0; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1), 0 -1px rgba(255, 255, 255, 0.1), 0 0 0 1px var(--border-color); border-radius: 7px; z-index: 999999; min-width: 240px; padding: 0; --visible-flags: 15; max-height: min( calc(100vh - 36px - 35px), calc(45px + (var(--visible-flags) * 27px)) ); height: auto; &[open] { display: flex; flex-direction: column; } } .dialog-content { overflow-y: auto; max-height: 100%; flex-grow: 1; margin: 3px 3px 3px 0; &::-webkit-scrollbar { width: 8px; height: 8px; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); border-radius: 999px; transition: background-color 0.1s ease; &:hover { background-color: rgba(255, 255, 255, 0.3); } } &::-webkit-scrollbar-button { display: none; } } .toolbar-toggle { width: 36px; height: 36px; position: fixed; z-index: 999999; padding: 0; margin: 0; box-sizing: border-box; color: var(--logo-color); background: var(--bg-color); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1), 0 -1px rgba(255, 255, 255, 0.1), 0 0 0 1px var(--border-color); border-radius: 999px; cursor: pointer; display: flex; justify-content: center; align-items: center; animation: bounceInUp 0.2s ease-out; transition: background 0.1s ease; &.open { background: var(--bg-light-color); } & .override-indicator { position: absolute; top: 1px; right: 1px; width: 8px; height: 8px; background-color: var(--brand400); border-radius: 50%; opacity: 0; transition: opacity 0.1s ease-in-out; box-shadow: inset 0px 1px rgba(255, 255, 255, 0.1); &.show { opacity: 1; animation: gelatine 0.5s; } } } .toolbar-header-button { background: none; border: none; color: var(--dimmed-color); cursor: pointer; border-radius: 4px; transition: background-color 0.1s ease; flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: 28px; width: 28px; &:hover { background-color: var(--bg-light-color); color: var(--text-color); } &:focus-visible { outline: 1px solid #fff; outline-offset: 0px; } & + .button-tooltip { pointer-events: none; opacity: 0; background: var(--bg-color); color: var(--text-color); padding: 6px 8px; border-radius: 4px; font-size: 13px; } &:hover + .button-tooltip { opacity: 1; } } [data-tooltip] { position: relative; } [data-tooltip]:after { content: attr(data-tooltip); position: absolute; right: 100%; top: 0%; margin-right: 3px; user-select: none; pointer-events: none; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 4px; padding: 0px 6px; height: 28px; line-height: 26px; color: var(--text-color); font-size: var(--text-small-size); font-weight: normal; width: max-content; display: none; box-sizing: border-box; } [data-tooltip]:hover:after { display: block; }