mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-07-22 02:19:54 +02:00
[UI/UX] Reduce width of adversary sidebar (#2055)
* Reduce width of adversary sidebar * Fix pips
This commit is contained in:
parent
c25c4d63f7
commit
489f62a379
6 changed files with 136 additions and 138 deletions
|
|
@ -59,7 +59,6 @@
|
|||
.slot-value {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 5px;
|
||||
font-size: 1.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
@import './sheet.less';
|
||||
@import './features.less';
|
||||
@import './header.less';
|
||||
@import './sheet.less';
|
||||
@import './sidebar.less';
|
||||
@import './effects.less';
|
||||
@import './notes.less';
|
||||
|
||||
|
|
|
|||
|
|
@ -2,35 +2,37 @@
|
|||
@import '../../../utils/fonts.less';
|
||||
|
||||
.application.sheet.daggerheart.actor.dh-style.adversary {
|
||||
--sidebar-width: 260px;
|
||||
|
||||
.window-content {
|
||||
display: grid;
|
||||
grid-template-columns: 275px 1fr;
|
||||
grid-template-columns: var(--sidebar-width) 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.adversary-sidebar-sheet {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 1;
|
||||
.adversary-sidebar-sheet {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.adversary-header-sheet {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.tab {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
&.active {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.adversary-header-sheet {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.tab {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
&.active {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -22,8 +22,8 @@
|
|||
|
||||
.application.sheet.daggerheart.actor.dh-style.adversary {
|
||||
.adversary-sidebar-sheet {
|
||||
width: 275px;
|
||||
min-width: 275px;
|
||||
width: var(--sidebar-width);
|
||||
min-width: var(--sidebar-width);
|
||||
border-right: 1px solid light-dark(@dark-blue, @golden);
|
||||
|
||||
.portrait {
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
}
|
||||
|
||||
img {
|
||||
height: 275px;
|
||||
height: var(--sidebar-width);
|
||||
}
|
||||
|
||||
.death-roll-btn {
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
.threshold-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: 7px;
|
||||
background-color: light-dark(transparent, @dark-blue);
|
||||
color: @color-text-emphatic;
|
||||
padding: 5px 10px;
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
flex-direction: column;
|
||||
top: -20px;
|
||||
gap: 10px;
|
||||
margin-bottom: -10px;
|
||||
margin-bottom: -16px;
|
||||
|
||||
&.pip-display {
|
||||
top: -15px;
|
||||
|
|
@ -185,8 +185,8 @@
|
|||
|
||||
.shortcut-items-section {
|
||||
overflow-y: hidden;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
padding: 10px 0;
|
||||
flex: 1;
|
||||
scrollbar-gutter: stable;
|
||||
.with-scroll-shadows();
|
||||
|
||||
|
|
@ -214,8 +214,6 @@
|
|||
}
|
||||
|
||||
.experience-section {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
|
|
@ -232,21 +230,21 @@
|
|||
gap: 5px;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
padding: 0 4px 0 12px;
|
||||
|
||||
.experience-row {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
width: 250px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.experience-name {
|
||||
width: 180px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: start;
|
||||
font-size: var(--font-size-14);
|
||||
flex: 1;
|
||||
color: light-dark(@dark, @beige);
|
||||
line-height: 1;
|
||||
}
|
||||
|
|
@ -271,9 +269,7 @@
|
|||
|
||||
.reaction-section {
|
||||
display: flex;
|
||||
padding: 0 10px;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
margin: 10px;
|
||||
|
||||
button {
|
||||
height: 40px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue