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-ev] [when-connection~=secure-ev],
  15 #identity-popup[connection=secure] [when-connection~=secure],
  16 #identity-popup[connection=chrome] [when-connection~=chrome],
  17 #identity-popup[connection=file] [when-connection~=file],
  18 /* Show insecure login forms messages when needed. */
  19 #identity-popup[loginforms=insecure] [when-loginforms=insecure],
  20 /* Show weak cipher messages when needed. */
  21 #identity-popup[ciphers=weak] [when-ciphers~=weak],
  22 /* Show mixed content warnings when needed */
  23 #identity-popup[mixedcontent~=active-loaded] [when-mixedcontent=active-loaded],
  24 #identity-popup[mixedcontent~=passive-loaded]:not([mixedcontent~=active-loaded]) [when-mixedcontent=passive-loaded],
  25 #identity-popup[mixedcontent~=active-blocked]:not([mixedcontent~=passive-loaded]) [when-mixedcontent=active-blocked],
  26 /* Show the right elements when there is mixed passive content loaded and active blocked. */
  27 #identity-popup[mixedcontent~=active-blocked][mixedcontent~=passive-loaded] [when-mixedcontent~=active-blocked][when-mixedcontent~=passive-loaded],
  28 /* Show 'disable MCB' button always when there is mixed active content blocked. */
  29 #identity-popup-securityView-body[mixedcontent~=active-blocked] > button[when-mixedcontent=active-blocked] {
  30   display: inherit;
  31 }
  32
  33 /* Hide redundant messages based on insecure login forms presence. */
  34 #identity-popup[loginforms=secure] [and-when-loginforms=insecure] {
  35   display: none;
  36 }
  37 #identity-popup[loginforms=insecure] [and-when-loginforms=secure] {
  38   display: none;
  39 }
  40
  41 /* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */
  42 #identity-popup-securityView-body:-moz-any([mixedcontent],[ciphers]) > description[when-connection=not-secure],
  43 /* Hide 'passive-loaded (only)' message when there is mixed passive content loaded and active blocked. */
  44 #identity-popup-securityView-body[mixedcontent~=passive-loaded][mixedcontent~=active-blocked] > description[when-mixedcontent=passive-loaded] {
  45   display: none;
  46 }
  47
  48 /* Make sure hidden elements don't accidentally become visible from one of the
  49    above selectors (see Bug 1194258) */
  50 #identity-popup [hidden] {
  51   display: none !important;
  52 }
  53
  54 #identity-popup,
  55 #identity-popup:not([panelopen]) .panel-viewstack[viewtype="main"]:not([transitioning]) #identity-popup-mainView {
  56   /* Tiny hack to ensure the panel shrinks back to its original
  57      size after closing a subview that is bigger than the main view. */
  58   max-height: 0;
  59 }
  60
  61 .panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView menulist,
  62 .panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView button:not([panel-multiview-anchor]) {
  63   -moz-user-focus: ignore;
  64 }
  65
  66 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
  67   padding: 0;
  68 }
  69
  70 .panel-mainview[panelid=identity-popup] {
  71   min-width: 30em;
  72 }
  73
  74 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews {
  75   transform: translateX(100%);
  76   box-shadow: none;
  77 }
  78
  79 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
  80   transform: translateX(-100%);
  81 }
  82
  83 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
  84   background: var(--panel-arrowcontent-background);
  85   border-bottom-right-radius: 3.5px;
  86   padding: 0;
  87 }
  88
  89 #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews:-moz-locale-dir(rtl) {
  90   border-bottom-right-radius: 0;
  91   border-bottom-left-radius: 3.5px;
  92 }
  93
  94 .identity-popup-section:not(:first-child) {
  95   border-top: 1px solid #A09090; /*var(--panel-separator-color);*/
  96 }
  97
  98 #identity-popup-securityView,
  99 #identity-popup-security-content,
 100 #identity-popup-permissions-content,
 101 #tracking-protection-content {
 102   padding: 0.75em 0 1em;
 103   -moz-padding-start: calc(2em + 24px);
 104   -moz-padding-end: 1em;
 105   background-repeat: no-repeat;
 106   background-position: 1em 1em;
 107   background-size: 24px auto;
 108 }
 109
 110 #identity-popup-securityView:-moz-locale-dir(rtl),
 111 #identity-popup-security-content:-moz-locale-dir(rtl),
 112 #identity-popup-permissions-content:-moz-locale-dir(rtl),
 113 #tracking-protection-content:-moz-locale-dir(rtl) {
 114   background-position: calc(100% - 1em) 1em;
 115 }
 116
 117 /* IN-CONTENT-PREF STYLE BUTTONS */
 118 /*
 119 .identity-popup-button {
 120   -moz-appearance: none;
 121   margin: 5px 0;
 122   height: 30px;
 123   color: #333;
 124   line-height: 20px;
 125   border: 1px solid #c1c1c1;
 126   border-radius: 2px;
 127   background-color: #fbfbfb;
 128 }
 129
 130 .identity-popup-button:not([disabled="true"]):hover {
 131   background-color: #ebebeb;
 132 }
 133
 134 .identity-popup-button:not([disabled="true"]):hover:active {
 135   background-color: #dadada;
 136 }
 137
 138 .identity-popup-button[disabled="true"] {
 139   cursor: not-allowed;
 140   opacity: 0.5;
 141 }
 142 */
 143 /* EXPAND BUTTON */
 144
 145 .identity-popup-expander {
 146   margin: 0;
 147   min-width: auto;
 148   width: 38px;
 149   background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow");
 150   background-size: 16px, auto;
 151   background-position: center;
 152   background-repeat: no-repeat;
 153   background-color: transparent;
 154   border-radius: 0 5px 5px 0;
 155 }
 156
 157 .identity-popup-expander:-moz-locale-dir(rtl) {
 158   transform: scaleX(-1);
 159 }
 160
 161 .identity-popup-expander[panel-multiview-anchor] {
 162   transition: background-color 250ms ease-in;
 163   background-color: #008484;
 164   background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
 165 }
 166
 167 @media (min-resolution: 1.1dppx) {
 168   .identity-popup-expander[panel-multiview-anchor] {
 169     background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted@2x.png");
 170   }
 171 }
 172
 173 .identity-popup-expander > .button-box,
 174 .identity-popup-expander > .button-box:focus {
 175   padding: 4px 0;
 176   border-radius: 0 5px 5px 0;
 177 }
 178
 179 .identity-popup-expander[panel-multiview-anchor] > .button-box,
 180 .identity-popup-expander[panel-multiview-anchor] > .button-box:focus {
 181 }
 182
 183 .identity-popup-expander:hover {
 184   background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active");
 185   background-color: #FFCF00;
 186 }
 187
 188 .identity-popup-expander:hover:active {
 189   background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active");
 190   background-color: #FF9F00;
 191 }
 192
 193 /* CONTENT */
 194
 195 .identity-popup-text {
 196   white-space: pre-wrap;
 197   font-size: 110%;
 198   margin: 0;
 199 }
 200
 201 .identity-popup-headline {
 202   margin: 2px 0 4px;
 203   font-size: 150%;
 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   padding-bottom: 2em;
 228   overflow: hidden;
 229 }
 230
 231 #identity-popup-securityView,
 232 #identity-popup-security-content {
 233   background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg);
 234 }
 235
 236 #identity-popup-securityView.verifiedDomain,
 237 #identity-popup-security-content.verifiedDomain {
 238   background-image: url(chrome://browser/skin/controlcenter/conn-secure-dv.svg);
 239 }
 240
 241 #identity-popup-securityView.verifiedIdentity,
 242 #identity-popup-security-content.verifiedIdentity {
 243   background-image: url(chrome://browser/skin/controlcenter/conn-secure-ev.svg);
 244 }
 245
 246 #identity-popup-securityView.mixedActiveContent,
 247 #identity-popup-security-content.mixedActiveContent {
 248   background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg);
 249 }
 250
 251 #identity-popup-securityView-header {
 252   border-bottom: 1px solid #A09090;
 253   padding-bottom: 1em;
 254   margin-bottom: 1em;
 255 }
 256
 257 #identity-popup-content-owner {
 258   font-weight: 700;
 259 }
 260
 261 #identity-popup-content-verifier {
 262   color: #A09090;
 263 }
 264
 265 #identity-popup-content-owner,
 266 #identity-popup-securityView > #identity-popup-securityView-connection.identity-popup-text {
 267   margin-top: 1em;
 268 }
 269
 270 /* TRACKING PROTECTION */
 271
 272 #tracking-protection-content {
 273   background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg");
 274 }
 275
 276 #tracking-protection-content[block-disabled]  {
 277   background-image: url("chrome://browser/skin/controlcenter/tracking-protection-disabled.svg");
 278 }
 279
 280 #tracking-action-block,
 281 #tracking-action-unblock {
 282   margin: 1em 0 0;
 283 }
 284
 285 #tracking-protection-content[block-active] > #tracking-not-detected,
 286 #tracking-protection-content[block-disabled] > #tracking-not-detected,
 287 #tracking-protection-content:not([block-active]) > #tracking-blocked,
 288 #tracking-protection-content:not([block-active]) #tracking-action-unblock,
 289 #tracking-protection-content:not([block-disabled]) > #tracking-loaded,
 290 #tracking-protection-content:not([block-disabled]) #tracking-action-block,
 291 #tracking-protection-content:not([block-active]):not([block-disabled]) > #tracking-actions {
 292   display: none;
 293 }
 294
 295 /* PERMISSIONS */
 296
 297 #identity-popup-permissions-content {
 298   background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
 299 }
 300
 301 #identity-popup-permission-list {
 302   margin-top: 5px;
 303 }
 304
 305 .identity-popup-permission-label {
 306   -moz-margin-start: 0;
 307 }
 308
 309 /* FOOTER BUTTONS */
 310
 311 #identity-popup-button-container {
 312   background: #000000;
 313   border-top: 1px solid #A09090;
 314 }
 315
 316 #identity-popup-more-info-button {
 317   margin-top: 5px;
 318 }
 319 /*
 320 #identity-popup-more-info-button:hover {
 321 }
 322
 323 #identity-popup-more-info-button:hover:active {
 324 }
 325 */
 326
 327 /* === END panel.inc.css === */
 328
 329 /* Popup Icons */
 330 #identity-popup-icon {
 331   height: 64px;
 332   width: 64px;
 333   padding: 0;
 334   list-style-image: url("chrome://browser/skin/identity.png");
 335   -moz-image-region: rect(0px, 64px, 64px, 0px);
 336 }
 337
 338 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
 339   -moz-image-region: rect(64px, 64px, 128px, 0px);
 340 }
 341
 342 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
 343   -moz-image-region: rect(128px, 64px, 192px, 0px);
 344 }
 345
 346 /* Popup Body Text */
 347 .identity-popup-description {
 348   white-space: pre-wrap;
 349   -moz-padding-start: 15px;
 350   margin: 2px 0 4px;
 351 }
 352
 353 .identity-popup-label {
 354   white-space: pre-wrap;
 355   -moz-padding-start: 15px;
 356   margin: 0;
 357 }
 358
 359 #identity-popup-content-host,
 360 #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
 361   font-size: 1.2em;
 362 }
 363
 364 #identity-popup-content-host {
 365   margin-top: 3px;
 366   margin-bottom: 5px;
 367   font-weight: bold;
 368   max-width: 300px;
 369 }
 370
 371 #identity-popup-content-owner {
 372   margin-top: 4px;
 373   margin-bottom: 0 !important;
 374   font-weight: bold;
 375   max-width: 300px;
 376 }
 377
 378 .verifiedDomain > #identity-popup-content-owner {
 379   font-weight: normal;
 380 }
 381
 382 #identity-popup-content-verifier {
 383   margin: 4px 0 2px;
 384 }
 385
 386 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
 387 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
 388   margin-top: 10px;
 389   -moz-margin-start: -24px;
 390 }
 391
 392 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
 393 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
 394   list-style-image: url("chrome://browser/skin/Secure24.png");
 395 }
 396
 397 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
 398   padding: 0;
 399 }
 400
 401 #identity-popup-container {
 402   min-width: 280px;
 403   padding: 10px;
 404 }