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 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.5em 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 /* EXPAND BUTTON */
 118
 119 .identity-popup-expander {
 120   margin: 0;
 121   min-width: auto;
 122   width: 38px;
 123   background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow");
 124   background-size: 16px, auto;
 125   background-position: center;
 126   background-repeat: no-repeat;
 127   background-color: transparent;
 128   border-radius: 0 5px 5px 0;
 129 }
 130
 131 .identity-popup-expander:-moz-locale-dir(rtl) {
 132   transform: scaleX(-1);
 133 }
 134
 135 .identity-popup-expander[panel-multiview-anchor] {
 136   transition: background-color 250ms ease-in;
 137   background-color: #008484;
 138   background-image: url("chrome://browser/skin/controlcenter/arrow-subview-back.svg");
 139   color: #000000;
 140 }
 141
 142 .identity-popup-expander > .button-box,
 143 .identity-popup-expander > .button-box:focus {
 144   padding: 4px 0;
 145   border-radius: 0 5px 5px 0;
 146 }
 147
 148 .identity-popup-expander[panel-multiview-anchor] > .button-box,
 149 .identity-popup-expander[panel-multiview-anchor] > .button-box:focus {
 150 }
 151
 152 .identity-popup-expander:hover {
 153   background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active");
 154   background-color: #FFCF00;
 155 }
 156
 157 .identity-popup-expander:hover:active {
 158   background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg#arrow-active");
 159   background-color: #FF9F00;
 160 }
 161
 162 /* CONTENT */
 163
 164 #identity-popup-security-content > description,
 165 #identity-popup-security-descriptions > description,
 166 #identity-popup-securityView-header > description,
 167 #identity-popup-securityView-body > description,
 168 #identity-popup-permissions-content > description,
 169 #tracking-protection-content > label,
 170 .identity-popup-text {
 171   white-space: pre-wrap;
 172   font-size: 110%;
 173   margin: 0;
 174 }
 175
 176 .identity-popup-headline {
 177   margin: 3px 0 4px;
 178   font-size: 150%;
 179 }
 180
 181 .identity-popup-warning-gray {
 182   -moz-padding-start: 24px;
 183   background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%;
 184 }
 185
 186 .identity-popup-warning-yellow {
 187   -moz-padding-start: 24px;
 188   background: url(chrome://browser/skin/controlcenter/warning-yellow.svg) no-repeat 0 50%;
 189 }
 190
 191 .identity-popup-warning-gray:-moz-locale-dir(rtl),
 192 .identity-popup-warning-yellow:-moz-locale-dir(rtl) {
 193   background-position: 100% 50%;
 194 }
 195
 196 /* SECURITY */
 197
 198 #identity-popup-securityView > .identity-popup-text:not(#identity-popup-content-owner) {
 199   margin: 2px 0 4px;
 200 }
 201
 202 .identity-popup-connection-secure {
 203   color: #008484;
 204 }
 205
 206 .identity-popup-connection-not-secure {
 207   color: #9C9CFF;
 208 }
 209
 210 #identity-popup-security-content.chromeUI {
 211   background-image: url(chrome://branding/content/icon48.png);
 212 }
 213
 214 /* SECURITY SUBVIEW */
 215
 216 #identity-popup-securityView {
 217   padding-bottom: 2em;
 218   overflow: hidden;
 219 }
 220
 221 #identity-popup-securityView,
 222 #identity-popup-security-content {
 223   background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg);
 224 }
 225
 226 #identity-popup[connection=chrome] #identity-popup-securityView,
 227 #identity-popup[connection=chrome] #identity-popup-security-content {
 228   background-image: url(chrome://branding/content/icon48.png);
 229 }
 230
 231 #identity-popup[connection^=secure] #identity-popup-securityView,
 232 #identity-popup[connection^=secure] #identity-popup-security-content {
 233   background-image: url(chrome://browser/skin/controlcenter/conn-secure.svg);
 234 }
 235
 236 /* Use [isbroken] to make sure we don't show a lock on an http page. See Bug 1192162. */
 237 #identity-popup[ciphers=weak] #identity-popup-securityView,
 238 #identity-popup[ciphers=weak] #identity-popup-security-content,
 239 #identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-securityView,
 240 #identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-security-content {
 241   background-image: url(chrome://browser/skin/controlcenter/conn-degraded.svg);
 242 }
 243
 244 #identity-popup[connection=secure-cert-user-overridden] #identity-popup-securityView,
 245 #identity-popup[connection=secure-cert-user-overridden] #identity-popup-security-content {
 246   background-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
 247 }
 248
 249 #identity-popup[loginforms=insecure] #identity-popup-securityView,
 250 #identity-popup[loginforms=insecure] #identity-popup-security-content,
 251 #identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-securityView,
 252 #identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-security-content {
 253   background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg);
 254 }
 255
 256 #identity-popup-security-descriptions > description {
 257   margin-top: 6px;
 258   color: #A09090;
 259 }
 260
 261 #identity-popup-securityView-header,
 262 #identity-popup-securityView-body {
 263   -moz-margin-start: calc(2em + 24px);
 264   -moz-margin-end: 1em;
 265 }
 266
 267 #identity-popup-securityView-header {
 268   margin-top: 0.5em;
 269   border-bottom: 1px solid var(--panel-separator-color);
 270   padding-bottom: 1em;
 271 }
 272
 273 #identity-popup-securityView-body {
 274   -moz-padding-end: 1em;
 275 }
 276
 277 #identity-popup-securityView-footer {
 278   margin-top: 1em;
 279   background-color: hsla(210,4%,10%,.07);
 280 }
 281
 282 #identity-popup-securityView-footer > button {
 283 }
 284
 285 #identity-popup-securityView-footer > button:hover,
 286 #identity-popup-securityView-footer > button:focus {
 287 }
 288
 289 #identity-popup-securityView-footer > button:hover:active {
 290 }
 291
 292 #identity-popup-content-verifier ~ description {
 293   margin-top: 1em;
 294   color: #A09090;
 295 }
 296
 297 description#identity-popup-content-verified-by,
 298 description#identity-popup-content-owner,
 299 description#identity-popup-content-verifier,
 300 #identity-popup-securityView-body > button {
 301   margin-top: 1em;
 302 }
 303
 304 #identity-popup-securityView-body > button {
 305   margin-inline-start: 0;
 306   margin-inline-end: 0;
 307 }
 308
 309 /* TRACKING PROTECTION */
 310
 311 #tracking-protection-content {
 312   background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg");
 313 }
 314
 315 #tracking-protection-content[state="loaded-tracking-content"]  {
 316   background-image: url("chrome://browser/skin/controlcenter/tracking-protection-disabled.svg");
 317 }
 318
 319 #tracking-action-block,
 320 #tracking-action-unblock,
 321 #tracking-action-unblock-private,
 322 #identity-popup-securityView-body > button {
 323   margin: 1em 0 0;
 324 }
 325
 326 #tracking-protection-content[state] > #tracking-not-detected,
 327 #tracking-protection-content:not([state="blocked-tracking-content"]) > #tracking-blocked,
 328 #main-window[privatebrowsingmode] #tracking-action-unblock,
 329 #main-window:not([privatebrowsingmode]) #tracking-action-unblock-private,
 330 #tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock,
 331 #tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock-private,
 332 #tracking-protection-content:not([state="loaded-tracking-content"]) > #tracking-loaded,
 333 #tracking-protection-content:not([state="loaded-tracking-content"]) #tracking-action-block,
 334 #tracking-protection-content:not([state]) > #tracking-actions {
 335   display: none;
 336 }
 337
 338 /* PERMISSIONS */
 339
 340 #identity-popup-permissions-content {
 341   background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
 342 }
 343
 344 #identity-popup-permission-list menulist {
 345   min-width: 60px;
 346 }
 347
 348 #identity-popup-permission-list:not(:empty) {
 349   margin-top: 5px;
 350 }
 351
 352 #identity-popup-permission-list:not(:empty) + description {
 353   display: none;
 354 }
 355
 356 .identity-popup-permission-label {
 357   -moz-margin-start: 0;
 358   word-wrap: break-word;
 359 }
 360
 361 /* === END panel.inc.css === */
 362
 363 .identity-popup-expander:-moz-focusring {
 364   padding: 1px;
 365 }
 366
 367 .identity-popup-expander:-moz-focusring > .button-box {
 368   outline: 1px #008484 dotted;
 369 }