X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=EarlyBlue%2Fmozapps%2Fextensions%2Fextensions.css;h=48de940a6db2698320b09bfbc63be7f3ebaf46e7;hp=8181cab4c04a0274cdf49af3131dcf7d78da478f;hb=38b75e2e0c3847fd3a7410d927995343cb72ef3f;hpb=0de0775005cca76dd0cfe92d4f905109a9227092 diff --git a/EarlyBlue/mozapps/extensions/extensions.css b/EarlyBlue/mozapps/extensions/extensions.css index 8181cab4..48de940a 100644 --- a/EarlyBlue/mozapps/extensions/extensions.css +++ b/EarlyBlue/mozapps/extensions/extensions.css @@ -37,10 +37,13 @@ #addons-page { background-color: #CCD0DD; + color: #000000; margin: 20px; } -#view-port { +#view-port-container { + /* Needed to allow the radius to clip the inner content, see bug 595656 */ + overflow: hidden; background-color: #FFFFFF; border: 1px solid #666699; } @@ -48,7 +51,10 @@ .nav-button { list-style-image: url("chrome://communicator/skin/icons/communicatoricons.png"); min-width: 0; - -moz-margin-end: 0; +} + +#forward-btn { + -moz-border-start: none; } #back-btn:-moz-locale-dir(ltr), @@ -71,8 +77,13 @@ -moz-image-region: rect(63px 50px 84px 25px); } + /*** global warnings ***/ - + +.global-warning-container { + overflow-x: hidden; +} + .global-warning { -moz-box-align: center; padding: 0 8px; @@ -86,9 +97,30 @@ #detail-view .global-warning { padding: 4px 12px; - border-bottom: 1px solid #9999CC; + border-bottom: 1px solid #9999CC; +} + +@media all and (max-width: 600px) { + .global-warning-text { + display: none; + } + + .global-warning .warning-icon { + /* background-color: #FFF; + box-shadow: 0px 0px 2px 5px #FFF; + 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 { @@ -113,6 +145,56 @@ margin: 3px 0; } +.addon-view[pending="disable"] .pending-icon, +.addon-view[pending="uninstall"] .pending-icon { + list-style-image: url("chrome://global/skin/icons/warning-16.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: #000000; + border: 1px inset #CCD0DD; + border-radius: 8px; + background-color: #CCD0DD; + background-clip: padding-box; +} + +.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.gif"); + padding-left: 20px; + padding-right: 20px; +} + + /*** category selector ***/ #categories { @@ -121,21 +203,25 @@ -moz-margin-end: -1px; background-color: transparent; position: relative; + margin-top: 31px; } .category { + background-color: transparent; + color: #404040; + min-height: 0; + padding: 10px 4px; border-width: 1px; - -moz-border-end-width: 0; border-style: solid; border-color: transparent; - padding: 10px 4px; -moz-box-align: center; overflow: hidden; - min-height: 0px; } .category[disabled] { - height: 0px; + border-top: 0; + border-bottom: 0; + height: 0; opacity: 0; -moz-transition-property: height, opacity; -moz-transition-duration: 1s, 0.8s; @@ -157,10 +243,17 @@ 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: #666699; padding: 2px 8px; - margin: 6px 0px; + margin: 6px 0; border: 1px outset #666699; color: #FFFFFF; font-weight: bold; @@ -209,47 +302,37 @@ /*** header ***/ #header { - margin-bottom: 20px; + margin-bottom: 18px; height: 2em; } -#header-name, #header-link { - color: #FFFFFF; -} - -#header-name { - font-size: 180%; -} - -#header-link { - -moz-appearance: none; - border: none; - background: transparent; - font-size: 120%; - cursor: pointer; - list-style-image: url("chrome://mozapps/skin/extensions/go-back.png"); +#header-search { + color: #000000; + border: 1px inset #CCD0DD; + padding: 3px; + background-color: #CCD0DD; + margin: 0; } -#header-link .button-icon { - -moz-margin-end: 6px; +#header-search .textbox-input:-moz-placeholder { + color: #808080; } -#header-searching { - list-style-image: url("chrome://global/skin/icons/loading.gif"); +#header-search[focused="true"] { + background-color: #FFFFFF; } #header-utils-btn { min-width: 4.5em; list-style-image: url("chrome://mozapps/skin/extensions/utilities.png"); -} - -#header-utils-btn:-moz-focusring > .button-box { - border: none; + -moz-margin-end: 18px; } .view-header { + background-color: #9999CC; padding: 4px; - margin: 0px; + margin: 0; + min-height: 31px; border-bottom: 1px solid #666699; } @@ -262,17 +345,29 @@ .sorter { -moz-appearance: none; - border: none; + border: 1px solid transparent; background-color: transparent; - padding: 0px 6px; - margin: 0px 6px; + color: #000000; + padding: 0 5px; + margin: 0 6px; min-width: 12px !important; -moz-box-direction: reverse; } +.sorter .button-box { + padding-top: 0; + padding-bottom: 0; +} + +.sorter:hover { + border: 1px outset #666699; +} + .sorter[checkState="1"], .sorter[checkState="2"] { background-color: #666699; + color: #FFFFFF; + border: 1px inset #666699; } .sorter[checkState="1"] { @@ -288,21 +383,44 @@ } -/*** empty list notification ***/ +/*** discover view ***/ -.empty-list-notice { - -moz-box-align: center; +.discover-spacer-before, +.discover-spacer-after { + -moz-box-flex: 1; } -.empty-list-notice > button { - margin: 20px; +#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 { - margin: 0px; + margin: 0; border: none; background-color: transparent; } @@ -310,10 +428,7 @@ .addon { border-bottom: 1px solid #9999CC; padding: 5px; -} - -.addon[status="installing"] { - -moz-box-align: center; + background-origin: border-box; } .details { @@ -325,7 +440,9 @@ .icon-container { width: 48px; height: 48px; - margin: 7px; + margin: 3px 7px; + -moz-box-align: center; + -moz-box-pack: center; } .icon { @@ -334,6 +451,10 @@ 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"); } @@ -348,60 +469,97 @@ .name-container { font-size: 150%; - margin-bottom: 0px; + font-weight: bold; + color: #404040; + margin-bottom: 0; + -moz-box-align: end; +} + +.creator { + font-weight: bold; +} + +.creator .text-link { + /* color: #0066CC; */ } .description-container { margin-top: 8px; -moz-margin-start: 6px; + -moz-box-align: center; } .description { margin: 0; } -.warning, .pending, .error, .info { +.warning, +.pending, +.error, +.info { -moz-margin-start: 48px; + font-weight: bold; + -moz-box-align: center; } -.addon-view:not([selected]) .warning { - color: #808000; +.content-container, +.basicinfo-container { + -moz-box-align: start; } -.addon-view:not([selected]) .error { - color: #FF0000; +.addon[status="installing"] > .content-container { + -moz-box-align: stretch; } -.addon-view:not([selected]) .pending { - color: #33FF33; +.update-info-container { + -moz-box-align: center; } -.addon-view[notification="warning"] { - background-color : #FFFFCC; +.advancedinfo-container, +.update-available { + -moz-box-align: end; } -.addon-view[notification="error"] { - background-color: #FFD0DD; +.install-status-container { + -moz-box-pack: end; + -moz-box-align: end; } -.addon-view[notification="info"] { - background-color: #9999CC; +.name-outer-container { + -moz-box-pack: center; } -.addon-view[pending="enable"], -.addon-view[pending="upgrade"], -.addon-view[pending="install"] { - background-color: #CCFFDD; +.relnotes-toggle-container, +.icon-outer-container { + -moz-box-pack: start; } -.addon-view[pending="disable"], -.addon-view[pending="uninstall"] { - background-color: #808080; +.status-container, +.control-container { + -moz-box-pack: end; +} + +.addon-view .warning { + color: #808000; +} + +.addon-view .error { + color: #FF0000; +} + +.addon-view .pending { + color: #33FF33; +} + +.addon-view[pending="disable"] .pending, +.addon-view[pending="uninstall"] .pending { + color: #000000; } .addon .relnotes-container { -moz-box-align: start; - height: 0px; + -moz-margin-start: 6px; + height: 0; overflow: hidden; opacity: 0; -moz-transition-property: height, opacity; @@ -416,7 +574,7 @@ .addon .relnotes-header { font-weight: bold; - margin: 10px 0px; + margin: 10px 0; } .addon .relnotes-toggle { @@ -436,6 +594,62 @@ list-style-image: url("chrome://global/skin/arrow/arrow-up.gif"); } +.addon[active="false"] { + /* background-color: rgba(135, 135, 135, 0.1); */ +} + +.addon-view[active="false"], +.addon-view[active="false"] .name-container { + color: #666699; +} + +.addon-view[notification="warning"] { + background-color: #FFFFCC; +} + +.addon-view[notification="error"] { + background-color: #FFD0DD; +} + +.addon-view[notification="info"] { + background-color: #9999CC; +} + +.addon-view[pending="enable"], +.addon-view[pending="upgrade"], +.addon-view[pending="install"] { + background-color: #CCFFDD; +} + +.addon-view[pending="enable"] .pending, +.addon-view[pending="upgrade"] .pending, +.addon-view[pending="install"] .pending { + color: #008000; +} + +.addon-view[pending="disable"], +.addon-view[pending="uninstall"] { + background-color: #808080; +} + +.addon[selected] { + background-color: #336699; + color: #FFFFFF; +} + +.addon[selected] .name-container { + color: #FFFFFF; +} + +.addon[active="false"][selected] { + color: #000000; +} + +.addon[active="false"][selected] .name-container { + color: #222233; +} + + /*** item - uninstalled ***/ .addon[status="uninstalled"] { @@ -462,6 +676,8 @@ -moz-box-align: center; background-color: #FFFFFF; font-size: 120%; + border-bottom: 1px solid #666699; + overflow-x: hidden; } #search-filter-label { @@ -471,8 +687,8 @@ .search-filter-radio { -moz-appearance: none; - padding: 0px 6px; - margin: 0px 3px; + padding: 0 6px; + margin: 0 3px; border-radius: 10000px; } @@ -496,49 +712,37 @@ /*** detail view ***/ -#detail-view[active="false"] .fade { - opacity: 0.5; -} - #detail-view .loading { opacity: 0; } -#detail-view:not([loading]) .loading { - visibility: collapse; -} - #detail-view[loading-extended] .loading { - -moz-box-align: center; - -moz-box-pack: center; opacity: 1; -moz-transition-property: opacity; -moz-transition-duration: 1s; } -#detail-view .loading > image { - list-style-image: url("chrome://global/skin/icons/loading.gif"); -} - .detail-view-container { - overflow: auto; - padding: 2em; + 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, -#detail-notifications .info { +#detail-notifications .error { -moz-margin-start: 0; } #detail-icon { -moz-margin-end: 10px; + margin-top: 6px; + max-width: 64px; + max-height: 64px; } #detail-summary { @@ -551,18 +755,25 @@ #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; + white-space: pre-wrap; /* This is necessary to fix layout issues with multi-line descriptions, see bug 592712*/ outline: solid transparent; + min-width: 8em; } -#detail-desc { - -moz-margin-start: 6px; - white-space: pre-wrap; +#detail-fulldesc { + margin-top: 1em; } #detail-contributions { @@ -570,23 +781,25 @@ border: 1px solid #666699; margin-bottom: 2em; padding: 1em; - background: #FFFFCC; + background-color: #FFFFCC; } #detail-contrib-description { font-style: italic; margin-bottom: 1em; + color: #000000; } #detail-contrib-suggested { - color: grey; + color: #808080; + font-weight: bold; } -#detail-contrib-button { +#detail-contrib-btn { list-style-image: url("chrome://mozapps/skin/extensions/heart.png"); } -#detail-contrib-button .button-icon { +#detail-contrib-btn .button-icon { -moz-margin-end: 3px; } @@ -594,9 +807,14 @@ margin-bottom: 2em; } +.detail-row[first-row="true"], +.detail-row-complex[first-row="true"] { + border-top: none; +} + .detail-row, .detail-row-complex { - border-bottom: 1px solid #808080; + border-top: 1px solid #808080; -moz-box-align: center; } @@ -604,12 +822,19 @@ -moz-margin-start: 0; } +#detail-controls { + margin-bottom: 1em; +} + +#detail-view[active="false"]:not([pending]):not([notification]) { + /* background-color: foo; */ +} /*** creator ***/ .creator > label { - -moz-margin-start: 0px; - -moz-margin-end: 0px; + -moz-margin-start: 0; + -moz-margin-end: 0; } .creator > .text-link { @@ -621,25 +846,18 @@ /*** rating ***/ .meta-rating { - -moz-margin-start: 0px; - -moz-margin-end: 0px; - vertical-align: text-top; + -moz-margin-start: 0; + -moz-margin-end: 0; + padding-top: 2px; } -.meta-rating[showrating="average"] > .star { +.meta-rating > .star { list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png"); - padding: 0px 1px; -} - -.meta-rating[showrating="user"] > .star { - list-style-image: url("chrome://mozapps/skin/extensions/rating-unrated.png"); - padding: 2px 3px; + padding: 0 1px; } -.meta-rating > .star[on="true"], -.meta-rating[showrating="user"] > .star[hover] { +.meta-rating > .star[on="true"] { list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png"); - padding: 0px 1px; } @@ -649,18 +867,32 @@ background-color: #CCD0DD; border: 1px solid #808080; width: 200px; - height: 24px; - margin: 0px 8px; + height: 21px; + margin: 0 8px; +} + +.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 { background-color: #336699; } +.download-progress .progress .progress-bar { + border-left-width: 0; + border-right-width: 0; + min-height: 21px; +} + .download-progress .progress { background-color: transparent; + padding: 0; + margin: 0; + border: none; } .download-progress .start-cap, .download-progress .end-cap { @@ -669,37 +901,34 @@ .download-progress .start-cap:-moz-locale-dir(ltr), .download-progress .end-cap:-moz-locale-dir(rtl) { - border-radius: 10000px 0 0 10000px; + 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 10000px 10000px 0; + border-radius: 0 3px 3px 0; } -.download-progress .progress { +.download-progress .cancel { -moz-appearance: none; - padding: 0px; - margin: 0px; + background-color: #CCD0DD; + border: 1px solid #666699; + padding: 3px; + min-width: 0; + margin: 3px; +} + +.download-progress .cancel .button-box { + padding: 0; border: none; } -.download-progress .pause, .download-progress .cancel { - -moz-appearance: none; - background-color: #CCD0DD; - border-width: 1px 0px 0px 1px; - padding-right: 1px; - border-style: solid; - -moz-border-top-colors: #FFFFFF; - -moz-border-left-colors: #FFFFFF; - min-width: 16px; - width: 16px; - height: 16px; - margin: 3px; +.download-progress .cancel .button-text { + display: none; } -.download-progress .pause { - list-style-image: url('chrome://mozapps/skin/extensions/pause.png'); +.download-progress .cancel .button-icon { + -moz-margin-start: 0; } .download-progress .cancel { @@ -710,6 +939,9 @@ -moz-box-align: center; } +.download-progress .status { +/* text-shadow: #FFF 0 0 2px; */ +} /*** install status ***/ @@ -724,7 +956,12 @@ -moz-box-align: center; } -#updates-installed, #updates-downloaded { +#updates-container .button-link { + font-weight: bold; +} + +#updates-installed, +#updates-downloaded { color: #00CC00; font-weight: bold; } @@ -743,7 +980,7 @@ background: transparent; border: none; text-decoration: underline; - color: #CCCCFF; + color: #0000FF; cursor: pointer; min-width: 0; margin: 0 6px;