base.css (12477B)
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 :root { 6 /* Colors from common.css */ 7 --in-content-background-color: light-dark(#fff, rgb(28, 27, 34)); 8 --bg-color: var(--in-content-background-color); 9 --text-color: light-dark(#0c0c0d, #eee); 10 --secondary-text-color: light-dark(var(--grey-50), rgb(168, 168, 168)); 11 12 --box-background: light-dark(#fff, rgb(35, 34, 43)); 13 --box-border-color: var(--border-color); 14 15 /* prettier-ignore */ 16 --button-background-color: light-dark( 17 var(--grey-90-a10), /* Note: this is from Photon Default button */ 18 rgb(72, 72, 84) 19 ); 20 /* prettier-ignore */ 21 --button-color: light-dark( 22 var(--grey-90), /* Note: this is from Photon Default button */ 23 var(--white-100) 24 ); 25 /* prettier-ignore */ 26 --button-hover-background-color: light-dark( 27 var(--grey-90-a20), /* Note: this is from Photon Default button */ 28 rgb(92, 92, 106) 29 ); 30 31 --category-background-hover: rgba(12, 12, 13, 0.1); 32 --category-text: light-dark(rgba(12, 12, 13), var(--text-color)); 33 --category-text-selected: var(--button-background-color-primary); 34 35 --fieldpair-text-color: light-dark(var(--grey-50), var(--text-color)); 36 37 --sidebar-text-color: light-dark(var(--category-text), var(--text-color)); 38 --sidebar-selected-color: var(--category-text-selected); 39 --sidebar-background-hover: light-dark(var(--category-background-hover), rgb(92, 92, 106)); 40 41 --card-background-color: light-dark(var(--white-100), rgb(35, 34, 43)); 42 --card-separator-color: light-dark(var(--grey-20), var(--grey-50)); 43 44 /* Dimensions from common.css #categories > .category */ 45 /* TODO: Values are not based on photon's 4px base distance, see bug 1501638 */ 46 --category-height: var(--size-item-xlarge); 47 --category-padding: 10px; 48 --category-transition-duration: 150ms; 49 50 --icon-ok-color: light-dark(var(--green-70), var(--white-100)); 51 --icon-info-color: light-dark(var(--grey-90), var(--white-100)); 52 53 --primary-button-background-color: light-dark(var(--blue-60), #00ddff); 54 --primary-button-color: light-dark(var(--white-100), rgb(43, 42, 51)); 55 --primary-button-hover-background-color: light-dark(var(--blue-70), rgb(128, 235, 255)); 56 --primary-button-active-background-color: light-dark(var(--blue-80), rgb(170, 242, 255)); 57 58 --popup-header-background-color: light-dark(var(--grey-20), var(--grey-50)); 59 --popup-header-color: light-dark(var(--grey-90), var(--white-100)); 60 61 /* Colors from Photon */ 62 --success-background: #30e60b; 63 --warning-background: #fffbd6; /* from the Web Console */ 64 --warning-border: rgba(164, 127, 0, 0.27); /* yellow-70(#a47f00) at 27% */ 65 --warning-icon: var(--yellow-65); /* from the Web Console */ 66 --warning-text: var(--yellow-80); /* from the Web Console */ 67 --error-background: #fdf2f5; /* from the Web Console */ 68 --error-border: rgba(90, 0, 2, 0.16); /* red-80(#5a0002) at 16% */ 69 --error-icon: var(--red-60); /* from the Web Console */ 70 --error-text: var(--red-70); /* from the Web Console */ 71 --highlight-50: #0a84ff; 72 --grey-20: #ededf0; /* for ui, no special semantic */ 73 --grey-30: #d7d7db; /* for ui, no special semantic */ 74 --grey-50: #737373; /* for ui, no special semantic */ 75 --grey-90: #0c0c0d; /* for ui, no special semantic */ 76 --grey-90-a10: rgba(12, 12, 13, 0.1); 77 --grey-90-a20: rgba(12, 12, 13, 0.2); 78 --grey-90-a30: rgba(12, 12, 13, 0.3); 79 --grey-90-a60: rgba(12, 12, 13, 0.6); 80 --red-70: #a4000f; /* for ui, no special semantic */ 81 --white-100: #fff; /* for ui, no special semantic */ 82 --yellow-60: #d7b600; /* for ui, no special semantic */ 83 --yellow-70: #a47f00; /* for ui, no special semantic */ 84 85 /* Typography from Photon */ 86 /* See https://firefox-dev.tools/photon/visuals/typography.html */ 87 --body-10-font-size: 13px; 88 --body-10-font-weight: normal; 89 --body-20-font-size: 15px; 90 --body-20-font-weight: normal; 91 --body-20-font-weight-bold: var(--font-weight-bold); 92 --caption-10-font-size: 11px; 93 --caption-10-font-weight: normal; 94 --caption-20-font-size: 13px; 95 --caption-20-font-weight: normal; 96 --display-10-font-size: 28px; 97 --display-10-font-weight: var(--font-weight-semibold); 98 --title-20-font-size: 17px; 99 --title-20-font-weight: var(--font-weight-semibold); 100 --title-30-font-size: 22px; 101 102 /* Global layout vars */ 103 --base-unit: 4px; 104 105 /* Global styles */ 106 --base-font-style: message-box; 107 --base-font-size: var(--body-10-font-size); 108 --base-font-weight: normal; 109 --base-line-height: 1.8; 110 --icon-label-font-size: var(--body-10-font-size); 111 --message-font-size: var(--body-10-font-size); 112 --button-font-size: var(--base-font-size); 113 --micro-font-size: 11px; 114 --monospace-font-family: monospace; 115 116 /* 117 * Variables particular to about:debugging 118 */ 119 --alt-heading-icon-size: calc(var(--base-unit) * 6); 120 --alt-heading-icon-gap: var(--base-unit); 121 --main-heading-icon-size: calc(var(--base-unit) * 17); /* 4px * 17 = 68px */ 122 --main-heading-icon-gap: calc(var(--base-unit) * 3); 123 --main-subheading-icon-size: calc(var(--base-unit) * 4); 124 --main-subheading-heading-icon-gap: calc(var(--base-unit) * 2); 125 } 126 127 /* 128 * Reset some tags 129 */ 130 131 html { 132 font: var(--base-font-style); 133 } 134 135 body { 136 margin: 0; 137 padding: 0; 138 color: var(--text-color); 139 font-size: var(--base-font-size); 140 font-weight: var(--base-font-weight); 141 line-height: var(--base-line-height); 142 background: var(--bg-color); 143 } 144 145 dd { 146 margin: 0; 147 padding: 0; 148 } 149 150 ul { 151 list-style: none; 152 margin: 0; 153 padding: 0; 154 } 155 156 a { 157 color: var(--link-color); 158 } 159 a:hover { 160 color: var(--link-color-hover); 161 } 162 a:active { 163 color: var(--link-color-active); 164 } 165 166 p, 167 h1 { 168 margin: 0; 169 } 170 171 /* 172 * Utils 173 */ 174 175 /* text that needs to be cut with … */ 176 .ellipsis-text { 177 overflow: hidden; 178 text-overflow: ellipsis; 179 white-space: nowrap; 180 } 181 182 /* Technical text that should use a monospace font, such as code, error messages. */ 183 .technical-text { 184 font-family: var(--monospace-font-family); 185 } 186 187 /* Links that need to look like current text */ 188 .undecorated-link, 189 .undecorated-link:hover { 190 text-decoration: none; 191 color: currentColor; 192 } 193 194 /* Text needs to wrap anywhere */ 195 .word-wrap-anywhere { 196 word-wrap: anywhere; 197 } 198 199 /* 200 * Typography 201 */ 202 203 /* Main style for heading (i.e. h1) */ 204 .main-heading { 205 font-size: var(--display-10-font-size); 206 font-weight: var(--display-10-font-weight); 207 line-height: 1.2; 208 } 209 210 .main-heading__icon { 211 width: 100%; 212 } 213 214 .main-heading-subtitle { 215 font-size: var(--title-30-font-size); 216 font-weight: var(--title-20-font-weight); 217 } 218 219 /* Main style for a subheading (i.e. h2). It features an icon */ 220 /* +--------+-------------+ 221 * | [Icon] | Lorem ipsum | 222 * +--------+-------------+ 223 */ 224 .main-subheading { 225 margin-block: calc(var(--base-unit) * 4) 0; 226 font-size: var(--title-20-font-size); /* Note: this is from Photon Title 20 */ 227 font-weight: var(--title-20-font-weight); /* Note: this is from Photon Title 20 */ 228 229 display: grid; 230 grid-template-columns: var(--main-subheading-icon-size) 1fr; 231 grid-column-gap: var(--main-subheading-heading-icon-gap); 232 align-items: center; 233 } 234 235 .main-subheading__icon { 236 width: 100%; 237 fill: currentColor; 238 -moz-context-properties: fill; 239 } 240 241 /* Alternative style for a heading (i.e. h1) */ 242 .alt-heading { 243 font-weight: var(--title-20-font-weight); 244 font-size: var(--title-20-font-size); 245 246 margin-block-start: 0; 247 margin-block-end: calc(var(--base-unit) * 4); 248 } 249 250 .alt-heading--larger { 251 font-size: var(--title-30-font-size); 252 font-weight: var(--title-20-font-weight); 253 } 254 255 /* Alternative style for a subheading (i.e. h2). It features an icon */ 256 /* +--------+-------------+ 257 * | [Icon] | Lorem ipsum | 258 * +--------+-------------+ 259 */ 260 .alt-subheading { 261 margin-block-start: calc(var(--base-unit) * 4); 262 font-weight: var(--heading-font-weight); 263 font-size: 1.14em; 264 line-height: 1.4em; /* odd value - from common.inc.css */ 265 266 display: grid; 267 grid-template-columns: var(--alt-heading-icon-size) 1fr; 268 grid-column-gap: var(--alt-heading-icon-gap); 269 align-items: center; 270 } 271 272 .alt-subheading__icon { 273 width: 100%; 274 fill: currentColor; 275 -moz-context-properties: fill; 276 } 277 278 /* 279 * Layout elements 280 */ 281 282 /* for horizontal rules / separators */ 283 .separator { 284 border-style: solid none none none; 285 border-color: var(--border-color); 286 } 287 288 /* adds breathing space to the separator */ 289 .separator--breathe { 290 margin: calc(var(--base-unit) * 5) 0; 291 } 292 293 /* a series of button-like elements, layed out horizontally */ 294 .toolbar { 295 display: flex; 296 column-gap: calc(var(--base-unit) * 3); 297 } 298 299 .toolbar--right-align { 300 justify-content: end; 301 } 302 303 /* 304 Form controls 305 */ 306 .default-button, 307 .default-input { 308 box-sizing: border-box; 309 font-size: 1em; 310 } 311 312 /* Buttons from Photon */ 313 .default-button, 314 .primary-button { 315 appearance: none; 316 margin: 0; 317 height: calc(var(--base-unit) * 8); 318 padding-inline-start: calc(var(--base-unit) * 5); 319 padding-inline-end: calc(var(--base-unit) * 5); 320 321 border: none; 322 border-radius: var(--border-radius-xsmall); 323 324 font-size: var(--button-font-size); 325 } 326 327 /* Disabled state for buttons from Photon */ 328 .default-button:disabled, 329 .primary-button:disabled { 330 opacity: 0.4; 331 } 332 333 /* Smaller variant size for buttons, from Photon */ 334 .default-button--micro, 335 .primary-button--micro { 336 padding-inline-start: calc(2 * var(--base-unit)); 337 padding-inline-end: calc(2 * var(--base-unit)); 338 font-size: var(--micro-font-size); 339 height: calc(var(--base-unit) * 6); 340 } 341 342 /* Photon button representing a primary action */ 343 .primary-button { 344 color: var(--primary-button-color); 345 background-color: var(--primary-button-background-color); 346 } 347 348 .primary-button:enabled:hover { 349 background: var(--primary-button-hover-background-color); 350 } 351 352 .primary-button:enabled:active { 353 background: var(--primary-button-active-background-color); 354 } 355 356 /* Photon standard button */ 357 .default-button { 358 color: var(--button-color); 359 background-color: var(--button-background-color); 360 } 361 362 .default-button:enabled:hover { 363 background: var(--button-hover-background-color); 364 } 365 366 .default-button:enabled:active { 367 background: var(--button-active-background-color); 368 } 369 370 @media (prefers-contrast) { 371 .default-button, 372 .ghost-button, 373 .primary-button { 374 background-color: ButtonFace; 375 /* Add a border to make buttons visible in high contrast */ 376 border: 1px solid ButtonText; 377 color: ButtonText; 378 } 379 380 .ghost-button { 381 fill: ButtonText; 382 } 383 384 /* prettier-ignore */ 385 :is( 386 .default-button, 387 .ghost-button, 388 .primary-button 389 ):enabled:is(:hover, :active) { 390 background-color: ButtonText; 391 color: ButtonFace; 392 } 393 } 394 395 /* Photon ghost button. Icon button with no background */ 396 .ghost-button { 397 background: transparent; 398 border: none; 399 border-radius: var(--border-radius-xsmall); 400 fill: var(--button-color); 401 height: calc(var(--base-unit) * 6); 402 padding: calc(var(--base-unit)); 403 width: calc(var(--base-unit) * 6); 404 405 -moz-context-properties: fill; 406 } 407 408 .ghost-button:hover { 409 background: var(--button-hover-background-color); 410 } 411 412 .ghost-button:active { 413 background: var(--button-active-background-color); 414 } 415 416 /* Standard inputs */ 417 .default-input { 418 line-height: unset; 419 padding: 0 calc(var(--base-unit) * 2); 420 height: 100%; 421 422 border: 1px solid var(--box-border-color); 423 border-radius: var(--border-radius-xsmall); 424 color: var(--text-color); 425 background-color: var(--box-background); 426 } 427 428 /* 429 * Other UI components 430 */ 431 432 /* 433 * A small, colored badge. 434 * NOTE: styles borrowed from Photon's micro buttons (there aren't badges) 435 */ 436 .badge { 437 background: var(--grey-30); 438 border-radius: var(--border-radius-xsmall); 439 font-size: var(--micro-font-size); 440 padding: var(--base-unit) calc(2 * var(--base-unit)); 441 } 442 443 .badge--info { 444 background: var(--highlight-50); 445 } 446 447 .badge--success { 448 background: var(--success-background); 449 } 450 451 .badge--warning { 452 background: var(--warning-background); 453 } 454 455 .badge--error { 456 background: var(--error-background); 457 } 458 459 /* 460 * Card UI, from Photon 461 */ 462 .card { 463 background-color: var(--card-background-color); /* from common.inc.css */ 464 border-radius: var(--border-radius-small); 465 box-shadow: 0 1px 4px var(--grey-90-a10); /* from common.inc.css */ 466 box-sizing: border-box; 467 min-width: min-content; 468 padding-block: calc(var(--base-unit) * 5); 469 } 470 471 .card__heading { 472 font-size: var(--title-20-font-size); /* Note: this is from Photon Title 20 */ 473 font-weight: var(--title-20-font-weight); /* Note: this is from Photon Title 20 */ 474 }