glsk

Recently I was struggling to make tab close icons look closer to Breeze theme. Now I managed to make tabs look Breeze-ish too! The icon rules are also better now, opacity works without superposition problems:

The userChrome.css is very messy and probably redundant, but hey, it works. The element rules were changing quite a bit with every new version, so I’ve cleaned up the old stuff. Here’s the code I’m running on Firefox 60.0.1:

.close-icon {
   list-style-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICBoZWlnaHQ9IjE2IiAgIHdpZHRoPSIxNiIgICB2ZXJzaW9uPSIxLjEiICAgaWQ9InN2ZzIiICAgdmlld0JveD0iMCAwIDE2IDE2Ij4gIDxtZXRhZGF0YSAgICAgaWQ9Im1ldGFkYXRhMTQiPiAgICA8cmRmOlJERj4gICAgICA8Y2M6V29yayAgICAgICAgIHJkZjphYm91dD0iIj4gICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PiAgICAgICAgPGRjOnR5cGUgICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+ICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4gICAgICA8L2NjOldvcms+ICAgIDwvcmRmOlJERj4gIDwvbWV0YWRhdGE+ICA8ZGVmcyAgICAgaWQ9ImRlZnMxMiIgLz4gIDxnICAgICBpZD0iZzQxMzMiPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDojOTI5NTk4O2ZpbGwtb3BhY2l0eToxIiAgICAgICBkPSJNIDQuNzA3MDMsNCA4LDcuMjkyOTcgMTEuMjkyOTcsNCAxMiw0LjcwNzAzIDguNzA3MDMsOCAxMiwxMS4yOTI5NyAxMS4yOTI5NywxMiA4LDguNzA3MDMgNC43MDcwMywxMiA0LDExLjI5Mjk3IDcuMjkyOTcsOCA0LDQuNzA3MDMgNC43MDcwMyw0IiAgICAgICBpZD0icGF0aDgiIC8+ICA8L2c+PC9zdmc+) !important;
   height: 16px;
   width: 16px;
}
/* Uncomment for circular icon:
.close-icon {
   list-style-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICBoZWlnaHQ9IjE2IiAgIHdpZHRoPSIxNiIgICB2ZXJzaW9uPSIxLjEiICAgaWQ9InN2ZzIiICAgdmlld0JveD0iMCAwIDE2IDE2Ij4gIDxtZXRhZGF0YSAgICAgaWQ9Im1ldGFkYXRhMTQiPiAgICA8cmRmOlJERj4gICAgICA8Y2M6V29yayAgICAgICAgIHJkZjphYm91dD0iIj4gICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PiAgICAgICAgPGRjOnR5cGUgICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+ICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4gICAgICA8L2NjOldvcms+ICAgIDwvcmRmOlJERj4gIDwvbWV0YWRhdGE+ICA8ZGVmcyAgICAgaWQ9ImRlZnMxMiIgLz4gIDxnICAgICBpZD0iZzQxMzciPiAgICA8Y2lyY2xlICAgICAgIGlkPSJjaXJjbGU2IiAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmIiAgICAgICByPSI2IiAgICAgICBjeT0iNy45OTk5NzA0IiAgICAgICBjeD0iOC4wMDAwMDQ4IiAvPiAgICA8cGF0aCAgICAgICBpZD0icGF0aDgiICAgICAgIHN0eWxlPSJmaWxsOiM5MDkzOTY7ZmlsbC1vcGFjaXR5OjEiICAgICAgIGQ9Ik0gOCwwIEEgOCw4LjAwMDAxIDAgMCAwIDAsOCA4LDguMDAwMDEgMCAwIDAgOCwxNiA4LDguMDAwMDEgMCAwIDAgMTYsOCA4LDguMDAwMDEgMCAwIDAgOCwwIE0gNC43MDcwMyw0IDgsNy4yOTI5NyAxMS4yOTI5Nyw0IDEyLDQuNzA3MDMgOC43MDcwMyw4IDEyLDExLjI5Mjk3IDExLjI5Mjk3LDEyIDgsOC43MDcwMyA0LjcwNzAzLDEyIDQsMTEuMjkyOTcgNy4yOTI5Nyw4IDQsNC43MDcwMyA0LjcwNzAzLDQiIC8+ICA8L2c+PC9zdmc+) !important;
   height: 16px;
   width: 16px;
   } */
