servicetrees 0.1.0__py3-none-any.whl

servicetrees/__init__.py

@@ -0,0 +1,3 @@
+"""Reusable Django apps for content-driven multi-site projects."""
+
+__version__ = '0.1.0'

servicetrees/ckeditor/README.md

@@ -0,0 +1,46 @@
+# CKEditor App Configuration
+
+This app provides CKEditor 5 integration for rich text editing.
+
+## Available Constants
+
+All constants are defined in `config/app_configs/ckeditor_config.py`:
+
+### `CKEDITOR_COLOR_PALETTE`
+List of color options available in the CKEditor color picker. Each item contains:
+- `color`: HSL color value
+- `label`: Display name for the color
+
+### `ST_CKEDITOR_CONFIGS`
+Dictionary of CKEditor configurations. The default configuration includes:
+- Toolbar items (headings, formatting, lists, links, etc.)
+- Heading options (paragraph, h1, h2, h3)
+- Link decorators (open in new tab)
+- Image upload configuration
+- Image styles and resize options
+- Media embed support
+- HTML support settings
+
+## Utility Functions
+
+Utility functions are available in `ckeditor/utils.py`:
+
+- `get_ckeditor_config(config_name='default')`: Retrieve a CKEditor configuration by name
+- `register_ckeditor_config(config_name, config_dict)`: Register a new CKEditor configuration
+
+## Usage
+
+```python
+from config.app_configs.ckeditor_config import ST_CKEDITOR_CONFIGS, CKEDITOR_COLOR_PALETTE
+from ckeditor.utils import get_ckeditor_config, register_ckeditor_config
+
+# Get default configuration
+config = get_ckeditor_config()
+
+# Register a custom configuration
+register_ckeditor_config('simple', {
+    'toolbar': {
+        'items': ['bold', 'italic', 'link']
+    }
+})
+```

servicetrees/ckeditor/SETTINGS.md

@@ -0,0 +1,10 @@
+# ckeditor settings
+
+Generated from `servicetrees/ckeditor/conf.py` by `scripts/settings_docs.py`; edit the comments there.
+Every setting is optional: set it in the project settings only to change the default.
+
+| Setting | Default | |
+|---|---|---|
+| `ST_CKEDITOR_CONFIGS` | `{'default': {}}` | Named CKEditor 5 configs ({'default': {...}, ...}); usually loaded from JSON by the project. |
+| `ST_CKEDITOR_SANITIZER` | `None` | Function (or dotted path) that cleans editor HTML on save; None uses servicetrees.ckeditor.sanitize.default_clean_html. A function returning its input turns cleaning off. |
+| `ST_CKEDITOR_IFRAME_HOSTS` | see `conf.py` | Hosts (and their subdomains) whose iframes survive cleaning. |

servicetrees/ckeditor/admin.py

@@ -0,0 +1 @@
+from django.contrib import admin

servicetrees/ckeditor/apps.py

@@ -0,0 +1,7 @@
+from django.apps import AppConfig
+
+class CKEditorConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'servicetrees.ckeditor'
+    label = 'st_ckeditor'
+    verbose_name = 'CKEditor'

servicetrees/ckeditor/conf.py

@@ -0,0 +1,14 @@
+"""Settings for ckeditor with their defaults; override any of them in the project settings."""
+from servicetrees.conf import app_settings
+
+__getattr__ = app_settings({
+    # Named CKEditor 5 configs ({'default': {...}, ...}); usually loaded from JSON by the project.
+    'ST_CKEDITOR_CONFIGS': {'default': {}},
+    # Function (or dotted path) that cleans editor HTML on save; None uses
+    # servicetrees.ckeditor.sanitize.default_clean_html. A function returning its input turns cleaning off.
+    'ST_CKEDITOR_SANITIZER': None,
+    # Hosts (and their subdomains) whose iframes survive cleaning.
+    'ST_CKEDITOR_IFRAME_HOSTS': [
+        'youtube.com', 'youtube-nocookie.com', 'vimeo.com', 'google.com', 'spotify.com', 'soundcloud.com',
+    ],
+})

