Vom Ausshehen her bin ich mit der photon-australis -Lösung aus dem #107-Post zufrieden - nur wackelt das gesamte aktive Tab, wenn man über ein anderes Tab mit der Maus fährt. Was kann man dagegen machen? Habe jetzt in's blaue versucht die min-height -Werte für die vom hover-Ereignis betroffene Tabs zu verkleinern und habe keinen Erfolg damit gehabt. Irgendwelche Ideen diesbezüglich?
eckige Tabs bei Quantum abrunden
-
spiderman -
14. November 2017 um 17:04 -
Erledigt
-
-
nur wackelt das gesamte aktive Tab, wenn man über ein anderes Tab mit der Maus fährt.
Ich habe damit keine Probleme, bei mir wackelt nichts.
Gruß
EDV Oldi -
Also ich habe jetzt die userChrome-light.css ohne Änderungen eingebunden und trotzdem rutscht das aktive Tab nach unten, sobald ich über einem anderen Tab hover-Ereignis auslöse. Ich benutze Version 57.0 unter Windows 10 Home. edvoldi: was ist deine Laufzeitumgebung?
-
Hallo spidermann,
ich habe WIN10 pro und Firefox 57.
Vielleicht schießt ein anderes Script dazwischen.
Teste das doch einmal in einem neuen Profil.
Gruß
EDV-Oldi -
Ich habe jetzt im frischen Profil festgestellt, dass dieses Verhalten mit dem Theme Light, nicht aber beim Default-Theme auftritt.
ZitatAnpassen -> Themes -> Light
Kann jemand helfen?//EDIT 2017-11-21: Rückzieher -> das Problem tritt bei allen Themes auf. Nur seltsamerweise beim Erststart hat ein hover-Ereignis keine Änderungen in der Farbe und sonst nichts ausgelöst.
-
Ich habe jetzt im frischen Profil festgestellt, dass dieses Verhalten mit dem Theme Light, nicht aber beim Default-Theme auftritt.
Das Thema habe ich nicht, ich habe nur default, dunkel und hell.
Gruß EDV Oldi -
Na ja, wenn ich die Sprache Deutsch wähle, dann heißt bei mir Light "hell", ist also das Gleiche.
-
Ja was soll ich sagen, bei WIN10 pro mit Firefox 57, 58 und 59 keine Probleme.
Das selbe gilt für mein Notebook mit WIN 10 Home und Firefox 57 auch hier keine Probleme.
Gruß
EDV-Oldi -
N'Abend...
@all, dass "Springen" scheint ein Bug zu sein, dass dem Autor bekannt ist.
In diesem Fred gibt es dazu ein kl. Filmchen und eine User-Notlösung :wink:
https://github.com/wilfredwee/photon-australis/issues/6 -
Na dann bin ich ja etwas beruhigt in zweierlei Hinsicht:
- geteiltes Leiden ist leichter zu ertragen
- wenn das Problem jetzt erkannt und anerkannt ist, dann ist die Wahrscheinlichkeit groß, dass eine Lösung gefunden wird
//EDIT 2017-11-22: Also beim default Theme funktioniert dieser Fix
CSS#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]), .tabs-newtab-button:hover, .tabs-newtab-button:hover::before, .tabs-newtab-button:hover::after { background-color: transparent !important; margin-top: 0px !important; }
von hier tatsächlich (wobei das hover-Ereignis im Default-Theme keine farbliche Veränderung auslöst), nicht aber für das Light Theme, das ich favorisiere. In diesem Zusammenhang meine Frage:
- ist es sehr aufwändig, die blaue Farbe im Default Theme zu ändern?
-
Hallo spidermann,
da ich immer ein Silvermel Fan war, habe ich mir mein Firefox selber gestaltet.
Da es im oberen Bereich sehr schwer ist alles nach meinen Wünschen zu gestalten, habe ich das Thema Bamboo Feed Reader - Silver installiert.
Suche einmal im Themen Bereich nach Bamboo Feed Reader, vielleicht es etwas dabei was dir gefällt und keinen Fehler produziert.
Gruß
EDV-Oldi -
edvoldi Danke! Habe jetzt in einem frischen Profil getestet - funktioniert bestens. Für diejenige, die Tabs abrunden wollen, ich habe nach der Installation des Bamboo Feed Reader Themes dann photon-australis CSS eingebunden. Wie gesagt - gilt alles für ein frisches Profil. In einem existierendem wackelte das Tab nach der Installation Bamboo Feed Reader - warum auch immer - Reste halt von vorherigen CSS-Experimenten.
//EDIT 2017-11-22: Wichtig! Die Reihenfolge einhalten:
- erst Bamboo Feed Reader installieren
- dann ggf. photon-australis
Ich habe die Reihenfolge mal auf einem frischen Profil geändert mit dem Ergebnis, dass die Tabs beim hover wackelten.
-
Also ich habe mich zu früh gefreut. Nach dem ich vier meiner Profile neu aufgesetzt habe, stelle ich jetzt fest, dass Bamboo Feed Reader Theme das Problem nicht gelöst hat. Schuld für das Wackeln bei mir ist die Menüleiste. Sobald man die Menüleiste deaktiviert, gibt es kein Wackeln beim hover. War meine "Profile neu Aufsetzen Aktion" quasi umsonst gewesen. Beim frischen Profil ist die Menüleiste nämlich standardmäßig deaktiviert und ich kam nicht auf die Idee für den Test für Bamboo Feed die Menüleiste zu aktivieren.
Man lernt immer was dazu und ich bin immer noch an Anregungen, Lösungsansätzen für die Beseitigung des hover-Wackelns
- beim aktiven Tab
- und bei einer aktiven Menüleiste
interessiert.
-
Hallo Kollegen,
ich bekomme die geschwungenen/gerundeten Tabs einfach nicht hin. (FF57 auf MacBook Pro mit macOS Sierra 10.12.6)
Ich habe die Oberfläche mittels der Konfigurationsdateien von Aris auf Github schon zu einem guten Teil meinen Bedürfnissen angepasst (wie sie verwendet werden, ist mir bekannt). Zwecks Übersichtlichkeit ist der Code in der userChrome.css um die nicht gebrauchten Funktionen gekürzt und es steht sonst kein weiterer Code in der Datei:
Code
Alles anzeigen/************************************************************************************************/ /* TOOLBAR BUTTONS ******************************************************************************/ /************************************************************************************************/ /* icon appearance - only use one at a time (custom icons do not scale in HiDPI modes) **********/ @import url(./css/buttons/icons_custom_icons_fx45.css); /**/ /* bookmarks menu button - 'button & popup' appearance ******************************************/ @import url(./css/buttons/bookmarks_menu_button_localized_label_on_bookmarks_toolbar.css); /**/ @import url(./css/buttons/bookmarks_menu_button_popup_classic_appearance.css); /**/ /************************************************************************************************/ /* APPLICATION/HAMBURGER BUTTON *****************************************************************/ /************************************************************************************************/ /* application/hamburger button popup ***********************************************************/ @import url(./css/buttons/appbutton_popup_icons_colorized.css); /**/ @import url(./css/buttons/appbutton_popup_sync_hidden.css); /**/ /************************************************************************************************/ /* TABS - appearance and position ***************************************************************/ /************************************************************************************************/ @import url(./css/tabs/classic_squared_tabs_australized_aero.css); /**/ /* <-- AERO colors */ /************************************************************************************************/ /* TABS TOOLBAR POSITION (not in titlebar / not on top) *****************************************/ /************************************************************************************************/ @import url(./css/tabs/tabs_below_navigation_toolbar_aero.css); /**/ /* <-- AERO colors */ /* restore empty/missing tab favicon - only use one at a time ***********************************/ @import url(./css/tabs/missing_tab_favicon_restored_default.css); /**/ /* tab close icon settings - only use one at a time *********************************************/ @import url(./css/tabs/tab_close_hidden.css); /**/ /* other tab settings ***************************************************************************/ @import url(./css/tabs/tab_icon_colors.css); /**/ /************************************************************************************************/ /* GENERAL UI ***********************************************************************************/ /************************************************************************************************/ @import url(./css/generalui/private_mode_indicator_hidden.css); /**/ @import url(./css/generalui/bookmark_icons_colorized.css); /**/ @import url(./css/generalui/send_to_device_menuitems_hidden.css); /**/ @import url(./css/generalui/popup_animation_fade_time_reduced.css); /**/ /* findbar **************************************************************************************/ @import url(./css/generalui/findbar_show_full_quickfindbar.css); /**/ /* page context menu items: 'back', 'forward', 'reload', 'stop', 'bookmarks' ********************/ @import url(./css/generalui/context_bfrsb_labels_without_icons.css); /**/ /* SEARCHBAR ************************************************************************************/ @import url(./css/generalui/searchbar_glassplus_indicator_hidden.css); /**/ @import url(./css/generalui/searchbar_go_button_hidden.css); /**/ /************************************************************************************************/ /* TOOLBARS *************************************************************************************/ /************************************************************************************************/ /* general toolbar settings *********************************************************************/ @import url(./css/toolbars/toolbars_old_padding.css); /**/ @import url(./css/toolbars/tabs_toolbar_adjustments.css); /**/ @import url(./css/toolbars/navbar_more_compact_mode.css); /**/ /* edit target file to select which items to hide ***********************************************/ /* @import url(./css/toolbars/toolbar_context_menuitems_visibility.css); /**/ /* bookmarks toolbar ****************************************************************************/ @import url(./css/toolbars/bookmarks_toolbar_old_height.css); /* toolbar colors - only use one at a time ******************************************************/ @import url(./css/toolbars/general_toolbar_colors_aero.css); /**/ /* <-- AERO colors */ /************************************************************************************************/ /* LOCATION BAR *********************************************************************************/ /************************************************************************************************/ @import url(./css/locationbar/locationbar_adjustments.css); /**/ @import url(./css/locationbar/compact_mode_reduce_fontsize.css); /**/ @import url(./css/locationbar/locationbar_reduce_height.css); /**/ /* autocomplete/history dropmarker **************************************************************/ @import url(./css/locationbar/dropmarker_at_the_end.css); /**/ /* additional icons/buttons and third party page action buttons *********************************/ @import url(./css/locationbar/icons_colorized.css); /**/ @import url(./css/locationbar/pageaction_separator_in_location_bar_hidden.css); /**/ @import url(./css/locationbar/zoom_button_hidden.css); /**/ @import url(./css/locationbar/go_button_in_location_bar_hidden.css); /**/ /* identity box / page identity button **********************************************************/ @import url(./css/locationbar/identitybox_replace_i_icon_with_globe.css); /**/ @import url(./css/locationbar/identitybox_colors.css); /**/ /* padlock icons in identity box / page identity button - only use one at a time ****************/ @import url(./css/locationbar/identitybox_padlock_icon_classic2.css); /**/ /************************************************************************************************/ /************************************************************************************************/ /************************************************************************************************/
Das Ergebnis sieht so aus:
[attachment=1]Bildschirmfoto 2017-11-29 um 19.33.12.jpg[/attachment]Jetzt wollte ich die "Curved Tabs" von wilfredwee auf Github aktivieren, was sich allerdings folgendermaßen auswirkt:
Füge ich den Code oberhalb der Aris-Konfiguration in die userChrome.css ein, dann werden zwar die Tabs geschwungen, doch die Farben, Symbole und die Reihenfolge der Leisten (Tableiste unten) lt. Aris-Konfig werden nicht mehr angepasst:
[attachment=0]Curved Tabs, keine Farbe mehr und Position.jpg[/attachment]Füge ich den Code unterhalb der Aris-Konfiguration in die userChrome.css ein, dann ist er offensichtlich wirkungslos und alles sieht wie im ersten Screenshot aus.
Es scheint, als würden die Codes einander wirkungslos machen.Findet jemand den Fehler? Ich wär echt dankbar dafür
-
Anscheinend weiß niemand etwas dazu. Aris kann vielleicht helfen, hat das aber nicht unbedingt gelesen. Vielleicht eine PN an ihn?
-
Hier werkelt dieser Code:
CSS
Alles anzeigen/* Tabs rund und farbig */ /********************************************************** ********** Reihenfolge der Leisten *********************** ********************************************************** /* Die Reihenfolge der Leisten im Leisten-Container wird durch die * zugewiesenen Zahlen der "-moz-box-ordinal-group" bestimmt: * Oben die Menü-Leiste, darunter die Navigations-Leiste danach * die Lesezeichen-Leiste, unten die TAB-Leiste, so wie man es * von früher her gewohnt ist. * * Oft wird eine andere Vorgehensweise beschrieben. * Ob es wichtig ist? Ich habe sie jedenfalls einfach von 1 bis 4 * durchnummeriert, das ist übersichtlich und hat bisher geklappt. */ #toolbar-menubar { -moz-box-ordinal-group: 1 !important; } #nav-bar { -moz-box-ordinal-group: 2 !important; } #PersonalToolbar { -moz-box-ordinal-group: 3 !important; } #TabsToolbar { -moz-box-ordinal-group: 4 !important; } /********************************************************** ********** Vollbildmodus ********************************* **********************************************************/ /* Damit die Rückkehr aus dem Vollbildmodus mit der Maus klappt: * Bei 0 bleiben die URL-Leiste und die Tab-Leiste immer sichtbar, * je größer der negative Wert, desto mehr verschwindet aus dem sichtbaren * Bereich, ein Pixel muß für den Mauskontakt am oberen Rand immer sichtbar * bleiben. Den Wert an die Leistenhöhe anpassen! */ #main-window[inFullscreen="true"] #navigator-toolbox { margin-top: -80px !important; } /* Bei Mauskontakt des noch sichtbaren Pixels die Leisten wieder einblenden */ #main-window[inFullscreen="true"] #navigator-toolbox:hover { margin-top: 0 !important; } /* Etwas schnellere Animation beim ein- und ausblenden, normal ist 1.5s */ #navigator-toolbox { transition: 0.5s !important; } /********************************************************** ********** Angaben für die TAB-Leiste ******************** **********************************************************/ /* TAB normal (inaktiv): * Hintergrundfarbe, Schriftfarbe, * Rahmen um die TABs, oben abgerundet und Abstände angepaßt, * unten kein Rahmen -> Abschlußrahmen vom Container. */ #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background { border:none!important;} #TabsToolbar .tabbrowser-tab { color: black !important; border: 1px solid !important; border-bottom: none !important; border-radius: 15px 15px 0 0 !important; margin: 3px 1px 1px 2px !important; padding: 1px 0 !important; } /* TAB bei Mauskontakt: * Hintergrundfarbe, Rahmen */ #TabsToolbar .tabbrowser-tab:hover { color: black !important; } /* TAB bei bei angewähltem TAB (aktiv): * Hintergrundfarbe, Rahmen, * Schriftfarbe. */ #TabsToolbar .tabbrowser-tab[selected="true"] { background: red !important; font-weight:bold !important; color: black ! important; } /* Tab-Icon etwas größer, * links weniger, unten etwas mehr Abstand zum TAB-Rand. */ #TabsToolbar .tab-icon-image { height: 20px !important; width: 20px !important; margin-left: -4px !important; margin-bottom: 2px !important; } /* Tab-Schließen-Button: * Rechts weniger Abstand zum TAB-Rand, etwas größer, * Textfarbe (Kreuz) * Hintergrundfarbe, an den Eckenradius des Buttons angepaßt. */ #TabsToolbar .tab-close-button { margin-right: -4px !important; padding: 0 !important; color: white !important; } #TabsToolbar .tab-close-button .toolbarbutton-icon { height: 22px !important; width: 22px !important; background-color: red !important; border-radius: 5px !important; } /* Tab-Schließen-Button bei angewähltem TAB (aktiv): * Hintergrundfarbe. */ #TabsToolbar .tab-close-button[selected="true"] .toolbarbutton-icon { background-color: blue !important; } /* Alle anderen Elemente in den TABs ohne Hintergrund. */ #TabsToolbar .tabbrowser-tab * { background: none !important; }
... mit diesem Ergebnis:
[attachment=0]Unbenannt.PNG[/attachment] -
Hallo,
ich beoachte das Thema hier von anfang an, aber mal ehrlich ich ps bin froh die schei.. abgerundeten Tabs nicht mehr zu haben. Die einfachen finde ich besser.wäre es eventl nicht einfacher wenn Mozilla direkt diese Tabs einfügen würde ?
-
.. ist halt Geschmackssache.. und Mozilla orientiert sich offensichtlich an deinem Geschmack...
Ich finde meine Version schöner... :mrgreen: -
Aris kann vielleicht helfen, hat das aber nicht unbedingt gelesen. Vielleicht eine PN an ihn?
Gute Idee, werde ich machen.
Hier werkelt dieser Code:
Danke, wenn das an mich gerichtet ist. Die Sache ist, dass ich den von Aris zur Verfügung gestellten Code wegen der Aerofarbe für alle Leisten inkl. Tabs verwenden möchte, plus einiger weiterer Anpassungen. Doch wenn ich irgendeinen anderen Code hinzufüge, wie z. b. den Code für geschwungene Tabs von wilfredwee, tritt dieser Effekt auf:
Füge ich den Code oberhalb der Aris-Konfiguration in die userChrome.css ein, werden zwar die Tabs geschwungen, doch alle Anpassungen des Aris-Code werden wirkungslos.
Füge ich den Code unterhalb der Aris-Konfiguration in die userChrome.css ein, ist eben dieser wirkungslos und keine Spur mehr von geschwungenen Tabs.
Es scheint, als würden die Codes einander wirkungslos machen. -
Es scheint, als würden die Codes einander wirkungslos machen.
So wird es wohl auch sein. :wink:
Das sind, soweit ich das sehe, zwei komplette Anpassungen für Tabs.
Falls du nun einfach die Codes der beiden aneinanderreihst, wird logischerweise immer Murks dabei herauskommen.
Vor allem auch, weil vielen der Anweisungen mit !important Priorität eingeräumt wird.
Du solltest dich erst einmal zwischen beiden "Styles" entscheiden und dann den benutzen, der deinen Vorstellungen am nächsten kommt. Den kannst du dann evtl. weiter deinen Wünschen entsprechend anpassen bzw. abändern. -