@wordpress/editor 14.33.3 → 14.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (301) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build/components/collab-sidebar/comment-author-info.js +26 -14
  3. package/build/components/collab-sidebar/comment-author-info.js.map +2 -2
  4. package/build/components/document-bar/index.js +16 -3
  5. package/build/components/document-bar/index.js.map +2 -2
  6. package/build/components/editor/index.js +23 -4
  7. package/build/components/editor/index.js.map +3 -3
  8. package/build/components/editor-interface/index.js +15 -10
  9. package/build/components/editor-interface/index.js.map +3 -3
  10. package/build/components/entities-saved-states/entity-type-list.js +19 -15
  11. package/build/components/entities-saved-states/entity-type-list.js.map +3 -3
  12. package/build/components/global-styles/block-link.js +70 -0
  13. package/build/components/global-styles/block-link.js.map +7 -0
  14. package/build/components/global-styles/header.js +54 -0
  15. package/build/components/global-styles/header.js.map +7 -0
  16. package/build/components/global-styles/hooks.js +176 -0
  17. package/build/components/global-styles/hooks.js.map +7 -0
  18. package/build/components/global-styles/index.js +138 -0
  19. package/build/components/global-styles/index.js.map +7 -0
  20. package/build/components/global-styles/menu.js +95 -0
  21. package/build/components/global-styles/menu.js.map +7 -0
  22. package/build/components/global-styles-provider/index.js +3 -49
  23. package/build/components/global-styles-provider/index.js.map +3 -3
  24. package/build/components/global-styles-renderer/index.js +55 -0
  25. package/build/components/global-styles-renderer/index.js.map +7 -0
  26. package/build/components/global-styles-sidebar/default-sidebar.js +66 -0
  27. package/build/components/global-styles-sidebar/default-sidebar.js.map +7 -0
  28. package/build/components/global-styles-sidebar/index.js +182 -0
  29. package/build/components/global-styles-sidebar/index.js.map +7 -0
  30. package/build/components/global-styles-sidebar/welcome-guide-image.js +37 -0
  31. package/build/components/global-styles-sidebar/welcome-guide-image.js.map +7 -0
  32. package/build/components/global-styles-sidebar/welcome-guide.js +143 -0
  33. package/build/components/global-styles-sidebar/welcome-guide.js.map +7 -0
  34. package/build/components/header/index.js +12 -9
  35. package/build/components/header/index.js.map +2 -2
  36. package/build/components/post-featured-image/index.js +32 -1
  37. package/build/components/post-featured-image/index.js.map +3 -3
  38. package/build/components/provider/index.js +0 -2
  39. package/build/components/provider/index.js.map +3 -3
  40. package/build/components/style-book/categories.js +86 -0
  41. package/build/components/style-book/categories.js.map +7 -0
  42. package/build/components/style-book/color-examples.js +64 -0
  43. package/build/components/style-book/color-examples.js.map +7 -0
  44. package/build/components/style-book/constants.js +319 -0
  45. package/build/components/style-book/constants.js.map +7 -0
  46. package/build/components/style-book/duotone-examples.js +68 -0
  47. package/build/components/style-book/duotone-examples.js.map +7 -0
  48. package/build/components/style-book/examples.js +237 -0
  49. package/build/components/style-book/examples.js.map +7 -0
  50. package/build/components/style-book/index.js +627 -0
  51. package/build/components/style-book/index.js.map +7 -0
  52. package/build/components/style-book/types.js +17 -0
  53. package/build/components/style-book/types.js.map +7 -0
  54. package/build/components/styles-canvas/index.js +138 -0
  55. package/build/components/styles-canvas/index.js.map +7 -0
  56. package/build/components/styles-canvas/revisions.js +121 -0
  57. package/build/components/styles-canvas/revisions.js.map +7 -0
  58. package/build/components/styles-canvas/style-book.js +68 -0
  59. package/build/components/styles-canvas/style-book.js.map +7 -0
  60. package/build/components/visual-editor/index.js +4 -3
  61. package/build/components/visual-editor/index.js.map +2 -2
  62. package/build/dataviews/fields/content-preview/content-preview-view.js.map +2 -2
  63. package/build/hooks/index.js +1 -0
  64. package/build/hooks/index.js.map +2 -2
  65. package/build/hooks/media-upload.js +15 -4
  66. package/build/hooks/media-upload.js.map +3 -3
  67. package/build/hooks/push-changes-to-global-styles/index.js +322 -0
  68. package/build/hooks/push-changes-to-global-styles/index.js.map +7 -0
  69. package/build/hooks/use-global-styles-output.js +74 -0
  70. package/build/hooks/use-global-styles-output.js.map +7 -0
  71. package/build/private-apis.js +10 -5
  72. package/build/private-apis.js.map +3 -3
  73. package/build/store/private-actions.js +23 -0
  74. package/build/store/private-actions.js.map +2 -2
  75. package/build/store/private-selectors.js +10 -0
  76. package/build/store/private-selectors.js.map +2 -2
  77. package/build/store/reducer.js +24 -0
  78. package/build/store/reducer.js.map +2 -2
  79. package/build/{components/editor-interface/content-slot-fill.js → utils/set-nested-value.js} +24 -10
  80. package/build/utils/set-nested-value.js.map +7 -0
  81. package/build-module/components/collab-sidebar/comment-author-info.js +26 -14
  82. package/build-module/components/collab-sidebar/comment-author-info.js.map +2 -2
  83. package/build-module/components/document-bar/index.js +16 -3
  84. package/build-module/components/document-bar/index.js.map +2 -2
  85. package/build-module/components/editor/index.js +23 -4
  86. package/build-module/components/editor/index.js.map +2 -2
  87. package/build-module/components/editor-interface/index.js +15 -10
  88. package/build-module/components/editor-interface/index.js.map +2 -2
  89. package/build-module/components/entities-saved-states/entity-type-list.js +18 -14
  90. package/build-module/components/entities-saved-states/entity-type-list.js.map +2 -2
  91. package/build-module/components/global-styles/block-link.js +46 -0
  92. package/build-module/components/global-styles/block-link.js.map +7 -0
  93. package/build-module/components/global-styles/header.js +41 -0
  94. package/build-module/components/global-styles/header.js.map +7 -0
  95. package/build-module/components/global-styles/hooks.js +154 -0
  96. package/build-module/components/global-styles/hooks.js.map +7 -0
  97. package/build-module/components/global-styles/index.js +112 -0
  98. package/build-module/components/global-styles/index.js.map +7 -0
  99. package/build-module/components/global-styles/menu.js +71 -0
  100. package/build-module/components/global-styles/menu.js.map +7 -0
  101. package/build-module/components/global-styles-provider/index.js +3 -37
  102. package/build-module/components/global-styles-provider/index.js.map +2 -2
  103. package/build-module/components/global-styles-renderer/index.js +31 -0
  104. package/build-module/components/global-styles-renderer/index.js.map +7 -0
  105. package/build-module/components/global-styles-sidebar/default-sidebar.js +49 -0
  106. package/build-module/components/global-styles-sidebar/default-sidebar.js.map +7 -0
  107. package/build-module/components/global-styles-sidebar/index.js +152 -0
  108. package/build-module/components/global-styles-sidebar/index.js.map +7 -0
  109. package/build-module/components/global-styles-sidebar/welcome-guide-image.js +17 -0
  110. package/build-module/components/global-styles-sidebar/welcome-guide-image.js.map +7 -0
  111. package/build-module/components/global-styles-sidebar/welcome-guide.js +113 -0
  112. package/build-module/components/global-styles-sidebar/welcome-guide.js.map +7 -0
  113. package/build-module/components/header/index.js +12 -9
  114. package/build-module/components/header/index.js.map +2 -2
  115. package/build-module/components/post-featured-image/index.js +35 -3
  116. package/build-module/components/post-featured-image/index.js.map +2 -2
  117. package/build-module/components/provider/index.js +0 -2
  118. package/build-module/components/provider/index.js.map +2 -2
  119. package/build-module/components/style-book/categories.js +64 -0
  120. package/build-module/components/style-book/categories.js.map +7 -0
  121. package/build-module/components/style-book/color-examples.js +37 -0
  122. package/build-module/components/style-book/color-examples.js.map +7 -0
  123. package/build-module/components/style-book/constants.js +290 -0
  124. package/build-module/components/style-book/constants.js.map +7 -0
  125. package/build-module/components/style-book/duotone-examples.js +48 -0
  126. package/build-module/components/style-book/duotone-examples.js.map +7 -0
  127. package/build-module/components/style-book/examples.js +208 -0
  128. package/build-module/components/style-book/examples.js.map +7 -0
  129. package/build-module/components/style-book/index.js +618 -0
  130. package/build-module/components/style-book/index.js.map +7 -0
  131. package/build-module/components/style-book/types.js +1 -0
  132. package/build-module/components/style-book/types.js.map +7 -0
  133. package/build-module/components/styles-canvas/index.js +104 -0
  134. package/build-module/components/styles-canvas/index.js.map +7 -0
  135. package/build-module/components/styles-canvas/revisions.js +107 -0
  136. package/build-module/components/styles-canvas/revisions.js.map +7 -0
  137. package/build-module/components/styles-canvas/style-book.js +38 -0
  138. package/build-module/components/styles-canvas/style-book.js.map +7 -0
  139. package/build-module/components/visual-editor/index.js +4 -3
  140. package/build-module/components/visual-editor/index.js.map +2 -2
  141. package/build-module/dataviews/fields/content-preview/content-preview-view.js.map +2 -2
  142. package/build-module/hooks/index.js +1 -0
  143. package/build-module/hooks/index.js.map +2 -2
  144. package/build-module/hooks/media-upload.js +19 -5
  145. package/build-module/hooks/media-upload.js.map +2 -2
  146. package/build-module/hooks/push-changes-to-global-styles/index.js +309 -0
  147. package/build-module/hooks/push-changes-to-global-styles/index.js.map +7 -0
  148. package/build-module/hooks/use-global-styles-output.js +49 -0
  149. package/build-module/hooks/use-global-styles-output.js.map +7 -0
  150. package/build-module/private-apis.js +10 -8
  151. package/build-module/private-apis.js.map +2 -2
  152. package/build-module/store/private-actions.js +20 -0
  153. package/build-module/store/private-actions.js.map +2 -2
  154. package/build-module/store/private-selectors.js +8 -0
  155. package/build-module/store/private-selectors.js.map +2 -2
  156. package/build-module/store/reducer.js +22 -0
  157. package/build-module/store/reducer.js.map +2 -2
  158. package/build-module/utils/set-nested-value.js +23 -0
  159. package/build-module/utils/set-nested-value.js.map +7 -0
  160. package/build-style/style-rtl.css +3017 -11
  161. package/build-style/style.css +3018 -11
  162. package/build-types/components/collab-sidebar/comment-author-info.d.ts +5 -16
  163. package/build-types/components/collab-sidebar/comment-author-info.d.ts.map +1 -1
  164. package/build-types/components/document-bar/index.d.ts +2 -2
  165. package/build-types/components/document-bar/index.d.ts.map +1 -1
  166. package/build-types/components/editor/index.d.ts.map +1 -1
  167. package/build-types/components/editor-interface/index.d.ts +1 -3
  168. package/build-types/components/editor-interface/index.d.ts.map +1 -1
  169. package/build-types/components/entities-saved-states/entity-type-list.d.ts.map +1 -1
  170. package/build-types/components/global-styles/block-link.d.ts +12 -0
  171. package/build-types/components/global-styles/block-link.d.ts.map +1 -0
  172. package/build-types/components/global-styles/header.d.ts +7 -0
  173. package/build-types/components/global-styles/header.d.ts.map +1 -0
  174. package/build-types/components/global-styles/hooks.d.ts +24 -0
  175. package/build-types/components/global-styles/hooks.d.ts.map +1 -0
  176. package/build-types/components/global-styles/index.d.ts +6 -0
  177. package/build-types/components/global-styles/index.d.ts.map +1 -0
  178. package/build-types/components/global-styles/menu.d.ts +13 -0
  179. package/build-types/components/global-styles/menu.d.ts.map +1 -0
  180. package/build-types/components/global-styles-provider/index.d.ts +1 -5
  181. package/build-types/components/global-styles-provider/index.d.ts.map +1 -1
  182. package/build-types/components/global-styles-renderer/index.d.ts +4 -0
  183. package/build-types/components/global-styles-renderer/index.d.ts.map +1 -0
  184. package/build-types/components/global-styles-sidebar/default-sidebar.d.ts +13 -0
  185. package/build-types/components/global-styles-sidebar/default-sidebar.d.ts.map +1 -0
  186. package/build-types/components/global-styles-sidebar/index.d.ts +2 -0
  187. package/build-types/components/global-styles-sidebar/index.d.ts.map +1 -0
  188. package/build-types/components/global-styles-sidebar/welcome-guide-image.d.ts +5 -0
  189. package/build-types/components/global-styles-sidebar/welcome-guide-image.d.ts.map +1 -0
  190. package/build-types/components/global-styles-sidebar/welcome-guide.d.ts +2 -0
  191. package/build-types/components/global-styles-sidebar/welcome-guide.d.ts.map +1 -0
  192. package/build-types/components/header/index.d.ts +1 -3
  193. package/build-types/components/header/index.d.ts.map +1 -1
  194. package/build-types/components/provider/index.d.ts.map +1 -1
  195. package/build-types/components/style-book/categories.d.ts +18 -0
  196. package/build-types/components/style-book/categories.d.ts.map +1 -0
  197. package/build-types/components/style-book/color-examples.d.ts +7 -0
  198. package/build-types/components/style-book/color-examples.d.ts.map +1 -0
  199. package/build-types/components/style-book/constants.d.ts +11 -0
  200. package/build-types/components/style-book/constants.d.ts.map +1 -0
  201. package/build-types/components/style-book/duotone-examples.d.ts +9 -0
  202. package/build-types/components/style-book/duotone-examples.d.ts.map +1 -0
  203. package/build-types/components/style-book/examples.d.ts +12 -0
  204. package/build-types/components/style-book/examples.d.ts.map +1 -0
  205. package/build-types/components/style-book/index.d.ts +31 -0
  206. package/build-types/components/style-book/index.d.ts.map +1 -0
  207. package/build-types/components/style-book/types.d.ts +72 -0
  208. package/build-types/components/style-book/types.d.ts.map +1 -0
  209. package/build-types/components/styles-canvas/index.d.ts +16 -0
  210. package/build-types/components/styles-canvas/index.d.ts.map +1 -0
  211. package/build-types/components/styles-canvas/revisions.d.ts +5 -0
  212. package/build-types/components/styles-canvas/revisions.d.ts.map +1 -0
  213. package/build-types/components/styles-canvas/style-book.d.ts +6 -0
  214. package/build-types/components/styles-canvas/style-book.d.ts.map +1 -0
  215. package/build-types/components/visual-editor/index.d.ts +1 -2
  216. package/build-types/components/visual-editor/index.d.ts.map +1 -1
  217. package/build-types/dataviews/fields/content-preview/content-preview-view.d.ts.map +1 -1
  218. package/build-types/hooks/push-changes-to-global-styles/index.d.ts +2 -0
  219. package/build-types/hooks/push-changes-to-global-styles/index.d.ts.map +1 -0
  220. package/build-types/hooks/use-global-styles-output.d.ts +18 -0
  221. package/build-types/hooks/use-global-styles-output.d.ts.map +1 -0
  222. package/build-types/private-apis.d.ts.map +1 -1
  223. package/build-types/store/private-actions.d.ts +20 -0
  224. package/build-types/store/private-actions.d.ts.map +1 -1
  225. package/build-types/store/private-selectors.d.ts +14 -0
  226. package/build-types/store/private-selectors.d.ts.map +1 -1
  227. package/build-types/store/reducer.d.ts +20 -0
  228. package/build-types/store/reducer.d.ts.map +1 -1
  229. package/build-types/utils/set-nested-value.d.ts +20 -0
  230. package/build-types/utils/set-nested-value.d.ts.map +1 -0
  231. package/package.json +40 -40
  232. package/src/components/collab-sidebar/comment-author-info.js +32 -25
  233. package/src/components/collab-sidebar/style.scss +1 -1
  234. package/src/components/document-bar/index.js +18 -3
  235. package/src/components/editor/index.js +25 -1
  236. package/src/components/editor-help/style.scss +1 -1
  237. package/src/components/editor-interface/index.js +40 -39
  238. package/src/components/entities-saved-states/entity-type-list.js +19 -17
  239. package/src/components/global-styles/block-link.js +65 -0
  240. package/src/components/global-styles/header.js +48 -0
  241. package/src/components/global-styles/hooks.js +216 -0
  242. package/src/components/global-styles/index.js +125 -0
  243. package/src/components/global-styles/menu.js +101 -0
  244. package/src/components/global-styles/style.scss +11 -0
  245. package/src/components/global-styles-provider/index.js +3 -45
  246. package/src/components/global-styles-renderer/index.js +39 -0
  247. package/src/components/global-styles-sidebar/default-sidebar.js +46 -0
  248. package/src/components/global-styles-sidebar/index.js +177 -0
  249. package/src/components/global-styles-sidebar/style.scss +119 -0
  250. package/src/components/global-styles-sidebar/welcome-guide-image.js +11 -0
  251. package/src/components/global-styles-sidebar/welcome-guide.js +136 -0
  252. package/src/components/header/index.js +11 -6
  253. package/src/components/post-featured-image/index.js +44 -1
  254. package/src/components/post-last-revision/style.scss +1 -1
  255. package/src/components/post-panel-row/style.scss +1 -0
  256. package/src/components/post-publish-panel/style.scss +1 -1
  257. package/src/components/post-publish-panel/test/__snapshots__/index.js.snap +2 -2
  258. package/src/components/provider/index.js +0 -2
  259. package/src/components/style-book/categories.ts +97 -0
  260. package/src/components/style-book/color-examples.tsx +56 -0
  261. package/src/components/style-book/constants.ts +308 -0
  262. package/src/components/style-book/duotone-examples.tsx +56 -0
  263. package/src/components/style-book/examples.tsx +273 -0
  264. package/src/components/style-book/index.js +794 -0
  265. package/src/components/style-book/style.scss +44 -0
  266. package/src/components/style-book/test/categories.js +166 -0
  267. package/src/components/style-book/types.ts +80 -0
  268. package/src/components/styles-canvas/index.js +126 -0
  269. package/src/components/styles-canvas/revisions.js +144 -0
  270. package/src/components/styles-canvas/style-book.js +57 -0
  271. package/src/components/styles-canvas/style.scss +40 -0
  272. package/src/components/visual-editor/index.js +2 -1
  273. package/src/dataviews/fields/content-preview/content-preview-view.tsx +2 -0
  274. package/src/hooks/index.js +1 -0
  275. package/src/hooks/media-upload.js +25 -5
  276. package/src/hooks/push-changes-to-global-styles/index.js +391 -0
  277. package/src/hooks/push-changes-to-global-styles/style.scss +4 -0
  278. package/src/hooks/use-global-styles-output.js +76 -0
  279. package/src/private-apis.js +10 -8
  280. package/src/store/private-actions.js +37 -0
  281. package/src/store/private-selectors.js +20 -0
  282. package/src/store/reducer.js +36 -0
  283. package/src/style.scss +7 -1
  284. package/src/utils/set-nested-value.js +39 -0
  285. package/tsconfig.json +3 -0
  286. package/tsconfig.tsbuildinfo +1 -1
  287. package/build/components/block-settings-menu/content-only-settings-menu.js +0 -186
  288. package/build/components/block-settings-menu/content-only-settings-menu.js.map +0 -7
  289. package/build/components/editor-interface/content-slot-fill.js.map +0 -7
  290. package/build-module/components/block-settings-menu/content-only-settings-menu.js +0 -161
  291. package/build-module/components/block-settings-menu/content-only-settings-menu.js.map +0 -7
  292. package/build-module/components/editor-interface/content-slot-fill.js +0 -9
  293. package/build-module/components/editor-interface/content-slot-fill.js.map +0 -7
  294. package/build-types/components/block-settings-menu/content-only-settings-menu.d.ts +0 -2
  295. package/build-types/components/block-settings-menu/content-only-settings-menu.d.ts.map +0 -1
  296. package/build-types/components/editor-interface/content-slot-fill.d.ts +0 -14
  297. package/build-types/components/editor-interface/content-slot-fill.d.ts.map +0 -1
  298. package/src/components/block-settings-menu/content-only-settings-menu.js +0 -185
  299. package/src/components/block-settings-menu/content-only-settings-menu.native.js +0 -4
  300. package/src/components/block-settings-menu/style.scss +0 -6
  301. package/src/components/editor-interface/content-slot-fill.js +0 -10
