WordPress/wp-admin/css/site-icon.css
Konstantin Obenland cd7a40bdc7 Site Icon: Improve responsiveness for small screen devices.
Using Jcrop's `trueSize` argument also allows us to get rid of all that behind
the scenes temp image creating and back and forth calculating of image sizes.

Props tyxla for initial patch.
See #16434.


Built from https://develop.svn.wordpress.org/trunk@33053


git-svn-id: http://core.svn.wordpress.org/trunk@33024 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-07-02 21:16:24 +00:00

84 lines
1.3 KiB
CSS

/*------------------------------------------------------------------------------
28.0 - Site Icon
------------------------------------------------------------------------------*/
.site-icon-image {
float: left;
margin: 0 20px 0 0;
}
.site-icon-content {
overflow: hidden;
padding: 10px;
position: relative;
}
.site-icon-crop-shell {
max-width: 720px;
}
.site-icon-crop-wrapper {
float: left;
}
.site-icon-crop-preview-shell {
float: right;
overflow: hidden;
}
.site-icon-crop-preview-shell h3 {
margin-top: 0;
}
.site-icon-crop-favicon-preview-shell {
margin-bottom: 20px;
position: relative;
}
.site-icon-crop-preview-favicon,
.site-icon-browser-title {
height: 16px;
left: 88px;
overflow: hidden;
position: absolute;
top: 16px;
}
.site-icon-crop-preview-favicon {
width: 16px;
}
.site-icon-browser-title {
left: 109px;
}
.site-icon-crop-preview-homeicon {
background-color: #000;
-webkit-border-radius: 16px;
border-radius: 16px;
height: 64px;
overflow: hidden;
width: 64px;
}
.site-icon-crop-shell .submit {
clear: both;
}
@media only screen and (max-width: 768px) {
.site-icon-crop-wrapper,
.site-icon-crop-preview-shell {
float: none;
}
.site-icon-crop-wrapper {
max-width: 100%;
margin-bottom: 20px;
}
.site-icon-crop-wrapper img {
max-width: 100%;
height: auto;
}
}