LCARStrek/browser/controlcenter/panel.css

   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 /* === BEGIN panel.inc.css === */
   6
   7 /* Hide all conditional elements by default. */
   8 :-moz-any([when-connection],[when-mixedcontent],[when-ciphers],[when-loginforms]) {
   9   display: none;
  10 }
  11
  12 /* Show the right elements for the right connection states. */
  13 #identity-popup[connection=not-secure] [when-connection~=not-secure],
  14 #identity-popup[connection=secure-cert-user-overridden] [when-connection~=secure-cert-user-overridden],
  15 #identity-popup[connection=secure-ev] [when-connection~=secure-ev],
  16 #identity-popup[connection=secure] [when-connection~=secure],
  17 #identity-popup[connection=chrome] [when-connection~=chrome],
  18 #identity-popup[connection=file] [when-connection~=file],
  19 /* Show insecure login forms messages when needed. */
  20 #identity-popup[loginforms=insecure] [when-loginforms=insecure],
  21 /* Show weak cipher messages when needed. */
  22 #identity-popup[ciphers=weak] [when-ciphers~=weak],
  23 /* Show mixed content warnings when needed */
  24 #identity-popup[mixedcontent~=active-loaded] [when-mixedcontent=active-loaded],
  25 #identity-popup[mixedcontent~=passive-loaded]:not([mixedcontent~=active-loaded]) [when-mixedcontent=passive-loaded],
  26 #identity-popup[mixedcontent~=active-blocked]:not([mixedcontent~=passive-loaded]) [when-mixedcontent=active-blocked],
  27 /* Show the right elements when there is mixed passive content loaded and active blocked. */
  28 #identity-popup[mixedcontent~=active-blocked][mixedcontent~=passive-loaded] [when-mixedcontent~=active-blocked][when-mixedcontent~=passive-loaded],
  29 /* Show 'disable MCB' button always when there is mixed active content blocked. */
  30 #identity-popup-securityView-body[mixedcontent~=active-blocked] > button[when-mixedcontent=active-blocked] {
  31   display: inherit;
  32 }
  33
  34 /* Hide redundant messages based on insecure login forms presence. */
  35 #identity-popup[loginforms=secure] [and-when-loginforms=insecure] {
  36   display: none;
  37 }
  38 #identity-popup[loginforms=insecure] [and-when-loginforms=secure] {
  39   display: none;
  40 }
  41
  42 /* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */
  43 #identity-popup-securityView-body:-moz-any([mixedcontent],[ciphers]) > description[when-connection=not-secure],
  44 /* Hide 'passive-loaded (only)' message when there is mixed passive content loaded and active blocked. */
  45 #identity-popup-securityView-body[mixedcontent~=passive-loaded][mixedcontent~=active-blocked] > description[when-mixedcontent=passive-loaded] {
  46   display: none;
  47 }
  48
  49 /* Make sure hidden elements don't accidentally become visible from one of the
  50    above selectors (see Bug 1194258) */
  51 #identity-popup [hidden] {
  52   display: none !important;
  53 }
  54
  55 #identity-popup,
  56 #identity-popup:not([panelopen]) .panel-viewstack[viewtype="main"]:not([transitioning]) #identity-popup-mainView {
  57   /* Tiny hack to ensure the panel shrinks back to its original
  58      size after closing a subview that is bigger than the main view. */
  59   max-height: 0;
  60 }
  61
  62 .panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView menulist,
  63 .panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView button:not([panel-multiview-anchor]) {
  64   -moz-user-focus: ignore;
  65 }
  66
  67 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
  68   padding: 0;
  69 }
  70
  71 .panel-mainview[panelid=identity-popup] {
  72   min-width: 30em;
  73 }
  74
  75 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews {
  76   transform: translateX(100%);
  77   box-shadow: none;
  78 }
  79
  80 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
  81   transform: translateX(-100%);
  82 }
  83
  84 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
  85   background: var(--panel-arrowcontent-background);
  86   padding: 0;
  87 }
  88
  89 .identity-popup-section:not(:first-child) {
  90   border-top: 1px solid var(--panel-separator-color);
  91 }
  92
  93 #identity-popup-securityView,
  94 #identity-popup-security-content,
  95 #identity-popup-permissions-content,
  96 #tracking-protection-content {
  97   background-repeat: no-repeat;
  98   background-position: 1em 1em;
  99   background-size: 24px auto;
 100 }
 101
 102 #identity-popup-security-content,
 103 #identity-popup-permissions-content,
 104 #tracking-protection-content {
 105   padding: 0.5em 0 1em;
 106   /* .identity-popup-headline.host depends on this width */
 107   padding-inline-start: calc(2em + 24px);
 108   padding-inline-end: 1em;
 109 }
 110
 111 #identity-popup-securityView:-moz-locale-dir(rtl),
 112 #identity-popup-security-content:-moz-locale-dir(rtl),
 113 #identity-popup-permissions-content:-moz-locale-dir(rtl),
 114 #tracking-protection-content:-moz-locale-dir(rtl) {
 115   background-position: calc(100% - 1em) 1em;
 116 }
 117
 118 /* EXPAND BUTTON */
 119
 120 .identity-popup-expander {
 121   margin: 0;
 122   min-width: auto;
 123   width: var(--identity-popup-expander-width);
 124   background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow");
 125   background-size: 16px, auto;
 126   background-position: center;
 127   background-repeat: no-repeat;
 128   background-color: transparent;
 129   border-radius: 0 5px 5px 0;
 130 }
 131
 132 .identity-popup-expander:-moz-locale-dir(rtl) {
 133   transform: scaleX(-1);
 134 }
 135
 136 .identity-popup-expander[panel-multiview-anchor] {
 137   transition: background-color 250ms ease-in;
 138   background-color: #008484;
 139   background-image: url("chrome://browser/skin/controlcenter/arrow-subview-back.svg");
 140   color: #000000;
 141 }
 142
 143 .identity-popup-expander > .button-box,
 144 .identity-popup-expander > .button-box:focus {
 145   padding: 4px 0;
 146   border-radius: 0 5px 5px 0;
 147 }
 148
 149 .identity-popup-expander[panel-multiview-anchor] > .button-box,
 150 .identity-popup-expander[panel-multiview-anchor] > .button-box:focus {
 151 }
 152
 153 .identity-popup-expander:hover {
 154   background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active");
 155   background-color: #FFCF00;
 156 }
 157
 158 .identity-popup-expander:hover:active {
 159   background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active");
 160   background-color: #FF9F00;
 161 }
 162
 163 /* CONTENT */
 164
 165 .identity-popup-permission-label,
 166 .identity-popup-permission-state-label,
 167 #identity-popup-security-content > description,
 168 #identity-popup-security-descriptions > description,
 169 #identity-popup-securityView-header > description,
 170 #identity-popup-securityView-body > description,
 171 #identity-popup-permissions-content > description,
 172 #tracking-protection-content > label,
 173 .identity-popup-text {
 174   white-space: pre-wrap;
 175   font-size: 110%;
 176   margin: 0;
 177 }
 178
 179 .identity-popup-headline {
 180   margin: 3px 0 4px;
 181   font-size: 150%;
 182 }
 183
 184 .identity-popup-headline.host {
 185   word-wrap: break-word;
 186   /* 1em + 2em + 24px is #identity-popup-security-content padding
 187    * 30em is .panel-mainview:not([panelid="PanelUI-popup"]) width */
 188   max-width: calc(30rem - 3rem - 24px - var(--identity-popup-expander-width))
 189 }
 190
 191 .identity-popup-warning-gray {
 192   padding-inline-start: 24px;
 193   background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%;
 194 }
 195
 196 .identity-popup-warning-yellow {
 197   padding-inline-start: 24px;
 198   background: url(chrome://browser/skin/controlcenter/warning-yellow.svg) no-repeat 0 50%;
 199 }
 200
 201 .identity-popup-warning-gray:-moz-locale-dir(rtl),
 202 .identity-popup-warning-yellow:-moz-locale-dir(rtl) {
 203   background-position: 100% 50%;
 204 }
 205
 206 /* SECURITY */
 207
 208 #identity-popup-securityView > .identity-popup-text:not(#identity-popup-content-owner) {
 209   margin: 2px 0 4px;
 210 }
 211
 212 .identity-popup-connection-secure {
 213   color: #008484;
 214 }
 215
 216 .identity-popup-connection-not-secure {
 217   color: #9C9CFF;
 218 }
 219
 220 #identity-popup-security-content.chromeUI {
 221   background-image: url(chrome://branding/content/icon48.png);
 222 }
 223
 224 /* SECURITY SUBVIEW */
 225
 226 #identity-popup-securityView {
 227   overflow: hidden;
 228 }
 229
 230 #identity-popup-securityView,
 231 #identity-popup-security-content {
 232   background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg);
 233 }
 234
 235 #identity-popup[connection=chrome] #identity-popup-securityView,
 236 #identity-popup[connection=chrome] #identity-popup-security-content {
 237   background-image: url(chrome://branding/content/icon48.png);
 238 }
 239
 240 #identity-popup[connection^=secure] #identity-popup-securityView,
 241 #identity-popup[connection^=secure] #identity-popup-security-content {
 242   background-image: url(chrome://browser/skin/controlcenter/conn-secure.svg);
 243 }
 244
 245 /* Use [isbroken] to make sure we don't show a lock on an http page. See Bug 1192162. */
 246 #identity-popup[ciphers=weak] #identity-popup-securityView,
 247 #identity-popup[ciphers=weak] #identity-popup-security-content,
 248 #identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-securityView,
 249 #identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-security-content {
 250   background-image: url(chrome://browser/skin/controlcenter/conn-degraded.svg);
 251 }
 252
 253 #identity-popup[connection=secure-cert-user-overridden] #identity-popup-securityView,
 254 #identity-popup[connection=secure-cert-user-overridden] #identity-popup-security-content {
 255   background-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
 256 }
 257
 258 #identity-popup[loginforms=insecure] #identity-popup-securityView,
 259 #identity-popup[loginforms=insecure] #identity-popup-security-content,
 260 #identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-securityView,
 261 #identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-security-content {
 262   background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg);
 263 }
 264
 265 #identity-popup-security-descriptions > description {
 266   margin-top: 6px;
 267   color: #A09090;
 268 }
 269
 270 #identity-popup-securityView-header,
 271 #identity-popup-securityView-body {
 272   margin-inline-start: calc(2em + 24px);
 273   margin-inline-end: 1em;
 274 }
 275
 276 #identity-popup-securityView-header {
 277   margin-top: 0.5em;
 278   border-bottom: 1px solid var(--panel-separator-color);
 279   padding-bottom: 1em;
 280 }
 281
 282 #identity-popup-securityView-body {
 283   padding-inline-end: 1em;
 284 }
 285
 286 #identity-popup-securityView-footer {
 287   margin-top: 1em;
 288   background-color: #402000;
 289 }
 290
 291 #identity-popup-securityView-footer > button {
 292 }
 293
 294 #identity-popup-securityView-footer > button:hover,
 295 #identity-popup-securityView-footer > button:focus {
 296 }
 297
 298 #identity-popup-securityView-footer > button:hover:active {
 299 }
 300
 301 #identity-popup-content-verifier ~ description {
 302   margin-top: 1em;
 303   color: #A09090;
 304 }
 305
 306 description#identity-popup-content-verified-by,
 307 description#identity-popup-content-owner,
 308 description#identity-popup-content-verifier,
 309 #identity-popup-securityView-body > button {
 310   margin-top: 1em;
 311 }
 312
 313 #identity-popup-securityView-body > button {
 314   margin-inline-start: 0;
 315   margin-inline-end: 0;
 316 }
 317
 318 /* TRACKING PROTECTION */
 319
 320 #tracking-protection-content {
 321   background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg");
 322 }
 323
 324 #tracking-protection-content[state="loaded-tracking-content"]  {
 325   background-image: url("chrome://browser/skin/controlcenter/tracking-protection-disabled.svg");
 326 }
 327
 328 #tracking-action-block,
 329 #tracking-action-unblock,
 330 #tracking-action-unblock-private,
 331 #identity-popup-securityView-body > button {
 332   margin: 1em 0 0;
 333 }
 334
 335 #tracking-protection-content[state] > #tracking-not-detected,
 336 #tracking-protection-content:not([state="blocked-tracking-content"]) > #tracking-blocked,
 337 #main-window[privatebrowsingmode] #tracking-action-unblock,
 338 #main-window:not([privatebrowsingmode]) #tracking-action-unblock-private,
 339 #tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock,
 340 #tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock-private,
 341 #tracking-protection-content:not([state="loaded-tracking-content"]) > #tracking-loaded,
 342 #tracking-protection-content:not([state="loaded-tracking-content"]) #tracking-action-block,
 343 #tracking-protection-content:not([state]) > #tracking-actions {
 344   display: none;
 345 }
 346
 347 /* PERMISSIONS */
 348
 349 #identity-popup-permissions-content {
 350   background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
 351 }
 352
 353 #identity-popup-permissions-headline {
 354   /* Make sure the label is as tall as the icon so that the permission list
 355      which is aligned with the icon doesn't cover it up. */
 356   min-height: 24px;
 357 }
 358
 359 #identity-popup-permission-list {
 360   /* Offset the padding set on #identity-popup-permissions-content so that it
 361      shows up just below the section. The permission icons are 16px wide and
 362      should be right aligned with the section icon. */
 363   margin-inline-start: calc(-1em - 16px);
 364 }
 365
 366 .identity-popup-permission-item {
 367   min-height: 24px;
 368 }
 369
 370 #identity-popup-permission-list:not(:empty) {
 371   margin-top: 5px;
 372 }
 373
 374 #identity-popup-permission-list:not(:empty) + description {
 375   display: none;
 376 }
 377
 378 .identity-popup-permission-icon {
 379   width: 16px;
 380   height: 16px;
 381 }
 382
 383 .identity-popup-permission-label {
 384   margin-inline-start: 1em;
 385 }
 386
 387 .identity-popup-permission-state-label {
 388   margin-inline-end: 5px;
 389   text-align: end;
 390   opacity: 0.6;
 391 }
 392
 393 .identity-popup-permission-remove-button {
 394   margin: 0;
 395   border-width: 0;
 396   border-radius: 50%;
 397   min-width: 0;
 398   padding: 2px;
 399   background-color: transparent;
 400 }
 401
 402 .identity-popup-permission-remove-button > .button-box {
 403   padding: 0;
 404 }
 405
 406 .identity-popup-permission-remove-button > .button-box > .button-icon {
 407   margin: 0;
 408   width: 16px;
 409   height: 16px;
 410   list-style-image: url(chrome://browser/skin/panel-icons.svg#cancel);
 411   filter: url(chrome://global/skin/filters.svg#fill);
 412   fill: #A09090;
 413 }
 414
 415 .identity-popup-permission-remove-button > .button-box > .button-text {
 416   display: none;
 417 }
 418
 419 .identity-popup-permission-remove-button:not(:-moz-focusring):hover {
 420   background-color: #FFCF00;
 421 }
 422
 423 .identity-popup-permission-remove-button:not(:-moz-focusring):hover > .button-box > .button-icon {
 424   fill: #000000;
 425 }
 426
 427 .identity-popup-permission-remove-button:not(:-moz-focusring):hover:active {
 428   background-color: #FF9F00;
 429 }
 430
 431 /* === END panel.inc.css === */
 432
 433 .identity-popup-expander:-moz-focusring {
 434   padding: 1px;
 435 }
 436
 437 .identity-popup-expander:-moz-focusring > .button-box {
 438   outline: 1px #008484 dotted;
 439 }