aboutCompat.css (3243B)
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:not(.mobile) { 6 & { 7 font-family: sans-serif; 8 margin: 40px auto; 9 min-width: 30em; 10 max-width: 60em; 11 } 12 13 table { 14 width: 100%; 15 padding-bottom: 2em; 16 border-spacing: 0; 17 } 18 19 td { 20 border-bottom: 1px solid var(--border-color); 21 } 22 23 td:last-child > button { 24 float: inline-end; 25 } 26 } 27 28 /* Mobile UI where common.css is not loaded */ 29 30 :root.mobile { 31 * { 32 margin: 0; 33 padding: 0; 34 } 35 36 :root { 37 --background-color: #fff; 38 --text-color: #0c0c0d; 39 --border-color: #e1e1e2; 40 --button-background-color: #f5f5f5; 41 --selected-tab-text-color: #0061e0; 42 } 43 44 @media (prefers-color-scheme: dark) { 45 :root { 46 --background-color: #292833; 47 --text-color: #f9f9fa; 48 --border-color: rgba(255, 255, 255, 0.15); 49 --button-background-color: rgba(0, 0, 0, 0.15); 50 --selected-tab-text-color: #00ddff; 51 } 52 } 53 54 body { 55 background-color: var(--background-color); 56 color: var(--text-color); 57 font: message-box; 58 font-size: 14px; 59 -moz-text-size-adjust: none; 60 display: grid; 61 grid-template-areas: "a b" "c c"; 62 grid-template-columns: 1fr 1fr; 63 grid-template-rows: fit-content(100%) 1fr; 64 } 65 66 .tab[data-l10n-id="label-interventions"] { 67 grid-area: a; 68 } 69 70 .tab[data-l10n-id="label-smartblock"] { 71 grid-area: b; 72 } 73 74 table { 75 grid-area: c; 76 } 77 78 table, 79 tr, 80 p { 81 display: block; 82 } 83 84 table { 85 border-top: 2px solid var(--border-color); 86 margin-top: -2px; 87 width: 100%; 88 z-index: 1; 89 display: none; 90 } 91 92 tr { 93 border-bottom: 1px solid var(--border-color); 94 padding: 0; 95 } 96 97 a { 98 color: inherit; 99 font-size: 94%; 100 } 101 102 .tab { 103 cursor: pointer; 104 z-index: 2; 105 display: inline-block; 106 text-align: left; 107 border-block: 2px solid transparent; 108 font-size: 1em; 109 font-weight: var(--font-weight-bold); 110 padding: 1em; 111 } 112 113 .tab.active { 114 color: var(--selected-tab-text-color); 115 border-bottom-color: currentColor; 116 margin-bottom: 0; 117 padding-bottom: calc(1em + 2px); 118 } 119 120 .tab.active + table { 121 display: block; 122 } 123 124 td { 125 grid-area: b; 126 padding-left: 1em; 127 } 128 129 td:first-child { 130 grid-area: a; 131 padding-top: 1em; 132 } 133 134 td:last-child { 135 grid-area: c; 136 padding-bottom: 1em; 137 } 138 139 tr { 140 display: grid; 141 grid-template-areas: "a c" "b c"; 142 grid-template-columns: 1fr 6.5em; 143 } 144 145 td[colspan="4"] { 146 padding: 1em; 147 font-style: italic; 148 text-align: center; 149 } 150 151 td:not([colspan]):nth-child(1) { 152 font-weight: var(--font-weight-bold); 153 padding-bottom: 0.25em; 154 } 155 156 td:nth-child(2) { 157 padding-bottom: 1em; 158 } 159 160 td:nth-child(3) { 161 display: flex; 162 padding: 0; 163 } 164 165 button { 166 cursor: pointer; 167 width: 100%; 168 height: 100%; 169 background: var(--button-background-color); 170 color: inherit; 171 inset-inline-end: 0; 172 margin: 0; 173 padding: 0; 174 border: 0; 175 border-inline-start: 1px solid var(--border-color); 176 font-weight: var(--font-weight-semibold); 177 appearance: none; 178 } 179 }