body { overflow: hidden; } #customize-controls { width: 300px; height: 100%; padding: 0; margin: 0; z-index: 10; position: relative; overflow: auto; background: #f5f5f5; box-shadow: inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ); border-right: 1px solid rgba( 0, 0, 0, 0.2 ); } .customize-section { border-top: 1px solid #fff; border-bottom: 1px solid #dfdfdf; margin: 0; } .customize-section:last-child { box-shadow: 0 1px 0 0px #fff; } .customize-section-title { margin: 0; padding: 15px 20px; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .customize-section-content { display: none; padding: 0 20px 15px; } .customize-section.open .customize-section-content { display: block; } .customize-section-title:after { content: ''; width: 0; height: 0; border-color: #ccc transparent transparent transparent; border-style: solid; border-width: 6px; position: absolute; top: 20px; right: 20px; z-index: 1; } .customize-section.open .customize-section-title:after { top: 13px; border-color: transparent transparent #ccc transparent; } #customize-controls .theme-name { font-size: 16px; font-weight: bold; line-height: 24px; display: block; } #customize-controls .theme-screenshot { width: 258px; border: 1px solid #ccc; } #customize-controls .submit { text-align: center; } #customize-info { padding-top: 55px; } #customize-theme-controls { padding-bottom: 60px; } #customize-theme-controls ul { margin: 0; } #customize-footer { border-bottom: 0; border-top: 1px solid #dfdfdf; position: fixed; bottom: 0; left: 0; width: 260px; padding: 15px 20px; margin: 0; z-index: 10; background: #f5f5f5; box-shadow: inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ), inset 0 1px 0 0px #fff, 0 0 11px 0 rgba( 0, 0, 0, 0.1 ); } #customize-preview { position: fixed; left: 300px; right: 0; top: 0; bottom: 0; } #customize-preview iframe { width: 100%; height: 100%; } .customize-loader { background: transparent; border: 4px solid #666; border-radius: 50%; display: block; margin: 10px auto; text-indent: -9999px; height: 12px; width: 12px; /* Animation */ -webkit-animation: customize-loader 1s infinite ease-out; -moz-animation: customize-loader 1s infinite ease-out; animation: customize-loader 1s infinite ease-out; } @-moz-keyframes customize-loader { 0% { opacity: 0; -moz-transform: scale(0.7); } 40% { opacity: 1; } 100% { opacity: 0; -moz-transform: scale(1); } } @-webkit-keyframes customize-loader { 0% { opacity: 0; -webkit-transform: scale(0.7); } 40% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale(1); } } @keyframes customize-loader { 0% { opacity: 0; transform: scale(0.7); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } } /* * Style for custom settings */ .customize-section select { max-width: 150px; } .customize-section .hex-prepend { float: left; display: block; margin: 1px -2px 0 0; line-height: 15px; padding: 3px 5px; color: #777; text-align: center; background-color: #fff; border: 1px solid #dfdfdf; -webkit-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .customize-section input[type="text"].hex-input { -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; width: 150px; } .customize-section .hex-color-example { border: 1px solid #dfdfdf; -webkit-border-radius: 3px; border-radius: 3px; padding: 3px 14px; background-color: #ef45da }