/* ***** BEGIN LICENSE BLOCK ***** * Version: MPL 1.1/GPL 2.0/LGPL 2.1 * * The contents of this file are subject to the Mozilla Public License Version * 1.1 (the "License"); you may not use this file except in compliance with * the License. You may obtain a copy of the License at * http://www.mozilla.org/MPL/ * * Software distributed under the License is distributed on an "AS IS" basis, * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License * for the specific language governing rights and limitations under the * License. * * The Original Code is the Extension Manager UI. * * The Initial Developer of the Original Code is * the Mozilla Foundation. * Portions created by the Initial Developer are Copyright (C) 2010 * the Initial Developer. All Rights Reserved. * * Contributor(s): * Blair McBride * * Alternatively, the contents of this file may be used under the terms of * either the GNU General Public License Version 2 or later (the "GPL"), or * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), * in which case the provisions of the GPL or the LGPL are applicable instead * of those above. If you wish to allow use of your version of this file only * under the terms of either the GPL or the LGPL, and not to allow others to * use your version of this file under the terms of the MPL, indicate your * decision by deleting the provisions above and replace them with the notice * and other provisions required by the GPL or the LGPL. If you do not delete * the provisions above, a recipient may use your version of this file under * the terms of any one of the MPL, the GPL or the LGPL. * * ***** END LICENSE BLOCK ***** */ %include ../../global/shared.inc #addons-page { -moz-appearance: none; padding: 18px; background-image: /* Texture */ url("chrome://mozapps/skin/extensions/background-texture.png"), /* Gradient */ -moz-linear-gradient(top, #ADB5C2, #BFC6D1); } #view-port-container { /* Needed to allow the radius to clip the inner content, see bug 595656 */ overflow: hidden; background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.05)); border: 1px solid rgba(50, 65, 92, 0.4); border-radius: 5px; } /*** global warnings ***/ .global-warning-container { overflow-x: hidden; } .global-warning { -moz-box-align: center; padding: 0 8px; color: #916D15; font-weight: bold; } .global-warning, .global-warning .button-link { text-shadow: #FFFFFF 1px 1px 1px; } #addons-page[warning] .global-warning-container { background-color: rgba(255, 255, 0, 0.1); background-image: url("chrome://mozapps/skin/extensions/stripes-warning.png"); background-repeat: repeat-x; } #detail-view .global-warning { padding: 4px 12px; min-height: 31px; border-bottom: 1px solid rgba(50, 65, 92, 0.4); } @media all and (max-width: 600px) { .global-warning-text { display: none; } .global-warning .warning-icon { background-color: rgba(255, 255, 255, 0.7); box-shadow: 0px 0px 2px 4px rgba(255, 255, 255, 0.7); border-radius: 10px; } } /* Plugins aren't yet disabled by safemode (bug 342333), so don't show that warning when viewing plugins. */ #addons-page[warning="safemode"] .view-pane[type="plugin"] .global-warning-container, #addons-page[warning="safemode"] #detail-view[loading="true"] .global-warning-container { background-color: inherit; background-image: none; } /*** notification icons ***/ .warning-icon { list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.png"); width: 16px; height: 15px; margin: 3px 0; } .error-icon { list-style-image: url("chrome://mozapps/skin/extensions/alerticon-error.png"); width: 16px; height: 15px; margin: 3px 0; } .pending-icon, .info-icon { list-style-image: url("chrome://mozapps/skin/extensions/alerticon-info-positive.png"); width: 16px; height: 15px; margin: 3px 0; } .addon-view[pending="disable"] .pending-icon, .addon-view[pending="uninstall"] .pending-icon { list-style-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png"); width: 16px; height: 15px; margin: 3px 0; } /*** view alert boxes ***/ .alert-container { -moz-box-align: center; } .alert-spacer-before { -moz-box-flex: 1; } .alert-spacer-after { -moz-box-flex: 3; } .alert { -moz-box-align: center; padding: 10px; color: #373D48; font-size: 12px; border: 1px solid #A8B8D1; border-radius: 8px; background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(236, 241, 247, 0.7)); background-clip: padding-box; box-shadow: 0 -3px 0 rgba(58, 78, 103, 0.05) inset, 0 3px 0 rgba(175, 195, 220, 0.3); } .alert .alert-title { font-weight: bold; font-size: 200%; margin-bottom: 15px; } .alert .addon-control { margin: 1em 2em; } .loading { list-style-image: url("chrome://global/skin/icons/loading_16.png"); padding-left: 20px; padding-right: 20px; } /*** category selector ***/ #categories { -moz-appearance: none; border: none; -moz-margin-end: -1px; background-color: transparent; position: relative; margin-top: 31px; } .category { -moz-appearance: none; color: #252F3B; border-width: 1px; border-style: solid; border-color: transparent; padding: 10px 4px; -moz-box-align: center; overflow: hidden; min-height: 0; } .category:-moz-locale-dir(ltr) { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .category:-moz-locale-dir(rtl) { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .category[disabled] { border-top: 0; border-bottom: 0; height: 0; opacity: 0; -moz-transition-property: height, opacity; -moz-transition-duration: 1s, 0.8s; } .category:not([disabled]) { height: 52px; -moz-transition-property: height, opacity; -moz-transition-duration: 1s, 0.8s; } .category[selected] { background-color: rgba(255, 255, 255, 0.35); color: -moz-dialogtext; border-color: rgba(50, 65, 92, 0.4); -moz-border-end-color: #C9CFD7; } .category-name { font-size: 150%; } /* Maximize the size of the viewport when the window is small */ @media all and (max-width: 800px) { .category-name { display: none; } } .category-badge { background-color: #55D4FF; padding: 2px 8px; margin: 6px 0; border-radius: 10000px; color: #FFF; font-weight: bold; text-align: center; } .category-badge[value="0"] { visibility: hidden; } .category-icon { width: 32px; height: 32px; -moz-margin-start: 6px; } #category-search > .category-icon { list-style-image: url("chrome://mozapps/skin/extensions/category-search.png"); } #category-discover > .category-icon { list-style-image: url("chrome://mozapps/skin/extensions/category-discover.png"); } #category-languages > .category-icon { list-style-image: url("chrome://mozapps/skin/extensions/category-languages.png"); } #category-searchengines > .category-icon { list-style-image: url("chrome://mozapps/skin/extensions/category-searchengines.png"); } #category-extensions > .category-icon { list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.png"); } #category-themes > .category-icon { list-style-image: url("chrome://mozapps/skin/extensions/category-themes.png"); } #category-plugins > .category-icon { list-style-image: url("chrome://mozapps/skin/extensions/category-plugins.png"); } #category-availableUpdates > .category-icon { list-style-image: url("chrome://mozapps/skin/extensions/category-available.png"); } #category-recentUpdates > .category-icon { list-style-image: url("chrome://mozapps/skin/extensions/category-recent.png"); } /*** header ***/ #header { margin-bottom: 18px; } .nav-button { list-style-image: url(chrome://mozapps/skin/extensions/navigation.png); } #back-btn:-moz-locale-dir(ltr), #forward-btn:-moz-locale-dir(rtl) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; -moz-image-region: rect(0, 20px, 20px, 0); } #back-btn:-moz-locale-dir(rtl), #forward-btn:-moz-locale-dir(ltr) { border-top-left-radius: 0; border-bottom-left-radius: 0; -moz-image-region: rect(0, 40px, 20px, 20px); } #header-utils-btn { min-width: 4.5em; list-style-image: url("chrome://mozapps/skin/extensions/utilities.png"); -moz-margin-end: 18px; } #header-search { margin: 0; } #header-search:not([focused]) { opacity: 0.7; } .view-header { padding: 4px; margin: 0; min-height: 31px; border-bottom: 1px solid rgba(50, 65, 92, 0.4); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)); } /*** sorters ***/ .sort-controls { -moz-appearance: none; } .sorter { -moz-appearance: none; border: none; color: #41434B; background-color: transparent; border-radius: 10000px; padding: 0 6px; margin: 0 6px; min-width: 12px !important; -moz-box-direction: reverse; } .sorter[checkState="1"], .sorter[checkState="2"], .sorter:active:hover { text-shadow: #FFF 0 1px 1px; background-color: #C0C3CB; box-shadow: inset #A3A6AC 0 1px 1px, #FFF 0 1px 1px; } .sorter:hover { text-shadow: #FFF 0 1px 1px; background-color: #C0C3CB; } .sorter[checkState="1"] { list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif"); } .sorter[checkState="2"] { list-style-image: url("chrome://global/skin/arrow/arrow-up.gif"); } .sorter .button-icon { -moz-margin-start: 4px; } /*** discover view ***/ .discover-spacer-before, .discover-spacer-after { -moz-box-flex: 1; } #discover-error .alert { max-width: 45em; -moz-box-flex: 1; } .discover-logo { list-style-image: url("chrome://mozapps/skin/extensions/discover-logo.png"); -moz-margin-end: 15px; } .discover-title { font-weight: bold; font-size: 24px; font-family: MetaWebPro-Book, "Trebuchet MS", sans-serif; margin: 0 0 15px 0; } .discover-description { text-align: justify; margin: 0 0 15px 0; } .discover-footer { text-align: justify; } /*** list ***/ .list { -moz-appearance: none; margin: 0; border: none; background-color: transparent; } .addon { border-bottom: 1px solid #B6B1B9; padding: 5px; color: #373D48; } .details { cursor: pointer; margin: 0; -moz-margin-start: 10px; } .icon-container { width: 48px; height: 48px; margin: 3px 7px; } .icon { list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png"); max-width: 48px; max-height: 48px; } .addon[active="false"] .icon { filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale"); } .addon-view[type="theme"] .icon { list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png"); } .addon-view[type="locale"] .icon { list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png"); } .addon-view[type="plugin"] .icon { list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png"); } .name-container { font-size: 150%; margin-bottom: 0; font-weight: bold; color: #000; text-shadow: 1px 1px 1px #FFF; } .creator { font-weight: bold; } .creator .text-link { color: #0066CC; } .description-container { margin-top: 8px; -moz-margin-start: 6px; } .description { margin: 0; } .warning, .pending, .error { -moz-margin-start: 48px; font-weight: bold; text-shadow: 1px 1px 1px #FFF; } .addon-view .warning { color: #916D15; } .addon-view .error { color: #864441; } .addon-view .pending { color: #1B7123; } .addon-view[pending="disable"] .pending, .addon-view[pending="uninstall"] .pending { color: #62666E; } .addon-view[notification="warning"] { background-image: -moz-linear-gradient(rgba(255, 255, 0, 0.2), rgba(255, 255, 0, 0.1)); } .addon-view[notification="error"] { background-image: -moz-linear-gradient(rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.1)); } .addon-view[notification="info"] { background-image: -moz-linear-gradient(rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.1)); } .addon-view[pending="enable"], .addon-view[pending="upgrade"], .addon-view[pending="install"] { background-image: -moz-linear-gradient(rgba(0, 255, 0, 0.2), rgba(0, 255, 0, 0.1)); } .addon-view[pending="disable"], .addon-view[pending="uninstall"] { background-image: -moz-linear-gradient(rgba(128, 128, 128, 0.2), rgba(128, 128, 128, 0.1)); } .addon .relnotes-container { -moz-box-align: start; height: 0; overflow: hidden; opacity: 0; -moz-transition-property: height, opacity; -moz-transition-duration: 0.5s, 0.5s; } .addon[show-relnotes] .relnotes-container { opacity: 1; -moz-transition-property: height, opacity; -moz-transition-duration: 0.5s, 0.5s; } .addon .relnotes-header { font-weight: bold; margin: 10px 0; } .addon .relnotes-toggle { -moz-appearance: none; border: none; background: transparent; font-weight: bold; -moz-box-direction: reverse; cursor: pointer; list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif"); } .addon .relnotes-toggle > .button-box > .button-icon { -moz-padding-start: 4px; } .addon[show-relnotes] .relnotes-toggle { list-style-image: url("chrome://global/skin/arrow/arrow-up.gif"); } .addon[active="false"] { background-color: rgba(135, 135, 135, 0.1); background-image: -moz-linear-gradient(rgba(135, 135, 135, 0), rgba(135, 135, 135, 0.1)); } .addon-view[active="false"], .addon-view[active="false"] .name-container { color: #686A6B; } .addon-view[notification="warning"] { background-image: url("chrome://mozapps/skin/extensions/stripes-warning.png"), -moz-linear-gradient(rgba(255, 255, 0, 0.04), rgba(255, 255, 0, 0)); background-repeat: repeat-x; } .addon-view[notification="error"] { background-image: url("chrome://mozapps/skin/extensions/stripes-error.png"), -moz-linear-gradient(rgba(255, 0, 0, 0.04), rgba(255, 0, 0, 0)); background-repeat: repeat-x; } .addon-view[pending="enable"], .addon-view[pending="upgrade"], .addon-view[pending="install"] { background-image: url("chrome://mozapps/skin/extensions/stripes-info-positive.png"), -moz-linear-gradient(rgba(0, 255, 0, 0.04), rgba(0, 255, 0, 0)); background-repeat: repeat-x; } .addon-view[pending="disable"], .addon-view[pending="uninstall"] { background-image: url("chrome://mozapps/skin/extensions/stripes-info-negative.png"), -moz-linear-gradient(rgba(128, 128, 128, 0.04), rgba(128, 128, 128, 0)); background-repeat: repeat-x; } .addon[selected] { background-color: rgba(105, 125, 149, 0.39); color: black; } .addon[selected] .name-container { text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7); } .addon[active="false"][selected] .name-container { color: #3F3F3F; } /*** search view ***/ #search-filter { padding: 5px 20px; font-size: 120%; overflow-x: hidden; border-bottom: 1px solid rgba(50, 65, 92, 0.4); } #search-filter-label { font-weight: bold; color: #666; } .search-filter-radio { -moz-appearance: none; padding: 0 10px; margin: 0 3px; border-radius: 10000px; } .search-filter-radio[selected] { text-shadow: #FFF 0 1px 1px; background-color: #C0C3CB; box-shadow: inset #A3A6AC 0 1px 1px, #FFF 0 1px 1px; } .search-filter-radio:hover { text-shadow: #FFF 0 1px 1px; background-color: #C0C3CB; } .search-filter-radio .radio-check { display: none; } .search-filter-radio .radio-icon { display: none; } #search-allresults-link { margin-top: 1em; margin-bottom: 2em; } /*** detail view ***/ #detail-view .loading { opacity: 0; } #detail-view[loading-extended] .loading { opacity: 1; -moz-transition-property: opacity; -moz-transition-duration: 1s; } .detail-view-container { padding: 0 2em 2em 2em; font-size: 110%; } #detail-notifications { margin-top: 1em; margin-bottom: 2em; } #detail-notifications .warning, #detail-notifications .pending, #detail-notifications .error { -moz-margin-start: 0; } #detail-icon { -moz-margin-end: 10px; margin-top: 6px; max-width: 64px; max-height: 64px; } #detail-summary { margin-bottom: 2em; } #detail-name-container { font-size: 200%; } #detail-screenshot { -moz-margin-end: 2em; max-width: 300px; max-height: 300px; } #detail-desc-container { margin-bottom: 2em; } #detail-desc, #detail-fulldesc { -moz-margin-start: 6px; /* This is necessary to fix layout issues with multi-line descriptions, see bug 592712*/ outline: solid transparent; white-space: pre-wrap; min-width: 10em; } #detail-fulldesc { margin-top: 1em; } #detail-contributions { border-radius: 5px; border: 1px solid rgba(50, 65, 92, 0.3); margin-bottom: 2em; padding: 1em; background-color: rgba(255, 255, 255, 0.35); } #detail-contrib-description { font-style: italic; margin-bottom: 1em; color: #373D48; } #detail-contrib-suggested { color: grey; font-weight: bold; } #detail-contrib-btn { -moz-appearance: none; color: #FFF; border: 1px solid #3A4EEE; border-radius: 3px; list-style-image: url("chrome://mozapps/skin/extensions/heart.png"); background-color: #2F73EF; background-image: -moz-linear-gradient(rgba(251, 252, 253, 0.70), rgba(246, 247, 248, 0.27) 49%, rgba(231, 232, 233, 0.25) 51%, rgba(225, 226, 229, 0.1)); } #detail-contrib-btn .button-box { padding: 0 6px 1px 6px; } #detail-contrib-btn .button-icon { -moz-margin-end: 3px; } #detail-contrib-btn:not(:active):hover { border-color: #4271FF; background-color: #0459F7; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 0 3.5px hsl(190, 90%, 80%); -moz-transition: background-color .4s ease-in, border-color .3s ease-in, box-shadow .3s ease-in } #detail-contrib-btn:active:hover { background-color: #8FA1C1; border-color: rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.55) rgba(0, 0, 0, 0.5); box-shadow: 0 0 6.5px rgba(0, 0, 0, 0.4) inset, 0 0 2px rgba(0, 0, 0, 0.4) inset; } #detail-grid { margin-bottom: 2em; } .detail-row[first-row="true"], .detail-row-complex[first-row="true"] { border-top: none; } .detail-row, .detail-row-complex { border-top: 2px solid; -moz-border-top-colors: rgba(28, 31, 37, 0.2) rgba(255, 255, 255, 0.2); -moz-box-align: center; } .detail-row-value { -moz-margin-start: 0; } #detail-controls { margin-bottom: 1em; } #detail-view[active="false"]:not([pending]):not([notification]) { background-image: -moz-linear-gradient(rgba(135, 135, 135, 0.1), rgba(135, 135, 135, 0)); } /*** creator ***/ .creator > label { -moz-margin-start: 0; -moz-margin-end: 0; } .creator > .text-link { margin-top: 1px; margin-bottom: 1px; } /*** rating ***/ .meta-rating { -moz-margin-start: 0; -moz-margin-end: 0; margin-top: 2px; } .meta-rating > .star { list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png"); padding: 0 1px; } .meta-rating > .star[on="true"] { list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png"); } /*** download progress ***/ .download-progress { background-image: -moz-linear-gradient(top, #DCDEE3, #CBCED6); border: 1px solid #858898; border-radius: 3px; box-shadow: inset #E3E8EC 0 1px 1px, rgba(227, 232, 236, 0.4) 0 1px 1px; width: 200px; height: 21px; margin: 0 8px; } .download-progress[mode="undetermined"] .progress { -moz-binding: url("chrome://global/content/bindings/progressmeter.xml#progressmeter-undetermined"); } .download-progress[mode="undetermined"] { border-color: #2E773A; } .download-progress[mode="undetermined"] .status-container { padding: 0 2px; } .download-progress .start-cap, .download-progress[complete] .end-cap, .download-progress[mode="undetermined"] .end-cap, .download-progress .progress .progress-bar { -moz-appearance: none; background-image: -moz-linear-gradient(#6AC47E, #4FAC6A); margin-top: -1px; margin-bottom: -1px; border: 1px solid #2E773A; } .download-progress .start-cap { -moz-margin-start: -1px; -moz-border-end-width: 0; } .download-progress .end-cap { -moz-margin-end: -1px; -moz-border-start-width: 0px !important; } .download-progress .progress .progress-bar { border-left-width: 0; border-right-width: 0; min-height: 21px; } .download-progress .progress { -moz-appearance: none; background-color: transparent; padding: 0; margin: 0; border: none; } .download-progress .start-cap, .download-progress .end-cap { width: 4px; } .download-progress .start-cap:-moz-locale-dir(ltr), .download-progress .end-cap:-moz-locale-dir(rtl) { border-radius: 3px 0 0 3px; } .download-progress .end-cap:-moz-locale-dir(ltr), .download-progress .start-cap:-moz-locale-dir(rtl) { border-radius: 0 3px 3px 0; } .download-progress .cancel { -moz-appearance: none; background-color: rgba(255, 255, 255, 0.15); border: 1px solid rgba(0, 0, 0, 0.4); padding: 3px; border-radius: 3px; min-width: 0; margin: 3px; } .download-progress .cancel .button-text { display: none; } .download-progress .cancel .button-icon { -moz-margin-start: 0; } .download-progress .cancel { list-style-image: url('chrome://mozapps/skin/extensions/cancel.png'); } .download-progress .status-container { -moz-box-align: center; } .download-progress .status { text-shadow: #FFF 0 0 2px; } /*** install status ***/ .install-status { -moz-box-align: center; } /*** check for updates ***/ #updates-container { -moz-box-align: center; } #updates-installed, #updates-downloaded { color: #00BB00; font-weight: bold; } #update-selected { margin: 12px; } /*** buttons ***/ .addon-control { -moz-appearance: none; padding: 2px 5px; border: 1px solid #858898; border-radius: 3px; background-image: -moz-linear-gradient(top, #DCDEE3, #CBCED6); box-shadow: inset #E3E8EC 0 1px 1px, rgba(227, 232, 236, 0.4) 0 1px 1px; } .addon-control[disabled="true"] { display: none; } .addon-control:hover { border-color: @toolbarbuttonBorderColor@; } .addon-control:active:hover { box-shadow: inset rgba(0, 0, 0, 0.5) 1px 1px 4px; background-image: -moz-linear-gradient(top, #949599, #A8A9AD); border-color: #50525B; } .addon-control:-moz-window-inactive { border-color: @toolbarbuttonInactiveBorderColor@; } .button-link { -moz-appearance: none; background: transparent; border: none; text-decoration: underline; color: #0066CC; cursor: pointer; min-width: 0; margin: 0 6px; } .text-link { color: #3386D5; } .button-link:hover, .text-link:hover { color: #3DA1FF; } .header-button { -moz-appearance: none; min-width: 0; padding: 0 3px; margin: 0; height: 22px; border: 1px solid @toolbarbuttonBorderColor@; border-radius: @toolbarbuttonCornerRadius@; box-shadow: 0 1px rgba(255, 255, 255, 0.2); background: @toolbarbuttonBackground@; background-origin: border-box; opacity: 0.8; } .header-button .toolbarbutton-text { display: none; } .header-button[disabled="true"] .toolbarbutton-icon { opacity: 0.4; } .header-button:not([disabled="true"]):hover { opacity: 1; } .header-button:not([disabled="true"]):active:hover, .header-button[open="true"] { background: @toolbarbuttonPressedBackgroundColor@; text-shadow: @loweredShadow@; box-shadow: @toolbarbuttonPressedInnerShadow@, @loweredShadow@; } .header-button:-moz-window-inactive { border-color: @toolbarbuttonInactiveBorderColor@; background-image: @toolbarbuttonInactiveBackgroundImage@; }