mirror of
https://github.com/PrefectHQ/fastmcp.git
synced 2026-08-09 15:19:10 +02:00
86 lines
5.3 KiB
CSS
86 lines
5.3 KiB
CSS
/* Language dropdown: injected by language-dropdown.js into the sidebar
|
|
footer, to the right of Mintlify's theme selector. Mirrors the almond
|
|
theme pill's exact metrics (lg:h-7 desktop / 2.375rem mobile, rounded-full,
|
|
border-gray-200/70, dark:border-white/[0.07]) so the two controls read as
|
|
one family. */
|
|
#language-switch {
|
|
margin-left: auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
#language-switch select {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
background-color: transparent;
|
|
border: 1px solid rgb(229 231 235 / 0.7);
|
|
border-radius: 9999px;
|
|
color: rgb(107 114 128);
|
|
cursor: pointer;
|
|
font-size: 0.75rem;
|
|
line-height: 1rem;
|
|
height: 2.375rem;
|
|
padding: 0 1.375rem 0 2rem;
|
|
/* Chevron, drawn in the same gray as the label text. */
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.5rem center;
|
|
background-size: 0.7rem;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
#language-switch select {
|
|
height: 1.75rem;
|
|
}
|
|
}
|
|
|
|
#language-switch select:hover {
|
|
color: rgb(75 85 99);
|
|
border-color: rgb(229 231 235);
|
|
}
|
|
|
|
#language-switch select:focus-visible {
|
|
outline: 2px solid rgb(45 0 247 / 0.4);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.dark #language-switch select {
|
|
border-color: rgb(255 255 255 / 0.07);
|
|
color: rgb(156 163 175);
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.dark #language-switch select:hover {
|
|
color: rgb(209 213 219);
|
|
border-color: rgb(255 255 255 / 0.1);
|
|
}
|
|
|
|
/* Colored language mark on the visible trigger; the native <option>s stay
|
|
plain. language-dropdown.js mirrors the current selection onto data-lang,
|
|
so the icon always matches the selected value. Brand colors carry their
|
|
own contrast (the TS mark keeps a white plate behind the letters), so the
|
|
same artwork works in both themes. */
|
|
#language-switch::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0.625rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
background: center / contain no-repeat;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Two-tone Python mark (#3776AB / #FFD43B). */
|
|
#language-switch[data-lang="python"]::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%233776AB' d='M63.391 1.988c-4.222.02-8.252.379-11.8 1.007-10.45 1.846-12.346 5.71-12.346 12.837v9.411h24.693v3.137H29.977c-7.176 0-13.46 4.313-15.426 12.521-2.268 9.405-2.368 15.275 0 25.096 1.755 7.311 5.947 12.519 13.124 12.519h8.491V67.234c0-8.151 7.051-15.34 15.426-15.34h24.665c6.866 0 12.346-5.654 12.346-12.548V15.833c0-6.693-5.646-11.72-12.346-12.837-4.244-.706-8.645-1.027-12.866-1.008zM50.037 9.557c2.55 0 4.634 2.117 4.634 4.721 0 2.593-2.083 4.69-4.634 4.69-2.56 0-4.633-2.097-4.633-4.69-.001-2.604 2.073-4.721 4.633-4.721z'/%3E%3Cpath fill='%23FFD43B' d='M91.682 28.38v10.966c0 8.5-7.208 15.655-15.426 15.655H51.591c-6.756 0-12.346 5.783-12.346 12.549v23.515c0 6.691 5.818 10.628 12.346 12.547 7.816 2.297 15.312 2.713 24.665 0 6.216-1.801 12.346-5.423 12.346-12.547v-9.412H63.938v-3.138h37.012c7.176 0 9.852-5.005 12.348-12.519 2.578-7.735 2.467-15.174 0-25.096-1.774-7.145-5.161-12.521-12.348-12.521h-9.268zM77.809 87.927c2.561 0 4.634 2.097 4.634 4.692 0 2.602-2.074 4.719-4.634 4.719-2.55 0-4.633-2.117-4.633-4.719 0-2.595 2.083-4.692 4.633-4.692z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* TypeScript mark: #3178C6 rounded square, white TS (white plate under the
|
|
letter knockouts keeps them white in dark mode). */
|
|
#language-switch[data-lang="typescript"]::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' fill='%23fff'/%3E%3Cpath fill='%233178C6' d='M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z'/%3E%3C/svg%3E");
|
|
}
|