cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-01-12 03:31:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Css cleanup. Added styling for tagify dropdown

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

1
daggerheart.mjs
View file

@ -284,7 +284,6 @@ const preloadHandlebarsTemplates = async function () {
'systems/daggerheart/templates/sheets/pc/parts/heritageCard.hbs',
'systems/daggerheart/templates/sheets/pc/parts/advancementCard.hbs',
'systems/daggerheart/templates/views/parts/level.hbs',
'systems/daggerheart/templates/components/slider.hbs',
'systems/daggerheart/templates/sheets/global/partials/feature-section-item.hbs'
]);
};

2
module/helpers/utils.mjs
View file

@ -1,4 +1,4 @@
import { diceSoNicePresets, getDiceSoNicePresets } from '../config/generalConfig.mjs';
import { getDiceSoNicePresets } from '../config/generalConfig.mjs';
export const loadCompendiumOptions = async compendiums => {
const compendiumValues = [];

45
styles/components.less
View file

@ -1,45 +0,0 @@
.slider-container {
position: relative;
background: lightslategray;
.slider-inner-container {
position: absolute;
top: 1px;
left: -60px;
background-color: inherit;
color: inherit;
border-radius: 30px;
cursor: pointer;
display: flex;
align-items: center;
height: 20px;
width: 40px;
padding: 0 4px;
border: @thinBorder solid black;
&:hover {
filter: drop-shadow(0 0 3px red);
}
input:checked {
opacity: 0;
width: 0;
height: 0;
& + .slider-icon {
transform: translateX(17px);
transition: 1s;
}
}
.slider-icon {
position: absolute;
left: 4px;
height: 15px;
width: 15px;
border-radius: 50%;
transition: 1s;
transform: translateX(0);
}
}
}

103
styles/daggerheart.css
View file

@ -2704,46 +2704,6 @@ div.daggerheart.views.multiclass {
background: inherit;
border: 0;
}
.slider-container {
position: relative;
background: lightslategray;
}
.slider-container .slider-inner-container {
position: absolute;
top: 1px;
left: -60px;
background-color: inherit;
color: inherit;
border-radius: 30px;
cursor: pointer;
display: flex;
align-items: center;
height: 20px;
width: 40px;
padding: 0 4px;
border: 1px solid black;
}
.slider-container .slider-inner-container:hover {
filter: drop-shadow(0 0 3px red);
}
.slider-container .slider-inner-container input:checked {
opacity: 0;
width: 0;
height: 0;
}
.slider-container .slider-inner-container input:checked + .slider-icon {
transform: translateX(17px);
transition: 1s;
}
.slider-container .slider-inner-container .slider-icon {
position: absolute;
left: 4px;
height: 15px;
width: 15px;
border-radius: 50%;
transition: 1s;
transform: translateX(0);
}
.item-button.checked {
background: green;
}
@ -2773,27 +2733,6 @@ div.daggerheart.views.multiclass {
scrollbar-width: thin;
scrollbar-color: light-dark(#18162e, #f3c267) transparent;
}
.application.sheet.daggerheart.dh-style.class .tagify {
background: light-dark(transparent, transparent);
border: 1px solid light-dark(#222, #efe6d8);
height: 34px;
border-radius: 3px;
margin-right: 1px;
}
.application.sheet.daggerheart.dh-style.class .tagify tag div {
display: flex;
justify-content: space-between;
align-items: center;
height: 22px;
}
.application.sheet.daggerheart.dh-style.class .tagify tag div span {
font-weight: 400;
}
.application.sheet.daggerheart.dh-style.class .tagify tag div img {
margin-left: 8px;
height: 20px;
width: 20px;
}
.application.sheet.daggerheart.dh-style.class .tab.settings .fieldsets-section {
display: grid;
gap: 10px;
@ -3134,6 +3073,48 @@ div.daggerheart.views.multiclass {
.application.setting.dh-style footer button {
flex: 1;
}
.system-daggerheart .tagify {
background: light-dark(transparent, transparent);
border: 1px solid light-dark(#222, #efe6d8);
height: 34px;
border-radius: 3px;
margin-right: 1px;
}
.system-daggerheart .tagify tag div {
display: flex;
justify-content: space-between;
align-items: center;
height: 22px;
}
.system-daggerheart .tagify tag div span {
font-weight: 400;
}
.system-daggerheart .tagify tag div img {
margin-left: 8px;
height: 20px;
width: 20px;
}
.system-daggerheart .tagify__dropdown {
border: 1px solid light-dark(#222, #efe6d8) !important;
}
.system-daggerheart .tagify__dropdown .tagify__dropdown__wrapper {
background-image: url(../assets/parchments/dh-parchment-dark.png);
background-color: transparent;
border: 0;
}
.system-daggerheart .tagify__dropdown .tagify__dropdown__wrapper .tagify__dropdown__item--active {
background-color: light-dark(#222, #efe6d8);
color: var(--color-dark-3);
}
.system-daggerheart.theme-light .tagify__dropdown {
color: black;
}
.system-daggerheart.theme-light .tagify__dropdown .tagify__dropdown__wrapper {
background-image: url(../assets/parchments/dh-parchment-light.png);
}
.system-daggerheart.theme-light .tagify__dropdown .tagify__dropdown__item--active {
color: #efe6d8;
}
.sheet.daggerheart.dh-style .tab-navigation {
margin: 5px 0;
height: 40px;

11
styles/daggerheart.less
View file

@ -6,8 +6,7 @@
@import './chat.less';
@import './item.less';
@import './application.less';
@import './sheets//sheets.less';
@import './components.less';
@import './sheets/sheets.less';
@import './dialog.less';
@import '../node_modules/@yaireo/tagify/dist/tagify.css';
@ -96,14 +95,6 @@
cursor: pointer;
}
}
// .window-content {
// background: crimson;
// > form, >div {
// background: url(../ui/parchment.jpg) repeat;
// }
// }
}
#players {

59
styles/less/global/elements.less
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;
}
}
}
}

120
styles/less/items/class.less
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;
}
}
}
}
}
}

