RegistrationList.css (1574B)
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 .aboutdebugging-plug { 6 padding-block: calc(var(--base-unit) * 3); 7 border-block-start: 1px solid var(--separator-color); 8 9 /* display flex to handle showing the icon with ::before */ 10 display: flex; 11 flex-direction: row; 12 column-gap: calc(var(--base-unit) * 2); 13 align-items: baseline; 14 font-size: var(--body-10-font-size); 15 font-weight: var(--body-10-font-weight); 16 } 17 18 .aboutdebugging-plug::before { 19 flex: 0 0 auto; 20 width: calc(var(--base-unit) * 4); 21 height: calc(var(--base-unit) * 4); 22 content: ""; 23 -moz-context-properties: fill; 24 fill: currentColor; 25 background-image: url(chrome://global/skin/icons/developer.svg); 26 /* the icon size is taller than the line-height of the text. Since the 27 text can occupy multiple lines, and we want to keep the icon aligned 28 with respect to the first line, instead of align-items: center in 29 .aboutdebugging-plug, we use baseline, and fine tune the position here. */ 30 position: relative; 31 top: 3px; 32 } 33 34 .registrations-container { 35 flex-grow: 1; 36 } 37 38 .registrations-container__list { 39 padding-inline-start: 0; 40 } 41 42 .registrations-container__item { 43 list-style-type: none; 44 margin: 0; 45 padding: calc(var(--base-unit) * 5) 0; 46 } 47 48 .registrations-container__item:first-child { 49 padding-top: 0; 50 } 51 52 .registrations-container__item:not(:last-child) { 53 border-bottom: 1px solid var(--separator-color); 54 }