@@ -391,7 +391,7 @@
391
391
 
392
392
  .interface-complementary-area h2 {
393
393
  font-size: 13px;
394
- font-weight: 500;
394
+ font-weight: 499;
395
395
  color: #1e1e1e;
396
396
  margin-bottom: 1.5em;
397
397
  }
@@ -399,7 +399,7 @@
399
399
  .interface-complementary-area h3 {
400
400
  font-size: 11px;
401
401
  text-transform: uppercase;
402
- font-weight: 500;
402
+ font-weight: 499;
403
403
  color: #1e1e1e;
404
404
  margin-bottom: 1.5em;
405
405
  }
@@ -686,6 +686,2830 @@ body.is-fullscreen-mode .interface-interface-skeleton {
686
686
  gap: 8px;
687
687
  }
688
688
 
689
+ /**
690
+ * SCSS Variables.
691
+ *
692
+ * Please use variables from this sheet to ensure consistency across the UI.
693
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
694
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
695
+ */
696
+ /**
697
+ * Colors
698
+ */
699
+ /**
700
+ * Fonts & basic variables.
701
+ */
702
+ /**
703
+ * Typography
704
+ */
705
+ /**
706
+ * Grid System.
707
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
708
+ */
709
+ /**
710
+ * Radius scale.
711
+ */
712
+ /**
713
+ * Elevation scale.
714
+ */
715
+ /**
716
+ * Dimensions.
717
+ */
718
+ /**
719
+ * Mobile specific styles
720
+ */
721
+ /**
722
+ * Editor styles.
723
+ */
724
+ /**
725
+ * Block & Editor UI.
726
+ */
727
+ /**
728
+ * Block paddings.
729
+ */
730
+ /**
731
+ * React Native specific.
732
+ * These variables do not appear to be used anywhere else.
733
+ */
734
+ /**
735
+ * Typography
736
+ */
737
+ /**
738
+ * Breakpoints & Media Queries
739
+ */
740
+ /**
741
+ * Converts a hex value into the rgb equivalent.
742
+ *
743
+ * @param {string} hex - the hexadecimal value to convert
744
+ * @return {string} comma separated rgb values
745
+ */
746
+ /**
747
+ * Long content fade mixin
748
+ *
749
+ * Creates a fading overlay to signify that the content is longer
750
+ * than the space allows.
751
+ */
752
+ /**
753
+ * Breakpoint mixins
754
+ */
755
+ /**
756
+ * Focus styles.
757
+ */
758
+ /**
759
+ * Applies editor left position to the selector passed as argument
760
+ */
761
+ /**
762
+ * Styles that are reused verbatim in a few places
763
+ */
764
+ /**
765
+ * Allows users to opt-out of animations via OS-level preferences.
766
+ */
767
+ /**
768
+ * Reset default styles for JavaScript UI based pages.
769
+ * This is a WP-admin agnostic reset
770
+ */
771
+ /**
772
+ * Reset the WP Admin page styles for Gutenberg-like pages.
773
+ */
774
+ @media (min-width: 782px) {
775
+ .font-library-modal.font-library-modal {
776
+ width: 65vw;
777
+ }
778
+ }
779
+ .font-library-modal .components-modal__header {
780
+ border-bottom: none;
781
+ }
782
+
783
+ .font-library-modal .components-modal__content {
784
+ padding-top: 0;
785
+ margin-bottom: 70px;
786
+ }
787
+
788
+ .font-library-modal .font-library-modal__subtitle {
789
+ text-transform: uppercase;
790
+ font-weight: 499;
791
+ font-size: 11px;
792
+ }
793
+
794
+ .font-library-modal .components-navigator-screen {
795
+ padding: 3px;
796
+ }
797
+
798
+ .font-library-modal__tabpanel-layout {
799
+ margin-top: 32px;
800
+ }
801
+
802
+ .font-library-modal__tabpanel-layout .font-library-modal__loading {
803
+ width: 100%;
804
+ height: 100%;
805
+ display: flex;
806
+ position: absolute;
807
+ left: 0;
808
+ top: 0;
809
+ align-items: center;
810
+ justify-content: center;
811
+ padding-top: 124px;
812
+ }
813
+
814
+ .font-library-modal__footer {
815
+ border-top: 1px solid #ddd;
816
+ margin: 0 -32px -32px;
817
+ padding: 16px 32px;
818
+ position: absolute;
819
+ bottom: 32px;
820
+ width: 100%;
821
+ height: 70px;
822
+ background-color: #fff;
823
+ }
824
+
825
+ .font-library-modal__category-select {
826
+ min-width: 40%;
827
+ }
828
+
829
+ .font-library-modal__page-selection {
830
+ font-size: 11px;
831
+ font-weight: 499;
832
+ text-transform: uppercase;
833
+ }
834
+
835
+ @media (min-width: 600px) {
836
+ .font-library-modal__page-selection .font-library-modal__page-selection-trigger {
837
+ font-size: 11px !important;
838
+ font-weight: 499;
839
+ }
840
+ }
841
+ .font-library-modal__fonts-title {
842
+ text-transform: uppercase;
843
+ font-size: 11px;
844
+ font-weight: 600;
845
+ margin-top: 0;
846
+ margin-bottom: 0;
847
+ }
848
+
849
+ .font-library-modal__fonts-list {
850
+ list-style: none;
851
+ padding: 0;
852
+ margin-top: 0;
853
+ margin-bottom: 0;
854
+ }
855
+
856
+ .font-library-modal__fonts-list-item {
857
+ margin-bottom: 0;
858
+ }
859
+
860
+ .font-library-modal__font-card {
861
+ border: 1px solid #ddd;
862
+ width: 100%;
863
+ height: auto !important;
864
+ padding: 16px;
865
+ margin-top: -1px; /* To collapse the margin with the previous element */
866
+ background-color: #f0f0f0;
867
+ }
868
+
869
+ .font-library-modal__font-card:hover {
870
+ background-color: #f0f0f0;
871
+ }
872
+
873
+ .font-library-modal__font-card .font-library-modal__font-card__name {
874
+ font-weight: bold;
875
+ }
876
+
877
+ .font-library-modal__font-card .font-library-modal__font-card__count {
878
+ color: #757575;
879
+ }
880
+
881
+ .font-library-modal__font-card .font-library-modal__font-variant_demo-image {
882
+ display: block;
883
+ height: 24px;
884
+ width: auto;
885
+ }
886
+
887
+ .font-library-modal__font-card .font-library-modal__font-variant_demo-text {
888
+ white-space: nowrap;
889
+ flex-shrink: 0;
890
+ }
891
+
892
+ @media not (prefers-reduced-motion) {
893
+ .font-library-modal__font-card .font-library-modal__font-variant_demo-text {
894
+ transition: opacity 0.3s ease-in-out;
895
+ }
896
+ }
897
+ .font-library-modal__tablist-container {
898
+ position: sticky;
899
+ top: 0;
900
+ border-bottom: 1px solid #ddd;
901
+ background: #fff;
902
+ margin: 0 -32px;
903
+ padding: 0 16px;
904
+ z-index: 1;
905
+ }
906
+
907
+ .font-library-modal__tablist-container [role=tablist] {
908
+ margin-bottom: -1px;
909
+ }
910
+
911
+ .font-library-modal__upload-area {
912
+ align-items: center;
913
+ display: flex;
914
+ justify-content: center;
915
+ height: 256px !important;
916
+ width: 100%;
917
+ }
918
+
919
+ button.font-library-modal__upload-area {
920
+ background-color: #f0f0f0;
921
+ }
922
+
923
+ .font-library-modal__local-fonts {
924
+ margin: 0 auto;
925
+ width: 80%;
926
+ }
927
+
928
+ .font-library-modal__local-fonts .font-library-modal__upload-area__text {
929
+ color: #757575;
930
+ }
931
+
932
+ .font-library__google-fonts-confirm {
933
+ display: flex;
934
+ justify-content: center;
935
+ align-items: center;
936
+ margin-top: 64px;
937
+ }
938
+
939
+ .font-library__google-fonts-confirm p {
940
+ line-height: 1.4;
941
+ }
942
+
943
+ .font-library__google-fonts-confirm h2 {
944
+ font-size: 1.2rem;
945
+ font-weight: 400;
946
+ }
947
+
948
+ .font-library__google-fonts-confirm .components-card {
949
+ padding: 16px;
950
+ width: 400px;
951
+ }
952
+
953
+ .font-library__google-fonts-confirm .components-button {
954
+ width: 100%;
955
+ justify-content: center;
956
+ }
957
+
958
+ .font-library-modal__select-all {
959
+ padding: 16px 16px 16px 17px;
960
+ }
961
+
962
+ .font-library-modal__select-all .components-checkbox-control__label {
963
+ padding-left: 16px;
964
+ }
965
+
966
+ .global-styles-ui-pagination .components-button.is-tertiary {
967
+ width: 32px;
968
+ height: 32px;
969
+ justify-content: center;
970
+ }
971
+
972
+ .global-styles-ui-screen-revisions__revisions-list {
973
+ list-style: none;
974
+ margin: 0 16px 16px 16px;
975
+ flex-grow: 1;
976
+ }
977
+
978
+ .global-styles-ui-screen-revisions__revisions-list li {
979
+ margin-bottom: 0;
980
+ }
981
+
982
+ .global-styles-ui-screen-revisions__revision-item {
983
+ position: relative;
984
+ cursor: pointer;
985
+ display: flex;
986
+ flex-direction: column;
987
+ }
988
+
989
+ .global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus {
990
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
991
+ outline: 2px solid transparent;
992
+ }
993
+
994
+ .global-styles-ui-screen-revisions__revision-item:hover {
995
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
996
+ }
997
+
998
+ .global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date {
999
+ color: var(--wp-admin-theme-color);
1000
+ }
1001
+
1002
+ .global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after {
1003
+ position: absolute;
1004
+ content: "\a";
1005
+ display: block;
1006
+ }
1007
+
1008
+ .global-styles-ui-screen-revisions__revision-item::before {
1009
+ background: #ddd;
1010
+ border-radius: 50%;
1011
+ height: 8px;
1012
+ width: 8px;
1013
+ top: 18px;
1014
+ left: 17px;
1015
+ transform: translate(-50%, -50%);
1016
+ z-index: 1;
1017
+ border: 4px solid transparent;
1018
+ }
1019
+
1020
+ .global-styles-ui-screen-revisions__revision-item[aria-selected=true] {
1021
+ border-radius: 2px;
1022
+ outline: 3px solid transparent;
1023
+ outline-offset: -2px;
1024
+ color: var(--wp-admin-theme-color);
1025
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
1026
+ }
1027
+
1028
+ .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date {
1029
+ color: var(--wp-admin-theme-color);
1030
+ }
1031
+
1032
+ .global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before {
1033
+ background: var(--wp-admin-theme-color);
1034
+ }
1035
+
1036
+ .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
1037
+ .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta,
1038
+ .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__applied-text {
1039
+ color: #1e1e1e;
1040
+ }
1041
+
1042
+ .global-styles-ui-screen-revisions__revision-item::after {
1043
+ height: 100%;
1044
+ left: 16px;
1045
+ top: 0;
1046
+ width: 0;
1047
+ border: 0.5px solid #ddd;
1048
+ }
1049
+
1050
+ .global-styles-ui-screen-revisions__revision-item:first-child::after {
1051
+ top: 18px;
1052
+ }
1053
+
1054
+ .global-styles-ui-screen-revisions__revision-item:last-child::after {
1055
+ height: 18px;
1056
+ }
1057
+
1058
+ .global-styles-ui-screen-revisions__revision-item-wrapper {
1059
+ display: block;
1060
+ padding: 12px 12px 4px 40px;
1061
+ }
1062
+
1063
+ .global-styles-ui-screen-revisions__apply-button.is-primary,
1064
+ .global-styles-ui-screen-revisions__applied-text {
1065
+ align-self: flex-start;
1066
+ margin: 4px 12px 12px 40px;
1067
+ }
1068
+
1069
+ .global-styles-ui-screen-revisions__changes,
1070
+ .global-styles-ui-screen-revisions__meta,
1071
+ .global-styles-ui-screen-revisions__applied-text {
1072
+ color: #757575;
1073
+ font-size: 12px;
1074
+ }
1075
+
1076
+ .global-styles-ui-screen-revisions__description {
1077
+ display: flex;
1078
+ flex-direction: column;
1079
+ align-items: flex-start;
1080
+ gap: 8px;
1081
+ }
1082
+
1083
+ .global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
1084
+ text-transform: uppercase;
1085
+ font-weight: 600;
1086
+ font-size: 12px;
1087
+ }
1088
+
1089
+ .global-styles-ui-screen-revisions__meta {
1090
+ display: flex;
1091
+ justify-content: start;
1092
+ width: 100%;
1093
+ align-items: flex-start;
1094
+ text-align: left;
1095
+ margin-bottom: 4px;
1096
+ }
1097
+
1098
+ .global-styles-ui-screen-revisions__meta img {
1099
+ width: 16px;
1100
+ height: 16px;
1101
+ border-radius: 100%;
1102
+ margin-right: 8px;
1103
+ }
1104
+
1105
+ .global-styles-ui-screen-revisions__loading {
1106
+ margin: 24px auto !important;
1107
+ }
1108
+
1109
+ .global-styles-ui-screen-revisions__changes {
1110
+ text-align: left;
1111
+ line-height: 1.4;
1112
+ margin-left: 12px;
1113
+ list-style: disc;
1114
+ }
1115
+
1116
+ .global-styles-ui-screen-revisions__changes li {
1117
+ margin-bottom: 4px;
1118
+ }
1119
+
1120
+ .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
1121
+ justify-content: space-between;
1122
+ gap: 2px;
1123
+ }
1124
+
1125
+ .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total {
1126
+ position: absolute;
1127
+ left: -1000px;
1128
+ height: 1px;
1129
+ margin: -1px;
1130
+ overflow: hidden;
1131
+ }
1132
+
1133
+ .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text {
1134
+ font-size: 12px;
1135
+ will-change: opacity;
1136
+ }
1137
+
1138
+ .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary {
1139
+ color: #1e1e1e;
1140
+ }
1141
+
1142
+ .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled,
1143
+ .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
1144
+ color: #949494;
1145
+ }
1146
+
1147
+ .global-styles-ui-screen-revisions__footer {
1148
+ height: 56px;
1149
+ z-index: 1;
1150
+ position: sticky;
1151
+ min-width: 100%;
1152
+ bottom: 0;
1153
+ background: #fff;
1154
+ padding: 12px;
1155
+ border-top: 1px solid #ddd;
1156
+ }
1157
+
1158
+ .global-styles-ui-variations_item {
1159
+ box-sizing: border-box;
1160
+ cursor: pointer;
1161
+ }
1162
+
1163
+ .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
1164
+ border-radius: 2px;
1165
+ outline: 1px solid rgba(0, 0, 0, 0.1);
1166
+ outline-offset: -1px;
1167
+ overflow: hidden;
1168
+ position: relative;
1169
+ }
1170
+
1171
+ @media not (prefers-reduced-motion) {
1172
+ .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
1173
+ transition: outline 0.1s linear;
1174
+ }
1175
+ }
1176
+ .global-styles-ui-variations_item .global-styles-ui-variations_item-preview.is-pill {
1177
+ height: 32px;
1178
+ }
1179
+
1180
+ .global-styles-ui-variations_item .global-styles-ui-variations_item-preview.is-pill .block-editor-iframe__scale-container {
1181
+ overflow: hidden;
1182
+ }
1183
+
1184
+ .global-styles-ui-variations_item:not(.is-active):hover .global-styles-ui-variations_item-preview {
1185
+ outline-color: rgba(0, 0, 0, 0.3);
1186
+ }
1187
+
1188
+ .global-styles-ui-variations_item.is-active .global-styles-ui-variations_item-preview, .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
1189
+ outline-color: #1e1e1e;
1190
+ outline-offset: 1px;
1191
+ outline-width: var(--wp-admin-border-width-focus);
1192
+ }
1193
+
1194
+ .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
1195
+ outline-color: var(--wp-admin-theme-color);
1196
+ }
1197
+
1198
+ .global-styles-ui-preview {
1199
+ display: flex;
1200
+ align-items: center;
1201
+ justify-content: center;
1202
+ line-height: 1;
1203
+ cursor: pointer;
1204
+ }
1205
+
1206
+ .global-styles-ui-preview__wrapper {
1207
+ max-width: 100%;
1208
+ display: block;
1209
+ width: 100%;
1210
+ }
1211
+
1212
+ .global-styles-ui-typography-preview {
1213
+ display: flex;
1214
+ align-items: center;
1215
+ justify-content: center;
1216
+ min-height: 100px;
1217
+ margin-bottom: 20px;
1218
+ background: #f0f0f0;
1219
+ border-radius: 2px;
1220
+ overflow: hidden;
1221
+ }
1222
+
1223
+ .global-styles-ui-font-size__item {
1224
+ white-space: nowrap;
1225
+ text-overflow: ellipsis;
1226
+ overflow: hidden;
1227
+ line-break: anywhere;
1228
+ }
1229
+
1230
+ .global-styles-ui-font-size__item-value {
1231
+ color: #757575;
1232
+ }
1233
+
1234
+ .global-styles-ui-screen {
1235
+ margin: 12px 16px 16px;
1236
+ }
1237
+
1238
+ .global-styles-ui-screen-typography__indicator {
1239
+ height: 24px;
1240
+ width: 24px;
1241
+ font-size: 14px;
1242
+ display: flex !important;
1243
+ align-items: center;
1244
+ justify-content: center;
1245
+ border-radius: 2px;
1246
+ }
1247
+
1248
+ .global-styles-ui-block-types-search {
1249
+ margin-bottom: 10px;
1250
+ padding: 0 20px;
1251
+ }
1252
+
1253
+ .global-styles-ui-screen-typography__font-variants-count {
1254
+ color: #757575;
1255
+ }
1256
+
1257
+ .global-styles-ui-font-families__manage-fonts {
1258
+ justify-content: center;
1259
+ }
1260
+
1261
+ .global-styles-ui-screen .color-block-support-panel {
1262
+ padding-left: 0;
1263
+ padding-right: 0;
1264
+ padding-top: 0;
1265
+ border-top: none;
1266
+ row-gap: 12px;
1267
+ }
1268
+
1269
+ .global-styles-ui-header__description {
1270
+ padding: 0 16px;
1271
+ }
1272
+
1273
+ .global-styles-ui-header {
1274
+ margin-bottom: 0 !important;
1275
+ }
1276
+
1277
+ .global-styles-ui-subtitle {
1278
+ margin-bottom: 0 !important;
1279
+ text-transform: uppercase;
1280
+ font-weight: 499 !important;
1281
+ font-size: 11px !important;
1282
+ }
1283
+
1284
+ .global-styles-ui-section-title {
1285
+ color: #2f2f2f;
1286
+ font-weight: 600;
1287
+ line-height: 1.2;
1288
+ padding: 16px 16px 0;
1289
+ margin: 0;
1290
+ }
1291
+
1292
+ .global-styles-ui-icon-with-current-color {
1293
+ fill: currentColor;
1294
+ }
1295
+
1296
+ .global-styles-ui__color-indicator-wrapper {
1297
+ height: 24px;
1298
+ flex-shrink: 0;
1299
+ }
1300
+
1301
+ .global-styles-ui__shadows-panel__options-container,
1302
+ .global-styles-ui__typography-panel__options-container {
1303
+ height: 24px;
1304
+ }
1305
+
1306
+ .global-styles-ui__block-preview-panel {
1307
+ position: relative;
1308
+ width: 100%;
1309
+ border: #ddd 1px solid;
1310
+ border-radius: 2px;
1311
+ overflow: hidden;
1312
+ }
1313
+
1314
+ .global-styles-ui__shadow-preview-panel {
1315
+ height: 144px;
1316
+ border: #ddd 1px solid;
1317
+ border-radius: 2px;
1318
+ overflow: auto;
1319
+ background-image: repeating-linear-gradient(45deg, #f5f5f5 25%, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 75%, #f5f5f5 0, #f5f5f5), repeating-linear-gradient(45deg, #f5f5f5 25%, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 75%, #f5f5f5 0, #f5f5f5);
1320
+ background-position: 0 0, 8px 8px;
1321
+ background-size: 16px 16px;
1322
+ }
1323
+
1324
+ .global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
1325
+ border: #ddd 1px solid;
1326
+ border-radius: 2px;
1327
+ background-color: #fff;
1328
+ width: 60%;
1329
+ height: 60px;
1330
+ }
1331
+
1332
+ .global-styles-ui__shadow-editor__dropdown-content {
1333
+ width: 280px;
1334
+ }
1335
+
1336
+ .global-styles-ui__shadow-editor-panel {
1337
+ margin-bottom: 4px;
1338
+ }
1339
+
1340
+ .global-styles-ui__shadow-editor__dropdown {
1341
+ width: 100%;
1342
+ position: relative;
1343
+ }
1344
+
1345
+ .global-styles-ui__shadow-editor__dropdown-toggle {
1346
+ width: 100%;
1347
+ height: auto;
1348
+ padding-top: 8px;
1349
+ padding-bottom: 8px;
1350
+ text-align: left;
1351
+ border-radius: inherit;
1352
+ }
1353
+
1354
+ .global-styles-ui__shadow-editor__dropdown-toggle.is-open {
1355
+ background: #f0f0f0;
1356
+ color: var(--wp-admin-theme-color);
1357
+ }
1358
+
1359
+ .global-styles-ui__shadow-editor__remove-button {
1360
+ position: absolute;
1361
+ right: 8px;
1362
+ top: 8px;
1363
+ opacity: 0;
1364
+ }
1365
+
1366
+ .global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button {
1367
+ border: none;
1368
+ }
1369
+
1370
+ .global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__shadow-editor__remove-button:focus, .global-styles-ui__shadow-editor__remove-button:hover {
1371
+ opacity: 1;
1372
+ }
1373
+
1374
+ @media (hover: none) {
1375
+ .global-styles-ui__shadow-editor__remove-button {
1376
+ opacity: 1;
1377
+ }
1378
+ }
1379
+ .global-styles-ui-screen-css {
1380
+ flex: 1 1 auto;
1381
+ display: flex;
1382
+ flex-direction: column;
1383
+ margin: 16px;
1384
+ }
1385
+
1386
+ .global-styles-ui-screen-css .components-v-stack {
1387
+ flex: 1 1 auto;
1388
+ }
1389
+
1390
+ .global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input {
1391
+ flex: 1 1 auto;
1392
+ display: flex;
1393
+ flex-direction: column;
1394
+ }
1395
+
1396
+ .global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
1397
+ flex: 1 1 auto;
1398
+ display: flex;
1399
+ flex-direction: column;
1400
+ }
1401
+
1402
+ .global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field .components-textarea-control__input {
1403
+ flex: 1 1 auto;
1404
+ /*rtl:ignore*/
1405
+ direction: ltr;
1406
+ }
1407
+
1408
+ .global-styles-ui-screen-css-help-link {
1409
+ display: inline-block;
1410
+ margin-top: 8px;
1411
+ }
1412
+
1413
+ .global-styles-ui-screen-variations {
1414
+ margin-top: 16px;
1415
+ border-top: 1px solid #ddd;
1416
+ }
1417
+
1418
+ .global-styles-ui-screen-variations > * {
1419
+ margin: 24px 16px;
1420
+ }
1421
+
1422
+ .global-styles-ui-sidebar__navigator-provider {
1423
+ height: 100%;
1424
+ }
1425
+
1426
+ .global-styles-ui-sidebar__navigator-screen {
1427
+ display: flex;
1428
+ flex-direction: column;
1429
+ height: 100%;
1430
+ }
1431
+
1432
+ .global-styles-ui-sidebar__navigator-screen .single-column {
1433
+ grid-column: span 1;
1434
+ }
1435
+
1436
+ .global-styles-ui-screen-root.global-styles-ui-screen-root,
1437
+ .global-styles-ui-screen-style-variations.global-styles-ui-screen-style-variations {
1438
+ background: unset;
1439
+ color: inherit;
1440
+ }
1441
+
1442
+ .global-styles-ui-sidebar__panel .block-editor-block-icon svg {
1443
+ fill: currentColor;
1444
+ }
1445
+
1446
+ .global-styles-ui-screen-root__active-style-tile.global-styles-ui-screen-root__active-style-tile, .global-styles-ui-screen-root__active-style-tile.global-styles-ui-screen-root__active-style-tile .global-styles-ui-screen-root__active-style-tile-preview {
1447
+ border-radius: 2px;
1448
+ }
1449
+
1450
+ .global-styles-ui-color-palette-panel,
1451
+ .global-styles-ui-gradient-palette-panel {
1452
+ padding: 16px;
1453
+ }
1454
+
1455
+ .components-navigator-screen {
1456
+ padding: 12px;
1457
+ }
1458
+
1459
+ /**
1460
+ * Colors
1461
+ */
1462
+ /**
1463
+ * SCSS Variables.
1464
+ *
1465
+ * Please use variables from this sheet to ensure consistency across the UI.
1466
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
1467
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
1468
+ */
1469
+ /**
1470
+ * Fonts & basic variables.
1471
+ */
1472
+ /**
1473
+ * Typography
1474
+ */
1475
+ /**
1476
+ * Grid System.
1477
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
1478
+ */
1479
+ /**
1480
+ * Radius scale.
1481
+ */
1482
+ /**
1483
+ * Elevation scale.
1484
+ */
1485
+ /**
1486
+ * Dimensions.
1487
+ */
1488
+ /**
1489
+ * Mobile specific styles
1490
+ */
1491
+ /**
1492
+ * Editor styles.
1493
+ */
1494
+ /**
1495
+ * Block & Editor UI.
1496
+ */
1497
+ /**
1498
+ * Block paddings.
1499
+ */
1500
+ /**
1501
+ * React Native specific.
1502
+ * These variables do not appear to be used anywhere else.
1503
+ */
1504
+ /**
1505
+ * Typography
1506
+ */
1507
+ /**
1508
+ * Breakpoints & Media Queries
1509
+ */
1510
+ /**
1511
+ * Converts a hex value into the rgb equivalent.
1512
+ *
1513
+ * @param {string} hex - the hexadecimal value to convert
1514
+ * @return {string} comma separated rgb values
1515
+ */
1516
+ /**
1517
+ * Long content fade mixin
1518
+ *
1519
+ * Creates a fading overlay to signify that the content is longer
1520
+ * than the space allows.
1521
+ */
1522
+ /**
1523
+ * Breakpoint mixins
1524
+ */
1525
+ /**
1526
+ * Focus styles.
1527
+ */
1528
+ /**
1529
+ * Applies editor left position to the selector passed as argument
1530
+ */
1531
+ /**
1532
+ * Styles that are reused verbatim in a few places
1533
+ */
1534
+ /**
1535
+ * Allows users to opt-out of animations via OS-level preferences.
1536
+ */
1537
+ /**
1538
+ * Reset default styles for JavaScript UI based pages.
1539
+ * This is a WP-admin agnostic reset
1540
+ */
1541
+ /**
1542
+ * Reset the WP Admin page styles for Gutenberg-like pages.
1543
+ */
1544
+ .dataviews-wrapper,
1545
+ .dataviews-picker-wrapper {
1546
+ height: 100%;
1547
+ overflow: auto;
1548
+ box-sizing: border-box;
1549
+ scroll-padding-bottom: 64px;
1550
+ /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
1551
+ container: dataviews-wrapper/inline-size;
1552
+ display: flex;
1553
+ flex-direction: column;
1554
+ font-size: 13px;
1555
+ line-height: 1.4;
1556
+ }
1557
+
1558
+ .dataviews__view-actions,
1559
+ .dataviews-filters__container {
1560
+ box-sizing: border-box;
1561
+ padding: 16px 48px;
1562
+ flex-shrink: 0;
1563
+ position: sticky;
1564
+ left: 0;
1565
+ }
1566
+
1567
+ @media not (prefers-reduced-motion) {
1568
+ .dataviews__view-actions,
1569
+ .dataviews-filters__container {
1570
+ transition: padding ease-out 0.1s;
1571
+ }
1572
+ }
1573
+ .dataviews-no-results,
1574
+ .dataviews-loading {
1575
+ padding: 0 48px;
1576
+ flex-grow: 1;
1577
+ display: flex;
1578
+ align-items: center;
1579
+ justify-content: center;
1580
+ }
1581
+
1582
+ @media not (prefers-reduced-motion) {
1583
+ .dataviews-no-results,
1584
+ .dataviews-loading {
1585
+ transition: padding ease-out 0.1s;
1586
+ }
1587
+ }
1588
+ .dataviews-loading-more {
1589
+ text-align: center;
1590
+ }
1591
+
1592
+ @container (max-width: 430px) {
1593
+ .dataviews__view-actions,
1594
+ .dataviews-filters__container {
1595
+ padding: 12px 24px;
1596
+ }
1597
+ .dataviews-no-results,
1598
+ .dataviews-loading {
1599
+ padding-left: 24px;
1600
+ padding-right: 24px;
1601
+ }
1602
+ }
1603
+ .dataviews-title-field {
1604
+ font-size: 13px;
1605
+ font-weight: 499;
1606
+ color: #2f2f2f;
1607
+ text-overflow: ellipsis;
1608
+ white-space: nowrap;
1609
+ width: 100%;
1610
+ }
1611
+
1612
+ .dataviews-title-field a {
1613
+ text-decoration: none;
1614
+ text-overflow: ellipsis;
1615
+ white-space: nowrap;
1616
+ overflow: hidden;
1617
+ display: block;
1618
+ flex-grow: 0;
1619
+ color: #2f2f2f;
1620
+ }
1621
+
1622
+ .dataviews-title-field a:hover {
1623
+ color: var(--wp-admin-theme-color);
1624
+ }
1625
+
1626
+ .dataviews-title-field a:focus {
1627
+ color: var(--wp-admin-theme-color--rgb);
1628
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
1629
+ border-radius: 2px;
1630
+ }
1631
+
1632
+ .dataviews-title-field button.components-button.is-link {
1633
+ text-decoration: none;
1634
+ font-weight: inherit;
1635
+ text-overflow: ellipsis;
1636
+ white-space: nowrap;
1637
+ overflow: hidden;
1638
+ display: block;
1639
+ width: 100%;
1640
+ color: #1e1e1e;
1641
+ }
1642
+
1643
+ .dataviews-title-field button.components-button.is-link:hover {
1644
+ color: var(--wp-admin-theme-color);
1645
+ }
1646
+
1647
+ .dataviews-title-field--clickable {
1648
+ cursor: pointer;
1649
+ color: #2f2f2f;
1650
+ }
1651
+
1652
+ .dataviews-title-field--clickable:hover {
1653
+ color: var(--wp-admin-theme-color);
1654
+ }
1655
+
1656
+ .dataviews-title-field--clickable:focus {
1657
+ color: var(--wp-admin-theme-color--rgb);
1658
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
1659
+ border-radius: 2px;
1660
+ }
1661
+
1662
+ /**
1663
+ * Applying a consistent 24px padding when DataViews are placed within cards.
1664
+ */
1665
+ .components-card__body:has(> .dataviews-wrapper),
1666
+ .components-card__body:has(> .dataviews-picker-wrapper) {
1667
+ padding: 8px 0 0;
1668
+ overflow: hidden;
1669
+ }
1670
+
1671
+ .components-card__body:has(> .dataviews-wrapper) .dataviews__view-actions,
1672
+ .components-card__body:has(> .dataviews-wrapper) .dataviews-filters__container,
1673
+ .components-card__body:has(> .dataviews-wrapper) .dataviews-footer,
1674
+ .components-card__body:has(> .dataviews-wrapper) .dataviews-view-grid,
1675
+ .components-card__body:has(> .dataviews-wrapper) .dataviews-loading,
1676
+ .components-card__body:has(> .dataviews-wrapper) .dataviews-no-results,
1677
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews__view-actions,
1678
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-filters__container,
1679
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-footer,
1680
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-grid,
1681
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-loading,
1682
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-no-results {
1683
+ padding-inline: 24px;
1684
+ }
1685
+
1686
+ .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr td:first-child,
1687
+ .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:first-child,
1688
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr td:first-child,
1689
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr th:first-child {
1690
+ padding-inline-start: 24px;
1691
+ }
1692
+
1693
+ .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr td:last-child,
1694
+ .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:last-child,
1695
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr td:last-child,
1696
+ .components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr th:last-child {
1697
+ padding-inline-end: 24px;
1698
+ }
1699
+
1700
+ .dataviews-bulk-actions-footer__item-count {
1701
+ color: #1e1e1e;
1702
+ font-weight: 499;
1703
+ font-size: 11px;
1704
+ text-transform: uppercase;
1705
+ }
1706
+
1707
+ .dataviews-bulk-actions-footer__container {
1708
+ margin-right: auto;
1709
+ min-height: 32px;
1710
+ }
1711
+
1712
+ .dataviews-filters__button {
1713
+ position: relative;
1714
+ }
1715
+
1716
+ .dataviews-filters__container {
1717
+ padding-top: 0;
1718
+ }
1719
+
1720
+ .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true], .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true]:hover {
1721
+ opacity: 0;
1722
+ }
1723
+
1724
+ .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true]:focus {
1725
+ opacity: 1;
1726
+ }
1727
+
1728
+ .dataviews-filters__summary-popover {
1729
+ font-size: 13px;
1730
+ line-height: 1.4;
1731
+ }
1732
+
1733
+ .dataviews-filters__summary-popover .components-popover__content {
1734
+ width: 100%;
1735
+ min-width: 230px;
1736
+ max-width: 250px;
1737
+ border-radius: 4px;
1738
+ }
1739
+
1740
+ .dataviews-filters__summary-popover.components-dropdown__content .components-popover__content {
1741
+ padding: 0;
1742
+ }
1743
+
1744
+ .dataviews-filters__summary-operators-container {
1745
+ padding: 8px 16px;
1746
+ }
1747
+
1748
+ .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__search-widget-listbox), .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__search-widget-no-elements), .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__user-input-widget) {
1749
+ border-bottom: 1px solid #e0e0e0;
1750
+ }
1751
+
1752
+ .dataviews-filters__summary-operators-container:empty {
1753
+ display: none;
1754
+ }
1755
+
1756
+ .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-name {
1757
+ color: #757575;
1758
+ white-space: nowrap;
1759
+ overflow: hidden;
1760
+ text-overflow: ellipsis;
1761
+ flex-shrink: 0; /* Prevents this element from shrinking */
1762
+ max-width: calc(100% - 55px);
1763
+ }
1764
+
1765
+ .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-select {
1766
+ width: 100%;
1767
+ white-space: nowrap;
1768
+ overflow: hidden;
1769
+ }
1770
+
1771
+ .dataviews-filters__summary-chip-container {
1772
+ position: relative;
1773
+ white-space: pre-wrap;
1774
+ }
1775
+
1776
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip {
1777
+ border-radius: 16px;
1778
+ border: 1px solid transparent;
1779
+ cursor: pointer;
1780
+ padding: 4px 12px;
1781
+ min-height: 32px;
1782
+ background: #f0f0f0;
1783
+ color: #2f2f2f;
1784
+ position: relative;
1785
+ display: flex;
1786
+ align-items: center;
1787
+ box-sizing: border-box;
1788
+ }
1789
+
1790
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.is-not-clickable {
1791
+ cursor: default;
1792
+ }
1793
+
1794
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-reset {
1795
+ padding-inline-end: 28px;
1796
+ }
1797
+
1798
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:hover:not(.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.is-not-clickable), .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip[aria-expanded=true] {
1799
+ background: #e0e0e0;
1800
+ color: #1e1e1e;
1801
+ }
1802
+
1803
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values {
1804
+ color: var(--wp-admin-theme-color);
1805
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
1806
+ }
1807
+
1808
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values[aria-expanded=true] {
1809
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
1810
+ }
1811
+
1812
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible {
1813
+ outline: none;
1814
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1815
+ }
1816
+
1817
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip .dataviews-filters-__summary-filter-text-name {
1818
+ font-weight: 499;
1819
+ }
1820
+
1821
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove {
1822
+ width: 24px;
1823
+ height: 24px;
1824
+ border-radius: 50%;
1825
+ border: 0;
1826
+ padding: 0;
1827
+ position: absolute;
1828
+ right: 4px;
1829
+ top: 50%;
1830
+ transform: translateY(-50%);
1831
+ display: flex;
1832
+ align-items: center;
1833
+ justify-content: center;
1834
+ background: transparent;
1835
+ cursor: pointer;
1836
+ }
1837
+
1838
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
1839
+ fill: #757575;
1840
+ }
1841
+
1842
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
1843
+ background: #e0e0e0;
1844
+ }
1845
+
1846
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg {
1847
+ fill: #1e1e1e;
1848
+ }
1849
+
1850
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
1851
+ fill: var(--wp-admin-theme-color);
1852
+ }
1853
+
1854
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
1855
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
1856
+ }
1857
+
1858
+ .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus-visible {
1859
+ outline: none;
1860
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1861
+ }
1862
+
1863
+ .dataviews-filters__search-widget-filter-combobox-list {
1864
+ max-height: 184px;
1865
+ padding: 4px;
1866
+ overflow: auto;
1867
+ border-top: 1px solid #e0e0e0;
1868
+ }
1869
+
1870
+ .dataviews-filters__search-widget-filter-combobox-list .dataviews-filters__search-widget-filter-combobox-item-value [data-user-value] {
1871
+ font-weight: 600;
1872
+ }
1873
+
1874
+ .dataviews-filters__search-widget-listbox {
1875
+ padding: 4px;
1876
+ overflow: auto;
1877
+ }
1878
+
1879
+ .dataviews-filters__search-widget-listitem {
1880
+ display: flex;
1881
+ align-items: center;
1882
+ gap: 8px;
1883
+ border-radius: 2px;
1884
+ box-sizing: border-box;
1885
+ padding: 4px 12px;
1886
+ cursor: default;
1887
+ min-height: 32px;
1888
+ font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1889
+ font-weight: 400;
1890
+ font-size: 13px;
1891
+ line-height: 20px;
1892
+ }
1893
+
1894
+ .dataviews-filters__search-widget-listitem:last-child {
1895
+ margin-block-end: 0;
1896
+ }
1897
+
1898
+ .dataviews-filters__search-widget-listitem:hover, .dataviews-filters__search-widget-listitem[data-active-item], .dataviews-filters__search-widget-listitem:focus {
1899
+ background-color: var(--wp-admin-theme-color);
1900
+ color: #fff;
1901
+ }
1902
+
1903
+ .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-description, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-description, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-description {
1904
+ color: #fff;
1905
+ }
1906
+
1907
+ .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-single-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-single-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-single-selection {
1908
+ border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
1909
+ background: #fff;
1910
+ }
1911
+
1912
+ .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-single-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-single-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-single-selection.is-selected {
1913
+ border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
1914
+ background: var(--wp-admin-theme-color-darker-20, #183ad6);
1915
+ }
1916
+
1917
+ .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection {
1918
+ border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
1919
+ }
1920
+
1921
+ .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
1922
+ border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
1923
+ background: var(--wp-admin-theme-color-darker-20, #183ad6);
1924
+ }
1925
+
1926
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-description {
1927
+ display: block;
1928
+ overflow: hidden;
1929
+ text-overflow: ellipsis;
1930
+ font-size: 12px;
1931
+ line-height: 16px;
1932
+ color: #757575;
1933
+ }
1934
+
1935
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
1936
+ border: 1px solid #1e1e1e;
1937
+ margin-right: 12px;
1938
+ transition: none;
1939
+ border-radius: 50%;
1940
+ width: 24px;
1941
+ height: 24px;
1942
+ min-width: 24px;
1943
+ max-width: 24px;
1944
+ position: relative;
1945
+ }
1946
+
1947
+ @media not (prefers-reduced-motion) {
1948
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
1949
+ transition: box-shadow 0.1s linear;
1950
+ }
1951
+ }
1952
+ @media (min-width: 600px) {
1953
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
1954
+ height: 16px;
1955
+ width: 16px;
1956
+ min-width: 16px;
1957
+ max-width: 16px;
1958
+ }
1959
+ }
1960
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked::before {
1961
+ box-sizing: inherit;
1962
+ width: 12px;
1963
+ height: 12px;
1964
+ position: absolute;
1965
+ top: 50%;
1966
+ left: 50%;
1967
+ transform: translate(-50%, -50%);
1968
+ margin: 0;
1969
+ background-color: #fff;
1970
+ border: 4px solid #fff;
1971
+ }
1972
+
1973
+ @media (min-width: 600px) {
1974
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked::before {
1975
+ width: 8px;
1976
+ height: 8px;
1977
+ }
1978
+ }
1979
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:focus {
1980
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
1981
+ outline: 2px solid transparent;
1982
+ }
1983
+
1984
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked {
1985
+ background: var(--wp-admin-theme-color);
1986
+ border: none;
1987
+ }
1988
+
1989
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
1990
+ margin: 0;
1991
+ padding: 0;
1992
+ }
1993
+
1994
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected {
1995
+ background: var(--wp-admin-theme-color, #3858e9);
1996
+ border-color: var(--wp-admin-theme-color, #3858e9);
1997
+ }
1998
+
1999
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
2000
+ content: "";
2001
+ border-radius: 50%;
2002
+ box-sizing: inherit;
2003
+ width: 12px;
2004
+ height: 12px;
2005
+ position: absolute;
2006
+ top: 50%;
2007
+ left: 50%;
2008
+ transform: translate(-50%, -50%);
2009
+ margin: 0;
2010
+ background-color: #fff;
2011
+ border: 4px solid #fff;
2012
+ }
2013
+
2014
+ @media (min-width: 600px) {
2015
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
2016
+ width: 8px;
2017
+ height: 8px;
2018
+ }
2019
+ }
2020
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
2021
+ --checkbox-size: 24px;
2022
+ border: 1px solid #1e1e1e;
2023
+ margin-right: 12px;
2024
+ transition: none;
2025
+ border-radius: 2px;
2026
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2027
+ padding: 6px 8px;
2028
+ /* Fonts smaller than 16px causes mobile safari to zoom. */
2029
+ font-size: 16px;
2030
+ /* Override core line-height. To be reviewed. */
2031
+ line-height: normal;
2032
+ box-shadow: 0 0 0 transparent;
2033
+ border-radius: 2px;
2034
+ border: 1px solid #949494;
2035
+ }
2036
+
2037
+ @media not (prefers-reduced-motion) {
2038
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
2039
+ transition: box-shadow 0.1s linear;
2040
+ }
2041
+ }
2042
+ @media (min-width: 600px) {
2043
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
2044
+ font-size: 13px;
2045
+ /* Override core line-height. To be reviewed. */
2046
+ line-height: normal;
2047
+ }
2048
+ }
2049
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
2050
+ border-color: var(--wp-admin-theme-color);
2051
+ box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
2052
+ outline: 2px solid transparent;
2053
+ }
2054
+
2055
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::-webkit-input-placeholder {
2056
+ color: rgba(30, 30, 30, 0.62);
2057
+ }
2058
+
2059
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::-moz-placeholder {
2060
+ color: rgba(30, 30, 30, 0.62);
2061
+ }
2062
+
2063
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:-ms-input-placeholder {
2064
+ color: rgba(30, 30, 30, 0.62);
2065
+ }
2066
+
2067
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
2068
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
2069
+ outline: 2px solid transparent;
2070
+ }
2071
+
2072
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked {
2073
+ background: var(--wp-admin-theme-color);
2074
+ border-color: var(--wp-admin-theme-color);
2075
+ }
2076
+
2077
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked::-ms-check {
2078
+ opacity: 0;
2079
+ }
2080
+
2081
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
2082
+ margin: -3px -5px;
2083
+ color: #fff;
2084
+ }
2085
+
2086
+ @media (min-width: 782px) {
2087
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
2088
+ margin: -4px 0 0 -5px;
2089
+ }
2090
+ }
2091
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed] {
2092
+ background: var(--wp-admin-theme-color);
2093
+ border-color: var(--wp-admin-theme-color);
2094
+ }
2095
+
2096
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
2097
+ content: "\f460";
2098
+ float: left;
2099
+ display: inline-block;
2100
+ vertical-align: middle;
2101
+ width: 16px;
2102
+ /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
2103
+ font: normal 30px/1 dashicons;
2104
+ speak: none;
2105
+ -webkit-font-smoothing: antialiased;
2106
+ -moz-osx-font-smoothing: grayscale;
2107
+ }
2108
+
2109
+ @media (min-width: 782px) {
2110
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
2111
+ float: none;
2112
+ font-size: 21px;
2113
+ }
2114
+ }
2115
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true], .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled {
2116
+ background: #f0f0f0;
2117
+ border-color: #ddd;
2118
+ cursor: default;
2119
+ opacity: 1;
2120
+ }
2121
+
2122
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
2123
+ position: relative;
2124
+ background: #fff;
2125
+ color: #1e1e1e;
2126
+ margin: 0;
2127
+ padding: 0;
2128
+ width: var(--checkbox-size);
2129
+ height: var(--checkbox-size);
2130
+ }
2131
+
2132
+ @media (min-width: 600px) {
2133
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
2134
+ --checkbox-size: 16px;
2135
+ }
2136
+ }
2137
+ @media not (prefers-reduced-motion) {
2138
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
2139
+ transition: 0.1s border-color ease-in-out;
2140
+ }
2141
+ }
2142
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
2143
+ background: var(--wp-admin-theme-color, #3858e9);
2144
+ border-color: var(--wp-admin-theme-color, #3858e9);
2145
+ }
2146
+
2147
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
2148
+ --checkmark-size: var(--checkbox-size);
2149
+ fill: #fff;
2150
+ position: absolute;
2151
+ left: 50%;
2152
+ top: 50%;
2153
+ transform: translate(-50%, -50%);
2154
+ width: var(--checkmark-size);
2155
+ height: var(--checkmark-size);
2156
+ }
2157
+
2158
+ @media (min-width: 600px) {
2159
+ .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
2160
+ --checkmark-size: calc(var(--checkbox-size) + 4px);
2161
+ }
2162
+ }
2163
+ .dataviews-filters__search-widget-filter-combobox__wrapper {
2164
+ position: relative;
2165
+ padding: 8px;
2166
+ }
2167
+
2168
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2169
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2170
+ padding: 6px 8px;
2171
+ /* Fonts smaller than 16px causes mobile safari to zoom. */
2172
+ font-size: 16px;
2173
+ /* Override core line-height. To be reviewed. */
2174
+ line-height: normal;
2175
+ box-shadow: 0 0 0 transparent;
2176
+ border-radius: 2px;
2177
+ border: 1px solid #949494;
2178
+ }
2179
+
2180
+ @media not (prefers-reduced-motion) {
2181
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2182
+ transition: box-shadow 0.1s linear;
2183
+ }
2184
+ }
2185
+ @media (min-width: 600px) {
2186
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2187
+ font-size: 13px;
2188
+ /* Override core line-height. To be reviewed. */
2189
+ line-height: normal;
2190
+ }
2191
+ }
2192
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
2193
+ border-color: var(--wp-admin-theme-color);
2194
+ box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
2195
+ outline: 2px solid transparent;
2196
+ }
2197
+
2198
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-input-placeholder {
2199
+ color: rgba(30, 30, 30, 0.62);
2200
+ }
2201
+
2202
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
2203
+ color: rgba(30, 30, 30, 0.62);
2204
+ }
2205
+
2206
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:-ms-input-placeholder {
2207
+ color: rgba(30, 30, 30, 0.62);
2208
+ }
2209
+
2210
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2211
+ display: block;
2212
+ padding: 0 8px 0 32px;
2213
+ width: 100%;
2214
+ height: 32px;
2215
+ margin-left: 0;
2216
+ margin-right: 0;
2217
+ /* Fonts smaller than 16px causes mobile safari to zoom. */
2218
+ font-size: 16px;
2219
+ }
2220
+
2221
+ @media (min-width: 600px) {
2222
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2223
+ font-size: 13px;
2224
+ }
2225
+ }
2226
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
2227
+ background: #fff;
2228
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2229
+ }
2230
+
2231
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
2232
+ color: #757575;
2233
+ }
2234
+
2235
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-decoration, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-cancel-button, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-results-button, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-results-decoration {
2236
+ -webkit-appearance: none;
2237
+ }
2238
+
2239
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon {
2240
+ position: absolute;
2241
+ inset-inline-start: 12px;
2242
+ top: 0;
2243
+ bottom: 0;
2244
+ display: flex;
2245
+ align-items: center;
2246
+ justify-content: center;
2247
+ width: 24px;
2248
+ }
2249
+
2250
+ .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon:dir(ltr) {
2251
+ transform: scaleX(-1);
2252
+ }
2253
+
2254
+ .dataviews-filters__container-visibility-toggle {
2255
+ position: relative;
2256
+ flex-shrink: 0;
2257
+ }
2258
+
2259
+ .dataviews-filters-toggle__count {
2260
+ position: absolute;
2261
+ top: 0;
2262
+ right: 0;
2263
+ transform: translate(50%, -50%);
2264
+ background: var(--wp-admin-theme-color, #3858e9);
2265
+ height: 16px;
2266
+ min-width: 16px;
2267
+ line-height: 16px;
2268
+ padding: 0 4px;
2269
+ text-align: center;
2270
+ border-radius: 8px;
2271
+ font-size: 11px;
2272
+ outline: var(--wp-admin-border-width-focus) solid #fff;
2273
+ color: #fff;
2274
+ box-sizing: border-box;
2275
+ }
2276
+
2277
+ .dataviews-search {
2278
+ width: fit-content;
2279
+ }
2280
+
2281
+ .dataviews-filters__user-input-widget {
2282
+ padding: 16px;
2283
+ }
2284
+
2285
+ .dataviews-filters__user-input-widget .components-input-control__prefix {
2286
+ padding-left: 8px;
2287
+ }
2288
+
2289
+ .dataviews-filters__search-widget-no-elements {
2290
+ display: flex;
2291
+ align-items: center;
2292
+ justify-content: center;
2293
+ padding: 16px;
2294
+ }
2295
+
2296
+ .dataviews-footer {
2297
+ position: sticky;
2298
+ bottom: 0;
2299
+ left: 0;
2300
+ background-color: #fff;
2301
+ padding: 12px 48px;
2302
+ border-top: 1px solid #f0f0f0;
2303
+ flex-shrink: 0;
2304
+ }
2305
+
2306
+ @media not (prefers-reduced-motion) {
2307
+ .dataviews-footer {
2308
+ transition: padding ease-out 0.1s;
2309
+ }
2310
+ }
2311
+ .dataviews-footer {
2312
+ z-index: 2;
2313
+ }
2314
+
2315
+ @container (max-width: 430px) {
2316
+ .dataviews-footer {
2317
+ padding: 12px 24px;
2318
+ }
2319
+ }
2320
+ @container (max-width: 560px) {
2321
+ .dataviews-footer {
2322
+ flex-direction: column !important;
2323
+ }
2324
+ .dataviews-footer .dataviews-bulk-actions-footer__container {
2325
+ width: 100%;
2326
+ }
2327
+ .dataviews-footer .dataviews-bulk-actions-footer__item-count {
2328
+ flex-grow: 1;
2329
+ }
2330
+ .dataviews-footer .dataviews-pagination {
2331
+ width: 100%;
2332
+ justify-content: space-between;
2333
+ }
2334
+ }
2335
+ .dataviews-pagination__page-select {
2336
+ font-size: 11px;
2337
+ font-weight: 499;
2338
+ text-transform: uppercase;
2339
+ }
2340
+
2341
+ @media (min-width: 600px) {
2342
+ .dataviews-pagination__page-select .components-select-control__input {
2343
+ font-size: 11px !important;
2344
+ font-weight: 499;
2345
+ }
2346
+ }
2347
+ .dataviews-action-modal {
2348
+ z-index: 1000001;
2349
+ }
2350
+
2351
+ .dataviews-picker-footer__bulk-selection {
2352
+ align-self: flex-start;
2353
+ height: 32px;
2354
+ }
2355
+
2356
+ .dataviews-picker-footer__actions {
2357
+ align-self: flex-end;
2358
+ }
2359
+
2360
+ .dataviews-selection-checkbox {
2361
+ --checkbox-input-size: 24px;
2362
+ }
2363
+
2364
+ @media (min-width: 600px) {
2365
+ .dataviews-selection-checkbox {
2366
+ --checkbox-input-size: 16px;
2367
+ }
2368
+ }
2369
+ .dataviews-selection-checkbox {
2370
+ line-height: 0;
2371
+ flex-shrink: 0;
2372
+ }
2373
+
2374
+ .dataviews-selection-checkbox .components-checkbox-control__input-container {
2375
+ margin: 0;
2376
+ }
2377
+
2378
+ .dataviews-view-config {
2379
+ width: 320px;
2380
+ /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
2381
+ container-type: inline-size;
2382
+ font-size: 13px;
2383
+ line-height: 1.4;
2384
+ }
2385
+
2386
+ .dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper {
2387
+ overflow-y: scroll;
2388
+ height: 100%;
2389
+ }
2390
+
2391
+ .dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper .dataviews-view-config {
2392
+ width: auto;
2393
+ }
2394
+
2395
+ .dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
2396
+ text-transform: uppercase;
2397
+ }
2398
+
2399
+ .dataviews-settings-section__title.dataviews-settings-section__title {
2400
+ line-height: 24px;
2401
+ font-size: 15px;
2402
+ }
2403
+
2404
+ .dataviews-settings-section__sidebar {
2405
+ grid-column: span 4;
2406
+ }
2407
+
2408
+ .dataviews-settings-section__content,
2409
+ .dataviews-settings-section__content > * {
2410
+ grid-column: span 8;
2411
+ }
2412
+
2413
+ .dataviews-settings-section__content .is-divided-in-two {
2414
+ display: contents;
2415
+ }
2416
+
2417
+ .dataviews-settings-section__content .is-divided-in-two > * {
2418
+ grid-column: span 4;
2419
+ }
2420
+
2421
+ .dataviews-settings-section:has(.dataviews-settings-section__content:empty) {
2422
+ display: none;
2423
+ }
2424
+
2425
+ @container (max-width: 500px) {
2426
+ .dataviews-settings-section.dataviews-settings-section {
2427
+ grid-template-columns: repeat(2, 1fr);
2428
+ }
2429
+ .dataviews-settings-section.dataviews-settings-section .dataviews-settings-section__sidebar {
2430
+ grid-column: span 2;
2431
+ }
2432
+ .dataviews-settings-section.dataviews-settings-section .dataviews-settings-section__content {
2433
+ grid-column: span 2;
2434
+ }
2435
+ }
2436
+ .dataviews-field-control__field {
2437
+ height: 32px;
2438
+ }
2439
+
2440
+ .dataviews-field-control__actions {
2441
+ position: absolute;
2442
+ top: -9999em;
2443
+ }
2444
+
2445
+ .dataviews-field-control__actions.dataviews-field-control__actions {
2446
+ gap: 4px;
2447
+ }
2448
+
2449
+ .dataviews-field-control__field:hover .dataviews-field-control__actions,
2450
+ .dataviews-field-control__field:focus-within .dataviews-field-control__actions,
2451
+ .dataviews-field-control__field.is-interacting .dataviews-field-control__actions {
2452
+ position: unset;
2453
+ top: unset;
2454
+ }
2455
+
2456
+ .dataviews-field-control__icon {
2457
+ display: flex;
2458
+ width: 24px;
2459
+ }
2460
+
2461
+ .dataviews-field-control__label-sub-label-container {
2462
+ flex-grow: 1;
2463
+ }
2464
+
2465
+ .dataviews-field-control__label {
2466
+ display: block;
2467
+ }
2468
+
2469
+ .dataviews-field-control__sub-label {
2470
+ margin-top: 8px;
2471
+ margin-bottom: 0;
2472
+ font-size: 11px;
2473
+ font-style: normal;
2474
+ color: #757575;
2475
+ }
2476
+
2477
+ .dataviews-view-grid-items {
2478
+ margin-bottom: auto;
2479
+ display: grid;
2480
+ gap: 32px;
2481
+ grid-template-rows: max-content;
2482
+ grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
2483
+ padding: 0 48px 24px;
2484
+ container-type: inline-size;
2485
+ /**
2486
+ * Breakpoints were adjusted from media queries breakpoints to account for
2487
+ * the sidebar width. This was done to match the existing styles we had.
2488
+ */
2489
+ }
2490
+
2491
+ @container (max-width: 430px) {
2492
+ .dataviews-view-grid-items {
2493
+ padding-left: 24px;
2494
+ padding-right: 24px;
2495
+ }
2496
+ }
2497
+ @media not (prefers-reduced-motion) {
2498
+ .dataviews-view-grid-items {
2499
+ transition: padding ease-out 0.1s;
2500
+ }
2501
+ }
2502
+ .dataviews-view-grid .dataviews-view-grid__card {
2503
+ height: 100%;
2504
+ justify-content: flex-start;
2505
+ position: relative;
2506
+ }
2507
+
2508
+ .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-actions {
2509
+ padding: 8px 0 4px;
2510
+ }
2511
+
2512
+ .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field {
2513
+ min-height: 24px;
2514
+ overflow: hidden;
2515
+ align-content: center;
2516
+ text-align: start;
2517
+ }
2518
+
2519
+ .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
2520
+ width: fit-content;
2521
+ }
2522
+
2523
+ .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
2524
+ color: #1e1e1e;
2525
+ }
2526
+
2527
+ .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
2528
+ .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
2529
+ background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
2530
+ }
2531
+
2532
+ .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after {
2533
+ box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
2534
+ }
2535
+
2536
+ .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
2537
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2538
+ }
2539
+
2540
+ .dataviews-view-grid .dataviews-view-grid__media {
2541
+ width: 100%;
2542
+ aspect-ratio: 1/1;
2543
+ background-color: #fff;
2544
+ border-radius: 4px;
2545
+ overflow: hidden;
2546
+ position: relative;
2547
+ }
2548
+
2549
+ .dataviews-view-grid .dataviews-view-grid__media img {
2550
+ object-fit: cover;
2551
+ width: 100%;
2552
+ height: 100%;
2553
+ }
2554
+
2555
+ .dataviews-view-grid .dataviews-view-grid__media::after {
2556
+ content: "";
2557
+ position: absolute;
2558
+ top: 0;
2559
+ left: 0;
2560
+ width: 100%;
2561
+ height: 100%;
2562
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
2563
+ border-radius: 4px;
2564
+ pointer-events: none;
2565
+ }
2566
+
2567
+ .dataviews-view-grid .dataviews-view-grid__fields {
2568
+ position: relative;
2569
+ font-size: 12px;
2570
+ line-height: 16px;
2571
+ }
2572
+
2573
+ .dataviews-view-grid .dataviews-view-grid__fields:not(:empty) {
2574
+ padding: 0 0 12px;
2575
+ }
2576
+
2577
+ .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty) {
2578
+ min-height: 24px;
2579
+ line-height: 20px;
2580
+ padding-top: 2px;
2581
+ }
2582
+
2583
+ .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field {
2584
+ min-height: 24px;
2585
+ align-items: center;
2586
+ }
2587
+
2588
+ .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
2589
+ width: 35%;
2590
+ color: #757575;
2591
+ overflow: hidden;
2592
+ text-overflow: ellipsis;
2593
+ white-space: nowrap;
2594
+ }
2595
+
2596
+ .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
2597
+ width: 65%;
2598
+ overflow: hidden;
2599
+ text-overflow: ellipsis;
2600
+ white-space: nowrap;
2601
+ }
2602
+
2603
+ .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
2604
+ display: none;
2605
+ }
2606
+
2607
+ .dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty) {
2608
+ padding-bottom: 12px;
2609
+ }
2610
+
2611
+ .dataviews-view-grid__field-value:empty,
2612
+ .dataviews-view-grid__field:empty {
2613
+ display: none;
2614
+ }
2615
+
2616
+ .dataviews-view-grid__card .dataviews-selection-checkbox {
2617
+ position: absolute;
2618
+ top: -9999em;
2619
+ left: 8px;
2620
+ z-index: 1;
2621
+ opacity: 0;
2622
+ }
2623
+
2624
+ @media not (prefers-reduced-motion) {
2625
+ .dataviews-view-grid__card .dataviews-selection-checkbox {
2626
+ transition: opacity 0.1s linear;
2627
+ }
2628
+ }
2629
+ @media (hover: none) {
2630
+ .dataviews-view-grid__card .dataviews-selection-checkbox {
2631
+ opacity: 1;
2632
+ top: 8px;
2633
+ }
2634
+ }
2635
+ .dataviews-view-grid__card:hover .dataviews-selection-checkbox,
2636
+ .dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
2637
+ .dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
2638
+ opacity: 1;
2639
+ top: 8px;
2640
+ }
2641
+
2642
+ .dataviews-view-grid__card .dataviews-view-grid__media-actions {
2643
+ position: absolute;
2644
+ top: 4px;
2645
+ opacity: 0;
2646
+ right: 4px;
2647
+ }
2648
+
2649
+ .dataviews-view-grid__card .dataviews-view-grid__media-actions .dataviews-all-actions-button {
2650
+ background-color: #fff;
2651
+ }
2652
+
2653
+ @media not (prefers-reduced-motion) {
2654
+ .dataviews-view-grid__card .dataviews-view-grid__media-actions {
2655
+ transition: opacity 0.1s linear;
2656
+ }
2657
+ }
2658
+ @media (hover: none) {
2659
+ .dataviews-view-grid__card .dataviews-view-grid__media-actions {
2660
+ opacity: 1;
2661
+ top: 4px;
2662
+ }
2663
+ }
2664
+ .dataviews-view-grid__card:hover .dataviews-view-grid__media-actions,
2665
+ .dataviews-view-grid__card:focus-within .dataviews-view-grid__media-actions,
2666
+ .dataviews-view-grid__card .dataviews-view-grid__media-actions:has(.dataviews-all-actions-button[aria-expanded=true]) {
2667
+ opacity: 1;
2668
+ }
2669
+
2670
+ .dataviews-view-grid__media--clickable {
2671
+ cursor: pointer;
2672
+ }
2673
+
2674
+ .dataviews-view-grid__group-header {
2675
+ font-size: 15px;
2676
+ font-weight: 499;
2677
+ color: #1e1e1e;
2678
+ margin: 0 0 8px 0;
2679
+ padding: 0 48px;
2680
+ container-type: inline-size;
2681
+ }
2682
+
2683
+ @container (max-width: 430px) {
2684
+ .dataviews-view-grid__group-header {
2685
+ padding-left: 24px;
2686
+ padding-right: 24px;
2687
+ }
2688
+ }
2689
+ div.dataviews-view-list {
2690
+ list-style-type: none;
2691
+ }
2692
+
2693
+ .dataviews-view-list {
2694
+ margin: 0 0 auto;
2695
+ }
2696
+
2697
+ .dataviews-view-list div[role=row],
2698
+ .dataviews-view-list div[role=article] {
2699
+ margin: 0;
2700
+ border-top: 1px solid #f0f0f0;
2701
+ }
2702
+
2703
+ .dataviews-view-list div[role=row] .dataviews-view-list__item-wrapper,
2704
+ .dataviews-view-list div[role=article] .dataviews-view-list__item-wrapper {
2705
+ position: relative;
2706
+ padding: 16px 24px;
2707
+ box-sizing: border-box;
2708
+ }
2709
+
2710
+ .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
2711
+ .dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
2712
+ display: flex;
2713
+ width: max-content;
2714
+ flex: 0 0 auto;
2715
+ gap: 4px;
2716
+ }
2717
+
2718
+ .dataviews-view-list div[role=row] .dataviews-view-list__item-actions .components-button,
2719
+ .dataviews-view-list div[role=article] .dataviews-view-list__item-actions .components-button {
2720
+ position: relative;
2721
+ z-index: 1;
2722
+ }
2723
+
2724
+ .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > div,
2725
+ .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > div {
2726
+ height: 24px;
2727
+ }
2728
+
2729
+ .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child),
2730
+ .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > :not(:last-child) {
2731
+ flex: 0;
2732
+ overflow: hidden;
2733
+ width: 0;
2734
+ }
2735
+
2736
+ .dataviews-view-list div[role=row]:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions > :not(:last-child),
2737
+ .dataviews-view-list div[role=article]:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions > :not(:last-child) {
2738
+ flex-basis: min-content;
2739
+ width: auto;
2740
+ overflow: unset;
2741
+ }
2742
+
2743
+ @media (hover: none) {
2744
+ .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child),
2745
+ .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > :not(:last-child) {
2746
+ flex-basis: min-content;
2747
+ width: auto;
2748
+ overflow: unset;
2749
+ }
2750
+ }
2751
+ .dataviews-view-list div[role=row].is-selected.is-selected,
2752
+ .dataviews-view-list div[role=article].is-selected.is-selected {
2753
+ border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
2754
+ }
2755
+
2756
+ .dataviews-view-list div[role=row].is-selected.is-selected + div[role=row], .dataviews-view-list div[role=row].is-selected.is-selected + div[role=article],
2757
+ .dataviews-view-list div[role=article].is-selected.is-selected + div[role=row],
2758
+ .dataviews-view-list div[role=article].is-selected.is-selected + div[role=article] {
2759
+ border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
2760
+ }
2761
+
2762
+ .dataviews-view-list div[role=row]:not(.is-selected) .dataviews-view-list__title-field,
2763
+ .dataviews-view-list div[role=article]:not(.is-selected) .dataviews-view-list__title-field {
2764
+ color: #1e1e1e;
2765
+ }
2766
+
2767
+ .dataviews-view-list div[role=row]:not(.is-selected):hover, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered, .dataviews-view-list div[role=row]:not(.is-selected):focus-within,
2768
+ .dataviews-view-list div[role=article]:not(.is-selected):hover,
2769
+ .dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
2770
+ .dataviews-view-list div[role=article]:not(.is-selected):focus-within {
2771
+ color: var(--wp-admin-theme-color);
2772
+ background-color: #f8f8f8;
2773
+ }
2774
+
2775
+ .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-view-list__title-field,
2776
+ .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-view-list__fields, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-view-list__title-field,
2777
+ .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-view-list__fields, .dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-view-list__title-field,
2778
+ .dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-view-list__fields,
2779
+ .dataviews-view-list div[role=article]:not(.is-selected):hover .dataviews-view-list__title-field,
2780
+ .dataviews-view-list div[role=article]:not(.is-selected):hover .dataviews-view-list__fields,
2781
+ .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__title-field,
2782
+ .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__fields,
2783
+ .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__title-field,
2784
+ .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__fields {
2785
+ color: var(--wp-admin-theme-color);
2786
+ }
2787
+
2788
+ .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
2789
+ .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
2790
+ .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
2791
+ .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper {
2792
+ background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
2793
+ color: #1e1e1e;
2794
+ }
2795
+
2796
+ .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__title-field,
2797
+ .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__fields,
2798
+ .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__title-field,
2799
+ .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__fields,
2800
+ .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__title-field,
2801
+ .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__fields,
2802
+ .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__title-field,
2803
+ .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__fields {
2804
+ color: var(--wp-admin-theme-color);
2805
+ }
2806
+
2807
+ .dataviews-view-list .dataviews-view-list__item {
2808
+ position: absolute;
2809
+ z-index: 1;
2810
+ inset: 0;
2811
+ scroll-margin: 8px 0;
2812
+ appearance: none;
2813
+ border: none;
2814
+ background: none;
2815
+ padding: 0;
2816
+ cursor: pointer;
2817
+ }
2818
+
2819
+ .dataviews-view-list .dataviews-view-list__item:focus-visible {
2820
+ outline: none;
2821
+ }
2822
+
2823
+ .dataviews-view-list .dataviews-view-list__item:focus-visible::before {
2824
+ position: absolute;
2825
+ content: "";
2826
+ inset: var(--wp-admin-border-width-focus);
2827
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2828
+ border-radius: 2px;
2829
+ outline: 2px solid transparent;
2830
+ }
2831
+
2832
+ .dataviews-view-list .dataviews-view-list__title-field {
2833
+ flex: 1;
2834
+ min-height: 24px;
2835
+ line-height: 24px;
2836
+ overflow: hidden;
2837
+ }
2838
+
2839
+ .dataviews-view-list .dataviews-view-list__title-field:has(a, button) {
2840
+ z-index: 1;
2841
+ }
2842
+
2843
+ .dataviews-view-list .dataviews-view-list__media-wrapper {
2844
+ width: 52px;
2845
+ height: 52px;
2846
+ overflow: hidden;
2847
+ position: relative;
2848
+ flex-shrink: 0;
2849
+ background-color: #fff;
2850
+ border-radius: 4px;
2851
+ }
2852
+
2853
+ .dataviews-view-list .dataviews-view-list__media-wrapper img {
2854
+ width: 100%;
2855
+ height: 100%;
2856
+ object-fit: cover;
2857
+ }
2858
+
2859
+ .dataviews-view-list .dataviews-view-list__media-wrapper::after {
2860
+ content: "";
2861
+ position: absolute;
2862
+ top: 0;
2863
+ left: 0;
2864
+ width: 100%;
2865
+ height: 100%;
2866
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
2867
+ border-radius: 4px;
2868
+ }
2869
+
2870
+ .dataviews-view-list .dataviews-view-list__field-wrapper {
2871
+ min-height: 52px;
2872
+ flex-grow: 1;
2873
+ }
2874
+
2875
+ .dataviews-view-list .dataviews-view-list__fields {
2876
+ color: #757575;
2877
+ display: flex;
2878
+ gap: 12px;
2879
+ row-gap: 4px;
2880
+ flex-wrap: wrap;
2881
+ font-size: 12px;
2882
+ }
2883
+
2884
+ .dataviews-view-list .dataviews-view-list__fields:empty {
2885
+ display: none;
2886
+ }
2887
+
2888
+ .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:has(.dataviews-view-list__field-value:empty) {
2889
+ display: none;
2890
+ }
2891
+
2892
+ .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field-value {
2893
+ min-height: 24px;
2894
+ line-height: 20px;
2895
+ display: flex;
2896
+ align-items: center;
2897
+ }
2898
+
2899
+ .dataviews-view-list + .dataviews-pagination {
2900
+ justify-content: space-between;
2901
+ }
2902
+
2903
+ .dataviews-view-list__group-header {
2904
+ font-size: 15px;
2905
+ font-weight: 499;
2906
+ color: #1e1e1e;
2907
+ margin: 0 0 8px 0;
2908
+ padding: 0 24px;
2909
+ }
2910
+
2911
+ .dataviews-view-table {
2912
+ width: 100%;
2913
+ text-indent: 0;
2914
+ border-color: inherit;
2915
+ border-collapse: collapse;
2916
+ position: relative;
2917
+ color: #757575;
2918
+ margin-bottom: auto;
2919
+ }
2920
+
2921
+ .dataviews-view-table th {
2922
+ text-align: left;
2923
+ color: #1e1e1e;
2924
+ font-weight: normal;
2925
+ font-size: 13px;
2926
+ }
2927
+
2928
+ .dataviews-view-table td,
2929
+ .dataviews-view-table th {
2930
+ padding: 12px;
2931
+ }
2932
+
2933
+ .dataviews-view-table td.dataviews-view-table__actions-column,
2934
+ .dataviews-view-table th.dataviews-view-table__actions-column {
2935
+ text-align: right;
2936
+ }
2937
+
2938
+ .dataviews-view-table td.dataviews-view-table__actions-column--sticky,
2939
+ .dataviews-view-table th.dataviews-view-table__actions-column--sticky {
2940
+ position: sticky;
2941
+ right: 0;
2942
+ background-color: #fff;
2943
+ }
2944
+
2945
+ .dataviews-view-table td.dataviews-view-table__actions-column--stuck::after,
2946
+ .dataviews-view-table th.dataviews-view-table__actions-column--stuck::after {
2947
+ display: block;
2948
+ content: "";
2949
+ position: absolute;
2950
+ top: 0;
2951
+ bottom: 0;
2952
+ left: 0;
2953
+ width: 1px;
2954
+ background-color: #f0f0f0;
2955
+ }
2956
+
2957
+ .dataviews-view-table td.dataviews-view-table__checkbox-column,
2958
+ .dataviews-view-table th.dataviews-view-table__checkbox-column {
2959
+ padding-right: 0;
2960
+ width: 1%;
2961
+ }
2962
+
2963
+ .dataviews-view-table td.dataviews-view-table__checkbox-column .dataviews-view-table__cell-content-wrapper,
2964
+ .dataviews-view-table th.dataviews-view-table__checkbox-column .dataviews-view-table__cell-content-wrapper {
2965
+ max-width: auto;
2966
+ min-width: auto;
2967
+ }
2968
+
2969
+ .dataviews-view-table tr {
2970
+ border-top: 1px solid #f0f0f0;
2971
+ }
2972
+
2973
+ .dataviews-view-table tr .dataviews-view-table-header-button {
2974
+ gap: 4px;
2975
+ }
2976
+
2977
+ .dataviews-view-table tr td:first-child,
2978
+ .dataviews-view-table tr th:first-child {
2979
+ padding-left: 48px;
2980
+ }
2981
+
2982
+ .dataviews-view-table tr td:first-child .dataviews-view-table-header-button,
2983
+ .dataviews-view-table tr th:first-child .dataviews-view-table-header-button {
2984
+ margin-left: -8px;
2985
+ }
2986
+
2987
+ .dataviews-view-table tr td:last-child,
2988
+ .dataviews-view-table tr th:last-child {
2989
+ padding-right: 48px;
2990
+ }
2991
+
2992
+ .dataviews-view-table tr:last-child {
2993
+ border-bottom: 0;
2994
+ }
2995
+
2996
+ .dataviews-view-table tr.is-hovered, .dataviews-view-table tr.is-hovered .dataviews-view-table__actions-column--sticky {
2997
+ background-color: #f8f8f8;
2998
+ }
2999
+
3000
+ .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input {
3001
+ opacity: 0;
3002
+ }
3003
+
3004
+ .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:checked, .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:indeterminate, .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:focus {
3005
+ opacity: 1;
3006
+ }
3007
+
3008
+ .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
3009
+ opacity: 0;
3010
+ }
3011
+
3012
+ .dataviews-view-table tr:focus-within .components-checkbox-control__input,
3013
+ .dataviews-view-table tr:focus-within .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr.is-hovered .components-checkbox-control__input,
3014
+ .dataviews-view-table tr.is-hovered .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr:hover .components-checkbox-control__input,
3015
+ .dataviews-view-table tr:hover .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
3016
+ opacity: 1;
3017
+ }
3018
+
3019
+ @media (hover: none) {
3020
+ .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input,
3021
+ .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
3022
+ opacity: 1;
3023
+ }
3024
+ }
3025
+ .dataviews-view-table tr.is-selected {
3026
+ background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3027
+ color: #757575;
3028
+ }
3029
+
3030
+ .dataviews-view-table tr.is-selected, .dataviews-view-table tr.is-selected + tr {
3031
+ border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
3032
+ }
3033
+
3034
+ .dataviews-view-table tr.is-selected:hover {
3035
+ background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
3036
+ }
3037
+
3038
+ .dataviews-view-table tr.is-selected .dataviews-view-table__actions-column--sticky {
3039
+ background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, #fff);
3040
+ }
3041
+
3042
+ .dataviews-view-table tr.is-selected:hover .dataviews-view-table__actions-column--sticky {
3043
+ background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 8%, #fff);
3044
+ }
3045
+
3046
+ .dataviews-view-table thead {
3047
+ position: sticky;
3048
+ inset-block-start: 0;
3049
+ z-index: 1;
3050
+ }
3051
+
3052
+ .dataviews-view-table thead tr {
3053
+ border: 0;
3054
+ }
3055
+
3056
+ .dataviews-view-table thead tr .components-checkbox-control__input.components-checkbox-control__input {
3057
+ opacity: 1;
3058
+ }
3059
+
3060
+ .dataviews-view-table thead th {
3061
+ background-color: #fff;
3062
+ padding-top: 8px;
3063
+ padding-bottom: 8px;
3064
+ padding-left: 12px;
3065
+ font-size: 11px;
3066
+ text-transform: uppercase;
3067
+ font-weight: 499;
3068
+ }
3069
+
3070
+ .dataviews-view-table thead th:has(.dataviews-view-table-header-button):not(:first-child) {
3071
+ padding-left: 4px;
3072
+ }
3073
+
3074
+ .dataviews-view-table tbody td {
3075
+ vertical-align: top;
3076
+ }
3077
+
3078
+ .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
3079
+ min-height: 32px;
3080
+ display: flex;
3081
+ align-items: center;
3082
+ }
3083
+
3084
+ .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__cell-align-end {
3085
+ justify-content: flex-end;
3086
+ }
3087
+
3088
+ .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__cell-align-center {
3089
+ justify-content: center;
3090
+ }
3091
+
3092
+ .dataviews-view-table tbody .components-v-stack > .dataviews-view-table__cell-content-wrapper:not(:first-child) {
3093
+ min-height: 0;
3094
+ }
3095
+
3096
+ .dataviews-view-table .dataviews-view-table-header-button {
3097
+ padding: 4px 8px;
3098
+ font-size: 11px;
3099
+ text-transform: uppercase;
3100
+ font-weight: 499;
3101
+ }
3102
+
3103
+ .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
3104
+ color: #1e1e1e;
3105
+ }
3106
+
3107
+ .dataviews-view-table .dataviews-view-table-header-button span {
3108
+ speak: none;
3109
+ }
3110
+
3111
+ .dataviews-view-table .dataviews-view-table-header-button span:empty {
3112
+ display: none;
3113
+ }
3114
+
3115
+ .dataviews-view-table .dataviews-view-table-header {
3116
+ padding-left: 4px;
3117
+ }
3118
+
3119
+ .dataviews-view-table .dataviews-view-table__actions-column {
3120
+ width: auto;
3121
+ white-space: nowrap;
3122
+ }
3123
+
3124
+ .dataviews-view-table:has(tr.is-selected) .components-checkbox-control__input {
3125
+ opacity: 1;
3126
+ }
3127
+
3128
+ .dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:first-child) {
3129
+ padding-left: 0;
3130
+ }
3131
+
3132
+ .dataviews-view-table.has-compact-density td,
3133
+ .dataviews-view-table.has-compact-density th {
3134
+ padding: 4px 8px;
3135
+ }
3136
+
3137
+ .dataviews-view-table.has-comfortable-density td,
3138
+ .dataviews-view-table.has-comfortable-density th {
3139
+ padding: 16px 12px;
3140
+ }
3141
+
3142
+ .dataviews-view-table.has-compact-density td.dataviews-view-table__checkbox-column,
3143
+ .dataviews-view-table.has-compact-density th.dataviews-view-table__checkbox-column, .dataviews-view-table.has-comfortable-density td.dataviews-view-table__checkbox-column,
3144
+ .dataviews-view-table.has-comfortable-density th.dataviews-view-table__checkbox-column {
3145
+ padding-right: 0;
3146
+ }
3147
+
3148
+ @container (max-width: 430px) {
3149
+ .dataviews-view-table tr td:first-child,
3150
+ .dataviews-view-table tr th:first-child {
3151
+ padding-left: 24px;
3152
+ }
3153
+ .dataviews-view-table tr td:last-child,
3154
+ .dataviews-view-table tr th:last-child {
3155
+ padding-right: 24px;
3156
+ }
3157
+ }
3158
+ .dataviews-view-table-selection-checkbox {
3159
+ --checkbox-input-size: 24px;
3160
+ }
3161
+
3162
+ @media (min-width: 600px) {
3163
+ .dataviews-view-table-selection-checkbox {
3164
+ --checkbox-input-size: 16px;
3165
+ }
3166
+ }
3167
+ .dataviews-column-primary__media {
3168
+ max-width: 60px;
3169
+ overflow: hidden;
3170
+ position: relative;
3171
+ flex-shrink: 0;
3172
+ background-color: #fff;
3173
+ border-radius: 4px;
3174
+ }
3175
+
3176
+ .dataviews-column-primary__media img {
3177
+ width: 100%;
3178
+ height: 100%;
3179
+ object-fit: cover;
3180
+ }
3181
+
3182
+ .dataviews-column-primary__media::after {
3183
+ content: "";
3184
+ position: absolute;
3185
+ top: 0;
3186
+ left: 0;
3187
+ width: 100%;
3188
+ height: 100%;
3189
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
3190
+ border-radius: 4px;
3191
+ }
3192
+
3193
+ .dataviews-view-table__cell-content-wrapper:not(.dataviews-column-primary__media),
3194
+ .dataviews-view-table__primary-column-content:not(.dataviews-column-primary__media) {
3195
+ min-width: 15ch;
3196
+ max-width: 80ch;
3197
+ }
3198
+
3199
+ .dataviews-view-table__group-header-row .dataviews-view-table__group-header-cell {
3200
+ font-weight: 499;
3201
+ padding: 12px 48px;
3202
+ color: #1e1e1e;
3203
+ }
3204
+
3205
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card {
3206
+ height: 100%;
3207
+ justify-content: flex-start;
3208
+ position: relative;
3209
+ }
3210
+
3211
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-actions {
3212
+ padding: 8px 0 4px;
3213
+ }
3214
+
3215
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field {
3216
+ min-height: 24px;
3217
+ overflow: hidden;
3218
+ align-content: center;
3219
+ text-align: start;
3220
+ }
3221
+
3222
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
3223
+ width: fit-content;
3224
+ }
3225
+
3226
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
3227
+ color: #1e1e1e;
3228
+ }
3229
+
3230
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after,
3231
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
3232
+ background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
3233
+ }
3234
+
3235
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after {
3236
+ box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
3237
+ }
3238
+
3239
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
3240
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3241
+ }
3242
+
3243
+ .dataviews-view-picker-grid:focus-visible[aria-activedescendant] {
3244
+ outline: none;
3245
+ }
3246
+
3247
+ .dataviews-view-picker-grid:focus-visible [data-active-item=true] {
3248
+ outline: 2px solid var(--wp-admin-theme-color);
3249
+ }
3250
+
3251
+ .dataviews-view-picker-grid .dataviews-selection-checkbox {
3252
+ top: 8px !important;
3253
+ }
3254
+
3255
+ .dataviews-view-picker-grid .dataviews-selection-checkbox input {
3256
+ pointer-events: none;
3257
+ }
3258
+
3259
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__media {
3260
+ width: 100%;
3261
+ aspect-ratio: 1/1;
3262
+ background-color: #fff;
3263
+ border-radius: 4px;
3264
+ position: relative;
3265
+ }
3266
+
3267
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
3268
+ object-fit: cover;
3269
+ width: 100%;
3270
+ height: 100%;
3271
+ }
3272
+
3273
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__media::after {
3274
+ content: "";
3275
+ position: absolute;
3276
+ top: 0;
3277
+ left: 0;
3278
+ width: 100%;
3279
+ height: 100%;
3280
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
3281
+ border-radius: 4px;
3282
+ pointer-events: none;
3283
+ }
3284
+
3285
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
3286
+ position: relative;
3287
+ font-size: 12px;
3288
+ line-height: 16px;
3289
+ }
3290
+
3291
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields:not(:empty) {
3292
+ padding: 0 0 12px;
3293
+ }
3294
+
3295
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field-value:not(:empty) {
3296
+ min-height: 24px;
3297
+ line-height: 20px;
3298
+ padding-top: 2px;
3299
+ }
3300
+
3301
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
3302
+ min-height: 24px;
3303
+ align-items: center;
3304
+ }
3305
+
3306
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name {
3307
+ width: 35%;
3308
+ color: #757575;
3309
+ overflow: hidden;
3310
+ text-overflow: ellipsis;
3311
+ white-space: nowrap;
3312
+ }
3313
+
3314
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
3315
+ width: 65%;
3316
+ overflow: hidden;
3317
+ text-overflow: ellipsis;
3318
+ white-space: nowrap;
3319
+ }
3320
+
3321
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field:not(:has(.dataviews-view-picker-grid__field-value:not(:empty))) {
3322
+ display: none;
3323
+ }
3324
+
3325
+ .dataviews-view-picker-grid .dataviews-view-picker-grid__badge-fields:not(:empty) {
3326
+ padding-bottom: 12px;
3327
+ }
3328
+
3329
+ .dataviews-view-picker-grid__field-value:empty,
3330
+ .dataviews-view-picker-grid__field:empty {
3331
+ display: none;
3332
+ }
3333
+
3334
+ .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
3335
+ position: absolute;
3336
+ top: -9999em;
3337
+ left: 8px;
3338
+ z-index: 1;
3339
+ }
3340
+
3341
+ @media (hover: none) {
3342
+ .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
3343
+ top: 8px;
3344
+ }
3345
+ }
3346
+ .dataviews-view-picker-grid__card:hover .dataviews-selection-checkbox,
3347
+ .dataviews-view-picker-grid__card:focus-within .dataviews-selection-checkbox,
3348
+ .dataviews-view-picker-grid__card.is-selected .dataviews-selection-checkbox {
3349
+ top: 8px;
3350
+ }
3351
+
3352
+ .dataviews-view-picker-grid__media--clickable {
3353
+ cursor: pointer;
3354
+ }
3355
+
3356
+ .dataviews-view-picker-grid-group__header {
3357
+ font-size: 15px;
3358
+ font-weight: 499;
3359
+ color: #1e1e1e;
3360
+ margin: 0 0 8px 0;
3361
+ padding: 0 48px;
3362
+ }
3363
+
3364
+ .dataviews-controls__datetime {
3365
+ border: none;
3366
+ padding: 0;
3367
+ }
3368
+
3369
+ .dataviews-controls__relative-date-number,
3370
+ .dataviews-controls__relative-date-unit {
3371
+ flex: 1 1 50%;
3372
+ }
3373
+
3374
+ .dataviews-controls__date input[type=date]::-webkit-inner-spin-button,
3375
+ .dataviews-controls__date input[type=date]::-webkit-calendar-picker-indicator {
3376
+ display: none;
3377
+ -webkit-appearance: none;
3378
+ }
3379
+
3380
+ .dataviews-controls__date-preset {
3381
+ border: 1px solid #ddd;
3382
+ }
3383
+
3384
+ .dataviews-controls__date-preset:active {
3385
+ background-color: #000;
3386
+ }
3387
+
3388
+ .dataforms-layouts-panel__field {
3389
+ width: 100%;
3390
+ min-height: 32px;
3391
+ justify-content: flex-start !important;
3392
+ align-items: flex-start !important;
3393
+ }
3394
+
3395
+ .dataforms-layouts-panel__field-label {
3396
+ width: 38%;
3397
+ flex-shrink: 0;
3398
+ min-height: 32px;
3399
+ display: flex;
3400
+ align-items: center;
3401
+ line-height: 20px;
3402
+ hyphens: auto;
3403
+ }
3404
+
3405
+ .dataforms-layouts-panel__field-label--label-position-side {
3406
+ align-self: center;
3407
+ }
3408
+
3409
+ .dataforms-layouts-panel__field-control {
3410
+ flex-grow: 1;
3411
+ min-height: 32px;
3412
+ display: flex;
3413
+ align-items: center;
3414
+ }
3415
+
3416
+ .dataforms-layouts-panel__field-control .components-button {
3417
+ max-width: 100%;
3418
+ text-align: left;
3419
+ white-space: normal;
3420
+ text-wrap: balance;
3421
+ text-wrap: pretty;
3422
+ min-height: 32px;
3423
+ }
3424
+
3425
+ .dataforms-layouts-panel__field-control.components-button.is-link[aria-disabled=true] {
3426
+ text-decoration: none;
3427
+ }
3428
+
3429
+ .dataforms-layouts-panel__field-control .components-dropdown {
3430
+ max-width: 100%;
3431
+ }
3432
+
3433
+ .dataforms-layouts-panel__field-dropdown .components-popover__content {
3434
+ min-width: 320px;
3435
+ padding: 16px;
3436
+ }
3437
+
3438
+ .dataforms-layouts-panel__dropdown-header {
3439
+ margin-bottom: 16px;
3440
+ }
3441
+
3442
+ .dataforms-layouts-panel__modal-footer {
3443
+ margin-top: 16px;
3444
+ }
3445
+
3446
+ .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
3447
+ z-index: 159990;
3448
+ }
3449
+
3450
+ .dataforms-layouts-regular__field {
3451
+ width: 100%;
3452
+ min-height: 32px;
3453
+ justify-content: flex-start !important;
3454
+ align-items: flex-start !important;
3455
+ }
3456
+
3457
+ .dataforms-layouts-regular__field-label {
3458
+ width: 38%;
3459
+ flex-shrink: 0;
3460
+ min-height: 32px;
3461
+ display: flex;
3462
+ align-items: center;
3463
+ line-height: 20px;
3464
+ hyphens: auto;
3465
+ }
3466
+
3467
+ .dataforms-layouts-regular__field-label--label-position-side {
3468
+ align-self: center;
3469
+ }
3470
+
3471
+ .dataforms-layouts-regular__field-control {
3472
+ flex-grow: 1;
3473
+ min-height: 32px;
3474
+ display: flex;
3475
+ align-items: center;
3476
+ }
3477
+
3478
+ .dataforms-layouts-card__field-header-label {
3479
+ font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3480
+ font-weight: 499;
3481
+ font-size: 15px;
3482
+ line-height: 20px;
3483
+ }
3484
+
3485
+ .dataforms-layouts-card__field {
3486
+ width: 100%;
3487
+ }
3488
+
3489
+ .dataforms-layouts-card__field-description {
3490
+ color: #757575;
3491
+ display: block;
3492
+ font-size: 13px;
3493
+ margin-bottom: 16px;
3494
+ }
3495
+
3496
+ .dataforms-layouts-card__field-summary {
3497
+ display: flex;
3498
+ flex-direction: row;
3499
+ gap: 16px;
3500
+ }
3501
+
3502
+ .dataforms-layouts-row__field-control {
3503
+ width: 100%;
3504
+ }
3505
+
3506
+ .dataforms-layouts__wrapper {
3507
+ font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3508
+ font-weight: 400;
3509
+ font-size: 13px;
3510
+ line-height: 20px;
3511
+ }
3512
+
689
3513
  .editor-autocompleters__user .editor-autocompleters__no-avatar::before {
690
3514
  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
691
3515
  font: normal 20px/1 dashicons;
@@ -819,7 +3643,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
819
3643
  }
