jscher2000 / userchrome-dot-org

Site dedicated to the userChrome.css file
10 stars 1 forks source link

firefox 110.0.1 square and connected tabs not working #13

Open reikred opened 1 year ago

reikred commented 1 year ago

Setup: firefox 110.0.1, ubuntu 22.04.1, with a newly generated userChrome.css file from userchrome.org

Observed: Tabs are rounded and floating, although I specified square and non-floating/connected tabs.

userChrome.css:


/*** Proton Tabs Tweaks ***/

/* Adjust tab corner shape, optionally remove space below tabs */

#tabbrowser-tabs {
    --user-tab-rounding: 0px;
}

.tab-background {
    border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important; /* Connected */
    margin-block: 1px 0 !important; /* Connected */
}
#scrollbutton-up, #scrollbutton-down { /* 6/10/2021 */
    border-top-width: 1px !important;
    border-bottom-width: 0 !important;
}

/* 1/16/2022 Tone down the Fx96 tab border with add-on themes in certain fallback situations */
.tab-background:is([selected], [multiselected]):-moz-lwtheme {
    --lwt-tabs-border-color: rgba(0, 0, 0, 0.5) !important;
    border-bottom-color: transparent !important;
}
[brighttext="true"] .tab-background:is([selected], [multiselected]):-moz-lwtheme {
    --lwt-tabs-border-color: rgba(255, 255, 255, 0.5) !important;
    border-bottom-color: transparent !important;
}

/* Container color bar visibility */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
    margin: 0px max(calc(var(--user-tab-rounding) - 3px), 0px) !important;
}

/* Override Normal Density height to Compact Density height (plus room for context-line) only for tabs 1/16/2022 */

#TabsToolbar, #tabbrowser-tabs {
    --tab-min-height: 31px !important;
}
    /* Tweak for covering a line at the bottom of the active tab on some themes 8/11/2021 */
#main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] + #TabsToolbar, 
#main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] + #TabsToolbar #tabbrowser-tabs {
    --tab-min-height: 32px !important;
}
#scrollbutton-up,
#scrollbutton-down {
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
}

    /* [Connected Tabs] Set a max height based on min-height plus margin-block: 1px 0 */
#TabsToolbar, #TabsToolbar > hbox, #TabsToolbar-customization-target, #tabbrowser-arrowscrollbox  {
    max-height: calc(var(--tab-min-height) + 1px) !important;
}
    /* [Connected Tabs] Adjust padding around icons on buttons to avoid crushed images */
#TabsToolbar-customization-target toolbarbutton > .toolbarbutton-icon, 
#TabsToolbar-customization-target .toolbarbutton-text, 
#TabsToolbar-customization-target .toolbarbutton-badge-stack,
#scrollbutton-up,#scrollbutton-down {
    padding-top: 8px !important;
    padding-bottom: 7px !important;
}
    /* [Connected Tabs] Make sure tab attention dot isn't too low - 10 Dec 2022 */
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]),
#firefox-view-button[attention], .webextension-browser-action[attention="true"] {
  background-position-y: bottom 5px !important;
}

/* Inactive tabs: Outline style */

.tab-background {
    --context-line-margin-adjust: 4px; /* 1/16/2022 */
    --context-line-active-adjust: 0px; /* 1/16/2022 */
}
.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
    border: 1px solid rgba(0, 0, 0, .20) !important;
    /* To pick up a theme background tab separator color, un-comment the following line: */
    /* border: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, .20)) !important; */
    border-bottom-color: transparent !important;
}
    /* For dark backgrounds */
[brighttext="true"] .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
    border: 1px solid var(--lwt-selected-tab-background-color, rgba(255, 255, 255, .20)) !important;
    /* To pick up a theme background tab separator color, un-comment the following line: */
    /* border: 1px solid var(--lwt-background-tab-separator-color, var(--lwt-selected-tab-background-color, rgba(255, 255, 255, .20))) !important; */
    border-bottom-color: transparent !important;
}
/* Remove extra padding between tabs */
.tabbrowser-tab:not(:first-of-type) {
    padding-left: 0 !important;
}

/* Move container color bar to bottom of tab - updated 1/16/2022 */

.tab-background {
    --context-line-margin-adjust: 3px; /* 1/16/2022 */
    --context-line-active-adjust: 1px; /* 1/16/2022 */
}
.tabbrowser-tab[usercontextid]:is([selected=true], [visuallyselected="true"], [multiselected]) .tab-background {
    border-top: 1px solid transparent; /* 1/16/2022 Default border for consistency */
}

.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
    margin-top: calc(var(--tab-min-height) - var(--context-line-margin-adjust) - 2px) !important;
}
.tabbrowser-tab[usercontextid]:is([selected=true], [visuallyselected="true"], [multiselected])  > .tab-stack > .tab-background > .tab-context-line {
    margin-top: calc(var(--tab-min-height) - var(--context-line-margin-adjust) - var(--context-line-active-adjust) - 2px) !important;
}

/* Emulate blue tab line from Photon 57-88 UI */

/* Set size and position of the bar relative to background */
.tab-background::before {
  content: "";
  display: block;
  height: 3px;
  margin: -1px var(--user-tab-rounding) 0;
}
/* Set color for active tab */
.tabbrowser-tab[selected] .tab-background::before {
  background-color: #0a84ff;
}
/* Set color for other selected tabs */
.tabbrowser-tab[multiselected]:not([selected]) .tab-background::before {
  background-color: color-mix(in srgb, #0a84ff 66%, transparent);
}
/* Set color for hovering on non-active/non-selected tabs */
.tabbrowser-tab:not([selected], [multiselected]):hover .tab-background::before {
  background-color: color-mix(in srgb, currentColor 33%, transparent);
  transform: none;
}
/* [Optional] Animation when hovering non-active/non-selected tabs */
/*
.tabbrowser-tab:not([selected], [multiselected]) .tab-background::before {
  transform: scaleX(.8);
  transition: transform 100ms linear;
}
*/

/* Override font-size for tabs */

.tabbrowser-tab {
    font-size: 13px !important;
}

/* Override font-weight for tabs */

.tabbrowser-tab {
    font-weight: 600 !important;
}

/* Tweak Options as of 12/10/2022; Generated Wed Mar 08 2023 10:28:24 GMT-0800 (Pacific Standard Time) */
reikred commented 1 year ago

Hold on, square tab (etc) works on a 2nd Firefox profile/instance. I need to investigate more.

Please lmk if there is any known reason the features might not work in some profiles. Thanks.

jscher2000 commented 1 year ago

Do you have any rules above that set? Sometimes a missing closing brace breaks things. Or a namespace.