From f87fd72fcbd12ad3aff95dfbfd55c63d0ebffa31 Mon Sep 17 00:00:00 2001 From: Taly Date: Tue, 12 Mar 2019 15:48:56 +0300 Subject: [PATCH] Add Chrome support for mp4 Image block (#63) --- public/dist/main.css | 2 +- src/frontend/styles/components/page.pcss | 8 ++++---- src/views/pages/blocks/image.twig | 9 ++++++++- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/public/dist/main.css b/public/dist/main.css index 791a361..563e7b1 100644 --- a/public/dist/main.css +++ b/public/dist/main.css @@ -1 +1 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--color-text-main:#1d202b;--color-text-second:#7b7e89;--color-line-gray:#e8e8eb;--color-link-active:#388ae5;--color-button-danger:#ff1629;--layout-padding-horisontal:40px;--layout-padding-vertical:40px;--layout-width-aside:200px;--layout-width-main-col:650px}@media (max-width:980px){:root{--layout-padding-horisontal:15px;--layout-padding-vertical:15px}}.docs{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 40px;padding:0 var(--layout-padding-horisontal)}@media (max-width:980px){.docs{-ms-flex-wrap:wrap;flex-wrap:wrap}}.docs__aside{width:200px;width:var(--layout-width-aside)}@media (max-width:980px){.docs__aside{width:100%;-ms-flex-preferred-size:100%;flex-basis:100%;padding:20px 40px!important;padding:20px var(--layout-padding-horisontal)!important;margin:0 -40px;margin:0 calc(-1*var(--layout-padding-horisontal));border-bottom:1px solid #e8e8eb;border-bottom:1px solid var(--color-line-gray)}}.docs__content{-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2;word-wrap:break-word}@media (max-width:980px){.docs__content{width:100%;-ms-flex-preferred-size:100%;flex-basis:100%}}.docs__content-inner{max-width:650px;max-width:var(--layout-width-main-col);margin:0 auto}.docs__aside,.docs__content{padding:40px 0;padding:var(--layout-padding-vertical) 0}@media (max-width:980px){.docs__aside,.docs__content{padding:20px 0}}.docs-header{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;padding:0 40px;padding:0 var(--layout-padding-horisontal);border-bottom:1px solid #e8e8eb;border-bottom:1px solid var(--color-line-gray);font-size:15.8px;line-height:50px;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}@media (max-width:980px){.docs-header{line-height:40px}}.docs-header a{display:inline-block;text-decoration:none}.docs-header__logo{font-weight:700;color:inherit}.docs-header__menu{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 0 0 auto;padding-left:0}@media (max-width:980px){.docs-header__menu{-ms-flex-preferred-size:100%;flex-basis:100%;font-size:12px}}.docs-header__menu li{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;list-style:none;margin-left:20px}@media (max-width:980px){.docs-header__menu li{margin-left:0;margin-right:15px}}@media (max-width:980px){.docs-header__menu-add{position:absolute;right:15px;top:15px;line-height:1em;margin:0!important}}@media (max-width:980px){.docs-header__menu-add a{font-size:0;padding:8px;margin-right:0}}.docs-header__menu a:not(.docs-header__button){color:inherit}.docs-header__menu a:not(.docs-header__button):hover{color:#388ae5;color:var(--color-link-active)}.docs-header__button{display:inline-block;padding:9px 15px;border-radius:3px;color:#6c6375;background:#fcfcff;-webkit-box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);font-size:14px;line-height:1em;text-decoration:none;cursor:pointer;white-space:nowrap;background:#388ae5;background:var(--color-link-active);color:#fff;-webkit-box-shadow:none;box-shadow:none}.docs-header__button svg{margin:0 .3em 0 -.05em}.docs-header__button:hover{background:#387ecc}.docs-header__button{margin:auto 30px auto auto}.docs-aside{font-size:15px;color:#7b7e89;color:var(--color-text-second)}@media (max-width:980px){.docs-aside{font-size:13px;display:none;margin-top:20px}}.docs-aside--toggled{display:block!important}.docs-aside a{text-decoration:none}.docs-aside__section{margin-bottom:30px}@media (max-width:980px){.docs-aside__section{margin-bottom:20px}}.docs-aside__section:last-of-type{margin-bottom:0}.docs-aside__section-title{margin-bottom:15px;color:#388ae5;color:var(--color-link-active)}@media (max-width:980px){.docs-aside__section-title{margin-bottom:10px}}.docs-aside__section-list{padding-left:0;list-style:none}.docs-aside__section-list a{display:inline-block;color:inherit;padding:8px 0}.docs-aside-toggler{display:none;font-size:13px;cursor:pointer;color:#7b7e89;color:var(--color-text-second)}@media (max-width:980px){.docs-aside-toggler{display:block}}.docs-aside-toggler svg{margin-right:10px}.writing-header{display:-webkit-box;display:-ms-flexbox;display:flex;position:-webkit-sticky;position:sticky;top:0;padding:15px 0;margin-top:-40px;margin-top:calc(-1*var(--layout-padding-vertical));background:#fff;-webkit-box-shadow:0 3px 10px #fff;box-shadow:0 3px 10px #fff;z-index:2;font-size:14px}.writing-header__save{display:inline-block;padding:9px 15px;border-radius:3px;color:#6c6375;background:#fcfcff;-webkit-box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);font-size:14px;line-height:1em;text-decoration:none;cursor:pointer;white-space:nowrap;background:#388ae5;background:var(--color-link-active);color:#fff;-webkit-box-shadow:none;box-shadow:none}.writing-header__save svg{margin:0 .3em 0 -.05em}.writing-header__save:hover{background:#387ecc}.writing-header__save{margin:auto}.writing-header__left{margin:auto 0;color:#7b7e89;color:var(--color-text-second)}.writing-header__left span{margin-right:10px}.writing-header select{max-width:100px}.writing-buttons__remove{display:inline-block;padding:9px 15px;border-radius:3px;color:#6c6375;background:#fcfcff;-webkit-box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);font-size:14px;line-height:1em;text-decoration:none;cursor:pointer;white-space:nowrap;background:#ff1629;background:var(--color-button-danger);color:#fff;-webkit-box-shadow:none;box-shadow:none}.writing-buttons__remove svg{margin:0 .3em 0 -.05em}.writing-buttons__remove:hover{background:#e61627}.uri-input{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:10px 12px;border-radius:3px;border:1px solid rgba(201,201,204,.48);-webkit-box-shadow:inset 0 1px 2px 0 rgba(35,44,72,.06);box-shadow:inset 0 1px 2px 0 rgba(35,44,72,.06);outline:none}@media (min-width:1050px){.writing-editor{margin:0 -100px}}.codex-editor__redactor .ce-block:first-of-type .ce-header{font-size:32px}.page{font-size:16px;line-height:1.6}.page__header{display:-webkit-box;display:-ms-flexbox;display:flex;color:#7b7e89;color:var(--color-text-second)}@media (max-width:980px){.page__header{font-size:13px}}.page__header-nav{color:inherit;text-decoration:none}@media (max-width:980px){.page__header-nav{display:none}}.page__header-nav:hover{color:#388ae5;color:var(--color-link-active)}.page__header-nav:not(:last-of-type):after{content:"\BB";margin:0 .7em 0 .45em}.page__header-time{margin-left:auto}@media (max-width:980px){.page__header-time{margin-left:0}}.page__header-button{display:inline-block;padding:9px 15px;border-radius:3px;color:#6c6375;background:#fcfcff;-webkit-box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);font-size:14px;line-height:1em;text-decoration:none;cursor:pointer;white-space:nowrap;background:#388ae5;background:var(--color-link-active);color:#fff;-webkit-box-shadow:none;box-shadow:none}.page__header-button svg{margin:0 .3em 0 -.05em}.page__header-button:hover{background:#387ecc}.page__header-button{padding:5px 10px;font-size:13px;margin-left:10px}.page__title{font-size:26px;font-weight:700;letter-spacing:-.04px;margin-bottom:-.2em}.page .cdx-marker{background:rgba(245,235,111,.33);padding:3px 0}.page__content a{text-decoration:none;border-bottom:1px solid #000;padding-bottom:1px;color:inherit}.page__content a:hover{color:#388ae5;color:var(--color-link-active);border-bottom-color:#388ae5;border-bottom-color:var(--color-link-active)}.block-header{margin:1.5em 0 .5em}.block-header--2{font-size:22px;font-weight:500}.block-header--3{font-size:18px;font-weight:500}.block-code{padding:20px!important;border-radius:5px;font-size:13px;//border:1px solid #e8e8eb;//border:1px solid var(--color-line-gray);font-family:Menlo,Monaco,Consolas,Courier New,monospace;line-height:1.7em}.block-list li{margin:10px 0}.block-image{margin:40px auto;text-align:center}.block-image__content img{vertical-align:bottom;max-width:100%}.block-image__content--stretched{max-width:none!important;width:calc(100% + 120px)!important;margin-left:-60px}.block-image__content--stretched img{width:100%}.block-image__content--bordered img{border:3px solid #e8e8eb;border:3px solid var(--color-line-gray);-webkit-box-sizing:border-box;box-sizing:border-box}.block-image__content--with-background{padding:15px;background:#e8e8eb;background:var(--color-line-gray)}.block-image__content--with-background img{max-width:60%;margin:0 auto}.block-image__caption{margin:1em auto;color:#7b7e89;color:var(--color-text-second)}.block-delimiter{line-height:1.6em;width:100%;text-align:center}.block-delimiter:before{display:inline-block;content:"***";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}.landing-body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.landing-loader{position:absolute;left:50%;top:50%;z-index:-1;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.landing-loader>svg{width:80px;height:80px}.landing-frame{width:100%;height:100%;opacity:0;-webkit-transition:opacity .5s ease;transition:opacity .5s ease;will-change:opacity}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,Verdana;color:#1d202b;color:var(--color-text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}svg{fill:currentColor} +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--color-text-main:#1d202b;--color-text-second:#7b7e89;--color-line-gray:#e8e8eb;--color-link-active:#388ae5;--color-button-danger:#ff1629;--layout-padding-horisontal:40px;--layout-padding-vertical:40px;--layout-width-aside:200px;--layout-width-main-col:650px}@media (max-width:980px){:root{--layout-padding-horisontal:15px;--layout-padding-vertical:15px}}.docs{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 40px;padding:0 var(--layout-padding-horisontal)}@media (max-width:980px){.docs{-ms-flex-wrap:wrap;flex-wrap:wrap}}.docs__aside{width:200px;width:var(--layout-width-aside)}@media (max-width:980px){.docs__aside{width:100%;-ms-flex-preferred-size:100%;flex-basis:100%;padding:20px 40px!important;padding:20px var(--layout-padding-horisontal)!important;margin:0 -40px;margin:0 calc(-1*var(--layout-padding-horisontal));border-bottom:1px solid #e8e8eb;border-bottom:1px solid var(--color-line-gray)}}.docs__content{-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2;word-wrap:break-word}@media (max-width:980px){.docs__content{width:100%;-ms-flex-preferred-size:100%;flex-basis:100%}}.docs__content-inner{max-width:650px;max-width:var(--layout-width-main-col);margin:0 auto}.docs__aside,.docs__content{padding:40px 0;padding:var(--layout-padding-vertical) 0}@media (max-width:980px){.docs__aside,.docs__content{padding:20px 0}}.docs-header{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;padding:0 40px;padding:0 var(--layout-padding-horisontal);border-bottom:1px solid #e8e8eb;border-bottom:1px solid var(--color-line-gray);font-size:15.8px;line-height:50px;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}@media (max-width:980px){.docs-header{line-height:40px}}.docs-header a{display:inline-block;text-decoration:none}.docs-header__logo{font-weight:700;color:inherit}.docs-header__menu{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 0 0 auto;padding-left:0}@media (max-width:980px){.docs-header__menu{-ms-flex-preferred-size:100%;flex-basis:100%;font-size:12px}}.docs-header__menu li{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;list-style:none;margin-left:20px}@media (max-width:980px){.docs-header__menu li{margin-left:0;margin-right:15px}}@media (max-width:980px){.docs-header__menu-add{position:absolute;right:15px;top:15px;line-height:1em;margin:0!important}}@media (max-width:980px){.docs-header__menu-add a{font-size:0;padding:8px;margin-right:0}}.docs-header__menu a:not(.docs-header__button){color:inherit}.docs-header__menu a:not(.docs-header__button):hover{color:#388ae5;color:var(--color-link-active)}.docs-header__button{display:inline-block;padding:9px 15px;border-radius:3px;color:#6c6375;background:#fcfcff;-webkit-box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);font-size:14px;line-height:1em;text-decoration:none;cursor:pointer;white-space:nowrap;background:#388ae5;background:var(--color-link-active);color:#fff;-webkit-box-shadow:none;box-shadow:none}.docs-header__button svg{margin:0 .3em 0 -.05em}.docs-header__button:hover{background:#387ecc}.docs-header__button{margin:auto 30px auto auto}.docs-aside{font-size:15px;color:#7b7e89;color:var(--color-text-second)}@media (max-width:980px){.docs-aside{font-size:13px;display:none;margin-top:20px}}.docs-aside--toggled{display:block!important}.docs-aside a{text-decoration:none}.docs-aside__section{margin-bottom:30px}@media (max-width:980px){.docs-aside__section{margin-bottom:20px}}.docs-aside__section:last-of-type{margin-bottom:0}.docs-aside__section-title{margin-bottom:15px;color:#388ae5;color:var(--color-link-active)}@media (max-width:980px){.docs-aside__section-title{margin-bottom:10px}}.docs-aside__section-list{padding-left:0;list-style:none}.docs-aside__section-list a{display:inline-block;color:inherit;padding:8px 0}.docs-aside-toggler{display:none;font-size:13px;cursor:pointer;color:#7b7e89;color:var(--color-text-second)}@media (max-width:980px){.docs-aside-toggler{display:block}}.docs-aside-toggler svg{margin-right:10px}.writing-header{display:-webkit-box;display:-ms-flexbox;display:flex;position:-webkit-sticky;position:sticky;top:0;padding:15px 0;margin-top:-40px;margin-top:calc(-1*var(--layout-padding-vertical));background:#fff;-webkit-box-shadow:0 3px 10px #fff;box-shadow:0 3px 10px #fff;z-index:2;font-size:14px}.writing-header__save{display:inline-block;padding:9px 15px;border-radius:3px;color:#6c6375;background:#fcfcff;-webkit-box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);font-size:14px;line-height:1em;text-decoration:none;cursor:pointer;white-space:nowrap;background:#388ae5;background:var(--color-link-active);color:#fff;-webkit-box-shadow:none;box-shadow:none}.writing-header__save svg{margin:0 .3em 0 -.05em}.writing-header__save:hover{background:#387ecc}.writing-header__save{margin:auto}.writing-header__left{margin:auto 0;color:#7b7e89;color:var(--color-text-second)}.writing-header__left span{margin-right:10px}.writing-header select{max-width:100px}.writing-buttons__remove{display:inline-block;padding:9px 15px;border-radius:3px;color:#6c6375;background:#fcfcff;-webkit-box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);font-size:14px;line-height:1em;text-decoration:none;cursor:pointer;white-space:nowrap;background:#ff1629;background:var(--color-button-danger);color:#fff;-webkit-box-shadow:none;box-shadow:none}.writing-buttons__remove svg{margin:0 .3em 0 -.05em}.writing-buttons__remove:hover{background:#e61627}.uri-input{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:10px 12px;border-radius:3px;border:1px solid rgba(201,201,204,.48);-webkit-box-shadow:inset 0 1px 2px 0 rgba(35,44,72,.06);box-shadow:inset 0 1px 2px 0 rgba(35,44,72,.06);outline:none}@media (min-width:1050px){.writing-editor{margin:0 -100px}}.codex-editor__redactor .ce-block:first-of-type .ce-header{font-size:32px}.page{font-size:16px;line-height:1.6}.page__header{display:-webkit-box;display:-ms-flexbox;display:flex;color:#7b7e89;color:var(--color-text-second)}@media (max-width:980px){.page__header{font-size:13px}}.page__header-nav{color:inherit;text-decoration:none}@media (max-width:980px){.page__header-nav{display:none}}.page__header-nav:hover{color:#388ae5;color:var(--color-link-active)}.page__header-nav:not(:last-of-type):after{content:"\BB";margin:0 .7em 0 .45em}.page__header-time{margin-left:auto}@media (max-width:980px){.page__header-time{margin-left:0}}.page__header-button{display:inline-block;padding:9px 15px;border-radius:3px;color:#6c6375;background:#fcfcff;-webkit-box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);font-size:14px;line-height:1em;text-decoration:none;cursor:pointer;white-space:nowrap;background:#388ae5;background:var(--color-link-active);color:#fff;-webkit-box-shadow:none;box-shadow:none}.page__header-button svg{margin:0 .3em 0 -.05em}.page__header-button:hover{background:#387ecc}.page__header-button{padding:5px 10px;font-size:13px;margin-left:10px}.page__title{font-size:26px;font-weight:700;letter-spacing:-.04px;margin-bottom:-.2em}.page .cdx-marker{background:rgba(245,235,111,.33);padding:3px 0}.page__content a{text-decoration:none;border-bottom:1px solid #000;padding-bottom:1px;color:inherit}.page__content a:hover{color:#388ae5;color:var(--color-link-active);border-bottom-color:#388ae5;border-bottom-color:var(--color-link-active)}.block-header{margin:1.5em 0 .5em}.block-header--2{font-size:22px;font-weight:500}.block-header--3{font-size:18px;font-weight:500}.block-code{padding:20px!important;border-radius:5px;font-size:13px;//border:1px solid #e8e8eb;//border:1px solid var(--color-line-gray);font-family:Menlo,Monaco,Consolas,Courier New,monospace;line-height:1.7em}.block-list li{margin:10px 0}.block-image{margin:40px auto;text-align:center}.block-image__content img,.block-image__content video{vertical-align:bottom;max-width:100%}.block-image__content--stretched{max-width:none!important;width:calc(100% + 120px)!important;margin-left:-60px}.block-image__content--stretched img,.block-image__content--stretched video{width:100%}.block-image__content--bordered img,.block-image__content--bordered video{border:3px solid #e8e8eb;border:3px solid var(--color-line-gray);-webkit-box-sizing:border-box;box-sizing:border-box}.block-image__content--with-background{padding:15px;background:#e8e8eb;background:var(--color-line-gray)}.block-image__content--with-background img,.block-image__content--with-background video{max-width:60%;margin:0 auto}.block-image__caption{margin:1em auto;color:#7b7e89;color:var(--color-text-second)}.block-delimiter{line-height:1.6em;width:100%;text-align:center}.block-delimiter:before{display:inline-block;content:"***";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}.landing-body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.landing-loader{position:absolute;left:50%;top:50%;z-index:-1;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.landing-loader>svg{width:80px;height:80px}.landing-frame{width:100%;height:100%;opacity:0;-webkit-transition:opacity .5s ease;transition:opacity .5s ease;will-change:opacity}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,Verdana;color:#1d202b;color:var(--color-text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}svg{fill:currentColor} diff --git a/src/frontend/styles/components/page.pcss b/src/frontend/styles/components/page.pcss index 15d8e08..48daab4 100644 --- a/src/frontend/styles/components/page.pcss +++ b/src/frontend/styles/components/page.pcss @@ -125,7 +125,7 @@ text-align: center; &__content { - img { + img, video { vertical-align: bottom; max-width: 100%; } @@ -135,13 +135,13 @@ width: calc(100% + 120px) !important; margin-left: -60px; - img { + img, video { width: 100%; } } &--bordered { - img { + img, video { border: 3px solid var(--color-line-gray); box-sizing: border-box; } @@ -151,7 +151,7 @@ padding: 15px; background: var(--color-line-gray); - img { + img, video { max-width: 60%; margin: 0 auto; } diff --git a/src/views/pages/blocks/image.twig b/src/views/pages/blocks/image.twig index 6f023ac..a0feceb 100644 --- a/src/views/pages/blocks/image.twig +++ b/src/views/pages/blocks/image.twig @@ -14,7 +14,14 @@
- {{caption ? caption : ''}} + {% if file.mime and file.mime == 'video/mp4' %} + + {% else %} + {{caption ? caption : ''}} + {% endif %} +
{% if caption %}