FF58: Tableiste "zuckt" beim Tabwechsel mittels Maushoover

Schrauberecke: Hier geht es um optische und funktionelle Veränderungen (ohne Themes oder Personas) von Firefox oder von Webseiten per CSS-Codes oder JavaScript.
Antworten
Benutzeravatar
klickman
Mitglied
Beiträge: 461
Registriert: Di, 26. Apr 2005 16:12

FF58: Tableiste "zuckt" beim Tabwechsel mittels Maushoover

#1

Beitrag von klickman Themen-Starter » Do, 25. Jan 2018 11:11

Hallo Kollegen,

seit Update auf FF58 habe ich den unschönen Effekt während eines Tabwechsels, dass die Tableiste in der Höhe "zuckt". Hier ein kurzer Videoclip:
https://www.dropbox.com/s/qq8ufyn0oaw9ich/Tabs.mov?dl=0
Interessanterweise tritt das nicht auf, wenn ich die Titelleiste in den Anpassungen ausblende. Sieht am Mac allerdings nicht so prickelnd aus:

Bildschirmfoto 2018-01-25 um 11.08.19.jpg
Bildschirmfoto 2018-01-25 um 11.08.19.jpg (139.09 KiB) 441 mal betrachtet

Als Übeltäter konnte ich den Code für geschwungene Tabs von wilfredwee auf Github identifizieren:

Code: Alles auswählen

/*GESCHWUNGENE TABS NACH WILFREDWEE*/

:root {
  --tab-curve-width: 30px;
  --tabs-border: transparent !important;
}

.arrowscrollbox-scrollbox {
  padding-inline-start: 10px !important;
}

/* To be able to see the top border of the tab */
.tab-stack {
  margin-top: 2px !important;
}

/* When the window is maximized, the first pinned tab is properly displayed. */
#TabsToolbar  {
  padding-inline-start: 15px !important;
}

.titlebar-placeholder {
  border: none !important;
}

/* Remove unneeded styles from Photon */
.tabbrowser-tab::before,
.tabbrowser-tab::after {
  border: none !important;
}

.tabbrowser-tab > .tab-stack > .tab-background {
  background-image: none !important;
  -moz-box-orient: horizontal !important;
  background-color: transparent !important;
  margin-top: 1px !important;
}

.tab-background[selected="true"] {
  border: none !important;
}

.tab-line {
  display: none !important;
}

.tab-bottom-line {
  display: none !important;
}

/* Match height of new tab button (right svg) on hover */
.tabs-newtab-button {
  margin: 0 !important;
}

/* overlap the tab curves */
.tab-background {
  -moz-margin-end: -15px !important;
  -moz-margin-start: -15px !important;
}

/* Begin tab background customizations */
.tab-background[selected="true"]::before {
  border: none !important;
  content: "" !important;
  width: 30px !important;
  min-height: 30px !important;
  display: -moz-box !important;
  background-repeat: no-repeat !important;
}

.tab-background[selected="true"]::after {
  border: none !important;
  content: "" !important;
  width: 30px !important;
  min-height: 30px !important;
  display: -moz-box !important;
  background-repeat: no-repeat !important;
}

.tab-background[selected="true"] > spacer {
  margin-top: 0px !important;
}

#new-tab-button,
.tabs-newtab-button {
  width: calc(36px + 30px) !important;
  margin-inline-start: -15px !important;
  margin-top: 1px !important;
}

/* Tab hover customizations */

/* Regular tabs */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
  display: -moz-box !important;
  background-repeat: no-repeat !important;
  content: "" !important;
  width: 30px !important;
  min-height: 30px !important;
  background-color: transparent !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
  display: -moz-box !important;
  background-repeat: no-repeat !important;
  content: "" !important;
  width: 30px !important;
  min-height: 30px !important;
  background-color: transparent !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
  margin-top: 0px !important;
}

#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;
}

/* New tab hover customizations */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]), .tabs-newtab-button:hover {
  background-position: 0px 2px, 30px 3px , right bottom !important;
  background-repeat: no-repeat !important;
  background-size: 30px 30px, calc(100% - (2 * 30px)) 30px, 30px !important;
}

.tabs-newtab-button:hover > .toolbarbutton-icon {
  background: none !important;
  background-color: transparent !important;
}

/* Color specific customizations */
.tab-background[selected="true"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgb(255,153,102);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
}
.tab-background[selected="true"]::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgb(255,153,102);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
}

.tab-background[selected="true"] > spacer {
  background-image:
  linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
  linear-gradient(
    transparent
    2px,
    rgb(255,153,102) 2px,
    rgb(255,153,102)
  ),
  none !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
  background-image:
  linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
  linear-gradient(
    transparent
    2px,
    rgba(255,255,255,.1) 2px,
    rgba(255,255,255,.1)
  ),
  none !important;
}

.tabs-newtab-button:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255,255,255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"),
    linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255,255,255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>")
    !important;
}
Sollte es wichtig sein, so habe ich noch die CusromCSSforFx von Aris in Verwendung:

