image.admin.css 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. /**
  2. * Image style configuration pages.
  3. */
  4. .image-style-new,
  5. .image-style-new div {
  6. display: inline-flex;
  7. }
  8. .image-style-preview .preview-image-wrapper {
  9. float: left;
  10. padding-bottom: 2em;
  11. text-align: center;
  12. top: 50%;
  13. width: 100%;
  14. }
  15. .image-style-preview .preview-image {
  16. margin: 10px auto auto auto;
  17. position: relative;
  18. }
  19. .image-style-preview .preview-image .width {
  20. border: 1px solid #666;
  21. border-top: none;
  22. bottom: -6px;
  23. height: 2px;
  24. left: -1px;
  25. position: absolute;
  26. box-sizing: content-box;
  27. }
  28. .image-style-preview .preview-image .width span {
  29. position: relative;
  30. top: 4px;
  31. }
  32. .image-style-preview .preview-image .height {
  33. border: 1px solid #666;
  34. border-left: none;
  35. position: absolute;
  36. right: -6px;
  37. top: -1px;
  38. width: 2px;
  39. box-sizing: content-box;
  40. }
  41. .image-style-preview .preview-image .height span {
  42. height: 2em;
  43. left: 10px;
  44. margin-top: -1em;
  45. position: absolute;
  46. top: 50%;
  47. width: 60px;
  48. text-align: left;
  49. }
  50. .image-style-new .button {
  51. margin-left: 20px;
  52. }
  53. .image-style-preview {
  54. display: flex;
  55. flex-direction: column;
  56. align-items: center;
  57. justify-content: center;
  58. }
  59. .image-style-preview .preview-image-wrapper {
  60. margin-bottom: 40px;
  61. }
  62. .image-style-preview .preview-image-wrapper:last-child {
  63. margin-bottom: 20px;
  64. }
  65. @media screen and (min-width: 640px) {
  66. .image-style-preview {
  67. flex-direction: row;
  68. }
  69. .image-style-preview .preview-image-wrapper {
  70. margin-bottom: 0;
  71. }
  72. }
  73. .image-effect-form .form-number {
  74. max-width: 280px;
  75. }
  76. /**
  77. * Image anchor element.
  78. */
  79. .image-anchor {
  80. width: auto;
  81. }
  82. .image-anchor tr {
  83. background: none;
  84. }
  85. .image-anchor td {
  86. border: 1px solid #ccc;
  87. }