Foundry/.dungeon
0
0
Fork 0
Code Issues 57 Pull requests Projects Releases 7 Packages Wiki Activity Actions

Begin working on a scoped CSS solution that uses a common design language across all sheets, and *just* does sheet-specific layout tasks

Browse source
This commit is contained in:
Oliver-Akins 2024-03-26 22:36:40 -06:00
parent 5c5a1a8b56
commit eadaa53c75
32 changed files with 314 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

4
styles/dialog/DiceList.scss
View file

@ -1,9 +1,9 @@
.dotdungeon:has(.dialog--dice-list) {
.dotdungeon:not(.style-v3):has(.dialog--dice-list) {
max-width: 275px;
min-width: 275px;
}
.dotdungeon .dialog--dice-list {
.dotdungeon:not(.style-v3) .dialog--dice-list {
padding: 8px;
.dice {

6
styles/generic.scss
View file

@ -8,7 +8,7 @@
Enabling scrollbar customization on a per-sheet basis, with a relatively low
specificity to allow easier overriding without artificially increasing it.
*/
.dotdungeon {
.dotdungeon:not(.style-v3) {
--scrollbar-width: 5px;
--scrollbar-handle-color: #782e22;
--scrollbar-handle-border-color: var(--color-border-highlight);
@ -24,7 +24,7 @@ specificity to allow easier overriding without artificially increasing it.
}
// Reset the parts of Foundry's styling which gets in the way of what I want
.dotdungeon > .window-content {
.dotdungeon:not(.style-v3) > .window-content {
h2, h3, h4, h5, h6 {
@include fvtt_reset;
@ -74,7 +74,7 @@ specificity to allow easier overriding without artificially increasing it.
}
// Styling that doesn't belong to any particular part of my sheet
.dotdungeon.dotdungeon.dotdungeon.dotdungeon {
.dotdungeon.dotdungeon.dotdungeon.dotdungeon:not(.style-v3) {
container-type: size;
> .window-content {

2
styles/global/buttons.scss
View file

@ -2,7 +2,7 @@
@use "sass:color" as color;
.dotdungeon.dotdungeon > .window-content {
.dotdungeon.dotdungeon:not(.style-v3) > .window-content {
button {
border-radius: 4px;
box-sizing: border-box;

4
styles/global/design-v2.scss
View file

@ -1,5 +1,5 @@
.item--custom,
.actor--mob {
.item--custom:not(.style-v3),
.actor--mob:not(.style-v3) {
input {
border: 2px solid black;
background: none;

4
styles/global/icons.scss
View file

@ -1,6 +1,6 @@
$iconSizes: 12, 14, 16, 18, 20, 22, 24;
.dotdungeon.dotdungeon.dotdungeon.dotdungeon {
.dotdungeon.dotdungeon.dotdungeon.dotdungeon:not(.style-v3) {
.icon {
display: inline-flex;
justify-content: center;
@ -14,4 +14,4 @@ $iconSizes: 12, 14, 16, 18, 20, 22, 24;
};
}
}
}
}

6
styles/root.scss
View file

@ -21,4 +21,8 @@
@use "./sheets/items/custom.scss";
@use "./sheets/items/aspect.scss";
@use "./sheets/items/spell.scss";
@use "./sheets/items/pet.scss";
@use "./sheets/items/pet.scss";
/* NEW BETTER SCOPED CSS ONLY BELOW HERE */
@use "./v3/index.scss";

2
styles/sheets/actor/mob/mob.scss
View file

@ -1,7 +1,7 @@
@use "../../../vars" as *;
@use "avatar" as *;
.dotdungeon .actor--mob {
.dotdungeon:not(.style-v3) .actor--mob {
--gap: 8px;
--avatar-size: 100px;
--row-height: calc((var(--avatar-size) - var(--gap)) / 2);

123
styles/sheets/actor/mob/v2.scss Normal file
View file

@ -0,0 +1,123 @@
@use "../../../vars" as *;
@use "avatar" as *;
.dotdungeon:not(.style-v3) .actor--mob2 {
--gap: 8px;
--avatar-size: 100px;
--row-height: calc((var(--avatar-size) - var(--gap)) / 2);
padding: var(--gap);
display: grid;
grid-template-columns: var(--avatar-size) repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(5, var(--row-height)) minmax(var(--row-height), 1fr);
gap: var(--gap);
grid-template-areas:
"avatar . ."
"avatar . ."
"dice tabs tabs"
"dice tabs tabs"
"dice tabs tabs"
"dice tabs tabs";
label, .dice {
border: 2px solid black;
border-radius: 4px;
gap: 4px;
padding: 4px;
}
input.masked {
border: 2px solid black;
background: none;
box-shadow: none;
&:focus {
transform: scale(102%);
}
}
label.mask-input {
display: flex;
flex-direction: row;
align-items: center;
transition: all ease-in-out 50ms;
&:focus-within {
transform: scale(102%);
}
input {
text-align: right;
border: none;
background: none;
border-radius: 0;
border-bottom: 1px solid black;
&:focus, &:focus-visible {
box-shadow: none;
}
}
input.left {
text-align: left;
}
}
.wide {
grid-column: span 2;
}
.mask-textarea {
display: flex;
flex-direction: column;
transition: all ease-in-out 50ms;
&:focus-within {
transform: scale(102%);
}
textarea {
flex-grow: 1;
resize: none;
border: none;
box-shadow: none;
background: none;
}
}
.name {
height: 100%;
font-size: 1.5rem;
input {
height: 100%;
}
}
.dice {
grid-area: dice;
display: flex;
flex-direction: column;
.die {
display: flex;
flex-direction: row;
width: 100%;
border: 2px solid black;
border-radius: 4px;
.formula {
flex-grow: 1;
align-self: center;
}
}
}
.tabs { grid-area: tabs; }
.stunts {
grid-area: stunts;
}
.description {
grid-area: description;
}
.avatar {
@include avatar;
border-radius: 4px;
}
}

6
styles/sheets/actor/mvp.scss
View file

@ -1,7 +1,7 @@
@use "../../vars.scss" as *;
@use "../../mixins/breakpoints" as *;
.dotdungeon .actor--pc-mvp {
.dotdungeon:not(.style-v3) .actor--pc-mvp {
display: grid;
grid-template-areas:
"profile stats stats"
@ -270,7 +270,7 @@
@include bp-m {
.dotdungeon {
.dotdungeon:not(.style-v3) {
.actor--pc-mvp {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(15, min-content);
@ -310,7 +310,7 @@
}
@include bp-s {
.dotdungeon {
.dotdungeon:not(.style-v3) {
.actor--pc-mvp {
grid-template-columns: 1fr;
grid-template-rows: repeat(12, min-content);

4
styles/sheets/actor/sync/basic.scss
View file

@ -1,6 +1,6 @@
@use "../../../mixins/breakpoints" as *;
.dotdungeon {
:not(.style-v3).dotdungeon {
.actor--basic-sync {
display: flex;
justify-content: center;
@ -52,7 +52,7 @@
}
@include bp-xs {
.dotdungeon {
:not(.style-v3).dotdungeon {
&--sync-sheet {
header {
.configure-sheet {

2
styles/sheets/items/aspect.scss
View file

@ -1,6 +1,6 @@
@use "../../vars" as *;
.dotdungeon .item--aspect {
.dotdungeon:not(.style-v3) .item--aspect {
padding: 4px;
input[type=text] {

2
styles/sheets/items/custom.scss
View file

@ -1,4 +1,4 @@
.item--custom {
.item--custom:not(.style-v3) {
padding: 8px;
display: grid;
grid-template-columns: 1fr 1fr;

2
styles/sheets/items/pet.scss
View file

@ -1,6 +1,6 @@
@use "../../vars" as *;
.dotdungeon .item--pet {
.dotdungeon:not(.style-v3) .item--pet {
padding: 4px;
input[type=text] {

2
styles/sheets/items/spell.scss
View file

@ -1,6 +1,6 @@
@use "../../vars" as *;
.dotdungeon .item--spell {
.dotdungeon:not(.style-v3) .item--spell {
padding: 4px;
input[type=text] {

4
styles/sheets/partials/panel.scss
View file

@ -2,7 +2,7 @@
@use "../../mixins/foundry" as *;
@use "../../vars" as *;
.dotdungeon .actor--pc-mvp .panel {
.dotdungeon:not(.style-v3) .actor--pc-mvp .panel {
display: grid;
grid-template-rows: min-content 1fr;
@ -39,7 +39,7 @@
}
@include bp-s {
.dotdungeon .panel__header .icon {
.dotdungeon:not(.style-v3) .panel__header .icon {
display: none;
visibility: hidden;
}

2
styles/sheets/partials/skill.scss
View file

@ -1,4 +1,4 @@
.dotdungeon .skill {
.dotdungeon:not(.style-v3) .skill {
display: flex;
flex-direction: row;
justify-content: center;

2
styles/sheets/partials/stat.scss
View file

@ -1,4 +1,4 @@
.dotdungeon .actor--pc-mvp .stat {
.dotdungeon:not(.style-v3) .actor--pc-mvp .stat {
display: flex;
flex-direction: column;
align-items: center;

43
styles/v3/elements/button.scss Normal file
View file

@ -0,0 +1,43 @@
@use "../mixins/material" as material;
.dotdungeon.style-v3 > .window-content button {
@include material.elevate(2);
align-items: center;
border-radius: 4px;
border: none;
box-sizing: border-box;
color: inherit;
cursor: pointer;
display: inline-flex;
font-family: sans-serif;
gap: 4px;
justify-content: center;
margin: 0;
outline: none;
padding: 4px 8px;
transition: all 400ms ease-in-out;
width: initial;
&:hover, &:focus-visible {
@include material.elevate(4);
}
&:active {
@include material.elevate(6);
}
&:disabled {
opacity: 50%;
cursor: default;
}
/* Icon buttons don't use Material styling */
&.icon {
@include material.undo;
padding: 4px;
&:focus-visible {
@include material.undo;
// TODO : Accessible focus state
}
}
}

7
styles/v3/elements/headers.scss Normal file
View file

@ -0,0 +1,7 @@
.dotdungeon.style-v3 > .window-content {
h1, h2, h3, h4, h5, h6 {
border: none;
font-size: 1rem;
margin: 0;
}
}

6
styles/v3/elements/hr.scss Normal file
View file

@ -0,0 +1,6 @@
.dotdungeon.style-v3 > .window-content hr {
border-color: black;
opacity: 25%;
width: 100%;
grid-column: 1 / -1;
}

17
styles/v3/elements/icons.scss Normal file
View file

@ -0,0 +1,17 @@
$iconSizes: 12, 14, 16, 18, 20, 22, 24;
.dotdungeon.style-v3 > .window-content {
.icon {
display: inline-flex;
justify-content: center;
align-items: center;
// The various icon sizes
@each $size in $iconSizes {
&--#{$size} {
height: #{$size}px;
width: #{$size}px;
};
}
}
}

33
styles/v3/index.scss Normal file
View file

@ -0,0 +1,33 @@
/* Element-Styling */
@use "./elements/button.scss";
@use "./elements/headers.scss";
@use "./elements/hr.scss";
@use "./elements/icons.scss";
/* Sheet Options */
.dotdungeon.style-v3 {
--scrollbar-width: 5px;
--scrollbar-handle-color: #782e22;
--scrollbar-handle-border-color: var(--color-border-highlight);
--color-checkbox-checked: inherit;
::-webkit-scrollbar {
width: var(--scrollbar-width);
}
::-webkit-scrollbar-thumb {
background: var(--scrollbar-handle-color);
border-color: var(--scrollbar-handle-border-color);
border-radius: 5px;
}
container-type: size;
> .window-content {
padding: 0;
.debug-data {
opacity: 60%;
font-family: sans-serif;
word-break: break-all;
}
}
}

13
styles/v3/mixins/_material.scss Normal file
View file

@ -0,0 +1,13 @@
@mixin elevate($height) {
background-color: var(--elevation-#{$height}dp-bg);
-webkit-box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
}
@mixin undo {
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}