65
styles/sheets/class.css
View file

@ -1,65 +0,0 @@
.daggerheart.sheet.class .guide .drop-section {
width: 100%;
}
.daggerheart.sheet.class .guide .drop-section legend {
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
.daggerheart.sheet.class .guide .drop-section .drop-section-body {
min-height: 40px;
display: flex;
flex-direction: column;
align-items: center;
}
.daggerheart.sheet.class .guide .trait-input {
text-align: center;
min-width: 24px;
}
.daggerheart.sheet.class .guide .suggested-item {
border-radius: 6px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.daggerheart.sheet.class .guide .suggested-item img {
width: 30px;
}
.daggerheart.sheet.class .guide .suggested-item div {
text-align: center;
}
.daggerheart.sheet.class .guide .suggested-item i {
border-radius: 50%;
margin-right: 4px;
font-size: 11px;
}
.daggerheart.sheet.class .guide .extra-section {
display: flex;
flex-direction: column;
align-items: center;
}
.daggerheart.sheet.class .guide .extra-section .extra-title {
font-size: 14px;
font-weight: bold;
}
.daggerheart.sheet.class .guide-section-title-centered {
font-weight: bold;
font-size: 18px;
}
.daggerheart.sheet.class .inventory-section {
width: 100%;
border: 2px solid black;
border-style: dotted;
min-height: 80px;
}
.daggerheart.sheet.class .inventory-section .inventory-title {
font-weight: bold;
font-size: 14px;
text-align: center;
}
.daggerheart.sheet.class .domain-section {
display: flex;
align-items: center;
gap: 5px;
}

65
styles/sheets/class.less Normal file
View file

@ -0,0 +1,65 @@
.daggerheart.sheet.class .guide .drop-section {
width: 100%;
}
.daggerheart.sheet.class .guide .drop-section legend {
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
.daggerheart.sheet.class .guide .drop-section .drop-section-body {
min-height: 40px;
display: flex;
flex-direction: column;
align-items: center;
}
.daggerheart.sheet.class .guide .trait-input {
text-align: center;
min-width: 24px;
}
.daggerheart.sheet.class .guide .suggested-item {
border-radius: 6px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.daggerheart.sheet.class .guide .suggested-item img {
width: 30px;
}
.daggerheart.sheet.class .guide .suggested-item div {
text-align: center;
}
.daggerheart.sheet.class .guide .suggested-item i {
border-radius: 50%;
margin-right: 4px;
font-size: 11px;
}
.daggerheart.sheet.class .guide .extra-section {
display: flex;
flex-direction: column;
align-items: center;
}
.daggerheart.sheet.class .guide .extra-section .extra-title {
font-size: 14px;
font-weight: bold;
}
.daggerheart.sheet.class .guide-section-title-centered {
font-weight: bold;
font-size: 18px;
}
.daggerheart.sheet.class .inventory-section {
width: 100%;
border: 2px solid black;
border-style: dotted;
min-height: 80px;
}
.daggerheart.sheet.class .inventory-section .inventory-title {
font-weight: bold;
font-size: 14px;
text-align: center;
}
.daggerheart.sheet.class .domain-section {
display: flex;
align-items: center;
gap: 5px;
}

5
templates/components/slider.hbs
View file

@ -1,5 +0,0 @@
<div class="slider-container">
<div data-action="toggleSlider" class="slider-inner-container">
<i class="fa-solid fa-wrench slider-icon {{#if this.editMode}}editMode{{/if}}"></i>
</div>
</div>