search

brief-rss / brief

RSS reader extension for Firefox
Other
214 stars 44 forks source link

Toolbar icon badges are no longer properly aligned on Firefox 115esr for compact density users. #529

Open Ngamer01 opened 1 year ago

Ngamer01 commented 1 year ago

image

So I upgraded Firefox to 115esr and find Mozilla has changed the toolbar icon badges so that the numbers inside are no longer aligned for users on the compact density for icons. Since Mozilla itself does not support compact density anymore, they won't fix it which means a workaround should be found for compact users that don't want the normal or touch icon densities.

I've pulled some CSS out that relates to the badges that can be put on toolbar icons, but I haven't figured out what needs to be changed here.

/* ::::: toolbarbutton badged ::::: */

.toolbarbutton-badge-stack > .toolbarbutton-icon[label]:not([label=""]) {
  margin-inline-end: 0;
}

.toolbarbutton-badge {
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  background-color: #d90000;
  font-size: 10px;
  font-weight: bold;
  padding: 0 2px 1px;
  color: #fff;
  text-shadow: none;
  border-radius: 2px;
  box-shadow: 0 1px 0 hsla(0, 100%, 100%, .2) inset,
              0 -1px 0 hsla(0, 0%, 0%, .1) inset,
              0 1px 0 hsla(206, 50%, 10%, .2);
  margin: -5px 0 0 !important;
  margin-inline-end: -4px !important;
  min-width: 14px;
  max-width: 20px;
  line-height: 10px;
  text-align: center;
  align-self: start;
  justify-self: end;
}

I don't know if it would be wanted to find a workaround for Brief like to be independent of Firefox's stylings so that people won't have to wrestle with the CSS every Firefox update.