diff options
Diffstat (limited to 'browser/themes/shared/customizableui/customizeMode.inc.css')
| -rw-r--r-- | browser/themes/shared/customizableui/customizeMode.inc.css | 459 |
1 files changed, 0 insertions, 459 deletions
diff --git a/browser/themes/shared/customizableui/customizeMode.inc.css b/browser/themes/shared/customizableui/customizeMode.inc.css deleted file mode 100644 index d99933388..000000000 --- a/browser/themes/shared/customizableui/customizeMode.inc.css +++ /dev/null @@ -1,459 +0,0 @@ -/* 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/. */ - -/* Customization mode */ - -:root { - --drag-drop-transition-duration: .3s; -} - -#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox { - margin-bottom: 2em; -} - -#main-window:-moz-any([customize-entering],[customize-entered]) #content-deck, -#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox, -#main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox { - margin-left: 2em; - margin-right: 2em; -} - -#main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck { - pointer-events: none; -} - -#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, -#PanelUI-contents > .panel-customization-placeholder { - -moz-outline-radius: 2.5px; - outline: 1px dashed transparent; -} - -#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before { - /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */ - -moz-box-ordinal-group: 0; - content: ""; - display: -moz-box; - height: 100%; - left: 0; - outline-offset: -2px; - pointer-events: none; - position: absolute; - top: 0; - width: 100%; -} - -/* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the - #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the - offset from the bottom effectively the same as other targets (-2px). */ -#main-window[customize-entered] #TabsToolbar.customization-target::before { - top: -2px; -} - -/* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */ -#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover, -#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)), -#main-window[customize-entered] #nav-bar-customization-target.customization-target { - position: relative; -} - -/* Most target outlines are shown on hover and drag over but the panel menu uses - placeholders instead. */ -#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before, -#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, -/* nav-bar and panel outlines are always shown */ -#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { - outline-color: currentColor; -} - -#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { - transition: outline-color 250ms linear; -} - -#PanelUI-contents[showoutline=true] > .panel-customization-placeholder { - transition: outline-color 250ms linear; - outline-color: var(--panel-separator-color); -} - -#PanelUI-contents > .panel-customization-placeholder { - cursor: auto; - outline-offset: -5px; -} - -#main-window[customizing] .customization-target:not(#PanelUI-contents) { - min-width: 100px; - padding-left: 10px; - padding-right: 10px; -} - -#customization-container { - background-color: -moz-field; - color: -moz-fieldText; - text-shadow: none; -} - -#customization-palette, -#customization-empty { - padding: 5px 25px 25px; -} - -#customization-header { - font-size: 1.75em; - line-height: 1.75em; - color: GrayText; - font-weight: 200; - margin: 25px 25px 12px; - padding-bottom: 12px; - border-bottom: 1px solid ThreeDLightShadow; -} - -#customization-panel-container { - padding: 15px 25px 25px; - background-image: linear-gradient(to bottom, #3e86ce, #3878ba); -} - -#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox, -#customization-footer { - background-color: -moz-dialog; -} - -#customization-footer { - border-top: 1px solid ThreeDLightShadow; - padding: 10px; -} - -%if defined(XP_MACOSX) || defined(XP_WIN) -%ifdef XP_WIN -@media (-moz-windows-default-theme) { -%endif - -.customizationmode-button { - border: 1px solid rgb(192,192,192); - border-radius: 3px; - margin: 5px; - padding: 2px 10px; - background-color: rgb(251,251,251); - color: rgb(71,71,71); - box-shadow: 0 1px rgba(255, 255, 255, 0.5), - inset 0 1px rgba(255, 255, 255, 0.5); - -moz-appearance: none; -} - -.customizationmode-button > .box-inherit { - border-width: 0; - padding-inline-start: 0; - padding-inline-end: 0; -} - -.customizationmode-button > .button-icon { - margin-inline-start: 0; -} - -.customizationmode-button:not([type=menu]) > .button-text { - margin-inline-end: 0; -} - -.customizationmode-button > .button-menu-dropmarker { - margin-inline-end: 0; - padding-inline-end: 0; -} - -.customizationmode-button:hover:active:not([disabled]), -.customizationmode-button[open], -.customizationmode-button[checked] { - background-color: rgb(218, 218, 218); - border-color: rgb(168, 168, 168); - text-shadow: 0 1px rgb(236, 236, 236); - box-shadow: 0 1px rgba(255, 255, 255, 0.5), - inset 0 1px rgb(196, 196, 196); -} - -.customizationmode-button[disabled="true"] { - opacity: .5; -} - -%ifdef XP_WIN -} /* @media (-moz-windows-default-theme) */ -%endif -%endif /* defined(XP_MACOSX) || defined(XP_WIN) */ - -.customizationmode-button > .box-inherit > .box-inherit > .button-icon, -.customizationmode-button > .button-box > .button-icon { - height: 24px; -} - -%ifdef CAN_DRAW_IN_TITLEBAR -#customization-titlebar-visibility-button > .button-box > .button-text, -%endif -#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text { - /* Sadly, button.css thinks its margins are perfect for everyone. */ - margin-inline-start: 6px !important; -} - -#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon { - width: 20px; - height: 20px; - border-radius: 2px; - background-image: url("chrome://browser/skin/theme-switcher-icon.png"); - background-size: contain; -} - -%ifdef CAN_DRAW_IN_TITLEBAR -#customization-titlebar-visibility-button { - list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png"); - -moz-image-region: rect(0, 24px, 24px, 0); -} - -#customization-titlebar-visibility-button > .button-box > .button-icon { - vertical-align: middle; -} - -#customization-titlebar-visibility-button[checked] { - -moz-image-region: rect(0, 48px, 24px, 24px); -} - -@media (min-resolution: 1.1dppx) { - #customization-titlebar-visibility-button { - list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png"); - -moz-image-region: rect(0, 48px, 48px, 0); - } - - #customization-titlebar-visibility-button[checked] { - -moz-image-region: rect(0, 96px, 48px, 48px); - } -} -%endif /* CAN_DRAW_IN_TITLEBAR */ - -#main-window[customize-entered] #customization-panel-container { - background-image: url("chrome://browser/skin/customizableui/customizeMode-separatorHorizontal.png"), - url("chrome://browser/skin/customizableui/customizeMode-separatorVertical.png"), - url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"), - url("chrome://browser/skin/customizableui/background-noise-toolbar.png"), - linear-gradient(to bottom, #3e86ce, #3878ba); - background-position: center top, left center, left top, left top, left top; - background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat; - background-size: auto 12px, 12px 100%, auto, auto, auto; - background-attachment: scroll, scroll, fixed, fixed, scroll; -} - -toolbarpaletteitem[place="toolbar"] { - transition: border-width 250ms ease-in-out; -} - -toolbarpaletteitem[mousedown] { - cursor: -moz-grabbing; -} - -.panel-customization-placeholder, -toolbarpaletteitem[place="palette"], -toolbarpaletteitem[place="panel"] { - transition: transform var(--drag-drop-transition-duration) ease-in-out; -} - -#customization-palette { - transition: opacity .3s ease-in-out; - opacity: 0; -} - -#customization-palette[showing="true"] { - opacity: 1; -} - -toolbarpaletteitem toolbarbutton[disabled] { - color: inherit !important; -} - -toolbarpaletteitem[notransition].panel-customization-placeholder, -toolbarpaletteitem[notransition][place="toolbar"], -toolbarpaletteitem[notransition][place="palette"], -toolbarpaletteitem[notransition][place="panel"] { - transition: none; -} - -toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, -toolbarpaletteitem > toolbaritem.panel-wide-item, -toolbarpaletteitem > toolbarbutton[type="menu-button"] { - transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important; -} - -toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { - transform: scale(1.3); -} - -toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item, -toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] { - transform: scale(1.1); -} - -/* Override the toolkit styling for items being dragged over. */ -toolbarpaletteitem[place="toolbar"] { - border-left-width: 0; - border-right-width: 0; - margin-right: 0; - margin-left: 0; -} - -#customization-palette:not([hidden]) { - margin-bottom: 25px; -} - -toolbarpaletteitem[place="palette"]:-moz-focusring, -toolbarpaletteitem[place="panel"]:-moz-focusring, -toolbarpaletteitem[place="toolbar"]:-moz-focusring { - outline-width: 0; -} - -toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring, -toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring, -toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { - /* Delay adding the focusring back until after the transform transition completes. */ - transition: outline-width .01s linear var(--drag-drop-transition-duration); - outline: 1px dotted; - -moz-outline-radius: 2.5px; -} - -toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { - outline-offset: -5px; -} - -#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, -#wrapper-edit-controls[place="palette"] > #edit-controls > separator, -#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton, -#wrapper-zoom-controls[place="palette"] > #zoom-controls > separator { - margin-top: 20px; -} - -#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, -#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton { - margin-left: 0; - margin-right: 0; - max-width: 24px; - min-width: 24px; - max-height: 24px; - min-height: 24px; - padding: 4px; -} - -#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, -#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { - width: 16px; -} - -#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon { - opacity: 1; /* To ensure these buttons always look enabled in customize mode */ -} - -#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button, -#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator { - display: none; -} - -#wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks { - -moz-box-pack: center; - min-height: 48px; -} - -#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon { - margin-inline-end: 5px; -} - -#customization-palette > toolbarpaletteitem > label { - text-align: center; - margin-left: 0; - margin-right: 0; -} - -#customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent { - -moz-box-orient: vertical; - /* Make the panel padding uniform across all platforms due to the - styling of the section headers and footer. */ - padding: 10px; -} - -.customization-lwtheme-menu-theme > .toolbarbutton-icon { - width: 32px; - height: 32px; -} - -.customization-lwtheme-menu-theme { - -moz-appearance: none; - border: 1px solid transparent; - margin: 0 -5px 5px; - padding-top: 0; - padding-inline-end: 5px; - padding-bottom: 0; - padding-inline-start: 0; -} - -.customization-lwtheme-menu-theme[defaulttheme] { - list-style-image: url(chrome://browser/skin/theme-switcher-icon.png); -} - -.customization-lwtheme-menu-theme[active="true"], -.customization-lwtheme-menu-theme:hover { - background-color: var(--arrowpanel-dimmed); - border-color: var(--panel-separator-color); -} - -.customization-lwtheme-menu-theme[active="true"], -.customization-lwtheme-menu-theme:hover:active { - background-color: var(--arrowpanel-dimmed-further); -} - -.customization-lwtheme-menu-theme > .toolbarbutton-icon { - margin: 5px; -} - -.customization-lwtheme-menu-theme > .toolbarbutton-text { - text-align: start; -} - -#customization-lwtheme-menu-header, -#customization-lwtheme-menu-recommended { - padding: 10px; - margin-bottom: 5px; -} - -#customization-lwtheme-menu-header, -#customization-lwtheme-menu-recommended, -#customization-lwtheme-menu-footer { - background-color: var(--arrowpanel-dimmed); - margin-right: -10px; - margin-left: -10px; -} - -#customization-lwtheme-menu-header { - margin-top: -10px; - border-bottom: 1px solid var(--arrowpanel-dimmed); -} - -#customization-lwtheme-menu-recommended { - border-top: 1px solid var(--arrowpanel-dimmed); - border-bottom: 1px solid var(--arrowpanel-dimmed); -} - -#customization-lwtheme-menu-footer { - background: linear-gradient(var(--arrowpanel-dimmed) 60%, transparent) border-box; - border-top: 1px solid var(--arrowpanel-dimmed); - margin-bottom: -10px; -} - -.customization-lwtheme-menu-footeritem { - -moz-appearance: none; - -moz-box-flex: 1; - color: inherit; - border-style: none; - padding: 10px; - margin-left: 0; - margin-right: 0; -} - -.customization-lwtheme-menu-footeritem:hover { - background: linear-gradient(var(--arrowpanel-dimmed) 40%, transparent) padding-box; -} - -.customization-lwtheme-menu-footeritem:first-child { - border-inline-end: 1px solid var(--panel-separator-color); -} |