← Back
Editing: design.css
.thk-design-browser .thk-designs { clear: both; } .thk-design-browser .thk-design { float: left; margin: 0 4% 4% 0; position: relative; width: 30.6%; border: 1px solid #ddd; box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1); box-sizing: border-box; } .ie8 .thk-design-browser .thk-design { width: 30%; margin: 0 3% 4% 0; } .thk-design-browser .thk-design:nth-child(3n) { margin-right: 0; } .thk-design-browser .thk-design:hover, .thk-design-browser .thk-design:focus { } .thk-design-browser .thk-design .thk-design-name { font-size: 15px; font-weight: 600; height: 18px; margin: 0; padding: 15px; box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: #fff; background: rgba(255,255,255,0.65); } .thk-design-browser .thk-design .thk-design-actions { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; transition: opacity 0.1s ease-in-out; height: auto; background: rgba(244, 244, 244, 0.7); border-left: 1px solid rgba(0,0,0,0.05); } .thk-design-browser .thk-design:hover .thk-design-actions, .thk-design-browser .thk-design.focus .thk-design-actions, .thk-design-browser .thk-design:focus .thk-design-actions { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } .thk-design-browser .thk-design .thk-design-actions .button-primary { margin-right: 3px; } .thk-design-browser .thk-design .thk-design-actions .button { float: none; margin-left: 3px; } .thk-design-browser .thk-design .thk-design-screenshot { display: block; overflow: hidden; position: relative; -webkit-backface-visibility: hidden; /* Prevents flicker of the screenshot on hover. */ transition: opacity 0.2s ease-in-out; } .thk-design-browser .thk-design .thk-design-screenshot:after { content: ""; display: block; padding-top: 66.66666%; /* using a 3/2 aspect ratio */ } .thk-design-browser .thk-design .thk-design-screenshot img { height: auto; position: absolute; left: 0; top: 0; width: 100%; transition: opacity 0.2s ease-in-out; } .thk-design-browser .thk-design:hover .thk-design-screenshot, .thk-design-browser .thk-design:focus .thk-design-screenshot { background: #fff; } .thk-design-browser .thk-design:focus { border-color: #5b9dd9; box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 ); } .thk-design-browser .thk-design.active:focus .thk-design-actions { display: block; } .thk-design-browser .thk-design.active .thk-design-name { background: #23282d; color: #fff; padding-right: 110px; font-weight: 300; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5); } .thk-design-browser .customize-control .thk-design.active .thk-design-name { padding-right: 15px; } .thk-design-browser .thk-design.active .thk-design-name span { font-weight: 600; } .thk-design-browser .thk-design.active .thk-design-actions { background: rgba(49,49,49,0.7); border-left: none; opacity: 1; } .thk-design-id-container { position: relative; } .thk-design-browser .thk-design.active .thk-design-actions, .thk-design-browser .thk-design .thk-design-actions { position: absolute; top: 50%; transform: translateY(-50%); right: 0; padding: 10px 15px; box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); } .thk-design-browser .thk-design.active .thk-design-actions .button-primary { margin-right: 0; } /** * Basic Responsive structure... * * Shuffles thk-design columns around based on screen width */ /* Maximum screenshot width reaches 440px */ @media only screen and (min-width: 1640px) { .thk-design-browser .thk-design { width: 22.7%; margin: 0 3% 3% 0; } .thk-design-browser .thk-design .thk-design-screenshot:after { padding-top: 75%; /* using a 4/3 aspect ratio */ } .thk-design-browser .thk-design:nth-child(3n) { margin-right: 3%; } .thk-design-browser .thk-design:nth-child(4n) { margin-right: 0; } } /* Maximum screenshot width reaches 440px */ @media only screen and (max-width: 1120px) { .thk-design-browser .thk-design { width: 47.5%; margin-right: 0; } .thk-design-browser .thk-design:nth-child(even) { margin-right: 0; } .thk-design-browser .thk-design:nth-child(odd) { margin-right: 5%; } } /* Admin menu is folded */ @media only screen and (max-width: 780px) { .thk-design-browser .thk-design.active .thk-design-name span { /* Hide the "Active: " label on smaller screens. */ display: none; } .thk-design:not(.active):hover .thk-design-actions, .thk-design:not(.active):focus .thk-design-actions { /*display: none;*/ } .thk-design-browser.rendered .thk-design:hover .thk-design-screenshot img, .thk-design-browser.rendered .thk-design:focus .thk-design-screenshot img { opacity: 1.0; } .thk-design-browser .thk-design.active .thk-design-actions, .thk-design-browser .thk-design .thk-design-actions { padding: 7px 15px 2px 15px; } } @media only screen and (max-width: 480px) { .thk-design-browser .thk-design { width: 100%; margin-right: 0; } .thk-design-browser .thk-design:nth-child(2n), .thk-design-browser .thk-design:nth-child(3n) { margin-right: 0; } } @media only screen and (max-width: 650px) { .thk-design-browser .thk-design.add-new-thk-design span:after { font: normal 60px/90px dashicons; width: 80px; height: 80px; top: 30%; left: 50%; text-indent: 0; margin-left: -40px; } }
Save File
Cancel