[wp-trac] [WordPress Trac] #41824: TinyMCE modal reset styles

[WordPress Trac]

#41824: TinyMCE modal reset styles
--------------------------+-----------------------------
 Reporter:  milana_cap    |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  TinyMCE       |    Version:
 Severity:  normal        |   Keywords:
  Focuses:  ui            |
--------------------------+-----------------------------
 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:

 [[Image(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:

 [[Image(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:

 [[Image(https://s.nimbus.everhelper.me/attachment/1104676/vq3oclzgwecc5fwf785r/654956-K69P6CreHaBxrdg5/screen.jpeg)]]

--
Ticket URL: <https://core.trac.wordpress.org/ticket/41824>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform