Content added Content deleted
mNo edit summary |
mNo edit summary |
||
Line 1: | Line 1: | ||
.dialogue { |
.dialogue { |
||
display: grid; |
display: grid; |
||
grid-template-columns: |
grid-template-columns: 50px 1fr; |
||
grid-template-rows: 2em 1fr; |
|||
grid-template-areas: "icon name" |
grid-template-areas: "icon name" |
||
"icon text"; |
"icon text"; |
Revision as of 09:06, 11 December 2021
.dialogue {
display: grid;
grid-template-columns: 50px 1fr;
grid-template-rows: 2em 1fr;
grid-template-areas: "icon name"
"icon text";
grid-gap: 0 15px;
width: 60em;
max-width: 100%;
align-content: center;
margin: 1em 0;
}
.dialogue-icon {
grid-area: icon;
padding-top: 5px;
justify-self: right;
}
.dialogue-name {
grid-area: name;
}
.dialogue-text {
grid-area: text;
padding: 0.5em 1em;
background: var(--color-surface-2);
border: 1px solid var(--color-surface-3);
border-radius: var(--border-radius--medium);
}