Code: Alles auswählen

/*AGENT_SHEET*/

/* Firefox 57+ userChrome.css tweaks ************************************************************/
/* code mostly taken from 'Classic Theme Restorer' & 'Classic Toolbar Buttons' add-ons **********/
/* by Aris (aris-addons@gmx.net)*****************************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ********************************************/
/************************************************************************************************/

/************************************************************************************************/
/* Custom CSS for Firefox ***********************************************************************/
/* version 1.5.4 ********************************************************************************/
/************************************************************************************************/

/*************************************************************************************************

  README
  
  Finding profile folder: address bar > about:support > Profile Folder > Open Folder
  CSS files and sub-folders belong into \PROFILEFOLDER\chrome\ directory.
  \chrome\config\
  \chrome\css\
  \chrome\image\
  \chrome\xml\
  \chrome\userChrome.css
  \chrome\userContent.css
  
  ENABLING options: remove the combination of / and * before '@import'.
  DISABLING options: add the combination of / and * before '@import'.
  
  FIREFOX BUGS (nothing CSS code can do about):
  - some '@import' features might not work properly on macOS and Linux
  - some '@import' features might not work properly, if multi-process mode (e10s) is disabled
  
  CSS tweaks won't work, if '@namespace' references are used inside .css files!
  
  Do not report issues with EXPERIMENTAL settings! They are for testing only!
  
  All options have significant categories & names. Read whole file to get an overview.
  
  GENERAL SUPPORT / DISCUSSION THREAD: https://github.com/Aris-t2/CustomCSSforFx/issues/88

*************************************************************************************************/


/************************************************************************************************/
/* CONFIGURATION FILES - edit target files to change general values *****************************/
/************************************************************************************************/

/* GENERAL VARIABLES ****************************************************************************/
@import url(./config/general_variables.css); /**/

/* COLOR VARIABLES - only use one at a time *****************************************************/
/* @import url(./config/color_variables.css); /**/  /* <- default 'grey' colors */
@import url(./config/color_variables_aero.css); /**/  /* <- 'AeroBlue' colors */
/* @import url(./config/color_variables_classic-grey.css); /**/  /* <- 'classic grey' colors */
/* @import url(./config/color_variables_fx3.css); /**/  /* <- 'Firefox 3-like' colors */
/* @import url(./config/color_variables_classic-grey.css); /**/  /* <- 'classic grey' colors */
/* @import url(./config/color_variables_transparent.css); /**/  /* <- 'transparent' colors */
/* @import url(./config/color_variables_aeroglass.css); /**/  /* <- 'AeroGlass' colors / Win10 Glass8 fix is in 'toolbar' area */


/************************************************************************************************/
/* TOOLBAR BUTTONS ******************************************************************************/
/************************************************************************************************/

/* navigation toolbar buttons appearance - only use one at a time *******************************/
/* @import url(./css/buttons/buttons_on_navbar_classic_appearance.css); /**/
/* @import url(./css/buttons/buttons_on_navbar_glass_appearance.css); /**/

/* navigation toolbar buttons - button roundness (edit file to set different roundness) *********/
/* @import url(./css/buttons/buttons_on_navbar_button_roundness.css); /**/

/* squared buttons - only use one at a time (based on Firefox version) **************************/
/* @import url(./css/buttons/buttons_on_navbar_squared_buttons_fx57.css); /**/
/* @import url(./css/buttons/buttons_on_navbar_squared_buttons_fx58.css); /**/

/* icon appearance - only use one at a time (custom icons do not scale in HiDPI modes) **********/
/* @import url(./css/buttons/icons_colorized.css); /**/
/* @import url(./css/buttons/icons_white_icons.css); /**/
@import url(./css/buttons/icons_custom_icons.css); /**/  /* aka "Mozilla Mix" from CTB */
/* @import url(./css/buttons/icons_custom_icons_fx1.css); /**/
/* @import url(./css/buttons/icons_custom_icons_fx2.css); /**/
/* @import url(./css/buttons/icons_custom_icons_fx3.css); /**/
/* @import url(./css/buttons/icons_custom_icons_fx3strata.css); /**/
/* @import url(./css/buttons/icons_custom_icons_fx12_colorized.css); /**/
/* @import url(./css/buttons/icons_custom_icons_crystal.css); /**/
/* @import url(./css/buttons/icons_custom_icons_firebird.css); /**/
/* @import url(./css/buttons/icons_custom_icons_kempelton.css); /**/
/* @import url(./css/buttons/icons_custom_icons_noia.css); /**/
/* @import url(./css/buttons/icons_custom_icons_ie6.css); /**/
/* @import url(./css/buttons/icons_custom_icons_seamonkey.css); /**/
/* @import url(./css/buttons/icons_custom_icons_old_chrome.css); /**/
/* @import url(./css/buttons/icons_custom_icons_old_osx.css); /**/
/* @import url(./css/buttons/icons_custom_icons_tango.css); /**/
/* @import url(./css/buttons/icons_custom_icons_fx45.css); /**/
/* @import url(./css/buttons/icons_custom_icons_fx45_inverted.css); /**/

