2014-02-19 16:43:14 -05:00
/ * ------------------------------------------------------------------------------
16 . 0 - Themes
------------------------------------------------------------------------------ * /
/ * ------------------------------------------------------------------------------
16 . 1 - Manage Themes
------------------------------------------------------------------------------ * /
. theme-browser . themes {
clear : both ;
}
2015-06-27 11:51:23 -04:00
. themes-php . wrap h1 {
2014-02-19 16:43:14 -05:00
float : right ;
margin-bottom : 15px ;
}
2015-06-27 11:51:23 -04:00
. network-admin . themes-php . wrap h1 {
2014-02-19 16:43:14 -05:00
margin-bottom : 0 ;
}
2015-06-27 11:51:23 -04:00
. themes-php . wrap h1 . button {
2014-02-19 16:43:14 -05:00
margin-right : 20px ;
}
2014-07-17 23:40:16 -04:00
/* Search form */
. themes-php . wp-filter-search {
2014-02-19 16:43:14 -05:00
position : relative ;
2014-07-17 23:40:16 -04:00
top : -2px ;
right : 20px ;
margin : 0 ;
2014-12-05 19:13:23 -05:00
width : 280px ;
2014-07-17 23:40:16 -04:00
font-size : 16px ;
font-weight : 300 ;
line-height : 1 . 5 ;
2014-03-27 23:16:15 -04:00
}
2014-02-19 16:43:14 -05:00
/* Position admin messages */
. themes-php div . updated ,
2015-01-05 15:06:23 -05:00
. themes-php div . error ,
. themes-php div . notice {
2014-02-19 16:43:14 -05:00
margin : 0 0 20px 0 ;
clear : both ;
}
/ * *
* Main theme element
* ( has flexible margins )
* /
. theme-browser . theme {
cursor : pointer ;
float : right ;
margin : 0 0 4 % 4 % ;
position : relative ;
width : 30 . 6 % ;
2016-03-09 14:51:26 -05:00
border : 1px solid # ddd ;
2014-02-19 16:43:14 -05:00
-webkit-box-shadow : 0 1px 1px -1px rgba ( 0 , 0 , 0 , 0 . 1 ) ;
box-shadow : 0 1px 1px -1px rgba ( 0 , 0 , 0 , 0 . 1 ) ;
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
box-sizing : border-box ;
}
. ie8 . theme-browser . theme {
width : 30 % ;
margin : 0 0 4 % 3 % ;
}
. theme-browser . theme : nth-child ( 3n ) {
margin-left : 0 ;
}
. theme-browser . theme : hover ,
. theme-browser . theme : focus {
cursor : pointer ;
}
. theme-browser . theme . theme-name {
font-size : 15px ;
font-weight : 600 ;
2014-04-13 14:26:15 -04:00
height : 18px ;
2014-02-19 16:43:14 -05:00
margin : 0 ;
padding : 15px ;
-webkit-box-shadow : inset 0 1px 0 rgba ( 0 , 0 , 0 , 0 . 1 ) ;
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 ) ;
}
2014-03-27 23:16:15 -04:00
/* Activate and Customize buttons, shown on hover and focus */
2014-02-19 16:43:14 -05:00
. theme-browser . theme . theme-actions {
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" ;
opacity : 0 ;
-webkit-transition : opacity 0 . 1s ease-in-out ;
transition : opacity 0 . 1s ease-in-out ;
position : absolute ;
bottom : 0 ;
left : 0 ;
height : 38px ;
padding : 9px 10px 0 10px ;
background : rgba ( 244 , 244 , 244 , 0 . 7 ) ;
border-right : 1px solid rgba ( 0 , 0 , 0 , 0 . 05 ) ;
}
2014-03-27 23:16:15 -04:00
. theme-browser . theme : hover . theme-actions ,
. theme-browser . theme . focus . theme-actions ,
. theme-browser . theme : focus . theme-actions {
2014-02-19 16:43:14 -05:00
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" ;
opacity : 1 ;
}
. theme-browser . theme . theme-actions . button-primary {
2015-06-18 08:27:25 -04:00
margin-left : 3px ;
2014-02-19 16:43:14 -05:00
}
. theme-browser . theme . theme-actions . button-secondary {
2015-06-18 08:27:25 -04:00
float : none ;
margin-right : 3px ;
2014-02-19 16:43:14 -05:00
}
/ * *
* Theme Screenshot
*
* Has a fixed aspect ratio of 1 . 5 to 1 regardless of screenshot size
* It is also responsive .
* /
. theme-browser . theme . theme-screenshot {
display : block ;
overflow : hidden ;
position : relative ;
2016-02-18 16:11:27 -05:00
-webkit-backface-visibility : hidden ; /* Prevents flicker of the screenshot on hover. */
2014-02-19 16:43:14 -05:00
-webkit-transition : opacity 0 . 2s ease-in-out ;
transition : opacity 0 . 2s ease-in-out ;
}
. theme-browser . theme . theme-screenshot : after {
2015-09-10 16:22:25 -04:00
content : "" ;
2014-02-19 16:43:14 -05:00
display : block ;
padding-top : 66 . 66666 % ; /* using a 3/2 aspect ratio */
}
. theme-browser . theme . theme-screenshot img {
height : auto ;
position : absolute ;
right : 0 ;
top : 0 ;
width : 100 % ;
2015-01-31 15:39:25 -05:00
-webkit-transition : opacity 0 . 2s ease-in-out ;
2014-02-19 16:43:14 -05:00
transition : opacity 0 . 2s ease-in-out ;
}
2014-03-27 23:16:15 -04:00
. theme-browser . theme : hover . theme-screenshot ,
. theme-browser . theme : focus . theme-screenshot {
2014-02-19 16:43:14 -05:00
background : # fff ;
}
2014-03-27 23:16:15 -04:00
. theme-browser . rendered . theme : hover . theme-screenshot img ,
. theme-browser . rendered . theme : focus . theme-screenshot img {
2014-02-19 16:43:14 -05:00
opacity : 0 . 4 ;
}
. theme-browser . theme . more-details {
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" ;
opacity : 0 ;
position : absolute ;
2014-03-20 00:20:15 -04:00
top : 35 % ;
left : 25 % ;
right : 25 % ;
2015-02-11 17:18:26 -05:00
background : # 23282d ;
2014-02-19 16:43:14 -05:00
background : rgba ( 0 , 0 , 0 , 0 . 7 ) ;
color : # fff ;
font-size : 15px ;
2015-02-27 08:41:30 -05:00
text-shadow : 0 1px 0 rgba ( 0 , 0 , 0 , 0 . 6 ) ;
2014-02-19 16:43:14 -05:00
-webkit-font-smoothing : antialiased ;
font-weight : 600 ;
padding : 15px 12px ;
text-align : center ;
-webkit-border-radius : 3px ;
border-radius : 3px ;
-webkit-transition : opacity 0 . 1s ease-in-out ;
transition : opacity 0 . 1s ease-in-out ;
}
2014-08-26 01:17:17 -04:00
2014-02-19 16:43:14 -05:00
. theme-browser . theme : focus {
2014-08-26 01:17:17 -04:00
border-color : # 5b9dd9 ;
-webkit-box-shadow : 0 0 2px rgba ( 30 , 140 , 190 , 0 . 8 ) ;
box-shadow : 0 0 2px rgba ( 30 , 140 , 190 , 0 . 8 ) ;
2014-02-19 16:43:14 -05:00
}
2014-03-27 23:16:15 -04:00
2014-02-19 16:43:14 -05:00
. theme-browser . theme : focus . more-details {
opacity : 1 ;
}
2014-08-26 01:17:17 -04:00
2014-02-19 16:43:14 -05:00
/* Current theme needs to have its action always on view */
. theme-browser . theme . active : focus . theme-actions {
display : block ;
}
2014-03-27 23:16:15 -04:00
. theme-browser . rendered . theme : hover . more-details ,
. theme-browser . rendered . theme : focus . more-details {
2014-02-19 16:43:14 -05:00
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" ;
opacity : 1 ;
}
/ * *
* Displays a theme update notice
* when an update is available .
* /
2014-04-07 19:04:15 -04:00
. theme-browser . theme . theme-update ,
. theme-browser . theme . theme-installed {
2014-02-19 16:43:14 -05:00
background : # d54e21 ;
background : rgba ( 213 , 78 , 33 , 0 . 95 ) ;
color : # fff ;
display : block ;
font-size : 13px ;
font-weight : 400 ;
height : 48px ;
line-height : 48px ;
padding : 0 10px ;
position : absolute ;
top : 0 ;
left : 0 ;
right : 0 ;
border-bottom : 1px solid rgba ( 0 , 0 , 0 , 0 . 25 ) ;
overflow : hidden ;
}
2014-04-07 19:04:15 -04:00
. theme-browser . theme . theme-update : before ,
. theme-browser . theme . theme-installed : before {
2015-09-10 16:22:25 -04:00
content : "\f463" ;
2014-02-19 16:43:14 -05:00
display : inline-block ;
2015-09-05 15:57:25 -04:00
font : normal 20px / 1 dashicons ;
2014-02-19 16:43:14 -05:00
margin : 0 0 0 6px ;
opacity : 0 . 8 ;
position : relative ;
top : 5px ;
speak : none ;
-webkit-font-smoothing : antialiased ;
}
/ * *
* The currently active theme
* /
. theme-browser . theme . active . theme-name {
2016-02-16 11:09:29 -05:00
background : # 23282d ;
2014-02-19 16:43:14 -05:00
color : # fff ;
padding-left : 110px ;
font-weight : 300 ;
-webkit-box-shadow : inset 0 1px 1px rgba ( 0 , 0 , 0 , 0 . 5 ) ;
box-shadow : inset 0 1px 1px rgba ( 0 , 0 , 0 , 0 . 5 ) ;
}
2015-04-22 12:15:27 -04:00
. theme-browser . customize-control . theme . active . theme-name {
padding-left : 15px ;
}
2014-02-19 16:43:14 -05:00
. theme-browser . theme . active . theme-name span {
font-weight : 600 ;
}
. theme-browser . theme . active . theme-actions {
background : rgba ( 49 , 49 , 49 , 0 . 7 ) ;
border-right : none ;
opacity : 1 ;
}
. theme-browser . theme . active . theme-actions . button-primary {
margin-left : 0 ;
}
. theme-browser . theme . theme-author {
2015-02-11 17:18:26 -05:00
background : # 23282d ;
2014-02-19 16:43:14 -05:00
color : # eee ;
display : none ;
font-size : 14px ;
margin : 0 10px ;
padding : 5px 10px ;
position : absolute ;
bottom : 56px ;
}
. theme-browser . theme . display-author . theme-author {
display : block ;
}
. theme-browser . theme . display-author . theme-author a {
color : inherit ;
text-decoration : none ;
}
/ * *
* Add new theme
* /
. theme-browser . theme . add-new-theme {
border : none ;
-webkit-box-shadow : none ;
box-shadow : none ;
}
. theme-browser . theme . add-new-theme a {
text-decoration : none ;
display : block ;
position : relative ;
z-index : 1 ;
}
2015-04-01 08:22:27 -04:00
. theme-browser . theme . add-new-theme a : after {
2014-02-19 16:43:14 -05:00
display : block ;
2015-09-10 16:22:25 -04:00
content : "" ;
2014-02-19 16:43:14 -05:00
background : transparent ;
background : rgba ( 0 , 0 , 0 , 0 ) ;
position : absolute ;
top : 0 ;
right : 0 ;
left : 0 ;
bottom : 0 ;
2015-04-01 08:22:27 -04:00
padding : 0 ;
2014-02-19 16:43:14 -05:00
text-shadow : none ;
border : 5px dashed # d5d2ca ;
border : 5px dashed rgba ( 0 , 0 , 0 , 0 . 1 ) ;
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
box-sizing : border-box ;
}
. theme-browser . theme . add-new-theme span : after {
background : # e5e5e5 ;
background : rgba ( 153 , 153 , 153 , 0 . 1 ) ;
-webkit-border-radius : 50 % ;
border-radius : 50 % ;
display : inline-block ;
2015-09-10 16:22:25 -04:00
content : "\f132" ;
2014-02-19 16:43:14 -05:00
-webkit-font-smoothing : antialiased ;
2015-09-05 15:57:25 -04:00
font : normal 74px / 115px dashicons ;
2014-02-19 16:43:14 -05:00
width : 100px ;
height : 100px ;
vertical-align : middle ;
text-align : center ;
color : rgb ( 153 , 153 , 153 ) ;
position : absolute ;
top : 30 % ;
right : 50 % ;
margin-right : -50px ;
text-indent : -4px ;
padding : 0 ;
text-shadow : none ;
z-index : 4 ;
}
. rtl . theme-browser . theme . add-new-theme span : after {
text-indent : 4px ;
}
2015-04-01 08:22:27 -04:00
. theme-browser . theme . add-new-theme a : hover . theme-screenshot ,
. theme-browser . theme . add-new-theme a : focus . theme-screenshot {
2014-02-19 16:43:14 -05:00
background : none ;
}
2015-04-01 08:22:27 -04:00
. theme-browser . theme . add-new-theme a : hover span : after ,
. theme-browser . theme . add-new-theme a : focus span : after {
2014-02-19 16:43:14 -05:00
background : # fff ;
2015-02-11 17:18:26 -05:00
color : # 0073aa ;
2014-02-19 16:43:14 -05:00
}
2015-04-01 08:22:27 -04:00
. theme-browser . theme . add-new-theme a : hover : after ,
. theme-browser . theme . add-new-theme a : focus : after {
2014-02-19 16:43:14 -05:00
border-color : transparent ;
color : # fff ;
2015-02-11 17:18:26 -05:00
background : # 0073aa ;
2015-09-10 16:22:25 -04:00
content : "" ;
2014-02-19 16:43:14 -05:00
}
. theme-browser . theme . add-new-theme . theme-name {
background : none ;
text-align : center ;
-webkit-box-shadow : none ;
box-shadow : none ;
font-weight : 400 ;
position : relative ;
top : 0 ;
2015-04-01 08:22:27 -04:00
margin-top : -18px ;
padding-top : 0 ;
padding-bottom : 48px ;
2014-02-19 16:43:14 -05:00
}
2015-04-01 08:22:27 -04:00
. theme-browser . theme . add-new-theme a : hover . theme-name ,
. theme-browser . theme . add-new-theme a : focus . theme-name {
2014-02-19 16:43:14 -05:00
color : # fff ;
z-index : 2 ;
}
/ * *
* Theme Overlay
* Shown when clicking a theme
* /
. theme-overlay . theme-backdrop {
position : absolute ;
right : -20px ;
left : 0 ;
top : 0 ;
bottom : 0 ;
background : # f1f1f1 ;
background : rgba ( 238 , 238 , 238 , 0 . 9 ) ;
2015-07-03 13:05:24 -04:00
z-index : 10000 ; /* Over WP Pointers. */
2014-02-19 16:43:14 -05:00
}
. theme-overlay . theme-header {
position : absolute ;
top : 0 ;
right : 0 ;
left : 0 ;
height : 48px ;
border-bottom : 1px solid # ddd ;
}
2015-04-14 14:04:28 -04:00
. theme-overlay . theme-header button {
padding : 0 ;
}
2014-02-19 16:43:14 -05:00
. theme-overlay . theme-header . close {
cursor : pointer ;
height : 48px ;
width : 50px ;
text-align : center ;
float : left ;
border : 0 ;
border-right : 1px solid # ddd ;
background-color : transparent ;
2014-08-02 18:02:19 -04:00
-webkit-transition : color . 1s ease-in-out , background . 1s ease-in-out ;
transition : color . 1s ease-in-out , background . 1s ease-in-out ;
2014-02-19 16:43:14 -05:00
}
. theme-overlay . theme-header . close : before {
2015-09-05 15:57:25 -04:00
font : normal 22px / 50px dashicons ! important ;
2016-01-25 19:04:26 -05:00
color : # 72777c ;
2014-02-19 16:43:14 -05:00
display : inline-block ;
2015-09-10 16:22:25 -04:00
content : "\f335" ;
2014-02-19 16:43:14 -05:00
font-weight : 300 ;
}
/* Left and right navigation */
. theme-overlay . theme-header . right ,
. theme-overlay . theme-header . left {
cursor : pointer ;
2016-01-25 19:04:26 -05:00
color : # 72777c ;
2014-02-19 16:43:14 -05:00
background-color : transparent ;
height : 48px ;
width : 54px ;
float : right ;
text-align : center ;
border : 0 ;
border-left : 1px solid # ddd ;
2014-08-02 18:02:19 -04:00
-webkit-transition : color . 1s ease-in-out , background . 1s ease-in-out ;
transition : color . 1s ease-in-out , background . 1s ease-in-out ;
2014-02-19 16:43:14 -05:00
}
2014-08-25 17:58:17 -04:00
. theme-overlay . theme-header . close : focus ,
2014-02-19 16:43:14 -05:00
. theme-overlay . theme-header . close : hover ,
2014-08-25 17:58:17 -04:00
. theme-overlay . theme-header . right : focus ,
2014-02-19 16:43:14 -05:00
. theme-overlay . theme-header . right : hover ,
2014-08-25 17:58:17 -04:00
. theme-overlay . theme-header . left : focus ,
2014-08-19 16:38:16 -04:00
. theme-overlay . theme-header . left : hover {
2014-08-25 17:58:17 -04:00
background : # ddd ;
border-color : # ccc ;
color : # 000 ;
}
. theme-overlay . theme-header . close : focus : before ,
. theme-overlay . theme-header . close : hover : before {
color : # 000 ;
2014-08-19 16:38:16 -04:00
}
2014-02-19 16:43:14 -05:00
. theme-overlay . theme-header . close : focus ,
. theme-overlay . theme-header . right : focus ,
. theme-overlay . theme-header . left : focus {
2014-09-02 14:27:16 -04:00
-webkit-box-shadow : none ;
box-shadow : none ;
outline : none ;
2014-02-19 16:43:14 -05:00
}
. theme-overlay . theme-header . left . disabled ,
. theme-overlay . theme-header . right . disabled ,
. theme-overlay . theme-header . left . disabled : hover ,
. theme-overlay . theme-header . right . disabled : hover {
color : # ccc ;
background : inherit ;
cursor : inherit ;
}
. theme-overlay . theme-header . right : before ,
. theme-overlay . theme-header . left : before {
2015-09-05 15:57:25 -04:00
font : normal 20px / 50px dashicons ! important ;
2014-02-19 16:43:14 -05:00
display : inline ;
font-weight : 300 ;
}
2015-02-27 15:19:29 -05:00
. theme-overlay . theme-header . left : before {
content : "\f345" ;
2014-02-19 16:43:14 -05:00
}
2015-02-27 15:19:29 -05:00
. theme-overlay . theme-header . right : before {
content : "\f341" ;
2014-02-19 16:43:14 -05:00
}
. theme-overlay . theme-wrap {
clear : both ;
position : fixed ;
top : 9 % ;
right : 190px ;
left : 30px ;
bottom : 3 % ;
background : # fff ;
-webkit-box-shadow : 0 1px 20px 5px rgba ( 0 , 0 , 0 , 0 . 1 ) ;
box-shadow : 0 1px 20px 5px rgba ( 0 , 0 , 0 , 0 . 1 ) ;
2015-07-03 13:05:24 -04:00
z-index : 10000 ; /* Over WP Pointers. */
2014-02-19 16:43:14 -05:00
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
box-sizing : border-box ;
2015-03-10 16:04:26 -04:00
-webkit-overflow-scrolling : touch ;
2014-02-19 16:43:14 -05:00
}
body . folded . theme-overlay . theme-wrap {
right : 70px ;
}
. theme-overlay . theme-about {
position : absolute ;
top : 49px ;
bottom : 57px ;
right : 0 ;
left : 0 ;
overflow : auto ;
padding : 2 % 4 % ;
}
. theme-overlay . theme-actions {
position : absolute ;
text-align : center ;
bottom : 0 ;
right : 0 ;
left : 0 ;
padding : 10px 25px 5px ;
background : # f3f3f3 ;
z-index : 30 ;
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
box-sizing : border-box ;
border-top : 1px solid # eee ;
}
. ie8 . theme-overlay . theme-actions {
border : 1px solid # eee ;
}
. theme-overlay . theme-actions a {
margin-left : 5px ;
margin-bottom : 5px ;
}
2014-12-08 17:23:23 -05:00
/* Hide-if-customize for items we can't add classes to */
. customize-support . theme-overlay . theme-actions a [ href = "themes.php?page=custom-header" ] ,
. customize-support . theme-overlay . theme-actions a [ href = "themes.php?page=custom-background" ] {
display : none ;
}
2014-10-16 15:46:18 -04:00
. broken-themes a . delete-theme ,
2014-02-19 16:43:14 -05:00
. theme-overlay . theme-actions . delete-theme {
color : # a00 ;
text-decoration : none ;
border-color : transparent ;
-webkit-box-shadow : none ;
box-shadow : none ;
background : transparent ;
}
2014-10-16 15:46:18 -04:00
. theme-overlay . theme-actions . delete-theme {
position : absolute ;
left : 10px ;
bottom : 5px ;
}
. broken-themes a . delete-theme : hover ,
. broken-themes a . delete-theme : focus ,
2014-02-19 16:43:14 -05:00
. theme-overlay . theme-actions . delete-theme : hover ,
. theme-overlay . theme-actions . delete-theme : focus {
background : # d54e21 ;
color : # fff ;
border-color : # d54e21 ;
}
. theme-overlay . theme-actions . active-theme ,
. theme-overlay . active . theme-actions . inactive-theme {
display : none ;
}
. theme-overlay . theme-actions . inactive-theme ,
. theme-overlay . active . theme-actions . active-theme {
display : block ;
}
/ * *
* Theme Screenshots gallery
* /
. theme-overlay . theme-screenshots {
float : right ;
margin : 0 0 0 30px ;
width : 55 % ;
max-width : 880px ;
text-align : center ;
}
/* First screenshot, shown big */
. theme-overlay . screenshot {
border : 1px solid # fff ;
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
box-sizing : border-box ;
overflow : hidden ;
position : relative ;
-webkit-box-shadow : 0 0 0 1px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
box-shadow : 0 0 0 1px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
}
. theme-overlay . screenshot : after {
2015-09-10 16:22:25 -04:00
content : "" ;
2014-02-19 16:43:14 -05:00
display : block ;
padding-top : 75 % ; /* using a 4/3 aspect ratio */
}
. theme-overlay . screenshot img {
height : auto ;
position : absolute ;
right : 0 ;
top : 0 ;
width : 100 % ;
}
/* Handles old 300px screenshots */
. theme-overlay . small-screenshot . theme-screenshots {
position : absolute ;
width : 302px ;
}
. theme-overlay . small-screenshot . theme-info {
margin-right : 350px ;
width : auto ;
}
/* Other screenshots, shown small and square */
. theme-overlay . screenshot . thumb {
background : # ccc ;
border : 1px solid # eee ;
float : none ;
display : inline-block ;
margin : 10px 5px 0 ;
width : 140px ;
height : 80px ;
cursor : pointer ;
}
. theme-overlay . screenshot . thumb : after {
2015-09-10 16:22:25 -04:00
content : "" ;
2014-02-19 16:43:14 -05:00
display : block ;
padding-top : 100 % ; /* using a 1/1 aspect ratio */
}
. theme-overlay . screenshot . thumb img {
cursor : pointer ;
height : auto ;
position : absolute ;
right : 0 ;
top : 0 ;
width : 100 % ;
height : auto ;
}
. theme-overlay . screenshot . selected {
background : transparent ;
2015-02-11 17:18:26 -05:00
border : 2px solid # 00a0d2 ;
2014-02-19 16:43:14 -05:00
}
. theme-overlay . screenshot . selected img {
opacity : 0 . 8 ;
}
/* No screenshot placeholder */
. theme-browser . theme . theme-screenshot . blank ,
. theme-overlay . screenshot . blank {
background-image : url ( data : image / png ; base64 , iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d + / efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8 / / 59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII = ) ;
}
/ * *
* Theme heading information
* /
. theme-overlay . theme-info {
width : 40 % ;
float : right ;
}
. theme-overlay . current-label {
2015-02-11 17:18:26 -05:00
background : # 32373c ;
2014-02-19 16:43:14 -05:00
color : # fff ;
font-size : 11px ;
display : inline-block ;
padding : 2px 8px ;
-webkit-border-radius : 2px ;
border-radius : 2px ;
margin : 0 0 -10px ;
-webkit-user-select : none ;
-moz-user-select : none ;
-ms-user-select : none ;
user-select : none ;
}
. theme-overlay . theme-name {
2015-02-11 17:18:26 -05:00
color : # 23282d ;
2014-02-19 16:43:14 -05:00
font-size : 32px ;
font-weight : 100 ;
margin : 10px 0 0 ;
line-height : 1 . 3 ;
}
. theme-overlay . theme-version {
2016-02-19 13:44:27 -05:00
color : # 72777c ;
2014-02-19 16:43:14 -05:00
font-size : 13px ;
font-weight : 400 ;
float : none ;
display : inline-block ;
margin-right : 10px ;
}
. theme-overlay . theme-author {
2015-10-16 11:56:25 -04:00
margin : 15px 0 25px ;
2016-02-16 11:09:29 -05:00
color : # 72777c ;
2014-02-19 16:43:14 -05:00
font-size : 16px ;
font-weight : 400 ;
2015-10-16 11:56:25 -04:00
line-height : inherit ;
2014-02-19 16:43:14 -05:00
}
. theme-overlay . theme-author a {
text-decoration : none ;
}
. theme-overlay . theme-description {
color : # 555 ;
font-size : 15px ;
font-weight : 400 ;
line-height : 1 . 5 ;
margin : 30px 0 0 0 ;
}
. theme-overlay . theme-tags {
border-top : 3px solid # eee ;
2015-02-11 17:18:26 -05:00
color : # 82878c ;
2014-02-19 16:43:14 -05:00
font-size : 13px ;
font-weight : 400 ;
margin : 30px 0 0 0 ;
padding-top : 20px ;
}
. theme-overlay . theme-tags span {
color : # 444 ;
font-weight : bold ;
margin-left : 5px ;
}
. theme-overlay . parent-theme {
background : # f7fcfe ;
border : 1px solid # eee ;
2015-02-11 17:18:26 -05:00
border-right : 4px solid # 00a0d2 ;
2014-02-19 16:43:14 -05:00
font-size : 14px ;
font-weight : normal ;
margin-top : 30px ;
padding : 10px 20px 10px 10px ;
}
. theme-overlay . parent-theme strong {
font-weight : 700 ;
}
/ * *
* Single Theme Mode
* Displays detailed view inline when a user has no switch capabilities
* /
. single-theme . theme-overlay . theme-backdrop ,
. single-theme . theme-overlay . theme-header ,
. single-theme . theme {
display : none ;
}
. single-theme . theme-overlay . theme-wrap {
clear : both ;
min-height : 330px ;
position : relative ;
right : auto ;
left : auto ;
top : auto ;
bottom : auto ;
2015-07-07 13:14:25 -04:00
z-index : 10 ;
2014-02-19 16:43:14 -05:00
}
. single-theme . theme-overlay . theme-about {
padding : 30px 30px 70px ;
position : static ;
}
. single-theme . theme-overlay . theme-actions {
position : absolute ;
}
/ * *
* Basic Responsive structure . . .
*
* Shuffles theme columns around based on screen width
* /
@ media only screen and ( min-width : 2000px ) {
# wpwrap . theme-browser . theme {
width : 17 . 6 % ;
margin : 0 0 3 % 3 % ;
}
# wpwrap . theme-browser . theme : nth-child ( 3n ) ,
# wpwrap . theme-browser . theme : nth-child ( 4n ) {
margin-left : 3 % ;
}
# wpwrap . theme-browser . theme : nth-child ( 5n ) {
margin-left : 0 ;
}
}
@ media only screen and ( min-width : 1680px ) {
. theme-overlay . theme-wrap {
width : 1450px ;
margin : 0 auto ;
}
}
/* Maximum screenshot width reaches 440px */
@ media only screen and ( min-width : 1640px ) {
. theme-browser . theme {
width : 22 . 7 % ;
margin : 0 0 3 % 3 % ;
}
. theme-browser . theme . theme-screenshot : after {
padding-top : 75 % ; /* using a 4/3 aspect ratio */
}
. theme-browser . theme : nth-child ( 3n ) {
margin-left : 3 % ;
}
. theme-browser . theme : nth-child ( 4n ) {
margin-left : 0 ;
}
}
/* Maximum screenshot width reaches 440px */
@ media only screen and ( max-width : 1120px ) {
. theme-browser . theme {
width : 47 . 5 % ;
margin-left : 0 ;
}
. theme-browser . theme : nth-child ( even ) {
margin-left : 0 ;
}
. theme-browser . theme : nth-child ( odd ) {
margin-left : 5 % ;
}
}
/* Admin menu is folded */
@ media only screen and ( max-width : 900px ) {
. theme-overlay . theme-wrap {
right : 65px ;
}
}
@ media only screen and ( max-width : 780px ) {
body . folded . theme-overlay . theme-wrap ,
. theme-overlay . theme-wrap {
top : 0 ; /* The adminmenu isn't fixed on mobile, so this can use the full viewport height */
left : 0 ;
bottom : 0 ;
right : 0 ;
padding : 70px 20px 20px ;
border : none ;
2015-03-10 16:04:26 -04:00
z-index : 100000 ; /* should overlap #wpadminbar. */
2014-02-19 16:43:14 -05:00
position : fixed ;
}
. theme-browser . theme . active . theme-name span {
/* Hide the "Active: " label on smaller screens. */
display : none ;
}
. theme-overlay . theme-screenshots {
width : 40 % ;
}
. theme-overlay . theme-info {
width : 50 % ;
}
. single-theme . theme-wrap {
padding : 10px ;
}
. theme-browser . theme . theme-actions {
padding : 5px 10px 4px 10px ;
}
. theme-overlay . small-screenshot . theme-screenshots {
position : static ;
float : none ;
max-width : 302px ;
}
. theme-overlay . small-screenshot . theme-info {
margin-right : 0 ;
width : auto ;
}
. theme : not ( . active ) : hover . theme-actions ,
2014-03-27 23:16:15 -04:00
. theme : not ( . active ) : focus . theme-actions ,
. theme : hover . more-details ,
. theme : focus . more-details {
2014-02-19 16:43:14 -05:00
display : none ;
}
2014-03-27 23:16:15 -04:00
. theme-browser . rendered . theme : hover . theme-screenshot img ,
. theme-browser . rendered . theme : focus . theme-screenshot img {
2014-02-19 16:43:14 -05:00
opacity : 1 . 0 ;
}
}
@ media only screen and ( max-width : 480px ) {
. theme-browser . theme {
width : 100 % ;
margin-left : 0 ;
}
. theme-browser . theme : nth-child ( 2n ) ,
. theme-browser . theme : nth-child ( 3n ) {
margin-left : 0 ;
}
}
@ media only screen and ( max-width : 650px ) {
. theme-overlay . theme-update ,
. theme-overlay . theme-description {
margin-right : 0 ;
}
. theme-overlay . theme-actions . delete-theme {
position : relative ;
left : auto ;
bottom : auto ;
}
. theme-overlay . theme-actions . inactive-theme {
display : inline ;
}
. theme-overlay . theme-screenshots {
width : 100 % ;
float : none ;
}
. theme-overlay . theme-info {
width : 100 % ;
}
. theme-overlay . theme-author {
margin : 5px 0 15px 0 ;
}
. theme-overlay . current-label {
margin-top : 10px ;
font-size : 13px ;
}
2014-07-17 23:40:16 -04:00
. themes-php . wp-filter-search {
2014-02-19 16:43:14 -05:00
float : none ;
clear : both ;
right : 0 ;
top : 0 ;
left : 0 ;
margin : 10px 0 ;
width : 100 % ;
2014-12-05 19:13:23 -05:00
max-width : 280px ;
2014-02-19 16:43:14 -05:00
}
. theme-browser . theme . add-new-theme span : after {
2015-09-05 15:57:25 -04:00
font : normal 60px / 90px dashicons ;
2014-02-19 16:43:14 -05:00
width : 80px ;
height : 80px ;
top : 30 % ;
right : 50 % ;
text-indent : 0 ;
margin-right : -40px ;
}
. single-theme . theme-wrap {
margin : 0 -10px 0 -12px ;
padding : 10px ;
}
. single-theme . theme-overlay . theme-about {
padding : 10px ;
overflow : visible ;
}
. single-theme . current-label {
display : none ;
}
. single-theme . theme-overlay . theme-actions {
position : static ;
}
}
. broken-themes {
clear : both ;
}
. broken-themes table {
text-align : right ;
width : 50 % ;
border-spacing : 3px ;
padding : 3px ;
}
/ * ------------------------------------------------------------------------------
16 . 2 - Install Themes
------------------------------------------------------------------------------ * /
2014-04-07 19:04:15 -04:00
/* Already installed theme */
. theme-browser . theme . theme-installed {
2015-02-11 17:18:26 -05:00
background : # 0073aa ;
2014-04-07 19:04:15 -04:00
}
. theme-browser . theme . theme-installed : before {
2015-09-10 16:22:25 -04:00
content : "\f147" ;
2014-04-07 19:04:15 -04:00
}
2014-04-08 12:24:14 -04:00
. theme-browser . theme . is-installed . theme-actions . button-primary {
2014-04-07 19:04:15 -04:00
display : none ! important ;
}
2015-07-26 23:34:25 -04:00
. theme-install-php . wp-filter {
padding : 0 20px ;
}
2014-03-20 00:20:15 -04:00
. theme-install-php a . upload ,
. theme-install-php a . browse-themes {
cursor : pointer ;
}
. theme-install-php a . browse-themes ,
. theme-install-php . show-upload-theme a . upload {
display : none ;
}
. theme-install-php . show-upload-theme a . browse-themes {
display : inline ;
}
2014-08-26 21:32:18 -04:00
. upload-theme ,
. upload-plugin {
2014-03-27 15:17:15 -04:00
-webkit-box-sizing : border-box ;
2014-03-11 03:47:15 -04:00
-moz-box-sizing : border-box ;
box-sizing : border-box ;
display : none ;
2014-07-17 23:40:16 -04:00
margin : 0 ;
2014-03-11 03:47:15 -04:00
padding : 0 ;
width : 100 % ;
2014-02-19 16:43:14 -05:00
overflow : hidden ;
2014-03-11 03:47:15 -04:00
position : relative ;
2014-03-20 00:20:15 -04:00
top : 10px ;
2014-02-19 16:43:14 -05:00
}
2014-08-26 21:32:18 -04:00
body . show-upload-theme . upload-theme ,
. upload-plugin {
2014-03-11 03:47:15 -04:00
display : block ;
2014-02-19 16:43:14 -05:00
}
2014-08-26 21:32:18 -04:00
. upload-theme . wp-upload-form ,
. upload-plugin . wp-upload-form {
2014-03-11 03:47:15 -04:00
background : # fafafa ;
border : 1px solid # e5e5e5 ;
padding : 30px ;
margin : 30px auto ;
max-width : 380px ;
2014-02-19 16:43:14 -05:00
}
2014-08-26 21:32:18 -04:00
. upload-theme . install-help ,
. upload-plugin . install-help {
2016-02-19 13:44:27 -05:00
color : # 555d66 ; /* #f1f1f1 background */
2014-03-11 03:47:15 -04:00
font-size : 18px ;
font-style : normal ;
margin : 0 ;
padding : 40px 0 0 ;
text-align : center ;
2014-02-19 16:43:14 -05:00
}
2014-07-17 23:40:16 -04:00
body . show-upload-theme . upload-theme + . wp-filter ,
body . show-upload-theme . upload-theme + . wp-filter + . theme-browser {
2014-03-11 03:47:15 -04:00
display : none ;
2014-02-19 16:43:14 -05:00
}
2014-03-27 23:16:15 -04:00
2014-04-01 18:20:14 -04:00
p . no-themes {
2015-02-22 05:15:26 -05:00
clear : both ;
2015-02-23 10:49:27 -05:00
color : # 666 ;
2014-04-01 18:20:14 -04:00
font-size : 18px ;
font-style : normal ;
2014-03-20 00:20:15 -04:00
margin : 0 ;
2016-01-12 12:13:29 -05:00
padding : 100px 0 ;
2014-04-01 18:20:14 -04:00
text-align : center ;
display : none ;
}
2016-01-12 12:13:29 -05:00
2014-04-01 18:20:14 -04:00
body . no-results p . no-themes {
display : block ;
2014-03-20 00:20:15 -04:00
}
2016-01-12 12:13:29 -05:00
2014-04-01 18:20:14 -04:00
body . show-upload-theme p . no-themes {
display : none ! important ;
}
2014-03-11 03:47:15 -04:00
. theme-install-php . add-new-theme {
display : none ! important ;
2014-02-19 16:43:14 -05:00
}
2014-03-20 00:20:15 -04:00
@ media only screen and ( max-width : 1120px ) {
. upload-theme . wp-upload-form {
margin : 20px 0 ;
max-width : 100 % ;
}
. upload-theme . install-help {
font-size : 15px ;
padding : 20px 0 0 ;
text-align : right ;
}
2014-04-01 18:20:14 -04:00
}
2015-10-10 02:51:24 -04:00
. theme-details . theme-rating {
line-height : 23px ;
}
2015-07-03 16:54:24 -04:00
. theme-details . star-rating {
2015-10-10 02:51:24 -04:00
display : inline ;
2014-02-19 16:43:14 -05:00
}
2015-07-03 16:54:24 -04:00
2015-10-10 02:51:24 -04:00
. theme-details . num-ratings ,
. theme-details . no-rating {
font-size : 11px ;
2016-02-19 13:44:27 -05:00
color : # 72777c ;
2015-10-10 02:51:24 -04:00
}
. theme-details . no-rating {
2014-10-18 15:43:18 -04:00
display : block ;
2014-03-11 03:47:15 -04:00
line-height : 20px ;
}
2014-02-19 16:43:14 -05:00
/ * ------------------------------------------------------------------------------
16 . 3 - Custom Header Screen
------------------------------------------------------------------------------ * /
. appearance_page_custom-header # headimg {
2016-03-09 14:51:26 -05:00
border : 1px solid # ddd ;
2014-02-19 16:43:14 -05:00
overflow : hidden ;
width : 100 % ;
}
. appearance_page_custom-header # upload-form p label {
font-size : 12px ;
}
. appearance_page_custom-header . available-headers . default-header {
float : right ;
margin : 0 0 20px 20px ;
}
. appearance_page_custom-header . random-header {
clear : both ;
margin : 0 0 20px 20px ;
vertical-align : middle ;
}
. appearance_page_custom-header . available-headers label input ,
. appearance_page_custom-header . random-header label input {
margin-left : 10px ;
}
. appearance_page_custom-header . available-headers label img {
vertical-align : middle ;
}
/ * ------------------------------------------------------------------------------
16 . 4 - Custom Background Screen
------------------------------------------------------------------------------ * /
div # custom-background-image {
min-height : 100px ;
2016-03-09 14:51:26 -05:00
border : 1px solid # ddd ;
2014-02-19 16:43:14 -05:00
}
div # custom-background-image img {
max-width : 400px ;
max-height : 300px ;
}
/ * ------------------------------------------------------------------------------
23 . 0 - Full Overlay w / Sidebar
------------------------------------------------------------------------------ * /
body . full-overlay-active {
overflow : hidden ;
}
. wp-full-overlay {
background : transparent ;
z-index : 500000 ;
position : fixed ;
overflow : visible ;
top : 0 ;
bottom : 0 ;
right : 0 ;
left : 0 ;
height : 100 % ;
min-width : 0 ;
}
. wp-full-overlay-sidebar {
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
box-sizing : border-box ;
position : fixed ;
width : 300px ;
height : 100 % ;
top : 0 ;
bottom : 0 ;
right : 0 ;
padding : 0 ;
margin : 0 ;
z-index : 10 ;
2014-04-03 19:53:15 -04:00
background : # eee ;
2014-02-19 16:43:14 -05:00
border-left : none ;
}
. wp-full-overlay . collapsed . wp-full-overlay-sidebar {
overflow : visible ;
}
. wp-full-overlay . collapsed ,
. wp-full-overlay . expanded . wp-full-overlay-sidebar {
margin-right : 0 ! important ;
}
. wp-full-overlay . expanded {
margin-right : 300px ;
}
. wp-full-overlay . collapsed . wp-full-overlay-sidebar {
margin-right : -300px ;
}
. wp-full-overlay-sidebar : after {
2015-09-10 16:22:25 -04:00
content : "" ;
2014-02-19 16:43:14 -05:00
display : block ;
position : absolute ;
top : 0 ;
bottom : 0 ;
left : 0 ;
width : 3px ;
z-index : 1000 ;
}
. wp-full-overlay-main {
position : absolute ;
right : 0 ;
left : 0 ;
top : 0 ;
bottom : 0 ;
height : 100 % ;
}
. wp-full-overlay-sidebar . wp-full-overlay-header {
position : absolute ;
right : 0 ;
left : 0 ;
height : 45px ;
padding : 0 15px ;
line-height : 45px ;
z-index : 10 ;
margin : 0 ;
border-top : none ;
-webkit-box-shadow : none ;
box-shadow : none ;
}
. wp-full-overlay-sidebar . wp-full-overlay-header a . back {
margin-top : 9px ;
}
. wp-full-overlay-sidebar . wp-full-overlay-footer {
bottom : 0 ;
border-bottom : none ;
border-top : none ;
-webkit-box-shadow : none ;
box-shadow : none ;
}
. wp-full-overlay-sidebar . wp-full-overlay-sidebar-content {
position : absolute ;
top : 45px ;
bottom : 45px ;
right : 0 ;
left : 0 ;
overflow : auto ;
}
2014-07-08 14:19:14 -04:00
/* Close & Navigation Links */
. theme-install-overlay . wp-full-overlay-sidebar . wp-full-overlay-header {
padding : 0 ;
}
. theme-install-overlay . close-full-overlay ,
. theme-install-overlay . previous-theme ,
. theme-install-overlay . next-theme {
display : block ;
position : relative ;
float : right ;
width : 45px ;
height : 45px ;
padding-left : 2px ;
background : # eee ;
border-left : 1px solid # ddd ;
color : # 444 ;
cursor : pointer ;
2014-02-19 16:43:14 -05:00
text-decoration : none ;
2014-08-02 18:02:19 -04:00
-webkit-transition : color . 1s ease-in-out , background . 1s ease-in-out ;
transition : color . 1s ease-in-out , background . 1s ease-in-out ;
2014-07-08 14:19:14 -04:00
}
. theme-install-overlay . close-full-overlay : hover ,
. theme-install-overlay . close-full-overlay : focus ,
. theme-install-overlay . previous-theme : hover ,
. theme-install-overlay . previous-theme : focus ,
. theme-install-overlay . next-theme : hover ,
. theme-install-overlay . next-theme : focus {
2014-08-25 17:58:17 -04:00
background : # ddd ;
border-color : # ccc ;
color : # 000 ;
2014-07-08 14:19:14 -04:00
outline : none ;
-webkit-box-shadow : none ;
box-shadow : none ;
}
. theme-install-overlay . close-full-overlay : before {
2014-08-19 16:38:16 -04:00
font : normal 22px / 1 dashicons ;
2014-07-08 14:19:14 -04:00
content : "\f335" ;
position : relative ;
2014-08-19 16:38:16 -04:00
top : 7px ;
2014-08-25 17:58:17 -04:00
right : 13px ;
2014-07-08 14:19:14 -04:00
}
. theme-install-overlay . previous-theme : before {
font : normal 20px / 1 dashicons ;
2015-02-27 15:19:29 -05:00
content : "\f345" ;
2014-07-08 14:19:14 -04:00
position : relative ;
top : 6px ;
right : 14px ;
}
. theme-install-overlay . next-theme : before {
font : normal 20px / 1 dashicons ;
2015-02-27 15:19:29 -05:00
content : "\f341" ;
2014-07-08 14:19:14 -04:00
position : relative ;
top : 6px ;
right : 13px ;
}
. theme-install-overlay . previous-theme . disabled ,
. theme-install-overlay . next-theme . disabled ,
. theme-install-overlay . previous-theme . disabled : hover ,
. theme-install-overlay . previous-theme . disabled : focus ,
. theme-install-overlay . next-theme . disabled : hover ,
. theme-install-overlay . next-theme . disabled : focus {
2015-04-05 17:20:27 -04:00
color : # b4b9be ;
2014-07-08 14:19:14 -04:00
background : # eee ;
cursor : default ;
2014-08-25 17:58:17 -04:00
pointer-events : none ;
2014-07-08 14:19:14 -04:00
}
2014-02-19 16:43:14 -05:00
/* Collapse Button */
2015-07-10 17:22:26 -04:00
. wp-core-ui . wp-full-overlay . collapse-sidebar {
position : fixed ;
bottom : 8px ;
right : 10px ;
2014-02-19 16:43:14 -05:00
padding : 0 ;
2015-07-10 17:22:26 -04:00
color : # 656a6f ;
outline : 0 ;
line-height : 1 ;
background-color : transparent ! important ;
border : none ! important ;
-webkit-box-shadow : none ! important ;
box-shadow : none ! important ;
-webkit-border-radius : 0 ! important ;
border-radius : 0 ! important ;
}
. wp-core-ui . wp-full-overlay . collapse-sidebar : hover ,
. wp-core-ui . wp-full-overlay . collapse-sidebar : focus {
color : # 0073aa ;
}
. wp-full-overlay . collapse-sidebar-arrow ,
. wp-full-overlay . collapse-sidebar-label {
display : inline-block ;
vertical-align : middle ;
line-height : 20px ;
}
. wp-full-overlay . collapse-sidebar-arrow {
width : 20px ;
height : 20px ;
margin : 0 2px ; /* avoid the focus box-shadow to be cut-off */
2014-02-19 16:43:14 -05:00
-webkit-border-radius : 50 % ;
border-radius : 50 % ;
2015-07-10 17:22:26 -04:00
overflow : hidden ;
2014-02-19 16:43:14 -05:00
}
2015-07-10 17:22:26 -04:00
. wp-full-overlay . collapse-sidebar : hover . collapse-sidebar-arrow ,
. wp-full-overlay . collapse-sidebar : focus . collapse-sidebar-arrow {
-webkit-box-shadow :
0 0 0 1px # 5b9dd9 ,
0 0 2px 1px rgba ( 30 , 140 , 190 , . 8 ) ;
box-shadow :
0 0 0 1px # 5b9dd9 ,
0 0 2px 1px rgba ( 30 , 140 , 190 , . 8 ) ;
2014-02-19 16:43:14 -05:00
}
2015-07-10 17:22:26 -04:00
. wp-full-overlay . collapse-sidebar-label {
margin-right : 3px ;
2014-02-19 16:43:14 -05:00
}
2015-07-10 17:22:26 -04:00
. wp-full-overlay . collapsed . collapse-sidebar-label {
display : none ;
2014-02-19 16:43:14 -05:00
}
. wp-full-overlay . collapse-sidebar-arrow : before {
2015-07-10 17:22:26 -04:00
display : block ;
2014-02-19 16:43:14 -05:00
content : "\f148" ;
background : # eee ;
2015-09-05 15:57:25 -04:00
font : normal 20px / 1 dashicons ;
2014-02-19 16:43:14 -05:00
speak : none ;
padding : 0 ;
-webkit-font-smoothing : antialiased ;
-moz-osx-font-smoothing : grayscale ;
}
2015-02-27 08:41:30 -05:00
/* rtl:ignore */
2014-02-19 16:43:14 -05:00
. wp-full-overlay . collapsed . collapse-sidebar-arrow : before ,
. rtl . wp-full-overlay . collapse-sidebar-arrow : before {
2015-07-10 17:22:26 -04:00
-webkit-transform : rotate ( 180 . 001deg ) ;
-ms-transform : rotate ( 180 . 001deg ) ;
transform : rotate ( 180 . 001deg ) ; /* Firefox: promoting to its own layer to trigger anti-aliasing */
2014-02-19 16:43:14 -05:00
}
. rtl . wp-full-overlay . collapsed . collapse-sidebar-arrow : before {
-webkit-transform : none ;
-ms-transform : none ;
transform : none ;
}
/* Animations */
. wp-full-overlay ,
. wp-full-overlay-sidebar ,
. wp-full-overlay . collapse-sidebar ,
. wp-full-overlay-main {
-webkit-transition-property : right , left , top , bottom , width , margin ;
transition-property : right , left , top , bottom , width , margin ;
-webkit-transition-duration : 0 . 2s ;
transition-duration : 0 . 2s ;
}
2016-03-05 17:07:25 -05:00
/* Device/preview size toggles */
. wp-full-overlay {
background : # 191e23 ;
}
. wp-full-overlay-main {
background-color : # f1f1f1 ;
}
. expanded . wp-full-overlay-footer {
position : fixed ;
bottom : 0 ;
right : 0 ;
width : 300px ;
height : 45px ;
border-top : 1px solid # ddd ;
}
. wp-full-overlay-footer . devices {
float : left ;
}
. wp-full-overlay-footer . devices button {
cursor : pointer ;
background : transparent ;
border : none ;
height : 45px ;
padding : 0 3px ;
margin : 0 -4px 0 0 ;
-webkit-box-shadow : none ;
box-shadow : none ;
border-top : 1px solid transparent ;
border-bottom : 4px solid transparent ;
-webkit-transition : background . 1s ease-in-out ;
transition : background . 1s ease-in-out ;
}
. wp-full-overlay-footer . devices button : focus {
-webkit-box-shadow : none ;
box-shadow : none ;
outline : none ;
}
. wp-full-overlay-footer . devices button : before {
display : inline-block ;
-webkit-font-smoothing : antialiased ;
font : normal 20px / 30px "dashicons" ;
vertical-align : top ;
margin : 3px 0 ;
padding : 4px 8px ;
color : # 656a6f ;
}
. wp-full-overlay-footer . devices button . active {
border-bottom-color : # 191e23 ;
}
. wp-full-overlay-footer . devices button : hover ,
. wp-full-overlay-footer . devices button : focus {
background-color : # fff ;
}
. wp-full-overlay-footer . devices button : focus {
background-color : # fff ;
border-bottom-color : # 0073aa ;
}
. wp-full-overlay-footer . devices button . active : before ,
. wp-full-overlay-footer . devices button : hover : before ,
. wp-full-overlay-footer . devices button : focus : before {
color : # 191e23 ;
}
. wp-full-overlay-footer . devices . preview-desktop : before {
content : "\f472" ;
}
. wp-full-overlay-footer . devices . preview-tablet : before {
content : "\f471" ;
}
. wp-full-overlay-footer . devices . preview-mobile : before {
content : "\f470" ;
}
@ media screen and ( max-width : 1024px ) {
. wp-full-overlay-footer . devices {
display : none ;
}
}
. collapsed . wp-full-overlay-footer . devices button : before {
display : none ;
}
. preview-mobile . wp-full-overlay-main {
margin : auto -160px auto 0 ;
width : 320px ;
height : 480px ;
max-height : 100 % ;
max-width : 100 % ;
right : 50 % ;
}
. preview-tablet . wp-full-overlay-main {
2016-04-19 16:54:28 -04:00
margin : auto -360px auto 0 ;
width : 720px ; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */
height : 1080px ;
2016-03-05 17:07:25 -05:00
max-height : 100 % ;
max-width : 100 % ;
right : 50 % ;
}
2014-02-19 16:43:14 -05:00
/ * ------------------------------------------------------------------------------
24 . 0 - Customize Loader
------------------------------------------------------------------------------ * /
. no-customize-support . hide-if-no-customize ,
. customize-support . hide-if-customize ,
. no-customize-support . wp-core-ui . hide-if-no-customize ,
. no-customize-support . wp-core-ui . hide-if-no-customize ,
. customize-support . wp-core-ui . hide-if-customize ,
. customize-support . wp-core-ui . hide-if-customize {
display : none ;
}
# customize-container {
display : none ;
background : # fff ;
z-index : 500000 ;
position : fixed ;
overflow : visible ;
top : 0 ;
bottom : 0 ;
right : 0 ;
left : 0 ;
height : 100 % ;
}
. customize-active # customize-container {
display : block ;
}
. customize-loading # customize-container iframe {
opacity : 0 ;
}
# customize-container iframe ,
2014-04-07 23:57:15 -04:00
. theme-install-overlay iframe {
2014-02-19 16:43:14 -05:00
height : 100 % ;
width : 100 % ;
z-index : 20 ;
-webkit-transition : opacity 0 . 3s ;
transition : opacity 0 . 3s ;
}
# customize-controls {
margin-top : 0 ;
}
2014-04-07 23:57:15 -04:00
. theme-install-overlay {
2014-02-19 16:43:14 -05:00
display : none ;
}
2014-04-07 23:57:15 -04:00
. theme-install-overlay . single-theme {
2014-02-19 16:43:14 -05:00
display : block ;
}
. install-theme-info {
display : none ;
2014-04-03 19:53:15 -04:00
padding : 10px 20px 60px ;
2014-02-19 16:43:14 -05:00
}
. single-theme . install-theme-info {
padding-top : 15px ;
}
2014-04-07 23:57:15 -04:00
. theme-install-overlay . install-theme-info {
2014-02-19 16:43:14 -05:00
display : block ;
}
. install-theme-info . theme-install {
float : left ;
margin-top : 18px ;
}
. install-theme-info . theme-name {
font-size : 16px ;
line-height : 24px ;
margin-bottom : 0 ;
margin-top : 0 ;
}
. install-theme-info . theme-screenshot {
2015-10-10 02:51:24 -04:00
margin : 15px 0 ;
2014-02-19 16:43:14 -05:00
width : 258px ;
border : 1px solid # ccc ;
}
. install-theme-info . theme-details {
overflow : hidden ;
}
. theme-details . theme-version {
margin : 15px 0 ;
}
. theme-details . theme-description {
float : right ;
2016-01-25 19:04:26 -05:00
color : # 72777c ;
2014-02-19 16:43:14 -05:00
line-height : 20px ;
2014-04-01 18:20:14 -04:00
max-width : 100 % ;
2014-02-19 16:43:14 -05:00
}
2014-04-07 23:57:15 -04:00
. theme-install-overlay . wp-full-overlay-header . theme-install {
2014-02-19 16:43:14 -05:00
float : left ;
2014-07-08 14:19:14 -04:00
margin : 8px 0 0 10px ;
2014-02-19 16:43:14 -05:00
/* For when .theme-install is a span rather than a.button-primary (already installed theme) */
line-height : 26px ;
}
2014-04-07 23:57:15 -04:00
. theme-install-overlay . wp-full-overlay-sidebar {
2014-07-08 14:19:14 -04:00
background : # eee ;
border-left : 1px solid # ddd ;
}
. theme-install-overlay . wp-full-overlay-sidebar-content {
background : # fff ;
border-top : 1px solid # ddd ;
border-bottom : 1px solid # ddd ;
2014-02-19 16:43:14 -05:00
}
2014-04-07 23:57:15 -04:00
. theme-install-overlay . wp-full-overlay-main {
2016-03-05 17:07:25 -05:00
position : absolute ;
2015-10-20 01:36:25 -04:00
z-index : 0 ;
2016-02-12 13:35:25 -05:00
background-color : # f1f1f1 ;
2015-10-20 01:36:25 -04:00
}
2016-02-12 13:35:25 -05:00
. customize-loading # customize-container {
background-color : # f1f1f1 ;
}
# customize-preview . wp-full-overlay-main : before ,
. customize-loading # customize-container : before ,
2015-10-20 01:36:25 -04:00
. theme-install-overlay . wp-full-overlay-main : before {
2016-02-12 13:35:25 -05:00
content : "" ;
2015-10-20 01:36:25 -04:00
display : block ;
width : 20px ;
height : 20px ;
position : absolute ;
right : 50 % ;
top : 50 % ;
z-index : -1 ;
margin : -10px -10px 0 0 ;
2015-10-20 23:02:24 -04:00
-webkit-transform : translateZ ( 0 ) ;
2015-10-20 01:36:25 -04:00
transform : translateZ ( 0 ) ;
2016-02-12 13:35:25 -05:00
background : transparent url ( . . / images / spinner . gif ) no-repeat center center ;
2014-02-19 16:43:14 -05:00
-webkit-background-size : 20px 20px ;
background-size : 20px 20px ;
}
2016-02-12 13:35:25 -05:00
# customize-preview . wp-full-overlay-main . iframe-ready : before ,
2015-10-20 01:36:25 -04:00
. theme-install-overlay . iframe-ready . wp-full-overlay-main : before {
background-image : none ;
}
2014-02-19 16:43:14 -05:00
/ * = Media Queries
-------------------------------------------------------------- * /
/ * *
* HiDPI Displays
* /
@ media print ,
( -webkit-min-device-pixel-ratio : 1 . 25 ) ,
( min-resolution : 120dpi ) {
. wp-full-overlay . collapse-sidebar-arrow {
2014-02-26 12:23:13 -05:00
background-image : url ( . . / images / arrows-2x . png ) ;
2014-02-19 16:43:14 -05:00
-webkit-background-size : 15px 123px ;
background-size : 15px 123px ;
}
2016-02-12 13:35:25 -05:00
# customize-preview . wp-full-overlay-main : before ,
. customize-loading # customize-container : before ,
2015-10-20 01:36:25 -04:00
. theme-install-overlay . wp-full-overlay-main : before {
2014-02-26 12:23:13 -05:00
background-image : url ( . . / images / spinner-2x . gif ) ;
2014-02-19 16:43:14 -05:00
}
}
@ media screen and ( max-width : 782px ) {
. available-theme . action-links . delete-theme {
float : none ;
margin : 0 ;
padding : 0 ;
clear : both ;
}
. available-theme . action-links . delete-theme a {
padding : 0 ;
}
2014-10-16 15:46:18 -04:00
. broken-themes table {
width : 100 % ;
}
2014-10-18 15:43:18 -04:00
. theme-install-overlay . wp-full-overlay-header . theme-install {
margin-top : 6px ;
line-height : normal ;
}
2014-02-19 16:43:14 -05:00
}