Thunderbird_102_ESR/css/appbutton/classic_appbutton.css
/* Thunderbird userChrome.css tweaks ************************************************************/
/* Github: https://github.com/aris-t2/customcssfortb ********************************************/


:root {
  --appbuttonlabel: "Thunderbird";
  --appbuttoncolor1: #33CCFF;
  --appbuttoncolor2: #3366FF;
  --appbuttontextcolor: #FFFFFF;
  --appbuttontextshadowcolor: #000000;
}

:is(#button-appmenu,#calendar-appmenu-button,#button-chat-appmenu):not(:hover):not(:active):not([open]){
  appearance: none !important;
  background: linear-gradient(var(--appbuttoncolor1), var(--appbuttoncolor2) 95%) !important;
  transition: unset !important;
  border-top-color:hsla(214,89%,21%,.5) !important;
  border-right-color:hsla(214,89%,21%,.5) !important;
  border-left-color: hsla(214,89%,21%,.5) !important;
  border-bottom-color: hsla(214,89%,21%,.5) !important;
  box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
			  0 0 2px 1px hsla(0,0%,100%,.25) inset,
			  0 1px 0 0px rgba(255,255,255,.6),
			  0 -1px 0 0px rgba(255,255,255,.6),
			  1px 0 0 0px rgba(255,255,255,.6),
			  -1px 0 0 0px rgba(255,255,255,.6) !important;
}
:is(#button-appmenu,#calendar-appmenu-button,#button-chat-appmenu):hover:not(:active):not([open]){
  appearance: none !important;
  background: radial-gradient(farthest-side at center bottom, hsla(0,0%,100%,.5) 10%, hsla(0,0%,100%,0) 70%),
			  radial-gradient(farthest-side at center bottom, hsla(0,0%,100%,.7), hsla(0,0%,100%,0)),
			  linear-gradient(var(--appbuttoncolor1), var(--appbuttoncolor2) 95%) !important;
  transition: unset !important;
  border-color: rgba(83,42,6,.9) !important;
  box-shadow: 0 1px 0 hsla(0,0%,100%,.15) inset,
			  0 0 2px 1px hsla(0,0%,100%,.5) inset,
			  0 -1px 0 hsla(0,0%,100%,.2),
			  0 1px 0 0px rgba(255,255,255,.6),
			  0 -1px 0 0px rgba(255,255,255,.6),
			  1px 0 0 0px rgba(255,255,255,.6),
			  -1px 0 0 0px rgba(255,255,255,.6) !important;
}
:is(#button-appmenu,#calendar-appmenu-button,#button-chat-appmenu):active,
:is(#button-appmenu,#calendar-appmenu-button,#button-chat-appmenu):hover:active,
:is(#button-appmenu,#calendar-appmenu-button,#button-chat-appmenu)[open] {
  appearance: none !important;
  background: radial-gradient(farthest-side at center bottom, hsla(0,0%,100%,.5) 10%, hsla(0,0%,100%,0) 70%),
			  radial-gradient(farthest-side at center bottom, hsla(0,0%,100%,.7), hsla(0,0%,100%,0)),
			  linear-gradient(var(--appbuttoncolor1), var(--appbuttoncolor2) 95%) !important;
  transition: unset !important;
  border-color: rgba(83,42,6,.9) !important;
  box-shadow: 0 2px 3px rgba(0,0,0,.4) inset,
			  0 1px 1px rgba(0,0,0,.2) inset,
			  0 1px 0 0px rgba(255,255,255,.6),
			  0 -1px 0 0px rgba(255,255,255,.6),
			  1px 0 0 0px rgba(255,255,255,.6),
			  -1px 0 0 0px rgba(255,255,255,.6) !important;
}
:is(#button-appmenu,#calendar-appmenu-button,#button-chat-appmenu) {
  appearance:none !important;
  transition: unset !important;
  background-clip: padding-box !important;
  color: var(--appbuttontextcolor) !important;
  text-shadow: 0 0 1px var(--appbuttontextshadowcolor),
			   0 1px 1.5px var(--appbuttontextshadowcolor) !important;
  font-weight: bold !important;
  padding: 0px 8px !important;
  border-top: 1px solid !important;
  border-right: 1px solid !important;
  border-left: 1px solid !important;
  border-bottom: 1px solid !important;
}
:is(#button-appmenu,#calendar-appmenu-button,#button-chat-appmenu):not(:is(:hover:active,[open])) {
  border-radius: 3px !important;
}
:is(#button-appmenu,#calendar-appmenu-button,#button-chat-appmenu):is(:hover:active,[open]) {
  border-radius: 3px 3px 0 0 !important;
}

#tabs-toolbar :is(#button-appmenu,#calendar-appmenu-button,#button-chat-appmenu):not(:is(:hover:active,[open])),
#tabs-toolbar :is(#button-appmenu,#calendar-appmenu-button,#button-chat-appmenu):is(:hover:active,[open]) {
  border-radius: 3px 3px 0 0 !important;
  margin-inline-start: 0px !important;
}


:is(#button-appmenu,#calendar-appmenu-button,#button-chat-appmenu) .toolbarbutton-menu-dropmarker {
  display: -moz-box !important;
}

/*
:is(#button-appmenu,#calendar-appmenu-button,#button-chat-appmenu) .toolbarbutton-menu-dropmarker::before {
  display: -moz-box !important; 
  content: var(--appbuttonlabel) !important;
  padding-inline-end: 4px !important;
}*/

:is(#button-appmenu,#calendar-appmenu-button,#button-chat-appmenu)::after {
  display: -moz-box !important; 
  content: var(--appbuttonlabel) !important;
  margin-inline-start: -18px !important;
}

:is(#button-appmenu,#calendar-appmenu-button,#button-chat-appmenu) .toolbarbutton-text {
  display: none !important;
}

:is(#button-appmenu,#calendar-appmenu-button,#button-chat-appmenu) .toolbarbutton-icon {
  opacity: 0 !important;
}
/*
:is(#button-appmenu,#calendar-appmenu-button,#button-chat-appmenu) .toolbarbutton-menu-dropmarker::before {
  margin-inline-start: -20px !important;
}*/

#tabbar-toolbar {
  margin-bottom: 1px !important;
}

#mail-toolbar-menubar2 :is(#button-appmenu,#calendar-appmenu-button,#button-chat-appmenu) {
  position: absolute !important;
  margin-top: 0px !important;
  margin-inline-start: 0px !important;
}
