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