daggerheart/styles/less/sheets/actors/adversary/sidebar.less
WBHarry 261a3a68b0
[PR] [Feature] Party Sheet (#1230)
* start development

* finish party members tab

* start resources tab

* finish resources tab

* finish inventory tab and add inital template to projects tab

* add resource buttons actions methods

* add group roll dialog

* Main implementation

* Fixed costs

* Minor fixes and tweaks for the party sheet (#1239)

* Minor fixes and tweaks for the party sheet

* Fix scroll restoration for party sheet tabs

* Finished GroupRoll

* Removed/commented-out not yet implemented things

* Commented out Difficulty since it's not used yet

* Re-render party when members update (#1242)

* Fixed so style applies in preview chat message

* Added the clown car

* Fixed so items can be dropped into the Party sheet

* Added delete icon to inventory

* Fixed TokenHUD token property useage. Fixed skipping roll message

* Added visible modifier to GroupRoll leader result

* Leader roll displays the large result display right away after rolling

* Corrected tokenHUD for non-player-tokens

* Fixed clowncar tokenData

* Fixed TagTeam roll message and sound

* Removed final TagTeamRoll roll sound

* [PR] [Party Sheets] Sidebar character sheet changes (#1249)

* Something experimenting

* I am silly (wearning Dunce hat)

* Stressful task

* Armor functional to be hit

* CSS Changes to accomadate pip boy

* last minute change to resource section for better visual feeling

* restoring old css for toggle

* Added setting to toggle pip/number display

* toggle functionality added

* Fixed light-mode in characterSheet

* Fixed multi-row resource pips display for character

* Fixed separators

* Added pip-display to Adversary and Companion. Some fixing on armor display

---------

Co-authored-by: WBHarry <williambjrklund@gmail.com>

* Fixed party height and resource armor update

* Fixed deletebutton padding

* Only showing expand-me icon on InventoryItem if there is a description to show

* .

* Fixed menu icon to be beige instead of white in dark mode

---------

Co-authored-by: moliloo <dev.murilobrito@gmail.com>
Co-authored-by: Carlos Fernandez <CarlosFdez@users.noreply.github.com>
Co-authored-by: Nikhil Nagarajan <potter.nikhil@gmail.com>
2025-11-11 16:02:45 +01:00

382 lines
12 KiB
Text

@import '../../../utils/colors.less';
@import '../../../utils/fonts.less';
@import '../../../utils/mixin.less';
.appTheme({
&.adversary {
.adversary-sidebar-sheet {
background-image: url('../assets/parchments/dh-parchment-dark.png');
}
}
}, {
&.sheet.actor.dh-style.adversary {
.adversary-sidebar-sheet {
background: transparent;
}
.portrait.death-roll .death-roll-btn {
filter: brightness(0) drop-shadow(0 0 3px @dark-blue);
}
}
});
.application.sheet.daggerheart.actor.dh-style.adversary {
.adversary-sidebar-sheet {
width: 275px;
min-width: 275px;
border-right: 1px solid light-dark(@dark-blue, @golden);
.portrait {
position: relative;
border-bottom: 1px solid light-dark(@dark-blue, @golden);
cursor: pointer;
&.death-roll {
img {
filter: grayscale(1);
}
.death-roll-btn {
display: flex;
position: absolute;
top: 30%;
right: 30%;
font-size: 6rem;
color: @beige;
filter: grayscale(1) drop-shadow(0 0 3px black);
&:hover {
text-shadow: 0 0 8px @beige;
}
}
}
img {
height: 275px;
}
.death-roll-btn {
display: none;
}
}
.threshold-section {
position: relative;
display: flex;
gap: 10px;
background-color: light-dark(transparent, @dark-blue);
color: light-dark(@dark-blue, @golden);
padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
align-items: center;
width: fit-content;
height: 30px;
h4 {
font-size: var(--font-size-14);
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
&.threshold-value {
color: light-dark(@dark, @beige);
}
}
.threshold-legend {
position: absolute;
bottom: -21px;
color: light-dark(@golden, @dark-blue);
background-color: light-dark(@dark-blue, @golden);
padding: 3px;
justify-self: anchor-center;
border-radius: 0 0 3px 3px;
text-transform: capitalize;
}
.hope-value {
display: flex;
cursor: pointer;
}
}
.info-section {
position: relative;
display: flex;
flex-direction: column;
top: -20px;
gap: 16px;
margin-bottom: -10px;
&.pip-display {
top: -15px;
.resources-section {
justify-content: space-around;
}
}
.resources-section {
display: flex;
justify-content: space-evenly;
margin-bottom: 16px;
.status-bar {
display: flex;
justify-content: center;
position: relative;
width: 100px;
height: 40px;
.status-label {
position: relative;
top: 40px;
height: 22px;
width: 79px;
clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z');
background: light-dark(@dark-blue, @golden);
h4 {
font-weight: bold;
text-align: center;
line-height: 18px;
color: light-dark(@beige, @dark-blue);
}
}
.status-value {
position: absolute;
display: flex;
padding: 0 6px;
font-size: 1.5rem;
align-items: center;
width: 100px;
height: 40px;
justify-content: center;
text-align: center;
z-index: 2;
color: @beige;
input[type='number'] {
background: transparent;
font-size: 1.5rem;
width: 40px;
height: 30px;
text-align: center;
border: none;
outline: 2px solid transparent;
color: @beige;
&.bar-input {
padding: 0;
color: @beige;
backdrop-filter: none;
background: transparent;
transition: all 0.3s ease;
&:hover,
&:focus {
background: @semi-transparent-dark-blue;
backdrop-filter: blur(9.5px);
}
}
}
.bar-label {
width: 40px;
}
}
.progress-bar {
position: absolute;
appearance: none;
width: 100px;
height: 40px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
z-index: 1;
background: @dark-blue;
&::-webkit-progress-bar {
border: none;
background: @dark-blue;
border-radius: 6px;
}
&::-webkit-progress-value {
background: @gradient-hp;
border-radius: 6px;
}
&.stress-color::-webkit-progress-value {
background: @gradient-stress;
border-radius: 6px;
}
&::-moz-progress-bar {
background: @gradient-hp;
border-radius: 6px;
}
&.stress-color::-moz-progress-bar {
background: @gradient-stress;
border-radius: 6px;
}
}
}
}
.status-section {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
.status-number {
display: flex;
align-items: center;
flex-direction: column;
.status-value {
position: relative;
display: flex;
width: 50px;
height: 30px;
border: 1px solid light-dark(@dark-blue, @golden);
border-bottom: none;
border-radius: 6px 6px 0 0;
padding: 0 6px;
font-size: 1.2rem;
align-items: center;
justify-content: center;
background: light-dark(transparent, @dark-blue);
z-index: 2;
&.armor-slots {
width: 80px;
height: 30px;
}
}
.status-label {
padding: 2px 10px;
width: 100%;
border-radius: 3px;
background: light-dark(@dark-blue, @golden);
h4 {
font-weight: bold;
text-align: center;
line-height: 18px;
font-size: var(--font-size-12);
color: light-dark(@beige, @dark-blue);
}
}
}
}
}
.items-sidebar-list {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 10px;
.inventory-item {
padding-left: 10px;
}
}
.shortcut-items-section {
overflow-y: hidden;
padding-top: 10px;
padding-bottom: 20px;
mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
scrollbar-width: thin;
scrollbar-gutter: stable;
&:hover {
overflow-y: auto;
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
}
}
.attack-section {
.title {
display: flex;
gap: 15px;
align-items: center;
h3 {
font-size: var(--font-size-20);
}
}
.items-list {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
}
.experience-section {
margin-bottom: 20px;
.title {
display: flex;
gap: 15px;
align-items: center;
h3 {
font-size: var(--font-size-20);
}
}
.experience-list {
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
margin-top: 10px;
align-items: center;
.experience-row {
display: flex;
gap: 5px;
width: 250px;
align-items: center;
justify-content: space-between;
.experience-name {
width: 180px;
text-align: start;
font-size: var(--font-size-14);
color: light-dark(@dark, @beige);
}
}
.experience-value {
height: 25px;
width: 35px;
font-size: var(--font-size-14);
color: light-dark(@dark, @beige);
align-content: center;
text-align: center;
background: url(../assets/svg/experience-shield.svg) no-repeat;
.theme-light & {
background: url('../assets/svg/experience-shield-light.svg') no-repeat;
}
}
}
}
.reaction-section {
display: flex;
padding: 0 10px;
margin-top: 20px;
width: 100%;
button {
height: 40px;
width: 100%;
font-weight: 600;
}
}
}
}