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