aboutDialog.css (4485B)
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 @namespace html "http://www.w3.org/1999/xhtml"; 5 6 #aboutDialog { 7 /* Set an explicit line-height to avoid discrepancies in 'auto' spacing 8 across screens with different device DPI, which may cause font metrics 9 to round differently. */ 10 line-height: 1.5; 11 } 12 13 #aboutDialogContainer { 14 display: flex; 15 flex-direction: column; 16 height: 100%; 17 } 18 19 #leftBox { 20 background-image: image-set(url("chrome://branding/content/about-logo.png"), url("chrome://branding/content/about-logo@2x.png") 2x); 21 background-repeat: no-repeat; 22 background-size: 192px auto; 23 background-position: center 40px; 24 /* min-width and min-height create room for the logo; logo is 192px tall w/ 25 40px above it, this leaves 8px on the bottom at the minimum height */ 26 min-width: 210px; 27 min-height: 240px; 28 margin-top: 20px; 29 margin-inline-start: 30px; 30 } 31 32 #rightBox { 33 background-image: url("chrome://branding/content/about-wordmark.svg"); 34 background-repeat: no-repeat; 35 background-size: 288px auto; 36 /* move wordmark down a bit so it doesnt bump up too closely to top of dialog */ 37 margin-top: 20px; 38 /* We don't want this box to contribute arbitrarily to the intrinsic size of 39 * the dialog, so set the width to a reasonable size, but let it flex to take 40 * all available space. */ 41 max-width: 430px; 42 flex: 1 auto; 43 44 &:-moz-locale-dir(rtl) { 45 background-position: 100% 0; 46 } 47 } 48 49 #clientBox { 50 flex: 1 0 auto; 51 padding: 10px 0 15px; 52 } 53 54 #bottomBox { 55 padding: 15px 10px 0; 56 min-height: 52px; 57 } 58 59 #release { 60 font-weight: var(--font-weight-bold); 61 font-size: 125%; 62 margin-top: 10px; 63 margin-inline-start: 0; 64 } 65 66 #version { 67 font-weight: var(--font-weight-bold); 68 margin-inline-start: 0; 69 user-select: text; 70 -moz-user-focus: normal; 71 cursor: text; 72 73 &.update { 74 font-weight: normal; 75 } 76 } 77 78 #distribution, 79 #distributionId { 80 display: none; 81 margin-block: 0; 82 } 83 84 .text-blurb { 85 margin-bottom: 10px; 86 margin-inline-start: 0; 87 padding-inline-start: 0; 88 } 89 90 #updateInfo { 91 display: grid; 92 grid-row-start: 1; 93 grid-row-end: 4; 94 grid-column-start: 2; 95 grid-column-end: 3; 96 grid-template-rows: subgrid; 97 grid-template-columns: subgrid; 98 } 99 100 #updateDeck { 101 align-items: center; 102 103 description { 104 margin: 0; 105 } 106 } 107 108 #updateButton { 109 margin-inline-start: 0; 110 } 111 112 .text-link { 113 color: inherit !important; 114 text-decoration: underline; 115 116 description > & { 117 margin: 0; 118 padding: 0; 119 } 120 } 121 122 /* #releasenotes is moved to the same line as #aboutDialogHelpLink and 123 * #submit-feedback, so we also want #aboutDialogHelpLink to have a starting 124 * margin. */ 125 #releasenotes:not([hidden]) ~ #aboutDialogHelpLink, 126 #submit-feedback { 127 margin-inline-start: 0.9em; 128 } 129 130 .bottom-link { 131 text-align: center; 132 margin: 0 40px; 133 } 134 135 #currentChannel { 136 margin: 0; 137 padding: 0; 138 font-weight: var(--font-weight-bold); 139 } 140 141 #updateBox { 142 line-height: normal; 143 display: grid; 144 } 145 146 #updateIcon { 147 display: none; 148 align-self: center; 149 grid-row-start: 1; 150 grid-row-end: 2; 151 grid-column-start: 1; 152 grid-column-end: 2; 153 -moz-context-properties: fill; 154 fill: currentColor; 155 width: 16px; 156 height: 16px; 157 margin-inline: 5px; 158 159 &.noUpdatesFound { 160 display: block; 161 content: url("chrome://global/skin/icons/check.svg"); 162 fill: #30e60b; 163 } 164 165 &.apply { 166 display: block; 167 content: url("chrome://global/skin/icons/reload.svg"); 168 } 169 170 &:is(.checkingForUpdates, .downloading, .applying, .restarting) { 171 display: block; 172 content: url("chrome://global/skin/icons/loading.svg"); 173 } 174 } 175 176 /* Common Base Browser rules. */ 177 178 /* Hide Firefox elements. */ 179 #communityExperimentalDesc, 180 #communityDesc, 181 #contributeDesc, 182 .bottom-link:not(.visible-bottom-link) { 183 /* NOTE: Anything hidden here should also be removed from the aria-describedby 184 * of the dialog element. */ 185 display: none; 186 } 187 188 #aboutDialogContainer { 189 background-color: var(--about-dialog-background-color); 190 color: var(--about-dialog-text-color); 191 color-scheme: var(--about-dialog-color-scheme); 192 } 193 194 #rightBox { 195 background-size: auto; 196 margin-inline: 30px; 197 } 198 199 #bottomBox { 200 background-color: var(--about-dialog-background-color-bottom); 201 padding: 15px 10px 15px; 202 } 203 204 #trademark { 205 font-size: xx-small; 206 text-align: center; 207 color: var(--about-dialog-text-color-trademark); 208 margin-block: 10px; 209 }