panopoly-images.css in Panopoly 7
/**
* Default image styling
*/
img.panopoly-image-full,
img.panopoly-image-half,
img.panopoly-image-quarter,
img.panopoly-image-featured,
img.panopoly-image-thumbnail,
img.panopoly-image-square,
img.panopoly-image-original,
img.panopoly-image-spotlight,
img.panopoly-image-video {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
/**
* Image styling
*/
img.panopoly-image-full {
width: 100% !important;
margin-bottom: .5em;
}
img.panopoly-image-half {
max-width: 50%;
width: 50%;
float: left;
margin-right: .75em;
margin-bottom: .5em;
margin-top: .5em;
}
img.panopoly-image-quarter {
max-width: 25%;
width: 25%;
float: left;
margin-right: .5em;
margin-bottom: .25em;
margin-top: .25em;
}
.caption.panopoly-image-half {
max-width: 50%;
float: left;
}
.caption.panopoly-image-quarter {
max-width: 25%;
}
/* Only remove float if we have successfully added the image style class to the
* caption or if we're in the editor.
*/
.caption.panopoly-image-half img.panopoly-image-half,
.caption.panopoly-image-quarter img.panopoly-image-quarter,
.caption.mceTemp img.panopoly-image-half,
.caption.mceTemp img.panopoly-image-quarter {
max-width: 100%;
width: 100%;
float: none;
}
/* If we're in the editor, though, we need to use width:auto otherwise it will
* keep resizing on us.
*/
.caption.mceTemp img.panopoly-image-half,
.caption.mceTemp img.panopoly-image-quarter {
width: auto;
}
/**
* Media image preview.
*/
.media-thumbnail {
width: 80px;
height: 80px;
}
.media-thumbnail img.panopoly-image-thumbnail{
margin-left: auto;
margin-right: auto;
}
/**
* Ensure all images don't bust out of the container in the media browser.
*/
.media-thumbnail img {
max-width: 100%;
height: auto;
}
File
modules/panopoly/panopoly_images/panopoly-images.css
View source
- /**
- * Default image styling
- */
- img.panopoly-image-full,
- img.panopoly-image-half,
- img.panopoly-image-quarter,
- img.panopoly-image-featured,
- img.panopoly-image-thumbnail,
- img.panopoly-image-square,
- img.panopoly-image-original,
- img.panopoly-image-spotlight,
- img.panopoly-image-video {
- max-width: 100%;
- height: auto;
- vertical-align: bottom;
- }
-
- /**
- * Image styling
- */
- img.panopoly-image-full {
- width: 100% !important;
- margin-bottom: .5em;
- }
-
- img.panopoly-image-half {
- max-width: 50%;
- width: 50%;
- float: left;
- margin-right: .75em;
- margin-bottom: .5em;
- margin-top: .5em;
- }
-
- img.panopoly-image-quarter {
- max-width: 25%;
- width: 25%;
- float: left;
- margin-right: .5em;
- margin-bottom: .25em;
- margin-top: .25em;
- }
-
- .caption.panopoly-image-half {
- max-width: 50%;
- float: left;
- }
-
- .caption.panopoly-image-quarter {
- max-width: 25%;
- }
-
- /* Only remove float if we have successfully added the image style class to the
- * caption or if we're in the editor.
- */
- .caption.panopoly-image-half img.panopoly-image-half,
- .caption.panopoly-image-quarter img.panopoly-image-quarter,
- .caption.mceTemp img.panopoly-image-half,
- .caption.mceTemp img.panopoly-image-quarter {
- max-width: 100%;
- width: 100%;
- float: none;
- }
-
- /* If we're in the editor, though, we need to use width:auto otherwise it will
- * keep resizing on us.
- */
- .caption.mceTemp img.panopoly-image-half,
- .caption.mceTemp img.panopoly-image-quarter {
- width: auto;
- }
-
-
- /**
- * Media image preview.
- */
- .media-thumbnail {
- width: 80px;
- height: 80px;
- }
- .media-thumbnail img.panopoly-image-thumbnail{
- margin-left: auto;
- margin-right: auto;
- }
- /**
- * Ensure all images don't bust out of the container in the media browser.
- */
- .media-thumbnail img {
- max-width: 100%;
- height: auto;
- }