fix: border on play icon
This commit is contained in:
parent
cf19bdb5c3
commit
c369e7b693
4 changed files with 16 additions and 26 deletions
|
@ -34,7 +34,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@recogito/annotorious": "^2.7.1",
|
||||
"boxicons": "^2.1.1",
|
||||
"boxicons": "^2.1.4",
|
||||
"date-fns": "^2.25.0",
|
||||
"dompurify": "^2.3.4",
|
||||
"filesize": "^8.0.6",
|
||||
|
|
|
@ -93,9 +93,7 @@
|
|||
/>
|
||||
{/if}
|
||||
<div class="play-icon">
|
||||
<div class="icon">
|
||||
<Icon plain name="play" />
|
||||
</div>
|
||||
<Icon plain border name="play" />
|
||||
</div>
|
||||
<div
|
||||
class="timecode"
|
||||
|
@ -152,21 +150,8 @@
|
|||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
$size: var(--icon-size);
|
||||
|
||||
width: $size;
|
||||
height: $size;
|
||||
|
||||
color: white;
|
||||
font-size: $size;
|
||||
line-height: 1;
|
||||
|
||||
border-radius: calc($size / 4);
|
||||
border: 0.07em solid white;
|
||||
|
||||
.icon {
|
||||
margin-left: 0.04em;
|
||||
}
|
||||
font-size: var(--icon-size);
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
<script lang="ts">
|
||||
export let plain = false;
|
||||
export let name: string;
|
||||
export let border = false;
|
||||
|
||||
if (!loaded) {
|
||||
document.head.innerHTML += `<link
|
||||
|
@ -15,10 +16,14 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<i class="bx bx-{name}" class:plain />
|
||||
<i class="bx bx-{name}" class:plain class:bx-border={border} />
|
||||
|
||||
<style>
|
||||
.bx:not(.plain) {
|
||||
font-size: 115%;
|
||||
}
|
||||
|
||||
.bx-border {
|
||||
border-color: white;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -724,9 +724,9 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"boxicons@npm:^2.1.1":
|
||||
version: 2.1.1
|
||||
resolution: "boxicons@npm:2.1.1"
|
||||
"boxicons@npm:^2.1.4":
|
||||
version: 2.1.4
|
||||
resolution: "boxicons@npm:2.1.4"
|
||||
dependencies:
|
||||
"@webcomponents/webcomponentsjs": ^2.0.2
|
||||
prop-types: ^15.6.0
|
||||
|
@ -734,7 +734,7 @@ __metadata:
|
|||
react-dom: ^16.0.0
|
||||
react-interactive: ^0.8.1
|
||||
react-router-dom: ^4.2.2
|
||||
checksum: c192c79693da679c534abf748d025c4775808a8d817b5f9443d4310194cdcf4d37207fef0760915b37323cdb42266f907b18c3b69a6a6ae6b5cab0fa0ec09da9
|
||||
checksum: 2d77f91d993121a23cddb093c8ccdf7d274b8108f2ff3a52f88fd14899bb6fcdcd8c17556bd3f51fb73776c37178ec7b104aa920c3a6e51bc99339f561d8edc0
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
|
@ -3985,7 +3985,7 @@ __metadata:
|
|||
"@types/wavesurfer.js": ^6.0.3
|
||||
"@typescript-eslint/eslint-plugin": ^5.32.0
|
||||
"@typescript-eslint/parser": ^5.32.0
|
||||
boxicons: ^2.1.1
|
||||
boxicons: ^2.1.4
|
||||
date-fns: ^2.25.0
|
||||
dompurify: ^2.3.4
|
||||
eslint: ^8.21.0
|
||||
|
@ -4019,8 +4019,8 @@ __metadata:
|
|||
|
||||
"upend@file:../tools/upend_js::locator=upend-kestrel%40workspace%3A.":
|
||||
version: 0.0.1
|
||||
resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=b32491&locator=upend-kestrel%40workspace%3A."
|
||||
checksum: 4e4e5c0a6498ad2ea8369a91e3c67c160186a96d47073469d61794c3717824198bd2de7851f3e0786833fa5f8c0eb85c65f7d7dc9c0114b9328b2a1060f645b2
|
||||
resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=4972b4&locator=upend-kestrel%40workspace%3A."
|
||||
checksum: 9449fce51433df8ce7a4d4e597fbd8811611f15ed3d8c499a6e14fd29bbba40adaf7f441e5cd4f4f3439e9fb46adf269783cef574904975569ba99c9933e711d
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
|
|
Loading…
Reference in a new issue