mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-12 11:41:08 +01:00
175 - Character Sheet Levelup Functionality (#181)
* Attached CharacterCreate and Levelup functionality to the sheet * Changed to a warning icon
This commit is contained in:
parent
7f898bb983
commit
d9c003b64b
10 changed files with 218 additions and 61 deletions
|
|
@ -9,16 +9,16 @@
|
|||
|
||||
.name-row {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: baseline;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
padding-top: 5px;
|
||||
flex: 1;
|
||||
|
||||
input[type='text'] {
|
||||
font-size: 32px;
|
||||
height: 42px;
|
||||
width: 380px;
|
||||
text-align: start;
|
||||
border: 1px solid transparent;
|
||||
outline: 2px solid transparent;
|
||||
|
|
@ -31,6 +31,40 @@
|
|||
|
||||
.level-div {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 40px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.level-button {
|
||||
color: light-dark(@dark, @beige);
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
min-height: unset;
|
||||
height: min-content;
|
||||
padding: 4px;
|
||||
font-family: 'Cinzel', serif;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
border-color: light-dark(@dark-blue, @golden);
|
||||
background-color: light-dark(transparent, @deep-black);
|
||||
|
||||
&:hover {
|
||||
background-image: none;
|
||||
background-color: var(--color-warm-2);
|
||||
filter: drop-shadow(0 0 3px lightgray);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -48,6 +48,10 @@
|
|||
background: light-dark(@light-black, @dark-blue);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
}
|
||||
|
||||
&.glow {
|
||||
animation: glow 0.75s infinite alternate;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
|
|
@ -336,16 +340,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
.theme-light .application .component.dh-style.card-preview-container {
|
||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||
|
||||
.preview-text-container {
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
.theme-light .application {
|
||||
&.sheet.dh-style {
|
||||
button.glow {
|
||||
animation: glow-dark 0.75s infinite alternate;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-selected-icon-container {
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
color: var(--color-light-5);
|
||||
.component.dh-style.card-preview-container {
|
||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||
|
||||
.preview-text-container {
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
}
|
||||
|
||||
.preview-selected-icon-container {
|
||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||
color: var(--color-light-5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,41 @@
|
|||
@primary-blue: #1488cc;
|
||||
@secondary-blue: #2b32b2;
|
||||
@golden: #f3c267;
|
||||
@golden-40: #f3c26740;
|
||||
@dark-blue-40: #18162e40;
|
||||
@golden-10: #f3c26710;
|
||||
@dark-blue-10: #18162e10;
|
||||
@dark-blue-50: #18162e50;
|
||||
@dark-blue: #18162e;
|
||||
@deep-black: #0e0d15;
|
||||
@beige: #efe6d8;
|
||||
@beige-15: #efe6d815;
|
||||
@beige-50: #efe6d850;
|
||||
@dark-blue: rgb(24, 22, 46);
|
||||
@semi-transparent-dark-blue: rgba(24, 22, 46, 0.33);
|
||||
@dark: #222;
|
||||
@dark-15: #22222215;
|
||||
@light-black: rgba(0, 0, 0, 0.3);
|
||||
@soft-shadow: rgba(0, 0, 0, 0.05);
|
||||
@gradient-hp: linear-gradient(15deg, rgb(70, 20, 10) 0%, rgb(190, 0, 0) 42%, rgb(252, 176, 69) 100%);
|
||||
@gradient-stress: linear-gradient(15deg, rgb(130, 59, 1) 0%, rgb(252, 142, 69) 65%, rgb(190, 0, 0) 100%);
|
||||
@primary-blue: #1488cc;
|
||||
@secondary-blue: #2b32b2;
|
||||
@golden: #f3c267;
|
||||
@golden-40: #f3c26740;
|
||||
@dark-blue-40: #18162e40;
|
||||
@golden-10: #f3c26710;
|
||||
@dark-blue-10: #18162e10;
|
||||
@dark-blue-50: #18162e50;
|
||||
@dark-blue: #18162e;
|
||||
@deep-black: #0e0d15;
|
||||
@beige: #efe6d8;
|
||||
@beige-15: #efe6d815;
|
||||
@beige-50: #efe6d850;
|
||||
@dark-blue: rgb(24, 22, 46);
|
||||
@semi-transparent-dark-blue: rgba(24, 22, 46, 0.33);
|
||||
@dark: #222;
|
||||
@dark-15: #22222215;
|
||||
@light-black: rgba(0, 0, 0, 0.3);
|
||||
@soft-shadow: rgba(0, 0, 0, 0.05);
|
||||
@gradient-hp: linear-gradient(15deg, rgb(70, 20, 10) 0%, rgb(190, 0, 0) 42%, rgb(252, 176, 69) 100%);
|
||||
@gradient-stress: linear-gradient(15deg, rgb(130, 59, 1) 0%, rgb(252, 142, 69) 65%, rgb(190, 0, 0) 100%);
|
||||
|
||||
@keyframes glow {
|
||||
0% {
|
||||
box-shadow: 0 0 1px 1px @golden;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 2px 2px @golden;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glow-dark {
|
||||
0% {
|
||||
box-shadow: 0 0 1px 1px @dark-blue;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 2px 2px @dark-blue;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue