macniel
/
foundry-dsa41-game
2
1
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects 1 Releases 19 Wiki Activity

implements colorful sidebar buttons

pull/65/head
macniel 2025-11-16 11:03:50 +01:00
parent 189db593aa
commit 46b6ed8f2a
7 changed files with 93 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/module/sheets/characterSheet.mjs
View File

@ -96,7 +96,8 @@ class CharacterSheet extends HandlebarsApplicationMixin(ActorSheetV2) {
scrollable: ['.inventory']
},
skills: {
template: Skills.template
template: Skills.template,
scrollable: ['.tab.skills']
},
spells: {
template: Spells.template
@ -564,6 +565,7 @@ class CharacterSheet extends HandlebarsApplicationMixin(ActorSheetV2) {
obj.fav = item.getFlag("DSA_4-1", "favourite")
obj.id = id
obj.group = item.system.gruppe ?? null
if (t) {
obj.template = t

31
src/style/atoms/_buttons.scss
View File

@ -24,4 +24,35 @@
@include colours.highlight;
}
}
@mixin pill-button($color:false, $button-color: #F80) {
background-image: url("/systems/DSA_4-1/assets/velvet_button.png");
background-color: $color;
background-repeat: repeat-y;
background-size: cover;
@if $color {
background-blend-mode: overlay;
}
border-color: $button-color;
border-width: 1px;
border-style: solid;
border-radius: 8px;
box-shadow: 2px 2px 4px #000;
color: $button-color;
cursor: pointer;
display: inline-block;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
padding: 0 8px;
height: 28px;
line-height: 28px;
vertical-align: middle;
}
@mixin mini-button($color:false, $button-color: #F80) {
@include pill-button($color, $button-color);
width: 100%;
border-radius: 2px;
height: 24px;
line-height: 24px;
}

7
src/style/atoms/_typography.scss
View File

@ -25,15 +25,20 @@
input,
.cooldown > span,
.mini-skill, .mini-weaponskill, .mini-language-skill,
.attribute.rollable > .name,
.attribute.rollable > .wert {
font-family: Andalus, sans-serif;
}
.mini-skill, .mini-weaponskill, .mini-language-skill, .mini-liturgy, .mini-spell,
.editor.prosemirror.active, .editor.prosemirror.inactive {
font-family: Gentium, sans-serif;
}
.mini-skill, .mini-weaponskill, .mini-language-skill, .mini-liturgy, .mini-spell {
font-weight: bold;
text-transform: capitalize;
}
}

71
src/style/molecules/_sidebar-elements.scss
View File

