58 float: left; |
58 float: left; |
59 margin: 0 4% 4% 0; |
59 margin: 0 4% 4% 0; |
60 position: relative; |
60 position: relative; |
61 width: 30.6%; |
61 width: 30.6%; |
62 border: 1px solid #ddd; |
62 border: 1px solid #ddd; |
63 box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1); |
63 box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); |
64 box-sizing: border-box; |
64 box-sizing: border-box; |
65 } |
65 } |
66 |
66 |
67 .ie8 .theme-browser .theme { |
67 .ie8 .theme-browser .theme { |
68 width: 30%; |
68 width: 30%; |
82 font-size: 15px; |
82 font-size: 15px; |
83 font-weight: 600; |
83 font-weight: 600; |
84 height: 18px; |
84 height: 18px; |
85 margin: 0; |
85 margin: 0; |
86 padding: 15px; |
86 padding: 15px; |
87 box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); |
87 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); |
88 overflow: hidden; |
88 overflow: hidden; |
89 white-space: nowrap; |
89 white-space: nowrap; |
90 text-overflow: ellipsis; |
90 text-overflow: ellipsis; |
91 background: #fff; |
91 background: #fff; |
92 background: rgba(255,255,255,0.65); |
92 background: rgba(255, 255, 255, 0.65); |
93 } |
93 } |
94 |
94 |
95 /* Activate and Customize buttons, shown on hover and focus */ |
95 /* Activate and Customize buttons, shown on hover and focus */ |
96 .theme-browser .theme .theme-actions { |
96 .theme-browser .theme .theme-actions { |
97 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
97 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
98 opacity: 0; |
98 opacity: 0; |
99 transition: opacity 0.1s ease-in-out; |
99 transition: opacity 0.1s ease-in-out; |
100 height: auto; |
100 height: auto; |
101 background: rgba(244, 244, 244, 0.7); |
101 background: rgba(244, 244, 244, 0.7); |
102 border-left: 1px solid rgba(0,0,0,0.05); |
102 border-left: 1px solid rgba(0, 0, 0, 0.05); |
103 } |
103 } |
104 |
104 |
105 .theme-browser .theme:hover .theme-actions, |
105 .theme-browser .theme:hover .theme-actions, |
106 .theme-browser .theme.focus .theme-actions, |
106 .theme-browser .theme.focus .theme-actions, |
107 .theme-browser .theme:focus .theme-actions { |
107 .theme-browser .theme:focus .theme-actions { |
163 position: absolute; |
163 position: absolute; |
164 top: 35%; |
164 top: 35%; |
165 right: 20%; |
165 right: 20%; |
166 left: 20%; |
166 left: 20%; |
167 background: #23282d; |
167 background: #23282d; |
168 background: rgba(0,0,0,0.7); |
168 background: rgba(0, 0, 0, 0.7); |
169 color: #fff; |
169 color: #fff; |
170 font-size: 15px; |
170 font-size: 15px; |
171 text-shadow: 0 1px 0 rgba(0,0,0,0.6); |
171 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); |
172 -webkit-font-smoothing: antialiased; |
172 -webkit-font-smoothing: antialiased; |
173 font-weight: 600; |
173 font-weight: 600; |
174 padding: 15px 12px; |
174 padding: 15px 12px; |
175 text-align: center; |
175 text-align: center; |
176 border-radius: 3px; |
176 border-radius: 3px; |
177 transition: opacity 0.1s ease-in-out; |
177 transition: opacity 0.1s ease-in-out; |
178 } |
178 } |
179 |
179 |
180 .theme-browser .theme:focus { |
180 .theme-browser .theme:focus { |
181 border-color: #5b9dd9; |
181 border-color: #5b9dd9; |
182 box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 ); |
182 box-shadow: 0 0 2px rgba(30, 140, 190, 0.8); |
183 } |
183 } |
184 |
184 |
185 .theme-browser .theme:focus .more-details { |
185 .theme-browser .theme:focus .more-details { |
186 opacity: 1; |
186 opacity: 1; |
187 } |
187 } |
203 .theme-browser .theme.active .theme-name { |
203 .theme-browser .theme.active .theme-name { |
204 background: #23282d; |
204 background: #23282d; |
205 color: #fff; |
205 color: #fff; |
206 padding-right: 110px; |
206 padding-right: 110px; |
207 font-weight: 300; |
207 font-weight: 300; |
208 box-shadow: inset 0 1px 1px rgba(0,0,0,0.5); |
208 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5); |
209 } |
209 } |
210 |
210 |
211 .theme-browser .customize-control .theme.active .theme-name { |
211 .theme-browser .customize-control .theme.active .theme-name { |
212 padding-right: 15px; |
212 padding-right: 15px; |
213 } |
213 } |
215 .theme-browser .theme.active .theme-name span { |
215 .theme-browser .theme.active .theme-name span { |
216 font-weight: 600; |
216 font-weight: 600; |
217 } |
217 } |
218 |
218 |
219 .theme-browser .theme.active .theme-actions { |
219 .theme-browser .theme.active .theme-actions { |
220 background: rgba(49,49,49,0.7); |
220 background: rgba(49, 49, 49, 0.7); |
221 border-left: none; |
221 border-left: none; |
222 opacity: 1; |
222 opacity: 1; |
223 } |
223 } |
224 |
224 |
225 .theme-id-container { |
225 .theme-id-container { |
228 |
228 |
229 .theme-browser .theme.active .theme-actions, |
229 .theme-browser .theme.active .theme-actions, |
230 .theme-browser .theme .theme-actions { |
230 .theme-browser .theme .theme-actions { |
231 position: absolute; |
231 position: absolute; |
232 top: 50%; |
232 top: 50%; |
233 -webkit-transform: translateY(-50%); |
|
234 transform: translateY(-50%); |
233 transform: translateY(-50%); |
235 right: 0; |
234 right: 0; |
236 padding: 10px 15px; |
235 padding: 10px 15px; |
237 box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); |
236 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); |
238 } |
237 } |
239 |
238 |
240 .theme-browser .theme.active .theme-actions .button-primary { |
239 .theme-browser .theme.active .theme-actions .button-primary { |
241 margin-right: 0; |
240 margin-right: 0; |
242 } |
241 } |
437 } |
436 } |
438 |
437 |
439 .theme-overlay .theme-header .close:focus, |
438 .theme-overlay .theme-header .close:focus, |
440 .theme-overlay .theme-header .right:focus, |
439 .theme-overlay .theme-header .right:focus, |
441 .theme-overlay .theme-header .left:focus { |
440 .theme-overlay .theme-header .left:focus { |
442 box-shadow: none; |
441 box-shadow: none; |
443 outline: none; |
442 outline: none; |
444 } |
443 } |
445 |
444 |
446 .theme-overlay .theme-header .left.disabled, |
445 .theme-overlay .theme-header .left.disabled, |
447 .theme-overlay .theme-header .right.disabled, |
446 .theme-overlay .theme-header .right.disabled, |
448 .theme-overlay .theme-header .left.disabled:hover, |
447 .theme-overlay .theme-header .left.disabled:hover, |
572 .theme-overlay .screenshot { |
571 .theme-overlay .screenshot { |
573 border: 1px solid #fff; |
572 border: 1px solid #fff; |
574 box-sizing: border-box; |
573 box-sizing: border-box; |
575 overflow: hidden; |
574 overflow: hidden; |
576 position: relative; |
575 position: relative; |
577 box-shadow: 0 0 0 1px rgba(0,0,0,0.2); |
576 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); |
578 } |
577 } |
579 |
578 |
580 .theme-overlay .screenshot:after { |
579 .theme-overlay .screenshot:after { |
581 content: ""; |
580 content: ""; |
582 display: block; |
581 display: block; |
1165 } |
1164 } |
1166 |
1165 |
1167 .background-position-control input[type="radio"]:checked ~ .button { |
1166 .background-position-control input[type="radio"]:checked ~ .button { |
1168 background: #eee; |
1167 background: #eee; |
1169 border-color: #999; |
1168 border-color: #999; |
1170 box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ); |
1169 box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); |
1171 z-index: 1; |
1170 z-index: 1; |
1172 } |
1171 } |
1173 |
1172 |
1174 .background-position-control input[type="radio"]:focus ~ .button { |
1173 .background-position-control input[type="radio"]:focus ~ .button { |
1175 border-color: #5b9dd9; |
1174 border-color: #5b9dd9; |
1176 box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ), 0 0 3px rgba( 0, 115, 170, .8 ); |
1175 box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5), 0 0 3px rgba(0, 115, 170, 0.8); |
1177 color: #23282d; |
1176 color: #23282d; |
1178 } |
1177 } |
1179 |
1178 |
1180 .background-position-control .background-position-center-icon, |
1179 .background-position-control .background-position-center-icon, |
1181 .background-position-control .background-position-center-icon:before { |
1180 .background-position-control .background-position-center-icon:before { |
1182 display: inline-block; |
1181 display: inline-block; |
1183 line-height: 1; |
1182 line-height: 1; |
1184 text-align: center; |
1183 text-align: center; |
1185 transition: background-color .1s ease-in 0; |
1184 transition: background-color .1s ease-in; |
1186 } |
1185 } |
1187 |
1186 |
1188 .background-position-control .background-position-center-icon { |
1187 .background-position-control .background-position-center-icon { |
1189 height: 20px; |
1188 height: 20px; |
1190 margin-top: 13px; |
1189 margin-top: 13px; |
1212 .background-position-control .button-group .button { |
1211 .background-position-control .button-group .button { |
1213 border-radius: 0; |
1212 border-radius: 0; |
1214 box-shadow: none; |
1213 box-shadow: none; |
1215 /* Following properties are overridden by buttons responsive styles (see: wp-includes/css/buttons.css). */ |
1214 /* Following properties are overridden by buttons responsive styles (see: wp-includes/css/buttons.css). */ |
1216 height: 40px !important; |
1215 height: 40px !important; |
1217 line-height: 37px !important; |
1216 line-height: 2.9 !important; |
1218 margin: 0 -1px 0 0 !important; |
1217 margin: 0 -1px 0 0 !important; |
1219 padding: 0 10px 1px !important; |
1218 padding: 0 10px 1px !important; |
1220 position: relative; |
1219 position: relative; |
1221 } |
1220 } |
1222 |
1221 |
1237 .background-position-control .button-group:first-child > label:first-child .button { |
1236 .background-position-control .button-group:first-child > label:first-child .button { |
1238 border-radius: 3px 0 0; |
1237 border-radius: 3px 0 0; |
1239 } |
1238 } |
1240 |
1239 |
1241 .background-position-control .button-group:first-child > label:first-child .dashicons { |
1240 .background-position-control .button-group:first-child > label:first-child .dashicons { |
1242 -webkit-transform: rotate( 45deg ); |
|
1243 transform: rotate( 45deg ); |
1241 transform: rotate( 45deg ); |
1244 } |
1242 } |
1245 |
1243 |
1246 .background-position-control .button-group:first-child > label:last-child .button { |
1244 .background-position-control .button-group:first-child > label:last-child .button { |
1247 border-radius: 0 3px 0 0; |
1245 border-radius: 0 3px 0 0; |
1248 } |
1246 } |
1249 |
1247 |
1250 .background-position-control .button-group:first-child > label:last-child .dashicons { |
1248 .background-position-control .button-group:first-child > label:last-child .dashicons { |
1251 -webkit-transform: rotate( -45deg ); |
|
1252 transform: rotate( -45deg ); |
1249 transform: rotate( -45deg ); |
1253 } |
1250 } |
1254 |
1251 |
1255 .background-position-control .button-group:last-child > label:first-child .button { |
1252 .background-position-control .button-group:last-child > label:first-child .button { |
1256 border-radius: 0 0 0 3px; |
1253 border-radius: 0 0 0 3px; |
1257 } |
1254 } |
1258 |
1255 |
1259 .background-position-control .button-group:last-child > label:first-child .dashicons { |
1256 .background-position-control .button-group:last-child > label:first-child .dashicons { |
1260 -webkit-transform: rotate( -45deg ); |
|
1261 transform: rotate( -45deg ); |
1257 transform: rotate( -45deg ); |
1262 } |
1258 } |
1263 |
1259 |
1264 .background-position-control .button-group:last-child > label:last-child .button { |
1260 .background-position-control .button-group:last-child > label:last-child .button { |
1265 border-radius: 0 0 3px 0; |
1261 border-radius: 0 0 3px 0; |
1266 } |
1262 } |
1267 |
1263 |
1268 .background-position-control .button-group:last-child > label:last-child .dashicons { |
1264 .background-position-control .button-group:last-child > label:last-child .dashicons { |
1269 -webkit-transform: rotate( 45deg ); |
|
1270 transform: rotate( 45deg ); |
1265 transform: rotate( 45deg ); |
1271 } |
1266 } |
1272 |
1267 |
1273 .background-position-control .button-group .dashicons { |
1268 .background-position-control .button-group .dashicons { |
1274 margin-top: 9px; |
1269 margin-top: 9px; |
1517 |
1512 |
1518 .wp-full-overlay .collapse-sidebar-arrow, |
1513 .wp-full-overlay .collapse-sidebar-arrow, |
1519 .wp-full-overlay .collapse-sidebar-label { |
1514 .wp-full-overlay .collapse-sidebar-label { |
1520 display: inline-block; |
1515 display: inline-block; |
1521 vertical-align: middle; |
1516 vertical-align: middle; |
1522 line-height: 20px; |
1517 line-height: 1.6; |
1523 } |
1518 } |
1524 |
1519 |
1525 .wp-full-overlay .collapse-sidebar-arrow { |
1520 .wp-full-overlay .collapse-sidebar-arrow { |
1526 width: 20px; |
1521 width: 20px; |
1527 height: 20px; |
1522 height: 20px; |
1530 overflow: hidden; |
1525 overflow: hidden; |
1531 } |
1526 } |
1532 |
1527 |
1533 .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, |
1528 .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, |
1534 .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { |
1529 .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { |
1535 box-shadow: |
1530 box-shadow: |
1536 0 0 0 1px #5b9dd9, |
1531 0 0 0 1px #5b9dd9, |
1537 0 0 2px 1px rgba(30, 140, 190, .8); |
1532 0 0 2px 1px rgba(30, 140, 190, 0.8); |
1538 } |
1533 } |
1539 |
1534 |
1540 .wp-full-overlay .collapse-sidebar-label { |
1535 .wp-full-overlay .collapse-sidebar-label { |
1541 margin-left: 3px; |
1536 margin-left: 3px; |
1542 } |
1537 } |
1561 } |
1556 } |
1562 |
1557 |
1563 /* rtl:ignore */ |
1558 /* rtl:ignore */ |
1564 .wp-full-overlay.collapsed .collapse-sidebar-arrow:before, |
1559 .wp-full-overlay.collapsed .collapse-sidebar-arrow:before, |
1565 .rtl .wp-full-overlay .collapse-sidebar-arrow:before { |
1560 .rtl .wp-full-overlay .collapse-sidebar-arrow:before { |
1566 -webkit-transform: rotate(180.001deg); |
1561 transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing */ |
1567 transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing */ |
|
1568 } |
1562 } |
1569 |
1563 |
1570 .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before { |
1564 .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before { |
1571 -webkit-transform: none; |
|
1572 transform: none; |
1565 transform: none; |
1573 } |
1566 } |
1574 |
1567 |
1575 /* Animations */ |
1568 /* Animations */ |
1576 .wp-full-overlay, |
1569 .wp-full-overlay, |
1622 padding: 0 3px; |
1615 padding: 0 3px; |
1623 margin: 0 0 0 -4px; |
1616 margin: 0 0 0 -4px; |
1624 box-shadow: none; |
1617 box-shadow: none; |
1625 border-top: 1px solid transparent; |
1618 border-top: 1px solid transparent; |
1626 border-bottom: 4px solid transparent; |
1619 border-bottom: 4px solid transparent; |
1627 transition: .15s color ease-in-out, |
1620 transition: |
1628 .15s background-color ease-in-out, |
1621 .15s color ease-in-out, |
1629 .15s border-color ease-in-out; |
1622 .15s background-color ease-in-out, |
|
1623 .15s border-color ease-in-out; |
1630 } |
1624 } |
1631 |
1625 |
1632 .wp-full-overlay-footer .devices button:focus { |
1626 .wp-full-overlay-footer .devices button:focus { |
1633 box-shadow: none; |
1627 box-shadow: none; |
1634 outline: none; |
1628 outline: none; |
1807 } |
1801 } |
1808 |
1802 |
1809 .theme-details .theme-description { |
1803 .theme-details .theme-description { |
1810 float: left; |
1804 float: left; |
1811 color: #72777c; |
1805 color: #72777c; |
1812 line-height: 20px; |
1806 line-height: 1.6; |
1813 max-width: 100%; |
1807 max-width: 100%; |
1814 } |
1808 } |
1815 |
1809 |
1816 .theme-install-overlay .wp-full-overlay-header .button { |
1810 .theme-install-overlay .wp-full-overlay-header .button { |
1817 float: right; |
1811 float: right; |
1818 margin: 8px 10px 0 0; |
1812 margin: 8px 10px 0 0; |
1819 /* For when .theme-install is a span rather than a.button-primary (already installed theme) */ |
1813 /* For when .theme-install is a span rather than a.button-primary (already installed theme) */ |
1820 line-height: 26px; |
1814 line-height: 2; |
1821 } |
1815 } |
1822 |
1816 |
1823 .theme-install-overlay .wp-full-overlay-sidebar { |
1817 .theme-install-overlay .wp-full-overlay-sidebar { |
1824 background: #eee; |
1818 background: #eee; |
1825 border-right: 1px solid #ddd; |
1819 border-right: 1px solid #ddd; |