mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-11 19:25:21 +01:00
b24cdcc9ed
* Added prettier with automatic useage on pre-commit to avoid style breakage * Ran Prettier on the project
1513 lines
48 KiB
Text
1513 lines
48 KiB
Text
.daggerheart.sheet.pc {
|
|
width: 810px !important; // Form won't apply height for some reason
|
|
|
|
div[data-application-part] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.pc-sheet-header {
|
|
display: flex;
|
|
gap: @halfMargin;
|
|
height: 120px;
|
|
margin-bottom: @halfMargin;
|
|
|
|
.portrait {
|
|
border: 0;
|
|
border-right: @thinBorder solid var(--color-underline-header);
|
|
}
|
|
|
|
.class-info {
|
|
flex: 1;
|
|
background: @primaryAccent;
|
|
// -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 55px) 100%, 0px 100%);
|
|
// clip-path: polygon(0 0, 100% 0, calc(100% - 75px) 100%, 0px 100%);
|
|
|
|
.portrait {
|
|
max-width: 120px;
|
|
}
|
|
|
|
.class-title {
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
span:hover {
|
|
filter: drop-shadow(0px 0px 3px red);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.domain-container {
|
|
margin-left: @halfMargin;
|
|
}
|
|
}
|
|
|
|
.class-add-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
flex: 0;
|
|
|
|
button {
|
|
height: 22px;
|
|
width: 22px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: @halfMargin;
|
|
background: @primaryAccent;
|
|
}
|
|
}
|
|
|
|
.domain-title {
|
|
text-transform: uppercase;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
line-height: 23px;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
.domain-image {
|
|
height: 30px;
|
|
flex: 0;
|
|
}
|
|
}
|
|
.general-info {
|
|
flex: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.general-input {
|
|
position: relative;
|
|
|
|
.general-title {
|
|
position: absolute;
|
|
left: 4px;
|
|
// height: 100%;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
.pc-tabs {
|
|
flex: 1;
|
|
margin: 0;
|
|
}
|
|
|
|
.rest-container {
|
|
flex-wrap: nowrap;
|
|
display: flex;
|
|
height: var(--form-field-height);
|
|
flex: 0;
|
|
|
|
button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
width: var(--form-field-height);
|
|
|
|
i {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.level-container {
|
|
position: relative;
|
|
bottom: 4px;
|
|
flex: none;
|
|
width: 40px;
|
|
border: none;
|
|
outline: none;
|
|
margin-left: @fullMargin;
|
|
|
|
&.levelup {
|
|
filter: drop-shadow(0px 0px 3px gold);
|
|
}
|
|
|
|
img {
|
|
height: 40px;
|
|
width: 40px;
|
|
border: none;
|
|
}
|
|
|
|
.level-value-container {
|
|
width: 48px;
|
|
position: absolute;
|
|
top: calc(50% - 17px);
|
|
left: calc(50% - 23px);
|
|
|
|
.level-value {
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
&:not(:hover),
|
|
&:not(:focus) {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.levelup-marker {
|
|
position: absolute;
|
|
top: 0;
|
|
right: calc(50% - 12px);
|
|
color: gold;
|
|
filter: drop-shadow(0px 0px 3px black);
|
|
|
|
&.double-digit {
|
|
right: calc(50% - 20px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.level-title {
|
|
position: absolute;
|
|
bottom: 2px;
|
|
width: 42px;
|
|
background-color: black;
|
|
color: white;
|
|
left: calc(50% - 21px);
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
font-size: 12px;
|
|
|
|
&.levelup {
|
|
color: gold;
|
|
filter: drop-shadow(0px 0px 3px orange);
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
&:hover {
|
|
background-color: aliceblue;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sheet-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
|
|
.tab-container {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.tab-inner-container {
|
|
flex: 1;
|
|
|
|
.body-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
fieldset {
|
|
flex: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.system-info {
|
|
font-size: 12px;
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
margin-top: -@halfMargin;
|
|
flex: 0;
|
|
}
|
|
|
|
.feature-sheet-body {
|
|
gap: @halfMargin;
|
|
}
|
|
|
|
.abilities-container {
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
border-radius: 6px;
|
|
padding-left: 0;
|
|
// flex: 2.5;
|
|
|
|
legend {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
padding: 0 @fullMargin;
|
|
position: relative;
|
|
}
|
|
|
|
.attributes-menu {
|
|
position: absolute;
|
|
bottom: calc(50% - 12px);
|
|
font-size: 24px;
|
|
left: -8px;
|
|
}
|
|
|
|
.attribute {
|
|
position: relative;
|
|
padding: 0 0 @fullPadding;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex-basis: 33.33%;
|
|
// flex: 1;
|
|
|
|
.attribute-banner {
|
|
position: relative;
|
|
top: 8px;
|
|
z-index: 2;
|
|
background: black;
|
|
color: white;
|
|
text-transform: uppercase;
|
|
padding: @smallPadding;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
min-width: 96px;
|
|
|
|
.attribute-roll {
|
|
position: absolute;
|
|
width: 16px;
|
|
transition: transform 0.2s;
|
|
|
|
&:hover {
|
|
transform: rotate(30deg);
|
|
filter: drop-shadow(0px 0px 3px red);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.attribute-text {
|
|
width: 100%;
|
|
margin-left: @largeMargin;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.attribute-mark {
|
|
height: 23px;
|
|
width: 23px;
|
|
position: absolute;
|
|
right: -5px;
|
|
top: 6px;
|
|
border: 2px solid black;
|
|
border-radius: 50%;
|
|
background: white;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&.selectable {
|
|
border-color: gold;
|
|
filter: drop-shadow(0 0 3px black);
|
|
|
|
&:hover i {
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
& i.selected,
|
|
&:hover i.selected {
|
|
color: green;
|
|
opacity: 1;
|
|
}
|
|
|
|
i {
|
|
color: black;
|
|
font-size: 17px;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.attribute-image {
|
|
position: relative;
|
|
width: fit-content;
|
|
display: flex;
|
|
|
|
img {
|
|
height: 80px;
|
|
width: 80px;
|
|
border: none;
|
|
}
|
|
|
|
.attribute-value {
|
|
width: 55px;
|
|
padding-right: 10px;
|
|
position: absolute;
|
|
top: calc(50% - 18px);
|
|
left: calc(50% - 24px);
|
|
font-weight: bold;
|
|
font-size: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
border: none;
|
|
appearance: none;
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
&.negative {
|
|
left: calc(50% - 29px);
|
|
}
|
|
&.unselected {
|
|
filter: drop-shadow(0 0 3px @secondaryShadow);
|
|
}
|
|
}
|
|
|
|
.attribute-text {
|
|
width: 47px;
|
|
position: absolute;
|
|
top: calc(50% - 22px);
|
|
left: calc(50% - 24px);
|
|
font-weight: bold;
|
|
font-size: 30px;
|
|
text-align: center;
|
|
|
|
&.negative {
|
|
left: calc(50% - 29px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.attribute-verb {
|
|
font-variant: petite-caps;
|
|
}
|
|
}
|
|
}
|
|
|
|
.defense-row {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-evenly;
|
|
|
|
.defense-section {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: @fullMargin;
|
|
|
|
.defense-container {
|
|
position: relative;
|
|
padding: @fullPadding;
|
|
max-width: 100px;
|
|
|
|
img {
|
|
border: none;
|
|
max-width: 80px;
|
|
}
|
|
|
|
.defense-value {
|
|
width: 47px;
|
|
position: absolute;
|
|
top: calc(50% - 22px);
|
|
left: calc(50% - 24px);
|
|
font-weight: bold;
|
|
font-size: 30px;
|
|
text-align: center;
|
|
&:not(:hover),
|
|
&:not(:focus) {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.defense-banner {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: calc(50% - 42px);
|
|
z-index: 2;
|
|
background-color: black;
|
|
color: white;
|
|
width: 84px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.armor-marks {
|
|
max-width: 67px;
|
|
padding: @fullPadding;
|
|
align-self: end;
|
|
margin-left: @halfMargin;
|
|
|
|
.mark {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.disabled-mark {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
}
|
|
|
|
.left-main-container {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
border-radius: @normalRadius;
|
|
|
|
.legend {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
padding: 0 @fullPadding;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.weapon-section {
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.threshold-container {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
align-self: center;
|
|
|
|
.threshold-box {
|
|
position: relative;
|
|
width: 30px;
|
|
height: 30px;
|
|
border: @normalBorder solid black;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.threshold-spacer {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 70px;
|
|
height: 18px;
|
|
background-color: darkgray;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.resource-label {
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.death-save {
|
|
position: absolute;
|
|
right: -22px;
|
|
|
|
&:hover:not(.disabled) {
|
|
filter: drop-shadow(0 0 3px @mainShadow);
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.disabled {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
.resource-box {
|
|
width: 20px;
|
|
height: 12px;
|
|
|
|
&.stress:nth-child(even) {
|
|
position: relative;
|
|
right: 1px;
|
|
}
|
|
|
|
.disabled {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
.hope-text {
|
|
font-size: 11.7px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.hope-container {
|
|
background: darkgray;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
padding: @smallPadding 0px;
|
|
|
|
.vertical-separator {
|
|
border-left: 2px solid white;
|
|
height: auto;
|
|
margin: @halfMargin 0;
|
|
flex: 0;
|
|
}
|
|
|
|
.hope-inner-container {
|
|
position: relative;
|
|
|
|
.hope-value {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.hope-scar {
|
|
position: absolute;
|
|
top: calc(50% - 6px);
|
|
left: calc(50% - 7px);
|
|
opacity: 0.4;
|
|
font-size: 12px;
|
|
-webkit-transform: scaleX(-1);
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.experience-row {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
|
|
.experience-selector {
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
margin-right: @halfMargin;
|
|
opacity: 0.5;
|
|
|
|
&:hover:not(.selected) {
|
|
filter: drop-shadow(0 0 3px gold);
|
|
}
|
|
|
|
&.selected {
|
|
filter: drop-shadow(0 0 3px gold);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.experience-value {
|
|
margin-left: @fullMargin;
|
|
width: 30px;
|
|
border-bottom: @normalBorder solid black;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
|
|
&.empty {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
.disabled-experience {
|
|
border: @thinBorder solid @borderTertiary;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|
|
.gold-section {
|
|
width: calc(100% - 8px);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
fieldset.gold-fieldset {
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
padding-bottom: @fullPadding;
|
|
|
|
legend {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
font-size: 15px;
|
|
font-variant: all-petite-caps;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.gold-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
gap: @halfMargin;
|
|
}
|
|
|
|
.gold-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 @fullPadding;
|
|
gap: @tinyMargin;
|
|
}
|
|
|
|
.gold-row,
|
|
.gold-column {
|
|
img {
|
|
min-width: 14px;
|
|
min-height: 14px;
|
|
height: 14px;
|
|
border: 0;
|
|
filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(21deg) brightness(17%) contrast(103%);
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(21deg) brightness(17%)
|
|
contrast(103%) drop-shadow(0 0 3px @mainShadow);
|
|
}
|
|
}
|
|
|
|
i:hover {
|
|
cursor: pointer;
|
|
filter: drop-shadow(0 0 3px @mainShadow);
|
|
}
|
|
|
|
img:not(.owned),
|
|
i:not(.owned) {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.health-category {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.class-feature-selectable {
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
filter: drop-shadow(0 0 3px @mainShadow);
|
|
}
|
|
|
|
&.inactive {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.features-container {
|
|
width: 100%;
|
|
min-height: 136px;
|
|
|
|
.feature-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: @fullPadding;
|
|
margin-bottom: 0;
|
|
|
|
.feature-img {
|
|
max-width: 42px;
|
|
}
|
|
|
|
.feature-label {
|
|
font-weight: bold;
|
|
font-size: 30px;
|
|
}
|
|
|
|
button {
|
|
flex: 0;
|
|
}
|
|
}
|
|
|
|
.feature-tick-container {
|
|
flex: 0;
|
|
min-width: 56px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: @fullMargin;
|
|
margin: 0 @threeQuarterMargin;
|
|
|
|
.feature-tick {
|
|
position: relative;
|
|
border: @normalBorder solid @borderTertiary;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
width: 24px;
|
|
background: rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
&:hover:not(.disabled):not(.used) {
|
|
cursor: pointer;
|
|
filter: drop-shadow(0 0 3px @mainShadow);
|
|
}
|
|
|
|
&.disabled {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
img {
|
|
border: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
filter: invert(17%) sepia(0%) saturate(0%) hue-rotate(19deg) brightness(102%) contrast(84%);
|
|
}
|
|
|
|
.feature-dice-value {
|
|
font-size: 18px;
|
|
align-self: center;
|
|
}
|
|
|
|
&.used::after {
|
|
position: absolute;
|
|
content: '/';
|
|
color: @borderTertiary;
|
|
font-weight: 700;
|
|
font-size: 1.7em;
|
|
left: 4px;
|
|
top: -5px;
|
|
transform: rotate(25deg);
|
|
font-size: 24.5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.feature-input {
|
|
border: 0;
|
|
border-bottom: @thinBorder solid @borderTertiary;
|
|
text-align: center;
|
|
height: min-content;
|
|
background: inherit;
|
|
font-size: 20px;
|
|
position: relative;
|
|
bottom: 3px;
|
|
}
|
|
|
|
.editor {
|
|
height: 400px;
|
|
width: 100%;
|
|
}
|
|
|
|
.weapons-title {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.proficiency-container {
|
|
width: 176px;
|
|
height: 20px;
|
|
position: absolute;
|
|
bottom: -15px;
|
|
left: calc(50% - 88px);
|
|
text-transform: uppercase;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1;
|
|
clip-path: polygon(11% 100%, 89% 100%, 100% 0%, 0% 0%);
|
|
font-size: 10px;
|
|
|
|
span {
|
|
margin-right: @tinyMargin;
|
|
}
|
|
|
|
.proficiency-dot {
|
|
background: white;
|
|
color: white;
|
|
font-size: 10px;
|
|
padding: 1px;
|
|
border-radius: 50%;
|
|
|
|
&.marked {
|
|
color: black;
|
|
}
|
|
|
|
&:not(:last-of-type) {
|
|
margin-right: @tinyMargin;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.weapons-burden {
|
|
position: absolute;
|
|
top: -4px;
|
|
right: -56px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.weapons-burden-icon {
|
|
color: white;
|
|
font-size: 22px;
|
|
-webkit-text-stroke-width: 1px;
|
|
-webkit-text-stroke-color: black;
|
|
|
|
&.active {
|
|
-webkit-text-stroke-color: rgba(0, 0, 0, 0.05);
|
|
color: black;
|
|
}
|
|
|
|
&.left {
|
|
-webkit-transform: scaleX(-1) rotate(20deg);
|
|
transform: scaleX(-1) rotate(20deg);
|
|
margin-right: 4px;
|
|
}
|
|
|
|
&.right {
|
|
transform: rotate(20deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.armor-container {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.active-item-label-chip {
|
|
margin-left: @halfMargin;
|
|
}
|
|
}
|
|
|
|
.item-section {
|
|
.active-item-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
padding: @smallPadding 0px;
|
|
|
|
.weapons-label-row {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.damage-roll {
|
|
width: 24px;
|
|
border: none;
|
|
margin-left: @halfMargin;
|
|
transition: transform 0.2s;
|
|
|
|
&:hover {
|
|
transform: rotate(30deg);
|
|
filter: drop-shadow(0px 0px 3px red);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.active-item-label-chip {
|
|
width: 62px;
|
|
border: @normalBorder solid black;
|
|
border-radius: 6px;
|
|
background-color: @primaryAccent;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
margin-left: @fullPadding;
|
|
|
|
img {
|
|
height: 20px;
|
|
}
|
|
|
|
button {
|
|
height: 17px;
|
|
width: 17px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgb(122, 121, 113);
|
|
border-color: black;
|
|
margin: 0;
|
|
|
|
&:hover {
|
|
background: red;
|
|
}
|
|
|
|
i {
|
|
font-size: 10px;
|
|
color: black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.inventory-armor-section,
|
|
.inventory-weapon-section {
|
|
width: 100%;
|
|
margin-bottom: @fullMargin;
|
|
text-transform: uppercase;
|
|
|
|
h2 {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.inventory-legend {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: @halfMargin;
|
|
|
|
.page-selector {
|
|
margin-left: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
i {
|
|
&:hover:not(.disabled) {
|
|
cursor: pointer;
|
|
filter: drop-shadow(0px 0px 3px red);
|
|
}
|
|
|
|
&.disabled {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.inventory-add-button {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
height: 15px;
|
|
width: 15px;
|
|
top: -20px;
|
|
background: grey;
|
|
border-color: black;
|
|
right: 6px;
|
|
display: flex;
|
|
font-size: 13px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.inventory {
|
|
width: 100%;
|
|
|
|
.inventory-row {
|
|
height: 26px;
|
|
border-bottom: @thinBorder solid @borderTertiary;
|
|
display: flex;
|
|
margin-bottom: @fullMargin;
|
|
border-radius: 8px;
|
|
|
|
.item-container {
|
|
flex-basis: 25%;
|
|
margin: 0 @halfMargin @fullMargin;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
filter: drop-shadow(0px 0px 3px red);
|
|
}
|
|
|
|
.inventory-item {
|
|
background: @primaryAccent;
|
|
padding: @fullPadding;
|
|
border: @thinBorder solid black;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.inventory-item-text {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
flex: 1;
|
|
}
|
|
|
|
button {
|
|
height: 16px;
|
|
width: 16px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0;
|
|
background: @secondaryBackground;
|
|
border-color: black;
|
|
margin-left: @halfMargin;
|
|
|
|
i {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.editor {
|
|
height: 100px;
|
|
}
|
|
}
|
|
|
|
.inventory-items {
|
|
width: 100%;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.domain-card-tab {
|
|
flex: 1;
|
|
|
|
.domain-card-body {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: @largePadding;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.card-row {
|
|
flex: 1;
|
|
display: flex;
|
|
}
|
|
|
|
.domain-card {
|
|
flex: 0;
|
|
flex-basis: 33.33%;
|
|
margin: @fullMargin;
|
|
}
|
|
|
|
.loadout-body {
|
|
flex: 1;
|
|
|
|
.loadout-container {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: @fullMargin;
|
|
|
|
.top-card-row {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.domain-card.outlined {
|
|
border: @normalBorder dotted black;
|
|
padding: 0;
|
|
margin: @fullMargin;
|
|
height: calc(100% - 16px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
}
|
|
}
|
|
}
|
|
|
|
.vault-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
overflow-y: auto;
|
|
height: 100%;
|
|
|
|
.vault-card {
|
|
flex: 0;
|
|
flex-basis: calc(33.33% - 16px);
|
|
margin: 8px;
|
|
height: calc(50% - 16px);
|
|
min-height: calc(50% - 16px);
|
|
}
|
|
}
|
|
|
|
.domain-card-menu {
|
|
flex: 0;
|
|
width: 120px;
|
|
height: 100%;
|
|
border-width: @normalBorder 0 @normalBorder @normalBorder;
|
|
border-color: black;
|
|
border-style: solid;
|
|
|
|
button {
|
|
margin-bottom: @tinyMargin;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.loadout-tabs {
|
|
border-top: @thinBorder solid @borderPrimary;
|
|
border-bottom: @thinBorder solid @borderPrimary;
|
|
}
|
|
|
|
.abilities-card {
|
|
position: relative;
|
|
border: @thickBorder solid @secondaryAccent;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
font-size: 14px;
|
|
|
|
.abilities-card-image-container {
|
|
position: relative;
|
|
// height: 50%;
|
|
}
|
|
|
|
.abilities-card-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
aspect-ratio: 2;
|
|
}
|
|
|
|
.abilities-text-container {
|
|
flex: 1;
|
|
position: relative;
|
|
height: 50%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
padding: 12px 4px 4px;
|
|
}
|
|
|
|
.abilities-card-level {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 12px;
|
|
color: black;
|
|
height: 60px;
|
|
border: @normalBorder solid orange;
|
|
border-top-width: 0;
|
|
width: 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
background: grey;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
|
|
img {
|
|
border: 0;
|
|
width: 20px;
|
|
}
|
|
}
|
|
.abilities-card-refresh-cost {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
color: white;
|
|
width: 30px;
|
|
height: 30px;
|
|
border: @normalBorder solid orange;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: black;
|
|
font-size: 14px;
|
|
i {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
.abilities-card-type {
|
|
flex: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
position: absolute;
|
|
left: 0;
|
|
text-align: center;
|
|
width: 100%;
|
|
bottom: -9px;
|
|
z-index: 1;
|
|
|
|
.abilities-card-type-text {
|
|
padding: 0px 4px;
|
|
border: 1px solid black;
|
|
border-radius: 6px;
|
|
background: gold;
|
|
}
|
|
}
|
|
|
|
.abilities-card-title {
|
|
flex: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.abilities-card-sub-title {
|
|
flex: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-style: italic;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.abilities-card-spellcast {
|
|
flex: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-transform: uppercase;
|
|
font-size: 12px;
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.abilities-card-description {
|
|
flex: 0;
|
|
font-size: 12px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.abilities-card-effect {
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: rgb(47 79 79 / 25%);
|
|
}
|
|
|
|
> * {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.abilities-card-abilities {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
|
|
.abilities-card-ability {
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: rgb(47 79 79 / 25%);
|
|
}
|
|
|
|
> * {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover .abilities-card-menu {
|
|
height: 40px;
|
|
left: 0px;
|
|
}
|
|
|
|
.abilities-card-menu {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 0;
|
|
transition: height 0.2s;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
width: 100%;
|
|
background: grey;
|
|
|
|
button {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.heritage-container {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: @fullMargin;
|
|
|
|
.card-row {
|
|
height: 50%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.heritage-card {
|
|
flex-basis: 33.33%;
|
|
margin: @fullMargin;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&.outlined {
|
|
border: @normalBorder dotted black;
|
|
font-size: 25px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty-ability-container {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: 25px;
|
|
opacity: 0.7;
|
|
|
|
.empty-ability-inner-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
i {
|
|
font-size: 48px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.story-container {
|
|
gap: @largeMargin;
|
|
|
|
.story-fieldset {
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.story-legend {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 0 8px;
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.scars-container {
|
|
.editor {
|
|
height: 240px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.inventory-container {
|
|
height: 100%;
|
|
overflow: auto;
|
|
|
|
.inventory-item-list {
|
|
list-style-type: none;
|
|
padding: 0 @largePadding;
|
|
margin-top: 0;
|
|
|
|
&.inventory-item-header {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.inventory-title-row-container {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
border-bottom: @thickBorder ridge slategrey;
|
|
|
|
.inventory-title-row {
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
}
|
|
|
|
.inventory-item-title-container {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.inventory-item-quantity {
|
|
width: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 96px; // Icon toolbar spacing
|
|
}
|
|
}
|
|
|
|
.inventory-item {
|
|
background: crimson;
|
|
|
|
&:not(:last-of-type) {
|
|
border-bottom: @normalBorder ridge slategrey;
|
|
}
|
|
|
|
.inventory-item-title-container {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
.inventory-item-title {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
filter: drop-shadow(0 0 3px @secondaryShadow);
|
|
}
|
|
}
|
|
}
|
|
|
|
.inventory-item-quantity {
|
|
width: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&.spaced {
|
|
margin-right: 56px;
|
|
}
|
|
|
|
input {
|
|
margin: 0 @tinyMargin;
|
|
border: 0;
|
|
border-bottom: 2px solid black;
|
|
}
|
|
|
|
i {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.inventory-title-row {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 @fullPadding;
|
|
}
|
|
|
|
.inventory-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: @fullPadding;
|
|
font-size: 24px;
|
|
|
|
.row-icon {
|
|
margin-left: @halfMargin;
|
|
}
|
|
|
|
.active-item {
|
|
position: absolute;
|
|
font-size: 16px;
|
|
left: calc(50% - 8px);
|
|
top: calc(50% - 8px);
|
|
margin-left: @tinyMargin;
|
|
color: crimson;
|
|
}
|
|
|
|
img {
|
|
width: 32px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|