diff --git a/openlibrary/macros/LocateButton.html b/openlibrary/macros/LocateButton.html index 7c98ea84fd6..dda89b8cbac 100644 --- a/openlibrary/macros/LocateButton.html +++ b/openlibrary/macros/LocateButton.html @@ -6,9 +6,9 @@ - + $:macros.icon("map-pin", size="sm", extra_class="btn-icon") $_("Locate") $else: $_('Locate') + data-ol-link-track="CTAClick|Locate">$_('Locate')$:macros.icon("square-arrow-out-up-right", size="sm", extra_class="cta-btn__external-icon") diff --git a/openlibrary/macros/ReadButton.html b/openlibrary/macros/ReadButton.html index 86d40379438..ab57e2d688c 100644 --- a/openlibrary/macros/ReadButton.html +++ b/openlibrary/macros/ReadButton.html @@ -41,7 +41,7 @@ title="$title using Read Aloud" $:analytics_attr(action.capitalize() + 'Listen') class="cta-btn cta-btn--available cta-btn--w-icon"> - + $:macros.icon("headphones", size="sm", extra_class="btn-icon") $_("Listen") diff --git a/openlibrary/plugins/openlibrary/js/team.js b/openlibrary/plugins/openlibrary/js/team.js index ba1084a76df..510079e066d 100644 --- a/openlibrary/plugins/openlibrary/js/team.js +++ b/openlibrary/plugins/openlibrary/js/team.js @@ -5,8 +5,6 @@ export function initTeamFilter() { // Photos const default_profile_image = '../../../static/images/openlibrary-180x180.png'; - const bookUrlIcon = '../../../static/images/icons/icon_book-lg.png'; - const personalUrlIcon = '../../../static/images/globe-solid.svg'; const initialSearchParams = new URL(window.location.href).searchParams; const initialRole = initialSearchParams.get('role') || 'All'; const initialDepartment = initialSearchParams.get('department') || 'All'; @@ -137,25 +135,25 @@ export function initTeamFilter() { descriptionLinks.classList = 'description__links'; if (member.personal_url) { const memberPersonalA = document.createElement('a'); - const memberPersonalImg = document.createElement('img'); + const memberPersonalIcon = document.createElement('ol-icon'); memberPersonalA.href = `${member.personal_url}`; - memberPersonalImg.src = personalUrlIcon; - memberPersonalImg.classList = 'links__site'; + memberPersonalIcon.setAttribute('name', 'globe'); + memberPersonalIcon.classList = 'links__site'; - memberPersonalA.append(memberPersonalImg); + memberPersonalA.append(memberPersonalIcon); descriptionLinks.append(memberPersonalA); } if (member.favorite_book_url) { const memberBookA = document.createElement('a'); - const memberBookImg = document.createElement('img'); + const memberBookIcon = document.createElement('ol-icon'); memberBookA.href = `${member.favorite_book_url}`; - memberBookImg.src = bookUrlIcon; - memberBookImg.classList = 'links__book'; + memberBookIcon.setAttribute('name', 'book-open'); + memberBookIcon.classList = 'links__book'; - memberBookA.append(memberBookImg); + memberBookA.append(memberBookIcon); descriptionLinks.append(memberBookA); } diff --git a/openlibrary/templates/account/create.html b/openlibrary/templates/account/create.html index b81aee5012e..cb1e590fd21 100644 --- a/openlibrary/templates/account/create.html +++ b/openlibrary/templates/account/create.html @@ -66,6 +66,7 @@

$_("Sign Up")

+ $:macros.icon("triangle-alert", size="sm") $:form.note
diff --git a/openlibrary/templates/book_providers/read_button.html b/openlibrary/templates/book_providers/read_button.html index 1d154184f80..8edad84c83f 100644 --- a/openlibrary/templates/book_providers/read_button.html +++ b/openlibrary/templates/book_providers/read_button.html @@ -13,8 +13,9 @@ target="_blank" rel="noopener noreferrer" $:analytics_attr('Listen') > - + $:macros.icon("headphones", size="sm", extra_class="btn-icon") $_("Audiobook") + $:macros.icon("square-arrow-out-up-right", size="sm", extra_class="cta-btn__external-icon") $else: $_('Read') + >$_('Read')$:macros.icon("square-arrow-out-up-right", size="sm", extra_class="cta-btn__external-icon")
$elif acquisition.access == 'sample':
@@ -31,5 +32,5 @@ data-ol-link-track="CTAClick|Preview" target="_blank" rel="noopener noreferrer" $:analytics_attr('Preview') - >$_('Preview') + >$_('Preview')$:macros.icon("square-arrow-out-up-right", size="sm", extra_class="cta-btn__external-icon")
diff --git a/openlibrary/templates/books/edit.html b/openlibrary/templates/books/edit.html index 757984250a6..7887c8bece6 100644 --- a/openlibrary/templates/books/edit.html +++ b/openlibrary/templates/books/edit.html @@ -51,7 +51,7 @@

$:title

$if not ctx.user: $:render_template("lib/not_logged") $if alert_message: -

$:alert_message

+

$:macros.icon("circle-check" if alert_class == "thanks" else "info", size="sm")$:alert_message

@@ -102,7 +102,7 @@

diff --git a/openlibrary/templates/covers/add.html b/openlibrary/templates/covers/add.html index fb60091105b..d1c878af339 100644 --- a/openlibrary/templates/covers/add.html +++ b/openlibrary/templates/covers/add.html @@ -14,6 +14,7 @@ $ guideline = _("Cover Guidelines")
+$:macros.icon("triangle-alert", size="sm") $if status: $if status.code == 1: $_("Please provide a valid image.") $elif status.code == 2: $_("Please provide an image URL.") diff --git a/openlibrary/templates/covers/manage.html b/openlibrary/templates/covers/manage.html index cd9fd8e73b1..43b349932dd 100644 --- a/openlibrary/templates/covers/manage.html +++ b/openlibrary/templates/covers/manage.html @@ -37,7 +37,7 @@
-
+
$:macros.icon("trash", size="lg")
diff --git a/openlibrary/templates/covers/saved.html b/openlibrary/templates/covers/saved.html index 85d3ed7cee5..c08982a07d3 100644 --- a/openlibrary/templates/covers/saved.html +++ b/openlibrary/templates/covers/saved.html @@ -10,7 +10,7 @@
-
$_("Saved!")
+
$:macros.icon("circle-check", extra_class="saved__icon")$_("Saved!")
$if showinfo: $_("Notes:")
diff --git a/openlibrary/templates/lib/not_logged.html b/openlibrary/templates/lib/not_logged.html index a2708efc2c3..b1ddefe6407 100644 --- a/openlibrary/templates/lib/not_logged.html +++ b/openlibrary/templates/lib/not_logged.html @@ -1,3 +1,4 @@
+ $:macros.icon("info", extra_class="noLogin__icon")

$:_('You are not logged in. Open Library will record your IP address and include it in this page\'s publicly accessible edit history. If you create an account, your IP address is concealed and you can more easily keep track of all your edits and additions.')

diff --git a/openlibrary/templates/lists/home.html b/openlibrary/templates/lists/home.html index 19c8686c52c..9aed1e2fc5b 100644 --- a/openlibrary/templates/lists/home.html +++ b/openlibrary/templates/lists/home.html @@ -9,6 +9,7 @@

$_('Lists')

+ $:macros.icon("heart", extra_class="lists-page-cta__icon")

$_('Create a list of any Subjects, Authors, Works or specific Editions.')

$:_('Once you\'ve made a list, you can watch for updates or export all the editions in a list as HTML, BibTeX or JSON. See all your lists and any activity using the "Lists" link on your Account page.') $_('Enjoy!') diff --git a/openlibrary/templates/login.html b/openlibrary/templates/login.html index a3ec09ca6a5..656e3701a94 100644 --- a/openlibrary/templates/login.html +++ b/openlibrary/templates/login.html @@ -12,6 +12,7 @@

-
$_("Identifiers") $_('Author Identifiers Purpose')
+
$_("Identifiers") $:macros.icon("circle-help", size="sm", label=_('Author Identifiers Purpose'))
diff --git a/openlibrary/templates/type/author/view.html b/openlibrary/templates/type/author/view.html index dcce7676d91..a13109c612a 100644 --- a/openlibrary/templates/type/author/view.html +++ b/openlibrary/templates/type/author/view.html @@ -75,7 +75,7 @@

diff --git a/static/css/base/headings.css b/static/css/base/headings.css index fc22dd705a3..a1929792026 100644 --- a/static/css/base/headings.css +++ b/static/css/base/headings.css @@ -107,10 +107,10 @@ h4.facetHead span.merge { font-size: var(--font-size-label-small); font-weight: normal !important; text-transform: none !important; - /* Not tokenized: must exceed the 16px icon width to avoid text overlap */ - padding-left: 22px; - background: url(/static/images/icons/icon_merge-sm.png) no-repeat 0 0; - min-height: 16px; +} + +h4.facetHead span.merge .ol-icon { + margin-right: var(--spacing-inline-xs); } h5 { diff --git a/static/css/components/buttonCta.css b/static/css/components/buttonCta.css index 5d2efd9234c..aae6d966865 100644 --- a/static/css/components/buttonCta.css +++ b/static/css/components/buttonCta.css @@ -33,16 +33,6 @@ a.cta-btn .btn-icon { flex-shrink: 0; } -/* stylelint-disable selector-max-specificity */ -.cta-btn .btn-icon.read-aloud, -a.cta-btn .btn-icon.read-aloud { - background-image: url(/static/images/icons/read%20aloud.svg); - background-repeat: no-repeat; - background-size: contain; - background-position: center; -} -/* stylelint-enable selector-max-specificity */ - .cta-btn .btn-label, a.cta-btn .btn-label { padding: var(--spacing-inset-sm); @@ -93,13 +83,14 @@ a.cta-btn--primary:disabled { .cta-btn--external, a.cta-btn--external { - background-image: url(/static/images/icons/octicon-link-external-24.svg); - background-repeat: no-repeat; - background-size: 20px; - background-position: center right 8px; justify-content: center; } +.cta-btn--external .cta-btn__external-icon, +a.cta-btn--external .cta-btn__external-icon { + margin-left: var(--spacing-inline-xs); +} + .cta-btn--unavailable, a.cta-btn--unavailable { background-color: var(--color-primary); diff --git a/static/css/components/buttonsAndLinks.css b/static/css/components/buttonsAndLinks.css index 2983090b2a8..74a669e734a 100644 --- a/static/css/components/buttonsAndLinks.css +++ b/static/css/components/buttonsAndLinks.css @@ -84,17 +84,3 @@ button.plain { button.plain:hover { color: var(--color-success-fg); } -button.addAnother { - width: 32px; - height: 32px; - border: none; - vertical-align: middle; - cursor: pointer; - background-image: url(/static/images/icons/icon_add.png); - background-position: 0 0; - background-color: transparent; - display: none; -} -button.addAnother:hover { - background-position: -32px 0; -} diff --git a/static/css/components/flash-messages.css b/static/css/components/flash-messages.css index 16f11cf0de3..fb5930c7a3e 100644 --- a/static/css/components/flash-messages.css +++ b/static/css/components/flash-messages.css @@ -10,15 +10,10 @@ } .flash-messages span { - display: block; + display: flex; + align-items: center; + gap: var(--spacing-inline-sm); background-color: var(--light-yellow); - background-position: 10px 50%; - background-repeat: no-repeat; - padding: var(--spacing-inset-md) 52px; + padding: var(--spacing-inset-md); text-align: left; - background-image: url(/static/images/icons/icon_check.png); -} - -.flash-messages .error span { - background-image: url(/static/images/icons/icon_alert.png); } diff --git a/static/css/components/generic-dropper.css b/static/css/components/generic-dropper.css index a42859da35d..5caf4455af5 100644 --- a/static/css/components/generic-dropper.css +++ b/static/css/components/generic-dropper.css @@ -195,24 +195,7 @@ .dropper-menu .btn-icon { display: inline-block; - filter: invert(1); margin-right: var(--spacing-inline-sm); width: 1.25em; height: 1.25em; } - -/* icons */ -.dropper-menu .listen { - background-image: url(/static/images/icons/icon_listen.png); -} - -.dropper-menu .map { - background-image: url(/static/images/icons/icon_map.png); -} - -.dropper-menu .listen, -.dropper-menu .map { - background-repeat: no-repeat; - background-size: contain; - background-position: center; -} diff --git a/static/css/components/lists-page-cta.css b/static/css/components/lists-page-cta.css index d65d6557bd8..e6a0f5d0923 100644 --- a/static/css/components/lists-page-cta.css +++ b/static/css/components/lists-page-cta.css @@ -1,8 +1,13 @@ .lists-page-cta { - background-repeat: no-repeat; - background-image: url(/static/images/icons/icon_fav-big.png); - padding-top: 70px; - background-position: center 0; + position: relative; +} + +.lists-page-cta .lists-page-cta__icon { + display: block; + width: 52px; + height: 52px; + margin: 0 auto var(--spacing-stack-sm); + color: var(--red); } .lists-page-cta h2 { font-size: 1.5em; @@ -18,8 +23,14 @@ /* @width-breakpoint-desktop */ @media all and (min-width: 960px) { .lists-page-cta { - background-position: 35px 35px; padding-left: 130px; padding-right: 60px; } + + .lists-page-cta .lists-page-cta__icon { + position: absolute; + top: 35px; + left: 35px; + margin: 0; + } } diff --git a/static/css/components/read-panel.css b/static/css/components/read-panel.css index 92e80d9737d..fde6302bc9c 100644 --- a/static/css/components/read-panel.css +++ b/static/css/components/read-panel.css @@ -68,8 +68,14 @@ /* Setting pseudo-element content to book icon; mask is used to allow for a 'fill' color */ content: ""; - -webkit-mask: url(/static/images/icons/open-book.svg); - mask: url(/static/images/icons/open-book.svg); + -webkit-mask: url( + data:image/svg + xml, + %3Csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"%3E%3Cpathd="M12 5v16"/%3E%3Cpathd="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"/%3E%3C/svg%3E + ); + mask: url( + data:image/svg + xml, + %3Csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"%3E%3Cpathd="M12 5v16"/%3E%3Cpathd="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"/%3E%3C/svg%3E + ); -webkit-mask-size: cover; mask-size: cover; background-color: var(--color-primary); diff --git a/static/css/components/search-result-item.css b/static/css/components/search-result-item.css index 3c3388be5d5..e2cbbee6d8d 100644 --- a/static/css/components/search-result-item.css +++ b/static/css/components/search-result-item.css @@ -35,8 +35,14 @@ /* Setting pseudo-element content to book icon; mask is used to allow for a 'fill' color */ content: ""; - -webkit-mask: url(/static/images/icons/open-book.svg); - mask: url(/static/images/icons/open-book.svg); + -webkit-mask: url( + data:image/svg + xml, + %3Csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"%3E%3Cpathd="M12 5v16"/%3E%3Cpathd="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"/%3E%3C/svg%3E + ); + mask: url( + data:image/svg + xml, + %3Csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"%3E%3Cpathd="M12 5v16"/%3E%3Cpathd="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"/%3E%3C/svg%3E + ); -webkit-mask-size: cover; mask-size: cover; background-color: var(--color-primary); diff --git a/static/css/components/team.css b/static/css/components/team.css index 937e9339015..187aff5be5f 100644 --- a/static/css/components/team.css +++ b/static/css/components/team.css @@ -130,9 +130,7 @@ } .links__site, .links__book { + width: 35px; height: 35px; -} -.links__site { - filter: invert(32%) sepia(89%) saturate(5319%) hue-rotate(186deg) - brightness(96%) contrast(97%); + color: var(--color-primary); } diff --git a/static/css/components/ui-dialog.css b/static/css/components/ui-dialog.css index 61a170aff3b..fe0b65ac925 100644 --- a/static/css/components/ui-dialog.css +++ b/static/css/components/ui-dialog.css @@ -36,8 +36,29 @@ .ui-dialog .ui-dialog-content p { min-height: 28px; padding: 6px 33px 0; - background: url(/static/images/icons/icon_alert.png) no-repeat 0 0; margin: 0; + position: relative; +} +/* jQuery UI generates this markup, so the alert glyph has no template to + live in; a masked pseudo-element stands in for $:macros.icon(). */ +.ui-dialog .ui-dialog-content p::before { + content: ""; + position: absolute; + top: 4px; + left: 2px; + width: 24px; + height: 24px; + background-color: var(--color-text); + -webkit-mask: url( + data:image/svg + xml, + %3Csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"%3E%3Cpathd="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/%3E%3Cpathd="M12 9v4"/%3E%3Cpathd="M12 17h.01"/%3E%3C/svg%3E + ) + no-repeat center / contain; + mask: url( + data:image/svg + xml, + %3Csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"%3E%3Cpathd="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/%3E%3Cpathd="M12 9v4"/%3E%3Cpathd="M12 17h.01"/%3E%3C/svg%3E + ) + no-repeat center / contain; } .ui-dialog .ui-dialog-buttonpane { text-align: center; diff --git a/static/css/legacy.css b/static/css/legacy.css index a9c2d51e581..2dea3adc596 100644 --- a/static/css/legacy.css +++ b/static/css/legacy.css @@ -396,18 +396,12 @@ p.alert { font-size: 0.875em; color: var(--brown); background-color: var(--light-yellow); - background-position: 10px 50%; - background-repeat: no-repeat; margin: var(--spacing-stack-sm) auto 0; - padding: var(--spacing-inset-md) 52px; -} - -p.info { - background-image: url(/static/images/icons/icon_info.png); + padding: var(--spacing-inset-md); } -p.thanks { - background-image: url(/static/images/icons/icon_check.png); +p.alert .ol-icon { + margin-right: var(--spacing-inline-xs); } input[type="text"], @@ -536,37 +530,26 @@ div.note { /* openlibrary/templates/lib/not_logged.html */ div#noLogin { margin-top: var(--spacing-stack-sm); - background: var(--light-yellow) url(/static/images/icons/icon_info.png) - no-repeat 10px 50%; - padding: var(--spacing-inset-sm) var(--spacing-inset-sm) - var(--spacing-inset-sm) 44px; + display: flex; + align-items: center; + gap: var(--spacing-inline-sm); + background: var(--light-yellow); + padding: var(--spacing-inset-sm); } /* openlibrary/templates/type/author/view.html */ div#preMerge { - min-height: 32px; - padding: var(--spacing-inset-sm) var(--spacing-inset-sm) - var(--spacing-inset-sm) 52px; - background: transparent url(/static/images/icons/icon_merge.png) no-repeat - 10px 10px; + padding: var(--spacing-inset-sm); } /* openlibrary/templates/type/author/view.html */ div#postMerge { - min-height: 32px; - padding: var(--spacing-inset-sm) var(--spacing-inset-sm) - var(--spacing-inset-sm) 52px; - background: transparent url(/static/images/icons/icon_check.png) no-repeat - 10px 10px; + padding: var(--spacing-inset-sm); } /* openlibrary/templates/type/author/view.html */ div#errorMerge { - min-height: 32px; - padding: var(--spacing-inset-sm) var(--spacing-inset-sm) - var(--spacing-inset-sm) 52px; - background: transparent url(/static/images/icons/icon_alert.png) no-repeat - 10px 10px; + padding: var(--spacing-inset-sm); } /* FORMS */ @@ -767,27 +750,6 @@ div#revertNotice { } /* MESSAGING */ -div.alert span, -div.verify span { - margin: 0 auto; - min-height: 25px; - padding: var(--spacing-inset-xs) 0 var(--spacing-inset-xs) 32px; -} - -div.alert, -div.verify { - font: 1.25em var(--font-family-body); -} - -/* openlibrary/templates/account/verify/failed.html */ -div.alert span { - background: url(/static/images/icons/icon_alert.png) no-repeat; -} - -div.verify span { - background: url(/static/images/icons/icon_check.png) no-repeat; -} - /* openlibrary/templates/account/email/forgot-ia.html */ .defaultstyling { font-family: var(--font-family-body); @@ -1555,7 +1517,6 @@ div.popAlert { width: 550px; padding: var(--spacing-inset-sm) var(--spacing-inset-md); margin-bottom: var(--spacing-stack-md); - background: url(/static/images/icons/icon_alert.png) no-repeat; font-size: 1.25em; color: var(--red); text-align: center; @@ -1619,9 +1580,8 @@ div.popAlert { /* openlibrary/templates/search/authors.html */ div.mergeThis { display: inline; - padding: var(--spacing-inset-md) 0 0 45px; + padding: var(--spacing-inset-md) 0 0; margin-left: 15px; - background: url(/static/images/icons/icon_merge.png) no-repeat 0 0; } /* openlibrary/templates/recentchanges/default/view.html */ diff --git a/static/css/page-form.css b/static/css/page-form.css index ba38b198f90..fc530b31c37 100644 --- a/static/css/page-form.css +++ b/static/css/page-form.css @@ -35,8 +35,28 @@ div#revertLink, .column { min-height: 90px; margin: 10px; - background-image: url(/static/images/back_sortable.png); - background-repeat: no-repeat; + position: relative; +} +/* Portlets are injected over this area, so the drag affordance has no + markup of its own; a masked pseudo-element stands in for the sprite. */ +.column::before { + content: ""; + position: absolute; + top: 10px; + left: 10px; + width: 24px; + height: 24px; + background-color: var(--color-text-secondary); + -webkit-mask: url( + data:image/svg + xml, + %3Csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"%3E%3Ccirclecx="9"cy="12"r="1"/%3E%3Ccirclecx="9"cy="5"r="1"/%3E%3Ccirclecx="9"cy="19"r="1"/%3E%3Ccirclecx="15"cy="12"r="1"/%3E%3Ccirclecx="15"cy="5"r="1"/%3E%3Ccirclecx="15"cy="19"r="1"/%3E%3C/svg%3E + ) + no-repeat center / contain; + mask: url( + data:image/svg + xml, + %3Csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"%3E%3Ccirclecx="9"cy="12"r="1"/%3E%3Ccirclecx="9"cy="5"r="1"/%3E%3Ccirclecx="9"cy="19"r="1"/%3E%3Ccirclecx="15"cy="12"r="1"/%3E%3Ccirclecx="15"cy="5"r="1"/%3E%3Ccirclecx="15"cy="19"r="1"/%3E%3C/svg%3E + ) + no-repeat center / contain; } .trashCan { position: absolute; @@ -44,9 +64,10 @@ div#revertLink, right: 32px; width: 32px; height: 42px; - background-image: url(/static/images/back_sort-trash.png); - background-repeat: no-repeat; - background-position: 0 0; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-text-secondary); cursor: pointer; } .trashPosition { @@ -54,7 +75,7 @@ div#revertLink, height: 90px; } .trashPosition:hover .trashCan { - background-position: -32px 0; + color: var(--red); } .trash { height: 90px; @@ -100,14 +121,18 @@ div#revertLink, text-decoration: none; } .saved { - background: url(/static/images/icons/icon_saved.png) no-repeat; + display: flex; + align-items: center; + gap: var(--spacing-inline-sm); font-size: 1.5em; font-weight: 700; color: var(--black); - padding: var(--spacing-inset-xs) 0 0 40px; min-height: 30px; margin: var(--spacing-stack-lg) 0 var(--spacing-stack-md); } +.saved .saved__icon { + color: var(--color-success-fg); +} .saved-image-container { display: flex; } diff --git a/static/css/page-plain.css b/static/css/page-plain.css index 6f6e4e2e46e..ff692594b28 100644 --- a/static/css/page-plain.css +++ b/static/css/page-plain.css @@ -70,26 +70,6 @@ div.nav { font-size: 1.125em; } -div.message { - padding: var(--spacing-inset-lg) var(--spacing-inset-lg) - var(--spacing-inset-lg) 55px; - margin-bottom: 50px; - background: var(--light-yellow) url(/static/images/icons/icon_lock-msg.png) - no-repeat 15px 50%; -} -div.message h2 { - font-weight: normal; - font-size: 18px; - color: var(--black); - margin: 0; - padding: 0; -} -div.message p { - font-size: 0.75em; - padding: 0; - margin: 0; -} - ul.link { margin-bottom: 50px; } @@ -111,24 +91,6 @@ ul.link li { p.help { font-size: var(--font-size-label-large); } -div.alert { - background: var(--light-yellow) url(/static/images/icons/icon_alert-gold.png) - no-repeat 15px 50% !important; - margin-bottom: var(--spacing-stack-sm); - margin-top: 20px; -} -div.stop { - background: var(--light-yellow) url(/static/images/icons/icon_stop.png) - no-repeat 15px 50% !important; - margin-bottom: 45px; - margin-top: 20px; -} -div.info { - background: var(--light-yellow) url(/static/images/icons/icon_info.png) - no-repeat 17px 50% !important; - margin-bottom: 45px; - margin-top: 20px; -} h1 { font-size: 1.5em; margin: 0 0 var(--spacing-stack-md); diff --git a/static/icons/src/lucide/book-open.svg b/static/icons/src/lucide/book-open.svg new file mode 100644 index 00000000000..cb150d286c4 --- /dev/null +++ b/static/icons/src/lucide/book-open.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/circle-help.svg b/static/icons/src/lucide/circle-help.svg new file mode 100644 index 00000000000..7eb6a60cc72 --- /dev/null +++ b/static/icons/src/lucide/circle-help.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/git-merge.svg b/static/icons/src/lucide/git-merge.svg new file mode 100644 index 00000000000..d880fdfce61 --- /dev/null +++ b/static/icons/src/lucide/git-merge.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/grip-vertical.svg b/static/icons/src/lucide/grip-vertical.svg new file mode 100644 index 00000000000..3ae3918a7ab --- /dev/null +++ b/static/icons/src/lucide/grip-vertical.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/headphones.svg b/static/icons/src/lucide/headphones.svg new file mode 100644 index 00000000000..1a5ead33d5c --- /dev/null +++ b/static/icons/src/lucide/headphones.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/heart.svg b/static/icons/src/lucide/heart.svg new file mode 100644 index 00000000000..c6993192756 --- /dev/null +++ b/static/icons/src/lucide/heart.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/info.svg b/static/icons/src/lucide/info.svg new file mode 100644 index 00000000000..ba4ac9b4fb6 --- /dev/null +++ b/static/icons/src/lucide/info.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/map-pin.svg b/static/icons/src/lucide/map-pin.svg new file mode 100644 index 00000000000..e06167c2c43 --- /dev/null +++ b/static/icons/src/lucide/map-pin.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/square-arrow-out-up-right.svg b/static/icons/src/lucide/square-arrow-out-up-right.svg new file mode 100644 index 00000000000..3ff2ee3cace --- /dev/null +++ b/static/icons/src/lucide/square-arrow-out-up-right.svg @@ -0,0 +1 @@ + diff --git a/static/icons/src/lucide/triangle-alert.svg b/static/icons/src/lucide/triangle-alert.svg new file mode 100644 index 00000000000..f78657a19fd --- /dev/null +++ b/static/icons/src/lucide/triangle-alert.svg @@ -0,0 +1 @@ +