Update TinyMCE and jQuery UI button styles

Part props liljimmi.
Fixes #35571.



git-svn-id: https://develop.svn.wordpress.org/trunk@37076 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Ella Iseulde Van Dorpe 2016-03-24 00:56:14 +00:00
parent 0058968499
commit e6b5f3316f
3 changed files with 74 additions and 76 deletions

View File

@ -162,11 +162,11 @@ TABLE OF CONTENTS:
.wp-core-ui .button-secondary:active { .wp-core-ui .button-secondary:active {
background: #eee; background: #eee;
border-color: #999; border-color: #999;
-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
-webkit-transform: translateY(1px); -webkit-transform: translateY(1px);
-ms-transform: translateY(1px); -ms-transform: translateY(1px);
transform: translateY(1px); transform: translateY(1px);
} }
.wp-core-ui .button.active:focus { .wp-core-ui .button.active:focus {
@ -224,8 +224,8 @@ TABLE OF CONTENTS:
background: #0085ba; background: #0085ba;
border-color: #0073aa #006799 #006799; border-color: #0073aa #006799 #006799;
-webkit-box-shadow: 0 1px 0 #006799; -webkit-box-shadow: 0 1px 0 #006799;
box-shadow: 0 1px 0 #006799; box-shadow: 0 1px 0 #006799;
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
text-shadow: 0 -1px 1px #006799, text-shadow: 0 -1px 1px #006799,
1px 0 1px #006799, 1px 0 1px #006799,
@ -256,9 +256,9 @@ TABLE OF CONTENTS:
.wp-core-ui .button-primary:active { .wp-core-ui .button-primary:active {
background: #0073aa; background: #0073aa;
border-color: #006799; border-color: #006799;
-webkit-box-shadow: inset 0 2px 0 #006799; -webkit-box-shadow: inset 0 2px 0 #006799;
box-shadow: inset 0 2px 0 #006799; box-shadow: inset 0 2px 0 #006799;
vertical-align: top; vertical-align: top;
} }
.wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary[disabled],

View File

@ -657,103 +657,100 @@ div.mce-menu .mce-menu-item-sep,
margin: 0; margin: 0;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
border: 1px solid #ccc; border: 1px solid #cccccc;
-webkit-appearance: none; -webkit-appearance: none;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
white-space: nowrap; white-space: nowrap;
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 ); -webkit-box-shadow: 0 1px 0 #cccccc;
box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 ); box-shadow: 0 1px 0 #cccccc;
} }
/* Remove the dotted border on :focus and the extra padding in Firefox */ /* Remove the dotted border on :focus and the extra padding in Firefox */
.mce-window .mce-btn::-moz-focus-inner { .mce-window .mce-btn::-moz-focus-inner {
border-width: 1px 0; border-width: 0;
border-style: solid none; border-style: none;
border-color: transparent;
padding: 0; padding: 0;
} }
.mce-window .mce-btn:hover, .mce-window .mce-btn:hover,
.mce-window .mce-btn:focus { .mce-window .mce-btn:focus {
background: #fafafa; background: #fafafa;
border-color: #555d66; border-color: #999;
color: #23282d; color: #23282d;
} }
.mce-window .mce-btn:focus { .mce-window .mce-btn:focus {
-webkit-box-shadow: border-color: #5b9dd9;
0 0 0 1px #5b9dd9, -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
0 0 2px 1px rgba( 30, 140, 190, 0.8 ); box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba( 30, 140, 190, 0.8 );
} }
.mce-window .mce-btn:active { .mce-window .mce-btn:active {
background: #eee; background: #eee;
border-color: #555d66; border-color: #999;
color: #23282d;
-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
-webkit-transform: translateY(1px);
-ms-transform: translateY(1px);
transform: translateY(1px);
} }
.mce-window .mce-btn.mce-disabled { .mce-window .mce-btn.mce-disabled {
color: #a0a5aa; color: #a0a5aa !important;
border-color: #ddd; border-color: #ddd !important;
background: #f7f7f7; background: #f7f7f7 !important;
-webkit-box-shadow: none; -webkit-box-shadow: none !important;
box-shadow: none; box-shadow: none !important;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff !important;
cursor: default; cursor: default;
-webkit-transform: none !important;
-ms-transform: none !important;
transform: none !important;
} }
.mce-window .mce-btn.mce-primary { .mce-window .mce-btn.mce-primary {
background: #00a0d2; background: #0085ba;
border-color: #0073aa; border-color: #0073aa #006799 #006799;
-webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 ); -webkit-box-shadow: 0 1px 0 #006799;
box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 ); box-shadow: 0 1px 0 #006799;
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
text-shadow: 0 -1px 1px #006799,
1px 0 1px #006799,
0 1px 1px #006799,
-1px 0 1px #006799;
} }
.mce-window .mce-btn.mce-primary:hover, .mce-window .mce-btn.mce-primary:hover,
.mce-window .mce-btn.mce-primary:focus { .mce-window .mce-btn.mce-primary:focus {
background: #1e8cbe; background: #008ec2;
border-color: #0073aa; border-color: #006799;
-webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
color: #fff; color: #fff;
} }
.mce-window .mce-btn.mce-primary:focus { .mce-window .mce-btn.mce-primary:focus {
border-color: #0e3950; -webkit-box-shadow: 0 1px 0 #0073aa,
-webkit-box-shadow: 0 0 2px 1px #33b3db;
inset 0 1px 0 rgba( 120, 200, 230, 0.6 ), box-shadow: 0 1px 0 #0073aa,
0 0 0 1px #5b9dd9, 0 0 2px 1px #33b3db;
0 0 2px 1px rgba( 30, 140, 190, 0.8 );
box-shadow:
inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba( 30, 140, 190, 0.8 );
} }
.mce-window .mce-btn.mce-primary:active { .mce-window .mce-btn.mce-primary:active {
background: #1b7aa6; background: #0073aa;
border-color: #005684; border-color: #006799;
color: rgba( 255, 255, 255, 0.95 ); -webkit-box-shadow: inset 0 2px 0 #006799;
-webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 ); box-shadow: inset 0 2px 0 #006799;
box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
vertical-align: top; vertical-align: top;
} }
.mce-window .mce-btn.mce-primary.mce-disabled { .mce-window .mce-btn.mce-primary.mce-disabled {
color: #94cde7; color: #66c6e4 !important;
background: #298cba; background: #008ec2 !important;
border-color: #1b607f; border-color: #007cb2 !important;
-webkit-box-shadow: none; -webkit-box-shadow: none !important;
box-shadow: none; box-shadow: none !important;
text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ); text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important;
cursor: default; cursor: default;
} }

