image.admin.css

Same filename in this branch
  1. 10 core/themes/stable9/css/image/image.admin.css
  2. 10 core/themes/claro/css/components/image.admin.css
  3. 10 core/modules/ckeditor5/css/image.admin.css
Same filename in other branches
  1. 7.x modules/image/image.admin.css
  2. 9 core/themes/stable9/css/image/image.admin.css
  3. 9 core/themes/stable/css/image/image.admin.css
  4. 9 core/modules/ckeditor5/css/image.admin.css
  5. 9 core/modules/image/css/image.admin.css
  6. 8.9.x core/themes/stable/css/image/image.admin.css
  7. 8.9.x core/modules/image/css/image.admin.css
  8. 11.x core/themes/stable9/css/image/image.admin.css
  9. 11.x core/themes/claro/css/components/image.admin.css
  10. 11.x core/modules/ckeditor5/css/image.admin.css
  11. 11.x core/modules/image/css/image.admin.css
/**
 * Image style configuration pages.
 */
.image-style-new,
.image-style-new div {
  display: inline;
}
.image-style-preview .preview-image-wrapper {
  top: 50%;
  float: left;
  width: 48%;
  padding-bottom: 2em;
  text-align: center;
}
.image-style-preview .preview-image {
  position: relative;
  margin: auto;
}
.image-style-preview .preview-image .width {
  position: absolute;
  bottom: -6px;
  left: -1px;
  box-sizing: content-box;
  height: 2px;
  border: 1px solid #666;
  border-top: none;
}
.image-style-preview .preview-image .width span {
  position: relative;
  top: 4px;
}
.image-style-preview .preview-image .height {
  position: absolute;
  top: -1px;
  right: -6px;
  box-sizing: content-box;
  width: 2px;
  border: 1px solid #666;
  border-left: none;
}
.image-style-preview .preview-image .height span {
  position: absolute;
  top: 50%;
  left: 10px;
  height: 2em;
  margin-top: -1em;
}

/**
 * Improve image style preview on narrow viewports.
 */
@media screen and (max-width: 470px) {
  .image-style-preview .preview-image-wrapper {
    float: none;
    margin-bottom: 1em;
  }
  .image-style-preview .preview-image-wrapper:last-child {
    margin-bottom: 0;
  }
}

/**
 * Image anchor element.
 */
.image-anchor {
  width: auto;
}
.image-anchor tr {
  background: none;
}
.image-anchor td {
  border: 1px solid #ccc;
}

File

core/modules/image/css/image.admin.css

View source
  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. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.