.chrome-tabs { box-sizing: border-box; position: relative; height: 33px; background: var(--main-background-color); border-radius: 5px 5px 0 0; overflow: hidden; } .chrome-tabs * { box-sizing: inherit; font: inherit; } .chrome-tabs .chrome-tabs-content { position: relative; width: 100%; height: 100%; } .chrome-tabs .chrome-tab { position: absolute; left: 0; height: 36px; width: 240px; border: 0; margin: 0; z-index: 1; pointer-events: none; } .chrome-tabs .chrome-tab[active] { z-index: 5; } .chrome-tabs .chrome-tab, .chrome-tabs .chrome-tab * { user-select: none; cursor: default; } .chrome-tabs .chrome-tab.chrome-tab-was-just-added { top: 10px; animation: chrome-tab-was-just-added 120ms forwards ease-in-out; } .chrome-tabs .chrome-tab .chrome-tab-content { position: absolute; display: flex; top: 0; bottom: 0; left: var(--tab-content-margin); right: var(--tab-content-margin); padding: 5px 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; overflow: hidden; pointer-events: all; background-color: var(--accented-background-color); } .chrome-tabs .chrome-tab[active] .chrome-tab-content { background-color: var(--more-accented-background-color); } .chrome-tabs .chrome-tab[is-mini] .chrome-tab-content { padding-left: 2px; padding-right: 2px; } .chrome-tabs .chrome-tab .chrome-tab-title { flex: 1; vertical-align: top; overflow: hidden; white-space: nowrap; color: var(--muted-text-color); } .chrome-tabs .chrome-tab[is-small] .chrome-tab-title { margin-left: 0; } .chrome-tabs .chrome-tab[active] .chrome-tab-title { color: var(--main-text-color); } .chrome-tabs .chrome-tab .chrome-tab-drag-handle { position: absolute; top: 0; bottom: 0; right: 0; left: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; } .chrome-tabs .chrome-tab .chrome-tab-close { flex-grow: 0; flex-shrink: 0; position: relative; top: 3px; width: 16px; height: 16px; border-radius: 50%; background-image: url("data:image/svg+xml;utf8,"); background-position: center center; background-repeat: no-repeat; background-size: 8px 8px; } @media (hover: hover) { .chrome-tabs .chrome-tab .chrome-tab-close:hover { background-color: var(--more-accented-background-color); } .chrome-tabs .chrome-tab .chrome-tab-close:hover:active { background-color: var(--more-accented-background-color); } } @media not all and (hover: hover) { .chrome-tabs .chrome-tab .chrome-tab-close:active { background-color: #dadce0; } } @media (hover: hover) { .chrome-tabs .chrome-tab:not([active]) .chrome-tab-close:not(:hover):not(:active) { opacity: 0.8; } } .chrome-tabs .chrome-tab[is-smaller] .chrome-tab-close { margin-left: auto; } .chrome-tabs .chrome-tab[is-mini]:not([active]) .chrome-tab-close { display: none; } .chrome-tabs .chrome-tab[is-mini][active] .chrome-tab-close { margin-left: auto; margin-right: auto; } @-moz-keyframes chrome-tab-was-just-added { to { top: 0; } } @-webkit-keyframes chrome-tab-was-just-added { to { top: 0; } } @-o-keyframes chrome-tab-was-just-added { to { top: 0; } } @keyframes chrome-tab-was-just-added { to { top: 0; } } .chrome-tabs.chrome-tabs-is-sorting .chrome-tab:not(.chrome-tab-is-dragging), .chrome-tabs:not(.chrome-tabs-is-sorting) .chrome-tab.chrome-tab-was-just-dragged { transition: transform 120ms ease-in-out; }