mirror of
https://github.com/gwdevhub/Daybreak.git
synced 2026-07-24 03:56:30 +00:00
51 lines
905 B
CSS
51 lines
905 B
CSS
.icon-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
position: relative;
|
|
container-type: inline-size;
|
|
}
|
|
|
|
.icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
object-fit: cover;
|
|
object-position: top left;
|
|
}
|
|
|
|
.icon-border {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
pointer-events: none;
|
|
border: 4px solid transparent; /* 3px for standard 60px icons */
|
|
}
|
|
|
|
.icon-type {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 20%;
|
|
height: 20%;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* Container query for smaller icons */
|
|
@container (max-width: 40px) {
|
|
.icon-border {
|
|
border-width: 2px;
|
|
}
|
|
}
|
|
|
|
.icon-border.normal {
|
|
border-color: black;
|
|
}
|
|
|
|
.icon-border.elite {
|
|
border-color: gold;
|
|
} |