/* bookmarks toolbar - buttons appearance - only use one at a time ******************************/
/* old bookmarks toolbar button appearance - 'disable' for Windows 7s classic OS theme **********/
/* @import url(./css/buttons/buttons_on_bookmarks_toolbar_old_size_and_appearance.css); /**/
/* @import url(./css/buttons/buttons_on_bookmarks_toolbar_classic_appearance.css); /**/
/* @import url(./css/buttons/buttons_on_bookmarks_toolbar_classic_appearance_items.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_sidebar_item_hidden.css); /**/
/* @import url(./css/buttons/bookmarks_menu_button_popup_toolbar_item_hidden.css); /**/
/* @import url(./css/buttons/bookmarks_menu_button_popup_other_item_hidden.css); /**/
/* popup appearance - only use one at a time ****************************************************/
/* @import url(./css/buttons/bookmarks_menu_button_popup_classic_appearance.css); /**/
/* @import url(./css/buttons/bookmarks_menu_button_popup_classic_appearance_fx59.css); /**/

/* menubar - toolbar button appearance **********************************************************/
/* @import url(./css/buttons/buttons_on_menubar_toolbar_classic_appearance.css); /**/

/* other button settings ************************************************************************/
/* @import url(./css/buttons/forward_button_hide_when_disabled.css); /**/
/* @import url(./css/buttons/back_and_forward_separated_history_popups.css); /**/
/* @import url(./css/buttons/zoom_buttons_hide_reset.css); /**/

/* CUSTOM BACK & FORWARD BUTTONS appearance - only use one at a time ****************************/
/* @import url(./css/buttons/custom_backforward_connected_to_location_bar.css); /**/
/* @import url(./css/buttons/custom_backforward_connected_to_location_bar_aero.css); /**/	/* <-- AERO colors */
/* @import url(./css/buttons/custom_backforward_large_ff2.css); /**/
/* @import url(./css/buttons/custom_backforward_large_ff3.css); /**/
/* @import url(./css/buttons/custom_backforward_large_ff3_strata.css); /**/
/* @import url(./css/buttons/custom_backforward_large_ff3_strata_orange.css); /**/
/* @import url(./css/buttons/custom_backforward_large_ff3_strata_red.css); /**/
/* @import url(./css/buttons/custom_backforward_large_ie8.css); /**/
/* @import url(./css/buttons/custom_backforward_large_ie9.css); /**/
/* @import url(./css/buttons/custom_backforward_large_kempelton.css); /**/
/* @import url(./css/buttons/custom_backforward_small_ff3.css); /**/
/* @import url(./css/buttons/custom_backforward_small_ff3_strata.css); /**/
/* @import url(./css/buttons/custom_backforward_small_ff3_strata_orange.css); /**/
/* @import url(./css/buttons/custom_backforward_small_ff3_strata_red.css); /**/
/* @import url(./css/buttons/custom_backforward_small_ie8.css); /**/
/* @import url(./css/buttons/custom_backforward_small_ie9.css); /**/
/* @import url(./css/buttons/custom_backforward_small_kempelton.css); /**/


/************************************************************************************************/
/* APPLICATION/HAMBURGER BUTTON *****************************************************************/
/************************************************************************************************/

/* application/hamburger button hidden - disable all other appbutton options when using this ****/
/* @import url(./css/buttons/appbutton_hidden.css); /**/

/* application/hamburger button popup ***********************************************************/
@import url(./css/buttons/appbutton_popup_icons_colorized.css); /**/
@import url(./css/buttons/appbutton_popup_sync_hidden.css); /**/
/* @import url(./css/buttons/appbutton_popup_panelarrow_hidden_fx57.css); /**/ 
/* @import url(./css/buttons/appbutton_popup_panelarrow_hidden_fx58.css); /**/

/************************************************************************************************/
/* button on navigation toolbar *****************************************************************/
/************************************************************************************************/

/* @import url(./css/buttons/appbutton_on_navbar_start_position.css); /**/
@import url(./css/buttons/appbutton_on_navbar_separator_hidden.css); /**/

/* button color - only use one at a time ********************************************************/
/* @import url(./css/buttons/appbutton_on_navbar_color_autocolor.css); /**/
/* @import url(./css/buttons/appbutton_on_navbar_color_autocolor57p.css); /**/
/* @import url(./css/buttons/appbutton_on_navbar_color_orange.css); /**/
/* @import url(./css/buttons/appbutton_on_navbar_color_aurora.css); /**/
/* @import url(./css/buttons/appbutton_on_navbar_color_nightly.css); /**/
/* @import url(./css/buttons/appbutton_on_navbar_color_deved57p.css); /**/
/* @import url(./css/buttons/appbutton_on_navbar_color_nightly57p.css); /**/
/* @import url(./css/buttons/appbutton_on_navbar_color_palemoon.css); /**/

