V155.0 Nightly Build. Verschieben Sie die Suchleiste (Strg+F) von unten nach oben.

lenny2

Dieser Code funktioniert in der Nightly-Version nicht mehr.

CSS

.browserContainer findbar {
    order: -1 !important;
 }

Wie kann ich die Suchleiste (Strg+F) von unten nach oben verschieben?
Vielen Dank für Ihre Hilfe.

Mira_Belle

Ergänze Dein css

CSS

  .browserContainer {
    display: flex !important;
    flex-direction: column !important;
  }
  .browserContainer findbar {
    order: -1 !important;
  }

Und?

.DeJaVu

Bei mir reichte ersteres, da ich findbar_on_top von Aris schon habe. Danke

Mira_Belle

Und hier noch 'ne kleine Spielerei.

CSS

.browserContainer > findbar {
  margin: 5px 300px 5px 300px !important;
  border-radius: 10px 10px 10px 10px !important;
}

Und die Hintergrundfarbe der Leerstellen kann man mit:

CSS

.browserContainer {
  background: #fdfdfd !important
}

... ändern!
Ja und einen Rahmen kann man natürlich auch um die Leiste "malen".

CSS

.browserContainer > findbar {
  border: 4px solid red !important;
}

Alles ein "kann" und kein muss!
Eben eine Spielerei.

Zitat von .DeJaVu

Bei mir reichte ersteres, da ich findbar_on_top von Aris schon habe. Danke

Und das,

CustomCSSforFx/legacy/fx60-90/css/generalui/findbar_on_top_close_at_findbars_start_fx84.css at master · Aris-t2/CustomCSSforFx

Custom CSS tweaks for Firefox. Contribute to Aris-t2/CustomCSSforFx development by creating an account on GitHub.

github.com

funktioniert bei Dir in der Nightly?

lenny2

Zitat von Mira_Belle

Ergänze Dein css

Excellent, Danke

.DeJaVu

Zitat von Mira_Belle

funktioniert bei Dir in der Nightly?

Müsste ich lügen, um das zu beantworten. Bei mir sieht das so aus, letzter Stand von Aris + dein CSS + meine Änderungen.

Original aus der 4.7.5

CSS

/* Firefox userChrome.css tweaks ********************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/


:is(.browserContainer, #viewSource) .findbar-container :is(spacer, .findbar-find-fast[anonid="match-case-status"]) {
  visibility: collapse;
}

:is(.browserContainer, #viewSource) .findbar-closebutton {
  padding: 0 !important;
  margin: 0 !important;
  margin-inline-end: 2px !important;
}

:is(.browserContainer, #viewSource) .findbar-closebutton  .toolbarbutton-icon{
  width: 16px !important;
  height: 16px !important;
}

:is(.browserContainer, #viewSource) .findbar-textbox {
  font-size: 14px !important;
}

:is(.browserContainer,#viewSource) :is(findbar,#FindToolbar) {
  order: -1 !important;
  margin-top: -1px !important;
  box-shadow: unset !important;
  border: 1px solid #e1e1e2 !important;
  border-top: 0px solid transparent !important;
  border-radius: 0 0 3px 3px;
  transition-property: visibility !important;
  /*background-image: unset !important;*/
}

:root[lwtheme] :is(.browserContainer,#viewSource) :is(findbar,#FindToolbar) {
  appearance: none !important;
  border: 1px solid var(--tabs-border-color) !important;
  border-top: 0px solid transparent !important;
  padding-block: 0 !important;
  border: unset !important;
}

:root[lwtheme] :is(.browserContainer,#viewSource) :is(findbar,#FindToolbar) .findbar-container {
  appearance: none !important;
  /*background-image: linear-gradient(to bottom, var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important;*/*/
  margin-inline-end: -26px !important;
  padding-inline-end: 26px !important;
  margin-inline-start: -26px !important;
  padding-inline-start: 26px !important;
}

:root[lwtheme] :is(.browserContainer,#viewSource) :is(findbar,#FindToolbar) .findbar-container hbox[anonid="findbar-textbox-wrapper"] {
  padding-inline-start: 8px;
}

:is(.browserContainer, #viewSource) :is(.findbar-find-status,.found-matches) {
  margin-inline-start: 4px !important;
  margin-inline-end: 4px !important;
  font-weight: bold !important;
}

