mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-03 22:38:41 +09:00
Use windows 10 Accent colors.
This commit is contained in:
wolfbeast
Roy Tam
parent
bfc4f952ac
commit
d3f2fe9a7e
4 changed files with 406 additions and 220 deletions
|
|
@ -46,8 +46,7 @@
|
|||
color: graytext;
|
||||
}
|
||||
|
||||
@media (-moz-os-version: windows-vista),
|
||||
(-moz-os-version: windows-win7) {
|
||||
@media (-moz-os-version: windows-win7) {
|
||||
.sidebar-header:not(:-moz-lwtheme),
|
||||
#sidebar-header:not(:-moz-lwtheme) {
|
||||
background-color: #EEF3FA;
|
||||
|
|
@ -83,190 +82,353 @@
|
|||
-moz-appearance: -moz-win-exclude-glass;
|
||||
}
|
||||
|
||||
@media not all and (-moz-os-version: windows-vista) {
|
||||
@media not all and (-moz-os-version: windows-win7) {
|
||||
@media not all and (-moz-os-version: windows-win8) {
|
||||
@media (-moz-windows-default-theme) {
|
||||
#main-window {
|
||||
background-color: hsl(0, 0%, 78%);
|
||||
}
|
||||
@media (-moz-os-version: windows-win10) {
|
||||
/* Draw XUL caption buttons and background on Windows 10 */
|
||||
@media (-moz-windows-default-theme) {
|
||||
#main-window {
|
||||
background-color: hsl(0, 0%, 78%);
|
||||
}
|
||||
|
||||
:root[tabsintitlebar] .tab-label:-moz-window-inactive {
|
||||
/* Calculated to match the opacity change of Windows Explorer
|
||||
titlebar text change for inactive windows. */
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
:root[tabsintitlebar] .tab-label:-moz-window-inactive {
|
||||
/* Calculated to match the opacity change of Windows Explorer
|
||||
titlebar text change for inactive windows. */
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
@media not all and (-moz-windows-default-theme) {
|
||||
#main-window {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
@media not all and (-moz-windows-accent-color-applies) {
|
||||
/* Default styling for when no accent color is applied */
|
||||
#main-window:not(:-moz-window-inactive):not(:-moz-lwtheme) {
|
||||
background-color: hsl(235, 33%, 19%);
|
||||
}
|
||||
|
||||
:root:not(:-moz-window-inactive):not(:-moz-lwtheme) {
|
||||
--titlebar-text-color: white;
|
||||
}
|
||||
|
||||
#titlebar-min:not(:-moz-window-inactive):not(:-moz-lwtheme) {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-highlight);
|
||||
}
|
||||
|
||||
#titlebar-buttonbox,
|
||||
.titlebar-button {
|
||||
-moz-appearance: none !important;
|
||||
}
|
||||
#titlebar-max:not(:-moz-window-inactive):not(:-moz-lwtheme) {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-highlight);
|
||||
}
|
||||
|
||||
.titlebar-button {
|
||||
border: none;
|
||||
margin: 0 !important;
|
||||
padding: 10px 17px;
|
||||
}
|
||||
#main-window[sizemode="maximized"] #titlebar-max:not(:-moz-window-inactive):not(:-moz-lwtheme) {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-highlight);
|
||||
}
|
||||
|
||||
#titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme) {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highlight);
|
||||
}
|
||||
|
||||
#main-window[sizemode=maximized] .titlebar-button {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover {
|
||||
background-color: hsla(0, 0%, 100%, .17);
|
||||
}
|
||||
|
||||
.titlebar-button > .toolbarbutton-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
.titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active {
|
||||
background-color: hsla(0, 0%, 100%, .27);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover {
|
||||
background-color: hsla(0, 86%, 49%, 1);
|
||||
}
|
||||
|
||||
#titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active {
|
||||
background-color: hsla(0, 60%, 39%, 1);
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-windows-accent-color-applies) {
|
||||
/* Styling for when an accent color is applied to the titlebar */
|
||||
#main-window:not(:-moz-window-inactive):not(:-moz-lwtheme) {
|
||||
background-color: -moz-win-accentcolor;
|
||||
}
|
||||
|
||||
:root:not(:-moz-window-inactive):not(:-moz-lwtheme) {
|
||||
--titlebar-text-color: -moz-win-accentcolortext;
|
||||
}
|
||||
|
||||
#titlebar-min {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
|
||||
}
|
||||
|
||||
#titlebar-max {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize);
|
||||
}
|
||||
|
||||
#main-window[sizemode="maximized"] #titlebar-max {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
|
||||
}
|
||||
|
||||
#titlebar-close {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
|
||||
}
|
||||
|
||||
.titlebar-button:hover {
|
||||
background-color: hsla(0, 0%, 0%, .17);
|
||||
}
|
||||
|
||||
.titlebar-button:hover:active {
|
||||
background-color: hsla(0, 0%, 0%, .27);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
@media (-moz-windows-accent-color-is-dark) {
|
||||
/* dark accent color */
|
||||
#titlebar-min {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-highlight);
|
||||
}
|
||||
|
||||
#titlebar-max {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize);
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-highlight);
|
||||
}
|
||||
|
||||
#main-window[sizemode="maximized"] #titlebar-max {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-highlight);
|
||||
}
|
||||
|
||||
#titlebar-close {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highlight);
|
||||
}
|
||||
#titlebar-close:hover {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white);
|
||||
|
||||
.titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover {
|
||||
background-color: hsla(0, 0%, 100%, .17);
|
||||
}
|
||||
.titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active {
|
||||
background-color: hsla(0, 0%, 100%, .27);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover {
|
||||
background-color: hsla(0, 86%, 49%, 1);
|
||||
}
|
||||
|
||||
#titlebar-min:-moz-lwtheme {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-themes);
|
||||
}
|
||||
#titlebar-max:-moz-lwtheme {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-themes);
|
||||
}
|
||||
#main-window[sizemode="maximized"] #titlebar-max:-moz-lwtheme {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-themes);
|
||||
}
|
||||
#titlebar-close:-moz-lwtheme {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-themes);
|
||||
}
|
||||
|
||||
|
||||
/* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which
|
||||
* rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */
|
||||
@media (min-resolution: 1.20dppx) and (max-resolution: 1.45dppx) {
|
||||
.titlebar-button > .toolbarbutton-icon {
|
||||
width: 11.5px;
|
||||
height: 11.5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 175% dpi should result in the same device pixel sizes as 150% dpi. */
|
||||
@media (min-resolution: 1.70dppx) and (max-resolution: 1.95dppx) {
|
||||
.titlebar-button {
|
||||
padding-left: 14.1px;
|
||||
padding-right: 14.1px;
|
||||
}
|
||||
|
||||
.titlebar-button > .toolbarbutton-icon {
|
||||
width: 10.8px;
|
||||
height: 10.8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 225% dpi should result in the same device pixel sizes as 200% dpi. */
|
||||
@media (min-resolution: 2.20dppx) and (max-resolution: 2.45dppx) {
|
||||
.titlebar-button {
|
||||
padding-left: 15.3333px;
|
||||
padding-right: 15.3333px;
|
||||
}
|
||||
|
||||
.titlebar-button > .toolbarbutton-icon {
|
||||
width: 10.8px;
|
||||
height: 10.8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 275% dpi should result in the same device pixel sizes as 250% dpi. */
|
||||
@media (min-resolution: 2.70dppx) and (max-resolution: 2.95dppx) {
|
||||
/* NB: todo: this should also change padding on the buttons
|
||||
* themselves, but without a device to test this on, it's
|
||||
* impossible to know by how much. */
|
||||
.titlebar-button > .toolbarbutton-icon {
|
||||
width: 10.8px;
|
||||
height: 10.8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (-moz-windows-default-theme) {
|
||||
.titlebar-button:hover {
|
||||
background-color: hsla(0, 0%, 0%, .12);
|
||||
}
|
||||
|
||||
.titlebar-button:hover:active {
|
||||
background-color: hsla(0, 0%, 0%, .22);
|
||||
}
|
||||
|
||||
.titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#titlebar-close:hover {
|
||||
background-color: hsl(355, 86%, 49%);
|
||||
}
|
||||
|
||||
#titlebar-close:hover:active {
|
||||
background-color: hsl(355, 82%, 69%);
|
||||
}
|
||||
}
|
||||
@media not all and (-moz-windows-default-theme) {
|
||||
.titlebar-button {
|
||||
background-color: -moz-field;
|
||||
}
|
||||
.titlebar-button:hover {
|
||||
background-color: Highlight;
|
||||
}
|
||||
|
||||
#titlebar-min {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-highcontrast);
|
||||
}
|
||||
#titlebar-min:hover {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-highcontrast-hover);
|
||||
}
|
||||
|
||||
#titlebar-max {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-highcontrast);
|
||||
}
|
||||
#titlebar-max:hover {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-highcontrast-hover);
|
||||
}
|
||||
|
||||
#main-window[sizemode="maximized"] #titlebar-max {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-highcontrast);
|
||||
}
|
||||
#main-window[sizemode="maximized"] #titlebar-max:hover {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-highcontrast-hover);
|
||||
}
|
||||
|
||||
#titlebar-close {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highcontrast);
|
||||
}
|
||||
#titlebar-close:hover {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highcontrast-hover);
|
||||
}
|
||||
#titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active {
|
||||
background-color: hsla(0, 60%, 39%, 1);
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} /* Windows 10 accent color applies */
|
||||
|
||||
@media (-moz-os-version: windows-vista),
|
||||
(-moz-os-version: windows-win7),
|
||||
@media not all and (-moz-windows-default-theme) {
|
||||
#main-window {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
#titlebar-buttonbox,
|
||||
.titlebar-button {
|
||||
-moz-appearance: none !important;
|
||||
}
|
||||
|
||||
.titlebar-button {
|
||||
border: none;
|
||||
margin: 0 !important;
|
||||
padding: 9px 17px;
|
||||
transition: background-color linear 120ms;
|
||||
}
|
||||
|
||||
#main-window[sizemode="maximized"][tabsontop=true] #tabbrowser-tabs {
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
#main-window[sizemode=maximized] .titlebar-button {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.titlebar-button > .toolbarbutton-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#main-window[chromemargin^="0,"][sizemode=normal] #navigator-toolbox {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
#main-window[sizemode="maximized"] #titlebar-close {
|
||||
padding-right: 19px;
|
||||
}
|
||||
|
||||
#titlebar-close:hover {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highlight);
|
||||
background-color: hsla(0, 86%, 49%, 1);
|
||||
}
|
||||
|
||||
#titlebar-close:hover:active {
|
||||
background-color: hsla(0, 86%, 49%, 0.6);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* inactive window */
|
||||
|
||||
#titlebar-min:-moz-window-inactive:not(:-moz-lwtheme) {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
|
||||
}
|
||||
|
||||
#titlebar-max:-moz-window-inactive:not(:-moz-lwtheme) {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize);
|
||||
}
|
||||
|
||||
#main-window[sizemode="maximized"] #titlebar-max:-moz-window-inactive:not(:-moz-lwtheme) {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
|
||||
}
|
||||
|
||||
#titlebar-close:-moz-window-inactive:not(:-moz-lwtheme):not(:hover) {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
|
||||
}
|
||||
|
||||
.titlebar-button:-moz-window-inactive:not(:-moz-lwtheme):hover {
|
||||
background-color: hsla(0, 0%, 0%, .17);
|
||||
}
|
||||
|
||||
.titlebar-button:-moz-window-inactive:not(:-moz-lwtheme):hover:active {
|
||||
background-color: hsla(0, 0%, 0%, .27);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* light persona */
|
||||
|
||||
.titlebar-button:-moz-lwtheme-darktext:hover {
|
||||
background-color: hsla(0, 0%, 0%, .17);
|
||||
}
|
||||
|
||||
.titlebar-button:-moz-lwtheme-darktext:hover:active {
|
||||
background-color: hsla(0, 0%, 0%, .27);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#titlebar-min:-moz-lwtheme-darktext {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-outline);
|
||||
}
|
||||
|
||||
#titlebar-max:-moz-lwtheme-darktext {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-outline);
|
||||
}
|
||||
|
||||
#main-window[sizemode="maximized"]:-moz-lwtheme-darktext #titlebar-max:-moz-lwtheme-darktext {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-outline);
|
||||
}
|
||||
|
||||
#titlebar-close:-moz-lwtheme-darktext {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline);
|
||||
}
|
||||
#titlebar-close:hover:-moz-lwtheme-darktext {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline);
|
||||
}
|
||||
|
||||
/* dark persona */
|
||||
|
||||
.titlebar-button:-moz-lwtheme-brighttext:hover {
|
||||
background-color: hsla(0, 0%, 100%, .27);
|
||||
}
|
||||
|
||||
.titlebar-button:-moz-lwtheme-brighttext:hover:active {
|
||||
background-color: hsla(0, 0%, 100%, .37);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#titlebar-min:-moz-lwtheme-brighttext {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-outline-inverted);
|
||||
}
|
||||
|
||||
#titlebar-max:-moz-lwtheme-brighttext {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-outline-inverted);
|
||||
}
|
||||
|
||||
#main-window[sizemode="maximized"]:-moz-lwtheme-brighttext #titlebar-max:-moz-lwtheme-brighttext {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-outline-inverted);
|
||||
}
|
||||
|
||||
#titlebar-close:-moz-lwtheme-brighttext {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline-inverted);
|
||||
}
|
||||
#titlebar-close:hover:-moz-lwtheme-brighttext {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline-inverted);
|
||||
}
|
||||
|
||||
/* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which
|
||||
* rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */
|
||||
@media (min-resolution: 1.20dppx) and (max-resolution: 1.45dppx) {
|
||||
.titlebar-button > .toolbarbutton-icon {
|
||||
width: 11.5px;
|
||||
height: 11.5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 175% dpi should result in the same device pixel sizes as 150% dpi. */
|
||||
@media (min-resolution: 1.70dppx) and (max-resolution: 1.95dppx) {
|
||||
.titlebar-button {
|
||||
padding-left: 14.1px;
|
||||
padding-right: 14.1px;
|
||||
}
|
||||
.titlebar-button > .toolbarbutton-icon {
|
||||
width: 10.8px;
|
||||
height: 10.8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 225% dpi should result in the same device pixel sizes as 200% dpi. */
|
||||
@media (min-resolution: 2.20dppx) and (max-resolution: 2.45dppx) {
|
||||
.titlebar-button {
|
||||
padding-left: 15.3333px;
|
||||
padding-right: 15.3333px;
|
||||
}
|
||||
.titlebar-button > .toolbarbutton-icon {
|
||||
width: 10.8px;
|
||||
height: 10.8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 275% dpi should result in the same device pixel sizes as 250% dpi. */
|
||||
@media (min-resolution: 2.70dppx) and (max-resolution: 2.95dppx) {
|
||||
/* NB: todo: this should also change padding on the buttons
|
||||
* themselves, but without a device to test this on, it's
|
||||
* impossible to know by how much. */
|
||||
.titlebar-button > .toolbarbutton-icon {
|
||||
width: 10.8px;
|
||||
height: 10.8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media not all and (-moz-windows-default-theme) {
|
||||
.titlebar-button {
|
||||
background-color: -moz-field;
|
||||
}
|
||||
.titlebar-button:hover {
|
||||
background-color: Highlight;
|
||||
}
|
||||
|
||||
#titlebar-min {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-outine-inverted);
|
||||
}
|
||||
|
||||
#titlebar-max {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-outine-inverted);
|
||||
}
|
||||
|
||||
#main-window[sizemode="maximized"] #titlebar-max {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-outine-inverted);
|
||||
}
|
||||
|
||||
#titlebar-close {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outine-inverted);
|
||||
}
|
||||
#titlebar-close:hover {
|
||||
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outine-inverted);
|
||||
}
|
||||
}
|
||||
} /* Win 10 styling */
|
||||
|
||||
@media (-moz-os-version: windows-win7),
|
||||
(-moz-os-version: windows-win8) {
|
||||
#main-window[sizemode="maximized"] #titlebar-buttonbox {
|
||||
margin-inline-end: 3px;
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@
|
|||
%define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper
|
||||
|
||||
:root {
|
||||
--titlebar-text-color: currentColor;
|
||||
|
||||
--space-above-tabbar: 15px;
|
||||
|
||||
--backbutton-urlbar-overlap: 6px;
|
||||
|
|
@ -187,19 +189,22 @@ toolbar:-moz-lwtheme {
|
|||
transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
|
||||
}
|
||||
|
||||
#toolbar-menubar,
|
||||
#TabsToolbar {
|
||||
color: var(--titlebar-text-color);
|
||||
}
|
||||
|
||||
@media not all and (-moz-windows-compositor),
|
||||
not all and (-moz-windows-default-theme) {
|
||||
/* Please keep the menu text colors in this media block in sync with
|
||||
* devedition.css, minus the :not(:-moz-lwtheme) condition - see Bug 1165718.
|
||||
*/
|
||||
#main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
|
||||
#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
|
||||
color: CaptionText;
|
||||
:root[tabsintitlebar]:not([inFullscreen]):not(:-moz-lwtheme) {
|
||||
--titlebar-text-color: CaptionText;
|
||||
}
|
||||
|
||||
#main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
|
||||
#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
|
||||
color: InactiveCaptionText;
|
||||
:root[tabsintitlebar]:not([inFullscreen]):not(:-moz-lwtheme):-moz-window-inactive {
|
||||
--titlebar-text-color: InactiveCaptionText;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,49 +1,61 @@
|
|||
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<style>
|
||||
g:not(:target) {
|
||||
display: none;
|
||||
}
|
||||
use:target > g {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
g {
|
||||
stroke: ButtonText;
|
||||
stroke-width: 0.9px;
|
||||
fill: none;
|
||||
}
|
||||
g:not([id|="close"]) {
|
||||
shape-rendering: crispEdges;
|
||||
|
||||
g:not(:target) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.highcontrast {
|
||||
stroke-width: 1.9px;
|
||||
use:target > g {
|
||||
display: initial;
|
||||
}
|
||||
.highcontrast-hover > g {
|
||||
|
||||
.highlight > g {
|
||||
stroke: HighlightText;
|
||||
}
|
||||
.white > g {
|
||||
stroke: #fff;
|
||||
|
||||
.inactive > g {
|
||||
stroke: black;
|
||||
}
|
||||
.themes {
|
||||
stroke: #fff;
|
||||
stroke-width: 1.9px;
|
||||
|
||||
.bolder {
|
||||
stroke-width: 1.6px;
|
||||
stroke: black;
|
||||
}
|
||||
|
||||
.outline {
|
||||
stroke-width: 4px;
|
||||
stroke: white;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.inverted {
|
||||
stroke-width: 1.6px;
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
.outer-stroke {
|
||||
stroke: #000;
|
||||
stroke-width: 3.6;
|
||||
opacity: .75;
|
||||
.outline-inverted {
|
||||
stroke-width: 4px;
|
||||
stroke: black;
|
||||
opacity: 0.75;
|
||||
}
|
||||
.restore-background-window {
|
||||
stroke-width: .9;
|
||||
|
||||
.outline-thinner {
|
||||
stroke-width: 3.6px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<g id="close">
|
||||
<path d="M1,1 l 10,10 M1,11 l 10,-10"/>
|
||||
<line x1="1" y1="1" x2="11" y2="11" stroke-width="1px"/>
|
||||
<line x1="11" y1="1" x2="1" y2="11" stroke-width="1px"/>
|
||||
</g>
|
||||
<g id="maximize">
|
||||
<rect x="1.5" y="1.5" width="9" height="9"/>
|
||||
|
|
@ -56,45 +68,54 @@
|
|||
<polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5"/>
|
||||
</g>
|
||||
|
||||
<use id="close-white" class="white" xlink:href="#close"/>
|
||||
<use id="maximize-white" class="white" xlink:href="#maximize"/>
|
||||
<use id="minimize-white" class="white" xlink:href="#minimize"/>
|
||||
<use id="restore-white" class="white" xlink:href="#restore"/>
|
||||
|
||||
<g id="close-highcontrast" class="highcontrast">
|
||||
<path d="M1,1 l 10,10 M1,11 l 10,-10"/>
|
||||
<g id="close-outline">
|
||||
<line x1="1" y1="1" x2="11" y2="11" stroke-linecap="round" class="outline"/>
|
||||
<line x1="11" y1="1" x2="1" y2="11" stroke-linecap="round" class="outline"/>
|
||||
<line x1="1" y1="1" x2="11" y2="11" class="bolder"/>
|
||||
<line x1="11" y1="1" x2="1" y2="11" class="bolder"/>
|
||||
</g>
|
||||
<g id="maximize-highcontrast" class="highcontrast">
|
||||
<rect x="2" y="2" width="8" height="8"/>
|
||||
<g id="maximize-outline">
|
||||
<rect x="1.2" y="1.2" width="9.6" height="9.6" stroke-linecap="round" class="outline"/>
|
||||
<rect x="1.5" y="1.5" width="9" height="9" class="bolder"/>
|
||||
</g>
|
||||
<g id="minimize-highcontrast" class="highcontrast">
|
||||
<line x1="1" y1="6" x2="11" y2="6"/>
|
||||
<g id="minimize-outline">
|
||||
<line x1="1" y1="5.5" x2="11" y2="5.5" stroke-linecap="round" class="outline outline-thinner"/>
|
||||
<line x1="1" y1="5.5" x2="11" y2="5.5" class="bolder"/>
|
||||
</g>
|
||||
<g id="restore-highcontrast" class="highcontrast">
|
||||
<rect x="2" y="4" width="6" height="6"/>
|
||||
<polyline points="3.5,1.5 10.5,1.5 10.5,8.5" class="restore-background-window"/>
|
||||
<g id="restore-outline">
|
||||
<rect x="1.5" y="3.5" width="7" height="7" stroke-linecap="round" class="outline"/>
|
||||
<polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5" stroke-linecap="round" class="outline"/>
|
||||
<rect x="1.5" y="3.5" width="7" height="7" class="bolder"/>
|
||||
<polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5" class="bolder"/>
|
||||
</g>
|
||||
|
||||
<use id="close-highcontrast-hover" class="highcontrast-hover" xlink:href="#close-highcontrast"/>
|
||||
<use id="maximize-highcontrast-hover" class="highcontrast-hover" xlink:href="#maximize-highcontrast"/>
|
||||
<use id="minimize-highcontrast-hover" class="highcontrast-hover" xlink:href="#minimize-highcontrast"/>
|
||||
<use id="restore-highcontrast-hover" class="highcontrast-hover" xlink:href="#restore-highcontrast"/>
|
||||
|
||||
<g id="close-themes" class="themes">
|
||||
<path d="M1,1 l 10,10 M1,11 l 10,-10" class="outer-stroke" />
|
||||
<path d="M1.75,1.75 l 8.5,8.5 M1.75,10.25 l 8.5,-8.5"/>
|
||||
<g id="close-outline-inverted">
|
||||
<line x1="1" y1="1" x2="11" y2="11" stroke-linecap="round" class="outline-inverted"/>
|
||||
<line x1="11" y1="1" x2="1" y2="11" stroke-linecap="round" class="outline-inverted"/>
|
||||
<line x1="1" y1="1" x2="11" y2="11" class="inverted"/>
|
||||
<line x1="11" y1="1" x2="1" y2="11" class="inverted"/>
|
||||
</g>
|
||||
<g id="maximize-themes" class="themes">
|
||||
<rect x="2" y="2" width="8" height="8" class="outer-stroke"/>
|
||||
<rect x="2" y="2" width="8" height="8"/>
|
||||
<g id="maximize-outline-inverted">
|
||||
<rect x="1.2" y="1.2" width="9.6" height="9.6" stroke-linecap="round" class="outline-inverted"/>
|
||||
<rect x="1.5" y="1.5" width="9" height="9" class="inverted"/>
|
||||
</g>
|
||||
<g id="minimize-themes" class="themes">
|
||||
<line x1="0" y1="6" x2="12" y2="6" class="outer-stroke"/>
|
||||
<line x1="1" y1="6" x2="11" y2="6"/>
|
||||
<g id="minimize-outline-inverted">
|
||||
<line x1="1" y1="5.5" x2="11" y2="5.5" stroke-linecap="round" class="outline-inverted outline-thinner"/>
|
||||
<line x1="1" y1="5.5" x2="11" y2="5.5" class="inverted"/>
|
||||
</g>
|
||||
<g id="restore-themes" class="themes">
|
||||
<path d="M2,4 l 6,0 l 0,6 l -6,0z M2.5,1.5 l 8,0 l 0,8" class="outer-stroke"/>
|
||||
<rect x="2" y="4" width="6" height="6"/>
|
||||
<polyline points="3.5,1.5 10.5,1.5 10.5,8.5" class="restore-background-window"/>
|
||||
<g id="restore-outline-inverted">
|
||||
<rect x="1.5" y="3.5" width="7" height="7" stroke-linecap="round" class="outline-inverted"/>
|
||||
<polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5" stroke-linecap="round" class="outline-inverted"/>
|
||||
<rect x="1.5" y="3.5" width="7" height="7" class="inverted"/>
|
||||
<polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5" class="inverted"/>
|
||||
</g>
|
||||
|
||||
<use id="close-highlight" class="highlight" xlink:href="#close"/>
|
||||
<use id="maximize-highlight" class="highlight" xlink:href="#maximize"/>
|
||||
<use id="minimize-highlight" class="highlight" xlink:href="#minimize"/>
|
||||
<use id="restore-highlight" class="highlight" xlink:href="#restore"/>
|
||||
<use id="close-inactive" class="inactive" xlink:href="#close"/>
|
||||
<use id="maximize-inactive" class="inactive" xlink:href="#maximize"/>
|
||||
<use id="minimize-inactive" class="inactive" xlink:href="#minimize"/>
|
||||
<use id="restore-inactive" class="inactive" xlink:href="#restore"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
|
@ -193,14 +193,12 @@
|
|||
/* Use proper menu text styling in Win7 classic mode (copied from browser.css) */
|
||||
@media not all and (-moz-windows-compositor),
|
||||
not all and (-moz-windows-default-theme) {
|
||||
#main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar,
|
||||
#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar {
|
||||
color: CaptionText;
|
||||
:root[tabsintitlebar]:not([inFullscreen]) {
|
||||
--titlebar-text-color: CaptionText;
|
||||
}
|
||||
|
||||
#main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:-moz-window-inactive,
|
||||
#main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:-moz-window-inactive {
|
||||
color: InactiveCaptionText;
|
||||
:root[tabsintitlebar]:not([inFullscreen]):-moz-window-inactive {
|
||||
--titlebar-text-color: InactiveCaptionText;
|
||||
}
|
||||
|
||||
#main-window[tabsintitlebar] #main-menubar > menu {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue