diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-17 07:56:49 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-17 07:56:49 +0000 |
commit | a415c29efee45520ae252d2aa28f1083a521cd7b (patch) | |
tree | f4ade4b6668ecc0765de7e1424f7c1427ad433ff /wp-includes/css/customize-preview.css | |
parent | Initial commit. (diff) | |
download | wordpress-a415c29efee45520ae252d2aa28f1083a521cd7b.tar.xz wordpress-a415c29efee45520ae252d2aa28f1083a521cd7b.zip |
Adding upstream version 6.4.3+dfsg1.upstream/6.4.3+dfsg1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'wp-includes/css/customize-preview.css')
-rw-r--r-- | wp-includes/css/customize-preview.css | 166 |
1 files changed, 166 insertions, 0 deletions
diff --git a/wp-includes/css/customize-preview.css b/wp-includes/css/customize-preview.css new file mode 100644 index 0000000..6bdf302 --- /dev/null +++ b/wp-includes/css/customize-preview.css @@ -0,0 +1,166 @@ +.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: #3582c4 !important; + 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: #4f94d4 !important; /* matches primary buttons */ +} + +.customize-partial-edit-shortcut button:focus { + box-shadow: 0 0 0 2px #4f94d4; +} + +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; + } +} |