[Summary view] [Print] [Text view]

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