Fix Layout
This commit is contained in:
@@ -15,7 +15,7 @@
|
||||
|
||||
.configurable-reactions .cr-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 310px 1fr;
|
||||
grid-template-columns: 33% 67%;
|
||||
gap: 1rem;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
@@ -27,6 +27,12 @@
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.configurable-reactions .cr-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.configurable-reactions .cr-button-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -86,7 +92,9 @@
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.35fr;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
flex: 0 0 40%;
|
||||
min-height: 220px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.configurable-reactions .cr-card,
|
||||
@@ -100,7 +108,7 @@
|
||||
|
||||
.configurable-reactions .cr-basics {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: end;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
@@ -157,15 +165,17 @@
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.configurable-reactions .cr-main textarea[name="reactionJson"] {
|
||||
width: 100%;
|
||||
min-height: 340px;
|
||||
font-family: var(--font-monospace, monospace);
|
||||
resize: vertical;
|
||||
.configurable-reactions .cr-json-editor {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.configurable-reactions .cr-reaction-summary {
|
||||
margin-bottom: 0.75rem;
|
||||
.configurable-reactions .cr-main textarea[name="reactionJson"] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 180px;
|
||||
font-family: var(--font-monospace, monospace);
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.configurable-reactions .form-group.stacked {
|
||||
@@ -198,21 +208,23 @@
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.configurable-reactions .cr-status-builder {
|
||||
.configurable-reactions .cr-status-builder,
|
||||
.configurable-reactions .cr-damage-builder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.configurable-reactions .cr-status-label {
|
||||
.configurable-reactions .cr-chip-label {
|
||||
opacity: 0.85;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.configurable-reactions .cr-status-chip-list {
|
||||
.configurable-reactions .cr-chip-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 0.25rem;
|
||||
min-height: 1.6rem;
|
||||
padding: 0.25rem;
|
||||
@@ -221,38 +233,45 @@
|
||||
background: rgb(0 0 0 / 0.08);
|
||||
}
|
||||
|
||||
.configurable-reactions .cr-status-chip {
|
||||
.configurable-reactions .cr-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
max-width: 100%;
|
||||
padding: 0.15rem 0.25rem 0.15rem 0.35rem;
|
||||
padding: 0.12rem 0.2rem 0.12rem 0.35rem;
|
||||
border: 1px solid var(--color-border-light-secondary, #777);
|
||||
border-radius: 999px;
|
||||
background: rgb(0 0 0 / 0.16);
|
||||
font-size: 0.8rem;
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
.configurable-reactions .cr-status-chip img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
.configurable-reactions .cr-chip img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: none;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.configurable-reactions .cr-status-chip span {
|
||||
.configurable-reactions .cr-chip span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.configurable-reactions .cr-status-chip button {
|
||||
width: 1.35rem;
|
||||
min-height: 1.35rem;
|
||||
.configurable-reactions .cr-chip button {
|
||||
width: 1rem;
|
||||
min-height: 1rem;
|
||||
height: 1rem;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.configurable-reactions .cr-status-builder select {
|
||||
.configurable-reactions .cr-status-builder select,
|
||||
.configurable-reactions .cr-damage-builder select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user