mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-12 03:31:07 +01:00
Feature/chat message styles (#514)
* style items and action chat messages * enhance death move chat message and fix border bottom from title actions * fix padding bottom * Added basic chat-message.hbs * . * style remaing chat messages * style action messages * remove console log * add colapsable descriptions in chat messages * inital style for message rolls * fix deal damage button style * add new partchments * Roll Chat message new design template * j * l * p * y * fix _getTags type error and add a alias label for non base messages * Fix damage & healing roll * Fix conflict * Deleting old templates * Good for now * fix labels in duality rolls messages and style experience and effects messages --------- Co-authored-by: WBHarry <williambjrklund@gmail.com> Co-authored-by: Dapoolp <elcatnet@gmail.com>
This commit is contained in:
Murilo Brito
GitHub
parent
a4b1130142
commit
74df2c4e87
72 changed files with 1661 additions and 996 deletions
79
styles/less/global/chat.less
Normal file
79
styles/less/global/chat.less
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
@import '../utils/colors.less';
|
||||
@import '../utils/fonts.less';
|
||||
@import '../utils/mixin.less';
|
||||
|
||||
.theme-light {
|
||||
.daggerheart.chat-sidebar .chat-log,
|
||||
#chat-notifications .chat-log {
|
||||
.chat-message {
|
||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#chat-message {
|
||||
font-family: @font-body;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.daggerheart.chat-sidebar,
|
||||
#chat-notifications {
|
||||
.chat-log {
|
||||
.chat-message {
|
||||
border: none !important;
|
||||
padding: 0;
|
||||
background-image: url('../assets/parchments/dh-parchment-dark.png');
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 8px;
|
||||
|
||||
.message-header-metadata {
|
||||
flex: none;
|
||||
display: flex;
|
||||
|
||||
.message-metadata {
|
||||
font-family: @font-body;
|
||||
color: light-dark(@dark, @beige);
|
||||
}
|
||||
}
|
||||
|
||||
.message-header-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.actor-img {
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.message-sub-header-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
color: light-dark(@dark, @beige);
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0;
|
||||
font-family: @font-subtitle;
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-content {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
80
styles/less/global/dice.less
Normal file
80
styles/less/global/dice.less
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
.dice {
|
||||
position: relative;
|
||||
height: 2rem;
|
||||
aspect-ratio: 1;
|
||||
font-size: 1rem;
|
||||
paint-order: stroke fill;
|
||||
-webkit-text-stroke: 2px black;
|
||||
z-index: 1;
|
||||
|
||||
&.xxs {
|
||||
height: 1rem;
|
||||
font-size: .5rem;
|
||||
-webkit-text-stroke: 1px black;
|
||||
}
|
||||
|
||||
&.xs {
|
||||
height: 1.5rem;
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
&.lg {
|
||||
height: 2.5rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
&.xl {
|
||||
height: 3rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
&.discarded {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
mask: var(--svg-die) no-repeat center;
|
||||
mask-size: contain;
|
||||
background: linear-gradient(139.01deg, #EFE6D8 3.51%, #372E1F 96.49%);
|
||||
}
|
||||
|
||||
&.d4:before {
|
||||
--svg-die: url(../assets/icons/dice/default/d4.svg);
|
||||
}
|
||||
&.d6:before {
|
||||
--svg-die: url(../assets/icons/dice/default/d6.svg);
|
||||
}
|
||||
&.d8:before {
|
||||
--svg-die: url(../assets/icons/dice/default/d8.svg);
|
||||
}
|
||||
&.d10:before {
|
||||
--svg-die: url(../assets/icons/dice/default/d10.svg);
|
||||
}
|
||||
&.d12:before {
|
||||
--svg-die: url('../assets/icons/dice/default/d12.svg');
|
||||
}
|
||||
&.d20:before {
|
||||
--svg-die: url(../assets/icons/dice/default/d20.svg);
|
||||
}
|
||||
|
||||
&.color-hope:before {
|
||||
background: linear-gradient(139.01deg, #F3C267 3.51%, #4C3407 96.49%);
|
||||
}
|
||||
|
||||
&.color-fear:before {
|
||||
background: linear-gradient(151.21deg, #352AB2 7.21%, #18162E 92.79%);
|
||||
}
|
||||
|
||||
&.color-adv:before {
|
||||
background: linear-gradient(139.01deg, #40A640 3.51%, #011B01 96.49%);
|
||||
}
|
||||
|
||||
&.color-dis:before {
|
||||
background: linear-gradient(139.01deg, #E54E4E 3.51%, #3C0000 82.19%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
@import '../utils/colors.less';
|
||||
@import '../utils/fonts.less';
|
||||
|
||||
.application.dh-style {
|
||||
.dh-style {
|
||||
border: 1px solid light-dark(@dark-blue, @golden);
|
||||
|
||||
input[type='text'],
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import './sheet.less';
|
||||
@import './dialog.less';
|
||||
@import './chat.less';
|
||||
@import './elements.less';
|
||||
@import './tab-navigation.less';
|
||||
@import './tab-form-footer.less';
|
||||
|
|
@ -15,3 +16,4 @@
|
|||
@import './prose-mirror.less';
|
||||
@import './filter-menu.less';
|
||||
@import './tab-attachments.less';
|
||||
@import './dice.less';
|
||||
|
|
|
|||
|
|
@ -51,6 +51,10 @@
|
|||
.roll-img {
|
||||
position: absolute;
|
||||
transition: opacity 300ms ease-in;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.roll-img {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue