]> scripts.mit.edu Git - autoinstalls/wordpress.git/blobdiff - wp-includes/css/customize-preview.css
WordPress 4.7-scripts
[autoinstalls/wordpress.git] / wp-includes / css / customize-preview.css
index 75251ea93a7983cb92502ec6fb30e3c9ceb233af..1a5067ff8b8d8403bcc0043f48f30674fc7091a2 100644 (file)
        -webkit-box-shadow: none;
        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;
+       -webkit-box-shadow: none;
+       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: 1em !important;
+       font-size: 18px;
+       z-index: 5;
+       background: #0085ba !important;
+       -webkit-border-radius: 50%;
+       border-radius: 50%;
+       border: 2px solid #fff;
+       -webkit-box-shadow: 0 2px 1px rgba(46,68,83,0.15);
+       box-shadow: 0 2px 1px rgba(46,68,83,0.15);
+       text-align: center;
+       cursor: pointer;
+       -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+       box-sizing: border-box;
+       padding: 3px;
+       -webkit-animation-fill-mode: both;
+       animation-fill-mode: both;
+       -webkit-animation-duration: .4s;
+       animation-duration: .4s;
+       opacity: 0;
+       pointer-events: none;
+       text-shadow: 0 -1px 1px #006799,
+                    1px 0 1px #006799,
+                    0 1px 1px #006799,
+                    -1px 0 1px #006799;
+}
+.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: #008ec2 !important; /* matches primary buttons */
+}
+
+.customize-partial-edit-shortcut button:focus {
+       -webkit-box-shadow: 0 0 0 2px #008ec2;
+       box-shadow: 0 0 0 2px #008ec2;
+}
+
+body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button {
+       -webkit-animation-name: customize-partial-edit-shortcut-bounce-appear;
+       animation-name: customize-partial-edit-shortcut-bounce-appear;
+       pointer-events: auto;
+}
+body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button {
+       -webkit-animation-name: customize-partial-edit-shortcut-bounce-disappear;
+       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;
+}
+
+@-webkit-keyframes customize-partial-edit-shortcut-bounce-appear {
+       from, 20%, 40%, 60%, 80%, to {
+               -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+               animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+       }
+       0% {
+               opacity: 0;
+               -webkit-transform: scale3d(.3, .3, .3);
+               transform: scale3d(.3, .3, .3);
+       }
+       20% {
+               -webkit-transform: scale3d(1.1, 1.1, 1.1);
+               transform: scale3d(1.1, 1.1, 1.1);
+       }
+       40% {
+               -webkit-transform: scale3d(.9, .9, .9);
+               transform: scale3d(.9, .9, .9);
+       }
+       60% {
+               opacity: 1;
+               -webkit-transform: scale3d(1.03, 1.03, 1.03);
+               transform: scale3d(1.03, 1.03, 1.03);
+       }
+       80% {
+               -webkit-transform: scale3d(.97, .97, .97);
+               transform: scale3d(.97, .97, .97);
+       }
+       to {
+               opacity: 1;
+               -webkit-transform: scale3d(1, 1, 1);
+               transform: scale3d(1, 1, 1);
+       }
+}
+
+@keyframes customize-partial-edit-shortcut-bounce-appear {
+       from, 20%, 40%, 60%, 80%, to {
+               -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+               animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+       }
+       0% {
+               opacity: 0;
+               -webkit-transform: scale3d(.3, .3, .3);
+               transform: scale3d(.3, .3, .3);
+       }
+       20% {
+               -webkit-transform: scale3d(1.1, 1.1, 1.1);
+               transform: scale3d(1.1, 1.1, 1.1);
+       }
+       40% {
+               -webkit-transform: scale3d(.9, .9, .9);
+               transform: scale3d(.9, .9, .9);
+       }
+       60% {
+               opacity: 1;
+               -webkit-transform: scale3d(1.03, 1.03, 1.03);
+               transform: scale3d(1.03, 1.03, 1.03);
+       }
+       80% {
+               -webkit-transform: scale3d(.97, .97, .97);
+               transform: scale3d(.97, .97, .97);
+       }
+       to {
+               opacity: 1;
+               -webkit-transform: scale3d(1, 1, 1);
+               transform: scale3d(1, 1, 1);
+       }
+}
+
+@-webkit-keyframes customize-partial-edit-shortcut-bounce-disappear {
+       from, 20%, 40%, 60%, 80%, to {
+               -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+               animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+       }
+       0% {
+               opacity: 1;
+               -webkit-transform: scale3d(1, 1, 1);
+               transform: scale3d(1, 1, 1);
+       }
+       20% {
+               -webkit-transform: scale3d(.97, .97, .97);
+               transform: scale3d(.97, .97, .97);
+       }
+       40% {
+               opacity: 1;
+               -webkit-transform: scale3d(1.03, 1.03, 1.03);
+               transform: scale3d(1.03, 1.03, 1.03);
+       }
+       60% {
+               -webkit-transform: scale3d(.9, .9, .9);
+               transform: scale3d(.9, .9, .9);
+       }
+       80% {
+               -webkit-transform: scale3d(1.1, 1.1, 1.1);
+               transform: scale3d(1.1, 1.1, 1.1);
+       }
+       to {
+               opacity: 0;
+               -webkit-transform: scale3d(.3, .3, .3);
+               transform: scale3d(.3, .3, .3);
+       }
+}
+
+@keyframes customize-partial-edit-shortcut-bounce-disappear {
+       from, 20%, 40%, 60%, 80%, to {
+               -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+               animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+       }
+       0% {
+               opacity: 1;
+               -webkit-transform: scale3d(1, 1, 1);
+               transform: scale3d(1, 1, 1);
+       }
+       20% {
+               -webkit-transform: scale3d(.97, .97, .97);
+               transform: scale3d(.97, .97, .97);
+       }
+       40% {
+               opacity: 1;
+               -webkit-transform: scale3d(1.03, 1.03, 1.03);
+               transform: scale3d(1.03, 1.03, 1.03);
+       }
+       60% {
+               -webkit-transform: scale3d(.9, .9, .9);
+               transform: scale3d(.9, .9, .9);
+       }
+       80% {
+               -webkit-transform: scale3d(1.1, 1.1, 1.1);
+               transform: scale3d(1.1, 1.1, 1.1);
+       }
+       to {
+               opacity: 0;
+               -webkit-transform: scale3d(.3, .3, .3);
+               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) {
+       body.customize-partial-edit-shortcuts-shown .site-title {
+               padding-left: 10px;
+       }
+
+       body.customize-partial-edit-shortcuts-shown .widget-area .widget {
+               padding-left: 10px;
+       }
+
+       .widget .customize-partial-edit-shortcut button,
+       .customize-partial-edit-shortcut button {
+               left: -30px;
+       }
+}