Skip to content

Commit

Permalink
Fix odd appearance of tabs in Photon theme #2960
Browse files Browse the repository at this point in the history
  • Loading branch information
@piroor
piroor committed Jul 7, 2021
1 parent 01e68ae commit 5ef0e87
Showing 1 changed file with 5 additions and 1 deletion.
6 changes: 5 additions & 1 deletion webextensions/sidebar/styles/photon/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,13 @@ tab-item-substance,
.after-tabs [role="button"] {
border: 1px solid var(--tab-border);
border-width: 1px 0;
margin-bottom: -1px;
padding: 0.3em 0.25em;
}
tab-item,
.after-tabs button,
.after-tabs [role="button"] {
margin-bottom: -1px;
}

tab-item.pinned tab-item-substance {
border-width: 0 1px 1px 0;
Expand Down

4 comments on commit 5ef0e87

@irvinm
Copy link
Contributor

@irvinm irvinm commented on 5ef0e87 Jul 7, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@piroor I wanted to make sure this worked, but when I tried manually using this change as part of my TST CSS I still don't see the bottom border.

/* White border */
tab-item.active tab-item-substance {
  border: solid 1px white;
}

/* Workaround to border issue - REMOVE after fixed */
.after-tabs [role="button"] {
  border: 1px solid var(--tab-border);
  border-width: 1px 0;
  margin-bottom: 0px;
  padding: 0.3em 0.25em;
}

tab-item,
.after-tabs button,
.after-tabs [role="button"] {
  margin-bottom: -1px;
}

image

@piroor
Copy link
Owner Author

@piroor piroor commented on 5ef0e87 Jul 7, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

tab-item-substance {
  margin-bottom: 0;
}

This looks required. (Please remind that it should be removed after a new version of TST is released.)

@irvinm
Copy link
Contributor

@irvinm irvinm commented on 5ef0e87 Jul 7, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks much better, but there is still one very strange visual artifact. It looks like every three or four tabs, The top of the bottom tab doesn't align with the tab above it and actually is drawn one pixel above were it should be. (I did have to add z-index: 999; on the active tab in order for the white board to show which I think is reasonable.)

/* White border */
tab-item.active tab-item-substance {
  border: solid 1px white;
  z-index: 999;
}

/* Workaround to border issue - REMOVE after fixed */
.after-tabs [role="button"] {
  border: 1px solid var(--tab-border);
  border-width: 1px 0;
  margin-bottom: 0px;
  padding: 0.3em 0.25em;
}

tab-item,
.after-tabs button,
.after-tabs [role="button"] {
  margin-bottom: -1px;
}

tab-item-substance {
  margin-bottom: 0;
}

image

This is a clean profile with only this CSS. The only other change I made was to make layout.css.devPixelsPerPx = 1.5 so I could see the formatting better when trying to get all my CSS to work.

So, I reset that value back to 1.0 and their artifacts went away. There must be an issue with how they scale UI elements.

Thanks for the help, I will remove these changes when the next version is ready to go.

@piroor
Copy link
Owner Author

@piroor piroor commented on 5ef0e87 Jul 7, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, layout.css.devPixelsPerPx looks to be applied to margin and border-width in different way.
On my environment, 1px border is rendered as 0.666667px (it is 1 device pixel) border but -1px margin-bottom is applied as -1px...
image

Please sign in to comment.