/* button icon - only use one at a time *********************************************************/
/* @import url(./css/buttons/appbutton_on_navbar_icon_white.css); /**/
/* @import url(./css/buttons/appbutton_on_navbar_icon_dark.css); /**/
/* @import url(./css/buttons/appbutton_on_navbar_icon_grey.css); /**/
/* @import url(./css/buttons/appbutton_on_navbar_icon_browser_logo.css); /**/


/************************************************************************************************/
/* button in Firefox titlebar - if menubar is disabled (Windows only) ***************************/
/************************************************************************************************/

/* button in titlebar - only use one at a time **************************************************/
/* @import url(./css/buttons/appbutton_in_titlebar.css); /**/
/* @import url(./css/buttons/appbutton_in_titlebar_icon_only.css); /**/
/* @import url(./css/buttons/appbutton_in_titlebar_icon_only_dark.css); /**/
/* @import url(./css/buttons/appbutton_in_titlebar_icon_only_grey.css); /**/
/* @import url(./css/buttons/appbutton_in_titlebar_icon_only_browser_logo.css); /**/

/* button color - only use one at a time ********************************************************/
/* @import url(./css/buttons/appbutton_in_titlebar_autocolor.css); /**/
/* @import url(./css/buttons/appbutton_in_titlebar_autocolor57p.css); /**/
/* @import url(./css/buttons/appbutton_in_titlebar_transparent.css); /**/
/* @import url(./css/buttons/appbutton_in_titlebar_semi_transparent.css); /**/
/* @import url(./css/buttons/appbutton_in_titlebar_aurora.css); /**/
/* @import url(./css/buttons/appbutton_in_titlebar_nightly.css); /**/
/* @import url(./css/buttons/appbutton_in_titlebar_deved57p.css); /**/
/* @import url(./css/buttons/appbutton_in_titlebar_nightly57p.css); /**/
/* @import url(./css/buttons/appbutton_in_titlebar_palemoon.css); /**/


/************************************************************************************************/
/* TABS - appearance and position ***************************************************************/
/************************************************************************************************/

/* custom tab appearance - only use one at a time ***********************************************/
/* @import url(./css/tabs/classic_squared_tabs.css); /**/
/* @import url(./css/tabs/classic_squared_tabs_australized.css); /**/

/* custom tab colors for default/active/hovered/unread/unloaded tabs ****************************/
/* only use one at a time - edit target file to set own custom colors ***************************/
/* @import url(./css/tabs/custom_colors_for_squared_tabs.css); /**/
/* @import url(./css/tabs/custom_colors_for_squared_tabs_australized.css); /**/

/* remove top corner roundness ******************************************************************/
/* @import url(./css/tabs/classic_squared_tabs_fully_squared.css); /**/

/************************************************************************************************/
/* TABS TOOLBAR POSITION (below titlebar / below navigation toolbar / below main content) *******/
/************************************************************************************************/

/* only use one at a time - below titlebar OR below navigation bar OR below main content ********/
/* - TABS BELOW TITLEBAR (Fx56-like) ************************************************************/
/* @import url(./css/tabs/tabs_below_titlebar_above_navigation_toolbar.css); /**/
/* - TABS BELOW NAVIGATION AND BOOKMARKS TOOLBARS (tabs not on top) *****************************/
@import url(./css/tabs/tabs_below_navigation_toolbar.css); /**/ 									/* <-- tabs not on top */
/* - TABS BELOW MAIN CONTENT (tabs on bottom) - EXPERIMENTAL ************************************/
/* - SUPPORT THREAD: https://github.com/aris-t2/customcssforfx/issues/33 ************************/
/* @import url(./css/tabs/tabs_below_main_content.css); /**/  /* <--- EXPERIMENTAL */
/************************************************************************************************/
/* - MOVE NAVIGATION TOOLBAR UP TO HIGHER POSITON (tabs not on top) - only use one at a time ****/
/* @import url(./css/tabs/tabs_below_navigation_toolbar_higher_navbar_positon.css); /**/  /* <--- EXPERIMENTAL */
/* @import url(./css/tabs/tabs_below_navigation_toolbar_higher_navbar_positon_with_appbutton.css); /**/  /* <--- EXPERIMENTAL */
/* @import url(./css/tabs/tabs_below_navigation_toolbar_higher_navbar_positon_with_appbutton_icon_only.css); /**/  /* <--- EXPERIMENTAL */
/************************************************************************************************/

/* TAB TEXT colors/shadow/weight/style for default/active/hovered/unread/unloaded tabs **********/
/* edit target file to set own custom colors ****************************************************/
@import url(./css/tabs/custom_text_settings.css); /**/

