diff --git a/src/themes/elife/staticCustomProperties.css b/src/themes/elife/staticCustomProperties.css index 471d7b199..662e89a24 100644 --- a/src/themes/elife/staticCustomProperties.css +++ b/src/themes/elife/staticCustomProperties.css @@ -44,13 +44,6 @@ --BASELINE-MEASURE: 1.5; --BASELINE-MEASURE-REM: calc(var(--BASELINE-MEASURE) * 1rem); - /* URLs */ - --URL-DOWNLOAD-ICON--NARROWER-VIEWPORTS: url('@elifesciences/pattern-library/source/assets/img/icons/download.svg'); - --URL-DOWNLOAD-ICON--WIDER-VIEWPORTS: url('@elifesciences/pattern-library/source/assets/img/icons/download-full.svg'); - --URL-EMAIL-ICON: url('@elifesciences/pattern-library/source/assets/img/icons/corresponding-author@1x.png'); - --URL-CC-ICON: url('@elifesciences/pattern-library/source/assets/img/icons/cc.svg'); - --URL-OA-ICON: url('@elifesciences/pattern-library/source/assets/img/icons/oa.svg'); - /* Stencila WebComponent overrides */ --font-family-display: 'Noto Sans', 'Arial', 'Helvetica', sans-serif; --font-family-body: 'Noto Sans', 'Arial', 'Helvetica', sans-serif; diff --git a/src/themes/elife/styles.css b/src/themes/elife/styles.css index bd0a53886..9f123bcd9 100644 --- a/src/themes/elife/styles.css +++ b/src/themes/elife/styles.css @@ -55,7 +55,6 @@ --download-icon-block-size: var( --BLOCK-SIZE-DOWNLOAD-ICON-PX--NARROWER-VIEWPORTS ); - --download-icon-image-path: var(--URL-DOWNLOAD-ICON--NARROWER-VIEWPORTS); } @media only screen and (--medium-viewport) { @@ -68,7 +67,6 @@ --download-icon-block-size: var( --BLOCK-SIZE-DOWNLOAD-ICON-PX--WIDER-VIEWPORTS ); - --download-icon-image-path: var(--URL-DOWNLOAD-ICON--WIDER-VIEWPORTS); } } @@ -87,20 +85,14 @@ height: 22px; } - .content-header__icon--cc { - background-image: var(--URL-CC-ICON); - - &:hover { - background-image: var(--URL-CC-ICON); - } + .content-header__icon--cc, + .content-header__icon--cc:hover { + background-image: url('@elifesciences/pattern-library/source/assets/img/icons/cc.svg'); } - .content-header__icon--oa { - background-image: var(--URL-OA-ICON); - - &:hover { - background-image: var(--URL-OA-ICON); - } + .content-header__icon--oa, + .content-header__icon--oa:hover { + background-image: url('@elifesciences/pattern-library/source/assets/img/icons/oa.svg'); } & :--authors { @@ -122,7 +114,7 @@ } :--emails::after { - content: var(--URL-EMAIL-ICON); + content: url('@elifesciences/pattern-library/source/assets/img/icons/corresponding-author@1x.png'); } } @@ -142,7 +134,7 @@ } :--emails::after { - content: var(--URL-EMAIL-ICON); + content: url('@elifesciences/pattern-library/source/assets/img/icons/corresponding-author@1x.png'); } } @@ -267,7 +259,12 @@ & > .download-link { flex: 0 0 var(--download-icon-block-size); height: var(--download-icon-block-size); - background: var(--download-icon-image-path) transparent no-repeat; + background: url('@elifesciences/pattern-library/source/assets/img/icons/download.svg') + transparent no-repeat; + + @media only screen and (--medium-viewport) { + background-image: url('@elifesciences/pattern-library/source/assets/img/icons/download-full.svg'); + } & > .download-link-text { @mixin visuallyhidden;