Adressfeld & Suchfeld anpassen

Mira_Belle

Mh, ich bin fast schon wunschlos (glücklich) mit meinen Anpassungen, dank Eurer Hilfen!

Es gibt noch eine große Baustelle!

Wie man erkennen kann, sind das Adressfeld und das Suchfeld im passiven Modus

leicht weis-transparent.

Ich hätte gerne, dass diese Felder so ausschauen, wie die passiven Tabs.

Und wenn die Felder aktiv sind, dann sollen sie so aussehen wie jetzt.

Denn wenn sie aktiv sind, sind sie undurchsichtig.

.DeJaVu

Abseits von deiner Frage - du weisst aber schon, dass FVD alle deine Dials zwecks Bildabfrage an einen Server sendet? Ich kann dir nur nicht sagen, ob das einmalig beim Erstellen passiert oder auch mittendrin, aber ich weiss, dass der Autor seine Bilderdatenbank ständig vergrößert.

Mira_Belle

Zitat von .DeJaVu

Abseits von deiner Frage - du weisst aber schon, dass FVD alle deine Dials zwecks Bildabfrage an einen Server sendet? Ich kann dir nur nicht sagen, ob das einmalig beim Erstellen passiert oder auch mittendrin, aber ich weiss, dass der Autor seine Bilderdatenbank ständig vergrößert.

Oh, das wusste ich tatsächlich nicht.

Alternative?

Dharkness

Zitat von .DeJaVu

FVD

Was ist das?

Mira_Belle

Zitat von Dharkness

Was ist das?

Eine Erweiterung für den Firefox. Ersetzt die Startseite.

Dharkness

Zitat von Mira_Belle

Eine Erweiterung für den Firefox. Ersetzt die Startseite.

Wie ich doch solch unvollständige Antworten nicht mag.

Endor

Dharkness

https://addons.mozilla.org/de/firefox/addon/fvd-speed-dial/

:wink:

Mfg.
Endor

Dharkness

Hi und danke für die Aufklärung,

Zitat von Endor

https://addons.mozilla.org/de/firefox/addon/fvd-speed-dial/

ah, das merkwürdige Ding, nicht mein Fall.

.DeJaVu

Ist doch eindeutig im Bild oben zu sehen: "FVD Speed Dial". Und nein, es muss dir nicht gefallen, aber du hättest ja mal suchen können, was es ist, statt frech zu Mira_Belle zu werden.

Mira, ich weiss das nur, weil es bei der Umstellung auf Quantum keinen Nachfolger als Webextension gab (für eine Freundin), deshalb hab ich das Teil damals komplett zerlegt. Letztendlich, bevor Group Speed Dial die Einstellungen davon importieren konnte, musste ich alle Dials per Hand raussuchen. Ich weiss aber auch, dass FVD dafür gesorgt hat, dass etliche andere Dial im Chrome-Store und auch auf AMO rausgekickt worden sind wegen möglicher Verwechslungsgefahr. Allein deswegen ist "FVD" ein rotes Tuch für mich.

Mira_Belle

Komme nicht weiter!

Sieht nun so aus!

D.h. Die Felder sind zwar transparent, ABER!

Sie habe a. einen sehr dünnen schwarzen Rahmen.

Passiv, wie auch aktiv.

Aktiv wird die Schrift, sowohl auch Symbole schwarz!

So mag ich es nicht!!

Der, zu diesem gehörende Chaos, Code

CSS

#urlbar:-moz-lwtheme > #urlbar-background {

    background-color: rgba(255, 255, 255, 0) !important;
}

#searchbar:-moz-lwtheme {
    background-color: rgba(255, 255, 255, 0) !important;
}

.DeJaVu

Beim letzten Wert (Opacity) = 0 sind die Zahlen davor relativ egal, weil 0 schon maximale Transparenz ist. Ansonsten sehe ich hier im Inspector keinen Rand von Firefox. Entweder kommt das durch das genutzte Thema oder durch dein anderes CSS, welches ich nicht kenne.

Mira_Belle

Komme einfach nicht weiter!

Irgendwo hier MUSS doch der entsprechende "Schalter" sein!

CSS

/* Search bar */

#search-container {
  min-width: 125px;
}

.searchbar-search-button {
  -moz-box-align: center;
  fill: currentColor;
}

