[Summary view] [Print] [Text view]

   1  /* This file was automatically generated on Oct 23 2025 00:26:05 */
   2  
   3  body {
   4      --akismet-color-charcoal: #272635;
   5      --akismet-color-light-grey: #f6f7f7;
   6      --akismet-color-mid-grey: #a7aaad;
   7      --akismet-color-dark-grey: #646970;
   8      --akismet-color-grey-80: #2c3338;
   9      --akismet-color-grey-100: #101517;
  10      --akismet-color-grey-border: #dcdcde;
  11      --akismet-color-white: #fff;
  12      --akismet-color-dark-green: #2d6a40;
  13      --akismet-color-mid-green: #357b49;
  14      --akismet-color-light-green: #4eb26a;
  15      --akismet-color-mid-red: #e82c3f;
  16      --akismet-color-light-blue: #256eff;
  17      --akismet-color-notice-light-green: #dbf0e1;
  18      --akismet-color-notice-dark-green: #69bf82;
  19      --akismet-color-notice-light-red: #ffdbde;
  20      --akismet-color-notice-dark-red: #ff6676;
  21      --akismet-color-notice-yellow: #e5c133;
  22  }
  23  
  24  /* UI components */
  25  .akismet-new-feature {
  26      background-color: var(--akismet-color-mid-green);
  27      border-radius: 4px;
  28      color: var(--akismet-color-white);
  29      font-size: 10px;
  30      padding: 4px 6px;
  31      text-transform: uppercase;
  32      vertical-align: top;
  33  }
  34  
  35  #akismet-plugin-container {
  36      background-color: var(--akismet-color-light-grey);
  37      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
  38      -webkit-font-smoothing: antialiased;
  39  }
  40  
  41  #akismet-plugin-container a {
  42      color: var(--akismet-color-mid-green);
  43  }
  44  
  45  #akismet-plugin-container a.akismet-button {
  46      background-color: var(--akismet-color-mid-green);
  47      color: var(--akismet-color-white);
  48  }
  49  
  50  #akismet-plugin-container button:focus-visible,
  51  #akismet-plugin-container input:focus-visible,
  52  #akismet-plugin-container a:focus-visible {
  53      border: 0;
  54      box-shadow: none;
  55      outline: 2px solid var(--akismet-color-light-blue);
  56  }
  57  
  58  .akismet-masthead {
  59      box-shadow: none;
  60  }
  61  
  62  .akismet-masthead__logo {
  63      margin: 20px 0;
  64  }
  65  
  66  .akismet-section-header {
  67      box-shadow: none;
  68      margin-bottom: 0;
  69  }
  70  
  71  .akismet-section-header__label {
  72      color: var(--akismet-color-charcoal);
  73      font-weight: 600;
  74      padding-right: 0.2em;
  75  }
  76  
  77  .akismet-button, 
  78  .akismet-button:hover {
  79      border: 0;
  80      color: var(--akismet-color-white);
  81  }
  82  
  83  .akismet-button {
  84      background-color: var(--akismet-color-mid-green);
  85  }
  86  
  87  .akismet-button:hover {
  88      background-color: var(--akismet-color-dark-green);
  89  }
  90  
  91  .akismet-external-link::after {
  92      content: "↗";
  93      display: inline-block;
  94      padding-right: 2px;
  95      text-decoration: none;
  96      vertical-align: text-top;
  97  }
  98  
  99  /* Need this specificity to override the existing header rule */
 100  .akismet-new-snapshot h3.akismet-new-snapshot__header {
 101      background: none;
 102      font-size: 13px;
 103      color: var(--akismet-color-charcoal);
 104      text-align: right;
 105      text-transform: none;
 106  }
 107  
 108  .akismet-new-snapshot__number {
 109      color: var(--akismet-color-charcoal);
 110      display: block;
 111      font-size: 32px;
 112      font-weight: 400;
 113      letter-spacing: -1px;
 114      line-height: 1.5em;
 115      text-align: right;
 116  }
 117  
 118  .akismet-new-snapshot li.akismet-new-snapshot__item {
 119      color: var(--akismet-color-dark-grey);
 120      font-size: 13px;
 121      text-align: right;
 122      text-transform: none;
 123  }
 124  
 125  .akismet-masthead__logo-link {
 126      min-height: 50px;
 127  }
 128  
 129  .akismet-masthead__back-link-container {
 130      margin-top: 16px;
 131      margin-bottom: 2px;
 132  }
 133  
 134  /* Need this specificity to override the existing link rule */
 135  #akismet-plugin-container a.akismet-masthead__back-link {
 136      background-image: url(../img/arrow-left.svg);
 137      background-position: right;
 138      background-repeat: no-repeat;
 139      background-size: 16px;
 140      color: var(--akismet-color-charcoal);
 141      font-weight: 400;
 142      padding-right: 20px;
 143      text-decoration: none;
 144  }
 145  
 146  #akismet-plugin-container a.akismet-masthead__back-link:hover {
 147      text-decoration: underline;
 148  }
 149  
 150  .akismet-new-snapshot__item {
 151      border-top: 1px solid var(--akismet-color-light-grey);
 152      border-right: 1px solid var(--akismet-color-light-grey);
 153      padding: 1em;
 154  }
 155  
 156  .akismet-new-snapshot li:first-child {
 157      border-right: none;
 158  }
 159  
 160  .akismet-new-snapshot__list {
 161      display: flex;
 162      margin-bottom: 0;
 163  }
 164  
 165  .akismet-new-snapshot__item {
 166      flex: 1 0 33.33%;
 167      margin-bottom: 0;
 168      padding-right: 1.5em;
 169      padding-left: 1.5em;
 170  }
 171  
 172  .akismet-new-snapshot__chart {
 173      padding: 1em;
 174  }
 175  
 176  .akismet-box {
 177      border: 0;
 178  }
 179  
 180  .akismet-box:not(:first-child) {
 181      margin-top: 1rem;
 182  }
 183  
 184  .akismet-box,
 185  .akismet-card {
 186      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.16);
 187      border-radius: 8px;
 188      overflow: hidden;
 189  }
 190  
 191  .akismet-card {
 192      margin: 32px auto 0 auto;
 193  }
 194  
 195  .akismet-lower {
 196      padding-top: 0;
 197  }
 198  
 199  .akismet-lower .inside {
 200      padding: 0;
 201  }
 202  
 203  .akismet-section-header__label {
 204      margin: 0;
 205  }
 206  
 207  .akismet-settings__row {
 208      border-bottom: 1px solid var(--akismet-color-light-grey);
 209      display: block;
 210      padding: 1em 1.5em;
 211  }
 212  
 213  .akismet-settings__row-input {
 214      margin-right: auto;
 215  }
 216  
 217  .akismet-settings__row-title {
 218      font-weight: 500;
 219      font-size: 1em;
 220      margin: 0;
 221      margin-bottom: 1em;
 222  }
 223  
 224  .akismet-settings__row-description {
 225      margin-top: 0.5em;
 226  }
 227  
 228  .akismet-card-actions {
 229      display: flex;
 230      justify-content: flex-end;
 231      padding: 1em;
 232  }
 233  
 234  .akismet-card-actions__secondary-action {
 235      align-self: center;
 236      margin-left: auto;
 237  }
 238  
 239  .akismet-settings__row label {
 240      padding-bottom: 1em;
 241  }
 242  
 243  .akismet-settings__row-note {
 244      font-size: 0.9em;
 245      margin-top: 0.4em;
 246  }
 247  
 248  .akismet-settings__row input[type="checkbox"],
 249  .akismet-settings__row input[type="radio"] {
 250      accent-color: var(--akismet-color-mid-green);
 251      box-shadow: none;
 252      flex-shrink: 0;
 253      margin: 2px 0 0 0;
 254  }
 255  
 256  .akismet-settings__row input[type="checkbox"] {
 257      margin-top: 1px;
 258      vertical-align: top;
 259      -webkit-appearance: checkbox;
 260  }
 261  
 262  .akismet-settings__row input[type="radio"] {
 263      -webkit-appearance: radio;
 264  }
 265  
 266  /* Fix up misbehaving wp-admin styles in Chrome (from forms and colors stylesheets) */
 267  .akismet-settings__row input[type="checkbox"]:checked:before {
 268      content: '';
 269  }
 270  
 271  .akismet-settings__row input[type="radio"]:checked:before {
 272      background: none;
 273  }
 274  
 275  .akismet-settings__row input[type="checkbox"]:checked:hover,
 276  .akismet-settings__row input[type="radio"]:checked:hover {
 277      accent-color: var(--akismet-color-mid-green);
 278  }
 279  
 280  .akismet-button:disabled {
 281      background-color: var(--akismet-color-mid-grey);
 282      color: var(--akismet-color-white);
 283      cursor: arrow;
 284  }
 285  
 286  .akismet-awaiting-stats,
 287  .akismet-account {
 288      padding: 0 1rem 1rem 1rem;
 289      margin: 0;
 290  }
 291  
 292  .akismet-account {
 293      padding-bottom: 0;
 294  }
 295  
 296  .akismet-account th {
 297      font-weight: 500;
 298      padding-left: 1em;
 299  }
 300  
 301  .akismet-account th, .akismet-account td {
 302      padding-bottom: 1em;
 303  }
 304  
 305  .akismet-settings__row-input-label {
 306      align-items: center;
 307      display: flex;
 308  }
 309  
 310  .akismet-settings__row-label-text {
 311      padding-right: 0.5em;
 312      margin-top: 2px;
 313  }
 314  
 315  .akismet-alert {
 316      border-right: 8px solid;
 317      border-radius: 8px;
 318      margin: 20px 0;
 319      padding: 0.2em 1em;
 320  }
 321  
 322  .akismet-alert__heading {
 323      font-size: 1em;
 324  }
 325  
 326  .akismet-alert.is-good {
 327      background-color: var(--akismet-color-notice-light-green);
 328      border-right-color: var(--akismet-color-notice-dark-green);
 329  }
 330  
 331  .akismet-alert.is-neutral {
 332      background-color: var(--akismet-color-white);
 333      border-right-color: var(--akismet-color-dark-grey);
 334  }
 335  
 336  .akismet-alert.is-bad {
 337      background-color: var(--akismet-color-notice-light-red);
 338      border-right-color: var(--akismet-color-notice-dark-red);
 339  }
 340  
 341  .akismet-alert.is-commercial {
 342      background-color: var(--akismet-color-white);
 343      border-color: var(--akismet-color-mid-grey);
 344      border-bottom-width: 1px;
 345      border-right-color: var(--akismet-color-notice-yellow);
 346      display: flex;
 347      padding-bottom: 1em;
 348  }
 349  
 350  #akismet-plugin-container .akismet-alert.is-good a,
 351  #akismet-plugin-container .akismet-alert.is-bad a {
 352      /* For better contrast - green isn't great */
 353      color: var(--akismet-color-grey-80);
 354  }
 355  
 356  .akismet-alert-header {
 357      font-size: 16px;
 358      margin-bottom: 0.5em;
 359  }
 360  
 361  .akismet-alert-button-wrapper {
 362      align-self: center;
 363      margin-right: 2em;
 364      min-width: 120px;
 365  }
 366  
 367  .akismet-alert-info {
 368      text-wrap: pretty;
 369      margin: 0.5em 0;
 370  }
 371  
 372  /* Setup */
 373  .akismet-setup-instructions__heading {
 374      font-size: 1.375rem;
 375      font-weight: 700;
 376      padding-block-end: 0;
 377  }
 378  
 379  h3.akismet-setup-instructions__subheading {
 380      color: var(--akismet-color-dark-grey);
 381      font-size: 1rem;
 382      font-weight: 400;
 383      line-height: 1.5;
 384      margin: 0 0 1.25rem;
 385      padding-block-start: 1rem;
 386  }
 387  
 388  .akismet-setup-instructions__feature-list {
 389      list-style: none;
 390      margin: 1rem 0.5rem 1.5rem;
 391      max-width: 640px;
 392      padding: 0 1rem;
 393  }
 394  
 395  .akismet-setup-instructions__feature {
 396      align-items: start;
 397      display: flex;
 398      margin-block-end: 1rem;
 399      text-align: right;
 400  }
 401  
 402  .akismet-setup-instructions__icon {
 403      height: 20px;
 404      width: 20px;
 405  }
 406  
 407  .akismet-setup-instructions__body {
 408      flex: 1;
 409      padding-inline-start: 0.5rem;
 410  }
 411  
 412  .akismet-setup-instructions__title {
 413      color: #1d2327;
 414      font-size: 1rem;
 415      font-weight: 600;
 416      line-height: 1.3;
 417      margin: 0;
 418      text-align: right;
 419  }
 420  
 421  p.akismet-setup-instructions__text {
 422      color: var(--akismet-color-grey-80);
 423      font-size: 0.875rem;
 424      line-height: 1.5;
 425      margin: 0.25rem 0 0;
 426      padding: 0;
 427      text-align: right;
 428  }
 429  
 430  .akismet-setup-instructions__button,
 431  .akismet-setup-instructions__button:hover,
 432  .akismet-setup-instructions__button:visited {
 433      font-size: 1rem;
 434      margin-inline-start: 1.5rem;
 435  }
 436  
 437  .akismet-setup__connection {
 438      background: var(--akismet-color-light-grey);
 439      border: 1px solid var(--akismet-color-grey-border);
 440      border-radius: 8px;
 441      margin: 1rem 1rem 2rem 1rem;
 442      padding: 1rem;
 443  }
 444  
 445  .akismet-setup__connection-action:not(:last-child) {
 446      margin-bottom: 1rem;
 447  }
 448  
 449  .akismet-setup__connection-user {
 450      display: flex;
 451  }
 452  
 453  .akismet-setup__connection-avatar {
 454      align-items: center;
 455      display: flex;
 456      gap: 12px;
 457      margin-bottom: 12px;
 458  }
 459  
 460  .akismet-setup__connection-avatar-image {
 461      border-radius: 50%;
 462  }
 463  
 464  .akismet-setup__connection-account-name {
 465      color: var(--akismet-color-charcoal);
 466      font-size: 0.9rem;
 467      overflow-wrap: anywhere;
 468  }
 469  
 470  .akismet-setup__connection-account-email {
 471      margin-top: 0.1rem;
 472      overflow-wrap: anywhere;
 473  }
 474  
 475  .akismet-setup__connection-action {
 476      margin-right: auto;
 477  }
 478  
 479  .akismet-setup__connection-button {
 480      text-align: center;
 481      width: 100%;
 482  }
 483  
 484  p.akismet-setup__connection-action-intro,
 485  p.akismet-setup__connection-action-description {
 486      color: var(--akismet-color-dark-grey);
 487      font-size: 0.875rem;
 488      padding: 0;
 489  }
 490  
 491  p.akismet-setup__connection-action-intro {
 492      margin: 0 0 1rem 0;
 493  }
 494  
 495  p.akismet-setup__connection-action-description {
 496      margin: 1rem 0 0;
 497  }
 498  
 499  /* Setup - API key input */
 500  .akismet-enter-api-key-box {
 501      margin: 1.5rem 0;
 502  }
 503  
 504  .akismet-enter-api-key-box__reveal {
 505      background: none;
 506      border: 0;
 507      color: var(--akismet-color-mid-green);
 508      cursor: pointer;
 509      text-decoration: underline;
 510  }
 511  
 512  .akismet-enter-api-key-box__form-wrapper {
 513      display: none;
 514      margin-top: 1.5rem;
 515  }
 516  
 517  .akismet-enter-api-key-box__input-wrapper {
 518      box-sizing: border-box;
 519      display: flex;
 520      flex-wrap: nowrap;
 521      padding: 0 1.5rem;
 522      width: 100%;
 523  }
 524  
 525  .akismet-enter-api-key-box__key-input {
 526      flex-grow: 1;
 527      margin-left: 1rem;
 528  }
 529  
 530  h3.akismet-enter-api-key-box__header {
 531      padding-top: 0;
 532      padding-bottom: 1em;
 533      text-align: right;
 534  }
 535  
 536  /* Notices > Activation (shown on edit-comments.php) */
 537  #akismet-setup-prompt {
 538      background: none;
 539      border: none;
 540      margin: 0;
 541      padding: 0;
 542      width: 100%;
 543  }
 544  
 545  .akismet-activate {
 546      align-items: center;
 547      /* background-image is defined via an inline style in class.akismet-admin.php */
 548      background-color: var(--akismet-color-light-grey);
 549      background-position: calc(100% - (100% - 1em)) center;
 550      background-repeat: no-repeat;
 551      background-size: 140px;
 552      border: 1px solid var(--akismet-color-mid-green);
 553      border-right-width: 4px;
 554      display: flex;
 555      justify-content: space-between;
 556      margin: 15px 0;
 557      min-height: 60px;
 558      overflow: hidden;
 559      padding: 5px 5px 5px 160px;
 560      position: relative;
 561  }
 562  
 563  .akismet-activate__button,
 564  .akismet-activate__button:hover,
 565  .akismet-activate__button:visited {
 566      margin: 0 1em;
 567  }
 568  
 569  .akismet-activate__description {
 570      color: var(--akismet-color-charcoal);
 571      flex-grow: 1;
 572      font-size: 16px;
 573      font-weight: 600;
 574      margin: 0 auto;
 575      text-align: center;
 576      text-wrap: pretty;
 577  }
 578  
 579  /* Compatible plugins section */
 580  .akismet-compatible-plugins__content {
 581      padding: 0 1.5em 1.5em 1.5em;
 582  }
 583  
 584  .akismet-compatible-plugins__intro {
 585      margin: 0;
 586  }
 587  
 588  .akismet-compatible-plugins__section-header-label {
 589      display: block;
 590  }
 591  
 592  .akismet-compatible-plugins__section-header-label-text {
 593      padding-left: 0.5em;
 594  }
 595  
 596  .akismet-compatible-plugins__list {
 597      display: grid;
 598      grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
 599      gap: 20px;
 600      margin: 1.5em 0 1em 0;
 601      padding: 0;
 602  }
 603  
 604  .akismet-compatible-plugins__card {
 605      border: 1px solid var(--akismet-color-light-grey);
 606      border-radius: 4px;
 607      flex: 1 1 calc(50% - 5px);
 608      padding: 1em;
 609      display: flex;
 610  }
 611  
 612  .akismet-compatible-plugins__card-logo {
 613      padding: 0 0 0 1.5em;
 614      object-fit: contain;
 615  }
 616  
 617  .akismet-compatible-plugins__card-title {
 618      font-size: 1.2em;
 619      margin-top: 0;
 620  }
 621  
 622  .akismet-compatible-plugins__docs {
 623      margin-top: 1em;
 624  }
 625  
 626  .akismet-compatible-plugins__show-more {
 627      all: unset;
 628      cursor: pointer;
 629      display: flex;
 630      justify-content: space-between;
 631      position: relative;
 632      width: 100%;
 633  }
 634  
 635  /* Generates the show/hide chevron */
 636  .akismet-compatible-plugins__show-more::after {
 637      align-self: center;
 638      border-bottom: 2px solid black;
 639      border-left: 2px solid black;
 640      content: "";
 641      height: 8px;
 642      transform: rotate(-45deg);
 643      transition: transform 0.2s ease;
 644      width: 8px;
 645  }
 646  
 647  .akismet-compatible-plugins__list.is-expanded + .akismet-compatible-plugins__show-more::after {
 648      align-self: end;
 649      transform: rotate(-225deg);
 650  }
 651  
 652  /* Gutenberg medium breakpoint */
 653  @media screen and (max-width: 782px) {
 654      .akismet-new-snapshot__list {
 655          display: block;
 656      }
 657  
 658      .akismet-new-snapshot__number {
 659          float: left;
 660          font-size: 20px;
 661          font-weight: 500;
 662          margin-top: -16px;
 663      }
 664  
 665      .akismet-new-snapshot__header {
 666          font-size: 14px;
 667          font-weight: 500;
 668      }
 669  
 670      .akismet-new-snapshot__text {
 671          font-size: 12px;
 672      }
 673  
 674      .akismet-settings__row input[type="checkbox"],
 675      .akismet-settings__row input[type="radio"] {
 676          height: 24px;
 677          width: 24px;
 678      }
 679  
 680      .akismet-settings__row-label-text {
 681          padding-right: 0.8em;
 682      }
 683  
 684      .akismet-settings__row input[type="checkbox"],
 685      .akismet-settings__row input[type="radio"] {
 686          margin-top: 0;
 687      }
 688  
 689      .akismet-activate {
 690          background-size: 120px;
 691          padding-left: 134px;
 692      }
 693  
 694      .akismet-activate__button {
 695          white-space: normal;
 696      }
 697  
 698      .akismet-activate__description {
 699          font-size: 14px;
 700          margin-left: 1em;
 701      }
 702  }
 703  
 704  /* Gutenberg small breakpoint */
 705  @media screen and (max-width: 600px) {
 706      .akismet-compatible-plugins__list {
 707          gap: 10px;
 708      }
 709  
 710      .akismet-activate__button,
 711      .akismet-activate__button:hover {
 712          font-size: 13px;
 713      }
 714  
 715      .akismet-activate__description {
 716          display: none;
 717      }
 718  }