[Summary view] [Print] [Text view]

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