aboutRulesets.css (5281B)
1 /* Copyright (c) 2022, The Tor Project, Inc. */ 2 3 /* General rules */ 4 5 html, 6 body { 7 width: 100%; 8 height: 100%; 9 } 10 11 label { 12 display: flex; 13 align-items: center; 14 padding: 6px 0; 15 } 16 17 input[type="text"] { 18 margin: 0; 19 width: 360px; 20 max-width: 100%; 21 } 22 23 textarea { 24 margin: 0; 25 width: var(--content-width); 26 max-width: 100%; 27 box-sizing: border-box; 28 } 29 30 select, 31 option { 32 font-weight: var(--font-weight-bold); 33 } 34 35 dt { 36 margin: var(--ruleset-vmargin) 0 0 0; 37 padding: 0; 38 color: var(--text-color-deemphasized); 39 font-size: var(--font-size-small); 40 } 41 42 dd { 43 margin: 8px 0 0 0; 44 padding: 0; 45 max-width: 600px; 46 box-sizing: border-box; 47 } 48 49 hr { 50 width: 40px; 51 margin: 0; 52 border: none; 53 border-top: 1px solid var(--border-color); 54 } 55 56 .hidden { 57 display: none !important; 58 } 59 60 /* Initial warning */ 61 62 #warning-wrapper { 63 display: none; 64 } 65 66 .state-warning #warning-wrapper { 67 display: flex; 68 align-items: center; 69 height: 100%; 70 } 71 72 #warning { 73 margin-top: -20vh; 74 padding: 0 160px; 75 background-image: url("chrome://global/skin/icons/warning.svg"); 76 background-position: 84px 0; 77 background-repeat: no-repeat; 78 background-size: 48px; 79 fill: #ffbd4f; 80 -moz-context-properties: fill; 81 } 82 83 #warning:dir(rtl) { 84 background-position: right 84px top 0; 85 } 86 87 #warning-description { 88 margin: 30px 0 16px 0; 89 } 90 91 #warning-buttonbar { 92 margin-top: 30px; 93 text-align: right; 94 } 95 96 /* Actual content */ 97 98 :root { 99 --sidebar-width: 320px; 100 --content-width: 600px; 101 --ruleset-vmargin: 40px; 102 } 103 104 #main-content { 105 display: flex; 106 height: 100%; 107 } 108 109 .state-warning #main-content { 110 display: none; 111 } 112 113 section { 114 display: none; 115 flex: 1 0 auto; 116 padding: 40px; 117 } 118 119 .title { 120 display: flex; 121 align-items: center; 122 width: var(--content-width); 123 max-width: 100%; 124 padding-bottom: 16px; 125 border-bottom: 1px solid var(--border-color); 126 } 127 128 .title h1 { 129 margin: 0; 130 padding: 0; 131 padding-inline-start: 35px; 132 font-size: var(--font-size-xlarge); 133 font-weight: var(--font-weight-bold); 134 background-image: url("chrome://browser/content/rulesets/securedrop.svg"); 135 background-position: 0 center; 136 background-size: 22px; 137 min-height: 22px; 138 background-repeat: no-repeat; 139 } 140 141 #main-content h1:dir(rtl) { 142 background-position: right 0 top 4px; 143 } 144 145 /* Ruleset list */ 146 147 aside { 148 display: flex; 149 flex-direction: column; 150 flex: 0 0 var(--sidebar-width); 151 box-sizing: border-box; 152 153 border-inline-end: 1px solid var(--border-color); 154 background-color: var(--background-color-box); 155 } 156 157 #ruleset-heading { 158 padding: 16px; 159 text-align: center; 160 font-weight: var(--font-weight-bold); 161 border-bottom: 1px solid var(--border-color); 162 } 163 164 #ruleset-list-container { 165 flex: 1; 166 } 167 168 #ruleset-list-empty { 169 padding: 16px; 170 text-align: center; 171 } 172 173 #ruleset-list-empty-description { 174 font-size: var(--font-size-small); 175 } 176 177 #ruleset-list { 178 margin: 0; 179 padding: 0; 180 } 181 182 #ruleset-list li { 183 display: flex; 184 align-items: center; 185 margin: 0; 186 padding: 10px 18px; 187 list-style: none; 188 border-inline-start: 4px solid transparent; 189 border-bottom: 1px solid var(--border-color); 190 } 191 192 #ruleset-list li:last-child { 193 border-bottom: none; 194 } 195 196 #ruleset-list .icon { 197 width: 16px; 198 height: 16px; 199 margin-inline-end: 12px; 200 background-image: url("chrome://browser/content/rulesets/securedrop.svg"); 201 background-size: 16px; 202 } 203 204 #ruleset-list .icon.has-favicon { 205 background: transparent; 206 } 207 208 #ruleset-list .name { 209 font-weight: var(--font-weight-bold); 210 } 211 212 #ruleset-list .description { 213 font-size: var(--font-size-small); 214 color: var(--text-color-deemphasized); 215 } 216 217 #ruleset-list .selected { 218 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-color-tokens */ 219 border-inline-start-color: var(--color-accent-primary); 220 } 221 222 #ruleset-list .selected.disabled { 223 border-inline-start-color: var(--border-color); 224 } 225 226 #ruleset-list li:not(.selected):hover { 227 background-color: var(--button-background-color-hover); 228 color: var(--button-text-color-hover); 229 } 230 231 #ruleset-list li:not(.selected):hover:active { 232 background-color: var(--button-background-color-active); 233 } 234 235 #ruleset-list #ruleset-template { 236 display: none; 237 } 238 239 /* Ruleset details */ 240 241 .state-details #ruleset-details { 242 display: block; 243 } 244 245 #ruleset-jwk-value { 246 padding: 8px; 247 border-radius: var(--border-radius-xsmall); 248 background-color: var(--background-color-box); 249 font-size: var(--font-size-small); 250 line-break: anywhere; 251 /* ASCII-only text, so can set line-height. */ 252 line-height: 1.4; 253 } 254 255 #ruleset-edit { 256 margin-inline-start: auto; 257 padding-inline-start: 32px; 258 background-image: url("chrome://global/skin/icons/edit.svg"); 259 background-repeat: no-repeat; 260 background-position: 8px; 261 -moz-context-properties: fill; 262 fill: currentColor; 263 min-width: auto; 264 flex: 0 0 auto; 265 } 266 267 #ruleset-enable { 268 margin-top: var(--ruleset-vmargin); 269 } 270 271 #ruleset-buttonbar { 272 margin: var(--ruleset-vmargin) 0; 273 } 274 275 #ruleset-updated { 276 margin-top: 24px; 277 color: var(--text-color-deemphasized); 278 font-size: var(--font-size-small); 279 } 280 281 /* Edit ruleset */ 282 283 .state-edit #edit-ruleset { 284 display: block; 285 } 286 287 #edit-ruleset label { 288 color: var(--text-color-deemphasized); 289 display: block; 290 } 291 292 #edit-ruleset label, 293 #edit-buttonbar { 294 margin-top: var(--ruleset-vmargin); 295 } 296 297 label#edit-enable { 298 display: flex; 299 align-items: center; 300 }