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