.searchbar-search-icon {
  list-style-image: url(chrome://global/skin/icons/search-glass.svg);
  -moz-context-properties: fill, fill-opacity;
  fill-opacity: var(--urlbar-icon-fill-opacity);
  pointer-events: none;
  margin-inline: 8px 6px;
  width: 16px;
}

@media not (-moz-proton) {
.searchbar-search-icon {
  fill-opacity: .4;
}

.searchbar-search-button:hover > .searchbar-search-icon {
  fill-opacity: .6;
}

.searchbar-search-button:hover:active > .searchbar-search-icon {
  fill-opacity: .8;
}
} /*** END !proton ***/

.searchbar-search-icon-overlay {
  pointer-events: none;
}

.searchbar-search-button[addengines=true] > .searchbar-search-icon-overlay {
  list-style-image: url(chrome://browser/skin/search-indicator-badge-add.svg);
  margin-inline: -15px 4px;
  margin-top: -10px;
  width: 11px;
  height: 11px;
}

.searchbar-search-button[addengines=true] > .searchbar-search-icon-overlay:-moz-locale-dir(rtl) {
  margin-inline: -25px 14px;
}

.searchbar-search-button:hover:not([addengines=true]) > .searchbar-search-icon-overlay {
  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
  -moz-context-properties: fill;
  margin-inline: -8px 2px;
  width: 6px;
  height: 6px;
}

.searchbar-search-button:hover:not([addengines=true]) > .searchbar-search-icon-overlay:-moz-locale-dir(rtl) {
  margin-inline: -26px 20px;
}

.searchbar-engine-one-off-add-engine:not([image]),
moz-input-box > menupopup .context-menu-add-engine:not([image]) {
  list-style-image: url("chrome://browser/skin/search-engine-placeholder.png");
}

@media (min-resolution: 1.1dppx) {
  .searchbar-engine-one-off-add-engine:not([image]),
  moz-input-box > menupopup .context-menu-add-engine:not([image]) {
    list-style-image: url("chrome://browser/skin/search-engine-placeholder@2x.png");
  }
}

.searchbar-engine-one-off-add-engine > .button-box::after,
moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after {
  content: "";
  position: relative;
  display: -moz-box;
  background: url(chrome://browser/skin/search-indicator-badge-add.svg) no-repeat center;
  height: 11px;
  width: 11px;
  margin-inline: -4px -7px;
  margin-top: -13px;
}

#urlbar .searchbar-separator {
  display: none;
}

moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after {
  /* These differ from the urlbar and searchbar because the context menu
     may not have enough space */
  margin-inline: -7px -4px;
  margin-top: -8px;
}

/* Fade a little the icon so that the + badge is more evident and the button
   is less likely to be visually confused with a normal search shortcut */
.searchbar-engine-one-off-add-engine[image]:not(:hover) > .button-box > .button-icon {
  opacity: 0.7;
}
.searchbar-engine-one-off-add-engine[image]:hover > .button-box > .button-icon {
  opacity: 1;
}

@media (-moz-proton) {
#urlbar-input::placeholder,
.searchbar-textbox::placeholder {
  opacity: 0.69;
}
} /*** END !proton ***/

@media not (prefers-contrast) {
  @media (-moz-proton) {
  :root:not(:-moz-lwtheme) #urlbar:not([focused="true"]) {
    --urlbar-box-bgcolor: white;
  }
  :root[lwt-default-theme-in-dark-mode] #urlbar:not([focused="true"]) {
    --urlbar-box-bgcolor: var(--lwt-toolbar-field-focus);
  }
  } /*** END proton ***/
}

Alles anzeigen

Habe leider von CSS nicht die gerigste Ahnung.

Waren meine eigenen Anpassungen also nur purer Zufall?

Bin mir auch nicht Sicher, ob ich mit den Browserwerkzeugen so richtig umgehe,

jedoch hat das Eine oder Andere aber doch hingehauen.

Nur hier stochere ich im Dunklen.

Wenn mir jemand in irgend einer Weise helfen kann,

dann versuche ich es weiter, wenn nicht, begrabe ich mein Vorhaben.

Danke an alle, die mir bei meinen Anpassungen geholfen haben.

Gruß

Mira

.DeJaVu

"outline"? Auf Deutsch "Aussenlinie!?

Wegen Transparenz nochmal, ein

CSS

background: none !important;
opacity: 0 !important;

müsste den gleichen Effekt haben. Könnte aber Nebeneffekte haben, wie ich grad lese:

https://developer.mozilla.org/de/docs/Web/CSS/opacity

Zitat

Falls ein Kindelement nicht den Wert für die Deckkraft haben soll, kann stattdessen die background Eigenschaft verwendet werden.

Ansonsten kannst du diese Randnotiz gerne vergessen.

Sören Hentzschel

