| 1 | @import url("chrome://global/skin/in-content/common.css");\r |
| 2 | /* Body and container */\r |
| 3 | body {\r |
| 4 | display: flex;\r |
| 5 | flex-direction: column;\r |
| 6 | box-sizing: padding-box;\r |
| 7 | min-height: 100vh;\r |
| 8 | padding-top: 0;\r |
| 9 | padding-bottom: 0;\r |
| 10 | -moz-padding-start: calc(48px + 4.6em);\r |
| 11 | -moz-padding-end: 48px;\r |
| 12 | align-items: center;\r |
| 13 | justify-content: center;\r |
| 14 | }\r |
| 15 | \r |
| 16 | .container {\r |
| 17 | min-width: 13em;\r |
| 18 | max-width: 52em;\r |
| 19 | }\r |
| 20 | \r |
| 21 | .container.flex {\r |
| 22 | display: flex;\r |
| 23 | flex-direction: column;\r |
| 24 | flex-grow: 1;\r |
| 25 | margin: 10vh 0;\r |
| 26 | }\r |
| 27 | \r |
| 28 | /* Typography */\r |
| 29 | .title {\r |
| 30 | background-image: url("chrome://browser/skin/aboutNetError_info.svg");\r |
| 31 | background-position: left 0;\r |
| 32 | background-repeat: no-repeat;\r |
| 33 | background-size: 1.6em;\r |
| 34 | -moz-margin-start: -2.3em;\r |
| 35 | -moz-padding-start: 2.3em;\r |
| 36 | font-size: 2.5em;\r |
| 37 | }\r |
| 38 | \r |
| 39 | .title:-moz-dir(rtl) {\r |
| 40 | background-position: right 0;\r |
| 41 | }\r |
| 42 | \r |
| 43 | .title-text {\r |
| 44 | border-bottom: 1px solid #A09090;\r |
| 45 | font-size: inherit;\r |
| 46 | padding-bottom: 0.4em;\r |
| 47 | }\r |
| 48 | \r |
| 49 | @media (max-width: 675px) {\r |
| 50 | body {\r |
| 51 | padding: 0 48px;\r |
| 52 | }\r |
| 53 | \r |
| 54 | .title {\r |
| 55 | background-image: none !important;\r |
| 56 | -moz-padding-start: 0;\r |
| 57 | -moz-margin-start: 0;\r |
| 58 | }\r |
| 59 | \r |
| 60 | .title-text {\r |
| 61 | padding-top: 0;\r |
| 62 | }\r |
| 63 | }\r |
| 64 | \r |
| 65 | ul, ol {\r |
| 66 | margin: 0;\r |
| 67 | padding: 0;\r |
| 68 | -moz-margin-start: 1em;\r |
| 69 | }\r |
| 70 | \r |
| 71 | ul > li, ol > li {\r |
| 72 | margin-bottom: .5em;\r |
| 73 | }\r |
| 74 | \r |
| 75 | ul {\r |
| 76 | list-style: disc;\r |
| 77 | }\r |
| 78 | \r |
| 79 | /* Buttons */\r |
| 80 | .button-container {\r |
| 81 | margin-top: 1.2em;\r |
| 82 | }\r |
| 83 | \r |
| 84 | .button-container > button {\r |
| 85 | min-width: 150px;\r |
| 86 | }\r |
| 87 | \r |
| 88 | .button-container > button:first-child {\r |
| 89 | -moz-margin-start: 0;\r |
| 90 | }\r |
| 91 | \r |
| 92 | /* Trees */\r |
| 93 | .tree-container {\r |
| 94 | margin-top: 1.2em;\r |
| 95 | flex-grow: 1;\r |
| 96 | min-height: 12em;\r |
| 97 | }\r |
| 98 | \r |
| 99 | .tree-container > tree {\r |
| 100 | height: 100%;\r |
| 101 | }\r |
| 102 | \r |
| 103 | tree {\r |
| 104 | width: 100%;\r |
| 105 | }\r |