pageflow 15.6.1 → 15.7.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (274) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +253 -11
  3. data/README.md +1 -2
  4. data/admins/pageflow/entry.rb +28 -57
  5. data/admins/pageflow/membership.rb +5 -1
  6. data/admins/pageflow/user.rb +1 -3
  7. data/app/assets/images/pageflow/admin/icons/buttons/editor.svg +2 -0
  8. data/app/assets/images/pageflow/admin/icons/buttons/preview.svg +2 -0
  9. data/app/assets/images/pageflow/admin/icons/buttons/show_public.svg +2 -0
  10. data/app/assets/images/pageflow/admin/icons/delete.svg +9 -0
  11. data/app/assets/images/pageflow/admin/icons/done.svg +6 -0
  12. data/app/assets/images/pageflow/admin/icons/edit.svg +7 -0
  13. data/app/assets/images/pageflow/admin/icons/editor.svg +2 -0
  14. data/app/assets/images/pageflow/admin/icons/folder.svg +8 -0
  15. data/app/assets/images/pageflow/admin/icons/folder_active.svg +8 -0
  16. data/app/assets/images/pageflow/admin/icons/info.svg +3 -0
  17. data/app/assets/images/pageflow/admin/icons/new.svg +5 -0
  18. data/app/assets/images/pageflow/admin/icons/preview.svg +2 -0
  19. data/app/assets/images/pageflow/admin/icons/published.svg +2 -0
  20. data/app/assets/images/pageflow/admin/icons/published_with_password.svg +2 -0
  21. data/app/assets/images/pageflow/admin/icons/show_public.svg +2 -0
  22. data/app/assets/images/pageflow/editor/blank_entry/logo.png +0 -0
  23. data/app/assets/images/pageflow/themes/default/embed_opt_in.svg +3 -0
  24. data/app/assets/images/pageflow/themes/default/embed_opt_out_info.svg +16 -0
  25. data/app/assets/javascripts/pageflow/admin/entries.js +9 -57
  26. data/app/assets/javascripts/pageflow/dist/editor.js +11890 -0
  27. data/app/assets/javascripts/pageflow/dist/frontend.js +5800 -0
  28. data/app/assets/javascripts/pageflow/dist/react-client.js +22 -0
  29. data/app/assets/javascripts/pageflow/dist/react-server.js +19 -0
  30. data/app/assets/javascripts/pageflow/dist/ui.js +127 -10
  31. data/app/assets/stylesheets/pageflow/admin/active_admin_patches.scss +18 -16
  32. data/app/assets/stylesheets/pageflow/admin/badge_list.scss +25 -35
  33. data/app/assets/stylesheets/pageflow/admin/columns.scss +13 -11
  34. data/app/assets/stylesheets/pageflow/admin/embed_code.scss +1 -4
  35. data/app/assets/stylesheets/pageflow/admin/entries/folders.scss +44 -19
  36. data/app/assets/stylesheets/pageflow/admin/entries.scss +15 -31
  37. data/app/assets/stylesheets/pageflow/admin/features.scss +3 -1
  38. data/app/assets/stylesheets/pageflow/admin/forms.scss +14 -12
  39. data/app/assets/stylesheets/pageflow/admin/hint.scss +8 -14
  40. data/app/assets/stylesheets/pageflow/admin/icon_button.scss +25 -14
  41. data/app/assets/stylesheets/pageflow/admin/icon_link.scss +31 -15
  42. data/app/assets/stylesheets/pageflow/admin/publication_state_indicator.scss +14 -7
  43. data/app/assets/stylesheets/pageflow/admin/status_tags.scss +5 -4
  44. data/app/assets/stylesheets/pageflow/admin/tabs_view.scss +36 -34
  45. data/app/assets/stylesheets/pageflow/admin/tooltip_bubble.scss +15 -11
  46. data/app/assets/stylesheets/pageflow/admin.scss +12 -0
  47. data/app/assets/stylesheets/pageflow/editor/background_positioning.scss +15 -61
  48. data/app/assets/stylesheets/pageflow/editor/base.scss +28 -13
  49. data/app/assets/stylesheets/pageflow/editor/blank_entry.scss +6 -6
  50. data/app/assets/stylesheets/pageflow/editor/change_theme.scss +28 -71
  51. data/app/assets/stylesheets/pageflow/editor/composables.scss +2 -2
  52. data/app/assets/stylesheets/pageflow/editor/confirm_encoding.scss +18 -36
  53. data/app/assets/stylesheets/pageflow/editor/confirm_upload.scss +12 -39
  54. data/app/assets/stylesheets/pageflow/editor/dialogs.scss +39 -12
  55. data/app/assets/stylesheets/pageflow/editor/disabled_atmo_indicator.scss +3 -3
  56. data/app/assets/stylesheets/pageflow/editor/drop_down_button.scss +7 -10
  57. data/app/assets/stylesheets/pageflow/editor/emulation_mode_button.scss +3 -8
  58. data/app/assets/stylesheets/pageflow/editor/failures.scss +3 -3
  59. data/app/assets/stylesheets/pageflow/editor/file_import.scss +22 -38
  60. data/app/assets/stylesheets/pageflow/editor/file_meta_data.scss +3 -7
  61. data/app/assets/stylesheets/pageflow/editor/file_settings_dialog.scss +4 -24
  62. data/app/assets/stylesheets/pageflow/editor/file_stages.scss +10 -11
  63. data/app/assets/stylesheets/pageflow/editor/file_thumbnails.scss +4 -8
  64. data/app/assets/stylesheets/pageflow/editor/files.scss +7 -6
  65. data/app/assets/stylesheets/pageflow/editor/files_explorer.scss +13 -30
  66. data/app/assets/stylesheets/pageflow/editor/files_gallery.scss +15 -11
  67. data/app/assets/stylesheets/pageflow/editor/filtered_files.scss +6 -7
  68. data/app/assets/stylesheets/pageflow/editor/help.scss +19 -14
  69. data/app/assets/stylesheets/pageflow/editor/help_image.scss +1 -1
  70. data/app/assets/stylesheets/pageflow/editor/info_box.scss +19 -0
  71. data/app/assets/stylesheets/pageflow/editor/inputs/file_input.scss +7 -11
  72. data/app/assets/stylesheets/pageflow/editor/inputs/file_processing_state_display.scss +0 -2
  73. data/app/assets/stylesheets/pageflow/editor/inputs/reference.scss +7 -11
  74. data/app/assets/stylesheets/pageflow/editor/list.scss +13 -10
  75. data/app/assets/stylesheets/pageflow/editor/loading.scss +1 -1
  76. data/app/assets/stylesheets/pageflow/editor/locked.scss +9 -5
  77. data/app/assets/stylesheets/pageflow/editor/menu.scss +5 -5
  78. data/app/assets/stylesheets/pageflow/editor/notifications.scss +15 -14
  79. data/app/assets/stylesheets/pageflow/editor/other_entry_item.scss +7 -3
  80. data/app/assets/stylesheets/pageflow/editor/outline.scss +57 -19
  81. data/app/assets/stylesheets/pageflow/editor/page_links.scss +10 -8
  82. data/app/assets/stylesheets/pageflow/editor/page_selection.scss +2 -29
  83. data/app/assets/stylesheets/pageflow/editor/publish_entry.scss +5 -6
  84. data/app/assets/stylesheets/pageflow/editor/quotas.scss +2 -3
  85. data/app/assets/stylesheets/pageflow/editor/select_button.scss +12 -6
  86. data/app/assets/stylesheets/pageflow/editor/sidebar_footer.scss +1 -5
  87. data/app/assets/stylesheets/pageflow/editor/storyline_picker.scss +6 -2
  88. data/app/assets/stylesheets/pageflow/editor/text_tracks.scss +6 -22
  89. data/app/assets/stylesheets/pageflow/editor/widgets.scss +2 -2
  90. data/app/assets/stylesheets/pageflow/editor/wysihtml5.scss +35 -29
  91. data/app/assets/stylesheets/pageflow/mixins/background_icons.scss +3 -3
  92. data/app/assets/stylesheets/pageflow/mixins/buttons.scss +50 -68
  93. data/app/assets/stylesheets/pageflow/themes/default/base.scss +2 -0
  94. data/app/assets/stylesheets/pageflow/themes/default/consent/bar.scss +156 -0
  95. data/app/assets/stylesheets/pageflow/themes/default/consent/vendor_list.scss +62 -0
  96. data/app/assets/stylesheets/pageflow/themes/default/consent.scss +2 -0
  97. data/app/assets/stylesheets/pageflow/themes/default/logo/alignment.scss +7 -0
  98. data/app/assets/stylesheets/pageflow/themes/default/page/shadow.scss +44 -0
  99. data/app/assets/stylesheets/pageflow/themes/default/third_party_embed_consent.scss +103 -0
  100. data/app/assets/stylesheets/pageflow/ui/forms.scss +79 -84
  101. data/app/assets/stylesheets/pageflow/ui/functions.scss +56 -0
  102. data/app/assets/stylesheets/pageflow/ui/input/check_box_group_input.scss +2 -3
  103. data/app/assets/stylesheets/pageflow/ui/input/color_input.scss +6 -6
  104. data/app/assets/stylesheets/pageflow/ui/input/extended_select_input.scss +63 -50
  105. data/app/assets/stylesheets/pageflow/ui/normalize/forms.scss +153 -0
  106. data/app/assets/stylesheets/pageflow/ui/normalize.scss +278 -0
  107. data/app/assets/stylesheets/pageflow/ui/properties.scss +44 -0
  108. data/app/assets/stylesheets/pageflow/ui/table_cells/delete_row_table_cell.scss +1 -1
  109. data/app/assets/stylesheets/pageflow/ui/table_view.scss +14 -18
  110. data/app/assets/stylesheets/pageflow/ui/tabs_view.scss +8 -11
  111. data/app/assets/stylesheets/pageflow/ui/tooltip.scss +6 -8
  112. data/app/assets/stylesheets/pageflow/ui/validation_error_messages.scss +6 -0
  113. data/app/assets/stylesheets/pageflow/ui.scss +4 -0
  114. data/app/controllers/pageflow/edit_locks_controller.rb +3 -1
  115. data/app/helpers/pageflow/admin/entries_helper.rb +2 -12
  116. data/app/helpers/pageflow/embed_code_helper.rb +1 -1
  117. data/app/helpers/pageflow/entries_helper.rb +41 -2
  118. data/app/helpers/pageflow/file_background_images_helper.rb +1 -1
  119. data/app/helpers/pageflow/page_types_helper.rb +1 -1
  120. data/app/helpers/pageflow/themes_helper.rb +1 -1
  121. data/app/jobs/pageflow/poll_meta_data_from_zencoder_job.rb +1 -1
  122. data/app/jobs/pageflow/poll_zencoder_job.rb +1 -9
  123. data/app/models/pageflow/audio_file.rb +17 -0
  124. data/app/models/pageflow/audio_file_url_templates.rb +4 -1
  125. data/app/models/pageflow/customized_theme.rb +37 -0
  126. data/app/models/pageflow/draft_entry.rb +6 -59
  127. data/app/models/pageflow/entry.rb +8 -0
  128. data/app/models/pageflow/entry_at_revision.rb +68 -0
  129. data/app/models/pageflow/entry_role_query.rb +44 -24
  130. data/app/models/pageflow/image_file_css_background_image_urls.rb +8 -2
  131. data/app/models/pageflow/published_entry.rb +9 -56
  132. data/app/models/pageflow/theme_customization.rb +46 -0
  133. data/app/models/pageflow/theme_customization_file.rb +58 -0
  134. data/app/models/pageflow/video_file.rb +11 -1
  135. data/app/models/pageflow/video_file_url_templates.rb +1 -0
  136. data/app/policies/pageflow/entry_policy.rb +4 -0
  137. data/app/state_machines/pageflow/media_encoding_state_machine.rb +23 -4
  138. data/app/views/admin/entries/_form.html.erb +50 -0
  139. data/app/views/admin/entries/entry_type_name_input.html.erb +5 -0
  140. data/app/views/admin/features/_form.html.erb +1 -1
  141. data/app/views/admin/memberships/_form.html.erb +2 -3
  142. data/app/views/admin/users/_form.html.erb +1 -1
  143. data/app/views/admin/users/invitation.html.erb +2 -2
  144. data/app/views/components/pageflow/admin/entry_user_badge_list.rb +10 -9
  145. data/app/views/components/pageflow/admin/members_tab.rb +5 -1
  146. data/app/views/components/pageflow/admin/revisions_tab.rb +13 -3
  147. data/app/views/components/pageflow/admin/timestamp.rb +20 -0
  148. data/app/views/components/pageflow/admin/user_account_badge_list.rb +5 -6
  149. data/app/views/pageflow/admin/entries/_cannot_add_user.html.erb +9 -5
  150. data/app/views/pageflow/admin/entries/_entry_type_name_input.html.erb +7 -0
  151. data/app/views/pageflow/audio_files/_audio_file.json.jbuilder +13 -0
  152. data/app/views/pageflow/editor/encoding_confirmations/_intro.html.erb +0 -0
  153. data/app/views/pageflow/editor/encoding_confirmations/check.json.jbuilder +14 -2
  154. data/config/initializers/paperclip.rb +16 -1
  155. data/config/locales/de.yml +24 -28
  156. data/config/locales/en.yml +19 -10
  157. data/db/migrate/20210528073122_create_pageflow_theme_customizations.rb +11 -0
  158. data/db/migrate/20210531090654_create_pageflow_theme_customization_files.rb +15 -0
  159. data/db/migrate/20210531102228_add_selected_file_ids_to_theme_customizations.rb +5 -0
  160. data/db/migrate/20211020085902_add_canonical_entry_url_prefix_to_themings.rb +5 -0
  161. data/db/migrate/20220503150010_add_peak_data_to_audio_files.rb +5 -0
  162. data/db/migrate/20220705084830_add_trailing_slash_in_canonical_urls_to_themings.rb +5 -0
  163. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/editor.js +256 -124
  164. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/frontend.js +566 -167
  165. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/react-client.js +5 -5
  166. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/react-server.js +4 -4
  167. data/entry_types/paged/app/helpers/pageflow_paged/third_party_embed_consent_helper.rb +38 -0
  168. data/entry_types/paged/app/views/pageflow_paged/third_party_embed_consent/_opt_in.html.erb +12 -0
  169. data/entry_types/paged/app/views/pageflow_paged/third_party_embed_consent/_opt_out_info.html.erb +10 -0
  170. data/entry_types/paged/config/initializers/features.rb +2 -0
  171. data/entry_types/paged/config/locales/new/video_contain.de.yml +7 -0
  172. data/entry_types/paged/config/locales/new/video_contain.en.yml +7 -0
  173. data/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/seed_html_helper.rb +3 -0
  174. data/entry_types/scrolled/app/helpers/pageflow_scrolled/entry_json_seed_helper.rb +1 -0
  175. data/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb +58 -0
  176. data/entry_types/scrolled/app/helpers/pageflow_scrolled/react_server_side_rendering_helper.rb +37 -3
  177. data/entry_types/scrolled/app/helpers/pageflow_scrolled/themes_helper.rb +92 -6
  178. data/entry_types/scrolled/app/helpers/pageflow_scrolled/webpack_public_path_helper.rb +20 -0
  179. data/entry_types/scrolled/app/models/pageflow_scrolled/content_element.rb +7 -0
  180. data/entry_types/scrolled/app/views/pageflow_scrolled/editor/entries/_head.html.erb +5 -2
  181. data/entry_types/scrolled/app/views/pageflow_scrolled/editor/entries/_seed.json.jbuilder +5 -1
  182. data/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb +5 -4
  183. data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder +16 -0
  184. data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_theme.json.jbuilder +13 -2
  185. data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_widget.json.jbuilder +2 -0
  186. data/entry_types/scrolled/config/locales/de.yml +1 -8
  187. data/entry_types/scrolled/config/locales/en.yml +1 -9
  188. data/entry_types/scrolled/config/locales/new/before_after_slider.de.yml +8 -0
  189. data/entry_types/scrolled/config/locales/new/before_after_slider.en.yml +8 -0
  190. data/entry_types/scrolled/config/locales/new/center_ragged.de.yml +8 -0
  191. data/entry_types/scrolled/config/locales/new/center_ragged.en.yml +9 -0
  192. data/entry_types/scrolled/config/locales/new/consent.de.yml +25 -0
  193. data/entry_types/scrolled/config/locales/new/consent.en.yml +24 -0
  194. data/entry_types/scrolled/config/locales/new/content_element_categories.de.yml +39 -0
  195. data/entry_types/scrolled/config/locales/new/content_element_categories.en.yml +39 -0
  196. data/entry_types/scrolled/config/locales/new/default_transition.de.yml +14 -0
  197. data/entry_types/scrolled/config/locales/new/default_transition.en.yml +14 -0
  198. data/entry_types/scrolled/config/locales/new/header_line_breaks.de.yml +28 -0
  199. data/entry_types/scrolled/config/locales/new/header_line_breaks.en.yml +27 -0
  200. data/entry_types/scrolled/config/locales/new/header_size.de.yml +17 -0
  201. data/entry_types/scrolled/config/locales/new/header_size.en.yml +17 -0
  202. data/entry_types/scrolled/config/locales/new/iframe_embed.de.yml +39 -0
  203. data/entry_types/scrolled/config/locales/new/iframe_embed.en.yml +39 -0
  204. data/entry_types/scrolled/config/locales/new/inline_loops.de.yml +26 -0
  205. data/entry_types/scrolled/config/locales/new/inline_loops.en.yml +26 -0
  206. data/entry_types/scrolled/config/locales/new/portrait_inline_image.de.yml +9 -0
  207. data/entry_types/scrolled/config/locales/new/portrait_inline_image.en.yml +9 -0
  208. data/entry_types/scrolled/config/locales/new/section_width.de.yml +10 -0
  209. data/entry_types/scrolled/config/locales/new/section_width.en.yml +10 -0
  210. data/entry_types/scrolled/config/locales/new/typography_variants.de.yml +7 -0
  211. data/entry_types/scrolled/config/locales/new/typography_variants.en.yml +7 -0
  212. data/entry_types/scrolled/config/locales/new/video_embed_poster.de.yml +8 -0
  213. data/entry_types/scrolled/config/locales/new/video_embed_poster.en.yml +8 -0
  214. data/entry_types/scrolled/config/locales/new/waveform_styles.de.yml +11 -0
  215. data/entry_types/scrolled/config/locales/new/waveform_styles.en.yml +12 -0
  216. data/entry_types/scrolled/config/locales/new/widgets.de.yml +6 -0
  217. data/entry_types/scrolled/config/locales/new/widgets.en.yml +6 -0
  218. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb +29 -5
  219. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/themes_plugin.rb.tt +8 -6
  220. data/entry_types/scrolled/lib/pageflow_scrolled/additional_packs.rb +37 -0
  221. data/entry_types/scrolled/lib/pageflow_scrolled/additional_seed_data.rb +57 -0
  222. data/entry_types/scrolled/lib/pageflow_scrolled/configuration.rb +49 -0
  223. data/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb +8 -0
  224. data/entry_types/scrolled/lib/pageflow_scrolled/react_widget_type.rb +42 -0
  225. data/entry_types/scrolled/lib/pageflow_scrolled.rb +17 -1
  226. data/entry_types/scrolled/package/contentElements-editor.js +323 -89
  227. data/entry_types/scrolled/package/contentElements-frontend.css +1 -1
  228. data/entry_types/scrolled/package/contentElements-frontend.js +719 -529
  229. data/entry_types/scrolled/package/editor.js +459 -261
  230. data/entry_types/scrolled/package/frontend/{EditableText-7093fd0e.js → EditableInlineText.module-b9923660.js} +284 -362
  231. data/entry_types/scrolled/package/frontend/{i18n-4dc6c377.js → PhonePlatformContext-9fb97827.js} +199 -106
  232. data/entry_types/scrolled/package/frontend/{Viewer-e49e7807.js → Viewer-e2290ea0.js} +196 -79
  233. data/entry_types/scrolled/package/frontend/{Wavesurfer-0adf5667.js → Wavesurfer-7d9cf1b7.js} +16 -58
  234. data/entry_types/scrolled/package/frontend/{components-6a6793ca.js → components-6ab26015.js} +664 -671
  235. data/entry_types/scrolled/package/frontend/{getPrototypeOf-63c7c8e8.js → createSuper-d0f30da3.js} +34 -5
  236. data/entry_types/scrolled/package/frontend/index.css +1 -9
  237. data/entry_types/scrolled/package/frontend/index.js +1919 -2386
  238. data/entry_types/scrolled/package/frontend/{useBrowserFeature-91a4c29d.js → usePhonePlatform-2857c22b.js} +9 -8
  239. data/entry_types/scrolled/package/frontend-server.js +3 -6
  240. data/entry_types/scrolled/package/package.json +16 -8
  241. data/entry_types/scrolled/package/testHelpers.js +456 -0
  242. data/entry_types/scrolled/package/values/breakpoints.module.css +9 -0
  243. data/entry_types/scrolled/package/values/colors.module.css +5 -0
  244. data/entry_types/scrolled/package/widgets/defaultNavigation.css +9 -0
  245. data/entry_types/scrolled/package/widgets/defaultNavigation.js +612 -0
  246. data/entry_types/scrolled/spec/fixtures/image.svg +1 -0
  247. data/lib/pageflow/ability_mixin.rb +4 -0
  248. data/lib/pageflow/built_in_widget_type.rb +4 -0
  249. data/lib/pageflow/built_in_widget_types_plugin.rb +7 -0
  250. data/lib/pageflow/configuration.rb +34 -1
  251. data/lib/pageflow/entry_type.rb +11 -2
  252. data/lib/pageflow/entry_type_configuration.rb +2 -0
  253. data/lib/pageflow/file_type.rb +24 -0
  254. data/lib/pageflow/paperclip_processors/audio_waveform.rb +42 -0
  255. data/lib/pageflow/paperclip_processors/noop.rb +10 -0
  256. data/lib/pageflow/theme_customizations.rb +61 -0
  257. data/lib/pageflow/user_mixin.rb +6 -0
  258. data/lib/pageflow/version.rb +1 -1
  259. data/lib/pageflow.rb +9 -0
  260. data/package/config/jest/index.js +2 -1
  261. data/package/config/postcss/scaleFunctions.js +71 -0
  262. data/package/editor.js +95 -85
  263. data/package/frontend.js +521 -161
  264. data/package/package.json +5 -3
  265. data/package/testHelpers.js +26 -5
  266. data/package/ui.js +124 -11
  267. data/spec/factories/draft_entries.rb +19 -1
  268. data/spec/factories/entries.rb +4 -0
  269. data/spec/factories/published_entries.rb +6 -0
  270. data/spec/fixtures/audio.ogg +0 -0
  271. metadata +123 -15
  272. data/app/views/admin/entries/_not_allowed_to_see_entry_types.json.jbuilder +0 -2
  273. data/app/views/admin/entries/entry_types.json.jbuilder +0 -4
  274. data/package/config/jest/transformers/upwardBabel.js +0 -5
