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