datguypiko / Firefox-Mod-Blur

Firefox Theme - For dark theme lovers / More compact / Modular / Blur
1.24k stars 59 forks source link

Feature request - safari tabs design #98

Closed qunp1 closed 9 months ago

qunp1 commented 9 months ago

can you make the tabs look more like safari image

datguypiko commented 9 months ago

image

At the end of UserChrome.css

#titlebar #TabsToolbar #tabbrowser-tabs .tabbrowser-tab[fadein]:not([pinned]){
    max-width: 100vw !important;
}

/* Normal tabs design */
.tabbrowser-tab .tab-background:not([selected]) {
  border: 0 !important;
  border-radius: var(--firefoxcss-border-radius) !important;
  background-image: none !important;
  background-color: var(--firefoxcss-tab-bg-color) !important;
  transition: background-color 250ms ease !important;
  box-shadow: var(--firefoxcss-normal-tabs-box-shadow) !important;
}

/* Normal tabs design on hover */
#tabbrowser-tabs
  .tabbrowser-tab:hover
  > .tab-stack
  > .tab-background:not([selected]) {
  border-radius: 0px !important;
}

/* Selected tabs design */
#tabbrowser-tabs .tabbrowser-tab .tab-background[selected] {
  border-radius: 0px !important;
}

/* Multiselect tabs */
#tabbrowser-tabs .tabbrowser-tab .tab-background[multiselected] {
  border-radius: 0px !important;
}

.tabbrowser-tab .tab-background:not([selected]) {
  border-radius: 0px !important;
}

#tabbrowser-tabs {
  margin-left: 0px !important;
}

#TabsToolbar {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

#titlebar #TabsToolbar #tabbrowser-tabs .tabbrowser-tab .tab-background {
  margin-block: 0px !important;
}

#tabbrowser-tabs .tabbrowser-tab {
  padding: 0 0px !important;
  border-right: 1px solid #2f2f2f !important;
}

/* Design of the plus/newtab button - active/press */
toolbar #tabs-newtab-button:not([disabled="true"]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
toolbar #new-tab-button:not([disabled="true"]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon {
  border-radius: 0px !important;
  background-image: none !important;
  background-color: none !important;
  box-shadow: none !important;
}

/* Design of the plus/newtab button - hover */
toolbar #tabs-newtab-button:not([disabled="true"]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
toolbar #new-tab-button:not([disabled="true"]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon {
  border-radius: 0px !important;
  box-shadow: none !important;
  background-color: none !important;
}

/* Design of the plus/newtab button - active/press */
toolbar #tabs-newtab-button:not([disabled="true"]):-moz-any([open],[checked],:hover:active),
toolbar #new-tab-button:not([disabled="true"]):-moz-any([open],[checked],:hover:active) {
  border: 0 !important;
  border-radius: 0px !important;
  background-color: var(--firefoxcss-new-tab-button-active) !important;
  box-shadow: inset 1px 1px 1px 0px
    var(--firefoxcss-new-tab-button-box-shadow-active) !important;
}

/* Design of the plus/newtab button - hover */
toolbar #tabs-newtab-button:not([disabled="true"]):not([checked]):not([open]):not(:active):hover,
toolbar #new-tab-button:not([disabled="true"]):not([checked]):not([open]):not(:active):hover{
  border-radius: 0px !important;
  box-shadow: none !important;
  background-color: var(--firefoxcss-new-tab-button-hover) !important;
}