Fix a few miscellaneous colors and alignment shifts missed in previous updates. Apply the new admin link and button colors on missed cases in the customizer, classic widgets, skip links, help and screen options, and admin nav menus. Props joedolson, fabiankaegy. Fixes #64652. Built from https://develop.svn.wordpress.org/trunk@61682 git-svn-id: http://core.svn.wordpress.org/trunk@60990 1a063a9b-81f0-0310-95a4-ce76da25c4cd
167 lines
3.5 KiB
CSS
167 lines
3.5 KiB
CSS
.customize-partial-refreshing {
|
|
opacity: 0.25;
|
|
transition: opacity 0.25s;
|
|
cursor: progress;
|
|
}
|
|
|
|
/* Override highlight when refreshing */
|
|
.customize-partial-refreshing.widget-customizer-highlighted-widget {
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Make shortcut buttons essentially invisible */
|
|
.widget .customize-partial-edit-shortcut,
|
|
.customize-partial-edit-shortcut {
|
|
position: absolute;
|
|
float: left;
|
|
width: 1px; /* required to have a size to be focusable in Safari */
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px 0 0 -1px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: transparent;
|
|
box-shadow: none;
|
|
outline: none;
|
|
z-index: 5;
|
|
}
|
|
|
|
/**
|
|
* Styles for the actual shortcut
|
|
*
|
|
* Note that some properties are overly verbose to prevent theme interference.
|
|
*/
|
|
.widget .customize-partial-edit-shortcut button,
|
|
.customize-partial-edit-shortcut button {
|
|
position: absolute;
|
|
left: -30px;
|
|
top: 2px;
|
|
color: #fff;
|
|
width: 30px;
|
|
height: 30px;
|
|
min-width: 30px;
|
|
min-height: 30px;
|
|
line-height: 1 !important;
|
|
font-size: 18px;
|
|
z-index: 5;
|
|
background: #3858e9;
|
|
border-radius: 50%;
|
|
border: 2px solid #fff;
|
|
box-shadow: 0 2px 1px rgba(60, 67, 74, 0.15);
|
|
text-align: center;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
padding: 3px;
|
|
animation-fill-mode: both;
|
|
animation-duration: .4s;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
text-shadow:
|
|
0 -1px 1px #135e96,
|
|
1px 0 1px #135e96,
|
|
0 1px 1px #135e96,
|
|
-1px 0 1px #135e96;
|
|
}
|
|
.wp-custom-header .customize-partial-edit-shortcut button {
|
|
left: 2px
|
|
}
|
|
|
|
.customize-partial-edit-shortcut button svg {
|
|
fill: #fff;
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: auto;
|
|
}
|
|
|
|
.customize-partial-edit-shortcut button:hover {
|
|
background: #2145e6 !important; /* matches primary buttons */
|
|
}
|
|
|
|
.customize-partial-edit-shortcut button:focus {
|
|
box-shadow: 0 0 0 1.5px #3858e9;
|
|
}
|
|
|
|
body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button {
|
|
animation-name: customize-partial-edit-shortcut-bounce-appear;
|
|
pointer-events: auto;
|
|
}
|
|
body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button {
|
|
animation-name: customize-partial-edit-shortcut-bounce-disappear;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.page-sidebar-collapsed .customize-partial-edit-shortcut button,
|
|
.customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button {
|
|
visibility: hidden;
|
|
}
|
|
|
|
@keyframes customize-partial-edit-shortcut-bounce-appear {
|
|
from, 20%, 40%, 60%, 80%, to {
|
|
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
}
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale3d(.3, .3, .3);
|
|
}
|
|
20% {
|
|
transform: scale3d(1.1, 1.1, 1.1);
|
|
}
|
|
40% {
|
|
transform: scale3d(.9, .9, .9);
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: scale3d(1.03, 1.03, 1.03);
|
|
}
|
|
80% {
|
|
transform: scale3d(.97, .97, .97);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes customize-partial-edit-shortcut-bounce-disappear {
|
|
from, 20%, 40%, 60%, 80%, to {
|
|
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
}
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
20% {
|
|
transform: scale3d(.97, .97, .97);
|
|
}
|
|
40% {
|
|
opacity: 1;
|
|
transform: scale3d(1.03, 1.03, 1.03);
|
|
}
|
|
60% {
|
|
transform: scale3d(.9, .9, .9);
|
|
}
|
|
80% {
|
|
transform: scale3d(1.1, 1.1, 1.1);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: scale3d(.3, .3, .3);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
.widget .customize-partial-edit-shortcut button,
|
|
.customize-partial-edit-shortcut button {
|
|
left: -32px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 320px) {
|
|
.widget .customize-partial-edit-shortcut button,
|
|
.customize-partial-edit-shortcut button {
|
|
left: -30px;
|
|
}
|
|
}
|