servicetrees/ckeditor/sanitize.py

@@ -0,0 +1,87 @@
+"""
+Server-side cleaning of editor HTML.
+
+CKEditor's own filtering runs in the browser, so anything posted directly skips
+it. clean_html() keeps what the editor configs produce (text formatting, links,
+images, figures, tables, media embeds) and drops scripts, event handlers,
+javascript: URLs and iframes from hosts not in ST_CKEDITOR_IFRAME_HOSTS.
+"""
+from urllib.parse import urlsplit
+
+import nh3
+from django.utils.module_loading import import_string
+
+from servicetrees.ckeditor import conf as ckeditor_conf
+
+TAGS = nh3.ALLOWED_TAGS | {
+    'audio', 'figcaption', 'figure', 'iframe', 'oembed', 'picture', 'source', 'video',
+}
+
+ATTRIBUTES = {
+    '*': {'class', 'style', 'title', 'id', 'lang', 'dir'},
+    'a': {'href', 'target', 'rel', 'name'},
+    'img': {'src', 'alt', 'width', 'height', 'srcset', 'sizes', 'loading'},
+    'iframe': {'src', 'width', 'height', 'allow', 'allowfullscreen', 'frameborder', 'loading', 'referrerpolicy'},
+    'video': {'src', 'poster', 'controls', 'preload', 'width', 'height', 'loop', 'muted', 'playsinline'},
+    'audio': {'src', 'controls', 'preload', 'loop'},
+    'source': {'src', 'srcset', 'type', 'media', 'sizes'},
+    'oembed': {'url'},
+    'div': {'data-oembed-url'},
+    'ol': {'start', 'type', 'reversed'},
+    'li': {'value'},
+    'td': {'colspan', 'rowspan'},
+    'th': {'colspan', 'rowspan', 'scope'},
+    'col': {'span'},
+    'colgroup': {'span'},
+}
+
+STYLE_PROPERTIES = {
+    'aspect-ratio', 'background-color', 'border', 'border-collapse', 'clear', 'color', 'display', 'float',
+    'font-style', 'font-weight', 'height', 'left', 'margin', 'margin-bottom', 'margin-left',
+    'margin-right', 'margin-top', 'max-width', 'min-width', 'padding', 'padding-bottom', 'padding-left',
+    'padding-right', 'padding-top', 'position', 'text-align', 'text-decoration', 'top', 'vertical-align',
+    'width',
+}
+
+URL_SCHEMES = {'http', 'https', 'mailto', 'tel'}
+
+
+def _iframe_host_allowed(url):
+    try:
+        host = (urlsplit(url).hostname or '').lower()
+    except ValueError:
+        return False
+    if not url.lower().startswith(('https://', 'http://', '//')):
+        return False
+    return any(host == allowed or host.endswith('.' + allowed) for allowed in ckeditor_conf.ST_CKEDITOR_IFRAME_HOSTS)
+
+
+def _attribute_filter(tag, attribute, value):
+    if tag == 'iframe' and attribute == 'src':
+        return value if _iframe_host_allowed(value) else None
+    return value
+
+
+def default_clean_html(html):
+    return nh3.clean(
+        html,
+        tags=TAGS,
+        clean_content_tags={'script', 'style'},
+        attributes=ATTRIBUTES,
+        attribute_filter=_attribute_filter,
+        link_rel=None,
+        url_schemes=URL_SCHEMES,
+        filter_style_properties=STYLE_PROPERTIES,
+    )
+
+
+def clean_html(html):
+    """Editor HTML made safe to render with |safe (ST_CKEDITOR_SANITIZER replaces the cleaner)."""
+    if not html:
+        return html
+    sanitizer = ckeditor_conf.ST_CKEDITOR_SANITIZER
+    if sanitizer is None:
+        return default_clean_html(html)
+    if isinstance(sanitizer, str):
+        sanitizer = import_string(sanitizer)
+    return sanitizer(html)