@@ -1,6 +1,6 @@
1
1
  .file_stage_items {
2
- border-top: solid 1px #aaa;
3
- border-bottom: solid 1px #aaa;
2
+ border-top: solid 1px var(--ui-on-surface-color-lighter);
3
+ border-bottom: solid 1px var(--ui-on-surface-color-lighter);
4
4
  padding-bottom: 5px;
5
5
  margin-bottom: 5px;
6
6
  }
@@ -9,34 +9,33 @@
9
9
  white-space: normal;
10
10
 
11
11
  &.indented {
12
- @include background-icon-center($left: 20px, $color: #bbb);
12
+ @include background-icon-center($left: 20px, $color: var(--ui-on-surface-color-lighter));
13
13
  padding: 10px 0 5px 60px;
14
14
  margin-left: -60px;
15
15
  }
16
16
 
17
17
  &.stand_alone {
18
- @include background-icon-center($left: 31px, $color: #bbb);
18
+ @include background-icon-center($left: 31px, $color: var(--ui-on-surface-color-lighter));
19
19
  padding-left: 70px;
20
- }
20
+ }
21
21
 
22
22
  &.action_required,
23
23
  &.active {
24
- @include background-icon-color(#444);
24
+ @include background-icon-color(var(--ui-primary-color));
25
25
  @include background-icon-animation(blink);
26
26
  }
27
27
 
28
28
  &.finished {
29
- @include background-icon-color(#444);
29
+ @include background-icon-color(var(--ui-primary-color));
30
30
  }
31
31
 
32
32
  &.failed {
33
- @include background-icon-color(#c22);
33
+ @include background-icon-color(var(--ui-error-color));
34
34
  }
35
35
 
36
36
  .percent {
37
- color: #444;
37
+ color: var(--ui-on-surface-color-light);
38
38
  font-size: 12px;
39
- font-weight: bold;
40
39
  }
41
40
 
42
41
  .error_message {
@@ -55,4 +54,4 @@
55
54
  &.encoding {
56
55
  @include cog-icon;
57
56
  }
58
- }
57
+ }
@@ -6,13 +6,9 @@
6
6
  height: 100%;
7
7
  }
8
8
 
9
- .pictogram:hover {
10
- background-color: #333;
11
- }
12
-
13
9
  .pictogram {
14
- background-color: #444;
15
- @include background-icon-center($color: #eee, $font-size: 30px);
10
+ background-color: var(--ui-on-surface-color-light-solid);
11
+ @include background-icon-center($color: var(--ui-on-primary-color), $font-size: 30px);
16
12
  @include background-icon-animation(blink);
17
13
 
18
14
  &.audio {
@@ -63,13 +59,13 @@
63
59
 
64
60
  .expandable {
65
61
  .file_thumbnail {
66
- @include background-icon-left($color: #fff, $left: 70%, $top: 85%);
62
+ @include background-icon-left($color: var(--ui-on-primary-color), $left: 70%, $top: 85%);
67
63
  @include down-open-icon;
68
64
 
69
65
  &:before {
70
66
  z-index: 1;
71
67
  opacity: 0.4;
72
- text-shadow: #000 1px 0px 4px;
68
+ text-shadow: var(--ui-on-surface-color) 1px 0 4px;
73
69
  }
74
70
 
75
71
  &:hover:before {
@@ -1,8 +1,9 @@
1
1
  ul.files {
2
- margin-top: 10px;
2
+ margin-top: space(2);
3
3
 
4
4
  > li {
5
- background-color: #eee;
5
+ background-color: var(--ui-primary-color-lightest);
6
+ border-radius: rounded();
6
7
  margin-bottom: 2px;
7
8
  position: relative;
8
9
  padding: 37px 10px 0 70px;
@@ -18,7 +19,7 @@ ul.files {
18
19
  li.blank_slate {
19
20
  text-align: center;
20
21
  padding: 10px 5px 20px 5px;
21
- color: #888;
22
+ color: var(--ui-on-surface-color-light);
22
23
  }
23
24
 
24
25
  .file_thumbnail {
@@ -52,9 +53,8 @@ ul.files {
52
53
  a.settings,
53
54
  a.cancel,
54
55
  a.confirm,
55
- a.remove,
56
56
  a.retry {
57
- @include icon-only-button(#aaa);
57
+ @include icon-only-button();
58
58
  }
59
59
 
60
60
  a.settings {
@@ -62,6 +62,7 @@ ul.files {
62
62
  }
63
63
 
64
64
  a.remove {
65
+ @include icon-only-button("destructive");
65
66
  @include trash-icon;
66
67
  }
67
68
 
@@ -78,7 +79,7 @@ ul.files {
78
79
  }
79
80
 
80
81
  a.select {
81
- @include button(#590);
82
+ @include simple-button("primary");
82
83
 
83
84
  padding-left: 5px;
84
85
  padding-right: 5px;
@@ -1,12 +1,7 @@
1
1
  .files_explorer {
2
2
  .box {
3
- height: 100%;
4
- @include box-sizing(border-box);
5
-
6
- h2 {
7
- margin: 0;
8
- position: absolute;
9
- }
3
+ min-width: 500px;
4
+ min-height: 400px;
10
5
  }
11
6
 
12
7
  ul {
@@ -15,58 +10,46 @@
15
10
  list-style: none;
16
11
  }
17
12
 
18
-
19
- .panels {
20
- padding-top: 30px;
21
- padding-bottom: 50px;
22
- height: 100%;
23
- @include box-sizing(border-box);
24
- }
25
-
26
- .entries_panel, .files_panel {
27
- height: 100%;
28
- display: inline-block;
29
- vertical-align: top;
30
- border: 1px solid #ddd;
13
+ .entries_panel,
14
+ .files_panel {
31
15
  overflow: auto;
32
16
  }
33
17
 
34
18
  .entries_panel {
35
19
  width: 20%;
20
+ padding: 0 space(1) 0 space(1);
21
+ margin: 0 space(1) 0 space(-1);
36
22
 
37
23
  li.blank_slate {
38
24
  text-align: center;
39
25
  padding: 10px 5px 20px 5px;
40
- color: #888;
26
+ color: var(--ui-on-surface-color-light);
41
27
  }
42
28
  }
43
29
 
44
30
  .files_panel {
45
- width: 77%;
31
+ flex: 1;
32
+ border-left: solid 1px var(--ui-on-surface-color-lighter);
33
+ padding-left: space(4);
46
34
 
47
35
  .tabs_view {
48
36
  height: 100%;
49
37
  position: relative;
50
38
 
51
39
  .tabs_view-container {
52
- @include position(absolute, 37px 0 0px 0);
40
+ @include position(absolute, 37px 0 0 0);
53
41
  height: auto;
54
42
  }
55
43
  }
56
44
  }
57
45
 
58
- .footer {
59
- width: 98%;
60
- @include position(absolute, 0 37px 14px 0);
61
- }
62
-
63
46
  .close {
64
47
  @include cancel-icon;
65
- @include icon-button(#888);
48
+ @include icon-button;
66
49
  }
67
50
 
68
51
  .ok {
69
52
  @include check-icon;
70
- @include icon-button();
53
+ @include icon-button("primary");
71
54
  }
72
55
  }
@@ -2,30 +2,32 @@ ul.files_gallery {
2
2
  margin-top: 10px;
3
3
 
4
4
  > li {
5
- background-color: #eee;
6
5
  margin-bottom: 2px;
7
6
  position: relative;
8
7
  overflow: hidden;
9
8
  float: left;
10
9
  text-align: center;
11
- padding: 10px 5px 5px 5px;
12
-
13
- width: 20%;
14
- min-width: 110px;
15
- max-width: 180px;
16
-
10
+ padding: space(2);
11
+ width: 120px;
17
12
  cursor: pointer;
13
+ border: solid 3px transparent;
14
+ border-radius: rounded();
15
+
16
+ &:hover {
17
+ background-color: var(--ui-selection-color-lighter);
18
+ }
18
19
 
19
20
  &.active {
20
- background-color: $highlight-color;
21
+ background-color: var(--ui-selection-color-lighter);
22
+ border: solid 3px var(--ui-selection-color);
21
23
  }
22
24
 
23
25
  &.disabled {
26
+ background-color: transparent;
24
27
  opacity: 0.5;
25
-
26
28
  cursor: default;
27
29
 
28
- @include background-icon-right(#18A507, 22px, 18px);
30
+ @include background-icon-right(var(--ui-primary-color), 22px, 18px);
29
31
  @include check-icon;
30
32
  }
31
33
  }
@@ -33,7 +35,7 @@ ul.files_gallery {
33
35
  li.blank_slate {
34
36
  text-align: center;
35
37
  padding: 10px 5px 20px 5px;
36
- color: #888;
38
+ color: var(--ui-primary-color-light);
37
39
  }
38
40
 
39
41
  .file_thumbnail {
@@ -41,6 +43,8 @@ ul.files_gallery {
41
43
  width: 100px;
42
44
  display: block;
43
45
  margin: auto;
46
+ border-radius: rounded();
47
+ overflow: hidden;
44
48
  }
45
49
 
46
50
  .file_name {
@@ -3,11 +3,10 @@
3
3
 
4
4
  &-banner {
5
5
  display: block;
6
- padding: 7px 10px;
7
- margin: 0 -10px;
8
- background-color: #f9f1b7;
9
- border-top: solid 1px #e4dc9d;
10
- border-bottom: solid 1px #e4dc9d;
6
+ padding: space(2);
7
+ border-radius: rounded();
8
+ background-color: var(--ui-selection-color-lighter);
9
+ margin-top: space(2);
11
10
  }
12
11
 
13
12
  &-filter_name {
@@ -19,7 +18,7 @@
19
18
  @include cancel-icon;
20
19
 
21
20
  position: absolute;
22
- right: 7px;
23
- top: 15px;
21
+ right: space(4);
22
+ top: space(4);
24
23
  }
25
24
  }
@@ -8,6 +8,10 @@
8
8
 
9
9
  z-index: 5;
10
10
 
11
+ font-family: var(--ui-font-family);
12
+ font-size: var(--ui-font-size);
13
+ color: var(--ui-on-surface-color);
14
+
11
15
  &:before {
12
16
  content: " ";
13
17
  position: absolute;
@@ -15,9 +19,7 @@
15
19
  left: 0;
16
20
  width: 100%;
17
21
  height: 100%;
18
- background-color: #000;
19
-
20
- opacity: 0.2;
22
+ background-color: var(--ui-backdrop-color);
21
23
  }
22
24
 
23
25
  .box {
@@ -27,17 +29,16 @@
27
29
  min-height: 200px;
28
30
  height: 50%;
29
31
  top: 10%;
30
- border: solid 1px #aaa;
31
32
  margin: auto;
32
33
  padding: 20px;
33
- background-color: #fff;
34
+ background-color: var(--ui-surface-color);
35
+ border-radius: rounded();
34
36
  padding-bottom: 100px;
35
37
  }
36
38
 
37
39
  a.close {
38
40
  @include cancel-icon;
39
41
  @include icon-button;
40
-
41
42
  }
42
43
 
43
44
  h2 {
@@ -68,12 +69,12 @@
68
69
  a {
69
70
  display: block;
70
71
  text-decoration: none;
71
- color: #000;
72
+ color: var(--ui-on-surface-color);
72
73
  padding: 5px;
73
74
  }
74
75
 
75
76
  a:hover {
76
- background-color: #eee;
77
+ background-color: var(--ui-selection-color-lighter);
77
78
  }
78
79
 
79
80
  .expandable > a {
@@ -84,16 +85,16 @@
84
85
 
85
86
  .expanded > a {
86
87
  @include up-open-mini-icon;
87
- background-color: #eee;
88
+ background-color: var(--ui-primary-color-lightest);
88
89
  }
89
90
 
90
91
  .active > a {
91
- background-color: #D2E5FA;
92
+ background-color: var(--ui-selection-color-light);
92
93
  }
93
94
 
94
95
  li ul {
95
96
  display: none;
96
- border-bottom: solid 1px #ddd;
97
+ border-bottom: solid 1px var(--ui-on-surface-color-lightest);
97
98
  }
98
99
 
99
100
  .expanded ul {
@@ -117,7 +118,7 @@
117
118
  margin-left: 5px;
118
119
  padding-left: 20px;
119
120
  padding-right: 5px;
120
- border-left: solid 1px #888;
121
+ border-left: solid 1px var(--ui-on-surface-color-lighter);
121
122
 
122
123
  h1 {
123
124
  margin: 0 0 10px 0;
@@ -136,6 +137,10 @@
136
137
  font-size: 16px;
137
138
  line-height: 26px;
138
139
  }
140
+
141
+ a {
142
+ color: var(--ui-primary-color);
143
+ }
139
144
  }
140
145
 
141
146
  .footer {
@@ -152,13 +157,13 @@
152
157
  img {
153
158
  float: right;
154
159
  margin: 5px;
155
- border: solid 1px #888;
156
160
  padding: 1px;
157
161
  }
158
162
  }
159
163
 
160
164
  .editor .help_button {
161
- @include background-icon-right($color: #a0c4e0, $font-size: 16px, $right: 5px, $top: 7px);
165
+ @include background-icon-right($color: var(--ui-primary-color),
166
+ $font-size: 16px, $right: 5px, $top: 5px);
162
167
  @include help-circled-icon;
163
168
 
164
169
  padding: 7px 30px 0 5px;
@@ -1,5 +1,5 @@
1
1
  .help_image {
2
- border: solid 1px #444;
2
+ border: solid 1px var(--ui-on-surface-color-lighter);
3
3
  display: block;
4
4
  margin: 5px auto;
5
5
  }
@@ -2,4 +2,23 @@
2
2
  p {
3
3
  margin-bottom: 1em;
4
4
  }
5
+
6
+ .shortcuts {
7
+ dt {
8
+ display: inline-block;
9
+ margin-top: 0.5em;
10
+ }
11
+
12
+ dd {
13
+ margin: 0.5em 0 0.5em 6px;
14
+ }
15
+
16
+ kbd {
17
+ border: solid 1px currentColor;
18
+ border-radius: 4px;
19
+ padding: 3px 5px;
20
+ display: inline-block;
21
+ font-size: 11px;
22
+ }
23
+ }
5
24
  }
@@ -1,23 +1,19 @@
1
1
  .file_input {
2
2
  position: relative;
3
3
  white-space: nowrap;
4
- height: 80px;
5
4
 
6
5
  .file_thumbnail {
7
6
  width: 60px;
8
7
  height: 60px;
9
8
  vertical-align: bottom;
10
9
  margin-right: 5px;
11
- border: solid 1px #888;
12
- }
13
-
14
- div.file_thumbnail {
15
- float: left;
10
+ border-radius: rounded();
11
+ border: solid 1px var(--ui-primary-color-light);
16
12
  }
17
13
 
18
14
  div.file_name {
19
15
  position: absolute;
20
- top: 20px;
16
+ top: space(7);
21
17
  left: 70px;
22
18
  right: 20px;
23
19
  overflow: hidden;
@@ -28,16 +24,16 @@
28
24
  @include pencil-icon;
29
25
 
30
26
  position: absolute;
31
- top: 53px;
27
+ bottom: 0;
32
28
  right: 0;
33
29
  }
34
30
 
35
31
  a.unset {
36
- @include icon-only-button($base-color: #d00);
32
+ @include icon-only-button("destructive");
37
33
  @include cancel-circled-icon;
38
34
 
39
35
  position: absolute;
40
- top: 53px;
36
+ bottom: 0;
41
37
  right: 35px;
42
38
  }
43
39
 
@@ -48,7 +44,7 @@
48
44
  }
49
45
 
50
46
  position: absolute;
51
- top: 53px;
47
+ bottom: 0;
52
48
  left: 70px;
53
49
  }
54
50
 
@@ -1,6 +1,5 @@
1
1
  .file_processing_state_display {
2
2
  position: relative;
3
- margin-top: -6px;
4
3
 
5
4
  &:before {
6
5
  content: "";
@@ -9,7 +8,6 @@
9
8
  left: 0;
10
9
  width: 62px;
11
10
  height: 100%;
12
- background-color: #eee;
13
11
  }
14
12
 
15
13
  &-empty {
@@ -1,18 +1,14 @@
1
1
  .reference_input {
2
2
  position: relative;
3
3
  white-space: nowrap;
4
- height: 80px;
5
4
 
6
5
  .model_thumbnail {
7
6
  width: 60px;
8
7
  height: 60px;
9
8
  vertical-align: bottom;
10
9
  margin-right: 5px;
11
- border: solid 1px #888;
12
- }
13
-
14
- div.model_thumbnail {
15
- float: left;
10
+ border-radius: rounded();
11
+ border: solid 1px var(--ui-primary-color-light);
16
12
  }
17
13
 
18
14
  .file_thumbnail {
@@ -21,7 +17,7 @@
21
17
 
22
18
  div.title {
23
19
  position: absolute;
24
- top: 20px;
20
+ top: space(7);
25
21
  left: 70px;
26
22
  right: 20px;
27
23
  overflow: hidden;
@@ -32,20 +28,20 @@
32
28
  @include pencil-icon;
33
29
 
34
30
  position: absolute;
35
- top: 53px;
31
+ bottom: 0;
36
32
  right: 0;
37
33
  }
38
34
 
39
35
  .unset {
40
- @include icon-only-button($base-color: #d00);
36
+ @include icon-only-button("destructive");
41
37
  @include cancel-circled-icon;
42
38
 
43
39
  position: absolute;
44
- top: 53px;
40
+ bottom: 0;
45
41
  right: 35px;
46
42
  }
47
43
 
48
44
  .inline_help {
49
45
  white-space: normal;
50
46
  }
51
- }
47
+ }
@@ -4,13 +4,16 @@
4
4
  }
5
5
 
6
6
  .list_blank_slate {
7
- background-color: #efefef;
8
- color: #888;
7
+ background-color: var(--ui-primary-color-lightest);
8
+ border-radius: rounded();
9
+ color: var(--ui-on-surface-color-light);
9
10
  padding: 10px;
10
11
  }
11
12
 
12
13
  .list_item {
13
- background-color: #efefef;
14
+ background-color: var(--ui-primary-color-lightest);
15
+ border-radius: rounded();
16
+ overflow: hidden;
14
17
  cursor: default;
15
18
  padding: 10px 10px 10px 45px;
16
19
  position: relative;
@@ -29,7 +32,6 @@
29
32
  width: 35px;
30
33
  height: 100%;
31
34
  background-size: cover;
32
- background-color: #444;
33
35
  }
34
36
 
35
37
  .list_item_thumbnail .thumbnail {
@@ -42,7 +44,8 @@
42
44
 
43
45
  .list_item_missing_thumbnail {
44
46
  @include attention-icon;
45
- @include background-icon-center($color: #fff);
47
+ @include background-icon-center($color: var(--ui-error-color));
48
+ background-color: var(--ui-error-surface-color);
46
49
  display: none;
47
50
  position: absolute;
48
51
  }
@@ -74,13 +77,13 @@
74
77
 
75
78
  .list_item_description {
76
79
  margin-top: 10px;
77
- color: #666;
80
+ color: var(--ui-on-surface-color-light);
78
81
  }
79
82
 
80
83
  .list_item_buttons {
81
84
  position: absolute;
82
85
  right: 4px;
83
- top: 4px;
86
+ top: 3px;
84
87
  white-space: nowrap;
85
88
  }
86
89
 
@@ -93,16 +96,16 @@
93
96
  }
94
97
 
95
98
  .list_item_edit_button {
96
- @include icon-only-button(#aaa);
99
+ @include icon-only-button;
97
100
  @include pencil-icon;
98
101
  }
99
102
 
100
103
  .list_item_remove_button {
101
- @include icon-only-button(#aaa);
104
+ @include icon-only-button("destructive");
102
105
  @include trash-icon;
103
106
  }
104
107
 
105
108
  .sortable-placeholder {
106
109
  height: 35px;
107
110
  }
108
- }
111
+ }
@@ -1,5 +1,5 @@
1
1
  .spinner > div {
2
- background-color: #ddd;
2
+ background-color: var(--ui-on-surface-color-lighter);
3
3
  height: 100%;
4
4
  width: 6px;
5
5
  display: inline-block;
@@ -15,7 +15,7 @@
15
15
  width: 100%;
16
16
  height: 100%;
17
17
 
18
- background-color: #000;
18
+ background-color: var(--ui-backdrop-color);
19
19
  opacity: 0.8;
20
20
  }
21
21
 
@@ -37,20 +37,24 @@
37
37
  position: relative;
38
38
  max-width: 400px;
39
39
  top: 20%;
40
- border: solid 1px #aaa;
41
40
  margin: auto;
42
41
  padding: 20px;
43
- background-color: #fff;
42
+ border-radius: rounded();
43
+ box-shadow: var(--ui-box-shadow-md);
44
+ }
45
+
46
+ p {
47
+ margin-bottom: space(4);
44
48
  }
45
49
 
46
50
  a.close {
47
51
  @include cancel-icon;
48
- @include icon-button;
52
+ @include icon-button("primary");
49
53
  }
50
54
 
51
55
  a.break {
52
56
  @include minus-circled-icon;
53
- @include icon-button($base-color: #d00);
57
+ @include icon-button("destructive");
54
58
  float: right;
55
59
  }
56
60
  }