@ -1,5 +1,6 @@
@use "../atoms/colours" as colors;
@use "sass:color";
@use "../atoms/buttons";
.dsa41.sheet.actor.character {
@ -110,9 +111,7 @@
cursor: pointer;
}
&:hover {
text-shadow: 0 0 2px rgba(255, 0, 0, 1);
}
@include colors.highlight;
}
.pa {
@ -124,9 +123,7 @@
cursor: pointer;
}
&:hover {
text-shadow: 0 0 2px rgba(255, 0, 0, 1);
}
@include colors.highlight;
}
.ini {
@ -137,9 +134,7 @@
cursor: pointer;
}
&:hover {
text-shadow: 0 0 2px rgba(255, 0, 0, 1);
}
@include colors.highlight;
}
.tp {
@ -150,10 +145,7 @@
cursor: pointer;
}
&:hover {
text-shadow: 0 0 2px rgba(255, 0, 0, 1);
}
@include colors.highlight;
}
}
@ -164,22 +156,47 @@
margin: 8px 0;
}
.mini-skill, .mini-weaponskill, .mini-language-skill {
background-image: url("/systems/DSA_4-1/assets/velvet_button.png");
background-repeat: repeat-y;
background-size: cover;
border: 1px outset #ccc;
color: white;
border-radius: 4px;
padding: 0 8px;
.mini-skill, .mini-weaponskill, .mini-language-skill, .mini-spell, .mini-liturgy {
margin-bottom: 4px;
cursor: pointer;
&:hover {
text-shadow: 0 0 2px rgba(255, 0, 0, 1);
}
@include colors.highlight;
}
.mini-skill.Körperlich {
@include buttons.mini-button($color: color.scale(colors.$talent-body-color, $lightness: -50%), $button-color: gold);
}
.mini-skill.Gesellschaft {
@include buttons.mini-button($color: color.scale(colors.$talent-social-color, $lightness: -50%), $button-color: gold);
}
.mini-skill.Natur {
@include buttons.mini-button($color: color.scale(colors.$talent-nature-color, $lightness: -50%), $button-color: gold);
}
.mini-skill.Wissen {
@include buttons.mini-button($color: color.scale(colors.$talent-knowledge-color, $lightness: -50%), $button-color: gold);
}
.mini-skill.Handwerk {
@include buttons.mini-button($color: color.scale(colors.$talent-crafting-color, $lightness: -50%), $button-color: gold);
}
.mini-weaponskill {
@include buttons.mini-button($color: color.scale(colors.$kampftalent-color, $lightness: -50%), $button-color: gold);
}
.mini-language-skill {
@include buttons.mini-button($color: color.scale(colors.$talent-language-color, $lightness: -50%), $button-color: gold);
}
.mini-spell {
@include buttons.mini-button($color: colors.$zauber-color, $button-color: gold);
}
.mini-liturgy {
@include buttons.mini-button($color: colors.$liturgie-color, $button-color: gold);
}
}

3
src/style/organisms/_character-sheet.scss
View File

@ -9,6 +9,7 @@
@use "./character-tabs/spells";
@use "./character-tabs/liturgies";
@use "./character-tabs/skills";
@use "../atoms/buttons";
.application.sheet.dsa41.actor.character {
@ -39,7 +40,7 @@
.rkp {
.pill {
cursor: pointer;
@include buttons.pill-button;
}
}

39
src/style/organisms/character-tabs/_advsf.scss
View File

@ -1,3 +1,5 @@
@use "../../atoms/buttons";
@mixin tab($darkmode: false) {
.advantages-and-specialabilities {
@ -21,19 +23,9 @@
.advantage, .special-ability, .flaw {
position: relative;
border: 1px solid gold;
box-shadow: 2px 2px 4px #000;
border-radius: 8px;
height: 24px;
color: gold;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
display: inline-block;
padding: 0 8px;
margin-left: 0;
margin-bottom: 4px;
background-image: url("/systems/DSA_4-1/assets/velvet_button.png");
background-repeat: repeat-y;
background-size: cover;
@include buttons.pill-button($color: rgb(0, 128, 0), $button-color: gold);
span {
position: relative;
@ -43,20 +35,7 @@
}
&.special-ability {
&::after {
background: rgba(128, 0, 96, 0.5);
}
}
&::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 8px;
background: rgba(0, 128, 0, 0.5);
@include buttons.pill-button($color: rgb(128, 0, 96), $button-color: gold);
}
& + .advantage, & + .special-ability {
@ -80,18 +59,12 @@
width: 24px;
}
&::after {
background: rgba(106, 36, 216, 0.5);
}
@include buttons.pill-button($color: rgb(106, 36, 216), $button-color: gold);
}
&.disadvantage {
font-style: italic;
&::after {
background: rgba(128, 0, 0, 0.5);
}
@include buttons.pill-button($color: rgb(128, 0, 0), $button-color: gold);
}
}
}

2
src/templates/ui/partial-mini-rollable-button.hbs
View File

@ -1,3 +1,3 @@
<div class="mini-skill" data-action="rollSkill" data-id="{{this.id}}">
<div class="mini-skill {{this.group}}" data-action="rollSkill" data-id="{{this.id}}">
{{this.name}}
</div>