extension.css (14704B)
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 /* stylelint-disable property-no-vendor-prefix */ 6 7 /** 8 * This CSS file is loaded as an author sheet in some moz-extension:-documents. 9 * To make sure that extensions can easily override any CSS property declared 10 * here, we wrap all CSS rules in @layer (which results in lower precedence 11 * than any style without @layer). Unfortunately, the layer here has a higher 12 * precedence than any other layer. Not a problem in practice due to the minimal 13 * use of @layer: https://bugzilla.mozilla.org/show_bug.cgi?id=1873024#c4 14 * If desired, extension devs can easily opt out of this stylesheet with 15 * browser_style: false or by switching to MV3. 16 */ 17 @layer { 18 /* Global */ 19 html, 20 body { 21 background: transparent; 22 box-sizing: border-box; 23 color: light-dark(#222426, CanvasText); 24 cursor: default; 25 display: flex; 26 flex-direction: column; 27 font: caption; 28 margin: 0; 29 padding: 0; 30 user-select: none; 31 } 32 33 body * { 34 box-sizing: border-box; 35 text-align: start; 36 } 37 38 .browser-style { 39 appearance: none; 40 margin-bottom: 6px; 41 text-align: left; 42 } 43 44 /* Buttons */ 45 button.browser-style, 46 select.browser-style { 47 background-color: #fbfbfb; 48 border: 1px solid #b1b1b1; 49 box-shadow: 0 0 0 0 transparent; 50 font: caption; 51 height: 24px; 52 outline: 0 !important; 53 padding: 0 8px 0; 54 transition-duration: 250ms; 55 transition-property: box-shadow, border; 56 } 57 58 select.browser-style { 59 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCwxMkwzLDcsNCw2bDQsNCw0LTQsMSwxWiIgZmlsbD0iIzZBNkE2QSIgLz4KPC9zdmc+Cg==); 60 background-position: calc(100% - 4px) center; 61 background-repeat: no-repeat; 62 padding-inline-end: 24px; 63 text-overflow: ellipsis; 64 } 65 66 label.browser-style-label { 67 font: caption; 68 } 69 70 /* Dropdowns */ 71 select.browser-style { 72 background-color: #fbfbfb; 73 border: 1px solid #b1b1b1; 74 box-shadow: 0 0 0 0 transparent; 75 font: caption; 76 height: 24px; 77 outline: 0 !important; 78 padding: 0 8px 0; 79 transition-duration: 250ms; 80 transition-property: box-shadow, border; 81 } 82 83 select.browser-style { 84 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCwxMkwzLDcsNCw2bDQsNCw0LTQsMSwxWiIgZmlsbD0iIzZBNkE2QSIgLz4KPC9zdmc+Cg==); 85 background-position: calc(100% - 4px) center; 86 background-repeat: no-repeat; 87 padding-inline-end: 24px; 88 text-overflow: ellipsis; 89 } 90 91 select.browser-style:-moz-focusring { 92 color: transparent; 93 text-shadow: 0 0 0 #000; 94 } 95 96 select.browser-style:-moz-focusring * { 97 color: #000; 98 text-shadow: none; 99 } 100 101 button.browser-style.hover, 102 select.browser-style.hover { 103 background-color: #ebebeb; 104 border: 1px solid #b1b1b1; 105 } 106 107 button.browser-style.pressed, 108 select.browser-style.pressed { 109 background-color: #d4d4d4; 110 border: 1px solid #858585; 111 } 112 113 button.browser-style:disabled, 114 select.browser-style:disabled { 115 color: #999; 116 opacity: 0.5; 117 } 118 119 button.browser-style.focused, 120 select.browser-style.focused { 121 border-color: #fff; 122 box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75); 123 } 124 125 button.browser-style.default { 126 background-color: #0996f8; 127 border-color: #0670cc; 128 color: #fff; 129 } 130 131 button.browser-style.default.hover { 132 background-color: #0670cc; 133 border-color: #005bab; 134 } 135 136 button.browser-style.default.pressed { 137 background-color: #005bab; 138 border-color: #004480; 139 } 140 141 button.browser-style.default.focused { 142 border-color: #fff; 143 } 144 145 .browser-style > label { 146 user-select: none; 147 } 148 149 .browser-style.disabled > label { 150 color: #999; 151 opacity: 0.5; 152 } 153 154 /* Radio Buttons */ 155 .browser-style > input[type="radio"] { 156 appearance: none; 157 background-color: #fff; 158 background-position: center; 159 border: 1px solid #b1b1b1; 160 border-radius: 50%; 161 content: ""; 162 display: inline-block; 163 height: 16px; 164 margin-right: 6px; 165 vertical-align: text-top; 166 width: 16px; 167 } 168 169 .browser-style > input[type="radio"]:hover, 170 .browser-style.hover > input[type="radio"]:not(:active) { 171 background-color: #fbfbfb; 172 border-color: #b1b1b1; 173 } 174 175 .browser-style > input[type="radio"]:hover:active, 176 .browser-style.pressed > input[type="radio"]:not(:active) { 177 background-color: #ebebeb; 178 border-color: #858585; 179 } 180 181 .browser-style > input[type="radio"]:checked { 182 background-color: #0996f8; 183 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iNCIgZmlsbD0iI2ZmZiIgLz4KPC9zdmc+Cg==); 184 border-color: #0670cc; 185 } 186 187 .browser-style > input[type="radio"]:checked:hover, 188 .browser-style.hover > input[type="radio"]:checked:not(:active) { 189 background-color: #0670cc; 190 border-color: #005bab; 191 } 192 193 .browser-style > input[type="radio"]:checked:hover:active, 194 .browser-style.pressed > input[type="radio"]:checked:not(:active) { 195 background-color: #005bab; 196 border-color: #004480; 197 } 198 199 .browser-style.focused > input[type="radio"] { 200 border-color: #0996f8; 201 box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75); 202 } 203 204 .browser-style.focused > input[type="radio"]:checked { 205 border-color: #fff; 206 } 207 208 /* Checkboxes */ 209 .browser-style > input[type="checkbox"] { 210 appearance: none; 211 background-color: #fff; 212 background-position: center; 213 border: 1px solid #b1b1b1; 214 content: ""; 215 display: inline-block; 216 height: 16px; 217 margin-right: 6px; 218 vertical-align: text-top; 219 width: 16px; 220 } 221 222 .browser-style > input[type="checkbox"]:hover, 223 .browser-style.hover > input[type="checkbox"]:not(:active) { 224 background-color: #fbfbfb; 225 border-color: #b1b1b1; 226 } 227 228 .browser-style > input[type="checkbox"]:hover:active, 229 .browser-style.pressed > input[type="checkbox"]:not(:active) { 230 background-color: #ebebeb; 231 border-color: #858585; 232 } 233 234 .browser-style > input[type="checkbox"]:checked { 235 background-color: #0996f8; 236 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNNy43LDEyLjkgQzcuNCwxMy4zIDYuOCwxMy40IDYuNCwxMyBMMy4yLDkuOCBDMi44LDkuNCAyLjgsOC42IDMuMiw4LjIgQzMuNiw3LjggNC40LDcuOCA0LjgsOC4yIEw2LjksMTAuMyBMMTEuMSw0LjQgQzExLjUsMy45IDEyLjIsMy44IDEyLjcsNC4xIEMxMy4yLDQuNSAxMy4zLDUuMiAxMyw1LjcgTDcuNywxMi45IEw3LjcsMTIuOSBaIiBmaWxsPSIjZmZmIiAvPgo8L3N2Zz4K); 237 border-color: #0670cc; 238 } 239 240 .browser-style > input[type="checkbox"]:checked:hover, 241 .browser-style.hover > input[type="checkbox"]:checked:not(:active) { 242 background-color: #0670cc; 243 border-color: #005bab; 244 } 245 246 .browser-style > input[type="checkbox"]:checked:hover:active, 247 .browser-style.pressed > input[type="checkbox"]:checked:not(:active) { 248 background-color: #005bab; 249 border-color: #004480; 250 } 251 252 .browser-style.focused > input[type="checkbox"] { 253 border-color: #0996f8; 254 box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75); 255 } 256 257 .browser-style.focused > input[type="checkbox"]:checked { 258 border-color: #fff; 259 } 260 261 /* Expander Button */ 262 button.browser-style.expander { 263 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCwxMkwzLDcsNCw2bDQsNCw0LTQsMSwxWiIgZmlsbD0iIzZBNkE2QSIgLz4KPC9zdmc+Cg==); 264 background-position: center; 265 background-repeat: no-repeat; 266 height: 24px; 267 padding: 0; 268 width: 24px; 269 } 270 271 /* Interactive States */ 272 button.browser-style:enabled:hover:not(.pressed, .focused), 273 select.browser-style:enabled:hover:not(.pressed, .focused) { 274 background-color: #ebebeb; 275 border: 1px solid #b1b1b1; 276 } 277 278 button.browser-style:enabled:hover:active:not(.hover, .focused), 279 select.browser-style:enabled:hover:active:not(.hover, .focused) { 280 background-color: #d4d4d4; 281 border: 1px solid #858585; 282 } 283 284 button.browser-style.default:enabled:hover:not(.pressed, .focused) { 285 background-color: #0670cc; 286 border-color: #005bab; 287 } 288 289 button.browser-style.default:enabled:hover:active:not(.hover, .focused) { 290 background-color: #005bab; 291 border-color: #004480; 292 } 293 294 button.browser-style:focus:enabled { 295 border-color: #fff !important; 296 box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75); 297 } 298 299 /* Fields */ 300 .browser-style > input[type="text"], 301 textarea.browser-style { 302 background-color: #fff; 303 border: 1px solid #b1b1b1; 304 box-shadow: 0 0 0 0 rgba(97, 181, 255, 0); 305 font: caption; 306 padding: 0 6px 0; 307 transition-duration: 250ms; 308 transition-property: box-shadow; 309 } 310 311 .browser-style > input[type="text"] { 312 height: 24px; 313 } 314 315 .browser-style > input[type="text"].hover, 316 textarea.browser-style.hover { 317 border: 1px solid #858585; 318 } 319 320 .browser-style > input[type="text"]:disabled, 321 textarea.browser-style:disabled { 322 color: #999; 323 opacity: 0.5; 324 } 325 326 .browser-style > input[type="text"].focused, 327 textarea.browser-style.focused { 328 border-color: #0996f8; 329 box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75); 330 } 331 332 /* Interactive States */ 333 .browser-style > input[type="text"]:enabled:hover, 334 textarea.browser-style:enabled:hover { 335 border: 1px solid #858585; 336 } 337 338 .browser-style > input[type="text"]:focus, 339 .browser-style > input[type="text"]:focus:hover, 340 textarea.browser-style:focus, 341 textarea.browser-style:focus:hover { 342 border-color: #0996f8; 343 box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75); 344 } 345 346 .browser-style > input[type="text"]:invalid:not(:focus), 347 textarea.browser-style:invalid:not(:focus) { 348 border-color: var(--red-60); 349 box-shadow: 350 0 0 0 1px var(--red-60), 351 0 0 0 4px rgba(251, 0, 34, 0.3); 352 } 353 354 .panel-section { 355 display: flex; 356 flex-direction: row; 357 } 358 359 .panel-section-separator { 360 background-color: rgba(0, 0, 0, 0.15); 361 min-height: 1px; 362 } 363 364 /* Panel Section - Header */ 365 .panel-section-header { 366 border-bottom: 1px solid rgba(0, 0, 0, 0.15); 367 padding: 16px; 368 } 369 370 .panel-section-header > .icon-section-header { 371 background-position: center center; 372 background-repeat: no-repeat; 373 height: 32px; 374 margin-right: 16px; 375 position: relative; 376 width: 32px; 377 } 378 379 .panel-section-header > .text-section-header { 380 align-self: center; 381 font-size: 1.385em; 382 font-weight: lighter; 383 } 384 385 /* Panel Section - List */ 386 .panel-section-list { 387 flex-direction: column; 388 padding: 4px 0; 389 } 390 391 .panel-list-item { 392 align-items: center; 393 display: flex; 394 flex-direction: row; 395 height: 24px; 396 padding: 0 16px; 397 } 398 399 .panel-list-item:not(.disabled):hover { 400 background-color: rgba(0, 0, 0, 0.06); 401 border-block: 1px solid rgba(0, 0, 0, 0.1); 402 } 403 404 .panel-list-item:not(.disabled):hover:active { 405 background-color: rgba(0, 0, 0, 0.1); 406 } 407 408 .panel-list-item.disabled { 409 color: #999; 410 } 411 412 .panel-list-item > .icon { 413 flex-grow: 0; 414 flex-shrink: 0; 415 } 416 417 .panel-list-item > .text { 418 flex-grow: 10; 419 } 420 421 .panel-list-item > .text-shortcut { 422 color: #808080; 423 font-family: "Lucida Grande", caption; 424 font-size: 0.847em; 425 justify-content: flex-end; 426 } 427 428 .panel-section-list .panel-section-separator { 429 margin: 4px 0; 430 } 431 432 /* Panel Section - Form Elements */ 433 .panel-section-formElements { 434 display: flex; 435 flex-direction: column; 436 padding: 16px; 437 } 438 439 .panel-formElements-item { 440 align-items: center; 441 display: flex; 442 flex-direction: row; 443 margin-bottom: 12px; 444 } 445 446 .panel-formElements-item:last-child { 447 margin-bottom: 0; 448 } 449 450 .panel-formElements-item label { 451 flex-shrink: 0; 452 margin-right: 6px; 453 text-align: right; 454 } 455 456 .panel-formElements-item input[type="text"], 457 .panel-formElements-item select.browser-style { 458 flex-grow: 1; 459 } 460 461 /* Panel Section - Footer */ 462 .panel-section-footer { 463 background-color: rgba(0, 0, 0, 0.06); 464 border-top: 1px solid rgba(0, 0, 0, 0.15); 465 color: #1a1a1a; 466 display: flex; 467 flex-direction: row; 468 height: 41px; 469 margin-top: -1px; 470 padding: 0; 471 } 472 473 .panel-section-footer-button { 474 flex: 1 1 auto; 475 height: 100%; 476 margin: 0 -1px; 477 padding: 12px; 478 text-align: center; 479 } 480 481 .panel-section-footer-button > .text-shortcut { 482 color: #808080; 483 font-family: "Lucida Grande", caption; 484 font-size: 0.847em; 485 } 486 487 .panel-section-footer-button:hover { 488 background-color: rgba(0, 0, 0, 0.06); 489 } 490 491 .panel-section-footer-button:hover:active { 492 background-color: rgba(0, 0, 0, 0.1); 493 } 494 495 .panel-section-footer-button.default { 496 background-color: #0996f8; 497 box-shadow: 0 1px 0 #0670cc inset; 498 color: #fff; 499 } 500 501 .panel-section-footer-button.default:hover { 502 background-color: #0670cc; 503 box-shadow: 0 1px 0 #005bab inset; 504 } 505 506 .panel-section-footer-button.default:hover:active { 507 background-color: #005bab; 508 box-shadow: 0 1px 0 #004480 inset; 509 } 510 511 .panel-section-footer-separator { 512 background-color: rgba(0, 0, 0, 0.1); 513 width: 1px; 514 z-index: 99; 515 } 516 517 /* Panel Section - Tabs */ 518 .panel-section-tabs { 519 color: #1a1a1a; 520 display: flex; 521 flex-direction: row; 522 height: 41px; 523 margin-bottom: -1px; 524 padding: 0; 525 } 526 527 .panel-section-tabs-button { 528 flex: 1 1 auto; 529 height: 100%; 530 margin: 0 -1px; 531 padding: 12px; 532 text-align: center; 533 } 534 535 .panel-section-tabs-button:hover { 536 background-color: rgba(0, 0, 0, 0.06); 537 } 538 539 .panel-section-tabs-button:hover:active { 540 background-color: rgba(0, 0, 0, 0.1); 541 } 542 543 .panel-section-tabs-button.selected { 544 box-shadow: 545 0 -1px 0 #0670cc inset, 546 0 -4px 0 #0996f8 inset; 547 color: #0996f8; 548 } 549 550 .panel-section-tabs-button.selected:hover { 551 color: #0670cc; 552 } 553 554 .panel-section-tabs-separator { 555 background-color: rgba(0, 0, 0, 0.1); 556 width: 1px; 557 z-index: 99; 558 } 559 560 @media (-moz-platform: macos) { 561 button.browser-style, 562 select.browser-style, 563 .browser-style > input[type="checkbox"] { 564 border-radius: 4px; 565 } 566 567 .panel-section-footer { 568 border-bottom-left-radius: 4px; 569 border-bottom-right-radius: 4px; 570 overflow: hidden; 571 } 572 } 573 } /* end of @layer */