DebuggerImage.css (5748B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */ 4 5 .dbg-img { 6 display: inline-block; 7 width: 16px; 8 height: 16px; 9 vertical-align: middle; 10 /* use background-color for the icon color, and mask-image for its shape */ 11 background-color: var(--theme-icon-color); 12 mask-size: contain; 13 mask-repeat: no-repeat; 14 mask-position: center; 15 /* multicolor icons use background-image */ 16 background-position: center; 17 background-repeat: no-repeat; 18 background-size: contain; 19 /* do not let images shrink when used as flex children */ 20 flex-shrink: 0; 21 } 22 23 /* Expand arrow icon */ 24 .dbg-img.dbg-img-arrow { 25 width: 10px; 26 height: 10px; 27 mask-image: url(chrome://devtools/content/debugger/images/arrow.svg); 28 /* we may override the width/height in specific contexts to make the 29 clickable area bigger, but we should always keep the mask size 10x10 */ 30 mask-size: 10px 10px; 31 background-color: var(--theme-icon-dimmed-color); 32 transform: rotate(-90deg); 33 transition: transform 180ms var(--animation-curve); 34 } 35 36 .dbg-img.dbg-img-arrow:dir(rtl) { 37 transform: rotate(90deg); 38 } 39 40 .dbg-img.dbg-img-arrow.expanded { 41 /* icon should always point to the bottom (default) when expanded, 42 regardless of the text direction */ 43 transform: none !important; 44 } 45 46 .dbg-img.dbg-img-arrow-down { 47 mask-image: url(chrome://devtools/content/debugger/images/arrow-down.svg); 48 } 49 50 .dbg-img.dbg-img-arrow-up { 51 mask-image: url(chrome://devtools/content/debugger/images/arrow-up.svg); 52 } 53 54 .dbg-img.dbg-img-blackBox { 55 mask-image: url(chrome://devtools/content/debugger/images/blackBox.svg); 56 } 57 58 .dbg-img.dbg-img-close { 59 mask-image: url(chrome://devtools/skin/images/close.svg); 60 } 61 62 .dbg-img.dbg-img-disable-pausing { 63 mask-image: url(chrome://devtools/content/debugger/images/disable-pausing.svg); 64 } 65 66 .dbg-img.dbg-img-enable-pausing { 67 mask-image: url(chrome://devtools/content/debugger/images/enable-pausing.svg); 68 background-color: var(--theme-icon-checked-color); 69 } 70 71 .dbg-img.dbg-img-globe { 72 mask-image: url(chrome://devtools/content/debugger/images/globe.svg); 73 } 74 75 .dbg-img.dbg-img-globe-small { 76 mask-image: url(chrome://devtools/content/debugger/images/globe-small.svg); 77 mask-size: 12px 12px; 78 } 79 80 .dbg-img.dbg-img-window { 81 mask-image: url(chrome://devtools/content/debugger/images/window.svg); 82 } 83 84 .dbg-img.dbg-img-file { 85 background-image: url(chrome://devtools/content/debugger/images/file-small.svg); 86 background-size: 12px 12px; 87 background-color: transparent !important; 88 -moz-context-properties: fill; 89 fill: var(--theme-icon-color); 90 } 91 92 .dbg-img.dbg-img-folder { 93 mask-image: url(chrome://devtools/content/debugger/images/folder.svg); 94 } 95 96 .dbg-img.dbg-img-back { 97 background-image: url(chrome://devtools/skin/images/webconsole/return.svg); 98 -moz-context-properties: fill; 99 fill: var(--theme-icon-color); 100 background-color: unset; 101 } 102 103 .dbg-img.dbg-img-info { 104 mask-image: url(chrome://devtools/skin/images/info.svg); 105 } 106 107 .dbg-img.dbg-img-loader { 108 background-image: url(chrome://devtools/content/debugger/images/loader.svg); 109 -moz-context-properties: fill; 110 fill: var(--theme-icon-color); 111 background-color: unset; 112 } 113 114 .dbg-img-loader.spin { 115 animation: spin 0.5s linear infinite; 116 } 117 118 .dbg-img.dbg-img-more-tabs { 119 mask-image: url(chrome://devtools/content/debugger/images/command-chevron.svg); 120 } 121 122 html[dir="rtl"] .dbg-img.dbg-img-more-tabs { 123 transform: scaleX(-1); 124 } 125 126 .dbg-img.dbg-img-sourcemap { 127 background-image: url(chrome://devtools/content/debugger/images/sourcemap.svg); 128 -moz-context-properties: fill; 129 fill: var(--theme-icon-warning-color); 130 background-color: unset; 131 } 132 133 .dbg-img.dbg-img-next { 134 mask-image: url(chrome://devtools/content/debugger/images/next.svg); 135 } 136 137 .dbg-img.dbg-img-next-circle { 138 mask-image: url(chrome://devtools/content/debugger/images/next-circle.svg); 139 } 140 141 .dbg-img.dbg-img-pane-collapse { 142 mask-image: url(chrome://devtools/content/debugger/images/pane-collapse.svg); 143 } 144 145 .dbg-img.dbg-img-pane-expand { 146 mask-image: url(chrome://devtools/content/debugger/images/pane-expand.svg); 147 } 148 149 .dbg-img.dbg-img-pause { 150 mask-image: url(chrome://devtools/content/debugger/images/pause.svg); 151 } 152 153 .dbg-img.dbg-img-plus { 154 mask-image: url(chrome://devtools/skin/images/add.svg); 155 } 156 157 .dbg-img.dbg-img-prettyPrint { 158 background-image: url(chrome://devtools/content/debugger/images/prettyPrint.svg); 159 background-size: 14px 14px; 160 background-color: transparent !important; 161 fill: var(--theme-icon-color); 162 -moz-context-properties: fill, stroke; 163 } 164 165 .dbg-img.dbg-img-removeAll { 166 mask-image: url(chrome://devtools/skin/images/clear.svg); 167 } 168 169 .dbg-img.dbg-img-refresh { 170 mask-image: url(chrome://devtools/skin/images/reload.svg); 171 } 172 173 .dbg-img.dbg-img-resume { 174 mask-image: url(resource://devtools-shared-images/resume.svg); 175 } 176 177 .dbg-img.dbg-img-search { 178 mask-image: url(chrome://devtools/content/debugger/images/search.svg); 179 } 180 181 .dbg-img.dbg-img-shortcuts { 182 mask-image: url(chrome://devtools/content/debugger/images/help.svg); 183 } 184 185 .dbg-img.dbg-img-stepIn { 186 mask-image: url(chrome://devtools/content/debugger/images/stepIn.svg); 187 } 188 189 .dbg-img.dbg-img-stepOut { 190 mask-image: url(chrome://devtools/content/debugger/images/stepOut.svg); 191 } 192 193 .dbg-img.dbg-img-stepOver { 194 mask-image: url(resource://devtools-shared-images/stepOver.svg); 195 } 196 197 .dbg-img.dbg-img-tab { 198 mask-image: url(chrome://devtools/content/debugger/images/tab.svg); 199 } 200 201 .dbg-img.dbg-img-worker { 202 mask-image: url(chrome://devtools/content/debugger/images/worker.svg); 203 } 204 205 .dbg-img.dbg-img-extension { 206 mask-image: url(chrome://devtools/content/debugger/images/sources/extension.svg); 207 }