820
3644
 
821
3645
  .editor-collab-sidebar-panel__more-reply-button {
822
- font-weight: 500;
3646
+ font-weight: 499;
823
3647
  }
824
3648
 
825
3649
  .editor-collab-sidebar-panel__resolution-text {
@@ -1006,11 +3830,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
1006
3830
  display: none;
1007
3831
  }
1008
3832
 
1009
- .editor-content-only-settings-menu__description {
1010
- padding: 8px;
1011
- min-width: 235px;
1012
- }
1013
-
1014
3833
  .editor-block-visibility__disabled-blocks-count {
1015
3834
  border: 1px solid #ddd;
1016
3835
  border-width: 1px 0;
@@ -1405,6 +4224,115 @@ body.is-fullscreen-mode .interface-interface-skeleton {
1405
4224
  background-color: #fff;
1406
4225
  }
1407
4226
 
4227
+ .editor-global-styles-header__description {
4228
+ padding: 0 16px;
4229
+ }
4230
+
4231
+ .editor-global-styles-header {
4232
+ margin-bottom: 0 !important;
4233
+ }
4234
+
4235
+ .editor-global-styles-sidebar {
4236
+ display: flex;
4237
+ flex-direction: column;
4238
+ min-height: 100%;
4239
+ }
4240
+ .editor-global-styles-sidebar__panel {
4241
+ flex: 1;
4242
+ }
4243
+ .editor-global-styles-sidebar .components-navigator-screen {
4244
+ padding: 0;
4245
+ }
4246
+
4247
+ .editor-global-styles-sidebar .editor-global-styles-sidebar__header-title {
4248
+ margin: 0;
4249
+ }
4250
+
4251
+ .editor-global-styles-sidebar .editor-global-styles-sidebar__header-actions {
4252
+ flex: 1;
4253
+ }
4254
+
4255
+ .editor-global-styles-sidebar .components-navigation__menu-title-heading {
4256
+ font-size: 15.6px;
4257
+ font-weight: 499;
4258
+ }
4259
+
4260
+ .editor-global-styles-sidebar .components-navigation__item > button span {
4261
+ font-weight: 499;
4262
+ }
4263
+
4264
+ .editor-global-styles-sidebar .block-editor-panel-color-gradient-settings {
4265
+ border: 0;
4266
+ }
4267
+
4268
+ .editor-global-styles-sidebar .single-column {
4269
+ grid-column: span 1;
4270
+ }
4271
+
4272
+ .editor-global-styles-sidebar .components-tools-panel .span-columns {
4273
+ grid-column: 1/-1;
4274
+ }
4275
+
4276
+ .editor-global-styles-sidebar__blocks-group {
4277
+ padding-top: 24px;
4278
+ border-top: 1px solid #e0e0e0;
4279
+ }
4280
+
4281
+ .editor-global-styles-sidebar__blocks-group-help {
4282
+ padding: 0 16px;
4283
+ }
4284
+
4285
+ .global-styles-ui-color-palette-panel,
4286
+ .global-styles-ui-gradient-palette-panel {
4287
+ padding: 16px;
4288
+ }
4289
+
4290
+ .editor-global-styles-sidebar hr {
4291
+ margin: 0;
4292
+ }
4293
+
4294
+ .show-icon-labels .editor-global-styles-sidebar__header .components-button.has-icon {
4295
+ width: auto;
4296
+ }
4297
+ .show-icon-labels .editor-global-styles-sidebar__header .components-button.has-icon svg {
4298
+ display: none;
4299
+ }
4300
+ .show-icon-labels .editor-global-styles-sidebar__header .components-button.has-icon::after {
4301
+ content: attr(aria-label);
4302
+ font-size: 12px;
4303
+ }
4304
+
4305
+ .editor-welcome-guide {
4306
+ width: 312px;
4307
+ }
4308
+ .editor-welcome-guide.guide-styles .editor-welcome-guide__image {
4309
+ background: #00a0d2;
4310
+ }
4311
+ .editor-welcome-guide__image {
4312
+ margin: 0 0 16px;
4313
+ }
4314
+ .editor-welcome-guide__image > img {
4315
+ display: block;
4316
+ max-width: 100%;
4317
+ object-fit: cover;
4318
+ }
4319
+ .editor-welcome-guide__heading {
4320
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4321
+ font-size: 24px;
4322
+ line-height: 1.4;
4323
+ margin: 16px 0 16px 0;
4324
+ padding: 0 32px;
4325
+ }
4326
+ .editor-welcome-guide__text {
4327
+ font-size: 13px;
4328
+ line-height: 1.4;
4329
+ margin: 0 0 16px 0;
4330
+ padding: 0 32px;
4331
+ }
4332
+ .editor-welcome-guide__text img {
4333
+ vertical-align: bottom;
4334
+ }
4335
+
1408
4336
  .editor-header {
1409
4337
  box-sizing: border-box;
1410
4338
  }
@@ -1870,7 +4798,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
1870
4798
  }
