nuclearcodecat / shimmer

pleasant firefox userchrome with sidebery support
GNU General Public License v3.0
105 stars 4 forks source link

Findbar textbox border #9

Closed BeeverFeever closed 2 weeks ago

BeeverFeever commented 2 weeks ago

before fix

The findbox's textbox border is weird (best way I can think of describing it). I find this weird since it looks fine in the video you posted. To fix it on my system I had to change:

.findbar-textbox {
  border-radius: 11px !important;
  font-family: monospace !important;
  padding: 5px 8px !important;
}

to:

.findbar-textbox {
  border-radius: 10px !important;
  font-family: monospace !important;
}

after fix

Idk why it would be different on my system though, any insight into this?

nuclearcodecat commented 2 weeks ago

hi, i think i fixed it. please try this code:

(replace from the findbar comment down to the browser indicator mention. i hope you understand)

/*! === findbar === */

findbar {
  border: 0 !important;
  /*? relative for margins */
  position: relative !important;
  border-radius: 16px !important;
  bottom: 46px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 560px !important;
  height: 3rem !important;
  display: flex !important;
  align-items: center !important;
  /*? fix for relative positioning */
  margin-top: -40px !important;
  border: 0 !important;
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
  overflow: hidden !important;
}

findbar[hidden]{
  margin-bottom: 0 !important;
  opacity: 0 !important;
  background: rgba(0, 0, 0, 0) !important;
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}

findbar:not([hidden]) {
  opacity: 1 !important;
  background: var(--lwt-accent-color) !important;
}

.findbar-container, .findbar-container > hbox {
  height: 100% !important;
}

/*? change text to icons for smaller findbar */
.findbar-container checkbox::after {
  height: 16px;
  font-size: 14px;
  background-size: cover;
  display: flex;
  align-items: center;
  -moz-context-properties: fill;
  fill: currentColor;
  color: inherit;
}
.findbar-highlight::after {
  content: '';
  background: url(./assets/icons/hl.svg) no-repeat;
  width: 18px;
  background-position-y: -1px;
}
.findbar-match-diacritics::after {
  content: 'ąâ';
  font-weight: 600;
}
.findbar-entire-word::after {
  content: '';
  background: url(./assets/icons/word.svg) no-repeat;
  width: 20px;
  background-position-y: -2px;
}
.findbar-case-sensitive::after {
  content: 'Aa';
  font-weight: 600;
}

/*? hide all text for findbar checkboxes */
.findbar-container checkbox > .checkbox-label-box {
  display: none !important;
}

.findbar-textbox {
  border-radius: 11px !important;
  font-family: monospace !important;
  padding: 5px 8px !important;
  max-width: 215px !important;
}

.findbar-closebutton:hover {
  opacity: 1 !important;
  background: var(--toolbarbutton-hover-background) !important;
}
.findbar-closebutton {
  opacity: 1 !important;
  background: var(--lwt-accent-color) !important;
}
BeeverFeever commented 2 weeks ago

image

Yeah that fixes it. Thanks.

nuclearcodecat commented 2 weeks ago

that's getting updated on v2.2, thanks for the feedback