Beiträge von Horstmann

Eine aktualisierte Version von #7; die für einen verfügbaren Buttons muss man sich wieder raussuchen.

/* Fake button spacer / separator #3a */


/* mark fake separator buttons in customize window  */

toolbarpaletteitem[place="toolbar"] :is(#library-button, 
#home-button, 
#characterencoding-button, 
#sync-button, 
#save-to-pocket-button) {
    margin-inline: 4px !important;
    background-color: powderblue !important;
    outline: 1px solid orange !important;
    outline-offset: -1px !important;
}

toolbarpaletteitem :is(#library-button, 
#home-button, 
#characterencoding-button, 
#sync-button, 
#save-to-pocket-button) .toolbarbutton-icon {
    margin-inline: 4px !important;
    background-color: lightblue !important;
    outline: 2px solid orange !important;
    outline-offset: 4px !important;
}

/* fake separator buttons */

:is(toolbarpaletteitem[place="toolbar"], toolbar) :is(#library-button, 
#home-button, 
#characterencoding-button, 
#sync-button, 
#save-to-pocket-button) .toolbarbutton-icon {
    display: none !important;
}

:is(toolbarpaletteitem[place="toolbar"], toolbar) :is(#library-button, 
#home-button, 
#characterencoding-button, 
#sync-button, 
#save-to-pocket-button) {
    pointer-events: none !important;
    -moz-window-dragging: drag !important;
    /* width */
    width: 88px !important;
    /* adjust height */
    margin-block: 5px !important;
    /* use for fake separator, comment out for fake spacer */
    padding: 0 !important;
    background-color: red !important;
}

Zum 10000sten Mal: Ricky Lee Jones' Pop Pop, auf CD.

Zitat von Nic

Das Theme heißt transparent orange. Wenn ich es deaktiviere, verändert sich die Anzeige nicht.

Dies Userchrome im Wurzelordner ist diese:

#TabsToolbar {

position: absolute;

display: block;

bottom: 0;

width: 100vw;

background-clip: padding-box;

color: var(--toolbar-color);

}

#tabbrowser-tabs {

width: 95vw;

}

#navigator-toolbox {

position: relative;

padding-bottom: calc( var(--tab-min-height) + 8px );

}

.titlebar-buttonbox-container {

position: fixed;

right: 0;

visibility: visible;

display: block;

}

#TabsToolbar .titlebar-buttonbox-container,

#TabsToolbar #window-controls {

display: none;

}

/*...................Ab hier nur Privater Modus...................*/

/*Das lila Icon für privaten Modus oben rechts eingefügt*/

#main-window[privatebrowsingmode=temporary] #PanelUI-menu-button::before {

margin-left: 0px!important;

margin-right: 0px !important;

content: '' !important;

display: block !important;

width: 19px !important;

height: 19px !important;

background: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;

background-repeat: no-repeat !important;

background-position: 0px 2px !important;

background-size: 15px 15px !important;

}

/*Der neue zusätzliche Eintrag: Privater Modus unter dem Tab entfernt*/

#private-browsing-indicator-with-label {

display: none !important;

}

Alles anzeigen

Was willst du mit dem Code erreichen, Tabs unten und in voller Breite?

Es würde schon helfen einen Screenshot zu sehen, der nicht bis zur Unkenntlichkeit angeschnitten ist.

Den Code an sich würde ich persönlich in die Tonne klopfen; das alte Ding geistert hier zwar schon ewig rum, aber ich glaube das geht besser.

Evtl. hier mal schauen, spezieller hier und hier.

Zitat von Mira_Belle

Zitat von Mitleser

Ist ja peinlich, sorry für den falschen Schrägstrich.

Mir ist noch etwas anderes aufgefallen:

Ist Zeile 86 ein Überbleibsel aus einem anderen Button?

Danke für den Hinweis!

Ja, habe den Code zum Teil aus einem bestehenden anderen Code genutzt.

Diese Zeile kann gelöscht werden.

Nur habe ich keinen blassen Schimmer, ob dieses Skript nun auch unter Linux und/oder auf einem Mac läuft.

Alles anzeigen

Funktioniert am Mac ohne die Zeile, besteht auch Elchtest!

Zitat von Mira_Belle