:is(.browserContainer, #viewSource) .findbar-find-status {
  font-style: italic !important;
}

:root[lwtheme]:not(:-moz-lwtheme-brighttext) :is(.browserContainer, #viewSource) .findbar-find-status {
  color: red !important;
}

:root[lwtheme]:not(:-moz-lwtheme-brighttext) :is(.browserContainer, #viewSource) .found-matches {
  color: green !important;
}

:root[lwtheme]:-moz-lwtheme-brighttext :is(.browserContainer, #viewSource) :is(.findbar-find-status,.found-matches) {
  color: white !important;
}

@media (-moz-content-prefers-color-scheme: dark) {
	:root[lwtheme] :is(.browserContainer, #viewSource) :is(.findbar-find-status,.found-matches) {
	  color: white !important;
	}
}

.browserContainer > findbar > #findbar-close-container {
  background-color: unset !important;
}

Alles anzeigen

Meines (weicht ab)

CSS

/* Firefox userChrome.css tweaks ********************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/


:is(.browserContainer, #viewSource) .findbar-container :is(spacer, .findbar-find-fast[anonid="match-case-status"]) {
  visibility: collapse;
}

:is(.browserContainer, #viewSource) .findbar-closebutton {
  padding: 0 !important;
  margin: 0 !important;
  margin-inline-end: 2px !important;
}

:is(.browserContainer, #viewSource) .findbar-closebutton  .toolbarbutton-icon{
  width: 16px !important;
  height: 16px !important;
}
:is(.browserContainer, #viewSource) .findbar-textbox {
  font-size: 14px !important;
}

:is(.browserContainer,#viewSource) :is(findbar,#FindToolbar) {
  order: -1 !important;
  margin-top: -1px !important;
  box-shadow: unset !important;
  border: none !important;
  /*border: 1px solid #e1e1e2 !important;
  border-top: 0px solid transparent !important;
  border-radius: 0 0 3px 3px;*/
  transition-property: visibility !important;
  background-image: unset !important;
}

:root[lwtheme] :is(.browserContainer,#viewSource) :is(findbar,#FindToolbar) {
  appearance: none !important;
  border: 1px solid var(--tabs-border-color) !important;
  border-top: 0px solid transparent !important;
}

:root[lwtheme] :is(.browserContainer, #viewSource) :is(findbar, #FindToolbar) {
  padding-block: 0 !important;
  border: unset !important;
}