/* MULTIROW / multi lined tabs - only use one at a time *****************************************/
/* - SUPPORT THREAD: https://github.com/aris-t2/customcssforfx/issues/39 ************************/
/* - BUG: dragging tabs does not work properly with multi lined tabs ****************************/
/* - for v1 see https://00.bulog.jp/archives/1476 ***********************************************/
/* - for v2 see https://www.reddit.com/r/FirefoxCSS/comments/7dclp7/multirow_tabs_in_ff57/ ******/
/* @import url(./css/tabs/tabs_multiple_lines.css); /**/  /* <--- EXPERIMENTAL */
/* @import url(./css/tabs/tabs_multiple_lines_v2.css); /**/  /* <--- EXPERIMENTAL */

/* restore empty/missing tab favicon - only use one at a time ***********************************/
@import url(./css/tabs/missing_tab_favicon_restored_default.css); /**/
/* @import url(./css/tabs/missing_tab_favicon_restored_globe_v2.css); /**/
/* @import url(./css/tabs/missing_tab_favicon_restored_sheet.css); /**/
/* @import url(./css/tabs/missing_tab_favicon_restored_dotted.css); /**/
/* @import url(./css/tabs/missing_tab_favicon_restored_dotted_white.css); /**/

/* custom tab loading animation - only use one at a time ****************************************/
/* @import url(./css/tabs/tab_throbber_blue_fx56.css); /**/
@import url(./css/tabs/tab_throbber_blue.css); /**/
/* @import url(./css/tabs/tab_throbber_grey_classic.css); /**/
/* @import url(./css/tabs/tab_throbber_green.css); /**/
/* @import url(./css/tabs/tab_throbber_orange_ubuntu.css); /**/

/* tab close icon settings - only use one at a time *********************************************/
/* @import url(./css/tabs/tab_close_always_visible.css); /**/
/* @import url(./css/tabs/tab_close_on_active_tab_only.css); /**/
/* @import url(./css/tabs/tab_close_show_on_hover_only.css); /**/
@import url(./css/tabs/tab_close_hidden.css); /**/
/* @import url(./css/tabs/tab_close_hidden_for_only_one_visible_tab.css); /**/
/* @import url(./css/tabs/tab_close_at_tabs_start.css); /**/
/* @import url(./css/tabs/tab_close_icon_size.css); /**/

/* tab title - only use one at a time ***********************************************************/
/* @import url(./css/tabs/tab_title_left.css); /**/
/* @import url(./css/tabs/tab_title_centered.css); /**/
/* @import url(./css/tabs/tab_title_right.css); /**/

/* DEFAULT TABS - use only, if 'classic squared tabs' are disabled ******************************/
/* @import url(./css/tabs/default_tabs_tab_border.css); /**/
/* @import url(./css/tabs/default_tabs_round_top_borders.css); /**/
/* @import url(./css/tabs/default_tabs_tab_background_appearance.css); /**/
/* tab line settings - only use one at a time ***************************************************/
/* @import url(./css/tabs/default_tabs_no_tab_line.css); /**/
/* @import url(./css/tabs/default_tabs_tab_line_purple_in_private_mode.css); /**/

/* other tab settings ***************************************************************************/
@import url(./css/tabs/tab_icon_colors.css); /**/
/* @import url(./css/tabs/tab_maxwidth.css); /**/
/* @import url(./css/tabs/tab_titles_remove_blur.css); /**/
/* @import url(./css/tabs/alltabs_button_always_visible.css); /**/
/* @import url(./css/tabs/pinnedtab_empty_favicon_hidden.css); /**/
/* edit target file to select which items to hide ***********************************************/
/* @import url(./css/tabs/tab_context_menuitems_visibility.css); /**/


/************************************************************************************************/
/* GENERAL UI ***********************************************************************************/
/************************************************************************************************/

@import url(./css/generalui/private_mode_indicator_hidden.css); /**/
@import url(./css/generalui/bookmark_icons_colorized.css); /**/
/* @import url(./css/generalui/bookmarks_smaller_more_bookmarks_icon.css); /**/
@import url(./css/generalui/send_to_device_menuitems_hidden.css); /**/
@import url(./css/generalui/popup_animation_fade_time_reduced.css); /**/
/* @import url(./css/generalui/increase_ui_font_size.css); /**/
/* @import url(./css/generalui/flex_space_on_navbar_replace_with_separator.css); /**/

/* overflow menu - only use one at a time *******************************************************/
/* @import url(./css/generalui/overflow_menu_remove_text.css); /**/
/* @import url(./css/generalui/overflow_menu_horizontal_remove_text.css); /**/

/* sidebar **************************************************************************************/
/* @import url(./css/generalui/sidebar_width_unrestricted.css); /**/
/* @import url(./css/generalui/sidebar_header_icons_colorized.css); /**/
/* @import url(./css/generalui/sidebar_header_lwtheme.css); /**/
/* sidebar appearance - only use one at a time **************************************************/
/* @import url(./css/generalui/sidebar_appearance_dark.css); /**/
/* @import url(./css/generalui/sidebar_appearance_lwtheme_bright.css); /**/
/* @import url(./css/generalui/sidebar_appearance_lwtheme_dark.css); /**/

