home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress2 / wp-includes / css / customize-preview-rtl.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2017-07-15  |  6.1 KB  |  252 lines
  1. .customize-partial-refreshing {
  2.     opacity: 0.25;
  3.     transition: opacity 0.25s;
  4.     cursor: progress;
  5. }
  6.  
  7. /* Override highlight when refreshing */
  8. .customize-partial-refreshing.widget-customizer-highlighted-widget {
  9.     box-shadow: none;
  10. }
  11.  
  12. /* Make shortcut buttons essentially invisible */
  13. .widget .customize-partial-edit-shortcut,
  14. .customize-partial-edit-shortcut {
  15.     position: absolute;
  16.     float: right;
  17.     width: 1px; /* required to have a size to be focusable in Safari */
  18.     height: 1px;
  19.     padding: 0;
  20.     margin: -1px -1px 0 0;
  21.     border: 0;
  22.     background: transparent;
  23.     color: transparent;
  24.     box-shadow: none;
  25.     outline: none;
  26.     z-index: 5;
  27. }
  28.  
  29. /**
  30.  * Styles for the actual shortcut
  31.  *
  32.  * Note that some properties are overly verbose to prevent theme interference.
  33.  */
  34. .widget .customize-partial-edit-shortcut button,
  35. .customize-partial-edit-shortcut button {
  36.     position: absolute;
  37.     right: -30px;
  38.     top: 2px;
  39.     color: #fff;
  40.     width: 30px;
  41.     height: 30px;
  42.     min-width: 30px;
  43.     min-height: 30px;
  44.     line-height: 1em !important;
  45.     font-size: 18px;
  46.     z-index: 5;
  47.     background: #0085ba !important;
  48.     border-radius: 50%;
  49.     border: 2px solid #fff;
  50.     box-shadow: 0 2px 1px rgba(46,68,83,0.15);
  51.     text-align: center;
  52.     cursor: pointer;
  53.     box-sizing: border-box;
  54.     padding: 3px;
  55.     -webkit-animation-fill-mode: both;
  56.     animation-fill-mode: both;
  57.     -webkit-animation-duration: .4s;
  58.     animation-duration: .4s;
  59.     opacity: 0;
  60.     pointer-events: none;
  61.     text-shadow: 0 -1px 1px #006799,
  62.                  -1px 0 1px #006799,
  63.                  0 1px 1px #006799,
  64.                  1px 0 1px #006799;
  65. }
  66. .wp-custom-header .customize-partial-edit-shortcut button {
  67.     right: 2px
  68. }
  69.  
  70. .customize-partial-edit-shortcut button svg {
  71.     fill: #fff;
  72.     min-width: 20px;
  73.     min-height: 20px;
  74.     width: 20px;
  75.     height: 20px;
  76.     margin: auto;
  77. }
  78.  
  79. .customize-partial-edit-shortcut button:hover {
  80.     background: #008ec2 !important; /* matches primary buttons */
  81. }
  82.  
  83. .customize-partial-edit-shortcut button:focus {
  84.     box-shadow: 0 0 0 2px #008ec2;
  85. }
  86.  
  87. body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button {
  88.     -webkit-animation-name: customize-partial-edit-shortcut-bounce-appear;
  89.     animation-name: customize-partial-edit-shortcut-bounce-appear;
  90.     pointer-events: auto;
  91. }
  92. body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button {
  93.     -webkit-animation-name: customize-partial-edit-shortcut-bounce-disappear;
  94.     animation-name: customize-partial-edit-shortcut-bounce-disappear;
  95.     pointer-events: none;
  96. }
  97.  
  98. .page-sidebar-collapsed .customize-partial-edit-shortcut button,
  99. .customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button {
  100.     visibility: hidden;
  101. }
  102.  
  103. @-webkit-keyframes customize-partial-edit-shortcut-bounce-appear {
  104.     from, 20%, 40%, 60%, 80%, to {
  105.         -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  106.         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  107.     }
  108.     0% {
  109.         opacity: 0;
  110.         -webkit-transform: scale3d(.3, .3, .3);
  111.         transform: scale3d(.3, .3, .3);
  112.     }
  113.     20% {
  114.         -webkit-transform: scale3d(1.1, 1.1, 1.1);
  115.         transform: scale3d(1.1, 1.1, 1.1);
  116.     }
  117.     40% {
  118.         -webkit-transform: scale3d(.9, .9, .9);
  119.         transform: scale3d(.9, .9, .9);
  120.     }
  121.     60% {
  122.         opacity: 1;
  123.         -webkit-transform: scale3d(1.03, 1.03, 1.03);
  124.         transform: scale3d(1.03, 1.03, 1.03);
  125.     }
  126.     80% {
  127.         -webkit-transform: scale3d(.97, .97, .97);
  128.         transform: scale3d(.97, .97, .97);
  129.     }
  130.     to {
  131.         opacity: 1;
  132.         -webkit-transform: scale3d(1, 1, 1);
  133.         transform: scale3d(1, 1, 1);
  134.     }
  135. }
  136.  
  137. @keyframes customize-partial-edit-shortcut-bounce-appear {
  138.     from, 20%, 40%, 60%, 80%, to {
  139.         -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  140.         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  141.     }
  142.     0% {
  143.         opacity: 0;
  144.         -webkit-transform: scale3d(.3, .3, .3);
  145.         transform: scale3d(.3, .3, .3);
  146.     }
  147.     20% {
  148.         -webkit-transform: scale3d(1.1, 1.1, 1.1);
  149.         transform: scale3d(1.1, 1.1, 1.1);
  150.     }
  151.     40% {
  152.         -webkit-transform: scale3d(.9, .9, .9);
  153.         transform: scale3d(.9, .9, .9);
  154.     }
  155.     60% {
  156.         opacity: 1;
  157.         -webkit-transform: scale3d(1.03, 1.03, 1.03);
  158.         transform: scale3d(1.03, 1.03, 1.03);
  159.     }
  160.     80% {
  161.         -webkit-transform: scale3d(.97, .97, .97);
  162.         transform: scale3d(.97, .97, .97);
  163.     }
  164.     to {
  165.         opacity: 1;
  166.         -webkit-transform: scale3d(1, 1, 1);
  167.         transform: scale3d(1, 1, 1);
  168.     }
  169. }
  170.  
  171. @-webkit-keyframes customize-partial-edit-shortcut-bounce-disappear {
  172.     from, 20%, 40%, 60%, 80%, to {
  173.         -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  174.         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  175.     }
  176.     0% {
  177.         opacity: 1;
  178.         -webkit-transform: scale3d(1, 1, 1);
  179.         transform: scale3d(1, 1, 1);
  180.     }
  181.     20% {
  182.         -webkit-transform: scale3d(.97, .97, .97);
  183.         transform: scale3d(.97, .97, .97);
  184.     }
  185.     40% {
  186.         opacity: 1;
  187.         -webkit-transform: scale3d(1.03, 1.03, 1.03);
  188.         transform: scale3d(1.03, 1.03, 1.03);
  189.     }
  190.     60% {
  191.         -webkit-transform: scale3d(.9, .9, .9);
  192.         transform: scale3d(.9, .9, .9);
  193.     }
  194.     80% {
  195.         -webkit-transform: scale3d(1.1, 1.1, 1.1);
  196.         transform: scale3d(1.1, 1.1, 1.1);
  197.     }
  198.     to {
  199.         opacity: 0;
  200.         -webkit-transform: scale3d(.3, .3, .3);
  201.         transform: scale3d(.3, .3, .3);
  202.     }
  203. }
  204.  
  205. @keyframes customize-partial-edit-shortcut-bounce-disappear {
  206.     from, 20%, 40%, 60%, 80%, to {
  207.         -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  208.         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  209.     }
  210.     0% {
  211.         opacity: 1;
  212.         -webkit-transform: scale3d(1, 1, 1);
  213.         transform: scale3d(1, 1, 1);
  214.     }
  215.     20% {
  216.         -webkit-transform: scale3d(.97, .97, .97);
  217.         transform: scale3d(.97, .97, .97);
  218.     }
  219.     40% {
  220.         opacity: 1;
  221.         -webkit-transform: scale3d(1.03, 1.03, 1.03);
  222.         transform: scale3d(1.03, 1.03, 1.03);
  223.     }
  224.     60% {
  225.         -webkit-transform: scale3d(.9, .9, .9);
  226.         transform: scale3d(.9, .9, .9);
  227.     }
  228.     80% {
  229.         -webkit-transform: scale3d(1.1, 1.1, 1.1);
  230.         transform: scale3d(1.1, 1.1, 1.1);
  231.     }
  232.     to {
  233.         opacity: 0;
  234.         -webkit-transform: scale3d(.3, .3, .3);
  235.         transform: scale3d(.3, .3, .3);
  236.     }
  237. }
  238.  
  239. @media screen and (max-width:800px) {
  240.     .widget .customize-partial-edit-shortcut button,
  241.     .customize-partial-edit-shortcut button {
  242.         right: -32px;
  243.     }
  244. }
  245.  
  246. @media screen and (max-width:320px) {
  247.     .widget .customize-partial-edit-shortcut button,
  248.     .customize-partial-edit-shortcut button {
  249.         right: -30px;
  250.     }
  251. }
  252.