Get most of the Aura display implemented added to the HTML
This commit is contained in:
parent
f1d9fe187c
commit
a830adbd2d
3 changed files with 67 additions and 1 deletions
|
|
@ -29,6 +29,49 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.aura-container {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2 / span 4;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
grid-template-rows: minmax(0, 1fr);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.circle-fragment, .full-circle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.circle-fragment {
|
||||
border-top-left-radius: 24% 100%;
|
||||
border-bottom-left-radius: 25% 100%;
|
||||
border-left: 2px dashed var(--accent-3);
|
||||
margin-right: -5%;
|
||||
}
|
||||
|
||||
.full-circle {
|
||||
border: 2px dashed var(--accent-3);
|
||||
flex-grow: 0;
|
||||
border-radius: 999px;
|
||||
width: 80%;
|
||||
aspect-ratio: 1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
grid-row: 1;
|
||||
grid-column: 4;
|
||||
}
|
||||
|
||||
.caster-silhouette {
|
||||
grid-column: 4 / span 4;
|
||||
grid-row: 1;
|
||||
position: absolute;
|
||||
left: 2rem;
|
||||
width: 70%;
|
||||
bottom: -10px;
|
||||
}
|
||||
|
||||
.craft-list {
|
||||
display: grid;
|
||||
grid-template-rows: subgrid;
|
||||
|
|
@ -49,6 +92,7 @@
|
|||
|
||||
[data-aspect] {
|
||||
&.aspect-header {
|
||||
z-index: 1;
|
||||
grid-row: var(--row);
|
||||
grid-column: var(--col);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue