Chris@0: 
Chris@0: /**
Chris@0:  * Image style configuration pages.
Chris@0:  */
Chris@0: .image-style-new,
Chris@0: .image-style-new div {
Chris@0:   display: inline;
Chris@0: }
Chris@0: .image-style-preview .preview-image-wrapper {
Chris@18:   top: 50%;
Chris@0:   float: left;
Chris@18:   width: 48%;
Chris@0:   padding-bottom: 2em;
Chris@0:   text-align: center;
Chris@0: }
Chris@0: .image-style-preview .preview-image {
Chris@18:   position: relative;
Chris@0:   margin: auto;
Chris@0: }
Chris@0: .image-style-preview .preview-image .width {
Chris@18:   position: absolute;
Chris@18:   bottom: -6px;
Chris@18:   left: -1px;
Chris@18:   box-sizing: content-box;
Chris@18:   height: 2px;
Chris@0:   border: 1px solid #666;
Chris@0:   border-top: none;
Chris@0: }
Chris@0: .image-style-preview .preview-image .width span {
Chris@0:   position: relative;
Chris@0:   top: 4px;
Chris@0: }
Chris@0: .image-style-preview .preview-image .height {
Chris@18:   position: absolute;
Chris@18:   top: -1px;
Chris@18:   right: -6px;
Chris@18:   box-sizing: content-box;
Chris@18:   width: 2px;
Chris@0:   border: 1px solid #666;
Chris@0:   border-left: none;
Chris@0: }
Chris@0: .image-style-preview .preview-image .height span {
Chris@0:   position: absolute;
Chris@0:   top: 50%;
Chris@18:   left: 10px;
Chris@18:   height: 2em;
Chris@18:   margin-top: -1em;
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * Improve image style preview on narrow viewports.
Chris@0:  */
Chris@0: @media screen and (max-width: 470px) {
Chris@0:   .image-style-preview .preview-image-wrapper {
Chris@0:     float: none;
Chris@0:     margin-bottom: 1em;
Chris@0:   }
Chris@0:   .image-style-preview .preview-image-wrapper:last-child {
Chris@0:     margin-bottom: 0;
Chris@0:   }
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * Image anchor element.
Chris@0:  */
Chris@0: .image-anchor {
Chris@0:   width: auto;
Chris@0: }
Chris@0: .image-anchor tr {
Chris@0:   background: none;
Chris@0: }
Chris@0: .image-anchor td {
Chris@0:   border: 1px solid #ccc;
Chris@0: }