image.admin.css 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. /**
  2. * Image style configuration pages.
  3. */
  4. .image-style-new,
  5. .image-style-new div {
  6. display: inline;
  7. }
  8. .image-style-preview .preview-image-wrapper {
  9. top: 50%;
  10. float: left;
  11. width: 48%;
  12. padding-bottom: 2em;
  13. text-align: center;
  14. }
  15. .image-style-preview .preview-image {
  16. position: relative;
  17. margin: auto;
  18. }
  19. .image-style-preview .preview-image .width {
  20. position: absolute;
  21. bottom: -6px;
  22. left: -1px;
  23. box-sizing: content-box;
  24. height: 2px;
  25. border: 1px solid #666;
  26. border-top: none;
  27. }
  28. .image-style-preview .preview-image .width span {
  29. position: relative;
  30. top: 4px;
  31. }
  32. .image-style-preview .preview-image .height {
  33. position: absolute;
  34. top: -1px;
  35. right: -6px;
  36. box-sizing: content-box;
  37. width: 2px;
  38. border: 1px solid #666;
  39. border-left: none;
  40. }
  41. .image-style-preview .preview-image .height span {
  42. position: absolute;
  43. top: 50%;
  44. left: 10px;
  45. height: 2em;
  46. margin-top: -1em;
  47. }
  48. /**
  49. * Improve image style preview on narrow viewports.
  50. */
  51. @media screen and (max-width: 470px) {
  52. .image-style-preview .preview-image-wrapper {
  53. float: none;
  54. margin-bottom: 1em;
  55. }
  56. .image-style-preview .preview-image-wrapper:last-child {
  57. margin-bottom: 0;
  58. }
  59. }
  60. /**
  61. * Image anchor element.
  62. */
  63. .image-anchor {
  64. width: auto;
  65. }
  66. .image-anchor tr {
  67. background: none;
  68. }
  69. .image-anchor td {
  70. border: 1px solid #ccc;
  71. }