/* findbar **************************************************************************************/
/* @import url(./css/generalui/findbar_on_top.css); /**/
@import url(./css/generalui/findbar_show_full_quickfindbar.css); /**/
/* findbar - close icon position - only use one at a time ***************************************/
/* @import url(./css/generalui/findbar_on_top_close_at_findbars_start.css); /**/
/* @import url(./css/generalui/findbar_on_bottom_close_at_findbars_start.css); /**/

/* page context menu items: 'back', 'forward', 'reload', 'stop', 'bookmarks' ********************/
@import url(./css/generalui/context_bfrsb_icons_colorized.css); /**/
/* menuitem labels - only use one at a time *****************************************************/
/* @import url(./css/generalui/context_bfrsb_labels_without_icons.css); /**/
/* @import url(./css/generalui/context_bfrsb_labels_with_icons.css); /**/

/* close icons for general ui and tabs - only use one at a time *********************************/
/* @import url(./css/generalui/close_icon_windows7.css); /**/
/* @import url(./css/generalui/close_icon_windows7inverted.css); /**/
/* @import url(./css/generalui/close_icon_windows7v2.css); /**/
/* @import url(./css/generalui/close_icon_gchrome.css); /**/
/* @import url(./css/generalui/close_icon_red.css); /**/
/* @import url(./css/generalui/close_icon_windows10.css); /**/
/* @import url(./css/generalui/close_icon_windows10inverted.css); /**/
/* @import url(./css/generalui/close_icon_windows10red.css); /**/
/* @import url(./css/generalui/close_icon_windows10redv2.css); /**/
/* @import url(./css/generalui/close_icon_firefox3.css); /**/

/* SEARCHBAR ************************************************************************************/
@import url(./css/generalui/searchbar_glassplus_indicator_hidden.css); /**/
@import url(./css/generalui/searchbar_go_button_hidden.css); /**/

/* search engine settings - only use one at a time **********************************************/
/* @import url(./css/generalui/searchbar_popup_engines_hidden.css); /**/
/* @import url(./css/generalui/searchbar_popup_engines_show_labels.css); /**/

/* MENUBAR - bookmarks popup (not compatible to macOS/Linux) ************************************/
/* @import url(./css/generalui/menubar_bookmarks_popup_bookmark_page_item_hidden.css); /**/
/* @import url(./css/generalui/menubar_bookmarks_popup_subscribe_item_hidden.css); /**/
/* @import url(./css/generalui/menubar_bookmarks_popup_toolbar_item_hidden.css); /**/
/* @import url(./css/generalui/menubar_bookmarks_popup_other_item_hidden.css); /**/


/************************************************************************************************/
/* TOOLBARS *************************************************************************************/
/************************************************************************************************/

/* ADDON BAR - simulate add-on bar by moving bookmarks toolbar to the bottom ********************/
/* [!] move 'Bookmarks Toolbar Items' to navigation bar to get a top toolbar with bookmarks *****/
/* [!] not compatible to 'bookmarks toolbar - multiple lines' option ****************************/
/* [!] not compatible to 'tabs toolbar - below main content' option *****************************/
/* - SUPPORT THREAD: https://github.com/aris-t2/customcssforfx/issues/73 ************************/
/* @import url(./css/toolbars/addonbar_move_bookmarks_toolbar_to_bottom.css); /**/  /* <--- EXPERIMENTAL */
/* @import url(./css/toolbars/addonbar_status_in_addonbar.css); /**/  /* <--- EXPERIMENTAL */
/* @import url(./css/toolbars/addonbar_content_on_the_right.css); /**/  /* <--- EXPERIMENTAL */
 
/* 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); /**/

/* menubar **************************************************************************************/
/* @import url(./css/toolbars/menubar_fog_hidden.css); /**/
/* @import url(./css/toolbars/menubar_in_fullscreen_mode.css); /**/
/* menubar color - ******************************************************************************/
/* @import url(./css/toolbars/menubar_color.css); /**/

/* bookmarks toolbar ****************************************************************************/
/* @import url(./css/toolbars/bookmarks_toolbar_old_height.css);
/* @import url(./css/toolbars/bookmarks_toolbar_in_fullscreen_mode.css); /**/
/* @import url(./css/toolbars/bookmarks_toolbar_multiple_lines.css); /**/ /* <--- EXPERIMENTAL */

/* toolbar colors - *****************************************************************************/
@import url(./css/toolbars/general_toolbar_colors.css); /**/

/* AeroGlass toolbars - separated - set per toolbar / WIN10 fix for GLASS8 **********************/
/* @import url(./css/toolbars/general_toolbar_colors_navigation_toolbar_aeroglass.css); /**/
/* @import url(./css/toolbars/general_toolbar_colors_bookmarks_toolbar_aeroglass.css); /**/
/* @import url(./css/toolbars/general_toolbar_colors_tabs_toolbar_aeroglass.css); /**/
/* Windows 10 fix for Glass8 - Glass8 required for 'Windows 7'-like window transparency */
/* @import url(./css/toolbars/general_toolbar_colors_aeroglass_windows10_glass8.css); /**/  /* <--- EXPERIMENTAL */