Zitat von .DeJaVu

background: none !important;

… oder wenn man bei background-color bleiben möchte: background-color: transparent !important;

Zitat von .DeJaVu

müsste den gleichen Effekt haben. Könnte aber Nebeneffekte haben, wie ich grad lese:

Einfaches Beispiel:

HTML

<div>Text</div>

CSS

div {
  opacity: 0;
}

Bei Verwendung von background oder background-color wird der Hintergrund transparent, der Text bleibt lesbar. Bei Verwendung von opacity wäre der Text nicht mehr lesbar, weil die Transparenz dann auch für den Text und nicht nur den Hintergrund gilt.

.DeJaVu

Stimmt auffallend, da war doch was

Mira_Belle

Bezug nehmend zu diesem Thread => Farbe für Such- und URL-Box ?

Möchte ich auf diesen Code-Fetzen eingehen.

CSS

#urlbar-input, #urlbar-scheme, .searchbar-textbox {  background: black !important;  color: white !important;  font-weight: bold !important;}.urlbar-input-box {    font-weight: bold !important;  background: black !important;}

bzw. diesen.

CSS

#urlbar,
#urlbar *,
#searchbar,
#searchbar *
{

    background-color: #ffffff !important;
    color:  #000000  !important;

Beide kommen meinem Wunsch recht nahe!

Ersterer verändert nur die Eingabefelder,

aber nicht die Popups

sieht dann so aus.

Passiv.

Und wenn eins der Felder aktiv ist.

Zweiter Code zwar die ganzen Felder, jedoch nicht das Popups der Suche.

Und beide tun dies dauerhaft!

Auch verschwinden die Symbole am Ende des Adressfelds.

Kann man wirklich nicht unterscheiden, ob aktiv oder passiv?

Dharkness

Hi,

die Popups sind ja nicht #urlbar und #searchbar, das Dropdown der Searchbar heißt z.B. #PopupSearchAutoComplete, aber willst Du da wirklich mit #PopupSearchAutoComplete * ran? Da dann unterhalb von #PopupSearchAutoComplete Einträge zu ändern ist dann, soweit ich mich erinnere, nicht ganz so einfach.

Mira_Belle

Ich habe es nun zu meiner Zufriedenheit gelöst!

CSS

/*---------------------------------------------------*/
/********** Anpassungen an der Adressleiste **********/
/*---------------------------------------------------*/

:root{ --lwt-toolbar-field-focus: rgb(43, 42, 51)!important }

:root{ --lwt-toolbar-field-focus-color: rgb(225, 225, 225)!important }

:root{ --lwt-toolbar-field-background-color: rgba(255, 255, 255, 0)!important }


.urlbarView-url {
    overflow: hidden !important;
    color: rgb(242, 204, 154)!important;
}

Alles anzeigen

Mira_Belle

Hi, es gibt kleine Änderungen!

Hier der "neue" Code.

CSS

/*---------------------------------------------------*/
/********** Anpassungen an der Adressleiste **********/
/*---------------------------------------------------*/

:root{ --lwt-toolbar-field-focus: rgb(43, 42, 51)!important }    /* Farbe Hintergrund (Dunkelgrau)*/

:root{ --lwt-toolbar-field-focus-color: rgb(225, 225, 225)!important }    /* Farbe Schrift (Hellgrau) */

:root{ --lwt-toolbar-field-background-color: rgba(255, 255, 255, 0)!important }    /* Farbe der Felder (transparent) */

    /* Farbe Url (Helles Orange)*/
.urlbarView-url {
    overflow: hidden !important;
    color: rgba(255, 204, 0, 0.15)!important;
}

    /* Schriftzug "Suchen" & Hintergrund */
.urlbarView-row:not([type="tip"], [type="dynamic"])[selected] > .urlbarView-row-inner, .urlbarView-row-inner[selected] {
    background-color: rgba(225, 225, 225, 0.15) !important;        /* Hellgrau, transparent */
    color: #e1e1e1 !important;        /* Hellgrau */
}

Alles anzeigen

Was ich aber immer noch nicht herausgefunden habe,

wie die dünnen schwarzen Linien um das Adressfeld,

sowie um das Suchfeld, zu beseitigen ist.

Ergo, das Thema ist immer noch Aktuell!

2002Andreas

Zitat von Mira_Belle

wie die dünnen schwarzen Linien

Teste bitte mal:

CSS

#urlbar:not([focused="true"], [open]):-moz-lwtheme > #urlbar-background,
#searchbar:not(:focus-within):-moz-lwtheme {
  border: none !important;
}