body[theme="googledevai-theme"] { --devsite-background-0: var(--devsite-background-1); --devsite-button-border: 1px solid #747775; --devsite-button-border-radius: 20rem; --devsite-button-font: 500 14px/36px 'Google Sans Text', Roboto, sans-serif; --devsite-code-font-family: 'Google Sans Mono', Roboto Mono, monospace; --devsite-primary-font-family: 'Google Sans Text', Roboto, sans-serif; --devsite-table-heading-font: 500 14px/20px 'Google Sans Text', Roboto, sans-serif; --googledevai-border-color: #c4c7c5; --googledevai-blue-light: #d7e6ff; --googledevai-blue-dark: #2e64de; --googledevai-cyan-light: #c7e4ff; --googledevai-cyan-dark: #3c8fe3; --googledevai-purple-light: #dce2ff; --googledevai-purple-dark: #987be9; --googledevai-purple: #ac87eb; --googledevai-red: #ee4d5d; --googledevai-secondary-text: #001d35; --googledevai-button-gradient-light: linear-gradient(90deg, var(--googledevai-blue-light), var(--googledevai-cyan-light), var(--googledevai-purple-light)); --googledevai-button-gradient-dark: linear-gradient(90deg, var(--googledevai-blue), var(--googledevai-cyan), var(--googledevai-purple)); } body[theme="googledevai-theme"]:not([type="reference"]){ --googledevai-page-width: 1100px; } body[layout=docs][theme="googledevai-theme"]:not([type="reference"]) .devsite-main-content, body[layout=docs][theme="googledevai-theme"]:not([type="reference"]) .devsite-main-content[has-book-nav][has-sidebar] { grid-template-columns: minmax(269px, 1fr) minmax(752px, var(--googledevai-page-width)) minmax(160px, 1fr); grid-gap: 3rem; } body[layout=docs][theme="googledevai-theme"] devsite-content { max-width: var(--googledevai-page-width); } body[layout=docs][theme="googledevai-theme"] .devsite-article { box-shadow: unset; } body[theme="googledevai-theme"] { --googledevai-header-gradient: linear-gradient(90deg, var(--googledevai-blue) 50%, var(--googledevai-cyan), var(--googledevai-purple), var(--googledevai-red)); } body[theme="googledevai-theme"].color-scheme--dark { --googledevai-header-gradient: linear-gradient(90deg, var(--googledevai-blue) 75%, var(--googledevai-cyan), var(--googledevai-purple)); --googledevai-border-color: #444746; } /* Ensure that full-bleed pages get the full width. */ body[theme="googledevai-theme"][layout="full"] .devsite-main-content { max-width: none; padding: 0; } /* And ensure that any site banners/ACL warnings/etc don't get hidden on * full-bleed pages. */ body[theme="googledevai-theme"][layout="full"] .devsite-banner { margin: 0; } tab:has(> a.hidden-tab) { display: none; } body[theme="googledevai-theme"] devsite-toc > .devsite-nav-list { border-inline-start: unset; } /* Banner notice */ [layout=docs] .devsite-banner:first-of-type { background: var(--googledevai-cyan-light); border-radius: 10px; color: var(--googledevai-secondary-text); margin: -2.5rem -0.25rem 2.5rem; display: flex; } /* Banner notice smaller screens */ @media (max-width: 840px) { [layout=docs] .devsite-banner:first-of-type { margin: -0.25rem -0.25rem 2.5rem; } } /* Asides */ .devsite-article-body>aside:not([class*=attempt]) { border-radius: 2px; } /* Tables */ table:not(.tfo-notebook-buttons) { border: 1px solid var(--googledevai-border-color); border-collapse: unset; border-radius: 9px; margin: auto; width: 100%; } .gemini-api-model-table tr:not(:last-child) td:not(:first-child), .gemini-api-model-table tr:not(:last-child) th, th, table:not(.gemini-api-model-table):not(.tfo-notebook-buttons) tr:not(:last-child) td { border-bottom: 1px solid var(--googledevai-border-color); } th, td { background: transparent; padding: 1rem; } /* Notebooks */ devsite-code .tfo-notebook-code-cell-output { max-height: 300px; overflow: auto; background: rgba(237, 247, 255, 1); /* blue bg to distinguish from input code cells */ } devsite-code .tfo-notebook-code-cell-output + .devsite-code-buttons-container button { background: rgba(237, 247, 255, .7); /* blue bg to distinguish from input code cells */ } .color-scheme--dark devsite-code .tfo-notebook-code-cell-output { background: rgba(var(--devsite-background-2), 1); } .color-scheme--dark devsite-code .tfo-notebook-code-cell-output + .devsite-code-buttons-container button { background: rgba(var(--devsite-background-2), .7); } devsite-code[dark-code] .tfo-notebook-code-cell-output { background: rgba(64, 78, 103, 1); /* medium slate */ } devsite-code[dark-code] .tfo-notebook-code-cell-output + .devsite-code-buttons-container button { background: rgba(64, 78, 103, .7); /* medium slate */ } .devsite-article-body>devsite-code { --devsite-code-buttons-container-right: 0; --devsite-code-margin: 0 0; --devsite-code-padding-block: 14px; border-radius: 8px; } .devsite-article-body>.beta:not([class*=attempt]), .devsite-article-body>.caution:not([class*=attempt]), .devsite-article-body>.deprecated:not([class*=attempt]), .devsite-article-body>.dogfood:not([class*=attempt]), .devsite-article-body>.experimental:not([class*=attempt]), .devsite-article-body>.key-point:not([class*=attempt]), .devsite-article-body>.key-term:not([class*=attempt]), .devsite-article-body>.note:not([class*=attempt]), .devsite-article-body>.objective:not([class*=attempt]), .devsite-article-body>.preview:not([class*=attempt]), .devsite-article-body>.special:not([class*=attempt]), .devsite-article-body>.success:not([class*=attempt]), .devsite-article-body>.tip:not([class*=attempt]), .devsite-article-body>.warning:not([class*=attempt]), .devsite-article-body>aside:not([class*=attempt]) { --devsite-notice-margin: 0 0; border-radius: 8px; } /* override default table styles for notebook buttons */ .devsite-table-wrapper .tfo-notebook-buttons { display: block; width: auto; } .tfo-notebook-buttons td { display: inline-block; padding: 0 16px 16px 0; } /* from DevSite's buttons.scss */ .tfo-notebook-buttons a, .tfo-notebook-buttons :link, .tfo-notebook-buttons :visited { -moz-appearance: none; -webkit-appearance: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; align-self: var(--devsite-button-align-self); background: var(--devsite-button-background, var(--devsite-background-1)); border: var(--devsite-button-border, 0); border-radius: var(--devsite-button-border-radius, 2px); box-sizing: border-box; color: var(--devsite-button-color); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; font: var(--devsite-button-font, 500 14px/36px var(--devsite-primary-font-family)); height: var(--devsite-button-height, 36px); letter-spacing: var(--devsite-button-letter-spacing, 0); line-height: var(--devsite-button-line-height, 36px); margin: var(--devsite-button-margin, 0); margin-inline-end: var(--devsite-button-margin-x-end); max-width: var(--devsite-button-max-width, none); min-width: 36px; outline: 0; overflow: hidden; padding: var(--devsite-button-with-icon-padding, 0 16px); text-align: center; text-decoration: none; text-overflow: ellipsis; text-transform: var(--devsite-button-text-transform, uppercase); transition: background-color .2s, border .2s; vertical-align: middle; white-space: nowrap; width: var(--devsite-button-width, auto); } .tfo-notebook-buttons a:hover, .tfo-notebook-buttons a:focus { background: var(--devsite-button-background-hover); border: var(--devsite-button-border-hover, 0); color: var(--devsite-button-color-hover, var(--devsite-button-color)); text-decoration: var(--devsite-button-text-decoration-hover, none); } .tfo-notebook-buttons a:active { background: var(--devsite-button-background-active); border: var(--devsite-button-border-active, 0); transform: var(--devsite-button-transform-active, none); } .tfo-notebook-buttons tr { background: 0; border: 0; } /* on rendered notebook page, remove link to webpage since we're already here */ .tfo-notebook-buttons:not(.tfo-api) td:first-child { display: none; } .tfo-notebook-buttons td > a > img { margin: 0 8px 0 -4px; height: 20px; } [appearance='dark'] .tfo-notebook-buttons td > a > img { filter: invert(1); } @media (prefers-color-scheme: dark) { [appearance='device'] .tfo-notebook-buttons td > a > img { filter: invert(1); } .sub-heading { background-color: #333; color: #bdbdbd; } } [appearance='dark'] .sub-heading { background-color: #333; color: #bdbdbd; } .sub-heading { background-color: #f2f2f2; color: #5f6368; } @media screen and (max-width: 600px) { .tfo-notebook-buttons td { display: block; } } devsite-nav-buttons button { margin-left: 0; margin-top: 5px; } code { border-radius: 6px } devsite-book-nav .devsite-nav-list>.devsite-nav-heading:not(.devsite-nav-divider) { border-top: 0; padding-bottom: 0.9rem; font-size: 1rem; } /* * TODO(b/439059414): Remove this workaround in favor of a project-level * body_class when possible. */ .ais-theme-marker { display: none; } /* * Gemini API body class. * https://source.corp.google.com/piper///depot/google3/third_party/devsite/googledevai/en/gemini-api/_project.yaml;l=7 */ .gemini-api devsite-thumb-rating[position="header"], .gemini-api devsite-feedback[position="header"] { /* Hide the thumb rating and feedback widgets at the top of the page. */ display: none; } /* * Shaded table styles look like a .pricing-table but are more flexible around * content sizes in each column. */ .shaded-table { border-collapse: separate; border-spacing: 0; border-radius: 8px; overflow: hidden; } .shaded-table th { background-color: #f2f2f2; text-align: left; padding: 8px; } /* These should use theme colours for light too, so we don't * need an override. */ .color-scheme--dark .shaded-table th { background-color: var(--devsite-ref-palette--grey800); } .shaded-table td { padding: 8px; } .shaded-table th:first-child { border-top-left-radius: 8px; } .shaded-table th:last-child { border-top-right-radius: 8px; } .shaded-table tr:last-child td:first-child { border-bottom-left-radius: 8px; } .shaded-table tr:last-child td:last-child { border-bottom-right-radius: 8px; } .devsite-nav { font-size: var(--devsite-nav-font-size, 14px); } .devsite-nav-item { line-height: var(--devsite-nav-item-line-height, 20px); } .devsite-book-nav-bg, devsite-book-nav { width: 210px; scrollbar-width: thin; } /* Hide the old toggle button immediately */ .devsite-expandable-nav > .devsite-nav-toggle { display: none !important; } /* Ion setup: Default State (Chevron Right) */ .devsite-expandable-nav > .devsite-nav-title::after { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 18px; line-height: 1; color: #888; /* Default: Chevron Right */ content: "\e5cc"; flex-shrink: 0; margin-left: 8px; } /* Down state logic */ .devsite-expandable-nav.expanded > .devsite-nav-title::after, .devsite-expandable-nav:has(.devsite-nav-active) > .devsite-nav-title::after, .devsite-expandable-nav > .devsite-nav-title[aria-expanded="true"]::after { content: "\e313"; } /* Close state logic */ .devsite-expandable-nav > .devsite-nav-title[aria-expanded="false"]::after { content: "\e5cc" !important; } /* Hovercard styling */ .gemini-api .heading:has(devsite-gemini-api-hovercard-button) { display: flex; justify-content: space-between; align-items: center; } .gemini-api .heading:has(devsite-gemini-api-hovercard-button) h1 { margin-bottom: 0; } devsite-gemini-api-hovercard, devsite-gemini-api-hovercard-button { /* Render above any code blocks on the page */ z-index: 1; } .devsite-nav-icon[data-icon="beta"], .devsite-nav-icon[data-icon="preview"], .devsite-nav-icon[data-icon="experimental"] { margin: -5px 0 -1px 4px; }