The Tor Browser / annotate

browser/themes/osx/downloads/indicator.css@6474c204b198 (annotated)

browser/themes/osx/downloads/indicator.css

Wed, 31 Dec 2014 06:09:35 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:09:35 +0100
changeset 0
6474c204b198
permissions
-rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

michael@0 1 /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0 2 * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0 4
michael@0 5 /*** Status and progress indicator ***/
michael@0 6
michael@0 7 #downloads-indicator-anchor {
michael@0 8 min-width: 18px;
michael@0 9 min-height: 18px;
michael@0 10 }
michael@0 11
michael@0 12 #downloads-animation-container {
michael@0 13 min-height: 1px;
michael@0 14 min-width: 1px;
michael@0 15 height: 1px;
michael@0 16 margin-bottom: -1px;
michael@0 17 /* Makes the outermost animation container element positioned, so that its
michael@0 18 contents are rendered over the main browser window in the Z order.
michael@0 19 This is required by the animated event notification. */
michael@0 20 position: relative;
michael@0 21 /* The selected tab may overlap #downloads-indicator-notification */
michael@0 22 z-index: 5;
michael@0 23 }
michael@0 24
michael@0 25 /*** Main indicator icon ***/
michael@0 26
michael@0 27 #downloads-indicator-icon {
michael@0 28 background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
michael@0 29 0, 198, 18, 180) center no-repeat;
michael@0 30 }
michael@0 31
michael@0 32 toolbar[brighttext] #downloads-indicator-icon {
michael@0 33 background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180);
michael@0 34 }
michael@0 35
michael@0 36 #downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
michael@0 37 background-image: url("chrome://browser/skin/downloads/download-glow.png");
michael@0 38 }
michael@0 39
michael@0 40 #downloads-button[cui-areatype="menu-panel"][attention] {
michael@0 41 list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
michael@0 42 -moz-image-region: auto;
michael@0 43 }
michael@0 44
michael@0 45 /* In the next few rules, we use :not([counter]) as a shortcut that is
michael@0 46 equivalent to -moz-any([progress], [paused]). */
michael@0 47
michael@0 48 #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
michael@0 49 background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
michael@0 50 0, 198, 18, 180) center no-repeat;
michael@0 51 background-size: 12px;
michael@0 52 }
michael@0 53
michael@0 54 toolbar[brighttext] #downloads-button:not([counter]):not([attention]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
michael@0 55 background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180);
michael@0 56 }
michael@0 57
michael@0 58 #downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
michael@0 59 background-image: url("chrome://browser/skin/downloads/download-glow.png");
michael@0 60 }
michael@0 61
michael@0 62 @media (min-resolution: 2dppx) {
michael@0 63 #downloads-indicator-icon {
michael@0 64 background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360);
michael@0 65 background-size: 18px;
michael@0 66 }
michael@0 67
michael@0 68 toolbar[brighttext] #downloads-indicator-icon {
michael@0 69 background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 0, 396, 36, 360);
michael@0 70 }
michael@0 71
michael@0 72 #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
michael@0 73 background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360);
michael@0 74 }
michael@0 75
michael@0 76 toolbar[brighttext] #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
michael@0 77 background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"),
michael@0 78 0, 396, 36, 360);
michael@0 79 }
michael@0 80
michael@0 81 #downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
michael@0 82 background-image: url("chrome://browser/skin/downloads/download-glow@2x.png");
michael@0 83 }
michael@0 84
michael@0 85 #downloads-button[cui-areatype="menu-panel"][attention] {
michael@0 86 list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel@2x.png");
michael@0 87 }
michael@0 88
michael@0 89 #downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
michael@0 90 background-image: url("chrome://browser/skin/downloads/download-glow@2x.png");
michael@0 91 }
michael@0 92 }
michael@0 93
michael@0 94 /*** Download notifications ***/
michael@0 95
michael@0 96 #downloads-indicator-notification {
michael@0 97 opacity: 0;
michael@0 98 background-size: 16px;
michael@0 99 background-position: center;
michael@0 100 background-repeat: no-repeat;
michael@0 101 width: 16px;
michael@0 102 height: 16px;
michael@0 103 }
michael@0 104
michael@0 105 @keyframes downloadsIndicatorNotificationStartRight {
michael@0 106 from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
michael@0 107 20% { opacity: .85; animation-timing-function: ease-out; }
michael@0 108 to { opacity: 0; transform: translate(0) scale(1); }
michael@0 109 }
michael@0 110
michael@0 111 @keyframes downloadsIndicatorNotificationStartLeft {
michael@0 112 from { opacity: 0; transform: translate(128px, 128px) scale(8); }
michael@0 113 20% { opacity: .85; animation-timing-function: ease-out; }
michael@0 114 to { opacity: 0; transform: translate(0) scale(1); }
michael@0 115 }
michael@0 116
michael@0 117 #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
michael@0 118 background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
michael@0 119 animation-name: downloadsIndicatorNotificationStartRight;
michael@0 120 animation-duration: 1s;
michael@0 121 }
michael@0 122
michael@0 123 @media (min-resolution: 2dppx) {
michael@0 124 #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
michael@0 125 background-image: url("chrome://browser/skin/downloads/download-notification-start@2x.png");
michael@0 126 }
michael@0 127 }
michael@0 128
michael@0 129 #downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
michael@0 130 animation-name: downloadsIndicatorNotificationStartLeft;
michael@0 131 }
michael@0 132
michael@0 133 @keyframes downloadsIndicatorNotificationFinish {
michael@0 134 from { opacity: 0; transform: scale(1); }
michael@0 135 20% { opacity: .65; animation-timing-function: ease-in; }
michael@0 136 to { opacity: 0; transform: scale(8); }
michael@0 137 }
michael@0 138
michael@0 139 #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
michael@0 140 background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
michael@0 141 animation-name: downloadsIndicatorNotificationFinish;
michael@0 142 animation-duration: 1s;
michael@0 143 }
michael@0 144
michael@0 145 @media (min-resolution: 2dppx) {
michael@0 146 #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
michael@0 147 background-image: url("chrome://browser/skin/downloads/download-notification-finish@2x.png");
michael@0 148 }
michael@0 149 }
michael@0 150
michael@0 151 /*** Progress bar and text ***/
michael@0 152
michael@0 153 #downloads-indicator-counter {
michael@0 154 height: 9px;
michael@0 155 margin: -3px 0 0;
michael@0 156 color: hsl(0,0%,30%);
michael@0 157 text-shadow: 0 1px 0 hsla(0,0%,100%,.5);
michael@0 158 font-size: 9px;
michael@0 159 line-height: 9px;
michael@0 160 text-align: center;
michael@0 161 }
michael@0 162
michael@0 163 #downloads-indicator-progress {
michael@0 164 width: 16px;
michael@0 165 height: 5px;
michael@0 166 min-width: 0;
michael@0 167 min-height: 0;
michael@0 168 margin-top: 1px;
michael@0 169 margin-bottom: 2px;
michael@0 170 border-radius: 2px;
michael@0 171 box-shadow: 0 1px 0 hsla(0,0%,100%,.4);
michael@0 172 }
michael@0 173
michael@0 174 #downloads-indicator-progress > .progress-bar {
michael@0 175 -moz-appearance: none;
michael@0 176 min-width: 0;
michael@0 177 min-height: 0;
michael@0 178 /* The background-clip: border-box; and background-image: none; are there to expand the background-color behind the border */
michael@0 179 background-clip: padding-box, border-box;
michael@0 180 background-color: rgb(90, 185, 255);
michael@0 181 background-image: linear-gradient(transparent 1px, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0.4) 2px, transparent 2px), none;
michael@0 182 border: 1px solid;
michael@0 183 border-color: rgba(0,43,86,.6) rgba(0,43,86,.4) rgba(0,43,86,.4);
michael@0 184 border-radius: 2px 0 0 2px;
michael@0 185 }
michael@0 186
michael@0 187 #downloads-indicator-progress > .progress-remainder {
michael@0 188 -moz-appearance: none;
michael@0 189 min-width: 0;
michael@0 190 min-height: 0;
michael@0 191 background-image: linear-gradient(#505050, #575757);
michael@0 192 border: 1px solid;
michael@0 193 border-color: hsla(0,0%,0%,.6) hsla(0,0%,0%,.4) hsla(0,0%,0%,.4);
michael@0 194 -moz-border-start: none;
michael@0 195 border-radius: 0 2px 2px 0;
michael@0 196 }
michael@0 197
michael@0 198 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
michael@0 199 background-color: rgb(220, 230, 81);
michael@0 200 }
michael@0 201
michael@0 202 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
michael@0 203 background-image: linear-gradient(#4b5000, #515700);
michael@0 204 }

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial