eagleEye eagleEye - 1 month ago 17
CSS Question

Getting current Quill Editor's toolbar background color

I'm implementing a primeNg/quill editor, and as part of the UX design I need to display a container in the screen with the same color background as the editor's toolbar. I'm looking at the snow.css file but can't seem to find it, any quill experts know where I can find this on snow.css or any other dependent css of Quill? Thank you!

enter image description here

Answer

The toolbar background color in the PrimeNG Quill demo is part of the PrimeNG theme and not part of Quill's snow.css.

You can use the developer toolbar in Firefox and Chrome to see the CSS rules:

.ui-widget-header {
    border: 1px solid #d9d9d9;
    color: #1b1d1f;
    background: #f6f7f9 0 0 repeat-x;
    background: -moz-linear-gradient(top, #f6f7f9 0%, #ebedf0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f7f9), color-stop(100%,#ebedf0));
    background: -webkit-linear-gradient(top, #f6f7f9 0%,#ebedf0 100%);
    background: -o-linear-gradient(top, #f6f7f9 0%,#ebedf0 100%);
    background: -ms-linear-gradient(top, #f6f7f9 0%,#ebedf0 100%);
    background: linear-gradient(top, #f6f7f9 0%,#ebedf0 100%);
}
Comments