100 lines
2.2 KiB
TypeScript
100 lines
2.2 KiB
TypeScript
import { css, html, LitElement } from "lit";
|
|
import { customElement, property } from "lit/decorators.js";
|
|
|
|
import "@components/EveLink";
|
|
|
|
@customElement("arx-app-icon")
|
|
export class AppIcon extends LitElement {
|
|
@property()
|
|
icon: string | undefined;
|
|
|
|
@property()
|
|
color = "#ff9900";
|
|
|
|
@property()
|
|
href = "#";
|
|
|
|
@property()
|
|
name = "App";
|
|
|
|
static override styles = [
|
|
css`
|
|
.app-name {
|
|
font-size: 12px;
|
|
color: #000;
|
|
text-shadow: 0px 0px 5px #ffffff;
|
|
text-align: center;
|
|
max-width: 70px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.app-icon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: #fff;
|
|
text-align: center;
|
|
|
|
&:hover {
|
|
.icon {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
border: 2px solid #000;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.app-name {
|
|
color: white;
|
|
text-shadow: 0px 0px 5px black;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
width: clamp(48px, 8vw, 64px);
|
|
height: clamp(48px, 8vw, 64px);
|
|
border-radius: 15px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px solid #aaa;
|
|
transition: all 0.2s ease-in-out;
|
|
|
|
.app-icon {
|
|
width: 75%;
|
|
height: 75%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.app-name {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
`,
|
|
];
|
|
|
|
override render() {
|
|
return html`
|
|
<arx-eve-link href="${this.href}" class="app-icon">
|
|
<div class="icon" style="background-color: ${this.color}">
|
|
${this.icon
|
|
? html`<iconify-icon
|
|
icon="${this.icon}"
|
|
class="app-icon"
|
|
width="48"
|
|
height="48"
|
|
color="white"
|
|
></iconify-icon>`
|
|
: ""}
|
|
</div>
|
|
<span class="app-name">${this.name}</span>
|
|
</arx-eve-link>
|
|
`;
|
|
}
|
|
}
|