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(--arrowpanel-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: var(--arrowpanel-hover);
 156 }
 157
 158 .identity-popup-expander:hover > .button-box > .button-icon {
 159   filter: url(chrome://global/skin/filters.svg#fill);
 160   fill: #000000;
 161 }
 162
 163 .identity-popup-expander:hover:active {
 164   background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active");
 165   background-color: var(--arrowpanel-active);
 166 }
 167
 168 /* CONTENT */
 169
 170 .identity-popup-permission-label,
 171 .identity-popup-permission-state-label,
 172 #identity-popup-security-content > description,
 173 #identity-popup-security-descriptions > description,
 174 #identity-popup-securityView-header > description,
 175 #identity-popup-securityView-body > description,
 176 #identity-popup-permissions-content > description,
 177 #tracking-protection-content > label,
 178 .identity-popup-text {
 179   white-space: pre-wrap;
 180   font-size: 110%;
 181   margin: 0;
 182 }
 183
 184 .identity-popup-headline {
 185   margin: 3px 0 4px;
 186   font-size: 150%;
 187 }
 188
 189 .identity-popup-headline.host {
 190   word-wrap: break-word;
 191   /* 1em + 2em + 24px is #identity-popup-security-content padding
 192    * 30em is .panel-mainview:not([panelid="PanelUI-popup"]) width */
 193   max-width: calc(30rem - 3rem - 24px - var(--identity-popup-expander-width))
 194 }
 195
 196 .identity-popup-warning-gray {
 197   padding-inline-start: 24px;
 198   background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%;
 199 }
 200
 201 .identity-popup-warning-yellow {
 202   padding-inline-start: 24px;
 203   background: url(chrome://browser/skin/controlcenter/warning-yellow.svg) no-repeat 0 50%;
 204 }
 205
 206 .identity-popup-warning-gray:-moz-locale-dir(rtl),
 207 .identity-popup-warning-yellow:-moz-locale-dir(rtl) {
 208   background-position: 100% 50%;
 209 }
 210
 211 /* SECURITY */
 212
 213 #identity-popup-securityView > .identity-popup-text:not(#identity-popup-content-owner) {
 214   margin: 2px 0 4px;
 215 }
 216
 217 .identity-popup-connection-secure {
 218   color: #008484;
 219 }
 220
 221 .identity-popup-connection-not-secure {
 222   color: #9C9CFF;
 223 }
 224
 225 #identity-popup-security-content.chromeUI {
 226   background-image: url(chrome://branding/content/icon48.png);
 227 }
 228
 229 /* SECURITY SUBVIEW */
 230
 231 #identity-popup-securityView {
 232   overflow: hidden;
 233 }
 234
 235 #identity-popup-securityView,
 236 #identity-popup-security-content {
 237   background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg);
 238 }
 239
 240 #identity-popup[connection=chrome] #identity-popup-securityView,
 241 #identity-popup[connection=chrome] #identity-popup-security-content {
 242   background-image: url(chrome://branding/content/icon48.png);
 243 }
 244
 245 #identity-popup[connection^=secure] #identity-popup-securityView,
 246 #identity-popup[connection^=secure] #identity-popup-security-content {
 247   background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-secure);
 248 }
 249
 250 /* Use [isbroken] to make sure we don't show a lock on an http page. See Bug 1192162. */
 251 #identity-popup[ciphers=weak] #identity-popup-securityView,
 252 #identity-popup[ciphers=weak] #identity-popup-security-content,
 253 #identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-securityView,
 254 #identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-security-content {
 255   background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-degraded);
 256 }
 257
 258 #identity-popup[connection=secure-cert-user-overridden] #identity-popup-securityView,
 259 #identity-popup[connection=secure-cert-user-overridden] #identity-popup-security-content {
 260   background-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
 261 }
 262
 263 #identity-popup[loginforms=insecure] #identity-popup-securityView,
 264 #identity-popup[loginforms=insecure] #identity-popup-security-content,
 265 #identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-securityView,
 266 #identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-security-content {
 267   background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg);
 268 }
 269
 270 #identity-popup-security-descriptions > description {
 271   margin-top: 6px;
 272   color: #A09090;
 273 }
 274
 275 #identity-popup-securityView-header,
 276 #identity-popup-securityView-body {
 277   margin-inline-start: calc(2em + 24px);
 278   margin-inline-end: 1em;
 279 }
 280
 281 #identity-popup-securityView-header {
 282   margin-top: 0.5em;
 283   border-bottom: 1px solid var(--panel-separator-color);
 284   padding-bottom: 1em;
 285 }
 286
 287 #identity-popup-securityView-body {
 288   padding-inline-end: 1em;
 289 }
 290
 291 #identity-popup-securityView-footer {
 292   margin-top: 1em;
 293   background-color: var(--arrowpanel-dimmed);
 294 }
 295
 296 #identity-popup-securityView-footer > button {
 297 }
 298
 299 #identity-popup-securityView-footer > button:hover,
 300 #identity-popup-securityView-footer > button:focus {
 301 }
 302
 303 #identity-popup-securityView-footer > button:hover:active {
 304 }
 305
 306 #identity-popup-content-verifier ~ description {
 307   margin-top: 1em;
 308   color: #A09090;
 309 }
 310
 311 description#identity-popup-content-verified-by,
 312 description#identity-popup-content-owner,
 313 description#identity-popup-content-verifier,
 314 #identity-popup-securityView-body > button {
 315   margin-top: 1em;
 316 }
 317
 318 #identity-popup-securityView-body > button {
 319   margin-inline-start: 0;
 320   margin-inline-end: 0;
 321 }
 322
 323 /* TRACKING PROTECTION */
 324
 325 #tracking-protection-content {
 326   background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#enabled");
 327 }
 328
 329 #tracking-protection-content[state="loaded-tracking-content"]  {
 330   background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#disabled");
 331 }
 332
 333 #tracking-action-block,
 334 #tracking-action-unblock,
 335 #tracking-action-unblock-private,
 336 #identity-popup-securityView-body > button {
 337   margin: 1em 0 0;
 338 }
 339
 340 #tracking-protection-content[state] > #tracking-not-detected,
 341 #tracking-protection-content:not([state="blocked-tracking-content"]) > #tracking-blocked,
 342 #main-window[privatebrowsingmode] #tracking-action-unblock,
 343 #main-window:not([privatebrowsingmode]) #tracking-action-unblock-private,
 344 #tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock,
 345 #tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock-private,
 346 #tracking-protection-content:not([state="loaded-tracking-content"]) > #tracking-loaded,
 347 #tracking-protection-content:not([state="loaded-tracking-content"]) #tracking-action-block,
 348 #tracking-protection-content:not([state]) > #tracking-actions {
 349   display: none;
 350 }
 351
 352 /* PERMISSIONS */
 353
 354 #identity-popup-permissions-content {
 355   background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
 356 }
 357
 358 #identity-popup-permissions-headline {
 359   /* Make sure the label is as tall as the icon so that the permission list
 360      which is aligned with the icon doesn't cover it up. */
 361   min-height: 24px;
 362 }
 363
 364 #identity-popup-permission-list {
 365   /* Offset the padding set on #identity-popup-permissions-content so that it
 366      shows up just below the section. The permission icons are 16px wide and
 367      should be right aligned with the section icon. */
 368   margin-inline-start: calc(-1em - 16px);
 369 }
 370
 371 .identity-popup-permission-item {
 372   min-height: 24px;
 373 }
 374
 375 #identity-popup-permission-list:not(:empty) {
 376   margin-top: 5px;
 377 }
 378
 379 .identity-popup-permission-icon {
 380   width: 16px;
 381   height: 16px;
 382 }
 383
 384 .identity-popup-permission-icon.in-use {
 385   fill: #FF0000;
 386   animation: 1.5s ease in-use-blink infinite;
 387 }
 388
 389 @keyframes in-use-blink {
 390   50% { opacity: 0; }
 391 }
 392
 393 .identity-popup-permission-label,
 394 .identity-popup-permission-state-label {
 395   /* We need to align the action buttons and permission icons with the text.
 396      This is tricky because the icon height is defined in pixels, while the
 397      font height can vary with platform and system settings, and at least on
 398      Windows the default font metrics reserve more extra space for accents.
 399      This value is a good compromise for different platforms and font sizes. */
 400   margin-top: -0.1em;
 401 }
 402
 403 .identity-popup-permission-label {
 404   margin-inline-start: 1em;
 405 }
 406
 407 .identity-popup-permission-state-label {
 408   margin-inline-end: 5px;
 409   text-align: end;
 410   color: #A09090;
 411 }
 412
 413 .identity-popup-permission-remove-button {
 414   margin: 0;
 415   border-width: 0;
 416   border-radius: 50%;
 417   min-width: 0;
 418   padding: 2px;
 419   background-color: transparent;
 420 }
 421
 422 .identity-popup-permission-remove-button > .button-box {
 423   padding: 0;
 424 }
 425
 426 .identity-popup-permission-remove-button > .button-box > .button-icon {
 427   margin: 0;
 428   width: 16px;
 429   height: 16px;
 430   list-style-image: url(chrome://browser/skin/panel-icons.svg#cancel);
 431   filter: url(chrome://global/skin/filters.svg#fill);
 432   fill: #A09090;
 433 }
 434
 435 .identity-popup-permission-remove-button > .button-box > .button-text {
 436   display: none;
 437 }
 438
 439 .identity-popup-permission-remove-button:not(:-moz-focusring):hover {
 440   background-color: #FFCF00;
 441 }
 442
 443 .identity-popup-permission-remove-button:not(:-moz-focusring):hover > .button-box > .button-icon {
 444   fill: #000000;
 445 }
 446
 447 .identity-popup-permission-remove-button:not(:-moz-focusring):hover:active {
 448   background-color: #FF9F00;
 449 }
 450
 451 /* === END panel.inc.css === */
 452
 453 .identity-popup-expander:-moz-focusring {
 454   padding: 1px;
 455 }
 456
 457 .identity-popup-expander:-moz-focusring > .button-box {
 458   outline: 1px #008484 dotted;
 459 }