Begin working on a scoped CSS solution that uses a common design language across all sheets, and *just* does sheet-specific layout tasks
This commit is contained in:
parent
5c5a1a8b56
commit
eadaa53c75
32 changed files with 314 additions and 35 deletions
|
|
@ -1,7 +1,7 @@
|
|||
@use "../../../vars" as *;
|
||||
@use "avatar" as *;
|
||||
|
||||
.dotdungeon .actor--mob {
|
||||
.dotdungeon:not(.style-v3) .actor--mob {
|
||||
--gap: 8px;
|
||||
--avatar-size: 100px;
|
||||
--row-height: calc((var(--avatar-size) - var(--gap)) / 2);
|
||||
|
|
|
|||
123
styles/sheets/actor/mob/v2.scss
Normal file
123
styles/sheets/actor/mob/v2.scss
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
@use "../../../vars" as *;
|
||||
@use "avatar" as *;
|
||||
|
||||
.dotdungeon:not(.style-v3) .actor--mob2 {
|
||||
--gap: 8px;
|
||||
--avatar-size: 100px;
|
||||
--row-height: calc((var(--avatar-size) - var(--gap)) / 2);
|
||||
padding: var(--gap);
|
||||
display: grid;
|
||||
grid-template-columns: var(--avatar-size) repeat(2, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(5, var(--row-height)) minmax(var(--row-height), 1fr);
|
||||
gap: var(--gap);
|
||||
grid-template-areas:
|
||||
"avatar . ."
|
||||
"avatar . ."
|
||||
"dice tabs tabs"
|
||||
"dice tabs tabs"
|
||||
"dice tabs tabs"
|
||||
"dice tabs tabs";
|
||||
|
||||
label, .dice {
|
||||
border: 2px solid black;
|
||||
border-radius: 4px;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
input.masked {
|
||||
border: 2px solid black;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
&:focus {
|
||||
transform: scale(102%);
|
||||
}
|
||||
}
|
||||
|
||||
label.mask-input {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
transition: all ease-in-out 50ms;
|
||||
|
||||
&:focus-within {
|
||||
transform: scale(102%);
|
||||
}
|
||||
|
||||
input {
|
||||
text-align: right;
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid black;
|
||||
&:focus, &:focus-visible {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
input.left {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.mask-textarea {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all ease-in-out 50ms;
|
||||
|
||||
&:focus-within {
|
||||
transform: scale(102%);
|
||||
}
|
||||
|
||||
textarea {
|
||||
flex-grow: 1;
|
||||
resize: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
height: 100%;
|
||||
font-size: 1.5rem;
|
||||
input {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.dice {
|
||||
grid-area: dice;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.die {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
border: 2px solid black;
|
||||
border-radius: 4px;
|
||||
|
||||
.formula {
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs { grid-area: tabs; }
|
||||
.stunts {
|
||||
grid-area: stunts;
|
||||
}
|
||||
.description {
|
||||
grid-area: description;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@include avatar;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue