Use CSS background images for options page icon buttons

This commit is contained in:
hensm
2022-08-27 07:46:24 +01:00
parent 25c0187780
commit a65b3bbe4a
3 changed files with 19 additions and 20 deletions

View File

@@ -198,9 +198,7 @@
class="ghost bridge__refresh"
title={_("optionsBridgeRefresh")}
on:click={checkBridgeStatus}
>
<img src="assets/photon_refresh.svg" alt="icon, refresh" />
</button>
/>
</div>
{#if bridgeInfo}

View File

@@ -184,9 +184,7 @@
title={_("optionsSiteWhitelistEditItem")}
disabled={isEditing && !isEditingValid}
on:click={() => beginEditing(i)}
>
<img src="assets/photon_edit.svg" alt="icon, edit" />
</button>
/>
{/if}
<button
@@ -195,9 +193,7 @@
title={_("optionsSiteWhitelistRemoveItem")}
disabled={isEditing && !isEditingItem && !isEditingValid}
on:click={() => removeItem(i)}
>
<img src="assets/photon_delete.svg" alt="icon, remove" />
</button>
/>
{#if !isEditingItem && opts.showAdvancedOptions}
<button
@@ -217,14 +213,7 @@
}
expandedItemIndices = expandedItemIndices;
}}
>
<img
src="../assets/{isItemExpanded
? 'photon_arrowhead_up.svg'
: 'photon_arrowhead_down.svg'}"
alt="icon, arrow down"
/>
</button>
/>
{#if isItemExpanded}
<div class="whitelist__expanded">
@@ -300,8 +289,6 @@
title={_("optionsSiteWhitelistAddItem")}
on:click={addItem}
type="button"
>
<img src="assets/photon_new.svg" alt="icon, add" />
</button>
/>
</div>
</div>

View File

@@ -144,6 +144,7 @@ input:placeholder-shown {
}
.bridge__refresh {
background-image: url("../assets/photon_refresh.svg");
position: absolute;
right: 0;
top: 0;
@@ -370,7 +371,20 @@ input:placeholder-shown {
width: -moz-available;
}
.whitelist__edit-button {
background-image: url("../assets/photon_edit.svg");
}
.whitelist__remove-button {
background-image: url("../assets/photon_delete.svg");
}
.whitelist__expand-button {
background-image: url("../../assets/photon_arrowhead_down.svg");
}
.whitelist__item--expanded .whitelist__expand-button {
background-image: url("../../assets/photon_arrowhead_up.svg");
}
.whitelist__add-button {
background-image: url("../assets/photon_new.svg");
margin-inline-end: auto;
}