forked from public/foundryvtt-reve-de-dragon
Nouvelle fenêtre de jets de dés
This commit is contained in:
@@ -12,14 +12,14 @@
|
||||
|
||||
/* =================== 3. some constants ============ */
|
||||
--fieldset-background: url(/ui/parchment.jpg);
|
||||
--rdd-color-text-primary: rgba(10, 10, 10, 0.9);
|
||||
--rdd-input-background:rgba(0, 0, 0, 0.05);
|
||||
--rdd-color-border-input: rgba(0, 0, 0, 0.2);
|
||||
--rdd-bg-input: rgba(255, 255, 255, 0.1);
|
||||
--color-controls:rgba(0, 0, 0, 0.9);
|
||||
--rdd-color-text-primary: hsla(0, 0%, 4%, 0.9);
|
||||
--rdd-input-background:hsla(0, 0%, 0%, 0.1);
|
||||
--rdd-color-border-input: hsla(0, 0%, 0%, 0.2);
|
||||
--rdd-bg-input: hsla(0, 0%, 100%, 0.1);
|
||||
--color-controls:hsla(0, 0%, 0%, 0.9);
|
||||
--color-controls-light:hsla(0, 0%, 20%, 0.8);
|
||||
--color-controls-hover:hsla(60, 100%, 75%, 0.7);
|
||||
--color-control-border-hover:rgba(255, 128, 0, 0.8);
|
||||
--color-control-border-hover:hsla(30, 100%, 50%, 0.8);
|
||||
--color-gold: rgba(191, 149, 63, 0.8);
|
||||
--gradient-gold: linear-gradient(30deg, rgba(191, 149, 63, 0.3), rgba(252, 246, 186, 0.3), rgba(179, 135, 40, 0.3), rgba(251, 245, 183, 0.3), rgba(170, 119, 28, 0.3));
|
||||
--gradient-silver: linear-gradient(30deg, rgba(61, 55, 93, 0.3), rgba(178, 179, 196, 0.3), rgba(59, 62, 63, 0.6), rgba(206, 204, 199, 0.3), rgba(61, 46, 49, 0.3));
|
||||
@@ -39,12 +39,20 @@
|
||||
hsla(50, 100%, 80%, 0.7)
|
||||
);
|
||||
|
||||
--background-custom-button: linear-gradient(to bottom, rgba(33, 55, 74, 0.988) 5%, rgba(21, 40, 51, 0.671) 100%);
|
||||
--background-custom-button-hover: linear-gradient(to bottom, rgb(128, 0, 0) 5%, rgb(62, 1, 1) 100%);
|
||||
--background-custom-button: linear-gradient(to bottom, hsla(208, 38%, 21%, 0.988) 5%, hsla(202, 42%, 14%, 0.671) 100%);
|
||||
--background-custom-button-hover: linear-gradient(to bottom, hsla(0, 100%, 25%, 1) 5%, hsla(0, 97%, 12%, 1) 100%);
|
||||
--background-control-selected: linear-gradient(to bottom, hsla(0, 100%, 25%, 0.5) 5%, hsla(0, 100%, 12%, 0.5) 100%);
|
||||
--background-tooltip: hsla(60, 12%, 85%, 0.95);
|
||||
--background-tooltip-alt: hsla(60, 12%, 74%, 0.95);
|
||||
--color-tooltip:hsla(282, 47%, 33%, 0.9);
|
||||
--color-tooltip-faint:hsla(282, 47%, 66%, 0.5);
|
||||
--background-error:hsla(16, 100%, 50%, 0.8);
|
||||
--color-profile-border: hsla(0, 0%, 80%, 0.05);
|
||||
|
||||
--color-background-chat-message: hsla(60, 12%, 85%, 0.9);
|
||||
--color-background-chat-whisper: repeating-linear-gradient(120deg,
|
||||
hsla(60, 12%, 85%, 0.75),
|
||||
hsla(60, 12%, 85%, 0.75) 1rem,
|
||||
hsla(60, 12%, 85%, 0.8) 1rem,
|
||||
hsla(60, 12%, 85%, 0.75) 1.5rem);
|
||||
}
|
||||
|
||||
@@ -59,6 +59,7 @@
|
||||
}
|
||||
|
||||
/* Global styles & Font */
|
||||
.application,
|
||||
.window-app {
|
||||
font-family: CaslonAntique;
|
||||
text-align: justify;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
@import "item/monnaie.less";
|
||||
@import "item/munition.less";
|
||||
@import "item/tarot.less";
|
||||
|
||||
@import "roll-dialog.less";
|
||||
.window-header{
|
||||
background: rgba(0,0,0,0.75);
|
||||
}
|
||||
@@ -833,20 +833,18 @@
|
||||
}
|
||||
|
||||
.poesie-extrait {
|
||||
max-height: 12rem;
|
||||
max-height: 8rem;
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
color: rgba(82, 17, 131, 0.9);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.poesie-extrait:hover {
|
||||
max-height: unset;
|
||||
overflow: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.poesie-extrait.poesie-overflow {
|
||||
max-height: 2rem;
|
||||
}
|
||||
|
||||
.poesie-reference {
|
||||
font-size: 0.7rem;
|
||||
|
||||
220
less/roll-dialog.less
Normal file
220
less/roll-dialog.less
Normal file
@@ -0,0 +1,220 @@
|
||||
.roll-dialog {
|
||||
font-family: CaslonAntique;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"header header header header header header header"
|
||||
"action action action action action action action"
|
||||
"mode separation separation separation separation separation separation"
|
||||
"mode carac carac carac comp comp resume"
|
||||
"mode choix choix choix choix choix modifiers"
|
||||
"mode resolution resolution resolution resolution resolution modifiers"
|
||||
"mode chances chances chances chances chances buttons"
|
||||
"footer footer footer footer footer footer footer";
|
||||
grid-template-columns: 2rem 1rem 1fr 1fr 2fr 2fr 3fr;
|
||||
gap: 0.2rem;
|
||||
|
||||
roll-header { grid-area: header; }
|
||||
roll-line { grid-area: separation; }
|
||||
roll-action { grid-area: action; }
|
||||
roll-carac { grid-area: carac; }
|
||||
roll-comp { grid-area: comp; }
|
||||
|
||||
roll-choix { grid-area: choix; }
|
||||
|
||||
roll-table { grid-area: resolution; }
|
||||
roll-conditions { grid-area: modifiers; }
|
||||
roll-chances { grid-area: chances; }
|
||||
roll-resume { grid-area: resume; }
|
||||
roll-buttons { grid-area: buttons; }
|
||||
|
||||
roll-mode {
|
||||
grid-area: mode;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
roll-conditions roll-section[name="rollmode"],
|
||||
roll-mode {
|
||||
button[data-checked="true"] {
|
||||
background-color: var(--color-text-selection-bg);
|
||||
color: var(--color-controls);
|
||||
i { filter: invert(0.8); }
|
||||
img { filter: invert(0.2); }
|
||||
}
|
||||
button {
|
||||
height: 1.8rem;
|
||||
width: 1.8rem;
|
||||
gap: 0.5rem;
|
||||
padding: 0.2rem;
|
||||
background-color: var(--button-background-color);
|
||||
color: var(--color-controls);
|
||||
i { filter: invert(0.2); }
|
||||
img { filter: invert(0.8); }
|
||||
}
|
||||
}
|
||||
|
||||
:is(roll-carac, roll-comp) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
roll-section,
|
||||
roll-section div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: anchor-center;
|
||||
margin: 0 0.2rem;
|
||||
}
|
||||
|
||||
roll-resume {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
img.button-effect-img {
|
||||
filter: invert(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
roll-choix roll-section {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"selection selection"
|
||||
"img roll-part";
|
||||
grid-template-columns: 3.2rem 1fr;
|
||||
gap: 0.2rem;
|
||||
align-items: start;
|
||||
|
||||
subline {
|
||||
grid-area: selection;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
roll-part-img {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-area: img;
|
||||
img{
|
||||
border: 0;
|
||||
padding: 1px;
|
||||
max-height: 3rem;
|
||||
max-width: 3rem;
|
||||
object-fit: contain;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
roll-part-detail {
|
||||
grid-area: roll-part;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: normal;
|
||||
|
||||
subline {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
div.poesie-extrait{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
roll-section selected-numeric-value {
|
||||
display: flow;
|
||||
width: 2.5rem;
|
||||
text-align: right;
|
||||
margin: 0 0.2rem 0 0.5rem;
|
||||
padding: 0 0.2rem;
|
||||
}
|
||||
|
||||
roll-action {
|
||||
flex-basis: content;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-bottom: 0.2rem solid;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
|
||||
roll-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
img.action-img {
|
||||
float: left;
|
||||
}
|
||||
img {
|
||||
max-width: 3rem;
|
||||
max-height: 3rem;
|
||||
margin: 0 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
roll-conditions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
:is(roll-action, roll-carac, roll-comp) roll-section {
|
||||
flex-basis: content;
|
||||
}
|
||||
|
||||
:is(roll-choix, roll-conditions, roll-carac, roll-comp) {
|
||||
select {
|
||||
max-height: 1.6rem;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0 0.2rem;
|
||||
}
|
||||
input[type="number"] {
|
||||
max-height: 1.6rem;
|
||||
max-width: 2.5rem;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0 0.2rem;
|
||||
}
|
||||
img {
|
||||
max-width: 1.8rem;
|
||||
max-height: 1.8rem;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
roll-carac select[name="select-carac"] {
|
||||
max-width: 6rem;
|
||||
|
||||
}
|
||||
roll-comp select[name="select-comp"] {
|
||||
min-width: 8rem;
|
||||
max-width: 11rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
roll-conditions roll-section[name="coeur"] select[name="coeur"] {
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
roll-conditions roll-section[name="tricher"] img {
|
||||
/* image de d100 */
|
||||
max-width: 2.5rem;
|
||||
max-height: 2.5rem;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
filter: invert(0.8);
|
||||
}
|
||||
|
||||
roll-buttons {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
roll-table {
|
||||
table tr :is(th, td) {
|
||||
padding: 0.1rem;
|
||||
width: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user