/* TOOLBAR TEXT MODES - only use one at a time **************************************************/
/* @import url(./css/toolbars/toolbar_mode_icons_and_text.css); /**/
/* @import url(./css/toolbars/toolbar_mode_text.css); /**/


/************************************************************************************************/
/* LOCATION BAR *********************************************************************************/
/************************************************************************************************/

/* general location bar tweaks ******************************************************************/
@import url(./css/locationbar/locationbar_adjustments.css); /**/
@import url(./css/locationbar/compact_mode_reduce_fontsize.css); /**/
/* @import url(./css/locationbar/background_color_dark.css); /**/
/* @import url(./css/locationbar/locationbar_border_roundness.css); /**/
@import url(./css/locationbar/locationbar_reduce_height.css); /**/

/* identity box / page identity button **********************************************************/
@import url(./css/locationbar/identitybox_replace_i_icon_with_globe.css); /**/
@import url(./css/locationbar/identitybox_colors.css); /**/
/* @import url(./css/locationbar/identitybox_labels_hidden.css); /**/

/* padlock icons in identity box / page identity button - only use one at a time ****************/
/* @import url(./css/locationbar/identitybox_padlock_icon_classic.css); /**/
@import url(./css/locationbar/identitybox_padlock_icon_classic2.css); /**/
/* @import url(./css/locationbar/identitybox_padlock_icon_modern.css); /**/
/* @import url(./css/locationbar/identitybox_padlock_icon_modern2.css); /**/
/* @import url(./css/locationbar/identitybox_padlock_icon_hidden.css); /**/

/* additional icons/buttons and tweaks for third party page action buttons **********************/
@import url(./css/locationbar/icons_colorized.css); /**/
/* @import url(./css/locationbar/reader_alternative_icon.css); /**/
/* @import url(./css/locationbar/popup_blocked_button_hidden.css); /**/
@import url(./css/locationbar/zoom_button_hidden.css); /**/
@import url(./css/locationbar/go_button_in_location_bar_hidden.css); /**/

/* page action button (three dots) / separator **************************************************/
@import url(./css/locationbar/pageaction_separator_in_location_bar_hidden.css); /**/
/* @import url(./css/locationbar/pageaction_button_in_location_bar_hidden.css); /**/
/* @import url(./css/locationbar/pageaction_button_rotated_and_last_pageaction_button.css); /**/

/* star button **********************************************************************************/
/* @import url(./css/locationbar/starbutton_alternative_icon.css); /**/
/* @import url(./css/locationbar/starbutton_is_last_pageaction_button.css); /**/

/* autocomplete / history dropmarker ************************************************************/
@import url(./css/locationbar/dropmarker_at_the_end.css); /**/
/* @import url(./css/locationbar/dropmarker_visible.css); /**/


/************************************************************************************************/
/* LOCATION BAR - 'autocomplete popup' appearance ***********************************************/
/************************************************************************************************/

/* NOTE: 'Classic popup with two lined results' will stop working soon when Mozilla drops XBL ****
		 support. See https://bugzilla.mozilla.org/show_bug.cgi?id=1397874 **********************/

/* popup content order/appearance - only use one at a time **************************************/
/* @import url(./css/locationbar/ac_popup_classic_with_two_lines.css); /**/
/* @import url(./css/locationbar/ac_popup_title_and_url_50percent_width.css); /**/
/* @import url(./css/locationbar/ac_popup_url_and_title_50percent_width.css); /**/
/* @import url(./css/locationbar/ac_popup_item_title_hidden.css); /**/
/* @import url(./css/locationbar/ac_popup_item_title_visible_on_hover_only.css); /**/

/* result settings/appearance *******************************************************************/
/* @import url(./css/locationbar/ac_popup_result_highlighting_aero.css); /**/
/* @import url(./css/locationbar/ac_popup_keysearch_bold.css); /**/
/* @import url(./css/locationbar/ac_popup_keysearch_underline.css); /**/
/* @import url(./css/locationbar/ac_popup_result_separator.css); /**/

/* hide 'Search with...' and 'Visit...' results *************************************************/
/* - browser preferences: disable 'show search suggestions inside address bar results' **********/
/* - hide bottom search engines: about:config > browser.urlbar.oneOffSearches > false ***********/
/* @import url(./css/locationbar/ac_popup_searchwith_and_visit_items_hidden.css); /**/


/************************************************************************************************/
/************************************************************************************************/
/* Create a new file "my_userChrome.css" and add own/custom code to it. *************************/
@import url(./my_userChrome.css); /**/
/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/
Und weiters:

Code: Alles auswählen

/* LESEANSICHT AUS URL-BAR ENTFRNEN */
#reader-mode-button{
	display:none!important;
}

/* ABWÄRTSPFEIL URL-BAR ENTFERNEN */
.urlbar-history-dropmarker {
opacity: 0 !important;
}