View File

@ -200,9 +200,9 @@
color: #555; color: #555;
border-color: #cccccc; border-color: #cccccc;
background: #f7f7f7; background: #f7f7f7;
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 ); -webkit-box-shadow: 0 1px 0 #cccccc;
box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 ); box-shadow: 0 1px 0 #cccccc;
vertical-align: top; vertical-align: top;
} }
.ui-button:active, .ui-button:active,
@ -212,9 +212,8 @@
/* Remove the dotted border on :focus and the extra padding in Firefox */ /* Remove the dotted border on :focus and the extra padding in Firefox */
.ui-button::-moz-focus-inner { .ui-button::-moz-focus-inner {
border-width: 1px 0; border-width: 0;
border-style: solid none; border-style: none;
border-color: transparent;
padding: 0; padding: 0;
} }
@ -226,20 +225,19 @@
} }
.ui-button:focus { .ui-button:focus {
-webkit-box-shadow: border-color: #5b9dd9;
0 0 0 1px #5b9dd9, -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
0 0 2px 1px rgba( 30, 140, 190, 0.8 ); box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba( 30, 140, 190, 0.8 );
} }
.ui-button:active { .ui-button:active {
background: #eee; background: #eee;
border-color: #999; border-color: #999;
color: #32373c;
-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
-webkit-transform: translateY(1px);
-ms-transform: translateY(1px);
transform: translateY(1px);
} }
.ui-button[disabled], .ui-button[disabled],
@ -251,13 +249,16 @@
box-shadow: none !important; box-shadow: none !important;
text-shadow: 0 1px 0 #fff !important; text-shadow: 0 1px 0 #fff !important;
cursor: default; cursor: default;
-webkit-transform: none !important;
-ms-transform: none !important;
transform: none !important;
} }
@media screen and ( max-width: 782px ) { @media screen and ( max-width: 782px ) {
.ui-button { .ui-button {
padding: 10px 14px; padding: 6px 14px;
line-height: 1; line-height: normal;
font-size: 14px; font-size: 14px;
vertical-align: middle; vertical-align: middle;
height: auto; height: auto;
@ -280,7 +281,7 @@
.ui-dialog-titlebar { .ui-dialog-titlebar {
background: #fcfcfc; background: #fcfcfc;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #dfdfdf;
height: 36px; height: 36px;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
@ -332,7 +333,7 @@
.ui-dialog-buttonpane { .ui-dialog-buttonpane {
background: #fcfcfc; background: #fcfcfc;
border-top: 1px solid #ddd; border-top: 1px solid #dfdfdf;
padding: 16px; padding: 16px;
} }