You are here

geysir.paragraphs.css in Geysir 8

*[data-geysir-field-paragraph-field-wrapper] .field--item,
.geysir-field-paragraph-wrapper > * {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.geysir-field-paragraph-wrapper {
  position: relative;
  clear: both;
}

.geysir-field-paragraph-wrapper:hover {
  outline: 5px solid rgba(85, 142, 213, 0.5);
}

.geysir-field-paragraph-wrapper:hover:after {
  background-color: rgba(85, 142, 213, 0.5);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.geysir-field-paragraph-wrapper:hover .geysir-field-paragraph-wrapper:hover {
  outline-color: rgba(0, 0, 0, 0.5);
}

.geysir-field-paragraph-links {
  display: none;
  margin: 0;
  padding: 0;
  position: static;
}

.geysir-field-paragraph-wrapper:hover .geysir-field-paragraph-links {
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
}

.geysir-field-paragraph-wrapper .geysir-field-paragraph-links li {
  z-index: 101;
}

.geysir-field-paragraph-wrapper > .geysir-field-paragraph-links li {
  z-index: 100;
}

.geysir-field-paragraph-links li {
  display: block;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 50%;
}

.geysir-field-paragraph-links li.edit {
  top: 50%;
  transform: translate(75%, -50%);
}

.geysir-field-paragraph-links li.delete {
  top: 50%;
  transform: translate(-175%, -50%);
}

.geysir-field-paragraph-links li.cut {
  top: 50%;
  transform: translate(-50%, -50%);
}

.geysir-field-paragraph-links li.add-before,
.geysir-field-paragraph-links li.add-after {
  transform: translateX(-50%);
}

.geysir-field-paragraph-links li.add-after {
  bottom: -23px;
}

.geysir-field-paragraph-wrapper .geysir-field-paragraph-wrapper .geysir-field-paragraph-links li.add-after {
  bottom: auto;
  top: 50%;
  transform: translate(250%, -50%);
}

.geysir-field-paragraph-links li.add-before {
  top: -23px;
}

.geysir-field-paragraph-links li.paste-after,
.geysir-field-paragraph-links li.paste-before {
  display: none;
  margin: 0 0 0 -20px;
  position: absolute;
  left: 50%;
}

.geysir-field-paragraph-links li.paste-after {
  bottom: -23px;
}

.geysir-field-paragraph-links li.paste-before {
  top: -23px;
}

.geysir-field-paragraph-links.geysir-field-paragraph-add-first {
  display: block;
}
.geysir-field-paragraph-links.geysir-field-paragraph-add-first li.add-before {
  margin-top: 40px;
  position: relative;
}

.geysir-cut-paste .geysir-field-paragraph-links li {
  display: none;
}

.geysir-cut-paste .geysir-field-paragraph-links li.paste-after,
.geysir-cut-paste .geysir-field-paragraph-links li.paste-before {
  display: block;
}

.geysir-cut-paste .geysir-cut-paste-disabled .geysir-field-paragraph-links li.paste-after,
.geysir-cut-paste .geysir-cut-paste-disabled .geysir-field-paragraph-links li.paste-before {
  display: none;
}

.geysir-field-paragraph-wrapper.geysir-cut-paste-disabled {
  outline: 3px solid rgba(0, 0, 0, 0.1);
}

.geysir-field-paragraph-wrapper.geysir-cut-paste-disabled:after {
  background-color: rgba(0, 0, 0, 0.1);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.geysir-field-paragraph-wrapper .geysir-field-paragraph-wrapper .geysir-field-paragraph-links li.add-before {
  top: 50%;
  transform: translate(-350%, -50%);
}

.geysir-field-paragraph-links .ajax-progress {
  left: 50%;
  margin: -5px 0 0 -8px;
  padding: 0;
  position: absolute;
  top: 50%;
}

.geysir-field-paragraph-links .ajax-progress-throbber .throbber {
  display: block;
  height: 13px;
  padding: 0;
  width: 17px;
}

.geysir-field-paragraph-links a {
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  border: 2px solid #558ed5;
  border-radius: 50%;
  color: #558ed5;
  display: block;
  font-weight: bold;
  height: 40px;
  padding: 0;
  text-indent: -9999px;
  width: 40px;
}

.geysir-field-paragraph-links a.disabled {
  background-color: #dddddd;
  border: 2px solid #aaaaaa;
  color: #aaaaaa;
}

.geysir-field-paragraph-wrapper .geysir-field-paragraph-wrapper:hover .geysir-field-paragraph-links a:hover,
.geysir-field-paragraph-links a:hover {
  background-color: #f78a5f;
  border-color: #f78a5f;
  box-shadow: 0 0 5px #000;
  color: #fff;
}

.geysir-field-paragraph-links a.disabled:hover {
  background-color: #dddddd;
  border-color: #aaaaaa;
  cursor: not-allowed;
  box-shadow: none;
}

.geysir-field-paragraph-links li.add-after a,
.geysir-field-paragraph-links li.add-before a {
  background-image: url(../images/geysir-add.svg);
}

.geysir-field-paragraph-links li.cut a {
  background-image: url(../images/geysir-scissors.svg);
}

.geysir-field-paragraph-links li.delete a {
  background-image: url(../images/geysir-trash.svg);
}

.geysir-field-paragraph-links li.edit a {
  background-image: url(../images/geysir-pencil.svg);
}

.geysir-field-paragraph-links li.paste-after a,
.geysir-field-paragraph-links li.paste-before a {
  background-image: url(../images/geysir-paste.svg);
}

File

css/geysir.paragraphs.css
View source
  1. *[data-geysir-field-paragraph-field-wrapper] .field--item,
  2. .geysir-field-paragraph-wrapper > * {
  3. margin-bottom: 0 !important;
  4. margin-top: 0 !important;
  5. }
  6. .geysir-field-paragraph-wrapper {
  7. position: relative;
  8. clear: both;
  9. }
  10. .geysir-field-paragraph-wrapper:hover {
  11. outline: 5px solid rgba(85, 142, 213, 0.5);
  12. }
  13. .geysir-field-paragraph-wrapper:hover:after {
  14. background-color: rgba(85, 142, 213, 0.5);
  15. bottom: 0;
  16. content: "";
  17. left: 0;
  18. position: absolute;
  19. right: 0;
  20. top: 0;
  21. }
  22. .geysir-field-paragraph-wrapper:hover .geysir-field-paragraph-wrapper:hover {
  23. outline-color: rgba(0, 0, 0, 0.5);
  24. }
  25. .geysir-field-paragraph-links {
  26. display: none;
  27. margin: 0;
  28. padding: 0;
  29. position: static;
  30. }
  31. .geysir-field-paragraph-wrapper:hover .geysir-field-paragraph-links {
  32. -ms-flex-align: center;
  33. -webkit-align-items: center;
  34. -webkit-box-align: center;
  35. align-items: center;
  36. display: -ms-flexbox;
  37. display: -webkit-flex;
  38. display: flex;
  39. justify-content: center;
  40. }
  41. .geysir-field-paragraph-wrapper .geysir-field-paragraph-links li {
  42. z-index: 101;
  43. }
  44. .geysir-field-paragraph-wrapper > .geysir-field-paragraph-links li {
  45. z-index: 100;
  46. }
  47. .geysir-field-paragraph-links li {
  48. display: block;
  49. margin: 0;
  50. padding: 0;
  51. position: absolute;
  52. left: 50%;
  53. }
  54. .geysir-field-paragraph-links li.edit {
  55. top: 50%;
  56. transform: translate(75%, -50%);
  57. }
  58. .geysir-field-paragraph-links li.delete {
  59. top: 50%;
  60. transform: translate(-175%, -50%);
  61. }
  62. .geysir-field-paragraph-links li.cut {
  63. top: 50%;
  64. transform: translate(-50%, -50%);
  65. }
  66. .geysir-field-paragraph-links li.add-before,
  67. .geysir-field-paragraph-links li.add-after {
  68. transform: translateX(-50%);
  69. }
  70. .geysir-field-paragraph-links li.add-after {
  71. bottom: -23px;
  72. }
  73. .geysir-field-paragraph-wrapper .geysir-field-paragraph-wrapper .geysir-field-paragraph-links li.add-after {
  74. bottom: auto;
  75. top: 50%;
  76. transform: translate(250%, -50%);
  77. }
  78. .geysir-field-paragraph-links li.add-before {
  79. top: -23px;
  80. }
  81. .geysir-field-paragraph-links li.paste-after,
  82. .geysir-field-paragraph-links li.paste-before {
  83. display: none;
  84. margin: 0 0 0 -20px;
  85. position: absolute;
  86. left: 50%;
  87. }
  88. .geysir-field-paragraph-links li.paste-after {
  89. bottom: -23px;
  90. }
  91. .geysir-field-paragraph-links li.paste-before {
  92. top: -23px;
  93. }
  94. .geysir-field-paragraph-links.geysir-field-paragraph-add-first {
  95. display: block;
  96. }
  97. .geysir-field-paragraph-links.geysir-field-paragraph-add-first li.add-before {
  98. margin-top: 40px;
  99. position: relative;
  100. }
  101. .geysir-cut-paste .geysir-field-paragraph-links li {
  102. display: none;
  103. }
  104. .geysir-cut-paste .geysir-field-paragraph-links li.paste-after,
  105. .geysir-cut-paste .geysir-field-paragraph-links li.paste-before {
  106. display: block;
  107. }
  108. .geysir-cut-paste .geysir-cut-paste-disabled .geysir-field-paragraph-links li.paste-after,
  109. .geysir-cut-paste .geysir-cut-paste-disabled .geysir-field-paragraph-links li.paste-before {
  110. display: none;
  111. }
  112. .geysir-field-paragraph-wrapper.geysir-cut-paste-disabled {
  113. outline: 3px solid rgba(0, 0, 0, 0.1);
  114. }
  115. .geysir-field-paragraph-wrapper.geysir-cut-paste-disabled:after {
  116. background-color: rgba(0, 0, 0, 0.1);
  117. bottom: 0;
  118. content: "";
  119. left: 0;
  120. position: absolute;
  121. right: 0;
  122. top: 0;
  123. }
  124. .geysir-field-paragraph-wrapper .geysir-field-paragraph-wrapper .geysir-field-paragraph-links li.add-before {
  125. top: 50%;
  126. transform: translate(-350%, -50%);
  127. }
  128. .geysir-field-paragraph-links .ajax-progress {
  129. left: 50%;
  130. margin: -5px 0 0 -8px;
  131. padding: 0;
  132. position: absolute;
  133. top: 50%;
  134. }
  135. .geysir-field-paragraph-links .ajax-progress-throbber .throbber {
  136. display: block;
  137. height: 13px;
  138. padding: 0;
  139. width: 17px;
  140. }
  141. .geysir-field-paragraph-links a {
  142. background-color: #fff;
  143. background-position: center;
  144. background-repeat: no-repeat;
  145. background-size: 20px 20px;
  146. border: 2px solid #558ed5;
  147. border-radius: 50%;
  148. color: #558ed5;
  149. display: block;
  150. font-weight: bold;
  151. height: 40px;
  152. padding: 0;
  153. text-indent: -9999px;
  154. width: 40px;
  155. }
  156. .geysir-field-paragraph-links a.disabled {
  157. background-color: #dddddd;
  158. border: 2px solid #aaaaaa;
  159. color: #aaaaaa;
  160. }
  161. .geysir-field-paragraph-wrapper .geysir-field-paragraph-wrapper:hover .geysir-field-paragraph-links a:hover,
  162. .geysir-field-paragraph-links a:hover {
  163. background-color: #f78a5f;
  164. border-color: #f78a5f;
  165. box-shadow: 0 0 5px #000;
  166. color: #fff;
  167. }
  168. .geysir-field-paragraph-links a.disabled:hover {
  169. background-color: #dddddd;
  170. border-color: #aaaaaa;
  171. cursor: not-allowed;
  172. box-shadow: none;
  173. }
  174. .geysir-field-paragraph-links li.add-after a,
  175. .geysir-field-paragraph-links li.add-before a {
  176. background-image: url(../images/geysir-add.svg);
  177. }
  178. .geysir-field-paragraph-links li.cut a {
  179. background-image: url(../images/geysir-scissors.svg);
  180. }
  181. .geysir-field-paragraph-links li.delete a {
  182. background-image: url(../images/geysir-trash.svg);
  183. }
  184. .geysir-field-paragraph-links li.edit a {
  185. background-image: url(../images/geysir-pencil.svg);
  186. }
  187. .geysir-field-paragraph-links li.paste-after a,
  188. .geysir-field-paragraph-links li.paste-before a {
  189. background-image: url(../images/geysir-paste.svg);
  190. }