/* Gallery buttons design */ #controls .button.view-switcher { padding: 6px 11px; margin-left: auto; } #controls .button.view-switcher:not(.gallery) { margin-top: 5px; margin-right: 5px; } #controls .button.view-switcher.gallery { display: none; } .icon-toggle-pictures.hidden { opacity: 0 !important; } #controls .button.sorting { padding: 8px 7px; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; } #controls .button.left-switch-button, #controls .button.left-switch-button:hover { display: inline; border-radius: 3px 0 0 3px; margin-right: 0; } #controls .button.right-switch-button { display: inline; border-radius: 0 3px 3px 0; margin-left: -1px; } #shared-button img, .button.left-switch-button img, .button.right-switch-button img { vertical-align: -3px; opacity: 0.6; } #controls .disabled-button { pointer-events: none; background-color: rgba(230, 230, 230, .9); border: 1px solid rgba(230, 230, 230, .9); } #controls .disabled-button img { opacity: 0.25; } #controls .disabled-button:hover, #controls .disabled-button:focus, #controls .disabled-button a:focus, #controls .disabled-button.loading { background-color: rgba(255, 255, 255, .9); color: #111; border: 1px solid rgba(240, 240, 240, .9); } /* Original Flip CSS by David Walsh http://davidwalsh.name/css-flip*/ /* Wrapping both sort images */ #controls .button.sorting .flipper { -webkit-transform: perspective(1000px); -moz-transform: perspective(1000px); transform: perspective(1000px); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; position: relative; width: 25px; height: 18px; } #controls .button.sorting .front, #controls .button.sorting .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; position: absolute; top: 0; left: 0; padding: 2px 1px; } #controls .button.sorting .front, #controls .button.sorting.active.hover .back { z-index: 2; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); } #controls .button.sorting .back { filter: alpha(opacity=0); /* Hide this class in IE<10 */ -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); transform: rotateX(180deg); } #controls .button.sorting.active.hover .front { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); transform: rotateX(180deg); }