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