image.theme.css 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. /**
  2. * @file
  3. * Theme styles for the Image module's in-place editor.
  4. */
  5. .quickedit-image-dropzone {
  6. background: rgba(116, 183, 255, 0.8);
  7. transition: background 0.2s;
  8. }
  9. .quickedit-image-icon {
  10. margin: 0 0 10px 0;
  11. transition: margin 0.5s;
  12. }
  13. .quickedit-image-dropzone.hover {
  14. background: rgba(116, 183, 255, 0.9);
  15. }
  16. .quickedit-image-dropzone.error {
  17. background: rgba(255, 52, 27, 0.81);
  18. }
  19. .quickedit-image-dropzone.upload .quickedit-image-icon {
  20. background-image: url('../../../images/image/upload.svg');
  21. }
  22. .quickedit-image-dropzone.error .quickedit-image-icon {
  23. background-image: url('../../../images/image/error.svg');
  24. }
  25. .quickedit-image-dropzone.loading .quickedit-image-icon {
  26. margin: -10px 0 20px 0;
  27. }
  28. .quickedit-image-dropzone.loading .quickedit-image-icon::after {
  29. display: block;
  30. content: "";
  31. margin-left: -10px;
  32. margin-top: -5px;
  33. animation-duration: 2s;
  34. animation-name: quickedit-image-spin;
  35. animation-iteration-count: infinite;
  36. animation-timing-function: linear;
  37. width: 60px;
  38. height: 60px;
  39. border-style: solid;
  40. border-radius: 35px;
  41. border-width: 5px;
  42. border-color: white transparent transparent transparent;
  43. }
  44. @keyframes quickedit-image-spin {
  45. 0% {
  46. transform: rotate(0deg);
  47. }
  48. 50% {
  49. transform: rotate(180deg);
  50. }
  51. 100% {
  52. transform: rotate(360deg);
  53. }
  54. }
  55. .quickedit-image-text {
  56. text-align: center;
  57. color: white;
  58. font-family: "Droid sans", "Lucida Grande", sans-serif;
  59. font-size: 16px;
  60. user-select: none;
  61. -webkit-user-select: none;
  62. -moz-user-select: none;
  63. -ms-user-select: none;
  64. }
  65. .quickedit-image-field-info {
  66. background: rgba(0, 0, 0, 0.05);
  67. border-top: 1px solid #c5c5c5;
  68. padding: 5px;
  69. }
  70. .quickedit-image-field-info div {
  71. margin-right: 10px; /* LTR */
  72. }
  73. .quickedit-image-field-info div:last-child {
  74. margin-right: 0; /* LTR */
  75. }
  76. [dir="rtl"] .quickedit-image-field-info div {
  77. margin-left: 10px;
  78. margin-right: 0;
  79. }
  80. [dir="rtl"] .quickedit-image-field-info div:last-child {
  81. margin-left: 0;
  82. }
  83. .quickedit-image-errors .messages__wrapper {
  84. margin: 0;
  85. padding: 0;
  86. }
  87. .quickedit-image-errors .messages--error {
  88. box-shadow: none;
  89. }