Styling pass for scrollbars, fieldsets, and scroll shadows

This commit is contained in:
Carlos Fernandez 2026-05-29 05:41:22 -04:00
parent ddf4747310
commit 6ee4515c4a
42 changed files with 346 additions and 207 deletions

View file

@ -1,15 +0,0 @@
@import '../../../utils/colors.less';
@import '../../../utils/fonts.less';
.application.sheet.daggerheart.actor.dh-style.adversary {
.tab.features {
.feature-section {
display: flex;
flex-direction: column;
gap: 10px;
overflow-y: auto;
mask-image: linear-gradient(0deg, transparent 0%, black 5%);
padding-bottom: 20px;
}
}
}

View file

@ -1,4 +1,5 @@
@import '../../../utils/colors.less';
@import '../../../utils/mixin.less';
.application.sheet.daggerheart.actor.dh-style.adversary {
.tab.effects {
@ -7,8 +8,9 @@
flex-direction: column;
gap: 10px;
overflow-y: auto;
mask-image: linear-gradient(0deg, transparent 0%, black 5%);
padding-bottom: 20px;
scrollbar-gutter: stable;
padding-bottom: 4px;
.with-scroll-shadows();
}
}
}

View file

@ -0,0 +1,29 @@
@import '../../../utils/colors.less';
@import '../../../utils/fonts.less';
@import '../../../utils/mixin.less';
.application.sheet.daggerheart.actor.dh-style.adversary {
.tab.features.active {
position: relative;
padding-left: 15px;
.feature-section {
display: flex;
flex-direction: column;
gap: 10px;
padding: 6px 2px 4px 0;
overflow-y: auto;
scrollbar-gutter: stable;
.with-scroll-shadows();
}
> button {
--button-size: 1.75rem;
width: 1.75rem;
position: absolute;
inset: auto 16px 0 auto;
box-shadow: 0 0 5px @light-black;
}
&:has(> button) .feature-section {
padding-bottom: calc(1px + 1.75rem);
}
}
}

View file

@ -71,7 +71,10 @@
.adversary-navigation {
display: flex;
gap: 8px;
align-items: center;
align-items: baseline;
.tab-navigation {
margin-top: 0;
}
}
}
}

View file

@ -0,0 +1,6 @@
@import './sheet.less';
@import './features.less';
@import './header.less';
@import './sidebar.less';
@import './effects.less';
@import './notes.less';

View file

@ -0,0 +1,11 @@
@import '../../../utils/mixin.less';
.application.sheet.daggerheart.actor.dh-style.adversary {
.tab.notes {
padding: 6px 0 4px 15px;
.editor-content {
scrollbar-gutter: stable;
.with-scroll-shadows();
}
}
}

View file

@ -9,28 +9,31 @@
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;
}
padding-right: 0;
margin-right: 2px;
margin-bottom: 16px;
}
}
}

View file

@ -286,9 +286,8 @@
overflow-y: hidden;
padding-top: 10px;
padding-bottom: 20px;
mask-image: linear-gradient(0deg, transparent 0%, black 5%, black 95%, transparent 100%);
scrollbar-gutter: stable;
.with-scroll-shadows();
&:hover {
overflow-y: auto;