/* LETZTEN TAB AUSBLENDEN */
#TabsToolbar .tabbrowser-tab:only-of-type {
  display: none !important;
}

/* GRÖßE SCHRIFT, TAB */
.tabbrowser-tab[selected="true"]{
font-size: 14px !important;
}
.tabbrowser-tab[unread="true"]{
font-size: 14px !important;
}
.tabbrowser-tab[pending="true"]{
font-size: 14px !important;
}
.tabbrowser-tab:hover:not[selected="true"]{
font-size: 14px !important;
}
.tabbrowser-tab{
font-size: 14px !important;
}
Sowie diese Scripte:
HideTabbarWithOneTab.uc.js
RestartFirefoxButtonM.uc.js
TabFocus.uc.js

Findet jemand den Fehler?

Sollte es keine Lösung geben, dann wären mir die geschwungenen Tabs nicht sooo wichtig. Die oberen Ecken abgerundet ginge auch schon. ;-) Was ich aber jedenfalls gerne hätte, egal ob geschwungene oder gerundete Tabs, das ist die orange Färbung des aktiven Tabs.

Besten Dank schon mal!
Gruß
Manfred

FF62 Beta in aktueller Version, auf MacBook Pro unter macOS Sierra 10.13.6

kyou

Re: FF58: Tableiste "zuckt" beim Tabwechsel mittels Maushoover

#2

Beitrag von kyou » Do, 25. Jan 2018 17:51

Code: Alles auswählen

.tabbrowser-tab:hover:not[selected="true"]{
font-size: 14px !important;
}
Da fehlen, glaub ich, runde Klammern:

Code: Alles auswählen

.tabbrowser-tab:hover:not([selected="true"])

Benutzeravatar
klickman
Mitglied
Beiträge: 461
Registriert: Di, 26. Apr 2005 16:12

Re: FF58: Tableiste "zuckt" beim Tabwechsel mittels Maushoover

#3

Beitrag von klickman Themen-Starter » Do, 25. Jan 2018 17:59

Danke für deinen Hinweis, die hinzugefügten Klammern ändern leider nichts.
Gruß
Manfred

FF62 Beta in aktueller Version, auf MacBook Pro unter macOS Sierra 10.13.6

Benutzeravatar
Tommy Tulpe
Junior-Mitglied
Beiträge: 14
Registriert: Sa, 29. Mär 2014 9:21

Re: FF58: Tableiste "zuckt" beim Tabwechsel mittels Maushoover

#4

Beitrag von Tommy Tulpe » Fr, 02. Feb 2018 20:53

Hi klickman,
dass Problem hatte ich auch, zur Zeit unseres großen Threads mit den abgerundeten Ecken.
Habe nochmals den Code von wilfred herunter geladen, da der den Fehler (2017) als "Bug" markiert watte.
(https://github.com/wilfredwee/photon-australis/issues/6)

Der neue Code ist (Stand:heute) 7 Tage alt, also von 2018. Habe den "default.css" genommen, obwohl ich ein eigenes Theme benutze. Und siehe da, KEIN Springen mehr vorhanden :klasse:

PS: falls Du noch die farbigen Tabs benutzen solltest, mußt Du dann natürlich wieder Deine eigenen Farbcodes übertragen :idea: :wink:

Benutzeravatar
klickman
Mitglied
Beiträge: 461
Registriert: Di, 26. Apr 2005 16:12

Re: FF58: Tableiste "zuckt" beim Tabwechsel mittels Maushoover

#5

Beitrag von klickman Themen-Starter » Fr, 02. Feb 2018 22:21

Danke sehr für deine Antwort! Ich hab gesehen, dass das als Bug auf Github geführt wurde/wird, die dort angeführten Lösungsvorschläge brachten bei mir allerdings keine Abhilfe. So hab ich mit Hilfe der Aris-Konfiguration zwar "square" Tabs, aber dennoch eingefärbt. Noch dazu ist die Tableiste nun auch in der Höhe geringer, was mir gut gefällt. Ich denke, ich lass die Wilfridwee-Konfiguration jetzt mal bis auf weiteres weg. Mal sehen, ob ich in einer Woche wieder Gusto drauf bekomme. ;-)
Jedenfalls noch mal danke!
Gruß
Manfred

FF62 Beta in aktueller Version, auf MacBook Pro unter macOS Sierra 10.13.6

pascallo
Mitglied
Beiträge: 71
Registriert: Mi, 27. Sep 2006 9:44

Re: FF58: Tableiste "zuckt" beim Tabwechsel mittels Maushoover

#6

Beitrag von pascallo » So, 04. Feb 2018 8:33

Tommy Tulpe hat geschrieben:
Fr, 02. Feb 2018 20:53

Der neue Code ist (Stand:heute) 7 Tage alt, also von 2018. Habe den "default.css" genommen, obwohl ich ein eigenes Theme benutze. Und siehe da, KEIN Springen mehr vorhanden :klasse:
Danke für den Tip! Eben angepasst....funzt prima ohne springen!!!! :klasse: :D

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast