new styling for tab bar

Astromations · May 28, 2023 · 99d526b · 99d526b
1 parent e75072f
commit 99d526b
Showing 1 changed file with 136 additions and 0 deletions.
diff --git a/chrome/window-controls/wc-with-tabline.css b/chrome/window-controls/wc-with-tabline.css
@@ -4,3 +4,139 @@
     margin-left: var(--wc-left-space);
     margin-right: var(--wc-right-space);
 }
+
+.tab-stack {
+	margin-top: 1px !important;
+	margin-bottom: -4px !important;
+}
+
+/* Tab */
+.tabbrowser-tab {
+    padding: 0px 3px 0px !important;
+    position: relative;
+}
+
+.tabbrowser-tab[first-visible-tab="true"]:not([pinned]) {
+    padding-left: 5px !important;
+}
+
+.tabbrowser-tab[last-visible-tab="true"] {
+    padding-right: 5px !important;
+}
+
+/* Tab labels */
+tab {
+    color: var(--light-base) !important;
+}
+
+/* Reset tab background */
+.tab-background {
+    border-radius: 6px !important;
+    box-shadow: none !important;
+    border: 0 !important;
+}
+
+/* Adjust tab label width */
+.tab-label-container {
+    min-width: 0 !important;
+}
+
+/* Force tab favicon to the center */
+.tabbrowser-tab:not([pinned]) .tab-icon-stack {
+    margin-left: auto !important;
+}
+
+/* Tab icon margin */
+.tabbrowser-tab:not([pinned]) .tab-icon-stack {
+    margin-right: 2px;
+}
+
+.tabbrowser-tab:not([soundplaying], [muted], [activemedia-blocked], [crashed]) .tab-icon-stack {
+    padding: 4px;
+}
+
+/* Hide favicon when mute icon is present */
+.tabbrowser-tab:not([pinned]):is([soundplaying], [muted], [activemedia-blocked], [crashed]) .tab-icon-image:not([sharing]),
+.tabbrowser-tab:not([pinned]):is([soundplaying], [muted], [activemedia-blocked], [crashed])[selected] .tab-icon-image {
+    display: none;
+}
+
+/* Hide secondary label about muting */
+.tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked], [crashed]) .tab-secondary-label {
+    display: none;
+}
+
+.tab-icon-stack:is([soundplaying], [muted], [activemedia-blocked]) image {
+    margin: auto !important;
+}
+
+/* Always show the muted icon when poresent */
+#tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) .tab-icon-overlay[indicator-replaces-favicon] {
+    opacity: 1 !important;
+}
+
+/* Icon overlay smaller */
+.tab-icon-overlay[pinned],
+.tab-icon-overlay:not([indicator-replaces-favicon="true"], [selected]) {
+    width: 12px !important;
+    height: 12px !important;
+    padding: 2px !important;
+}
+
+/* Active tab */
+.tab-background[selected=true] {
+    background: none !important;
+    border-image: none !important;
+}
+
+.tab-background[selected=true] {
+    background-color: var(--dark-2) !important;
+}
+
+/* Tab hover */
+.tabbrowser-tab:hover>.tab-stack>.tab-background[selected=true] {
+    background-color: var(--dark-2) !important;
+}
+
+.tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected=true]) {
+    background-color: var(--dark-1) !important;
+}
+
+/* Full width tabs */
+.tabbrowser-tab:not([style^="max-width"]):not([pinned]),
+.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) {
+    max-width: 100% !important;
+    --tab-min-width: 132px !important;
+}
+
+.tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]),
+.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) {
+    max-width: .1px !important;
+}
+
+/* Create new container tab indicator */
+.tabbrowser-tab[class*="identity-color-"] .tab-label-container {
+    color: var(--identity-tab-color) !important;
+}
+
+/* Needs attetion tab indicator */
+.tabbrowser-tab:is([image], [pinned])>.tab-stack>.tab-content[attention]:not([selected="true"]),
+.tabbrowser-tab>.tab-stack>.tab-content[pinned][titlechanged]:not([selected="true"]) {
+    background-image: radial-gradient(var(--gnome-tabbar-tab-needs-attetion), var(--gnome-tabbar-tab-needs-attetion) 10px) !important;
+    background-position: center bottom !important;
+    background-size: 14px 2px !important;
+}
+
+/* Tab separators */
+.tabbrowser-tab:not([selected], :hover, [last-visible-tab="true"], [beforeselected-visible="true"], [beforehovered="true"])::after {
+    content: "";
+    display: block;
+    border-left: 1px solid var(--gnome-tabbar-tab-separator-color) !important;
+    height: 26px;
+    position: absolute;
+    top: 8px;
+}
+
+.tabbrowser-tab::after {
+    right: -.5px;
+}