| <!doctype html> |
| <html dir="$i18n{textdirection}" lang="$i18n{language}"> |
| <head> |
| <meta charset="utf-8"> |
| <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> |
| <title>$i18n{tabListTitle}</title> |
| <style> |
| html { |
| --google-grey-50-rgb: 248, 249, 250; |
| --google-grey-200-rgb: 232, 234, 237; |
| --google-grey-300-rgb: 218, 220, 224; |
| --google-grey-800-rgb: 60, 64, 67; |
| --google-grey-900-rgb: 32, 33, 36; |
| --google-blue-300-rgb: 138, 180, 248; |
| --google-blue-500-rgb: 66, 133, 244; |
| |
| --tabstrip-background-color: $i18n{frameColor}; |
| --tabstrip-tab-border-radius: 8px; |
| --tabstrip-tab-active-border-color: rgb(var(--google-blue-500-rgb)); |
| |
| overflow: hidden; |
| } |
| |
| body { |
| background: var(--tabstrip-background-color); |
| height: 100%; |
| margin: 0; |
| overflow: hidden; |
| padding: 0; |
| width: 100%; |
| } |
| |
| <if expr="not chromeos"> |
| /* ChromeOS is the only platform that can be guaranteed to have overlay |
| * scrollbars, so override the styles of native scrollbars for other |
| * platforms. */ |
| html ::-webkit-scrollbar { |
| display: block; |
| height: 4px; |
| } |
| |
| ::-webkit-scrollbar-track, |
| ::-webkit-scrollbar, |
| ::-webkit-scrollbar-track-piece { |
| background: var(--tabstrip-background-color); |
| } |
| |
| ::-webkit-scrollbar { |
| display: none; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: rgba(var(--tabstrip-scrollbar-thumb-color-rgb), .7); |
| border-inline-end: solid 16px var(--tabstrip-background-color); |
| border-inline-start: solid 16px var(--tabstrip-background-color); |
| } |
| </if> |
| </style> |
| </head> |
| <body> |
| <!-- |
| The CSS variables defined inside of TabList's style tag are also |
| made available through TabList's class object in JavaScript. |
| --> |
| <tabstrip-tab-list |
| role="tablist" |
| style=" |
| --tabstrip-new-tab-button-margin: 24px; |
| --tabstrip-new-tab-button-width: 50px; |
| "> |
| </tabstrip-tab-list> |
| <script src="tab_list.js" type="module"></script> |
| </body> |
| </html> |
