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