Ugly Redactor II and how to fix it with some CSS

Question

Redactor II uses Trebuchet as font, has ugly paddings, giant font sizes and other things.

This must be fixed...

Answer 1

Here is my eye-friendly code:

/* Redactor|Fonts */
[class^="redactor-"], [id^="redactor-"] {
    font-family: inherit !important;
}

/* Redactor|Toolbar */
ul.redactor-toolbar a {
    padding: 12px 13px !important;
    height: auto !important;
}
div.redactor-dropdown, ul.redactor-dropdown {
    font-size: 13px !important;
}
a.redactor-dropdown-h3 {
    font-size: 18px !important;
}

/* Redactor|Tooltip */
span.re-button-tooltip {
    z-index: 1 !important;
    bottom: -18px !important;
    background: none !important;
    color: #333f4d !important;
    font-size: 10px !important;
}

/* Redactor|WYSIWYG-Editor */
div.redactor-layer {
    padding: 20px !important;
    font-size: 15px !important;
    line-height: 22px !important;
}
div.redactor-layer h3 {
    font-size: 20px !important;
}

/* Redactor|HTML-Editor */
div.redactor-box textarea.open {
    padding: 20px !important;
    border-top: 1px solid #e3e5e8 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    background-color: #333f4d !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 18px !important;
}

Just paste it into the Control Panel CSS plugin.

Answer 2

As already mentioned in this post Redactor doesn't set Trebuchet as the font, your OS does.

If you want Redactor to inherit all the styles from the control panel in Craft, to blend in seamlessly, you can do that with just:

.redactor-layer,
.redactor-layer > * {
  font: inherit !important;
}

Answer 3

I was commiserating with some colleagues about this the other day, so I bundled up a stylesheet into its own angsty little plugin:

https://github.com/AugustMiller/craft-redactor-helvetica

Effectively similar to the Control Panel CSS plugin, except that self-container and not extensible.