Merge branch 'main' of github.com:vinceliuice/Colloid-gtk-theme into main

src/other/firefox/chrome/Colloid/parts/popups.css

@@ -294,10 +294,20 @@ toolbarseparator, menuseparator {
 	padding: 0 !important;
 	margin: 6px 0 !important;
 }
+
 #PlacesToolbar menupopup[placespopup="true"] menuseparator::before {
 	border: 0 !important;
 }
 
+toolbarbutton menupopup[placespopup] menuseparator {
+	padding-top: 0 !important;
+	padding-bottom: 0 !important;
+}
+
+toolbarbutton menupopup[placespopup] menuseparator::before {
+	border-top: 0 !important;
+}
+
 toolbarseparator:not([orient="vertical"]), menupopup menuseparator {
 	border-top: 1px solid var(--gnome-menu-separator-color) !important;
 	margin: 6px 0 !important;

src/other/firefox/chrome/Colloid/parts/tabsbar.css

@@ -81,24 +81,32 @@ tab > stack {
 	display: none;
 }
 
-#tabbrowser-tabs[movingtab=true] #tabbrowser-arrowscrollbox::after  {
+#tabbrowser-tabs[movingtab=true] #tabbrowser-arrowscrollbox::after {
 	bottom: unset;
 	top: 38px;
 }
 
-/* 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-toolbar-border-color) !important;
-/*	height: 26px;*/
-	position: absolute;
-	top: 10px;
-	bottom: 10px;
+/* Tabs separators */
+.tabbrowser-tab {
+	border-width: 1px !important;
+	border-left: 1px solid transparent !important;
 }
 
-.tabbrowser-tab::after {
-	right: -1px;
+.tabbrowser-tab + .tabbrowser-tab:not([selected], :hover) {
+	border-image: linear-gradient(
+		to bottom,
+		transparent 0,
+		transparent 20%,
+		var(--gnome-tabbar-tab-border-color) 20%,
+		var(--gnome-tabbar-tab-border-color) 80%,
+		transparent 80%,
+		transparent 100%) 1 !important;
+}
+
+.tabbrowser-tab[selected] + .tabbrowser-tab,
+.tabbrowser-tab:hover + .tabbrowser-tab,
+.tabbrowser-tab[pinned] + .tabbrowser-tab {
+	border-image: none !important;
 }
 
 /* Space between tabs */
@@ -108,6 +116,10 @@ tab > stack {
 	padding: 3px 2px 3px !important;
 }
 
+#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
+	margin-inline-start: 6px !important;
+}
+
 /* Tab labels */
 tab {
 	color: var(--gnome-toolbar-color) !important;

src/sass/gtk/apps/_gnome-3.0.scss

@@ -813,7 +813,7 @@ window.background.csd.unified {
 /*************
  * Rhythmbox *
  *************/
-%image-button {
+%rhythmbox-image-button {
   min-height: 24px;
   min-width: 24px;
   padding: ($medium-size - 24px) / 2;
@@ -860,7 +860,7 @@ window.solid-csd > box.vertical > box.vertical {
     > toolitem > .linked > button,
     > toolitem > box.horizontal > button {
       @extend %circular-button;
-      @extend %image-button;
+      @extend %rhythmbox-image-button;
     }
   }
 
@@ -877,21 +877,30 @@ window.solid-csd > box.vertical > box.vertical {
 window.background > box.vertical > toolbar.primary-toolbar {
   > toolitem {
     > .linked > button.image-button.raised { // 'shuffle/repeat'
-      @extend %circular-button;
-      @extend %image-button;
+      // @extend %circular-button;
+      // @extend %rhythmbox-image-button;
+      @include button(normal);
 
-      > widget > box > image { padding: 0; }
+      &:hover { @include button(hover); }
+
+      &:active { @include button(active); }
+
+      &:disabled { @include button(disabled); }
+
+      &:checked { @include button(checked); }
+
+      > widget > box > image { padding: 0 3px; }
     }
 
     button.flat.scale { // 'volume'
-      @extend %circular-button;
-      @extend %image-button;
+      // @extend %circular-button;
+      @extend %rhythmbox-image-button;
     }
 
     > box.horizontal:not(.linked) > button.toggle,
     > .linked > button:not(.toggle):not(.raised):not(.flat) {
       @extend %circular-button;
-      @extend %image-button;
+      @extend %rhythmbox-image-button;
     }
   }
 }