:root[lwtheme] :is(.browserContainer,#viewSource) :is(findbar,#FindToolbar) .findbar-container {
  appearance: none !important;
  background-image: linear-gradient(to bottom, var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important;
  margin-inline-end: -18px !important;
  padding-inline-end: 18px !important;
}

:root[lwtheme] :is(.browserContainer,#viewSource) :is(findbar,#FindToolbar) .findbar-container {
  appearance: none !important;
  background-image: linear-gradient(to bottom, var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important;
  margin-inline-end: -26px !important;
  padding-inline-end: 26px !important;
  margin-inline-start: -26px !important;
  padding-inline-start: 26px !important;
}

:root[lwtheme] :is(.browserContainer,#viewSource) :is(findbar,#FindToolbar) .findbar-container hbox[anonid="findbar-textbox-wrapper"] {
  padding-inline-start: 8px;
}

:is(.browserContainer, #viewSource) :is(.findbar-find-status,.found-matches) {
  margin-inline-start: 4px !important;
  margin-inline-end: 4px !important;
  font-weight: bold !important;
}
:is(.browserContainer, #viewSource) .findbar-find-status {
  font-style: italic !important;
}
:root[lwtheme]:not(:-moz-lwtheme-brighttext) :is(.browserContainer, #viewSource) .findbar-find-status {
  color: red !important;
}
:root[lwtheme]:not(:-moz-lwtheme-brighttext) :is(.browserContainer, #viewSource) .found-matches {
  color: green !important;
}
:root[lwtheme]:-moz-lwtheme-brighttext :is(.browserContainer, #viewSource) :is(.findbar-find-status,.found-matches) {
  color: white !important;
}

@media (-moz-content-prefers-color-scheme: dark) {
	:root[lwtheme] :is(.browserContainer, #viewSource) :is(.findbar-find-status,.found-matches) {
	  color: white !important;
	}
}

/* von Mira v155 nightly */
.browserContainer
{
    display: flex !important;
    flex-direction: column !important;
}

.browserContainer > findbar > #findbar-close-container
{
    background-color: unset !important;
}

Alles anzeigen

Und das funktioniert. Ich kann das leider alles nicht nachvollziehen, aber solange es funktioniert, ist es gut für mich.

Mira_Belle

Um die "Suchleiste" (F3) in der Nightly nach oben zu bekommen reicht

CSS

  .browserContainer {
    display: flex !important;
    flex-direction: column !important;
  }
  .browserContainer findbar {
    order: -1 !important;
  }

und wenn man den Schließenbutton vorne am Anfang haben möchte:

CSS

  .findbar-closebutton {
    order: -1 !important;
    margin-inline-start: 5px !important;
    margin-inline-end: -1px !important;
  }

Alles andere sind Spielereien.
Natürlich kann man Hintergrundfarbe und Schriftfarbe noch seinen Wünschen anpassen,
und vieles mehr.

Wer spielen möchte:

CSS

/* ### ### ### Suche mit Strg-F ### ### ### */

/* ### Position vom Schließen "X" links neben dem Suchfeld ### */
/* ### Die anderen Felder näher aneinander gerückt         ### */
.findbar-closebutton {
    order: -1 !important;
    margin-inline-start: 5px !important;
    margin-inline-end: -1px !important;
  }
  
  /* ### Aussehen und Position (oben) der Such Box ### */
  .browserContainer > findbar {
    order: -1 !important;
    position: normal !important;
    box-shadow: unset !important;
/*    background: #38383d !important; */
    background: var(--uc-color-black-light) !important;
  }
  
  /* ### Haken "Voriges suchen" ### */
  .findbar-find-previous {margin-inline-start: 10px !important;
  }
  
  /* ### Haken "Nächstes suchen" ### */
  .findbar-find-next {margin-inline-start: -5px !important;
  }
  
  /* ### "Alle hervorheben" ### */
  .findbar-highlight {
    margin-inline-start: 10px !important;
    margin-inline-end: 5px !important;
  }
  
  /* ### "Groß/Kleinschreibung" ### */
  .findbar-case-sensitive {
    margin-inline-start: 12px !important;
    margin-inline-end: 8px !important;
  }
  
  /* ### "Ganze Wörter" (2px danach fängt der "1 von 2 gefunden..." Text an ### */
  .findbar-entire-word {
    margin-inline-start: 9px !important;
    margin-inline-end: 25px !important;
  }
  
  /* ### Abstand der Texte hinter "Ganze Wörter" - Texte fett ### */
  :is(.browserContainer, #viewSource) :is(.findbar-find-status,.found-matches) {
    color: var(--uc-color-orange-normal) !important;
    font-weight: bold !important;
  }
  
  /* ### "Ausdruck nicht gefunden" Text schräg (italic fett) rot (#FF0000) ### */
  :is(.browserContainer, #viewSource) .findbar-find-status {
    color: var(--uc-color-red-normal) !important;
    font-weight: bold !important;
  }

  .findbar-textbox {
    background-color: var(--uc-color-black-lighter)!important;
    color: var(--uc-color-white-dark) !important;
    border: 1px solid var(--uc-color-white-dark) !important;
    border-radius: 4px !important;
    outline: none !important;
  }
    
  .findbar-textbox:focus {
    background-color: var(--uc-color-black-lighter) !important; 
    color: var(--uc-color-white-dark) !important;
    border: 1px solid var(--uc-color-orange-normal) !important;
    outline: none !important;
    box-shadow: none !important;
  }

Alles anzeigen

Die Variablen natürlich durch eigene Farben ersetzen

Sören Hentzschel

Wie kommst du denn auf -moz-margin-start und -moz-margin-end? Abseits von ein paar alten Tests taucht diese veraltete und nicht standardisierte Form im Firefox-Code nirgends auf. Firefox definiert das noch als Alias, ja, aber Firefox unterstützt seit mittlerweile elf Jahren (!) auch margin-inline-start und margin-inline-end, worauf einfacher zu kommen sein sollte, weil das tatsächlich verwendet wird und dafür auch eine richtige Dokumentation existiert …

Mira_Belle

Sören Hentzschel Du fragst mich Sachen.
Das css nutze ich schon seit ewigen Zeiten, und bisher tat es was es tun soll.
Aber dank Deines Hinweises habe ich DAS mal geändert!

Also, Danke.