Fix apv2, WIP
This commit is contained in:
@@ -0,0 +1,641 @@
|
||||
@import "totem";
|
||||
|
||||
.system-vermine2047 .vermine2047.actor {
|
||||
|
||||
// ── Fix contrast: dark text on light parchment bg ───────────────────
|
||||
.window-content,
|
||||
& {
|
||||
color: @theme-color-dark;
|
||||
|
||||
label, span, p, li, a:not(.active) {
|
||||
color: @theme-color-dark;
|
||||
}
|
||||
|
||||
h4, h5 {
|
||||
color: @color-text-dark-header;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: @theme-color-light;
|
||||
}
|
||||
|
||||
input:not([type="radio"]):not([type="checkbox"]),
|
||||
select, textarea {
|
||||
color: @color-text-light-0;
|
||||
line-height: 1.2;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
.char-header {
|
||||
h1 label {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.char-name-value {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
input:not([type="radio"]):not([type="checkbox"]) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ability input.hexa {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.resource-label {
|
||||
color: @color-text-dark-secondary;
|
||||
}
|
||||
|
||||
.ability label {
|
||||
color: @color-text-dark-header;
|
||||
}
|
||||
|
||||
.char-header {
|
||||
color: @theme-color-dark;
|
||||
|
||||
label {
|
||||
color: @color-text-dark-header;
|
||||
}
|
||||
}
|
||||
|
||||
.hexa {
|
||||
color: @color-text-dark-primary;
|
||||
}
|
||||
|
||||
.sheet-tabs a {
|
||||
color: @color-text-dark-inactive;
|
||||
&.active {
|
||||
color: @theme-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Two-column layout for character sheets ──────────────────────────
|
||||
&.character {
|
||||
display: grid !important;
|
||||
grid-template-columns: 1fr !important;
|
||||
grid-template-rows: auto 1fr auto !important;
|
||||
|
||||
> header.window-header {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
> section.window-content {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
> div.window-resize-handle {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
}
|
||||
|
||||
&.character .window-content {
|
||||
display: grid;
|
||||
grid-template-columns: 240px 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
overflow: hidden;
|
||||
|
||||
> .tab.main {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / -1;
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
> nav.tabs {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
> .tab:not(.main) {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
display: none;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
|
||||
&.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Stacked layout for NPC sheets (header + tabs + content) ────────
|
||||
&.npc {
|
||||
display: grid !important;
|
||||
grid-template-columns: 1fr !important;
|
||||
grid-template-rows: auto 1fr auto !important;
|
||||
|
||||
> header.window-header {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
> section.window-content {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
> div.window-resize-handle {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
}
|
||||
|
||||
&.npc .window-content {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
overflow: hidden;
|
||||
|
||||
> .tab.main {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
> nav.tabs {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
> .tab:not(.main) {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
display: none;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
|
||||
&.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
> .tab {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.charname input {
|
||||
color: @theme-color-dark;
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
font-size: 30px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
div.hexa {
|
||||
.hexa-style();
|
||||
.transition();
|
||||
margin: 0.2rem;
|
||||
|
||||
&:hover {
|
||||
.hexa-style(rgba(255, 255, 255, 0.425), rgba(0, 0, 0, 0.288));
|
||||
}
|
||||
|
||||
input {
|
||||
opacity: 1;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.checked {
|
||||
.hexa-style(rgb(0, 0, 0), rgba(0, 0, 0, 0.288));
|
||||
&:hover { .hexa-style(rgb(43, 43, 43), rgba(0, 0, 0, 0.288)); }
|
||||
}
|
||||
|
||||
&.unavailable {
|
||||
background: radial-gradient(circle, rgba(66, 15, 15, 0.664) 0%, rgba(131, 70, 70, 0.432) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"] {
|
||||
width: calc(100% - 2px);
|
||||
height: calc(100% - 2px);
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin: 1px 0;
|
||||
color: #333;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
|
||||
&.hexa { .hexa-style(); }
|
||||
}
|
||||
|
||||
input[disabled],
|
||||
select[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
input[type="text"]:hover:not(:disabled),
|
||||
input[type="text"]:focus,
|
||||
select:hover:not(:disabled),
|
||||
select:focus,
|
||||
input[type="number"]:hover:not(:disabled),
|
||||
input[type="number"]:focus,
|
||||
textarea:hover:not(:disabled),
|
||||
textarea:focus {
|
||||
box-shadow: 0 0 10px @theme-color-highlight inset;
|
||||
}
|
||||
|
||||
select {
|
||||
font-size: 0.6rem;
|
||||
border: none;
|
||||
appearance: none;
|
||||
min-width: fit-content;
|
||||
max-width: fit-content;
|
||||
padding: 0 0.2rem;
|
||||
margin: 0 0.2rem;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mce-panel span {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.rollable:hover,
|
||||
a:hover {
|
||||
color: #000;
|
||||
text-shadow: 0 5px 5px @theme-color-accent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chooseTotem {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-shadow: 0 0 10px @theme-color-highlight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sheet-header-toggle {
|
||||
text-align: right;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
button {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
text-transform: uppercase;
|
||||
padding: 0.2rem 1rem;
|
||||
cursor: pointer;
|
||||
.background-image(url("@{ui-path}/scotch.webp"), no-repeat, cover, 50% 0%);
|
||||
border: none;
|
||||
box-shadow: 0px 0px 3px rgba(31, 26, 26, 0.979) inset;
|
||||
color: @theme-color-dark;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px @theme-color-highlight inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.padding-with-frieze {
|
||||
margin-left: 18% !important;
|
||||
margin-right: 10% !important;
|
||||
|
||||
li {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.major-totem {
|
||||
position: relative;
|
||||
|
||||
h4 {
|
||||
position: absolute;
|
||||
transform: rotate(-8deg);
|
||||
opacity: 1;
|
||||
transition: 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
.paper {
|
||||
margin-top: 1rem;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.second-paper {
|
||||
margin-top: 4rem;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.char-header {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
h1.char-name,
|
||||
.char-vermine2047 {
|
||||
border-bottom: none;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.char-vermine2047 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: @theme-color-light;
|
||||
font-size: 1.7rem;
|
||||
border-bottom: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
font-size: 1.4em;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 0.2rem;
|
||||
|
||||
&.characteristics {
|
||||
font-size: 1.25rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.tab.totem &,
|
||||
.tab.equipment &,
|
||||
.tab.stories & {
|
||||
margin-top: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
nav.tabs[data-group="sheet"] {
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 54px;
|
||||
.background-image(url("@{ui-path}/barre_haut.webp"), no-repeat, auto, right top);
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding-right: 4rem;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.item {
|
||||
height: 2.4rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
z-index: 1;
|
||||
transition: all 0.1s ease-out;
|
||||
color: #606060;
|
||||
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.404);
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: #000;
|
||||
text-shadow: 0 5px 5px @theme-color-accent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-shadow: 0 5px 5px rgba(30, 82, 37, 0.6039215686);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ability {
|
||||
padding-right: 0.6rem;
|
||||
font-size: 0.8rem;
|
||||
border-bottom: 1px solid rgba(170, 170, 152, 0.664);
|
||||
box-shadow: 0px 0px 15px rgba(128, 128, 128, 0) inset;
|
||||
transition: 0.2s;
|
||||
position: relative;
|
||||
flex-wrap: nowrap;
|
||||
min-width: min-content;
|
||||
container-type: inline-size;
|
||||
container-name: ability-row;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 15px gray inset;
|
||||
}
|
||||
|
||||
label {
|
||||
min-width: 40%;
|
||||
flex: 1.3;
|
||||
}
|
||||
|
||||
span {
|
||||
max-width: fit-content;
|
||||
margin: 0 1rem;
|
||||
flex: 0.5;
|
||||
}
|
||||
|
||||
div.specialties {
|
||||
position: absolute;
|
||||
bottom: -0.2rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.skill-dots {
|
||||
height: 100%;
|
||||
align-self: center;
|
||||
flex: 1.5;
|
||||
min-width: fit-content;
|
||||
|
||||
> div {
|
||||
max-width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
padding-bottom: 0.2rem;
|
||||
font-style: oblique;
|
||||
align-self: flex-start;
|
||||
|
||||
&.dice-pool-dot {
|
||||
.background-image(radial-gradient(circle, @dice-pool-color 25%, rgb(0, 0, 0) 100%), @dice-pool-color);
|
||||
max-width: 0.7rem;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.dice-reroll-dot {
|
||||
background: radial-gradient(circle, @dice-reroll-color 25%, rgb(0, 0, 0) 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skill-category {
|
||||
padding: 0.3rem;
|
||||
|
||||
&.preferred {
|
||||
box-shadow: 0px 0px 30px rgba(0, 128, 0, 0.306) inset;
|
||||
|
||||
h4, label {
|
||||
text-shadow: 0px 0px 5px rgba(0, 128, 0, 0.411);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#edit {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reserve-grid {
|
||||
line-height: 0.5rem;
|
||||
transform-origin: 0% 50%;
|
||||
max-width: fit-content;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
div.flexrow,
|
||||
input,
|
||||
.hexa {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-width: 1rem;
|
||||
min-height: 1rem;
|
||||
}
|
||||
|
||||
> .flexrow {
|
||||
position: relative;
|
||||
max-width: fit-content;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.items-list {
|
||||
.item-name .item-image {
|
||||
flex: 0 0 30px;
|
||||
height: 30px;
|
||||
background-size: 30px;
|
||||
border: none;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.items-list .item.flexrow > div:not(.item-name):not(.item-controls) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.item {
|
||||
align-items: center;
|
||||
padding: 2px;
|
||||
border-bottom: 1px solid rgba(170, 170, 152, 0.664);
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
}
|
||||
}
|
||||
|
||||
// ── V2 tab navigation — chitin-plate style ─────────────────────────
|
||||
nav.sheet-tabs[data-application-part="tabs"] {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: @color-chitin-dark;
|
||||
border-bottom: 2px solid @color-amber;
|
||||
min-height: 36px;
|
||||
|
||||
> a {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: @font-size-11;
|
||||
letter-spacing: 0.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 16px;
|
||||
color: @color-text-light-0;
|
||||
opacity: 1;
|
||||
transition: background 0.15s;
|
||||
position: relative;
|
||||
border-right: 1px solid fade(@color-membrane, 12%);
|
||||
|
||||
&:hover {
|
||||
background: fade(@color-honeycomb, 10%);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(180deg, @color-amber 0%, @color-honeycomb 100%);
|
||||
color: @color-chitin-dark;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: @color-acid-green;
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
font-size: @font-size-14;
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> span, > i {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@container ability-row (max-width: 240px) {
|
||||
.skill-dots,
|
||||
span.hexa {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
@import "../variables";
|
||||
@import "../utilities";
|
||||
|
||||
.system-vermine2047 .vermine2047.actor.creature {
|
||||
.sheet-header {
|
||||
.background-image(url("@{ui-path}/barre_haut.webp"), no-repeat, 100% 100%, right top);
|
||||
padding: 10px;
|
||||
max-height: 110px;
|
||||
}
|
||||
|
||||
.header-fields { flex: 1; }
|
||||
.resources { margin-bottom: 10px; }
|
||||
|
||||
.resource {
|
||||
.card-style();
|
||||
}
|
||||
|
||||
.resource-label {
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
min-width: 60px;
|
||||
font-size: @font-size-12;
|
||||
}
|
||||
|
||||
.resource-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
select {
|
||||
margin-right: 8px;
|
||||
min-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.charname {
|
||||
margin: 0;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
font-size: @font-size-18;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
.card-style();
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
label { font-weight: bold; }
|
||||
span {
|
||||
font-weight: bold;
|
||||
color: @theme-color-light;
|
||||
}
|
||||
}
|
||||
|
||||
.mdb {
|
||||
&:not(.row) {
|
||||
.card-style();
|
||||
}
|
||||
|
||||
h4:first-child {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: @font-size-14;
|
||||
margin-top: 0;
|
||||
border-bottom: 1px solid @color-border-dark-3;
|
||||
padding-bottom: 5px;
|
||||
text-align: center;
|
||||
background: 50% 0% / cover no-repeat url("@{ui-path}/scotch.webp");
|
||||
}
|
||||
|
||||
ul.unstyled {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 3px 0;
|
||||
border-bottom: 1px solid @color-border-dark-3;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.grid-3col {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.row.mdb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
@import "../variables";
|
||||
@import "../utilities";
|
||||
|
||||
.system-vermine2047 .vermine2047.actor.group {
|
||||
.char-header {
|
||||
.background-image(url("@{ui-path}/barre_haut.webp"), no-repeat, 100% 100%, right top);
|
||||
max-height: 110px;
|
||||
}
|
||||
|
||||
.char-details {
|
||||
h1.char-name input,
|
||||
.char-vermine2047 a.chooseTotem {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: @font-size-14;
|
||||
background: 50% 0% / cover no-repeat url("@{ui-path}/scotch.webp");
|
||||
}
|
||||
|
||||
.reserve-control,
|
||||
.morale-control {
|
||||
.card-style();
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
input, select {
|
||||
margin-right: 8px;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.actor-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li.actor {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid @color-border-dark-3;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px @theme-color-highlight inset;
|
||||
}
|
||||
}
|
||||
|
||||
.actor-name, .item-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.objective-item {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid @color-border-dark-4;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.totem-display {
|
||||
.card-style();
|
||||
|
||||
span { font-weight: bold; }
|
||||
}
|
||||
|
||||
.identity-field {
|
||||
margin-bottom: 8px;
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
input { width: 100%; }
|
||||
}
|
||||
|
||||
.level input,
|
||||
.reputation input {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,231 @@
|
||||
@import "../variables";
|
||||
@import "../utilities";
|
||||
|
||||
.system-vermine2047 .vermine2047.actor.npc {
|
||||
.sheet-header {
|
||||
.background-image(url("@{ui-path}/barre_haut.webp"), no-repeat, 100% 100%, right top);
|
||||
padding: 0.5rem;
|
||||
max-height: 110px;
|
||||
}
|
||||
|
||||
.ability-value,
|
||||
.resource-value {
|
||||
min-width: 30px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.card, .npc-card {
|
||||
.card-style();
|
||||
|
||||
h4 {
|
||||
.card-title();
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: @font-size-14;
|
||||
background: 50% 0% / cover no-repeat url("@{ui-path}/scotch.webp");
|
||||
|
||||
i { margin-right: 5px; }
|
||||
}
|
||||
}
|
||||
|
||||
.skills-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.skill-category {
|
||||
.card-style();
|
||||
padding: 10px;
|
||||
|
||||
h4 {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
font-size: @font-size-14;
|
||||
text-transform: uppercase;
|
||||
margin-top: 0;
|
||||
margin-bottom: 8px;
|
||||
background: 50% 0% / cover no-repeat url("@{ui-path}/scotch.webp");
|
||||
}
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid @color-border-dark-3;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
|
||||
label {
|
||||
flex: 1;
|
||||
font-size: @font-size-12;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px @theme-color-highlight inset;
|
||||
}
|
||||
}
|
||||
|
||||
.skill-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.skill-value {
|
||||
min-width: 25px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rarity-badge {
|
||||
display: inline-block;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
|
||||
&.rarity-0 { .rarity-badge(@rarity-0-bg, @rarity-0-text); }
|
||||
&.rarity-1 { .rarity-badge(@rarity-1-bg, @rarity-1-text); }
|
||||
&.rarity-2 { .rarity-badge(@rarity-2-bg, @rarity-2-text); }
|
||||
&.rarity-3 { .rarity-badge(@rarity-3-bg, @rarity-3-text); }
|
||||
}
|
||||
|
||||
.skill-category-selector {
|
||||
margin-bottom: 15px;
|
||||
.card-style();
|
||||
}
|
||||
|
||||
.wounds-card {
|
||||
margin-top: 15px;
|
||||
.card-style();
|
||||
}
|
||||
|
||||
.wound-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
|
||||
label {
|
||||
font-size: @font-size-12;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.wound-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
input { flex: 1; }
|
||||
span {
|
||||
font-size: @font-size-12;
|
||||
min-width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.ability-section {
|
||||
.card-style();
|
||||
}
|
||||
|
||||
.ability-category-header {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
font-size: @font-size-14;
|
||||
text-transform: uppercase;
|
||||
margin-top: 0;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid @color-border-dark-3;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.ability-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 0;
|
||||
|
||||
label {
|
||||
flex: 1;
|
||||
font-size: @font-size-12;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.ability-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
.form-group-style();
|
||||
}
|
||||
|
||||
.header-fields {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.resources {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.resource {
|
||||
.card-style();
|
||||
|
||||
label { font-weight: bold; }
|
||||
}
|
||||
|
||||
.resource-label {
|
||||
font-size: @font-size-12;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.resource-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
select {
|
||||
font-size: @font-size-12;
|
||||
padding: 3px 5px;
|
||||
min-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.editor {
|
||||
min-height: 100px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.editor-content {
|
||||
min-height: 80px;
|
||||
font-size: @font-size-12;
|
||||
}
|
||||
}
|
||||
|
||||
.hexa {
|
||||
.hexa-style();
|
||||
.transition();
|
||||
|
||||
&:hover {
|
||||
.hexa-style(rgba(255, 255, 255, 0.425), rgba(0, 0, 0, 0.288));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
@import "../variables";
|
||||
@import "../utilities";
|
||||
|
||||
.system-vermine2047 .vermine2047.actor {
|
||||
.totem-details {
|
||||
position: relative;
|
||||
|
||||
img.img-totem {
|
||||
transform-origin: 50% 50%;
|
||||
filter: grayscale(1);
|
||||
opacity: 0.15;
|
||||
position: absolute;
|
||||
width: 30%;
|
||||
height: auto;
|
||||
pointer-events: none;
|
||||
aspect-ratio: 1/1;
|
||||
left: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
div.minor-totems {
|
||||
position: relative;
|
||||
background-color: rgba(146, 156, 111, 0.5215686275);
|
||||
|
||||
h5 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
img {
|
||||
max-width: 2rem;
|
||||
position: absolute;
|
||||
bottom: -2rem;
|
||||
}
|
||||
|
||||
&.human, &.adapted {
|
||||
.transition(0.3s);
|
||||
}
|
||||
|
||||
&.human img.img-totem,
|
||||
&.adapted img.img-totem {
|
||||
filter: drop-shadow(0px 0px 20px rgb(0, 0, 0));
|
||||
}
|
||||
|
||||
&.human.major,
|
||||
&.adapted.major {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&.human.major img,
|
||||
&.adapted.major img {
|
||||
filter: drop-shadow(0px 0px 10px red);
|
||||
}
|
||||
}
|
||||
|
||||
.totem-dice {
|
||||
.human-dice,
|
||||
.adapted-dice {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.human-dice i,
|
||||
.adapted-dice i {
|
||||
padding-top: 0.5rem;
|
||||
color: @totem-human-color;
|
||||
}
|
||||
|
||||
.adapted-dice {
|
||||
justify-content: flex-end;
|
||||
margin-left: 0;
|
||||
margin-right: 2rem;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.adapted-dice i {
|
||||
transform: rotate(180deg);
|
||||
padding-top: 0.5rem;
|
||||
color: @totem-adapted-color;
|
||||
}
|
||||
}
|
||||
|
||||
.human {
|
||||
left: 0;
|
||||
img { left: 0; }
|
||||
}
|
||||
|
||||
.adapted {
|
||||
right: 0;
|
||||
img { right: 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
+650
@@ -0,0 +1,650 @@
|
||||
@font-face {
|
||||
font-family: "DistressBlack";
|
||||
src: url("@{fonts-path}/dcc_sharp_distress_black_by_dccanim.otf");
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.system-vermine2047 {
|
||||
font-family: "Roboto", sans-serif;
|
||||
color: @theme-color-secondary;
|
||||
}
|
||||
|
||||
img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
ul.unstyled {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.window-app {
|
||||
font-family: "Roboto", sans-serif;
|
||||
.shadow(0px, 0px, 30px, rgba(106, 176, 76, 0.25));
|
||||
}
|
||||
|
||||
.system-vermine2047 {
|
||||
.window-content,
|
||||
form.application.sheet.vermine2047 {
|
||||
.background-image(url("@{ui-path}/box_background.webp"), repeat);
|
||||
padding: 10px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.dialog .window-content {
|
||||
.background-image(url("@{ui-path}/fond_chat_box.webp"), repeat);
|
||||
padding: 0.5rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.window-content .row {
|
||||
&.smb { margin-bottom: 0.25rem; }
|
||||
&.mdb { margin-bottom: 0.5rem; }
|
||||
&.lgb { margin-bottom: 1rem; }
|
||||
}
|
||||
|
||||
.rollable:hover,
|
||||
.rollable:focus {
|
||||
color: #000;
|
||||
text-shadow: 0 0 10px @color-acid-green;
|
||||
cursor: pointer;
|
||||
.transition();
|
||||
}
|
||||
|
||||
.rollable {
|
||||
.transition();
|
||||
}
|
||||
|
||||
img.profile-img {
|
||||
filter: drop-shadow(0px 0px 20px rgb(110, 133, 27));
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 10rem;
|
||||
}
|
||||
|
||||
body.system-vermine2047 img#logo {
|
||||
content: url("@{assets-path}/images/ui/logo_vermine_foundry.webp");
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#chat-log,
|
||||
.chat-log {
|
||||
.message {
|
||||
.background-image(url("@{ui-path}/box_background.webp"), repeat);
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-column: span 2 / span 2;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
margin: 5px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.grid-2col { .grid(); }
|
||||
.grid-3col { grid-column: span 3; grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.grid-4col { grid-column: span 4; grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.grid-5col { grid-column: span 5; grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||
.grid-6col { grid-column: span 6; grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||||
.grid-7col { grid-column: span 7; grid-template-columns: repeat(7, minmax(0, 1fr)); }
|
||||
.grid-8col { grid-column: span 8; grid-template-columns: repeat(8, minmax(0, 1fr)); }
|
||||
.grid-9col { grid-column: span 9; grid-template-columns: repeat(9, minmax(0, 1fr)); }
|
||||
.grid-10col { grid-column: span 10; grid-template-columns: repeat(10, minmax(0, 1fr)); }
|
||||
.grid-11col { grid-column: span 11; grid-template-columns: repeat(11, minmax(0, 1fr)); }
|
||||
.grid-12col { grid-column: span 12; grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
||||
|
||||
.grid-start-2 { grid-column-start: 2; }
|
||||
.grid-start-3 { grid-column-start: 3; }
|
||||
.grid-start-4 { grid-column-start: 4; }
|
||||
.grid-start-5 { grid-column-start: 5; }
|
||||
.grid-start-6 { grid-column-start: 6; }
|
||||
.grid-start-7 { grid-column-start: 7; }
|
||||
.grid-start-8 { grid-column-start: 8; }
|
||||
.grid-start-9 { grid-column-start: 9; }
|
||||
.grid-start-10 { grid-column-start: 10; }
|
||||
.grid-start-11 { grid-column-start: 11; }
|
||||
.grid-start-12 { grid-column-start: 12; }
|
||||
|
||||
.grid-span-2 { grid-column-end: span 2; }
|
||||
.grid-span-3 { grid-column-end: span 3; }
|
||||
.grid-span-4 { grid-column-end: span 4; }
|
||||
.grid-span-5 { grid-column-end: span 5; }
|
||||
.grid-span-6 { grid-column-end: span 6; }
|
||||
.grid-span-7 { grid-column-end: span 7; }
|
||||
.grid-span-8 { grid-column-end: span 8; }
|
||||
.grid-span-9 { grid-column-end: span 9; }
|
||||
.grid-span-10 { grid-column-end: span 10; }
|
||||
.grid-span-11 { grid-column-end: span 11; }
|
||||
.grid-span-12 { grid-column-end: span 12; }
|
||||
|
||||
.flex-group-center,
|
||||
.flex-group-left,
|
||||
.flex-group-right {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flex-group-left {
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.flex-group-right {
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.flex-align-left { align-items: flex-start; }
|
||||
.flex-align-right { align-items: flex-end; }
|
||||
.gap-xs { gap: 2px; }
|
||||
.gap-sm { gap: 4px; }
|
||||
.gap-md { gap: 8px; }
|
||||
.gap-lg { gap: 16px; }
|
||||
.flexshrink { flex: 0; }
|
||||
.flex-between { justify-content: space-between; }
|
||||
.flexlarge { flex: 2; }
|
||||
|
||||
.align-left {
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
outline: none;
|
||||
border-radius: 3px;
|
||||
background: #577822;
|
||||
border: 1px solid var(--color-border-highlight);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.system-vermine2047 {
|
||||
.item-form {
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
.sheet-header {
|
||||
flex: 0 auto;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.profile-img {
|
||||
flex: 0 0 100px;
|
||||
height: 100px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.header-fields {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
h1.charname {
|
||||
height: 50px;
|
||||
padding: 0px;
|
||||
margin: 5px 0;
|
||||
border-bottom: 0;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sheet-tabs {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.sheet-body .tab,
|
||||
.editor {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.editor {
|
||||
min-height: 75px;
|
||||
margin-bottom: 1rem;
|
||||
min-width: 100%;
|
||||
|
||||
.editor-content {
|
||||
min-width: 100%;
|
||||
min-height: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.editor:hover .editor-edit {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tox {
|
||||
min-height: 25vh;
|
||||
|
||||
.tox-editor-container {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.tox-edit-area {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.resource-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.items-header {
|
||||
height: 28px;
|
||||
margin: 2px 0;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border: 2px groove #eeede0;
|
||||
font-weight: bold;
|
||||
|
||||
> * {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-weight: bold;
|
||||
padding-left: 5px;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.items-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
color: #444;
|
||||
|
||||
.item-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
flex: 2;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
h3, h4 {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.item-controls {
|
||||
display: flex;
|
||||
flex: 0;
|
||||
justify-content: flex-end;
|
||||
|
||||
a {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
align-items: center;
|
||||
padding: 0 2px;
|
||||
border-bottom: 1px solid #c9c7b8;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
color: @theme-color-dark;
|
||||
|
||||
.item-image {
|
||||
flex: 0 0 30px;
|
||||
height: 30px;
|
||||
background-size: 30px;
|
||||
border: none;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-prop {
|
||||
text-align: center;
|
||||
border-left: 1px solid #c9c7b8;
|
||||
border-right: 1px solid #c9c7b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.items-header {
|
||||
height: 28px;
|
||||
margin: 2px 0;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border: 2px groove #eeede0;
|
||||
font-weight: bold;
|
||||
|
||||
> * {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
padding-left: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.effects .item {
|
||||
.effect-source,
|
||||
.effect-duration,
|
||||
.effect-controls {
|
||||
text-align: center;
|
||||
border-left: 1px solid #c9c7b8;
|
||||
border-right: 1px solid #c9c7b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.effect-controls {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-formula {
|
||||
flex: 0 0 200px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
span.game-mode {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
position: absolute;
|
||||
margin-left: auto;
|
||||
color: rgba(0, 0, 0, 0);
|
||||
top: 1rem;
|
||||
z-index: 900;
|
||||
width: 55%;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.767) 0%,
|
||||
rgba(0, 0, 0, 0.61) 17%,
|
||||
rgba(0, 0, 0, 0.548) 19%,
|
||||
rgba(222, 255, 221, 0.575) 24%,
|
||||
rgba(255, 255, 255, 0.637) 43%,
|
||||
rgba(0, 0, 0, 0.486) 47%,
|
||||
rgba(254, 255, 254, 0.466) 50%,
|
||||
rgba(0, 0, 0, 0.699) 63%,
|
||||
rgba(134, 160, 137, 0.479) 64%,
|
||||
rgba(213, 248, 210, 0.493) 100%
|
||||
);
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
span.game-mode#game-mode-1 { color: @game-mode-1-color; }
|
||||
span.game-mode#game-mode-2 { color: @game-mode-2-color; }
|
||||
span.game-mode#game-mode-3 { color: @game-mode-3-color; }
|
||||
|
||||
.shadow {
|
||||
.shadow();
|
||||
}
|
||||
|
||||
ol#chat-log,
|
||||
ol.chat-log {
|
||||
header.message-header {
|
||||
background-color: #000;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.vermine-roll-message {
|
||||
overflow: hidden;
|
||||
padding: 4px 10px 10px;
|
||||
position: relative;
|
||||
|
||||
> h3 {
|
||||
font-family: "DistressBlack";
|
||||
text-transform: uppercase;
|
||||
font-size: @font-size-14;
|
||||
margin: 6px 0 8px;
|
||||
padding: 4px 10px;
|
||||
background: 50% 0% / cover no-repeat url("@{ui-path}/scotch.webp");
|
||||
box-shadow: 0px 0px 3px rgba(31, 26, 26, 0.3) inset;
|
||||
font-weight: 900;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
> .flexrow:not(.roll-total):not(.roll-results) {
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin: 4px 0;
|
||||
|
||||
h4 {
|
||||
font-family: "DistressBlack";
|
||||
text-transform: uppercase;
|
||||
font-size: @font-size-12;
|
||||
margin: 0;
|
||||
border-bottom: none;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: @font-size-12;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Reroll section ──────────────────────────────────────────────
|
||||
.reroll-fromroll {
|
||||
> h4 {
|
||||
font-family: "DistressBlack";
|
||||
text-transform: uppercase;
|
||||
font-size: @font-size-12;
|
||||
margin: 6px 0 4px;
|
||||
border-bottom: none;
|
||||
font-weight: 900;
|
||||
|
||||
#allowed_reroll {
|
||||
font-size: @font-size-12;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.reroll {
|
||||
.transition(0.3s);
|
||||
max-height: 1px;
|
||||
overflow: hidden;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
button {
|
||||
text-transform: uppercase;
|
||||
font-family: "DistressBlack";
|
||||
font-size: @font-size-12;
|
||||
padding: 2px 12px;
|
||||
max-width: fit-content;
|
||||
box-shadow: 0px 0px 2px #000;
|
||||
.background-image(url("@{ui-path}/scotch.webp"), no-repeat, cover, 50% 0%);
|
||||
}
|
||||
|
||||
&.visible { max-height: 15rem; }
|
||||
}
|
||||
|
||||
// ── Dice results ────────────────────────────────────────────────
|
||||
ul.roll-results {
|
||||
list-style: none;
|
||||
padding: 6px 0;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li.die {
|
||||
position: relative;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
flex: none;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
.transition();
|
||||
border-bottom: 4px solid @color-hemolymph;
|
||||
border-radius: 50%;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
text-wrap: nowrap;
|
||||
color: #fff;
|
||||
font-weight: 100;
|
||||
font-size: smaller;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
text-shadow: 0px 0px 5px #000;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
opacity: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.human { border-top: 4px solid @totem-human-color; }
|
||||
&.adapted { border-top: 4px solid @totem-adapted-color; }
|
||||
&.rerollable {
|
||||
cursor: pointer;
|
||||
&:hover { transform: translateY(0.5rem); }
|
||||
}
|
||||
&.success { border-bottom-color: @color-acid-green; }
|
||||
&.adapted::after { content: "adapté"; }
|
||||
&.human::after { content: "humain"; }
|
||||
&.rerolled { transform: translateY(0rem); }
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not([data-result]) {
|
||||
background-image: url("@{dice-path}/d10c-1.webp");
|
||||
opacity: 0.5;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Per-face dice background images
|
||||
.generate-dice-faces(@i: 1) when (@i =< 10) {
|
||||
li.die[data-result="@{i}"] {
|
||||
background-image: url("@{dice-path}/d10c-@{i}.webp");
|
||||
}
|
||||
.generate-dice-faces(@i + 1);
|
||||
}
|
||||
.generate-dice-faces();
|
||||
}
|
||||
|
||||
// ── Total section ───────────────────────────────────────────────
|
||||
div.roll-total {
|
||||
margin-top: 8px;
|
||||
padding: 8px 16px;
|
||||
background: 50% 0% / cover no-repeat url("@{ui-path}/scotch.webp");
|
||||
box-shadow: 0px 0px 3px rgba(31, 26, 26, 0.3) inset;
|
||||
border-radius: 2px;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: "DistressBlack";
|
||||
text-transform: uppercase;
|
||||
font-size: @font-size-12;
|
||||
margin: 0;
|
||||
border-bottom: none;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: "DistressBlack";
|
||||
font-size: @font-size-20;
|
||||
}
|
||||
|
||||
#total {
|
||||
color: @color-acid-green;
|
||||
text-shadow: 0 0 4px fade(@color-acid-green, 40%);
|
||||
}
|
||||
|
||||
#required {
|
||||
color: @color-amber;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.item-card header img {
|
||||
max-width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
// Padding supplémentaire pour les fiches groupe, npc et créature
|
||||
.system-vermine2047 {
|
||||
.group-content,
|
||||
.npc-content,
|
||||
.creature-content {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,475 @@
|
||||
@import "variables";
|
||||
@import "utilities";
|
||||
|
||||
.window-app.vermineDialog {
|
||||
max-width: 50vw;
|
||||
height: fit-content;
|
||||
|
||||
.window-content {
|
||||
.background-image(url("@{ui-path}/box_background.webp"), repeat);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
details > summary::after {
|
||||
content: "▶️";
|
||||
position: relative;
|
||||
right: 40%;
|
||||
}
|
||||
|
||||
details[open] > summary::after {
|
||||
content: "🔽";
|
||||
}
|
||||
|
||||
.grid {
|
||||
justify-content: space-around;
|
||||
.shadow(0px, 1px, 10px, rgba(0, 0, 0, 0.555));
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.2rem;
|
||||
|
||||
> * { margin: 0 0.3rem; }
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
select {
|
||||
max-width: fit-content;
|
||||
.custom-select-style();
|
||||
option { max-width: fit-content; }
|
||||
}
|
||||
|
||||
.dialog-buttons {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: row;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
flex: 0.3;
|
||||
color: @theme-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="range"] { .custom-input-style(); }
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] { .custom-checkbox-radio(); }
|
||||
|
||||
input[type="radio"] {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
|
||||
&:after {
|
||||
width: 0.8rem;
|
||||
background-size: 100% 100%;
|
||||
top: 5%;
|
||||
left: 5%;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
background-size: 30% 30%;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&:not([disabled]):hover::after { background-size: 90% 90%; }
|
||||
|
||||
&:checked::after {
|
||||
content: "";
|
||||
background-size: 70% 70%;
|
||||
top: 5%;
|
||||
left: 5%;
|
||||
position: relative;
|
||||
background-color: rgba(26, 1, 1, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.app.vermine2047.trait-selector {
|
||||
.form-group {
|
||||
.shadow(0, 0, 30px, gray);
|
||||
padding: 0.3rem 0.5rem;
|
||||
border: 3px solid #8e9010;
|
||||
|
||||
&:has(input[type="checkbox"]:checked) {
|
||||
border: 3px solid green;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app .actor.choose {
|
||||
div.actor {
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
.shadow(0px, 0px, 8px, #000);
|
||||
}
|
||||
|
||||
span.actor-name {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
background-color: rgba(255, 255, 255, 0.562);
|
||||
border: 5px;
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
border-radius: 5px;
|
||||
.shadow(0px, 0px, 8px, #000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
iframe {
|
||||
min-height: 500px;
|
||||
|
||||
.tabs.moods-headings {
|
||||
max-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Roll Dialog V2 ─────────────────────────────────────────────────────
|
||||
.application.vermine-roll {
|
||||
.window-content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.roll-dialog-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
color: @color-text-light-0;
|
||||
|
||||
.dice-pool {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: inherit;
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: @font-size-12;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
color: @color-chitin-dark;
|
||||
background: @color-text-light-0;
|
||||
}
|
||||
|
||||
select {
|
||||
.custom-select-style();
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type="range"] { .custom-input-style(); }
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] { .custom-checkbox-radio(); }
|
||||
|
||||
// ── Main roll section: ability + skill side-by-side ─────────────
|
||||
.main-roll-section {
|
||||
gap: 10px;
|
||||
|
||||
> .flexcol {
|
||||
flex: 1;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
|
||||
> label {
|
||||
font-size: @font-size-13;
|
||||
color: @color-amber;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
select {
|
||||
min-height: 28px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.ability-score {
|
||||
gap: 4px;
|
||||
font-size: @font-size-12;
|
||||
color: @color-text-light-0;
|
||||
opacity: 0.85;
|
||||
|
||||
#abilityScoreValue {
|
||||
font-weight: bold;
|
||||
color: @color-acid-green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Collapsible sections (specialties, difficulty, bonuses) ─────
|
||||
details {
|
||||
margin-top: 2px;
|
||||
|
||||
summary {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: @font-size-12;
|
||||
padding: 6px 10px;
|
||||
background: 50% 0% / cover no-repeat url("@{ui-path}/scotch.webp");
|
||||
box-shadow: 0px 0px 3px rgba(31, 26, 26, 0.5) inset;
|
||||
cursor: pointer;
|
||||
color: @theme-color-dark;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
&::after {
|
||||
content: "▶";
|
||||
margin-left: auto;
|
||||
font-size: @font-size-11;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px @theme-color-highlight inset;
|
||||
}
|
||||
|
||||
span.label {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
font-size: @font-size-12;
|
||||
}
|
||||
|
||||
.current-values,
|
||||
.current-specialty,
|
||||
.bonus-count {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: @font-size-11;
|
||||
text-transform: none;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
&[open] > summary::after {
|
||||
content: "▼";
|
||||
}
|
||||
|
||||
> div:not(summary) {
|
||||
padding: 8px;
|
||||
background: fade(@color-chitin-dark, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Difficulty section ──────────────────────────────────────────
|
||||
.difficulty-controls {
|
||||
gap: 12px;
|
||||
|
||||
> .flexcol {
|
||||
flex: 1;
|
||||
gap: 4px;
|
||||
|
||||
label {
|
||||
font-size: @font-size-11;
|
||||
color: @color-amber;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Specialties section ─────────────────────────────────────────
|
||||
.specialty-options {
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: @font-size-12;
|
||||
font-family: "Roboto", sans-serif;
|
||||
text-transform: none;
|
||||
color: @color-text-light-0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @color-amber;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Bonuses grid ────────────────────────────────────────────────
|
||||
.bonus-grid {
|
||||
margin: 0;
|
||||
gap: 8px;
|
||||
|
||||
.bonus-item {
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 0;
|
||||
|
||||
> label.label {
|
||||
font-size: @font-size-11;
|
||||
color: @color-text-light-0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label {
|
||||
font-size: @font-size-12;
|
||||
font-family: "Roboto", sans-serif;
|
||||
text-transform: none;
|
||||
color: @color-text-light-0;
|
||||
}
|
||||
|
||||
.item-list {
|
||||
gap: 4px;
|
||||
|
||||
label {
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: @font-size-11;
|
||||
font-family: "Roboto", sans-serif;
|
||||
text-transform: none;
|
||||
color: @color-text-light-0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @color-amber;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
// Totems sub-section
|
||||
.totems-section {
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
|
||||
> label.label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.totem-options {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.totem-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: @color-text-light-0;
|
||||
font-size: @font-size-12;
|
||||
font-family: "Roboto", sans-serif;
|
||||
text-transform: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @color-amber;
|
||||
}
|
||||
|
||||
small {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.totem-hint {
|
||||
width: 100%;
|
||||
font-size: @font-size-11;
|
||||
color: @color-text-light-0;
|
||||
opacity: 0.6;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Total dice pool section ─────────────────────────────────────
|
||||
.total-section {
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-top: 1px solid @color-border-dark-4;
|
||||
margin-top: 4px;
|
||||
gap: 10px;
|
||||
background: fade(@color-chitin-dark, 50%);
|
||||
|
||||
.label {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: @font-size-16;
|
||||
color: @color-text-light-0;
|
||||
}
|
||||
|
||||
.total-value {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
font-size: @font-size-28;
|
||||
color: @color-acid-green;
|
||||
text-shadow: 0 0 8px fade(@color-acid-green, 40%);
|
||||
}
|
||||
|
||||
.totem-selector {
|
||||
font-size: @font-size-11;
|
||||
color: @color-text-light-0;
|
||||
opacity: 0.7;
|
||||
margin-left: auto;
|
||||
|
||||
select {
|
||||
font-size: @font-size-11;
|
||||
padding: 1px 4px;
|
||||
width: auto;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Footer buttons ───────────────────────────────────────────────
|
||||
.sheet-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
margin-top: auto;
|
||||
border-top: 1px solid @color-border-dark-4;
|
||||
background: fade(@color-chitin-dark, 60%);
|
||||
|
||||
button {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: @font-size-13;
|
||||
padding: 6px 20px;
|
||||
border: none;
|
||||
background: 50% 0% / cover no-repeat url("@{ui-path}/scotch.webp");
|
||||
box-shadow: 0px 0px 3px rgba(31, 26, 26, 0.979) inset;
|
||||
cursor: pointer;
|
||||
color: @theme-color-dark;
|
||||
.transition();
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px @theme-color-highlight inset;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: @font-size-14;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
@import "variables";
|
||||
@import "utilities";
|
||||
|
||||
.system-vermine2047 .item-formula {
|
||||
flex: 0 0 200px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.system-vermine2047 .vermine2047.item .window-content {
|
||||
padding: 0 1rem;
|
||||
|
||||
.flexrow { align-items: center; }
|
||||
|
||||
header, h1, h2, h3, h4, h5 {
|
||||
.background-image(url("@{ui-path}/scotch.webp"), no-repeat, cover, 50% 50%);
|
||||
text-transform: uppercase;
|
||||
font-family: "DistressBlack";
|
||||
margin-top: 1rem;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
h2, h3, h4 { text-align: center; }
|
||||
h5 { margin-bottom: 0; }
|
||||
|
||||
.resource-label {
|
||||
font-size: 0.75rem;
|
||||
color: @color-text-light-2;
|
||||
text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.resource {
|
||||
border: none;
|
||||
border-left: 1px solid gray;
|
||||
padding: 0.2rem 1rem;
|
||||
text-align: center;
|
||||
|
||||
.flexrow {
|
||||
min-width: 5rem;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.damages-row {
|
||||
margin: 0;
|
||||
.radios {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.damage-pannes,
|
||||
.damage-state,
|
||||
.damage-effect {
|
||||
text-align: center;
|
||||
font-family: "DistressBlack";
|
||||
}
|
||||
|
||||
select {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
color: @color-text-light-1;
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
border: none;
|
||||
box-shadow: 0px 0px 3px rgba(31, 26, 26, 0.979) inset;
|
||||
text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
option {
|
||||
background: #1a1a1a;
|
||||
color: @color-text-light-1;
|
||||
}
|
||||
|
||||
.traits {
|
||||
.shadow();
|
||||
|
||||
h3, h4 { margin: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
ol#chat-log div.item-card header img,
|
||||
ol.chat-log div.item-card header img {
|
||||
max-width: 30%;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
.sans-font {
|
||||
font-family: "DistressBlack", sans-serif;
|
||||
}
|
||||
|
||||
.chat-message .message-header {
|
||||
line-height: 20px;
|
||||
color: white;
|
||||
text-shadow: 0px 0px 5px black;
|
||||
background: #1918135e;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.flexsmall {
|
||||
flex: 0.5;
|
||||
}
|
||||
@@ -0,0 +1,257 @@
|
||||
// ============================================
|
||||
// Utilitaires LESS pour Vermine2047
|
||||
// Mixins, fonctions et classes utilitaires
|
||||
// ============================================
|
||||
|
||||
// Mixin pour les ombres standard
|
||||
.shadow() {
|
||||
box-shadow: 0 2rem @theme-color-shadow;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.shadow(@color) {
|
||||
box-shadow: 0 2rem @color;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.shadow(@color, @blur) {
|
||||
box-shadow: 0 @blur @color;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.shadow(@h-offset, @v-offset, @blur, @color) {
|
||||
box-shadow: @h-offset @v-offset @blur @color;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
// Mixin pour le style des hexagones
|
||||
.hexa-style(@bg-color: rgba(255, 255, 255, 0.425), @bg-color-end: rgba(0, 0, 0, 0.288)) {
|
||||
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
|
||||
background: radial-gradient(circle, @bg-color 0%, @bg-color-end 100%);
|
||||
max-height: 1.5rem;
|
||||
max-width: 1.5rem;
|
||||
min-width: 1.5rem;
|
||||
aspect-ratio: 1/1;
|
||||
color: #000;
|
||||
vertical-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Mixin pour les boutons rollable
|
||||
.rollable-style() {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #000;
|
||||
text-shadow: 0 0 10px red;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin pour les inputs de type hexa
|
||||
.input-hexa-style() {
|
||||
.hexa-style();
|
||||
input {
|
||||
width: 1rem;
|
||||
}
|
||||
input[type="radio"] {
|
||||
opacity: 0;
|
||||
}
|
||||
input[type="radio"]::after,
|
||||
input[type="radio"]::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin pour les classes flex
|
||||
.flex-container(@direction: row, @wrap: nowrap, @justify: flex-start, @align: stretch) {
|
||||
display: flex;
|
||||
flex-direction: @direction;
|
||||
flex-wrap: @wrap;
|
||||
justify-content: @justify;
|
||||
align-items: @align;
|
||||
}
|
||||
|
||||
// Mixin pour le style des cartes
|
||||
.card-style(@bg-color: rgba(0, 0, 0, 0.1), @border-color: #444) {
|
||||
border: 1px solid @border-color;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
background: @bg-color;
|
||||
}
|
||||
|
||||
// Mixin pour les titres de carte
|
||||
.card-title(@border-color: #666) {
|
||||
margin-top: 0;
|
||||
border-bottom: 1px solid @border-color;
|
||||
padding-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Mixin pour les éléments de liste avec bordure
|
||||
.list-item-with-border(@border-color: #333) {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid @border-color;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin pour les groupes de formulaires
|
||||
.form-group-style(@margin-bottom: 10px) {
|
||||
margin-bottom: @margin-bottom;
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 3px;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin pour les ressources
|
||||
.resource-style(@bg-color: rgba(0, 0, 0, 0.05)) {
|
||||
padding: 5px;
|
||||
background: @bg-color;
|
||||
border-radius: 4px;
|
||||
margin: 0 5px;
|
||||
label {
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
min-width: 60px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.resource-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin pour les badges de rareté
|
||||
.rarity-badge(@bg-color, @text-color) {
|
||||
display: inline-block;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
background: @bg-color;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
// Mixin pour le fond avec image
|
||||
.background-image(@url, @repeat: no-repeat, @size: auto, @position: center) {
|
||||
background: @url @repeat @position / @size;
|
||||
}
|
||||
|
||||
// Mixin pour les transitions
|
||||
.transition(@property: all, @duration: 0.2s, @timing: ease-out) {
|
||||
transition: @property @duration @timing;
|
||||
}
|
||||
|
||||
// Mixin pour les styles de l'éditeur TinyMCE
|
||||
.tiny-mce-style() {
|
||||
.tox {
|
||||
min-height: 25vh;
|
||||
.tox-editor-container {
|
||||
background: #fff;
|
||||
}
|
||||
.tox-edit-area {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin pour les styles des inputs personnalisés
|
||||
.custom-input-style() {
|
||||
appearance: none;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
.background-image(url("@{ui-path}/scotch.webp"), no-repeat, auto, center);
|
||||
background-size: 100% auto;
|
||||
height: 0.4rem;
|
||||
border: none;
|
||||
box-shadow: 0px 0px 13px rgba(31, 26, 26, 0.979) inset;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
margin-top: -0.3rem;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
.background-image(url("@{totems-path}/human.webp"), no-repeat, cover);
|
||||
filter: contrast(2);
|
||||
box-shadow: 0px 0px 10px #000;
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0px 0px 10px #ff0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin pour les checkbox et radio boutons personnalisés
|
||||
.custom-checkbox-radio() {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
box-shadow: 0px 0px 3px #85854e;
|
||||
cursor: pointer;
|
||||
width: 1.5rem;
|
||||
height: 1rem;
|
||||
border-radius: 0.4rem;
|
||||
.transition();
|
||||
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
|
||||
box-shadow: 0px 0px 6px #000 inset;
|
||||
background-color: rgba(61, 11, 11, 0.658);
|
||||
|
||||
&[disabled=true] {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: " ";
|
||||
.background-image(url("@{totems-path}/human.webp"), no-repeat, auto, 50% 150%);
|
||||
position: relative;
|
||||
top: 10%;
|
||||
left: 0%;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
display: block;
|
||||
border-radius: 0%;
|
||||
padding: 0;
|
||||
.transition();
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: rgba(26, 107, 12, 0.658);
|
||||
&:after {
|
||||
font-weight: 900;
|
||||
background-color: rgba(26, 1, 1, 0);
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin pour les selects personnalisés
|
||||
.custom-select-style() {
|
||||
border: none;
|
||||
.background-image(url("@{ui-path}/scotch.webp"), no-repeat, auto, 100% 100%);
|
||||
box-shadow: 0px 0px 3px rgba(31, 26, 26, 0.979) inset;
|
||||
|
||||
&[disabled] {
|
||||
color: #000;
|
||||
text-shadow: 0px 0px 15px #000;
|
||||
}
|
||||
|
||||
option {
|
||||
appearance: none;
|
||||
border: none;
|
||||
.background-image(url("@{ui-path}/scotch.webp"), no-repeat, auto, 100% 100%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,175 @@
|
||||
// ============================================
|
||||
// Variables LESS pour Vermine2047
|
||||
// Converti depuis les variables CSS du fichier vermine2047.css
|
||||
// ============================================
|
||||
|
||||
// Couleurs de texte - clair
|
||||
@color-text-light-highlight: #96d696;
|
||||
@color-text-light-heading: #9fd8a8;
|
||||
@color-text-light-primary: #a4b5b3;
|
||||
|
||||
// Couleurs de texte - foncé
|
||||
@color-text-dark-primary: #131919;
|
||||
@color-text-dark-secondary: #444b4a;
|
||||
@color-text-dark-header: #1d2223;
|
||||
@color-text-dark-inactive: #71797a;
|
||||
|
||||
// Couleurs de texte - autres
|
||||
@color-text-hyperlink: #5aaf0a;
|
||||
|
||||
// Niveaux de gris pour le texte clair
|
||||
@color-text-light-0: #fff;
|
||||
@color-text-light-1: #e0f0f0;
|
||||
@color-text-light-2: #c9e0c0;
|
||||
@color-text-light-3: #90c4a4;
|
||||
@color-text-light-4: #80c08b;
|
||||
@color-text-light-5: #60b06b;
|
||||
@color-text-light-6: #40a05d;
|
||||
@color-text-light-7: #208028;
|
||||
|
||||
// Niveaux de gris pour le texte foncé
|
||||
@color-text-dark-1: #111;
|
||||
@color-text-dark-2: #222;
|
||||
@color-text-dark-3: #444;
|
||||
@color-text-dark-4: #555;
|
||||
@color-text-dark-5: #666;
|
||||
@color-text-dark-6: #777;
|
||||
|
||||
// Couleurs de bordure - clair
|
||||
@color-border-light-1: #b0d9b0;
|
||||
@color-border-light-2: #80c0c0;
|
||||
|
||||
// Couleurs de bordure - foncé
|
||||
@color-border-dark-1: #131919;
|
||||
@color-border-dark-2: #1d2223;
|
||||
@color-border-dark-3: #2d3333;
|
||||
@color-border-dark-4: #3d4444;
|
||||
@color-border-dark-5: #668888;
|
||||
|
||||
// Couleurs d'ombre
|
||||
@color-shadow-primary: #7bb60d;
|
||||
@color-shadow-highlight: #85cc01d0;
|
||||
@color-shadow-dark: #000;
|
||||
|
||||
// Couleurs de soulignement
|
||||
@color-underline-inactive: #71797a;
|
||||
@color-underline-active: #1a1944;
|
||||
@color-underline-header: #228247;
|
||||
|
||||
// Couleurs de bordure - autres
|
||||
@color-border-light-highlight: #b0d9b0;
|
||||
@color-border-light-primary: #a4b5b3;
|
||||
@color-border-light-secondary: #9fc7d8;
|
||||
@color-border-light-tertiary: #71797a;
|
||||
@color-border-dark: #000;
|
||||
@color-border-dark-primary: #131919;
|
||||
@color-border-dark-secondary: #1d2223;
|
||||
@color-border-dark-tertiary: #444b4a;
|
||||
@color-border-highlight: #85c019;
|
||||
@color-border-highlight-alt: #70c008;
|
||||
|
||||
// Couleurs de fond
|
||||
@color-bg-btn-minor-inactive: #9fc7d8;
|
||||
@color-bg-btn-minor-active: #a4b5b3;
|
||||
@color-bg-option: #ccdada;
|
||||
|
||||
// Autres couleurs
|
||||
@color-checkbox-checked: #666;
|
||||
@color-ownership-none: #00ff55;
|
||||
@color-ownership-observer: #71797a;
|
||||
@color-ownership-owner: #a4b5b3;
|
||||
|
||||
// Niveaux de log
|
||||
@color-level-info: #b95c87;
|
||||
@color-level-warning: #04b184;
|
||||
@color-level-error: #03750;
|
||||
@color-level-success: #3c266c;
|
||||
|
||||
// Z-index
|
||||
@z-index-canvas: 0;
|
||||
@z-index-app: 30;
|
||||
@z-index-ui: 60;
|
||||
@z-index-window: 100;
|
||||
@z-index-tooltip: 9999;
|
||||
|
||||
// Dimensions
|
||||
@sidebar-width: 300px;
|
||||
@sidebar-header-height: 32px;
|
||||
@sidebar-item-height: 48px;
|
||||
@hotbar-height: 52px;
|
||||
@hotbar-width: 578px;
|
||||
@macro-size: 50px;
|
||||
@players-width: 200px;
|
||||
@form-field-height: 26px;
|
||||
|
||||
// Polices
|
||||
@font-mono: monospace;
|
||||
|
||||
// Tailles de police
|
||||
@font-size-11: 0.6875rem;
|
||||
@font-size-12: 0.75rem;
|
||||
@font-size-13: 0.8125rem;
|
||||
@font-size-14: 0.875rem;
|
||||
@font-size-16: 1rem;
|
||||
@font-size-18: 1.125rem;
|
||||
@font-size-20: 1.25rem;
|
||||
@font-size-24: 1.5rem;
|
||||
@font-size-28: 1.75rem;
|
||||
@font-size-32: 2rem;
|
||||
@font-size-48: 3rem;
|
||||
|
||||
// Hauteurs de ligne
|
||||
@line-height-12: 0.75rem;
|
||||
@line-height-16: 1rem;
|
||||
@line-height-20: 1.25rem;
|
||||
@line-height-30: 1.875rem;
|
||||
|
||||
// ============================================
|
||||
// Variables spécifiques Vermine2047
|
||||
// ============================================
|
||||
|
||||
// Couleurs thématiques
|
||||
@theme-color-primary: #7e7544;
|
||||
@theme-color-secondary: #dfdfdf;
|
||||
@theme-color-accent: #1fa832;
|
||||
@theme-color-dark: #191813;
|
||||
@theme-color-light: #4e564c;
|
||||
@theme-color-shadow: rgba(0, 0, 0, 0.7098039216);
|
||||
@theme-color-highlight: #005a3c;
|
||||
|
||||
// Couleurs insecte / organique
|
||||
@color-acid-green: #6ab04c;
|
||||
@color-amber: #e8b84b;
|
||||
@color-chitin-dark: #2a2520;
|
||||
@color-hemolymph: #8b4513;
|
||||
@color-membrane: rgba(106, 176, 76, 0.1);
|
||||
@color-honeycomb: #c9a84c;
|
||||
|
||||
// Couleurs pour les dés et totems
|
||||
@dice-pool-color: rgb(94, 90, 77);
|
||||
@dice-reroll-color: rgb(187, 182, 165);
|
||||
@totem-human-color: #064930;
|
||||
@totem-adapted-color: #553402;
|
||||
|
||||
// Couleurs pour les niveaux de rareté
|
||||
@rarity-0-bg: #444;
|
||||
@rarity-0-text: #aaa;
|
||||
@rarity-1-bg: #5a7a5a;
|
||||
@rarity-1-text: #fff;
|
||||
@rarity-2-bg: #7a9a7a;
|
||||
@rarity-2-text: #000;
|
||||
@rarity-3-bg: #9a5a9a;
|
||||
@rarity-3-text: #fff;
|
||||
|
||||
// Couleurs pour les modes de jeu
|
||||
@game-mode-1-color: rgba(235, 218, 143, 0.8);
|
||||
@game-mode-2-color: #83f883;
|
||||
@game-mode-3-color: rgba(245, 124, 124, 0.8);
|
||||
|
||||
// Chemins des assets
|
||||
@assets-path: "/systems/vermine2047/assets";
|
||||
@images-path: "@{assets-path}/images";
|
||||
@fonts-path: "@{assets-path}/fonts";
|
||||
@ui-path: "@{images-path}/ui";
|
||||
@totems-path: "@{images-path}/ui/totems";
|
||||
@dice-path: "@{assets-path}/dice";
|
||||
@@ -0,0 +1,37 @@
|
||||
// ============================================
|
||||
// Fichier principal LESS pour Vermine2047
|
||||
// Ce fichier importe tous les modules LESS
|
||||
// ============================================
|
||||
|
||||
// 1. Import de police Google (doit être en premier car c'est du CSS pur)
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
|
||||
|
||||
// 2. Variables et utilitaires (doivent être importés avant tout le reste)
|
||||
@import "variables";
|
||||
@import "utilities";
|
||||
|
||||
// 3. Styles de base
|
||||
@import "base";
|
||||
|
||||
// 4. Legacy SCSS converti en LESS
|
||||
@import "legacy";
|
||||
|
||||
// 5. Styles des acteurs
|
||||
@import "actor/actor";
|
||||
@import "actor/totem";
|
||||
@import "actor/npc";
|
||||
@import "actor/group";
|
||||
@import "actor/creature";
|
||||
|
||||
// 6. Styles des items
|
||||
@import "items";
|
||||
|
||||
// 7. Styles des dialogs
|
||||
@import "dialogs";
|
||||
|
||||
// ============================================
|
||||
// Notes:
|
||||
// - L'ordre des imports est important
|
||||
// - Les variables doivent être définies avant d'être utilisées
|
||||
// - Les mixins doivent être définis avant d'être appelés
|
||||
// ============================================
|
||||
Reference in New Issue
Block a user