[Summary view] [Print] [Text view]

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