WordPress.org

Make WordPress Core

Opened 2 weeks ago

Closed 2 weeks ago

Last modified 2 weeks ago

#41824 closed defect (bug) (invalid)

TinyMCE modal reset styles

Reported by: milana_cap Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: TinyMCE Keywords:
Focuses: ui Cc:

Description

At the beginning of wp-includes/js/tinymce/skins/lightgray/skin.min.css file, there's the reset of all styles:

.mce-container *,
.mce-widget,
.mce-widget *,
.mce-reset {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:top;
    background:transparent;
    text-decoration:none;
    color:#333;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:14px;
    text-shadow:none;
    float:none;
    position:static;
    width:auto;
    height:auto;
    white-space:nowrap;
    cursor:inherit;
    -webkit-tap-highlight-color:transparent;
    line-height:normal;
    font-weight:normal;
    text-align:left;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    direction:ltr;
    max-width:none;
}

This results in <strong> having wrong font weight when used in modal body.

Screenshot:

https://s.nimbus.everhelper.me/attachment/1104683/15eecnapkon8iw4ssn1c/654956-OVcBlh1VmhhcLtGt/screen.jpeg

After overriding font-weight vertical align is not correct:

.mce-container strong,
.mce-widget strong,
.mce-reset strong {
    font-weight: 600 !important;
}


Screenshot:

https://s.nimbus.everhelper.me/attachment/1104682/rxekvybffeoli8zccb0y/654956-fCqfq4OrgaKL3bTY/screen.jpeg

After defining vertical align and adjusting font size (which is the same but for some reason bold text looks smaller) I finally get correct styling:

.mce-container strong,
.mce-widget strong,
.mce-reset strong {
    font-weight: 600 !important;
    vertical-align: bottom;
    font-size: 15px;
}

Screenshot:

https://s.nimbus.everhelper.me/attachment/1104676/vq3oclzgwecc5fwf785r/654956-K69P6CreHaBxrdg5/screen.jpeg

Change History (3)

#1 follow-up: @azaozz
2 weeks ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

Thanks for the bug report. The skin.min.css file is part of TinyMCE. Please report this to them so they can fix the styling for <strong>.

Last edited 2 weeks ago by azaozz (previous) (diff)

#2 in reply to: ↑ 1 ; follow-up: @milana_cap
2 weeks ago

Replying to azaozz:

Thanks for the bug report. The skin.min.css file is part of TinyMCE. Please report this to them so they can fix the styling for <strong>.

Reported.

Thanks @azaozz and sorry for reporting to wrong place.

#3 in reply to: ↑ 2 @azaozz
2 weeks ago

Replying to milana_cap:
No problems :)
I'm sure the TinyMCE developers will see the report here too, but better to have it there.

Note: See TracTickets for help on using tickets.