image.theme.css

Same filename in this branch
  1. 9 core/themes/stable/css/quickedit/editors/image.theme.css
  2. 9 core/modules/quickedit/css/editors/image.theme.css
Same filename in other branches
  1. 8.9.x core/themes/stable/css/image/editors/image.theme.css
  2. 8.9.x core/modules/image/css/editors/image.theme.css

Theme styles for the Quick Edit image in-place editor.

File

core/themes/stable9/css/quickedit/editors/image.theme.css

View source
  1. /**
  2. * @file
  3. * Theme styles for the Quick Edit image in-place editor.
  4. */
  5. .quickedit-image-dropzone {
  6. transition: background 0.2s;
  7. background: rgba(116, 183, 255, 0.8);
  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("../../../../../modules/quickedit/images/upload.svg");
  21. }
  22. .quickedit-image-dropzone.error .quickedit-image-icon {
  23. background-image: url("../../../../../modules/quickedit/images/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. width: 60px;
  31. height: 60px;
  32. margin-top: -5px;
  33. margin-left: -10px;
  34. content: "";
  35. animation-name: quickedit-image-spin;
  36. animation-duration: 2s;
  37. animation-timing-function: linear;
  38. animation-iteration-count: infinite;
  39. border-width: 5px;
  40. border-style: solid;
  41. border-color: white transparent transparent transparent;
  42. border-radius: 35px;
  43. }
  44. @keyframes quickedit-image-spin {
  45. 0% { transform: rotate(0deg); }
  46. 50% { transform: rotate(180deg); }
  47. 100% { transform: rotate(360deg); }
  48. }
  49. .quickedit-image-text {
  50. -webkit-user-select: none;
  51. -moz-user-select: none;
  52. -ms-user-select: none;
  53. user-select: none;
  54. text-align: center;
  55. color: white;
  56. font-family: "Droid sans", "Lucida Grande", sans-serif;
  57. font-size: 16px;
  58. }
  59. .quickedit-image-field-info {
  60. padding: 5px;
  61. border-top: 1px solid #c5c5c5;
  62. background: rgba(0, 0, 0, 0.05);
  63. }
  64. .quickedit-image-field-info div {
  65. margin-right: 10px; /* LTR */
  66. }
  67. .quickedit-image-field-info div:last-child {
  68. margin-right: 0; /* LTR */
  69. }
  70. [dir="rtl"] .quickedit-image-field-info div {
  71. margin-right: 0;
  72. margin-left: 10px;
  73. }
  74. [dir="rtl"] .quickedit-image-field-info div:last-child {
  75. margin-left: 0;
  76. }
  77. .quickedit-image-errors .messages__wrapper {
  78. margin: 0;
  79. padding: 0;
  80. }
  81. .quickedit-image-errors .messages--error {
  82. box-shadow: none;
  83. }

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