Mache aus toolbaritem.onclick = function () {

das =>

JavaScript

            toolbaritem.onclick = function (event) {
               if (event.button === 0) { ....

und füge noch eine }  nach

Ah, sorry, du hast den Linksklick schon in anderen Scripts benutzt, daher dachte ich du hättest es absichtlich hier anders gemacht.

Zitat von Mira_Belle

Ich habe mal etwas gebastelt.

....

Hier nun mal das JavaScript:

Wenn ich einen Vorschlag machen dürfte: width und height sollten vielleicht generell nicht festgelegt werden für den Button; das kann einem uU das Layout zerschiessen, wenn man keine Standardwerte benutzt, und Fx bzw. ein anständiges allgemeines CSS justiert Buttons auch von alleine.

Ausserdem finde ich es immer nett, wenn ein Script Button nur mit normalem Linksklick angesprochen wird statt mit allen Klicks, ausser man benutzt Extrafunktionen für die anderen Klicks.

Nur so ein Gedanke.

Zitat von .DeJaVu

Nur sind die meisten nur als PNG zu bekommen, SVG lässt man sich schön bezahlen.

Ich habe mir schon einige von hier geholt.

Zitat von .DeJaVu

Mit 546 Nutzern scheint es eine extrem selten genutzte Funktion zu sein, auch wenn es damit eine Berechtigung hat. Aber diese verschwindend geringe Zahl animierte Mozilla bislang wohl nicht, es zu integrieren wie vieles anderes.

Da wären aber auch noch die 800 Millionen anderer Nutzer, die sich einmal im Jahr ärgern wie Panne der Lesezeichenexport/import ist, aber sich nie die Mühe machen nach alternativen Lösungen zu suchen.

Ist bei anderen Browsern auch nicht unbedingt besser; aber Ordnerexport wäre schon nett.

Zitat von simplicissimus

Jetzt sieht es perfekt aus.

Prima!

Zitat von simplicissimus

und Horstmann für

Moment , das hier sollte besser sein; wieder als Ersatz für den gesamten alten Code:

/*   BMB button in box #3  */

#bookmarks-menu-button::after {
    content: "Lesezeichen";
    height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
    display: flex;
    align-items: center;
    border-radius: var(--toolbarbutton-border-radius);
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    padding-right: var(--toolbarbutton-inner-padding);
}

#bookmarks-menu-button .toolbarbutton-icon {
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

#bookmarks-menu-button:hover::after {
    background-color: var(--button-hover-bgcolor) !important;
}

#bookmarks-menu-button:is([open], :active)::after {
    background-color: var(--button-active-bgcolor) !important;
}

#BMB_bookmarksPopup {
    margin-inline: 0 -75px !important;
}

Mit dem margin für das Popup kannst du ja mal spielen.

Zitat von simplicissimus

Wie bekomme ich es hin, dass der "Button" gemeinsam mit dem Wort "Lesezeichen" beim "Hover" und "Klicken" markiert wird.

Oder vielleicht den gesamten Code damit ersetzen?

/*   BMB button in box  */

#bookmarks-menu-button::after {
    content: "Lesezeichen";
    display: flex !important;
    align-items: center !important;
    padding-right: 6px !important;
}

#bookmarks-menu-button {
    margin: var(--toolbarbutton-inner-padding) !important;
    border-radius: var(--toolbarbutton-border-radius) !important;
}

#bookmarks-menu-button .toolbarbutton-icon {
    background-color: transparent !important;
}

#bookmarks-menu-button:hover {
    background-color: var(--button-hover-bgcolor) !important;
}

#bookmarks-menu-button[open] {
    background-color: var(--button-active-bgcolor) !important;
}

#BMB_bookmarksPopup {
    margin-inline: 0 -75px !important;
}

Zitat von 2002Andreas

Damit wird der Button halt zu groß/hoch; das ganze Ding sollte neu aufgebaut werden.

Zitat von simplicissimus

Wie man auf dem Dateianhang unten sieht, wird beim "Hover" und "Klicken" leider nur der Bookmark-Button dunkelgrau eingefärbt, das Wort "Lesezeichen" bleibt unverändert / unmarkiert.

Wie bekomme ich es hin, dass der "Button" gemeinsam mit dem Wort "Lesezeichen" beim "Hover" und "Klicken" markiert wird.

Ist ein ziemliches Gehacke, und selber würde ich den ganzen CC Code rauswerfen und neu machen, aber teste vielleicht mal das hier, zusätzlich zu deinem Code:

#PersonalToolbar #bookmarks-menu-button[label="Lesezeichen-Menü"] image {
    border-radius: var(--toolbarbutton-border-radius) 0px 0px var(--toolbarbutton-border-radius) !important;
}

#PersonalToolbar #bookmarks-menu-button[label="Lesezeichen-Menü"]::after {
    border-radius: 0px var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius) 0px;
    padding-right: var(--toolbarbutton-inner-padding);
}

#PersonalToolbar #bookmarks-menu-button[label="Lesezeichen-Menü"]:hover::after {
    background-color: var(--button-hover-bgcolor) !important;
}

#PersonalToolbar #bookmarks-menu-button[label="Lesezeichen-Menü"][open]::after {
    background-color: var(--button-active-bgcolor) !important;
}

Zitat von .DeJaVu

Das Verhalten steht hier

chrome://browser/content/tabbrowser.css

Im aktiven Tab wird das X angezeigt, sonst nicht - ab einer bestimmten Breite (kleiner werdend).

Bei Hover wirkt das hier bei mir

CSS

#tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:hover > .tab-stack > .tab-content > .tab-close-button
{
    display: block !important;
}

Vielen Dank für den Vorschlag ; wenn ich das im Testprofil meinem CSS Code von oben hinzufüge, ändert sich am Problem aber leider nichts.

