perf.css (5027B)
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 file, 3 * You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 .perf { 6 display: flex; 7 flex-direction: column; 8 align-items: center; 9 } 10 11 .perf-devtools { 12 box-sizing: border-box; 13 width: 100%; 14 position: absolute; 15 margin-top: 10vh; 16 padding-inline: 5vh; 17 } 18 19 .perf-button-image { 20 vertical-align: middle; 21 padding-inline-start: 8px; 22 width: 13px; 23 -moz-context-properties: fill; 24 fill: #fff; 25 } 26 27 .perf-button-container { 28 display: flex; 29 flex-flow: column; 30 align-items: center; 31 } 32 33 .perf-additional-message { 34 font-size: 13px; 35 font-weight: bold; 36 font-style: italic; 37 } 38 39 .perf > * { 40 max-width: 440px; 41 } 42 43 .perf-description { 44 font-size: 13px; 45 line-height: 1.4; 46 } 47 48 .perf-external-link { 49 margin: 0; 50 padding: 0; 51 background: none; 52 border: none; 53 color: var(--theme-link-color); 54 text-decoration: underline; 55 white-space: nowrap; 56 cursor: pointer; 57 font-size: inherit; 58 } 59 60 /* See https://design.firefox.com/photon/components/buttons.html for the spec */ 61 .perf-photon-button { 62 padding: 0 8px; 63 border: none; 64 margin: 0; 65 66 /* reset default styles */ 67 background: none; 68 69 /* photon styles */ 70 background-color: var(--toolbarbutton-background); 71 border-radius: 2px; 72 color: var(--theme-body-color); 73 font: inherit; 74 } 75 76 .perf-photon-button:hover:active:not([disabled]) { 77 background-color: var(--grey-90-a30); 78 } 79 80 .perf-photon-button-primary, 81 .perf-photon-button-default { 82 min-width: 132px; 83 height: 32px; 84 padding: 0 8px; 85 font-size: 13px; 86 } 87 88 .perf-photon-button-primary { 89 background-color: var(--blue-60); 90 color: #fff; 91 } 92 93 .perf-photon-button-primary:focus-visible { 94 /* Avoid the outline to conflict with the blue background */ 95 outline-offset: 2px; 96 } 97 98 .perf-photon-button-primary:hover:not([disabled]) { 99 background-color: var(--blue-70); 100 } 101 102 .perf-photon-button-primary:hover:active:not([disabled]) { 103 background-color: var(--blue-80); 104 } 105 106 .perf-photon-button[disabled] { 107 opacity: 0.6; 108 } 109 110 .perf-photon-button.perf-button { 111 margin: 10px; 112 } 113 114 .perf-photon-button-ghost { 115 width: 32px; 116 height: 32px; 117 background-color: transparent; 118 } 119 120 .perf-photon-button-ghost:hover:enabled { 121 background-color: var(--theme-toolbarbutton-hover-background); 122 } 123 124 .perf-photon-button-ghost:hover:active:enabled { 125 background-color: var(--theme-toolbarbutton-active-background); 126 } 127 128 .perf-photon-button-micro { 129 height: 24px; 130 } 131 132 .perf-presets-hr { 133 width: 100%; 134 border: 1px solid var(--theme-splitter-color); 135 border-left: 0; 136 border-right: 0; 137 border-bottom: 0; 138 } 139 140 .perf-presets { 141 display: flex; 142 flex-direction: column; 143 row-gap: 10px; 144 width: 100%; 145 margin-block: 12px; 146 } 147 148 .perf-presets-settings { 149 margin-inline-end: 17px; 150 margin-block: 3px; 151 font-size: 13px; 152 font-weight: bold; 153 } 154 155 .perf-presets-description { 156 margin-block: 13px; 157 } 158 159 .perf-presets-select { 160 /* Layout */ 161 position: relative; 162 min-width: 186px; 163 padding-block: 3px; 164 padding-inline: 5px; 165 166 /* Presentational: */ 167 appearance: none; 168 color: var(--theme-select-color); 169 background-color: var(--theme-select-background); 170 background-image: url("chrome://devtools/skin/images/arrow-dropdown-12.svg"); 171 background-position: right 4px center; 172 background-repeat: no-repeat; 173 174 /* adapt the SVG color using the text color */ 175 -moz-context-properties: fill; 176 fill: currentColor; 177 178 border-radius: 2px; 179 border: 1px solid transparent; 180 font-size: 12px; 181 font-weight: 400; 182 text-decoration: none; 183 } 184 185 .perf-presets-select:hover { 186 border: 1px solid var(--theme-select-hover-border-color); 187 } 188 189 .perf-presets-custom { 190 padding-inline: 10px; 191 margin-block: 13px; 192 line-height: 1.3; 193 } 194 195 .perf-presets-custom-bold { 196 font-weight: bold; 197 } 198 199 /* OnboardingMessage component styles */ 200 201 /* 202 * The grid layout of the onboarding message is: 203 * 204 * +-----------------------------+---+ 205 * | onboarding message | X | 206 * +-----------------------------+---+ 207 */ 208 .perf-onboarding { 209 background-color: var(--theme-body-alternate-emphasized-background); 210 border-bottom: 1px solid var(--theme-splitter-color); 211 display: grid; 212 font-size: 13px; 213 grid-template-columns: auto 36px; 214 /* Override the max-width set on ".perf > *" */ 215 max-width: unset; 216 width: 100%; 217 } 218 219 .perf-onboarding + .perf-devtools { 220 margin-top: 15px; 221 } 222 223 .perf-onboarding-message { 224 background-image: url(chrome://devtools/skin/images/fox-smiling.svg); 225 background-position: 12px center; 226 background-repeat: no-repeat; 227 background-size: 22px; 228 justify-self: center; 229 margin: 12px 0; 230 padding-inline-start: 46px; 231 } 232 233 .perf-onboarding-message:dir(rtl) { 234 background-position-x: right 12px; 235 } 236 237 .perf-onboarding-message-row { 238 margin: 6px 0; 239 } 240 241 .perf-onboarding-close-button { 242 background-image: url("chrome://devtools/skin/images/close.svg"); 243 background-repeat: no-repeat; 244 background-position: center; 245 -moz-context-properties: fill; 246 fill: currentColor; 247 margin-top: 4px; 248 }