servicetrees/ckeditor/static/ckeditor/css/ckeditor.css

@@ -0,0 +1,497 @@
+/* CKEditor admin editor overrides — loaded after site style.css */
+img.cke_drupal_break { height: 5px !important; }
+img.cke_anchor { min-width: auto !important; }
+.media-dropdown-option { padding: 5px 10px !important }
+.media-dropdown-panel { position: absolute !important; top: 40px !important; background: #fff !important; }
+.ck-content figcaption { min-height: 20px !important; background: transparent !important; }
+.ck-widget.html-object-embed:before { content: none !important; }
+.ck-editor figure p { margin: 0 !important; padding: 0 !important; }
+
+.ck-toolbar .media-dropdown-toolbar { display: flex; align-items: center; margin-right: 2px; }
+.ck-toolbar .media-dropdown-toolbar.ck-disabled { cursor: not-allowed; }
+.media-dropdown { position: relative; }
+.media-dropdown-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    height: 28px;
+    min-width: 28px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    background: transparent;
+    color: #2d2d2d;
+    font-size: 13px;
+    cursor: pointer;
+    font-family: inherit;
+    line-height: 1.2;
+}
+.media-dropdown-btn:hover { background: #f5f5f5; border-color: #e0e0e0; }
+.media-dropdown-btn:focus { outline: none; border-color: #007bff; }
+.media-dropdown-icon { display: inline-flex; align-items: center; justify-content: center; }
+.media-dropdown-icon svg { flex-shrink: 0; }
+.media-dropdown-label { white-space: nowrap; }
+.media-dropdown-panel {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 4px;
+    min-width: 200px;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    z-index: 1000;
+}
+.media-dropdown:focus-within .media-dropdown-panel { display: block; }
+.media-dropdown-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    padding: 22px 20px;
+    border: none;
+    background: none;
+    text-align: left;
+    font-size: 14px;
+    cursor: pointer;
+    color: #2d2d2d;
+    font-family: inherit;
+}
+.media-dropdown-option-icon { display: inline-flex; flex-shrink: 0; color: #666; }
+.media-dropdown-option:hover { background: #f5f5f5; }
+.media-dropdown-option:hover .media-dropdown-option-icon { color: #2d2d2d; }
+.media-dropdown-option:first-child { border-radius: 6px 6px 0 0; }
+.media-dropdown-option:last-child { border-radius: 0 0 6px 6px; }
+
+.ck-editor-extra-bar {
+    position: absolute !important;
+    top: 4px;
+    right: 6px;
+    z-index: 10;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+.ck-editor-extra-bar .media-dropdown-btn, .ck-editor-extra-bar .footnote-extra-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px !important;
+    border-radius: 4px !important;
+    border: 1px solid #ccc !important;
+    height: 28px;
+    background: transparent;
+    color: #2d2d2d;
+    cursor: pointer;
+    font-size: 13px;
+    font-family: inherit;
+    line-height: 1.2;
+    white-space: nowrap;
+}
+.ck-editor-extra-bar .ck-editor-extra-btn:hover,
+.ck-editor-extra-bar .media-dropdown-btn:hover,
+.ck-editor-extra-bar .footnote-extra-btn:hover {
+    background: #f5f5f5;
+    border-color: #e0e0e0 !important;
+}
+.ck-editor-extra-bar .ck-editor-extra-btn:focus,
+.ck-editor-extra-bar .media-dropdown-btn:focus,
+.ck-editor-extra-bar .footnote-extra-btn:focus {
+    outline: none;
+    border-color: #007bff !important;
+    box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.2);
+}
+.ck-editor-extra-bar .extra-bar-media-slot { display: inline-flex; align-items: center; }
+.ck-editor-extra-bar .media-dropdown-toolbar { margin: 0; }
+.ck.ck-editor .ck.ck-editor__top { position: sticky; top: 0; z-index: 100; background: #fff; }
+.ck.ck-sticky-panel .ck-sticky-panel__content_sticky { position: relative !important; top: auto !important; width: auto !important; box-shadow: none !important; }
+
+.ck-editor .ck-content sup.footnote-ref,
+.ck-editor .ck-content a.footnote-ref,
+.ck-editor .ck-editor__editable sup.footnote-ref,
+.ck-editor .ck-editor__editable a.footnote-ref { opacity: 1 !important; }
+
+.ck-editor .ck-editor__editable,
+.ck-editor .ck-content.page-content.ckeditor-content,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content {
+    max-width: 650px;
+    min-height: 420px;
+    color: #606572;
+    font-size: 1.1em;
+    line-height: 150%;
+    text-align: left;
+    font-family: "Roboto Slab", sans-serif;
+}
+
+.ck-editor .ck-editor__editable img,
+.ck-editor .ck-editor__editable video,
+.ck-editor .ck-content.page-content.ckeditor-content img,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content img,
+.ck-editor .ck-content.page-content.ckeditor-content video,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content video {
+    width: 100% !important;
+    max-width: 100%;
+    height: auto !important;
+}
+
+.ck-editor .ck-editor__editable img.left,
+.ck-editor .ck-editor__editable figure.left,
+.ck-editor .ck-editor__editable .left,
+.ck-editor .ck-content.page-content.ckeditor-content img.left,
+.ck-editor .ck-content.page-content.ckeditor-content figure.left,
+.ck-editor .ck-content.page-content.ckeditor-content .left,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content img.left,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content figure.left,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content .left {
+    float: left !important;
+    width: auto !important;
+    max-width: 40%;
+    margin: 0 15px 1em 0;
+}
+
+.ck-editor .ck-editor__editable img.right,
+.ck-editor .ck-editor__editable figure.right,
+.ck-editor .ck-editor__editable .right,
+.ck-editor .ck-content.page-content.ckeditor-content img.right,
+.ck-editor .ck-content.page-content.ckeditor-content figure.right,
+.ck-editor .ck-content.page-content.ckeditor-content .right,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content img.right,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content figure.right,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content .right {
+    float: right !important;
+    width: auto !important;
+    max-width: 40%;
+    margin: 0 0 0.5em 15px;
+}
+
+/* desktop-only: in editor always show as float (editor width never triggers mobile breakpoint) */
+
+.ck-editor .ck-content.page-content.ckeditor-content p,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content p {
+    margin-top: 0;
+    margin-bottom: 15px;
+    padding-top: 0;
+    padding-bottom: 13px;
+    color: #606572;
+    font-size: 1em;
+    line-height: 150%;
+    text-align: left;
+    font-family: "Roboto Slab", serif;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content h1,
+.ck-editor .ck-content.page-content.ckeditor-content h2,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content h1,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content h2 {
+    margin-top: 0;
+    color: #80abe0;
+    font-family: Lato, sans-serif;
+    font-weight: 300;
+    font-style: italic;
+    line-height: 1.1;
+    clear: left;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content h1,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content h1 { font-size: 3em; }
+.ck-editor .ck-content.page-content.ckeditor-content h2,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content h2 { font-size: 1.8em; }
+
+.ck-editor .ck-content.page-content.ckeditor-content h3,
+.ck-editor .ck-content.page-content.ckeditor-content h4,
+.ck-editor .ck-content.page-content.ckeditor-content h5,
+.ck-editor .ck-content.page-content.ckeditor-content h6,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content h3,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content h4,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content h5,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content h6 {
+    color: #80abe0;
+    line-height: 1.1;
+    clear: left;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content ul,
+.ck-editor .ck-content.page-content.ckeditor-content ol,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content ul,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content ol {
+    margin: 1em 0;
+    padding-left: 1.5em;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content li,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content li {
+    margin-bottom: 7px;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content li p,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content li p {
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content blockquote,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content blockquote {
+    margin: 1.5em 0;
+    padding: 30px 7%;
+    clear: both;
+    background: aliceblue;
+    color: #606572;
+    text-align: left;
+    border-left: none;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content blockquote::after,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content blockquote::after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content blockquote p,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content blockquote p {
+    font-size: 1em;
+    padding-bottom: 0;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content blockquote p:last-child,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content blockquote p:last-child {
+    margin-bottom: 0;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content blockquote p:last-child > strong,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content blockquote p:last-child > strong,
+.ck-editor .ck-content.page-content.ckeditor-content blockquote p:last-child > em,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content blockquote p:last-child > em {
+    font-size: 0.85em;
+    line-height: 1.3;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content blockquote p:last-child > strong,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content blockquote p:last-child > strong {
+    text-transform: uppercase;
+    font-style: normal;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content a,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content a {
+    padding-bottom: 3px;
+    color: #80abe0;
+    text-decoration-color: #dedede;
+    text-underline-offset: 3px;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content hr,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content hr {
+    height: 1px;
+    margin: 2.5em 0;
+    padding: 0;
+    clear: both;
+    border: none;
+    border-top: 1px #d8e5fb solid;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content figure,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content figure {
+    margin: 1em 0;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content p.caption,
+.ck-editor .ck-content.page-content.ckeditor-content figcaption,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content p.caption,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content figcaption {
+    margin-top: 0;
+    margin-bottom: 27px;
+    padding: 7px 7% 5px 20px;
+    border-left: 1px dotted #606572;
+    color: #606572;
+    font-size: 0.9em;
+    line-height: 150%;
+    font-style: italic;
+    text-align: left;
+    font-family: Lato, sans-serif !important;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content .videocaption,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content .videocaption,
+.ck-editor .ck-editor__editable .videocaption {
+    margin: 0.25em 0 1.5em 0;
+    border-left: 3px #555 solid;
+    font-style: italic;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content .videocaption p,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content .videocaption p,
+.ck-editor .ck-editor__editable .videocaption p {
+    padding: 7px 7% 3px 20px;
+    font-family: Lato, sans-serif;
+    font-size: 0.9em;
+}
+
+.ck-editor .ck-editor__editable .videocaption p {
+    margin-bottom: 0;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content .audiocaption,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content .audiocaption,
+.ck-editor .ck-editor__editable figure.audio,
+.ck-editor .ck-editor__editable .audiocaption {
+    display: flex;
+    align-items: center;
+    margin: 1.5em 0;
+    padding: 1em;
+    border-top: 1px #dbdbdb solid;
+    border-bottom: 1px #dbdbdb solid;
+}
+
+.ck-editor .ck-editor__editable figure.audio,
+.ck-editor .ck-editor__editable .audiocaption {
+    background: transparent;
+    border-radius: 4px;
+    min-height: 56px;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content .audiocaption p,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content .audiocaption p,
+.ck-editor .ck-editor__editable figure.audio figcaption,
+.ck-editor .ck-editor__editable .audiocaption p {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    font-family: Lato, sans-serif;
+    font-size: 0.9em;
+    font-style: italic;
+}
+
+.ck-editor .ck-editor__editable figure.audio figcaption,
+.ck-editor .ck-editor__editable .audiocaption p {
+    flex-grow: 1;
+    color: #555;
+}
+
+.ck-editor .ck-editor__editable figure.video,
+.ck-editor .ck-editor__editable figure.ckeditor-video-wrapper {
+    display: block;
+    position: relative;
+    background: transparent;
+    border-radius: 5px;
+    overflow: hidden;
+    margin: 1em 0 0;
+    min-height: 200px;
+}
+
+.ck-editor .ck-editor__editable figure.video video,
+.ck-editor .ck-editor__editable figure.ckeditor-video-wrapper video {
+    display: block;
+    width: 100%;
+    max-height: 340px;
+    object-fit: contain;
+}
+
+.ck-editor .ck-editor__editable figure.video::before,
+.ck-editor .ck-editor__editable figure.ckeditor-video-wrapper::before {
+    content: "\25B6";
+    position: absolute;
+    top: 10px;
+    left: 12px;
+    background: rgba(0, 0, 0, 0.55);
+    color: #fff;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    pointer-events: none;
+    z-index: 2;
+}
+
+.ck-editor .ck-editor__editable figure.video figcaption,
+.ck-editor .ck-editor__editable figure.ckeditor-video-wrapper figcaption,
+.ck-editor .ck-editor__editable figure.ckeditor-video-wrapper .videocaption {
+    background: transparent;
+    margin: 0;
+    padding: 6px 10px;
+    font-family: Lato, sans-serif;
+    font-size: 0.9em;
+    font-style: italic;
+    color: #555;
+}
+
+.ck-editor .ck-editor__editable figure.audio::before,
+.ck-editor .ck-editor__editable .audiocaption::before {
+    content: "\25B6";
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    background: #417690;
+    color: #fff;
+    font-size: 13px;
+    margin-right: 14px;
+}
+
+.ck-editor .ck-editor__editable .ck-widget__resizer { display: none !important; }
+
+.ck-editor .ck-editor__editable figure.audio.ck-widget_selected,
+.ck-editor .ck-editor__editable figure.audio.audio-figure--ck-selected,
+.ck-editor .ck-editor__editable .audiocaption.ck-widget_selected,
+.ck-editor .ck-editor__editable .ck-widget_selected .audiocaption,
+.ck-editor .ck-editor__editable .audiocaption--ck-selected,
+.ck-editor .ck-editor__editable .audio-figure--ck-selected,
+.ck-editor .ck-editor__editable figure.video.ck-widget_selected,
+.ck-editor .ck-editor__editable figure.ckeditor-video-wrapper.ck-widget_selected {
+    outline: 3px solid #3399ff;
+}
+
+.ck-editor .ck-editor__editable figure.audio.ck-widget_selected,
+.ck-editor .ck-editor__editable figure.audio.audio-figure--ck-selected,
+.ck-editor .ck-editor__editable .audiocaption.ck-widget_selected,
+.ck-editor .ck-editor__editable .ck-widget_selected .audiocaption,
+.ck-editor .ck-editor__editable .audiocaption--ck-selected,
+.ck-editor .ck-editor__editable .audio-figure--ck-selected {
+    outline-offset: 2px;
+}
+
+.ck-editor .ck-editor__editable audio {
+    display: none !important;
+}
+
+.ck-editor .ck-editor__editable figure.audio .ck-widget,
+.ck-editor .ck-editor__editable figure.audio [class*="html-object"],
+.ck-editor .ck-editor__editable figure.audio [class*="html-embed"],
+.ck-editor .ck-editor__editable .audiocaption .ck-widget,
+.ck-editor .ck-editor__editable .audiocaption [class*="html-object"],
+.ck-editor .ck-editor__editable .audiocaption [class*="html-embed"],
+.ck-editor .ck-editor__editable .audiocaption p:empty {
+    display: none !important;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content .furtherreading,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content .furtherreading {
+    display: inline-block;
+    margin-bottom: 2em;
+    padding: 5px 15px;
+    border: 1px #ddd solid;
+    border-radius: 20px;
+    text-align: right;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content .furtherreading p,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content .furtherreading p {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    color: #999;
+    text-align: right;
+    font-family: Lato, sans-serif;
+    font-weight: 700;
+}
+
+.ck-editor .ck-content.page-content.ckeditor-content .furtherreading p a,
+.ck-editor .ck-editor__editable.page-content.ckeditor-content .furtherreading p a {
+    font-weight: 400;
+    text-decoration: none;
+}