.close-icon:hover {
   list-style-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICBoZWlnaHQ9IjE2IiAgIHdpZHRoPSIxNiIgICB2ZXJzaW9uPSIxLjEiICAgaWQ9InN2ZzIiICAgdmlld0JveD0iMCAwIDE2IDE2Ij4gIDxtZXRhZGF0YSAgICAgaWQ9Im1ldGFkYXRhMTQiPiAgICA8cmRmOlJERj4gICAgICA8Y2M6V29yayAgICAgICAgIHJkZjphYm91dD0iIj4gICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PiAgICAgICAgPGRjOnR5cGUgICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+ICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4gICAgICA8L2NjOldvcms+ICAgIDwvcmRmOlJERj4gIDwvbWV0YWRhdGE+ICA8ZGVmcyAgICAgaWQ9ImRlZnMxMiIgLz4gIDxnICAgICBpZD0iZzQxMzciPiAgICA8cGF0aCAgICAgICBpZD0icGF0aDgiICAgICAgIHN0eWxlPSJmaWxsOiNlNDlhYTI7ZmlsbC1vcGFjaXR5OjEiICAgICAgIGQ9Ik0gOCwwIEEgOCw4LjAwMDAxIDAgMCAwIDAsOCA4LDguMDAwMDEgMCAwIDAgOCwxNiA4LDguMDAwMDEgMCAwIDAgMTYsOCA4LDguMDAwMDEgMCAwIDAgOCwwIE0gNC43MDcwMyw0IDgsNy4yOTI5NyAxMS4yOTI5Nyw0IDEyLDQuNzA3MDMgOC43MDcwMyw4IDEyLDExLjI5Mjk3IDExLjI5Mjk3LDEyIDgsOC43MDcwMyA0LjcwNzAzLDEyIDQsMTEuMjkyOTcgNy4yOTI5Nyw4IDQsNC43MDcwMyA0LjcwNzAzLDQiIC8+ICA8L2c+PC9zdmc+) !important;
}
#titlebar, #tabbrowser-tabs {
   --tab-min-height: 21px !important;
}
#new-tab-button, .tabs-newtab-button {
   list-style-image: url(moz-icon://stock/list-add) !important;
}
/* #back-button {
   list-style-image: url(moz-icon://stock/go-previous) !important;
}
#forward-button {
   list-style-image: url(moz-icon://stock/go-next) !important;
}
#reload-button {
   list-style-image: url(moz-icon://stock/view-refresh) !important;
}
#home-button {
   list-style-image: url(moz-icon://stock/go-home) !important;
}*/
#navigator-toolbox {
	--tabs-border-color: #C0C2C3 !important;
}
/* Colored line on top of selected and hovered over tabs */
.tabbrowser-tab .tab-line {
   display: none !important;
}
/* Default tab background */
.tabbrowser-tab {
   background-color: #CDCFD0 !important;
}
.tabbrowser-tab::after {
   display: none !important;
}
.tabbrowser-tab:not([selected]) {
   border-right: 1px solid #B2B5B8 !important;
}
.tabbrowser-tab:not([selected])[beforeselected-visible], .tabbrowser-tab:not([selected])[last-visible-tab] {
   border-right: 0 !important;
}
.tabbrowser-tab[first-visible-tab] {
   border-radius: 2px 0 0 0 !important;
}
.tabbrowser-tab[last-visible-tab] {
   border-radius: 0 2px 0 0 !important;
}
/* Selected tab */
.tabbrowser-tab[selected] .tab-background {
   border: 1px solid #B2B5B8 !important;
   border-bottom-style: none !important;
   border-radius: 2px 2px 0 0 !important;
}
/* Unselected hovered tabs (with animation) */
.tabbrowser-tab:not([selected]):hover .tab-background {
   background-color: #dce9f0 !important;
   transition: background-color 200ms !important;
   border-color: #dce9f0 !important;
}
.tabbrowser-tab[unread].tab-label-container {
   color: #2980b9 !important;
}