Css cleanup. Added styling for tagify dropdown

This commit is contained in:
WBHarry 2025-05-30 15:50:43 +02:00
parent 128178847b
commit 407b70b662
10 changed files with 214 additions and 262 deletions

View file

@ -213,3 +213,62 @@
}
}
}
.system-daggerheart {
.tagify {
background: light-dark(transparent, transparent);
border: 1px solid light-dark(@dark, @beige);
height: 34px;
border-radius: 3px;
margin-right: 1px;
tag {
div {
display: flex;
justify-content: space-between;
align-items: center;
height: 22px;
span {
font-weight: 400;
}
img {
margin-left: 8px;
height: 20px;
width: 20px;
}
}
}
}
.tagify__dropdown {
border: 1px solid light-dark(@dark, @beige) !important;
.tagify__dropdown__wrapper {
background-image: url(../assets/parchments/dh-parchment-dark.png);
background-color: transparent;
border: 0;
.tagify__dropdown__item--active {
background-color: light-dark(@dark, @beige);
color: var(--color-dark-3);
}
}
}
&.theme-light {
.tagify__dropdown {
color: black;
.tagify__dropdown__wrapper {
background-image: url(../assets/parchments/dh-parchment-light.png);
}
.tagify__dropdown__item--active {
color: @beige;
}
}
}
}

View file

@ -1,74 +1,46 @@
@import '../utils/colors.less';
@import '../utils/fonts.less';
.application.sheet.daggerheart.dh-style.class {
.tagify {
background: light-dark(transparent, transparent);
border: 1px solid light-dark(@dark, @beige);
height: 34px;
border-radius: 3px;
margin-right: 1px;
tag {
div {
display: flex;
justify-content: space-between;
align-items: center;
height: 22px;
span {
font-weight: 400;
}
img {
margin-left: 8px;
height: 20px;
width: 20px;
}
}
}
}
.tab.settings {
.fieldsets-section {
display: grid;
gap: 10px;
grid-template-columns: 1fr 1.5fr 1.5fr;
}
.list-items {
margin-bottom: 10px;
width: 100%;
&:last-child {
margin-bottom: 0px;
}
.item-line {
display: grid;
align-items: center;
gap: 10px;
grid-template-columns: 1fr 3fr 1fr;
h4 {
font-family: @font-body;
font-weight: lighter;
color: light-dark(@dark, @beige);
}
.image {
height: 40px;
width: 40px;
object-fit: cover;
border-radius: 6px;
border: none;
}
.controls {
display: flex;
justify-content: center;
gap: 10px;
a {
text-shadow: none;
}
}
}
}
}
}
@import '../utils/colors.less';
@import '../utils/fonts.less';
.application.sheet.daggerheart.dh-style.class {
.tab.settings {
.fieldsets-section {
display: grid;
gap: 10px;
grid-template-columns: 1fr 1.5fr 1.5fr;
}
.list-items {
margin-bottom: 10px;
width: 100%;
&:last-child {
margin-bottom: 0px;
}
.item-line {
display: grid;
align-items: center;
gap: 10px;
grid-template-columns: 1fr 3fr 1fr;
h4 {
font-family: @font-body;
font-weight: lighter;
color: light-dark(@dark, @beige);
}
.image {
height: 40px;
width: 40px;
object-fit: cover;
border-radius: 6px;
border: none;
}
.controls {
display: flex;
justify-content: center;
gap: 10px;
a {
text-shadow: none;
}
}
}
}
}
}