diff options
Diffstat (limited to 'comm/mail/themes/windows/mail/mailWindow1.css')
| -rw-r--r-- | comm/mail/themes/windows/mail/mailWindow1.css | 461 |
1 files changed, 461 insertions, 0 deletions
diff --git a/comm/mail/themes/windows/mail/mailWindow1.css b/comm/mail/themes/windows/mail/mailWindow1.css new file mode 100644 index 0000000000..903a120078 --- /dev/null +++ b/comm/mail/themes/windows/mail/mailWindow1.css @@ -0,0 +1,461 @@ +/* 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/. */ + +/* ===== mailWindow1.css ================================================ + == Styles for the main Mail window in the default layout scheme. + ======================================================================= */ + +@import url("chrome://messenger/skin/messenger.css"); +@import url("chrome://messenger/skin/primaryToolbar.css"); +@import url("chrome://messenger/skin/folderPane.css"); +@import url("chrome://messenger/skin/messageIcons.css"); +@import url("chrome://messenger/skin/shared/mailWindow1.css"); + +#messengerBox { + background-color: -moz-Dialog; +} + +/* ::::: thread decoration ::::: */ + +/* ::::: group rows ::::: */ +treechildren::-moz-tree-row(dummy, hover), +treechildren::-moz-tree-row(dummy, selected, focus) { + background-color: var(--row-grouped-header-bg-color-selected) !important; + color: inherit; +} + +/* ..... tabs ..... */ + +#tabpanelcontainer { + appearance: none; + color-scheme: light dark; +} + +/* ..... Draw in titlebar ..... */ + +:root[tabsintitlebar][sizemode="normal"] #titlebar { + appearance: auto; + -moz-default-appearance: -moz-window-titlebar; +} + +:root[tabsintitlebar][sizemode="maximized"] #titlebar { + appearance: auto; + -moz-default-appearance: -moz-window-titlebar-maximized; +} + +@media (-moz-platform: windows-win7) and (-moz-windows-default-theme), + (-moz-platform: windows-win8) and (-moz-windows-default-theme) { + :root[tabsintitlebar][sizemode="normal"] #titlebar { + appearance: none; + } +} + +@media (-moz-windows-classic) { + :root[tabsintitlebar] #navigation-toolbox > #toolbar-menubar { + border-bottom: none; + } + + :root[tabsintitlebar][sizemode="normal"] #navigation-toolbox > #toolbar-menubar { + margin-top: 4px; + } +} + +/* The button box must appear on top of the navigation-toolbox in order for + * click and hover mouse events to work properly for the button in the restored + * window state. Otherwise, elements in the navigation-toolbox, like the menubar, + * can swallow those events. It will also place the buttons above the fog on + * themes with Aero Glass. + */ +.titlebar-buttonbox { + z-index: 1; +} + +.titlebar-buttonbox { + appearance: auto; + -moz-default-appearance: -moz-window-button-box; + position: relative; +} + +@media (-moz-windows-classic) { + .titlebar-buttonbox { + appearance: none; + } +} + +:root[sizemode="maximized"] .titlebar-buttonbox { + appearance: auto; + -moz-default-appearance: -moz-window-button-box-maximized; +} + +.titlebar-min { + appearance: auto; + -moz-default-appearance: -moz-window-button-minimize; +} + +@media (-moz-windows-classic: 0) { + .titlebar-min { + margin-inline-end: 2px; + } +} + +.titlebar-max { + appearance: auto; + -moz-default-appearance: -moz-window-button-maximize; +} + +.titlebar-restore { + appearance: auto; + -moz-default-appearance: -moz-window-button-restore; +} + +.titlebar-close { + appearance: auto; + -moz-default-appearance: -moz-window-button-close; +} + +@media (-moz-windows-compositor) { + @media (-moz-platform: windows-win7), + (-moz-platform: windows-win8) { + :root { + appearance: auto; + -moz-default-appearance: -moz-win-borderless-glass; + background-color: transparent; + } + + /* These should be hidden w/ glass enabled. Windows draws its own buttons. */ + .titlebar-button { + display: none; + } + + :root[sizemode="normal"] .titlebar-buttonbox:-moz-lwtheme { + margin-top: -2px; + } + + :root[sizemode="maximized"] .titlebar-buttonbox { + margin-inline-end: 3px; + } + } + + @media (-moz-platform: windows-win10) { + @media (-moz-windows-default-theme) { + :root:not(:-moz-lwtheme) { + background-color: var(--color-gray-10); + } + + :root[tabsintitlebar]:-moz-lwtheme { + background-color: var(--lwt-accent-color); + } + + :root[tabsintitlebar]:-moz-lwtheme:-moz-window-inactive { + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); + } + + :root[tabsintitlebar] #navigation-toolbox { + margin-top: -1px; + } + + :root[tabsintitlebar] #toolbar-menubar:not([inactive="true"]) { + margin-top: 1px; + } + + @media (-moz-windows-accent-color-in-titlebar: 0) { + :root[sizemode=normal][tabsintitlebar] { + border-top: 1px solid rgba(0, 0, 0, 0.7); + } + :root[sizemode=normal][tabsintitlebar][always-use-accent-color-for-window-border]:not(:-moz-window-inactive) { + border-top-color: AccentColor; + } + :root[tabsintitlebar]:not(:-moz-window-inactive,:-moz-lwtheme) { + background-color: var(--color-gray-30); + } + } + + @media (-moz-windows-accent-color-in-titlebar) { + :root[sizemode=normal][tabsintitlebar] { + border-top: 1px solid AccentColor; + } + :root[tabsintitlebar]:not(:-moz-window-inactive,:-moz-lwtheme) { + background-color: AccentColor; + } + + :root[tabsintitlebar] #navigation-toolbox:not(:-moz-window-inactive,:-moz-lwtheme) { + color: AccentColorText; + } + } + + :root[sizemode=normal][tabsintitlebar]:-moz-window-inactive { + border-top-color: rgba(0, 0, 0, 0.3); + } + } + + @media (prefers-contrast) { + #tabmail-container { + appearance: auto; + -moz-default-appearance: -moz-win-exclude-glass; + } + } + + .titlebar-buttonbox, + .titlebar-button { + appearance: none !important; + } + + .titlebar-button { + border: none; + margin: 0 !important; + padding: 9px 17px; + -moz-context-properties: stroke; + stroke: currentColor; + } + + @media (-moz-windows-default-theme) { + @media (-moz-windows-accent-color-in-titlebar) { + .titlebar-button:not(:-moz-window-inactive,:-moz-lwtheme) { + stroke: AccentColorText; + } + } + } + + .titlebar-buttonbox > .titlebar-button > .toolbarbutton-icon { + display: inline-flex; + width: 12px; + height: 12px; + } + + .titlebar-min { + list-style-image: url("chrome://messenger/skin/window-controls/minimize.svg"); + } + + .titlebar-max { + list-style-image: url("chrome://messenger/skin/window-controls/maximize.svg"); + } + + .titlebar-restore { + list-style-image: url("chrome://messenger/skin/window-controls/restore.svg"); + } + + .titlebar-restore:-moz-locale-dir(rtl) { + transform: scaleX(-1); + } + + .titlebar-close { + list-style-image: url("chrome://messenger/skin/window-controls/close.svg"); + } + + :root[lwtheme-image] .titlebar-button { + -moz-context-properties: unset; + } + :root[lwtheme-image] .titlebar-min { + list-style-image: url("chrome://messenger/skin/window-controls/minimize-themes.svg"); + } + :root[lwtheme-image] .titlebar-max { + list-style-image: url("chrome://messenger/skin/window-controls/maximize-themes.svg"); + } + :root[lwtheme-image] .titlebar-restore { + list-style-image: url("chrome://messenger/skin/window-controls/restore-themes.svg"); + } + :root[lwtheme-image] .titlebar-close { + list-style-image: url("chrome://messenger/skin/window-controls/close-themes.svg"); + } + + /* 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 { + stroke: white; + background-color: var(--color-red-60); + } + + .titlebar-close:hover:active { + background-color: var(--color-red-50); + } + + @media (prefers-color-scheme: dark) { + .titlebar-button:hover { + background-color: hsla(0, 0%, 100%, .12); + } + + .titlebar-button:hover:active { + background-color: hsla(0, 0%, 100%, .22); + } + + .titlebar-close:hover { + background-color: var(--color-red-70); + } + + .titlebar-close:hover:active { + background-color: var(--color-red-60); + } + } + } + @media (prefers-contrast) { + .titlebar-button { + stroke: ButtonText; + background-color: Field; + } + .titlebar-button:hover { + stroke: SelectedItemText; + background-color: SelectedItem; + } + + .titlebar-min { + list-style-image: url("chrome://messenger/skin/window-controls/minimize-highcontrast.svg"); + } + + .titlebar-max { + list-style-image: url("chrome://messenger/skin/window-controls/maximize-highcontrast.svg"); + } + + .titlebar-restore { + list-style-image: url("chrome://messenger/skin/window-controls/restore-highcontrast.svg"); + } + + .titlebar-close { + list-style-image: url("chrome://messenger/skin/window-controls/close-highcontrast.svg"); + } + } + } +} + +#messagepanebox { + border-top-width: 0; + border-inline-start: none; +} + +@media (prefers-contrast) { + :root:not(:-moz-lwtheme) + treechildren::-moz-tree-image(selected) { + color: inherit; + } +} + +@media (-moz-windows-default-theme) { + :root:not([lwt-tree],:-moz-lwtheme) #folderTree { + background-color: #fafafa; + } +} + +@media (-moz-platform: windows-win7) and (-moz-windows-default-theme) { + @media (-moz-windows-glass: 0) { + #messengerWindow:not([tabsintitlebar]) #navigation-toolbox:not(:-moz-lwtheme) { + background-color: var(--color-gray-30); + } + } +} + +@media (-moz-platform: windows-win7) and (-moz-windows-default-theme), + (-moz-platform: windows-win8) and (-moz-windows-default-theme) { + @media (-moz-windows-compositor) { + :root:not(:-moz-lwtheme) { + --lwt-tabs-border-color: var(--glassShadowColor); + } + + #messengerWindow[sizemode=normal] #tabpanelcontainer { + border: 1px solid var(--glassShadowColor); + border-top: none; + background-clip: padding-box; + } + + #messengerWindow[sizemode=normal] #toolbar-menubar { + border-right: 1px solid var(--glassShadowColor); + border-left: 1px solid var(--glassShadowColor); + background-clip: padding-box; + } + + #messengerWindow[sizemode=normal] .statusbar { + margin-top: -1px; + border: 1px solid var(--glassShadowColor); + border-top-color: threedshadow; + border-radius: 1px 1px 0 0; + background-clip: padding-box; + } + } +} + +@media (-moz-platform: windows-win8) and (-moz-windows-default-theme) { + #messengerWindow:not([tabsintitlebar]) #navigation-toolbox:not(:-moz-lwtheme) { + background-color: var(--color-gray-30); + } +} + +@media not (-moz-windows-non-native-menus) { + #viewPickerPopup > menu > .menu-text { + padding-inline-start: 0 !important; + } +} + +@media (-moz-windows-compositor: 0) { + @media (-moz-windows-default-theme) { + #messengerWindow:not(:-moz-lwtheme) { + background-color: rgb(185, 209, 234); + } + #messengerWindow:not(:-moz-lwtheme):-moz-window-inactive { + background-color: rgb(215, 228, 242); + } + } +} + +/* Global notification popup */ + +#notification-popup { + appearance: none; + background: transparent; + border: none; +} |