Egal ob aktive oder nicht aktive Tab, der Inhalt springt an dem Übergangspunkt zwischen textoverflow und keinem textoverflow, falls der Close Button bis zum Hovern versteckt wird ( Zeile 17-18 in meinem CSS ) - und nur dann.

Die automatische Breitenanpassung vom .tab-close-button hier hatte ich auch schon umgangen, ändert aber auch nichts.

.

Endlich habe ich es geschafft, die Verlaufsmaske für abgeschnittenen Text auch in den Tabs zu Auslassungspunkten (...) bzw. Ellipsis umzuwandlen.

Soweit so gut; ich möchte aber auch, dass bei Textüberlauf der Close Button komplett verschwindet, um mehr Platz für den Text zu schaffen, bis man über über dem Tab hovert.

Was generell auch funktioniert - aber! - wenn die Tab Breite gerade so zwischen textoverflow und kein textoverflow liegt, springt der Tabtext bzw. Inhalt hin und her, und kann sich nicht entscheiden zwischen beiden Zuständen.

Das Problem scheint im Zusammenhang mit dem ebenfalls benutzten CSS Code für Tabs über die volle Breite zu entstehen.

Hier der Code im Testprofil; beim Testen tritt das Problem auf wenn - wie erwähnt - die Tabbreite gerade auf der Grenze ist.

Ideen und Lösungen wären sehr willkommen!

/*  TEST Tabs Ellipsis  */
  

.tab-label-container {
    mask-image: none !important;
}

.tab-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

/***  remove close button to make space for text til hover  ***/

.tabbrowser-tab:not(:hover) .tab-label-container[textoverflow] + .tab-close-button {
    visibility: collapse !important;
}

/***  tabs full width  ***/

.tabbrowser-tab[fadein]:not([style^="max-width"]) {
    max-width: 100vw !important;
}

Zitat von Mira_Belle

So, 2002Andreas & Horstmann !

Ich habe die Vektorgrafiken im Code überarbeitet!

Sie sollten nun im Explorer sichtbar sein, auch habe ich einigen Grafiken zum Test im Code "komisch" gelassen.

Sie sind aber mit Test im Namen gekennzeichnet, und man sieht es ihnen auch an.

Wenn es irgendwie machbar war, habe ich den Code relativ, vom Aufbau her, so gestaltet, dass sie sich gleichen.

Nun, dann hoffe ich, dass getestet wird und warte auch Rückmeldungen.

Alles anzeigen

Bei mir gibts bei deinen Icons nicht das Problem mit der schwarz gefüllten Vorschau, das Andreas hatte.

Ich habe es nur schon bei anderen Icons beobachten können, als ich mit .svg mal rumexperimeniert hatte, daher mein Kommentar dazu.

Die problematischen svgs hab ich aber alle schon gelöscht, deshalb kann ich nicht 100% nachvollziehen was genau das Problem war, hatte aber irgendwas mit context-fill... zu tun.

Zitat von 2002Andreas

Zitat von Horstmann

weil die gesamte Bildfläche mit dieser Basis Füllfarbe gefüllt wird.

Danke für die Erklärung, leuchtet mir ein.

Immer gerne.

Zu beachten ist wie üblich, dass meine Kenntnis in dem Bereich eher oberflächlich ist.

Zitat von lenny2

InkScape Kostenloses, leichtes, portables Programm. Erstellen und bearbeiten Sie svg, importieren Sie svg in png 16x16, usw.

Danke, das werde ich ausprobieren!

Zitat von 2002Andreas

Bis jetzt nutze ich hier keine .svg Grafiken, es ist mehr aus Interesse warum das bei manchen so ist.

Wie Mira schon geschrieben hat, es liegt wohl am context-fill und/oder context-fill-opacity, teils auch stroke statt fill.

Das braucht definierten context, der in Fx an den meisten Stellen für Icons vorgegeben und erlaubt ist.

Viele Bildprogramme berücksichtigen das nicht, und typisch ist dann ein schwarzes Rechteck/Quadrat als Darstellung, weil die gesamte Bildfläche mit dieser Basis Füllfarbe gefüllt wird.

Ohne context-... im .svg Code sind aber bestimmte Funktionen in Fx nicht verfügbar, wie zB Farbänderungen.

Zitat von 2002Andreas

Zitat von Mira_Belle

Die "neuen" Icons

Nur mal eine Frage.

So sehen deine Icons hier im Windows Explorer in der Vorschau aus:

Manche Icons werden also nicht angezeigt bei mir.

Liegt das evtl. an deiner Bearbeitung der .svg Dateien, oder wie kann ich das ändern

Alles anzeigen

Aber wie sehen sie in Firefox aus?

Viele .svg Dateien werden nicht von jedem Programm korrekt oder überhaupt angezeigt; in Fx kommt's manchmal drauf an wo sie eingesetzt werden.

Im Zweifel mal mit Firefox öffnen.