From 9c8ab4c7901bb61879cf3fe709a698bcb039e633 Mon Sep 17 00:00:00 2001 From: James O'Toole Date: Wed, 26 Jul 2023 14:35:38 -0700 Subject: [PATCH] Add editor style bleed fixes --- css/drupal.ckeditor.iframe.css | 36 ++++++++++++++++++++++++++++++ css/drupal.ckeditor.iframe.min.css | 2 +- src/css/drupal.ckeditor.iframe.css | 34 ++++++++++++++++++++++++++++ 3 files changed, 71 insertions(+), 1 deletion(-) diff --git a/css/drupal.ckeditor.iframe.css b/css/drupal.ckeditor.iframe.css index e4c227b..40d1368 100644 --- a/css/drupal.ckeditor.iframe.css +++ b/css/drupal.ckeditor.iframe.css @@ -355,4 +355,40 @@ drupal-media[data-view-mode="full"] .align-center { width: 100%; height: 152px; margin-top: calc(var(--leading) * 1rem); +} + +/* fixes for typography bleed */ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: Ginter, Inter, "Helvetica Neue", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;; +} + +summary { + margin-top: 0 +} + +.ck-editor h1, +.ck-editor h2, +.ck-editor h3, +.ck-editor h4, +.ck-editor h5, +.ck-editor h6 { + font-family: var(--alternate-font-stack); +} + +.form-select a.chosen-single { + border: none !important; +} + +/* fix custom list styles */ + +.list-checked, +.list-bordered { + margin-left: 0; + list-style-type: none !important; } \ No newline at end of file diff --git a/css/drupal.ckeditor.iframe.min.css b/css/drupal.ckeditor.iframe.min.css index dc4c636..7721bb5 100644 --- a/css/drupal.ckeditor.iframe.min.css +++ b/css/drupal.ckeditor.iframe.min.css @@ -1 +1 @@ -:root{--color-primary:#002145!important;--color-secondary:#e0e0e0!important;--color-tertiary:#def1f8!important;--color-accent:#003a79!important;--color-primary-alpha:#00214580!important;--color-secondary-alpha:#e0e0e080!important;--color-tertiary-alpha:#def1f880!important;--color-accent-alpha:#003a7980!important;--color-link:#0055b7;--color-link-hover:#002145;--color-link-active:#002145;--leading:1.625;--base-font-size:1rem;--text-font-stack:"Whitney SSm A","Whitney SSm B",Arial,sans-serif;--alternate-font-stack:var(--text-font-stack);--code-font-stack:menlo,monaco,consolas,"Liberation Mono","Courier New",monospace}body{font-family:Arial,sans-serif;padding:1rem}body:focus{box-shadow:none;outline:none}div.cke_combopanel{height:300px!important}li.cke_panel_listItem a{font-size:.8em!important;padding:3px 5px!important}.caption>*{background:#f3f3f3;border:1px solid #ccc;padding:.5em}.caption>figcaption{border:1px solid #ccc;border-top:none;font-size:small;padding-top:.5em;text-align:center}.list-bordered,.list-checked{list-style-type:none!important;margin-left:0}.caption-blockquote>blockquote,.caption-pre>pre{margin:0}.caption-blockquote>figcaption:before{content:"— "}.caption-blockquote>figcaption{text-align:left}[dir=rtl] .caption-blockquote>figcaption{text-align:right}[data-drupal-button-link=unit-button]{background-color:#002145;border-color:#0000;border-width:1px;color:#fff;cursor:pointer;display:inline-flex;padding:.65em 2em .42em;text-align:center;text-decoration:none;transition:all .125s ease-out}[data-drupal-button-link=unit-button]:hover{background-color:#003a79;border-color:#0000;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;color:#fff;text-decoration:none}[data-drupal-button-link=unit-button-block]{display:block;text-align:center;width:100%}[data-drupal-button-link-size=text-xs]{font-size:.75rem}[data-drupal-button-link-size=text-sm]{font-size:.875rem}[data-drupal-button-link-size=text-lg]{font-size:1.125rem}[data-drupal-button-link-size=text-xl]{font-size:1.25rem}[data-drupal-button-link-size=text-2x]{font-size:1.5rem}[data-drupal-button-link-style=unit-button--light]{background-color:#def1f8;border-color:#0000;color:#000}[data-drupal-button-link-style=unit-button--light]:hover{background-color:#97d4e9;border-color:#0000;color:#000}[data-drupal-button-link-style=unit-button--dark]{background-color:var(--color-primary);border-color:#0000;color:#fff}[data-drupal-button-link-style=unit-button--dark]:hover{background-color:var(--color-accent);border-color:#0000;color:#fff}[data-drupal-button-link-style=unit-button--outline]{background-color:#fff;border-color:var(--color-link);color:var(--color-link)}[data-drupal-button-link-style=unit-button--outline]:hover{background-color:var(--color-link);border-color:var(--color-link);color:#fff}[data-drupal-button-link-style=unit-button--transparent]{background-color:#fff;background-color:#fff3;border-color:#0000;color:var(--color-link);color:#fff}[data-drupal-button-link-style=unit-button--transparent]:hover{background-color:#fff6;border-color:#0000;color:#fff}[data-drupal-button-link-style=unit-button--simple]{background:#0000;border-width:0;color:var(--color-link);letter-spacing:.05em;overflow:hidden;padding:0 1.5em 0 0;position:relative}[data-drupal-button-link-style=unit-button--simple]:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath fill='%230055b7' d='m1363 877-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45L531 45q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'/%3E%3C/svg%3E");background-position:top .3em center;background-repeat:no-repeat;background-size:.85em .85em;content:"";height:100%;position:absolute;right:0;top:0;transform:translateZ(0);transition-duration:.2s;transition-property:transform;transition-timing-function:ease-out;width:1.5em}[data-drupal-button-link-style=unit-button--simple]:hover{background:#0000;box-shadow:none;color:var(--color-link-hover);text-decoration:underline}[data-drupal-button-link-style=unit-button--simple]:hover:after{transform:translateZ(0)}[data-drupal-button-link-style=unit-button--simple]:hover:before{transform:translate3d(4px,0,0)}drupal-media[data-view-mode=full],drupal-media[data-view-mode=full] .align-center,drupal-media[data-view-mode=full] .align-left,drupal-media[data-view-mode=full] .align-right{display:block!important;float:none!important;width:100%!important}.media-library-item__edit{background-color:#fff;border:1px solid #ddd;border-radius:.25rem;font-size:.75rem;padding:.5em;position:relative;right:0;z-index:100}.media--type-remote-audio iframe,.media--type-soundcloud iframe{height:152px;margin-top:calc(var(--leading)*1rem);width:100%} \ No newline at end of file +:root{--color-primary:#002145!important;--color-secondary:#e0e0e0!important;--color-tertiary:#def1f8!important;--color-accent:#003a79!important;--color-primary-alpha:#00214580!important;--color-secondary-alpha:#e0e0e080!important;--color-tertiary-alpha:#def1f880!important;--color-accent-alpha:#003a7980!important;--color-link:#0055b7;--color-link-hover:#002145;--color-link-active:#002145;--leading:1.625;--base-font-size:1rem;--text-font-stack:"Whitney SSm A","Whitney SSm B",Arial,sans-serif;--alternate-font-stack:var(--text-font-stack);--code-font-stack:menlo,monaco,consolas,"Liberation Mono","Courier New",monospace}body{font-family:Arial,sans-serif;padding:1rem}body:focus{box-shadow:none;outline:none}div.cke_combopanel{height:300px!important}li.cke_panel_listItem a{font-size:.8em!important;padding:3px 5px!important}.caption>*{background:#f3f3f3;border:1px solid #ccc;padding:.5em}.caption>figcaption{border:1px solid #ccc;border-top:none;font-size:small;padding-top:.5em;text-align:center}.caption-blockquote>blockquote,.caption-pre>pre{margin:0}.caption-blockquote>figcaption:before{content:"— "}.caption-blockquote>figcaption{text-align:left}[dir=rtl] .caption-blockquote>figcaption{text-align:right}[data-drupal-button-link=unit-button]{background-color:#002145;border-color:#0000;border-width:1px;color:#fff;cursor:pointer;display:inline-flex;padding:.65em 2em .42em;text-align:center;text-decoration:none;transition:all .125s ease-out}[data-drupal-button-link=unit-button]:hover{background-color:#003a79;border-color:#0000;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;color:#fff;text-decoration:none}[data-drupal-button-link=unit-button-block]{display:block;text-align:center;width:100%}[data-drupal-button-link-size=text-xs]{font-size:.75rem}[data-drupal-button-link-size=text-sm]{font-size:.875rem}[data-drupal-button-link-size=text-lg]{font-size:1.125rem}[data-drupal-button-link-size=text-xl]{font-size:1.25rem}[data-drupal-button-link-size=text-2x]{font-size:1.5rem}[data-drupal-button-link-style=unit-button--light]{background-color:#def1f8;border-color:#0000;color:#000}[data-drupal-button-link-style=unit-button--light]:hover{background-color:#97d4e9;border-color:#0000;color:#000}[data-drupal-button-link-style=unit-button--dark]{background-color:var(--color-primary);border-color:#0000;color:#fff}[data-drupal-button-link-style=unit-button--dark]:hover{background-color:var(--color-accent);border-color:#0000;color:#fff}[data-drupal-button-link-style=unit-button--outline]{background-color:#fff;border-color:var(--color-link);color:var(--color-link)}[data-drupal-button-link-style=unit-button--outline]:hover{background-color:var(--color-link);border-color:var(--color-link);color:#fff}[data-drupal-button-link-style=unit-button--transparent]{background-color:#fff;background-color:#fff3;border-color:#0000;color:var(--color-link);color:#fff}[data-drupal-button-link-style=unit-button--transparent]:hover{background-color:#fff6;border-color:#0000;color:#fff}[data-drupal-button-link-style=unit-button--simple]{background:#0000;border-width:0;color:var(--color-link);letter-spacing:.05em;overflow:hidden;padding:0 1.5em 0 0;position:relative}[data-drupal-button-link-style=unit-button--simple]:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath fill='%230055b7' d='m1363 877-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45L531 45q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'/%3E%3C/svg%3E");background-position:top .3em center;background-repeat:no-repeat;background-size:.85em .85em;content:"";height:100%;position:absolute;right:0;top:0;transform:translateZ(0);transition-duration:.2s;transition-property:transform;transition-timing-function:ease-out;width:1.5em}[data-drupal-button-link-style=unit-button--simple]:hover{background:#0000;box-shadow:none;color:var(--color-link-hover);text-decoration:underline}[data-drupal-button-link-style=unit-button--simple]:hover:after{transform:translateZ(0)}[data-drupal-button-link-style=unit-button--simple]:hover:before{transform:translate3d(4px,0,0)}drupal-media[data-view-mode=full],drupal-media[data-view-mode=full] .align-center,drupal-media[data-view-mode=full] .align-left,drupal-media[data-view-mode=full] .align-right{display:block!important;float:none!important;width:100%!important}.media-library-item__edit{background-color:#fff;border:1px solid #ddd;border-radius:.25rem;font-size:.75rem;padding:.5em;position:relative;right:0;z-index:100}.media--type-remote-audio iframe,.media--type-soundcloud iframe{height:152px;margin-top:calc(var(--leading)*1rem);width:100%}h1,h2,h3,h4,h5,h6{font-family:Ginter,Inter,Helvetica Neue,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,sans-serif}summary{margin-top:0}.ck-editor h1,.ck-editor h2,.ck-editor h3,.ck-editor h4,.ck-editor h5,.ck-editor h6{font-family:var(--alternate-font-stack)}.form-select a.chosen-single{border:none!important}.list-bordered,.list-checked{list-style-type:none!important;margin-left:0} \ No newline at end of file diff --git a/src/css/drupal.ckeditor.iframe.css b/src/css/drupal.ckeditor.iframe.css index 58c3c34..66692c6 100755 --- a/src/css/drupal.ckeditor.iframe.css +++ b/src/css/drupal.ckeditor.iframe.css @@ -261,4 +261,38 @@ drupal-media[data-view-mode="full"] .align-center { width: 100%; height: 152px; margin-top: calc(var(--leading) * 1rem); +} + +/* fixes for typography bleed */ +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: Ginter, Inter, "Helvetica Neue", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;; +} + +summary { + margin-top: 0 +} + +.ck-editor h1, +.ck-editor h2, +.ck-editor h3, +.ck-editor h4, +.ck-editor h5, +.ck-editor h6 { + font-family: var(--alternate-font-stack); +} + +.form-select a.chosen-single { + border: none !important; +} + +/* fix custom list styles */ +.list-checked, +.list-bordered { + margin-left: 0; + list-style-type: none !important; } \ No newline at end of file