diff --git a/src/chrome/messenger/appmenu-dropmarker.png b/src/chrome/messenger/appmenu-dropmarker.png new file mode 100644 index 0000000..5a0e72f Binary files /dev/null and b/src/chrome/messenger/appmenu-dropmarker.png differ diff --git a/src/chrome/messenger/icons/caption-buttons.svg b/src/chrome/messenger/icons/caption-buttons.svg new file mode 100644 index 0000000..9342aca --- /dev/null +++ b/src/chrome/messenger/icons/caption-buttons.svg @@ -0,0 +1,121 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/chrome/messenger/mailWindow1.css b/src/chrome/messenger/mailWindow1.css index b1ff102..c546a92 100644 --- a/src/chrome/messenger/mailWindow1.css +++ b/src/chrome/messenger/mailWindow1.css @@ -14,6 +14,13 @@ @import url("chrome://messenger/skin/folderPane.css"); @import url("chrome://messenger/skin/tagColors.css"); @import url("chrome://messenger/skin/shared/mailWindow1.css"); +@import url("chrome://os_target/skin/mailWindow1.css"); + +@media (-moz-windows-classic) { + #messengerWindow[sizemode="normal"] > #titlebar > #titlebar-content > #appmenu-button-container { + margin-top: 4px; + } +} /* Don't use the listbox appearance as that gives us a blue-grey top border that collides with the primary toolbar border */ @@ -342,10 +349,6 @@ treechildren::-moz-tree-image(subjectCol, imapdeleted) { -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox"); } -#messengerWindow:not([tabsintitlebar]) #titlebar { - visibility: collapse; -} - #titlebar-spacer { pointer-events: none; } @@ -385,78 +388,18 @@ treechildren::-moz-tree-image(subjectCol, imapdeleted) { -moz-appearance: -moz-window-button-close; } -#messengerWindow[tabsintitlebar] .titlebar-placeholder[type="caption-buttons"] { - margin-left: 10px; /* additional space for Aero Snap */ +#messengerWindow[tabsintitlebar] .titlebar-placeholder[type="appmenu-button"] { + margin-right: 4px; } -@media (-moz-os-version: windows-win10) { - #messengerWindow[tabsintitlebar] .titlebar-placeholder[type="caption-buttons"] { - min-width: 143px; /* Bug 1193721, hardcode the width for scaled screens */ - } +#messengerWindow[tabsintitlebar] .titlebar-placeholder[type="caption-buttons"] { + margin-left: 10px; /* additional space for Aero Snap */ } #messengerWindow:not([tabsintitlebar]) .titlebar-placeholder { visibility: collapse; } -/* Render a window top border for lwthemes on WinXP modern themes: */ -@media (-moz-windows-theme: luna-blue) { - #messengerWindow[tabsintitlebar][sizemode="normal"] - #titlebar-content:-moz-lwtheme { - background-image: linear-gradient(to bottom, rgb(8, 49, 216) 0, - rgb(8, 49, 216) 1px, rgb(15, 77, 227) 1px, - rgb(15, 77, 227) 2px, rgb(22, 106, 238) 2px, - rgb(22, 106, 238) 3px, rgb(8, 85, 221) 3px, - rgb(8, 85, 221) 4px, transparent 4px); - } - - #messengerWindow[tabsintitlebar][sizemode="normal"] - #titlebar-content:-moz-lwtheme:-moz-window-inactive { - background-image: linear-gradient(to bottom, rgb(91, 104, 205) 0, - rgb(91, 104, 205) 1px, rgb(116, 128, 220) 1px, - rgb(116, 128, 220) 2px, rgb(117, 140, 221) 2px, - rgb(117, 140, 221) 4px, transparent 4px); - } -} - -@media (-moz-windows-theme: luna-silver) { - #messengerWindow[tabsintitlebar][sizemode="normal"] - #titlebar-content:-moz-lwtheme { - background-image: linear-gradient(to bottom, rgb(102,102,126) 0, - rgb(102, 102, 126) 1px, rgb(168, 167, 191) 1px, - rgb(168, 167, 191) 2px, white 2px, white 3px, - rgb(188, 188, 207) 3px, rgb(188, 188, 207) 4px, - transparent 4px); - } - - #messengerWindow[tabsintitlebar][sizemode="normal"] - #titlebar-content:-moz-lwtheme:-moz-window-inactive { - background-image: linear-gradient(to bottom, rgb(186, 186, 197) 0, - rgb(186, 186, 197) 1px, rgb(236, 238, 245) 1px, - rgb(236, 238, 245) 2px, white 2px, white 3px, - rgb(215, 215, 227) 3px, rgb(215, 215, 227) 4px, - transparent 4px); - } -} - -@media (-moz-windows-theme: luna-olive) { - #messengerWindow[tabsintitlebar][sizemode="normal"] - #titlebar-content:-moz-lwtheme { - background-image: linear-gradient(to bottom, rgb(139, 161, 105) 0, - rgb(139, 161, 105) 1px, rgb(171, 189, 133) 1px, - rgb(171, 189, 133) 2px, rgb(164, 178, 127) 2px, - rgb(164, 178, 127) 3px, transparent 3px); - } - - #messengerWindow[tabsintitlebar][sizemode="normal"] - #titlebar-content:-moz-lwtheme:-moz-window-inactive { - background-image: linear-gradient(to bottom, rgb(207, 214, 188) 0, - rgb(207, 214, 188) 1px, rgb(224, 226, 200) 1px, - rgb(224, 226, 200) 2px, rgb(214, 216, 190) 2px, - rgb(214, 216, 190) 3px, transparent 3px); - } -} - #viewPicker > .menulist-label-box > .menulist-icon, #locationFolders > .menulist-label-box > .menulist-icon { min-height: 16px; diff --git a/src/chrome/messenger/messenger.css b/src/chrome/messenger/messenger.css index 75e8847..aba4f33 100644 --- a/src/chrome/messenger/messenger.css +++ b/src/chrome/messenger/messenger.css @@ -118,3 +118,69 @@ menulist.folderMenuItem menu:not(.folderMenuItem) { padding-top: 2px; padding-bottom: 2px; } + +/* ::::: app menu button ::::: */ + +#appmenu-button { + -moz-appearance: none; + background-clip: padding-box; + border: 1px solid ThreeDHighlight; + border-top: none; + color: #000; + font-weight: bold; + padding: 0 1.5em .05em; + margin: 1px 1px 2px; + box-shadow: inset 0px 0px 0px 1px ThreeDDarkShadow; +} + +@media (-moz-windows-classic) { + #appmenu-button { + margin-bottom: 1px; + } +} + +#appmenu-button:hover:not(:active):not([open]) { + color: #0000FF; +} + +#appmenu-button:hover:active, +#appmenu-button[open] { + color: #000080; +} + +#appmenu-button > .button-box { + border-style: none; + padding: 0; +} + +#appmenu-button > .button-box > .button-menu-dropmarker { + list-style-image: url("appmenu-dropmarker.png"); + padding: 0; + margin: 0; + margin-inline-start: .5em; +} + +@media (-moz-windows-compositor) { + @media (-moz-os-version: windows-win10) { + #appmenu-button { + margin-top: -1px; + margin-bottom: 5px; + } + } +} + +/* ::::: App Menu on Tabbar ::::: */ + +#appmenu-toolbar-button:not(:hover):not([open]):not(:-moz-lwtheme) { + color: inherit; +} + +#appmenu-toolbar-button > .toolbarbutton-text, +#appmenu-toolbar-button > .toolbarbutton-menu-dropmarker { + margin-top: -2px !important; + margin-bottom: -2px !important; +} + +#wrapper-appmenu-toolbar-button { + opacity: .3; +} diff --git a/src/chrome/messenger/primaryToolbar.css b/src/chrome/messenger/primaryToolbar.css index 3aa4c21..4000259 100644 --- a/src/chrome/messenger/primaryToolbar.css +++ b/src/chrome/messenger/primaryToolbar.css @@ -27,10 +27,9 @@ menu:not(:-moz-lwtheme):-moz-window-inactive { } #tabs-toolbar { + border-top-width: 0; border-bottom-width: 0; -moz-appearance: none; - background-image: linear-gradient(to top, hsla(209, 67%, 12%, 0.35) 1px, - transparent 1px); } #mail-toolbar-menubar2 { @@ -56,102 +55,11 @@ menu:not(:-moz-lwtheme):-moz-window-inactive { visibility: visible; } -/** - * In the classic themes, the titlebar has a horizontal gradient, which is - * problematic for reading the text of background tabs when they're in the - * titlebar. We side-step this issue by layering our own background underneath - * the tabs. Unfortunately, this requires a bunch of positioning in order to - * get text and icons to not appear fuzzy. - */ -@media (-moz-windows-classic) { - #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen]) - .tabmail-tabs:not(:-moz-lwtheme) { - position: relative; - z-index: 2; - } - - #messengerWindow[tabsintitlebar] #tabs-toolbar:not(:-moz-lwtheme) { - position: relative; - } - - #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen]) - #tabs-toolbar:not(:-moz-lwtheme)::after { - /* Because we use placeholders for window controls etc. in the tabstrip, - * and position those with ordinal attributes, and because our layout code - * expects :before/:after nodes to come first/last in the frame list, - * we have to reorder this element to come last, hence the - * ordinal group value (see bug 853415). */ - -moz-box-ordinal-group: 1001; - box-shadow: 0 0 50px 8px ActiveCaption; - content: ""; - display: -moz-box; - height: 0; - margin: 0 50px; - position: absolute; - pointer-events: none; - top: 100%; - width: -moz-available; - } - - #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen]) - #tabs-toolbar:not(:-moz-lwtheme):-moz-window-inactive::after { - box-shadow: 0 0 50px 8px InactiveCaption; - } - - #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen]) - #tabmail-container:not(:-moz-lwtheme) { - position: relative; - z-index: 2; - } - - /** - * With the tabbrowser-tabs element z-index'd above the nav-bar, we now get the - * scrollbox button borders leaking over the nav-bar highlight. This transparent bottom - * border forces the scrollbox button borders to terminate a pixel early, working - * around the issue. - */ - #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen]) - .tabmail-arrowscrollbox > .scrollbutton-up:not(:-moz-lwtheme), - #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen]) - .tabmail-arrowscrollbox > .scrollbutton-down-stack > - .scrollbutton-down:not(:-moz-lwtheme) { - border-bottom: 1px solid transparent; - } - - #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen]) - .mail-toolbox:not(:-moz-lwtheme), - #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen]) - .contentTabToolbox:not(:-moz-lwtheme) { - box-shadow: none; - } - - #messengerWindow[tabsintitlebar][sizemode="normal"] - #titlebar-content:-moz-lwtheme { - /* Render a window top border: */ - background-image: linear-gradient(to bottom, ThreeDLightShadow 0, - ThreeDLightShadow 1px, ThreeDHighlight 1px, - ThreeDHighlight 2px, ActiveBorder 2px, - ActiveBorder 4px, transparent 4px); - } - - /* End classic titlebar gradient */ - - #messengerWindow[tabsintitlebar]:not([inFullscreen]) - :-moz-any(#tabs-toolbar, #mail-toolbar-menubar2) - toolbarbutton:not(:-moz-lwtheme) { - color: inherit; - } -} - .mail-toolbox > toolbar:-moz-lwtheme, .contentTabToolbox > toolbar:-moz-lwtheme { border-top: none; } -#mail-bar3 { - border-bottom: none; -} - /* ::::: primary toolbar buttons ::::: */ .toolbarbutton-1 { diff --git a/src/chrome/messenger/shared/messenger.css b/src/chrome/messenger/shared/messenger.css index b485b73..8e7c9c1 100644 --- a/src/chrome/messenger/shared/messenger.css +++ b/src/chrome/messenger/shared/messenger.css @@ -6,6 +6,10 @@ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +:root { + --toolbar-custom-color: -moz-Dialog; +} + description.error { color: #FF0000; } diff --git a/src/chrome/messenger/shared/tabmail.css b/src/chrome/messenger/shared/tabmail.css index 3f3d7ab..327d808 100644 --- a/src/chrome/messenger/shared/tabmail.css +++ b/src/chrome/messenger/shared/tabmail.css @@ -5,47 +5,42 @@ @import url("chrome://messenger/skin/sharedPlatform.css"); #tabs-toolbar { - --tabHeight: 23px; - --tabSidePadding: 3px; + --tab-height: 25px; + --tab-border-radius: 0px; } -/* == Tab style ============================================= */ -/* Unselected tab */ .tabmail-tab { -moz-appearance: none; - -moz-box-align: stretch; - margin: 0 0 2px 0; - padding: 0; - background-color: rgba(0, 0, 0, 0.10); - border-top: 2px solid; - border-right: 2px solid; - border-left: 2px solid; - border-bottom: 0px solid; - -moz-border-top-colors: transparent rgba(0, 0, 0, 0.2); + background-color: ThreeDLightShadow; + padding: 3px 1px 4px; + margin: 0; + border: 2px solid; + border-bottom-style: none; + border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px; + -moz-border-top-colors: transparent rgba(0, 0, 0, 0.2); -moz-border-right-colors: transparent ThreeDDarkShadow; - -moz-border-left-colors: transparent rgba(0, 0, 0, 0.2); -} - -/* Unselected tab with hover */ -.tabmail-tab:hover:not([selected="true"]) { - background: rgba(0, 0, 0, 0.05); + -moz-border-left-colors: transparent rgba(0, 0, 0, 0.2); + height: var(--tab-height); + padding-inline-end: 3px; } -/* Selected tab */ .tabmail-tab[selected=true] { - -moz-border-top-colors: ThreeDHighlight ThreeDLightShadow; + -moz-border-top-colors: ThreeDHighlight ThreeDLightShadow; -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow; - -moz-border-left-colors: ThreeDHighlight ThreeDLightShadow; - background-color: -moz-Dialog; + -moz-border-left-colors: ThreeDHighlight ThreeDLightShadow; + background-color: var(--toolbar-custom-color); } -.tabmail-tab[type="preferencesTab"] { - list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities"); +.tabmail-tab:hover:not(:-moz-lwtheme) { + color: #0000FF; } -.tab-content { - padding-inline-end: var(--tabSidePadding); - padding-inline-start: var(--tabSidePadding); +.tabmail-tab[selected="true"]:hover:active:not(:-moz-lwtheme) { + color: #000080; +} + +.tabmail-tab[type="preferencesTab"] { + list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities"); } .tab-throbber, @@ -56,7 +51,8 @@ .tab-throbber, .tab-icon-image { - margin-inline-end: 6px; + margin-inline-start: 2px; + margin-inline-end: 3px; } .tab-label { @@ -70,10 +66,6 @@ padding: 0; } -.tab-background { - min-height: var(--tabHeight); -} - .tabmail-tab:-moz-lwtheme { color: inherit; } diff --git a/src/chrome/messenger/tabmail.css b/src/chrome/messenger/tabmail.css index b8a1f45..49f1105 100644 --- a/src/chrome/messenger/tabmail.css +++ b/src/chrome/messenger/tabmail.css @@ -12,10 +12,6 @@ color: inherit; } -.tabmail-arrowscrollbox { - margin-bottom: -1px; -} - /** * Tab */ diff --git a/src/chrome/os_target/linux/mailWindow1.css b/src/chrome/os_target/linux/mailWindow1.css new file mode 100644 index 0000000..e69de29 diff --git a/src/chrome/os_target/mac/mailWindow1.css b/src/chrome/os_target/mac/mailWindow1.css new file mode 100644 index 0000000..e69de29 diff --git a/src/chrome/os_target/windows/mailWindow1.css b/src/chrome/os_target/windows/mailWindow1.css new file mode 100644 index 0000000..1475ec2 --- /dev/null +++ b/src/chrome/os_target/windows/mailWindow1.css @@ -0,0 +1,430 @@ +/* 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/. */ + +:root { + --window-text-color: currentColor; +} + +@media (-moz-windows-compositor) { + #tabmail-container { + -moz-appearance: -moz-win-exclude-glass; + } + + @media (-moz-os-version: windows-win7), + (-moz-os-version: windows-win8) { + #messengerWindow { + -moz-appearance: -moz-win-borderless-glass; + background-color: transparent; + } + + /* These should be hidden w/ glass enabled. Windows draws its own buttons. */ + .titlebar-button { + display: none; + } + + #messengerWindow[sizemode="maximized"] #titlebar-buttonbox { + margin-inline-end: 3px; + } + } + + #messengerWindow[chromemargin^="0,"][sizemode=normal] #navigation-toolbox { + margin-top: -7px; + } + + /* Artificially draw window borders that are covered by lwtheme, + see bug 591930. Vista/win7 are using different colors than win8 */ + @media (-moz-os-version: windows-win7) { + #messengerWindow[sizemode="normal"] > #titlebar > + #titlebar-content:-moz-lwtheme { + border-top: 2px solid; + -moz-border-top-colors: rgb(37, 44, 51) rgba(255, 255, 255, 0.6); + } + + #messengerWindow[sizemode="normal"] > #titlebar > + #titlebar-content:-moz-lwtheme:-moz-window-inactive { + -moz-border-top-colors: rgb(102, 102, 102) rgba(255, 255, 255, 0.6); + } + + #messengerWindow[sizemode="normal"]:-moz-lwtheme > #titlebar > #titlebar-content > #appmenu-button-container { + margin-top: -1px; + } + } + + @media (-moz-os-version: windows-win8) { + #messengerWindow[sizemode="normal"] > #titlebar > + #titlebar-content:-moz-lwtheme { + border-top: 1px solid hsla(209, 67%, 12%, 0.35); + } + + /* Use a light text styling on dark window frames */ + :root[darkwindowframe="true"]:not(:-moz-lwtheme):not(:-moz-window-inactive) { + --window-text-color: white; + } + } + + @media (-moz-os-version: windows-win10) { + /* Draw XUL caption buttons and background on Win10 */ + @media (-moz-windows-accent-color-applies: 0) { + /* Default styling for when no accent color is applied */ + #messengerWindow:not(:-moz-window-inactive):not(:-moz-lwtheme) { + background-color: white; + } + + :root:not(:-moz-window-inactive):not(:-moz-lwtheme) { + --window-text-color: black; + } + + #titlebar-min:not(:-moz-window-inactive):not(:-moz-lwtheme), + #minimize-button:not(:-moz-lwtheme) { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#minimize); + } + + #titlebar-max:not(:-moz-window-inactive):not(:-moz-lwtheme) { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#maximize); + } + + #messengerWindow[sizemode="maximized"] #titlebar-max:not(:-moz-window-inactive):not(:-moz-lwtheme), + #restore-button:not(:-moz-lwtheme) { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#restore); + } + + #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme), + #close-button:not(:-moz-lwtheme) { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close); + } + + .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover { + background-color: hsla(0, 0%, 0%, .17); + } + + .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active { + background-color: hsla(0, 0%, 0%, .27); + transition: none; + } + + #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover, + #close-button:not(:-moz-lwtheme):hover { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close-highlight); + background-color: hsla(0, 86%, 49%, 1); + } + + #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active, + #close-button:not(:-moz-lwtheme):hover:active { + background-color: hsla(0, 60%, 49%, 0.6); + transition: none; + } + } + + @media (-moz-windows-accent-color-applies) { + /* Styling for when an accent color is applied to the titlebar */ + #messengerWindow:not(:-moz-window-inactive):not(:-moz-lwtheme) { + background-color: -moz-win-accentcolor; + } + + :root:not(:-moz-window-inactive):not(:-moz-lwtheme) { + --window-text-color: -moz-win-accentcolortext; + } + + #titlebar-min, + #minimize-button { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#minimize); + } + + #titlebar-max { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#maximize); + } + + #messengerWindow[sizemode="maximized"] #titlebar-max, + #restore-button { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#restore); + } + + #titlebar-close, + #close-button { + list-style-image: url(chrome://messenger/skin/icons/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, + #minimize-button { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#minimize-highlight); + } + + #titlebar-max { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#maximize-highlight); + } + + #messengerWindow[sizemode="maximized"] #titlebar-max, + #restore-button { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#restore-highlight); + } + + #titlebar-close { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close-highlight); + } + + .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, + #close-button:not(:-moz-lwtheme):hover { + background-color: hsla(0, 86%, 49%, 1); + } + + #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active, + #close-button:not(:-moz-lwtheme):hover:active { + background-color: hsla(0, 60%, 39%, 1); + transition: none; + } + } + } + + #messengerWindow { + -moz-appearance: -moz-win-glass; + } + + #messengerWindow:-moz-window-inactive:not(:-moz-lwtheme) { + background-color: hsl(0, 0%, 95%); + } + + /* If we don't have [chromemargin], it means the menubar is active; set the + window background to transparent in that case to match it with the DWM + color and prevent a drawing delay between title bar and UI region */ + #messengerWindow:not([chromemargin]):not(:-moz-lwtheme) { + 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; + } + + #messengerWindow[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; + } + + #messengerWindow[chromemargin^="0,"][sizemode=normal] #navigation-toolbox { + margin-top: -4px; + } + + #messengerWindow[sizemode="maximized"] #titlebar-close { + padding-right: 19px; + } + + #titlebar-close:hover, + #close-button:hover { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close-highlight); + background-color: hsla(0, 86%, 49%, 1); + transition: background-color linear 160ms; + } + + #titlebar-close:hover:active, + #close-button: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://messenger/skin/icons/caption-buttons.svg#minimize-inactive); + } + + #titlebar-max:-moz-window-inactive:not(:-moz-lwtheme) { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#maximize-inactive); + } + + #messengerWindow[sizemode="maximized"] #titlebar-max:-moz-window-inactive:not(:-moz-lwtheme) { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#restore-inactive); + } + + #titlebar-close:-moz-window-inactive:not(:-moz-lwtheme):not(:hover) { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close-inactive); + } + + .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, + #window-controls > toolbarbutton:not(#close-button):-moz-lwtheme-darktext:hover { + background-color: hsla(0, 0%, 0%, .17); + } + + .titlebar-button:-moz-lwtheme-darktext:hover:active, + #window-controls > toolbarbutton:not(#close-button):-moz-lwtheme-darktext:hover:active { + background-color: hsla(0, 0%, 0%, .27); + transition: none; + } + + #titlebar-min:-moz-lwtheme-darktext, + #minimize-button:-moz-lwtheme-darktext { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#minimize-outline); + } + + #titlebar-max:-moz-lwtheme-darktext { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#maximize-outline); + } + + #messengerWindow[sizemode="maximized"]:-moz-lwtheme-darktext #titlebar-max:-moz-lwtheme-darktext, + #restore-button:-moz-lwtheme-darktext { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#restore-outline); + } + + #titlebar-close:-moz-lwtheme-darktext, + #close-button:-moz-lwtheme-darktext { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close-outline); + } + #titlebar-close:hover:-moz-lwtheme-darktext, + #close-button:hover:-moz-lwtheme-darktext { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close-outline); + } + + /* dark persona */ + + .titlebar-button:-moz-lwtheme-brighttext:hover, + #window-controls > toolbarbutton:not(#close-button):-moz-lwtheme-brighttext:hover { + background-color: hsla(0, 0%, 100%, .27); + } + + .titlebar-button:-moz-lwtheme-brighttext:hover:active, + #window-controls > toolbarbutton:not(#close-button):-moz-lwtheme-brighttext:hover:active { + background-color: hsla(0, 0%, 100%, .37); + transition: none; + } + + #titlebar-min:-moz-lwtheme-brighttext, + #minimize-button:-moz-lwtheme-brighttext { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#minimize-outline-inverted); + } + + #titlebar-max:-moz-lwtheme-brighttext { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#maximize-outline-inverted); + } + + #messengerWindow[sizemode="maximized"]:-moz-lwtheme-brighttext #titlebar-max:-moz-lwtheme-brighttext, + #restore-button:-moz-lwtheme-brighttext { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#restore-outline-inverted); + } + + #titlebar-close:-moz-lwtheme-brighttext, + #close-button:-moz-lwtheme-brighttext { + list-style-image: url(chrome://messenger/skin/icons/caption-buttons.svg#close-outline-inverted); + } + #titlebar-close:hover:-moz-lwtheme-brighttext, + #close-button:hover:-moz-lwtheme-brighttext { + list-style-image: url(chrome://messenger/skin/icons/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) { + .titlebar-button > .toolbarbutton-icon { + width: 10.8px; + height: 10.8px; + } + } + } + + @media (-moz-os-version: windows-win8), + (-moz-os-version: windows-win10) { + /* Fade text stylings on window inactivity */ + :root:not(:-moz-lwtheme):-moz-window-inactive { + --window-text-color: rgba(0, 0, 0, 0.5); + } + } + + #messengerWindow[sizemode="normal"] #titlebar-buttonbox:-moz-lwtheme { + margin-top: -2px; + } + + #messengerWindow[sizemode="maximized"][tabsintitlebar] #mail-menubar > menu:not(:-moz-lwtheme) { + color: var(--window-text-color); + } + + #messengerWindow[sizemode="maximized"][tabsintitlebar] #mail-toolbar-menubar2 { + border: none; + } + + #messengerWindow[sizemode="maximized"][tabsintitlebar] #navigation-toolbox:not(:-moz-lwtheme) { + background-color: transparent !important; + color: var(--window-text-color); + border-left-style: none !important; + border-right-style: none !important; + } +} diff --git a/src/install.rdf b/src/install.rdf index 78ac0dd..4f6b277 100644 --- a/src/install.rdf +++ b/src/install.rdf @@ -28,14 +28,6 @@ 32.* - - - - {3550f703-e582-4d05-9a08-453d09bdfdc6} - 52.0.0a1 - 52.* - - @@ -44,5 +36,13 @@ 1.* + + + + {29877c1d-27df-4421-9a79-382c31470151} + 2.0.0a1 + 2.* + + \ No newline at end of file