1871
4799
  .editor-post-card-panel__title.editor-post-card-panel__title {
1872
4800
  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1873
- font-weight: 500;
4801
+ font-weight: 499;
1874
4802
  font-size: 13px;
1875
4803
  line-height: 20px;
1876
4804
  margin: 0;
@@ -2034,7 +4962,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
2034
4962
 
2035
4963
  .editor-post-last-revision__title {
2036
4964
  width: 100%;
2037
- font-weight: 500;
4965
+ font-weight: 499;
2038
4966
  }
2039
4967
 
2040
4968
  .editor-post-last-revision__title.components-button.has-icon {
@@ -2103,6 +5031,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
2103
5031
  text-wrap: pretty;
2104
5032
  height: auto;
2105
5033
  min-height: 32px;
5034
+ font-weight: 400;
2106
5035
  }
2107
5036
  .editor-post-panel__row-control .components-dropdown {
2108
5037
  max-width: 100%;
@@ -2275,7 +5204,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
2275
5204
  }
2276
5205
 
2277
5206
  .post-publish-panel__postpublish-header {
2278
- font-weight: 500;
5207
+ font-weight: 499;
2279
5208
  }
2280
5209
 
2281
5210
  .post-publish-panel__postpublish-subheader {
@@ -2822,6 +5751,79 @@ textarea.editor-post-text-editor:-ms-input-placeholder {
2822
5751
  padding: 16px;
2823
5752
  }
2824
5753
 
5754
+ .editor-style-book {
5755
+ height: 100%;
5756
+ }
5757
+ .editor-style-book.is-button {
5758
+ border-radius: 8px;
5759
+ }
5760
+ .editor-style-book {
5761
+ display: flex;
5762
+ flex-direction: column;
5763
+ align-items: stretch;
5764
+ }
5765
+
5766
+ .editor-style-book__iframe {
5767
+ display: block;
5768
+ height: 100%;
5769
+ width: 100%;
5770
+ }
5771
+ .editor-style-book__iframe.is-button {
5772
+ border-radius: 8px;
5773
+ }
5774
+ .editor-style-book__iframe.is-focused {
5775
+ outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
5776
+ outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
5777
+ }
5778
+
5779
+ .editor-style-book__tablist-container {
5780
+ flex: none;
5781
+ display: flex;
5782
+ width: 100%;
5783
+ padding-right: 56px;
5784
+ background: #fff;
5785
+ }
5786
+
5787
+ .editor-style-book__tabpanel {
5788
+ flex: 1 0 auto;
5789
+ overflow: auto;
5790
+ }
5791
+
5792
+ .editor-styles-canvas {
5793
+ height: 100%;
5794
+ padding: 16px;
5795
+ background-color: var(--wp-editor-canvas-background);
5796
+ }
5797
+ .editor-styles-canvas iframe {
5798
+ display: block;
5799
+ width: 100%;
5800
+ height: 100%;
5801
+ }
5802
+
5803
+ .editor-styles-canvas__section {
5804
+ background: #fff;
5805
+ border-radius: 8px;
5806
+ bottom: 0;
5807
+ left: 0;
5808
+ overflow: hidden;
5809
+ position: absolute;
5810
+ right: 0;
5811
+ top: 0;
5812
+ }
5813
+ @media not (prefers-reduced-motion) {
5814
+ .editor-styles-canvas__section {
5815
+ transition: all 0.3s;
5816
+ }
5817
+ }
5818
+
5819
+ .editor-styles-canvas__close-button {
5820
+ position: absolute;
5821
+ right: 8px;
5822
+ top: 8px;
5823
+ z-index: 2;
5824
+ background: #fff;
5825
+ }
5826
+
2825
5827
  .table-of-contents__popover.components-popover .components-popover__content {
2826
5828
  min-width: 380px;
2827
5829
  }
@@ -3015,4 +6017,9 @@ textarea.editor-post-text-editor:-ms-input-placeholder {
3015
6017
 
3016
6018
  .editor-fields-content-preview__empty {
3017
6019
  text-align: center;
6020
+ }
6021
+
6022
+ .editor-push-changes-to-global-styles-control .components-button {
6023
+ justify-content: center;
6024
+ width: 100%;
3018
6025
  }