.chrome-tabs { box-sizing: border-box; position: relative; font-family: "Lato", "Noto Sans SC"; font-size: 12px; height: 46px; padding: 5px 0px 0px 0px; background: #dee1e6; /* 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: relative; border: 0; margin: 0; z-index: 1; pointer-events: none; height: 100%; display: inline-flex; } .chrome-tabs .chrome-tab, .chrome-tabs .chrome-tab * { user-select: none; cursor: default; } .chrome-tabs .chrome-tab .chrome-tab-dividers { position: absolute; top: 8px; bottom: 8px; left: 0; right: 0; } .chrome-tabs .chrome-tab .chrome-tab-dividers, .chrome-tabs .chrome-tab .chrome-tab-dividers::before, .chrome-tabs .chrome-tab .chrome-tab-dividers::after { pointer-events: none; } .chrome-tabs .chrome-tab .chrome-tab-dividers::before, .chrome-tabs .chrome-tab .chrome-tab-dividers::after { content: ""; display: block; position: absolute; top: 0; bottom: 0; width: 0.5px; background: #a9adb0; opacity: 1; } .chrome-tabs .chrome-tab .chrome-tab-dividers::before, .chrome-tabs .chrome-tab .chrome-tab-dividers::after { left: 0; right: 0; } .chrome-tabs .chrome-tab:first-child .chrome-tab-dividers::before, .chrome-tabs .chrome-tab:first-child .chrome-tab-dividers::after { opacity: 0; } /*.chrome-tabs .chrome-tab:last-child .chrome-tab-dividers::after { }*/ .chrome-tabs .chrome-tab .chrome-tab-background { position: absolute; top: 0; bottom: 0px; left: 1px; right: 1px; overflow: hidden; pointer-events: none; } .chrome-tabs .chrome-tab .chrome-tab-background > div { width: 100%; height: 100%; } .chrome-tabs .chrome-tab .chrome-tab-background { background-color: #f4f5f6; } .chrome-tabs .chrome-tab[active] { z-index: 5; } .chrome-tabs .chrome-tab[active] .chrome-tab-background { border-width: 2px 0 0 0; border-style: solid; border-color: var(--app-light-color); } .chrome-tabs .chrome-tab[active] .chrome-tab-background { background-color: #fff; } .chrome-tabs .chrome-tab:not([active]) .chrome-tab-background { transition: opacity 0.2s ease; opacity: 0; } @media (hover: hover) { .chrome-tabs .chrome-tab:not([active]):hover { z-index: 2; } .chrome-tabs .chrome-tab:not([active]):hover .chrome-tab-background { opacity: 1; } } .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: relative; display: inline-flex; top: 0; bottom: 0; left: var(--tab-content-margin); right: var(--tab-content-margin); padding: 0px 5px; border-top-left-radius: 8px; border-top-right-radius: 8px; overflow: hidden; pointer-events: all; flex-direction: row; align-items: center; } .chrome-tabs .chrome-tab:not(.dirty) .chrome-tab-content:hover .chrome-tab-close { opacity: 1; } .chrome-tabs .chrome-tab[is-mini] .chrome-tab-content { padding-left: 2px; padding-right: 2px; } .chrome-tabs .chrome-tab .chrome-tab-favicon { position: relative; flex-shrink: 0; flex-grow: 0; height: fit-content; background-size: 16px; margin-left: 4px; } .chrome-tabs .chrome-tab[is-small] .chrome-tab-favicon { margin-left: 0; } .chrome-tabs .chrome-tab[is-mini]:not([active]) .chrome-tab-favicon { margin-left: auto; margin-right: auto; } .chrome-tabs .chrome-tab[is-mini][active] .chrome-tab-favicon { display: none; } .chrome-tabs .chrome-tab .chrome-tab-title { flex: 1; vertical-align: top; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 4px; color: #5f6368; height: fit-content; line-height: inherit; } .chrome-tabs .chrome-tab[is-small] .chrome-tab-title { margin-left: 0; } .chrome-tabs .chrome-tab .chrome-tab-favicon + .chrome-tab-title, .chrome-tabs .chrome-tab[is-small] .chrome-tab-favicon + .chrome-tab-title { margin: 0 4px; } .chrome-tabs .chrome-tab[is-smaller] .chrome-tab-favicon + .chrome-tab-title, .chrome-tabs .chrome-tab[is-mini] .chrome-tab-title { display: none; } .chrome-tabs .chrome-tab[active] .chrome-tab-title { color: #45474a; } .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; cursor: pointer; } .chrome-tabs .chrome-tab .chrome-tab-close { flex-grow: 0; flex-shrink: 0; position: relative; width: 16px; height: 16px; border-radius: 4px; background-image: url("data:image/svg+xml;utf8,"); background-position: center center; background-repeat: no-repeat; background-size: 8px 8px; display: block; opacity: 0; margin-top: 2px; cursor: pointer; } .chrome-tabs .chrome-tab[active] .chrome-tab-close { opacity: 1; } @media (hover: hover) { .chrome-tabs .chrome-tab .chrome-tab-close:hover { background-color: #e8eaed; opacity: 1; } .chrome-tabs .chrome-tab .chrome-tab-close:hover:active { background-color: #dadce0; opacity: 1; } } @media not all and (hover: hover) { .chrome-tabs .chrome-tab .chrome-tab-close:active { background-color: #dadce0; opacity: 1; } } @media (hover: hover) { .chrome-tabs .chrome-tab:not([active]) .chrome-tab-close:not(:hover):not(:active) { /* opacity: 0;*/ } } .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; } .chrome-tabs .chrome-tabs-bottom-bar { position: absolute; bottom: 0; height: 4px; left: 0; width: 100%; background: #fff; z-index: 10; } .chrome-tabs-optional-shadow-below-bottom-bar { position: relative; height: 1px; width: 100%; background-image: url("data:image/svg+xml;utf8,"); background-size: 1px 1px; background-repeat: repeat-x; background-position: 0% 0%; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .chrome-tabs-optional-shadow-below-bottom-bar { background-image: url("data:image/svg+xml;utf8,"); } } /* 深色主题 */ html[data-bs-theme=dark] .chrome-tabs { background: #202124; } html[data-bs-theme=dark] .chrome-tabs .chrome-tab .chrome-tab-dividers::before, html[data-bs-theme=dark] .chrome-tabs .chrome-tab .chrome-tab-dividers::after { background-color: #989998; } html[data-bs-theme=dark] .chrome-tabs .chrome-tab .chrome-tab-background { background-color: #292b2e; } html[data-bs-theme=dark] .chrome-tabs .chrome-tab[active] .chrome-tab-background { background-color: #1e1e1e; } html[data-bs-theme=dark] .chrome-tabs .chrome-tab .chrome-tab-title { color: #9ca1a7; } html[data-bs-theme=dark] .chrome-tabs .chrome-tab[active] .chrome-tab-title { color: #f1f3f4; } html[data-bs-theme=dark] .chrome-tabs .chrome-tab .chrome-tab-close { background-image: url("data:image/svg+xml;utf8,"); } html[data-bs-theme=dark] .chrome-tabs .chrome-tab .chrome-tab-close:hover { background-color: #5f6368; background-image: url("data:image/svg+xml;utf8,"); } html[data-bs-theme=dark] .chrome-tabs .chrome-tab .chrome-tab-close:hover:active { background-color: #80868b; background-image: url("data:image/svg+xml;utf8,"); } html[data-bs-theme=dark] .chrome-tabs .chrome-tabs-bottom-bar { background: #323639; } html[data-bs-theme=dark] .chrome-tabs .chrome-tab[active] .chrome-tab-background { border-color: var(--app-dark-color); } .chrome-tabs .chrome-tab.dirty .chrome-tab-close { opacity: 0.5; width: 8px; height: 8px; margin: 4px; margin-top: 5px; background-image: unset !important; } .chrome-tabs .chrome-tab.dirty[active] .chrome-tab-close { opacity: 1; } .chrome-tabs .chrome-tab.dirty .chrome-tab-close:hover { width: 16px; height: 16px; margin: 0px; margin-top: 2px; opacity: 1; } .chrome-tabs .chrome-tab .chrome-tab-content .chrome-tab-favicon:before { width: 14px; height: 14px; } html[data-bs-theme=light] .chrome-tabs .chrome-tab.dirty .chrome-tab-close:hover { background-image: url("data:image/svg+xml;utf8,") !important; background-color: #e8eaed !important; } html[data-bs-theme=dark] .chrome-tabs .chrome-tab.dirty .chrome-tab-close:hover { background-image: url("data:image/svg+xml;utf8,") !important; background-color: #5f6368 !important; } .chrome-tabs .chrome-tab.dirty .chrome-tab-close.positive { background-color: #ffb800; } html[data-bs-theme=light] .chrome-tabs .chrome-tab.dirty .chrome-tab-close.negative { background-color: var(--app-light-color); } html[data-bs-theme=dark] .chrome-tabs .chrome-tab.dirty .chrome-tab-close.negative { background-color: var(--app-dark-color); }