Migration vers datamodels
This commit is contained in:
51
styles/_variables.less
Normal file
51
styles/_variables.less
Normal file
@@ -0,0 +1,51 @@
|
||||
// ============================================================
|
||||
// Ecryme LESS Variables
|
||||
// ============================================================
|
||||
|
||||
// Background & images
|
||||
@background-image: url("../images/ui/fond_carnet_01.webp");
|
||||
@logo-image: url("../images/ui/ecryme_logo_small_01.webp");
|
||||
|
||||
// Text colors
|
||||
@color-text-dark: rgba(19, 18, 18, 0.95);
|
||||
@color-text-disabled: #1c2058;
|
||||
|
||||
// Input / select
|
||||
@color-input-bg: white;
|
||||
@color-input-text: #494e6b;
|
||||
|
||||
// Navigation
|
||||
@color-nav-bg: #252525;
|
||||
@color-nav-text: beige;
|
||||
|
||||
// Accent & interaction
|
||||
@color-accent: #ff6600;
|
||||
|
||||
// Dark UI controls
|
||||
@color-control-dark: rgba(30, 25, 20, 1);
|
||||
@color-control-warm: rgba(72, 46, 28, 1);
|
||||
|
||||
// Typography
|
||||
@font-primary: "MailartRubberstamp";
|
||||
|
||||
// ============================================================
|
||||
// Steampunk palette — Ecryme (industrial acid world)
|
||||
// ============================================================
|
||||
@steam-dark: #1A1510; // charbon / fer sombre
|
||||
@steam-metal: #252018; // métal industriel
|
||||
@steam-metal-mid: #352E22; // métal moyen
|
||||
@steam-brass: #B87333; // laiton
|
||||
@steam-brass-light: #D4963A; // laiton clair / reflet
|
||||
@steam-brass-dark: #7A4E1E; // laiton sombre
|
||||
@steam-copper: #C07038; // cuivre
|
||||
@steam-gold: #D4AF37; // or vieilli
|
||||
@steam-rust: #5C2A0A; // rouille
|
||||
@steam-parchment: #EAD9A8; // parchemin / papier vieilli
|
||||
@steam-parchment-dk:#D4BF84; // parchemin sombre
|
||||
@steam-cream: #F2EAD0; // crème
|
||||
@steam-acid: #6B9420; // vert acide industriel (muted)
|
||||
@steam-acid-bright: #9ACD32; // vert acide vif
|
||||
@steam-acid-dark: #3B5412; // vert acide profond
|
||||
@steam-success: #4A7A18; // vert succès
|
||||
@steam-failure: #7B1E1E; // rouge rouille échec
|
||||
@steam-rivet: #8A7055; // couleur rivet
|
||||
430
styles/actor-sheet-steampunk.less
Normal file
430
styles/actor-sheet-steampunk.less
Normal file
@@ -0,0 +1,430 @@
|
||||
// ============================================================
|
||||
// Actor sheets — Steampunk theme
|
||||
// Scoped to .fvtt-ecryme.sheet.actor and .fvtt-ecryme.sheet.annency
|
||||
// Applies visual theming without touching layout or tab structure.
|
||||
// ============================================================
|
||||
|
||||
.fvtt-ecryme.sheet.actor,
|
||||
.fvtt-ecryme.sheet.annency {
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// AppV2 window title bar — brass plate
|
||||
// ----------------------------------------------------------
|
||||
.window-header {
|
||||
.brass-gradient();
|
||||
border-bottom: 2px solid @steam-brass-dark;
|
||||
color: @steam-dark;
|
||||
|
||||
.window-title {
|
||||
font-family: @font-primary;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: @steam-dark;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.header-button,
|
||||
button[data-action="close"] {
|
||||
color: @steam-dark;
|
||||
opacity: 0.75;
|
||||
&:hover { opacity: 1; color: @steam-rust; }
|
||||
}
|
||||
}
|
||||
|
||||
// Window outer frame — rivets
|
||||
border: 2px solid @steam-brass-dark;
|
||||
box-shadow:
|
||||
inset 4px 4px 0 1px @steam-rivet,
|
||||
inset -4px 4px 0 1px @steam-rivet,
|
||||
inset 4px -4px 0 1px @steam-rivet,
|
||||
inset -4px -4px 0 1px @steam-rivet,
|
||||
0 4px 16px rgba(0, 0, 0, 0.55);
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Sheet header — profile image + name area
|
||||
// ----------------------------------------------------------
|
||||
.sheet-header {
|
||||
background: linear-gradient(180deg, @steam-parchment-dk 0%, @steam-parchment 100%);
|
||||
border-bottom: 2px solid @steam-brass-dark;
|
||||
padding: 8px 10px;
|
||||
align-items: stretch;
|
||||
|
||||
// Profile image — fills full header height, square ratio
|
||||
.profile-img {
|
||||
flex: 0 0 auto;
|
||||
align-self: stretch;
|
||||
width: auto;
|
||||
height: auto;
|
||||
aspect-ratio: 1 / 1;
|
||||
border: 3px solid @steam-brass-dark;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.45);
|
||||
background: @steam-parchment-dk;
|
||||
object-fit: cover;
|
||||
object-position: center top;
|
||||
}
|
||||
|
||||
// Character name — large, dark ink
|
||||
h1.charname input {
|
||||
font-family: @font-primary;
|
||||
color: @steam-dark;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid rgba(@steam-brass-dark, 0.4);
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
|
||||
padding-bottom: 2px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-bottom-color: @steam-brass;
|
||||
background: rgba(@steam-cream, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
// Header traits area (spleen/ideal/traits)
|
||||
.actor-header-traits {
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 0.82rem;
|
||||
color: @steam-rust;
|
||||
padding: 1px 0;
|
||||
border-bottom: 1px solid rgba(@steam-brass-dark, 0.15);
|
||||
&:last-child { border-bottom: none; }
|
||||
}
|
||||
|
||||
label { color: @steam-rust; }
|
||||
|
||||
// Trait name as link
|
||||
a[data-action="itemEdit"] {
|
||||
color: @steam-brass-dark;
|
||||
font-weight: bold;
|
||||
&:hover { color: @steam-brass; text-decoration: underline; }
|
||||
}
|
||||
}
|
||||
|
||||
// Annency description textarea
|
||||
textarea {
|
||||
background: @steam-cream;
|
||||
color: @steam-dark;
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
font-size: 0.85rem;
|
||||
padding: 3px 5px;
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Tab navigation — industrial metal bar
|
||||
// ----------------------------------------------------------
|
||||
nav.sheet-tabs {
|
||||
background: linear-gradient(180deg, @steam-metal 0%, @steam-metal-mid 100%);
|
||||
border-top: 1px solid @steam-brass-dark;
|
||||
border-bottom: 2px solid @steam-brass-dark;
|
||||
padding: 0 8px;
|
||||
gap: 4px;
|
||||
|
||||
a.item {
|
||||
font-family: @font-primary;
|
||||
font-size: 1.1rem;
|
||||
color: @steam-parchment-dk;
|
||||
padding: 4px 10px;
|
||||
letter-spacing: 0.04em;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
|
||||
&:hover {
|
||||
color: @steam-brass-light;
|
||||
border-bottom-color: rgba(@steam-brass, 0.5);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: @steam-brass-light;
|
||||
border-bottom-color: @steam-brass;
|
||||
text-shadow: 0 0 6px rgba(@steam-brass-light, 0.5);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Window content area — parchment background
|
||||
// ----------------------------------------------------------
|
||||
.window-content {
|
||||
background: @steam-parchment;
|
||||
color: @steam-rust;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Sheet body (tab content)
|
||||
// ----------------------------------------------------------
|
||||
.sheet-body {
|
||||
background: transparent;
|
||||
color: @steam-rust;
|
||||
padding: 0 8px;
|
||||
|
||||
// ---- Section title rows ----
|
||||
.items-title-bg {
|
||||
.brass-gradient();
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
padding: 3px 6px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
h3, label, .items-title-text {
|
||||
font-family: @font-primary;
|
||||
font-size: 0.92rem;
|
||||
font-weight: bold;
|
||||
color: @steam-dark;
|
||||
text-shadow: 0 1px 1px rgba(255, 220, 60, 0.4);
|
||||
letter-spacing: 0.04em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Roll icons in title (NPC category roll)
|
||||
a {
|
||||
color: @steam-dark;
|
||||
opacity: 0.8;
|
||||
&:hover { opacity: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Alternating item list ----
|
||||
ul.item-list,
|
||||
ul.stat-list,
|
||||
ul.alternate-list {
|
||||
list-style: none;
|
||||
margin: 2px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li.list-item {
|
||||
background: @steam-parchment;
|
||||
border-bottom: 1px solid rgba(@steam-brass-dark, 0.18);
|
||||
padding: 3px 4px;
|
||||
color: @steam-rust;
|
||||
font-size: 0.83rem;
|
||||
|
||||
&:nth-child(even) { background: @steam-parchment-dk; }
|
||||
&:last-child { border-bottom: none; }
|
||||
}
|
||||
|
||||
// Items with hover effect
|
||||
li.list-item-shadow {
|
||||
transition: background 0.1s;
|
||||
&:hover { background: mix(@steam-parchment, @steam-brass, 88%); }
|
||||
}
|
||||
|
||||
// ---- Labels ----
|
||||
label,
|
||||
.item-name-label-short,
|
||||
.item-name-label-medium,
|
||||
.item-name-label-long,
|
||||
.item-name-label-long2,
|
||||
.item-name-label-free,
|
||||
.item-field-label-short,
|
||||
.item-field-label-medium {
|
||||
color: @steam-rust;
|
||||
}
|
||||
|
||||
// ---- Roll action links (dice icons) ----
|
||||
a[data-action^="roll"],
|
||||
a.roll-skill,
|
||||
a.roll-spec,
|
||||
a.roll-cephaly {
|
||||
color: @steam-brass-dark;
|
||||
&:hover { color: @steam-brass; }
|
||||
i { font-size: 0.85rem; }
|
||||
}
|
||||
|
||||
// ---- Item edit links ----
|
||||
a[data-action="itemEdit"],
|
||||
a.item-edit {
|
||||
color: @steam-brass-dark;
|
||||
&:hover { color: @steam-brass; }
|
||||
}
|
||||
|
||||
// ---- Item control buttons (edit/delete/add) ----
|
||||
.item-controls {
|
||||
a.item-control {
|
||||
color: @steam-rust;
|
||||
opacity: 0.7;
|
||||
padding: 0 3px;
|
||||
&:hover { color: @steam-brass-dark; opacity: 1; }
|
||||
|
||||
&.item-delete:hover { color: @steam-failure; }
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Selects & inputs inside body ----
|
||||
select,
|
||||
input[type="text"],
|
||||
input[type="number"] {
|
||||
background: @steam-cream;
|
||||
color: @steam-dark;
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
padding: 1px 4px;
|
||||
font-size: 0.83rem;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: @steam-brass;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),
|
||||
0 0 4px rgba(@steam-brass, 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
// Skill level select in header (NPC)
|
||||
.item-field-label-short-header select {
|
||||
background: @steam-parchment-dk;
|
||||
color: @steam-dark;
|
||||
}
|
||||
|
||||
// ---- HR separator — brass wire + gear ----
|
||||
hr {
|
||||
border: none;
|
||||
height: 2px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
@steam-brass-dark 10%,
|
||||
@steam-brass 50%,
|
||||
@steam-brass-dark 90%,
|
||||
transparent 100%
|
||||
);
|
||||
margin: 10px 4px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "⚙";
|
||||
position: absolute;
|
||||
top: -0.6em;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: @steam-brass-dark;
|
||||
font-size: 0.85rem;
|
||||
background: @steam-parchment;
|
||||
padding: 0 4px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Impact boxes (combat tab) ----
|
||||
.impact-box {
|
||||
background: @steam-parchment-dk;
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 3px;
|
||||
padding: 6px 8px;
|
||||
margin: 4px;
|
||||
|
||||
.impact-title {
|
||||
.brass-gradient();
|
||||
border-radius: 2px;
|
||||
padding: 3px 6px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
label, .items-title-text {
|
||||
font-family: @font-primary;
|
||||
font-size: 0.88rem;
|
||||
font-weight: bold;
|
||||
color: @steam-dark;
|
||||
text-shadow: 0 1px 1px rgba(255, 220, 60, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 2px 0;
|
||||
border-bottom: 1px solid rgba(@steam-brass-dark, 0.18);
|
||||
color: @steam-rust;
|
||||
font-size: 0.83rem;
|
||||
&:last-child { border-bottom: none; }
|
||||
|
||||
// +/- impact buttons
|
||||
a[data-action="impactModify"] {
|
||||
color: @steam-brass-dark;
|
||||
font-size: 1rem;
|
||||
&:hover { color: @steam-brass; }
|
||||
}
|
||||
|
||||
span { font-weight: bold; color: @steam-dark; }
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Sub-list (specializations) ----
|
||||
ul.ul-level1 {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 0 0 16px;
|
||||
|
||||
li {
|
||||
background: transparent;
|
||||
border-bottom: 1px solid rgba(@steam-brass-dark, 0.1);
|
||||
padding: 2px 4px;
|
||||
font-size: 0.8rem;
|
||||
color: @steam-rust;
|
||||
|
||||
a { color: @steam-brass-dark; &:hover { color: @steam-brass; } }
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Item icon (sheet-competence-img) ----
|
||||
img.sheet-competence-img {
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
background: @steam-parchment-dk;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.form-group.small-editor,
|
||||
.form-group.editor {
|
||||
background: @steam-cream;
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
padding: 4px;
|
||||
color: @steam-dark;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-group.small-editor textarea,
|
||||
.form-group.editor textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
min-height: 92px;
|
||||
resize: none;
|
||||
overflow-y: auto;
|
||||
background: @steam-cream;
|
||||
color: @steam-dark;
|
||||
border: none;
|
||||
padding: 4px;
|
||||
font-size: 0.85rem;
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// ---- Grid headings (h3/h4 outside of items-title-bg) ----
|
||||
h3, h4 {
|
||||
font-family: @font-primary;
|
||||
color: @steam-brass-dark;
|
||||
margin: 6px 0 3px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
71
styles/actor-sheet-v2.less
Normal file
71
styles/actor-sheet-v2.less
Normal file
@@ -0,0 +1,71 @@
|
||||
// ============================================================
|
||||
// Actor sheet AppV2 styles (.fvtt-ecryme.sheet.actor)
|
||||
// ============================================================
|
||||
|
||||
.fvtt-ecryme.sheet.actor {
|
||||
// Header: compact with profile image
|
||||
.sheet-header {
|
||||
flex: 0 0 auto;
|
||||
min-height: 90px;
|
||||
padding: 4px 6px;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
|
||||
.profile-img {
|
||||
flex: 0 0 80px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
object-fit: cover;
|
||||
object-position: 50% 0;
|
||||
border: 1px solid #7a7971;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-fields {
|
||||
flex: 1;
|
||||
|
||||
h1.charname {
|
||||
height: auto;
|
||||
margin: 0 0 4px;
|
||||
border-bottom: 0;
|
||||
|
||||
input {
|
||||
font-family: @font-primary;
|
||||
font-size: 2rem;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actor-header-traits {
|
||||
margin-top: 2px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Tab bar
|
||||
nav.sheet-tabs {
|
||||
font-family: @font-primary;
|
||||
font-size: 1.4rem;
|
||||
|
||||
a.active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Sheet body
|
||||
.sheet-body {
|
||||
overflow-y: auto;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
154
styles/actor-sheet.less
Normal file
154
styles/actor-sheet.less
Normal file
@@ -0,0 +1,154 @@
|
||||
// ============================================================
|
||||
// Actor sheet scoped styles (.fvtt-ecryme)
|
||||
// ============================================================
|
||||
|
||||
.fvtt-ecryme {
|
||||
.sheet-header {
|
||||
flex: 0 0 210px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.profile-img {
|
||||
flex: 0 0 128px;
|
||||
width: 128px;
|
||||
height: auto;
|
||||
max-height: 128px;
|
||||
margin-top: 0px;
|
||||
margin-right: 10px;
|
||||
object-fit: cover;
|
||||
object-position: 50% 0;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.header-fields {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
h1.charname {
|
||||
height: 50px;
|
||||
padding: 0px;
|
||||
margin: 5px 0;
|
||||
border-bottom: 0;
|
||||
|
||||
input {
|
||||
font-family: @font-primary;
|
||||
font-size: 3rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sheet-tabs {
|
||||
flex: 0;
|
||||
font-family: @font-primary;
|
||||
font-size: 2.2rem;
|
||||
|
||||
.item {
|
||||
line-height: 40px;
|
||||
font-weight: bold;
|
||||
|
||||
&.active {
|
||||
text-decoration: underline;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
height: 40px;
|
||||
border-top: 1px solid #AAA;
|
||||
border-bottom: 1px solid #AAA;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.sheet-body,
|
||||
.sheet-body .tab,
|
||||
.sheet-body .tab .editor {
|
||||
height: 100%;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.tox {
|
||||
.tox-editor-container {
|
||||
background: #fff;
|
||||
}
|
||||
.tox-edit-area {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.resource-label {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.items-list {
|
||||
list-style: none;
|
||||
margin: 1px 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
|
||||
.item-header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 30px;
|
||||
line-height: 24px;
|
||||
padding: 1px 0;
|
||||
border-bottom: 1px solid #BBB;
|
||||
|
||||
.item-image {
|
||||
flex: 0 0 24px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.item-controls {
|
||||
flex: 0 0 86px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-img-container {
|
||||
margin-right: 0.2rem;
|
||||
max-width: 140px;
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
li.folder > .folder-header h3 {
|
||||
color: @color-text-dark;
|
||||
}
|
||||
|
||||
.editor {
|
||||
border: 2;
|
||||
height: 100%;
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
.medium-editor {
|
||||
border: 2;
|
||||
height: 240px;
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
.small-editor {
|
||||
border: 2;
|
||||
height: 120px;
|
||||
padding: 0 3px;
|
||||
}
|
||||
689
styles/chat-steampunk.less
Normal file
689
styles/chat-steampunk.less
Normal file
@@ -0,0 +1,689 @@
|
||||
// ============================================================
|
||||
// Chat — Steampunk theme for Ecryme
|
||||
// Uses .ecryme-chat-body (custom class) so Foundry CSS never interferes.
|
||||
// Header = brass plate. Body = aged parchment + dark ink.
|
||||
// ============================================================
|
||||
|
||||
// ---- Mixin: rivet ornament (corner box-shadow bolts) ----
|
||||
.riveted-border() {
|
||||
box-shadow:
|
||||
inset 4px 4px 0 1px @steam-rivet,
|
||||
inset -4px 4px 0 1px @steam-rivet,
|
||||
inset 4px -4px 0 1px @steam-rivet,
|
||||
inset -4px -4px 0 1px @steam-rivet,
|
||||
0 3px 10px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
// ---- Mixin: brass gradient ----
|
||||
.brass-gradient() {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
@steam-brass-dark 0%,
|
||||
@steam-brass 30%,
|
||||
@steam-brass-light 50%,
|
||||
@steam-brass 70%,
|
||||
@steam-brass-dark 100%
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Chat message outer frame — brass border + rivets
|
||||
// ============================================================
|
||||
#chat-log .chat-message,
|
||||
.chat-popout .chat-message {
|
||||
border: 2px solid @steam-brass-dark;
|
||||
border-radius: 3px;
|
||||
.riveted-border();
|
||||
margin-bottom: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
// Whisper: acid-tinted border
|
||||
&.whisper {
|
||||
border-color: @steam-acid-dark;
|
||||
box-shadow:
|
||||
inset 4px 4px 0 1px @steam-acid-dark,
|
||||
inset -4px 4px 0 1px @steam-acid-dark,
|
||||
inset 4px -4px 0 1px @steam-acid-dark,
|
||||
inset -4px -4px 0 1px @steam-acid-dark,
|
||||
0 3px 10px rgba(0, 0, 0, 0.4);
|
||||
|
||||
.ecryme-chat-body {
|
||||
background: mix(@steam-parchment, @steam-acid, 82%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Message header — brass plate
|
||||
// ============================================================
|
||||
.chat-message-header {
|
||||
.brass-gradient();
|
||||
border-bottom: 2px solid @steam-brass-dark;
|
||||
font-size: 1rem;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
gap: 8px;
|
||||
|
||||
img.actor-icon,
|
||||
.actor-icon {
|
||||
border: 2px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
padding: 1px;
|
||||
background: @steam-parchment-dk;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-actor-name {
|
||||
font-family: @font-primary;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
color: @steam-dark;
|
||||
text-shadow: 0 1px 1px rgba(255, 210, 60, 0.5);
|
||||
letter-spacing: 0.04em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chat-actor-subtitle {
|
||||
font-family: @font-primary;
|
||||
font-size: 0.78rem;
|
||||
font-weight: normal;
|
||||
color: @steam-dark;
|
||||
opacity: 0.75;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Body — aged parchment panel (our class = Foundry never overrides)
|
||||
// ============================================================
|
||||
.ecryme-chat-body {
|
||||
background: @steam-parchment;
|
||||
color: @steam-dark;
|
||||
padding: 6px 8px 8px;
|
||||
font-size: 0.88rem;
|
||||
|
||||
// Skill / ability icon
|
||||
.ecryme-chat-icon-row {
|
||||
overflow: hidden;
|
||||
margin-bottom: 4px;
|
||||
|
||||
img.chat-icon {
|
||||
border: 2px solid @steam-brass-dark;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
|
||||
background: @steam-parchment-dk;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
padding: 2px;
|
||||
float: left;
|
||||
margin: 0 8px 4px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Brass wire separator
|
||||
hr {
|
||||
border: none;
|
||||
height: 2px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
@steam-brass-dark 10%,
|
||||
@steam-brass 50%,
|
||||
@steam-brass-dark 90%,
|
||||
transparent 100%
|
||||
);
|
||||
margin: 6px 4px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "⚙";
|
||||
position: absolute;
|
||||
top: -0.6em;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: @steam-brass-dark;
|
||||
font-size: 0.8rem;
|
||||
background: @steam-parchment;
|
||||
padding: 0 4px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
// Detail list — dark sepia ink on parchment
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
color: @steam-rust;
|
||||
font-size: 0.87rem;
|
||||
padding: 3px 2px 3px 20px;
|
||||
border-bottom: 1px solid rgba(@steam-brass-dark, 0.2);
|
||||
position: relative;
|
||||
line-height: 1.4;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
|
||||
// Brass arrow bullet
|
||||
&::before {
|
||||
content: "▸";
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 4px;
|
||||
color: @steam-brass-dark;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: @steam-brass-dark;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
// Result line (success/failure) — no bullet, centered
|
||||
li.ecryme-result-line {
|
||||
padding-left: 4px;
|
||||
text-align: center;
|
||||
border-bottom: none;
|
||||
margin-top: 2px;
|
||||
|
||||
&::before { content: none; }
|
||||
}
|
||||
}
|
||||
|
||||
// GM row with difficulty select
|
||||
.ecryme-chat-gm-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 6px 0 4px;
|
||||
color: @steam-dark;
|
||||
font-size: 0.85rem;
|
||||
|
||||
select {
|
||||
background: @steam-parchment-dk;
|
||||
color: @steam-dark;
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
padding: 2px 4px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
// "Sent to GM" italic note
|
||||
p.ecryme-chat-sent-gm {
|
||||
color: @steam-brass-dark;
|
||||
font-style: italic;
|
||||
font-size: 0.82rem;
|
||||
margin: 4px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Success / Failure labels
|
||||
// ============================================================
|
||||
.chat-result-success {
|
||||
color: @steam-success;
|
||||
font-family: @font-primary;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.chat-result-failure {
|
||||
color: @steam-failure;
|
||||
font-family: @font-primary;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.chat-result-text {
|
||||
font-family: @font-primary;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Action buttons — brass mechanical style
|
||||
// ============================================================
|
||||
.chat-card-button,
|
||||
.button-apply-impact,
|
||||
.button-apply-bonus,
|
||||
.button-select-confront,
|
||||
.button-apply-cephaly-difficulty {
|
||||
display: block;
|
||||
width: calc(100% - 8px);
|
||||
margin: 4px 4px 2px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-family: @font-primary;
|
||||
letter-spacing: 0.05em;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
border: 1px solid @steam-brass-dark;
|
||||
color: @steam-parchment;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
|
||||
position: relative;
|
||||
background: linear-gradient(180deg,
|
||||
mix(@steam-brass, @steam-dark, 50%) 0%,
|
||||
mix(@steam-brass-dark, @steam-dark, 65%) 100%
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 215, 80, 0.2),
|
||||
0 2px 4px rgba(0, 0, 0, 0.35);
|
||||
transition: background 0.15s;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(180deg,
|
||||
mix(@steam-brass-light, @steam-dark, 60%) 0%,
|
||||
mix(@steam-brass, @steam-dark, 50%) 100%
|
||||
);
|
||||
color: @steam-cream;
|
||||
}
|
||||
&:active { top: 1px; }
|
||||
}
|
||||
|
||||
.plus-minus-button {
|
||||
background: linear-gradient(180deg,
|
||||
mix(@steam-brass, @steam-dark, 40%) 0%,
|
||||
mix(@steam-brass-dark, @steam-dark, 55%) 100%
|
||||
);
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
color: @steam-parchment;
|
||||
padding: 2px 5px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover { color: @steam-cream; }
|
||||
&:active { position: relative; top: 1px; }
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Dice images
|
||||
// ============================================================
|
||||
.dice-image {
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.dice-image-reroll {
|
||||
border: 2px solid @steam-acid;
|
||||
border-radius: 2px;
|
||||
background-color: rgba(@steam-acid-dark, 0.15);
|
||||
box-shadow: 0 0 5px rgba(@steam-acid, 0.5);
|
||||
}
|
||||
|
||||
|
||||
// ---- Mixin: rivet ornament (corner box-shadow bolts) ----
|
||||
.riveted-border() {
|
||||
box-shadow:
|
||||
inset 4px 4px 0 1px @steam-rivet,
|
||||
inset -4px 4px 0 1px @steam-rivet,
|
||||
inset 4px -4px 0 1px @steam-rivet,
|
||||
inset -4px -4px 0 1px @steam-rivet,
|
||||
0 3px 10px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
// ---- Mixin: brass gradient ----
|
||||
.brass-gradient() {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
@steam-brass-dark 0%,
|
||||
@steam-brass 30%,
|
||||
@steam-brass-light 50%,
|
||||
@steam-brass 70%,
|
||||
@steam-brass-dark 100%
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Chat message container — parchment panel + brass frame
|
||||
// ============================================================
|
||||
#chat-log .chat-message,
|
||||
.chat-popout .chat-message {
|
||||
border: 2px solid @steam-brass-dark;
|
||||
border-radius: 3px;
|
||||
.riveted-border();
|
||||
// Parchment background applied at all levels
|
||||
background: @steam-parchment !important;
|
||||
background-color: @steam-parchment !important;
|
||||
color: @steam-dark;
|
||||
margin-bottom: 6px;
|
||||
|
||||
// Cover Foundry's inner wrappers
|
||||
.message-content {
|
||||
background: @steam-parchment !important;
|
||||
background-color: @steam-parchment !important;
|
||||
color: @steam-dark;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
// All text descendants default to dark ink
|
||||
p, span, div, label, li, ul, h1, h2, h3, h4, h5 {
|
||||
color: @steam-dark;
|
||||
}
|
||||
|
||||
// Whisper: acid-tinted parchment
|
||||
&.whisper {
|
||||
border-color: @steam-acid-dark;
|
||||
background: mix(@steam-parchment, @steam-acid, 85%) !important;
|
||||
background-color: mix(@steam-parchment, @steam-acid, 85%) !important;
|
||||
box-shadow:
|
||||
inset 4px 4px 0 1px @steam-acid-dark,
|
||||
inset -4px 4px 0 1px @steam-acid-dark,
|
||||
inset 4px -4px 0 1px @steam-acid-dark,
|
||||
inset -4px -4px 0 1px @steam-acid-dark,
|
||||
0 3px 10px rgba(0, 0, 0, 0.4);
|
||||
|
||||
.message-content {
|
||||
background: mix(@steam-parchment, @steam-acid, 85%) !important;
|
||||
background-color: mix(@steam-parchment, @steam-acid, 85%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Message header — brass plate with dark name
|
||||
// ============================================================
|
||||
.chat-message-header {
|
||||
.brass-gradient();
|
||||
border-bottom: 2px solid @steam-brass-dark;
|
||||
border-radius: 2px 2px 0 0;
|
||||
font-size: 1rem;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 6px;
|
||||
gap: 6px;
|
||||
|
||||
// Force brass bg even inside message-content parchment
|
||||
background: linear-gradient(135deg, @steam-brass-dark 0%, @steam-brass 30%, @steam-brass-light 50%, @steam-brass 70%, @steam-brass-dark 100%) !important;
|
||||
background-color: @steam-brass !important;
|
||||
|
||||
img.actor-icon,
|
||||
.actor-icon {
|
||||
border: 2px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 4px rgba(0,0,0,0.4);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 1px;
|
||||
background: @steam-parchment;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-actor-name {
|
||||
font-family: @font-primary;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
color: @steam-dark !important;
|
||||
text-shadow: 0 1px 1px rgba(255, 220, 80, 0.4);
|
||||
letter-spacing: 0.04em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Separator — brass wire with central gear
|
||||
// ============================================================
|
||||
#chat-log .chat-message hr,
|
||||
.chat-popout .chat-message hr {
|
||||
border: none;
|
||||
height: 2px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
@steam-brass-dark 10%,
|
||||
@steam-brass 50%,
|
||||
@steam-brass-dark 90%,
|
||||
transparent 100%
|
||||
);
|
||||
margin: 5px 4px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "⚙";
|
||||
position: absolute;
|
||||
top: -0.6em;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: @steam-brass;
|
||||
font-size: 0.8rem;
|
||||
background: @steam-parchment;
|
||||
padding: 0 4px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Detail list — dark ink on parchment
|
||||
// ============================================================
|
||||
#chat-log .chat-message ul,
|
||||
.chat-popout .chat-message ul {
|
||||
list-style: none;
|
||||
margin: 4px 0;
|
||||
padding: 0 4px;
|
||||
|
||||
li {
|
||||
color: @steam-rust !important; // dark sepia/brown ink — readable on parchment
|
||||
font-size: 0.88rem;
|
||||
padding: 2px 0 2px 18px;
|
||||
border-bottom: 1px solid rgba(@steam-brass-dark, 0.2);
|
||||
position: relative;
|
||||
line-height: 1.4;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
|
||||
// Arrow bullet in brass
|
||||
&::before {
|
||||
content: "▸";
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
color: @steam-brass-dark;
|
||||
font-size: 0.75rem;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
strong { color: @steam-brass-dark !important; }
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Skill / ability icon
|
||||
// ============================================================
|
||||
.chat-icon {
|
||||
border: 2px solid @steam-brass-dark;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 5px rgba(0,0,0,0.3);
|
||||
background: @steam-parchment-dk;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
padding: 2px;
|
||||
margin: 4px 6px 4px 4px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Result labels (success / failure)
|
||||
// ============================================================
|
||||
.chat-result-success {
|
||||
color: @steam-success !important;
|
||||
font-family: @font-primary;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.chat-result-failure {
|
||||
color: @steam-failure !important;
|
||||
font-family: @font-primary;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.chat-result-text {
|
||||
font-family: @font-primary;
|
||||
font-size: 1.1rem;
|
||||
color: @steam-dark !important;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Action buttons — brass mechanical style
|
||||
// ============================================================
|
||||
.chat-card-button,
|
||||
.button-apply-impact,
|
||||
.button-apply-bonus,
|
||||
.button-select-confront,
|
||||
.button-apply-cephaly-difficulty {
|
||||
display: block;
|
||||
width: calc(100% - 8px);
|
||||
margin: 4px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-family: @font-primary;
|
||||
letter-spacing: 0.05em;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
border: 1px solid @steam-brass-dark;
|
||||
color: @steam-parchment !important;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
|
||||
position: relative;
|
||||
background: linear-gradient(180deg,
|
||||
mix(@steam-brass, @steam-dark, 50%) 0%,
|
||||
mix(@steam-brass-dark, @steam-dark, 65%) 100%
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 215, 80, 0.2),
|
||||
0 2px 4px rgba(0,0,0,0.4);
|
||||
transition: background 0.15s;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(180deg,
|
||||
mix(@steam-brass-light, @steam-dark, 60%) 0%,
|
||||
mix(@steam-brass, @steam-dark, 50%) 100%
|
||||
);
|
||||
color: @steam-cream !important;
|
||||
}
|
||||
&:active { top: 1px; }
|
||||
}
|
||||
|
||||
.plus-minus-button {
|
||||
background: linear-gradient(180deg,
|
||||
mix(@steam-brass, @steam-dark, 40%) 0%,
|
||||
mix(@steam-brass-dark, @steam-dark, 55%) 100%
|
||||
);
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
color: @steam-parchment !important;
|
||||
padding: 2px 5px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover { color: @steam-cream !important; }
|
||||
&:active { position: relative; top: 1px; }
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Dice images — brass frame
|
||||
// ============================================================
|
||||
.dice-image {
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 3px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.dice-image-reroll {
|
||||
border: 2px solid @steam-acid;
|
||||
border-radius: 2px;
|
||||
background-color: rgba(@steam-acid-dark, 0.15);
|
||||
box-shadow: 0 0 5px rgba(@steam-acid, 0.5);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// GM difficulty select
|
||||
// ============================================================
|
||||
#chat-log .chat-message,
|
||||
.chat-popout .chat-message {
|
||||
select[name="cephaly-difficulty"] {
|
||||
background: @steam-parchment-dk;
|
||||
color: @steam-dark;
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
padding: 2px 4px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ============================================================
|
||||
// Welcome message — sections & footer
|
||||
// ============================================================
|
||||
.ecryme-chat-body {
|
||||
|
||||
// Title
|
||||
.welcome-message-h3 {
|
||||
font-family: @font-primary;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
color: @steam-brass-dark;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
letter-spacing: 0.06em;
|
||||
margin: 0 0 8px;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid rgba(@steam-brass-dark, 0.35);
|
||||
}
|
||||
|
||||
// Content sections
|
||||
.welcome-section {
|
||||
color: @steam-dark;
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8px;
|
||||
padding: 5px 6px;
|
||||
background: rgba(@steam-parchment-dk, 0.55);
|
||||
border-left: 3px solid @steam-brass;
|
||||
border-radius: 0 2px 2px 0;
|
||||
|
||||
strong { color: @steam-rust; }
|
||||
|
||||
a {
|
||||
color: @steam-brass-dark;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
&:hover { color: @steam-brass; }
|
||||
}
|
||||
}
|
||||
|
||||
// Footer signature
|
||||
.welcome-footer {
|
||||
font-family: @font-primary;
|
||||
font-size: 0.82rem;
|
||||
color: @steam-rust;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
margin-top: 8px;
|
||||
padding-top: 6px;
|
||||
border-top: 1px solid rgba(@steam-brass-dark, 0.3);
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
}
|
||||
251
styles/chat.less
Normal file
251
styles/chat.less
Normal file
@@ -0,0 +1,251 @@
|
||||
// ============================================================
|
||||
// Chat, dice, roll dialogs, buttons
|
||||
// ============================================================
|
||||
|
||||
.chat-message-header {
|
||||
background: rgba(220, 220, 210, 0.5);
|
||||
font-size: 1.1rem;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.message-chat-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welcome-message-h3 {
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5rem;
|
||||
color: darkred;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
background: rgba(220, 220, 210, 0.5);
|
||||
font-size: 0.9rem;
|
||||
|
||||
&.whisper {
|
||||
background: rgba(220, 220, 210, 0.75);
|
||||
border: 2px solid #545469;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
.flavor-text,
|
||||
.whisper-to {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-icon {
|
||||
border: 0;
|
||||
padding: 2px 6px 2px 2px;
|
||||
float: left;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-result-text,
|
||||
.chat-actor-name {
|
||||
font-weight: bold;
|
||||
font-family: @font-primary;
|
||||
font-size: 1.2rem;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.chat-result-success { color: darkgreen; }
|
||||
.chat-result-failure { color: darkred; }
|
||||
|
||||
.chat-img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
// Roll dialog
|
||||
.roll-dialog-header {
|
||||
height: 52px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.roll-dialog-actor-title {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ecryme-roll-dialog,
|
||||
.ecryme-confront-start-dialog,
|
||||
.ecryme-confrontation-dialog {
|
||||
.window-header { border-radius: 10px 10px 0% 0%; }
|
||||
.window-content { border-radius: 0% 0% 10px 10px; }
|
||||
|
||||
.sheet-footer {
|
||||
margin-top: 8px;
|
||||
padding: 4px 0;
|
||||
border-top: 1px solid var(--color-border-light-tertiary, #999);
|
||||
gap: 6px;
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ecryme-confront-start-dialog {
|
||||
.sheet-footer {
|
||||
gap: 4px;
|
||||
button { font-size: 0.85rem; }
|
||||
}
|
||||
}
|
||||
|
||||
.skill-roll-dialog div {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
// Actor icon in chat
|
||||
.actor-icon {
|
||||
float: left;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding: 2px 6px 2px 2px;
|
||||
}
|
||||
|
||||
// Dice
|
||||
.padding-dice {
|
||||
padding-top: .2rem;
|
||||
padding-bottom: .2rem;
|
||||
}
|
||||
|
||||
.dice-image {
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.dice-image-reroll {
|
||||
background-color: rgba(115, 224, 115, 0.25);
|
||||
border-color: #011d33;
|
||||
box-sizing: border-box;
|
||||
border: 1px;
|
||||
border-radius: 0%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.chat-dice {
|
||||
width: 15%;
|
||||
height: 15%;
|
||||
font-size: 15px;
|
||||
padding: 10px;
|
||||
padding-top: .2rem;
|
||||
padding-bottom: .2rem;
|
||||
}
|
||||
|
||||
.div-center { align-self: center; }
|
||||
|
||||
.ability-icon {
|
||||
border: 0;
|
||||
padding: 2px;
|
||||
max-width: 32px;
|
||||
max-height: 32px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.small-ability-icon {
|
||||
border: 0;
|
||||
padding: 2px;
|
||||
max-width: 16px;
|
||||
max-height: 16px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.combat-icon {
|
||||
border: 0;
|
||||
padding: 2px;
|
||||
max-width: 24px;
|
||||
max-height: 24px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Dice cell / formula / total
|
||||
.dice-cell {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dice-formula,
|
||||
.dice-total {
|
||||
height: 54px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.chat-card-button {
|
||||
box-shadow: inset 0px 1px 0px 0px #a6827e;
|
||||
background: linear-gradient(to bottom, rgba(33, 55, 74, 0.98824) 5%, rgba(21, 40, 51, 0.67059) 100%);
|
||||
background-color: rgba(125, 93, 59, 0);
|
||||
border-radius: 3px;
|
||||
border: 2px ridge #846109;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
font-size: 0.8rem;
|
||||
padding: 4px 12px 0px 12px;
|
||||
text-decoration: none;
|
||||
text-shadow: 0px 1px 0px #4d3534;
|
||||
position: relative;
|
||||
margin: 2px;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(to bottom, #800000 5%, #3e0101 100%);
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
&:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.plus-minus-button {
|
||||
box-shadow: inset 0px 1px 0px 0px #a6827e;
|
||||
background: linear-gradient(to bottom, rgba(33, 55, 74, 0.98824) 5%, rgba(21, 40, 51, 0.67059) 100%);
|
||||
background-color: rgba(125, 93, 59, 0);
|
||||
border-radius: 2px;
|
||||
border: 1px ridge #846109;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
padding: 2px;
|
||||
text-decoration: none;
|
||||
text-shadow: 0px 1px 0px #4d3534;
|
||||
position: relative;
|
||||
margin: 0px;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(to bottom, #800000 5%, #3e0101 100%);
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
&:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.plus-minus {
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
264
styles/dialog-steampunk.less
Normal file
264
styles/dialog-steampunk.less
Normal file
@@ -0,0 +1,264 @@
|
||||
// ============================================================
|
||||
// Roll & Confrontation dialogs — Steampunk theme
|
||||
// Targets .ecryme-roll-dialog, .ecryme-confront-start-dialog,
|
||||
// .ecryme-confrontation-dialog (AppV2 root classes)
|
||||
// ============================================================
|
||||
|
||||
// Common container mixin
|
||||
.steam-dialog-window() {
|
||||
// Title bar — brass plate
|
||||
.window-header {
|
||||
.brass-gradient();
|
||||
border-bottom: 2px solid @steam-brass-dark;
|
||||
color: @steam-dark;
|
||||
text-shadow: 0 1px 1px rgba(255, 220, 80, 0.4);
|
||||
|
||||
.window-title {
|
||||
font-family: @font-primary;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: @steam-dark;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
// Close button — rivet look
|
||||
.header-button,
|
||||
button[data-action="close"] {
|
||||
color: @steam-dark;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
opacity: 0.7;
|
||||
&:hover { opacity: 1; color: @steam-rust; }
|
||||
}
|
||||
}
|
||||
|
||||
// Content area — aged parchment
|
||||
.window-content {
|
||||
background: @steam-parchment;
|
||||
color: @steam-rust;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Apply to all three dialog app containers
|
||||
// ============================================================
|
||||
.ecryme-roll-dialog,
|
||||
.ecryme-confront-start-dialog,
|
||||
.ecryme-confrontation-dialog {
|
||||
.steam-dialog-window();
|
||||
|
||||
// Outer window frame
|
||||
border: 2px solid @steam-brass-dark;
|
||||
box-shadow:
|
||||
inset 4px 4px 0 1px @steam-rivet,
|
||||
inset -4px 4px 0 1px @steam-rivet,
|
||||
inset 4px -4px 0 1px @steam-rivet,
|
||||
inset -4px -4px 0 1px @steam-rivet,
|
||||
0 4px 14px rgba(0, 0, 0, 0.6);
|
||||
|
||||
// ---- Actor header row ----
|
||||
.roll-dialog-header {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
@steam-parchment-dk 0%,
|
||||
@steam-parchment 60%
|
||||
);
|
||||
border-bottom: 1px solid @steam-brass-dark;
|
||||
border-radius: 0;
|
||||
padding: 6px 8px;
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.actor-icon {
|
||||
border: 2px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
|
||||
background: @steam-parchment-dk;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 1px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.roll-dialog-actor-title {
|
||||
font-family: @font-primary;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: @steam-dark;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Form labels ----
|
||||
.roll-dialog-label {
|
||||
color: @steam-rust;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// ---- Row separator ----
|
||||
.flexrow {
|
||||
border-bottom: 1px solid rgba(@steam-brass-dark, 0.15);
|
||||
padding: 3px 0;
|
||||
&:last-child { border-bottom: none; }
|
||||
}
|
||||
|
||||
// ---- Selects & inputs ----
|
||||
select,
|
||||
input[type="text"],
|
||||
input[type="number"] {
|
||||
background: @steam-cream;
|
||||
color: @steam-dark;
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
padding: 2px 5px;
|
||||
font-size: 0.85rem;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: @steam-brass;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12),
|
||||
0 0 4px rgba(@steam-brass, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
// ---- Headings inside content ----
|
||||
h3, h4 {
|
||||
font-family: @font-primary;
|
||||
color: @steam-brass-dark;
|
||||
font-size: 0.9rem;
|
||||
margin: 6px 0 3px;
|
||||
border-bottom: 1px solid rgba(@steam-brass-dark, 0.3);
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
// ---- Footer ----
|
||||
.sheet-footer {
|
||||
border-top: 2px solid @steam-brass-dark;
|
||||
background: @steam-parchment-dk;
|
||||
padding: 6px 4px;
|
||||
margin-top: 6px;
|
||||
|
||||
button {
|
||||
background: linear-gradient(180deg,
|
||||
mix(@steam-brass, @steam-dark, 50%) 0%,
|
||||
mix(@steam-brass-dark, @steam-dark, 65%) 100%
|
||||
);
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
color: @steam-parchment;
|
||||
font-family: @font-primary;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 215, 80, 0.2),
|
||||
0 2px 4px rgba(0, 0, 0, 0.35);
|
||||
transition: background 0.15s;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(180deg,
|
||||
mix(@steam-brass-light, @steam-dark, 60%) 0%,
|
||||
mix(@steam-brass, @steam-dark, 50%) 100%
|
||||
);
|
||||
color: @steam-cream;
|
||||
}
|
||||
&:active { position: relative; top: 1px; }
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
&:hover { background: none; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Confrontation dialog — dice / bonus pool areas
|
||||
// ============================================================
|
||||
.ecryme-confrontation-dialog {
|
||||
|
||||
// Area containers (execution, preservation, pool)
|
||||
.confront-area {
|
||||
background: @steam-parchment-dk;
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 3px;
|
||||
min-height: 60px;
|
||||
padding: 4px;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
// Execution area — slight warm tint
|
||||
.confront-execution-area {
|
||||
border-left: 3px solid @steam-brass;
|
||||
}
|
||||
|
||||
// Preservation area — slight cool tint
|
||||
.confront-preservation-area {
|
||||
border-left: 3px solid @steam-copper;
|
||||
}
|
||||
|
||||
// Pool list area
|
||||
.pool-list {
|
||||
border-left: 3px solid @steam-metal-mid;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
// Individual dice container
|
||||
.confront-dice-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
cursor: grab;
|
||||
padding: 3px;
|
||||
border-radius: 2px;
|
||||
transition: background 0.1s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(@steam-brass, 0.18);
|
||||
}
|
||||
|
||||
// Dice image
|
||||
.confront-dice {
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
|
||||
background: @steam-parchment-dk;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
// Dice value label
|
||||
.confront-dice-centered,
|
||||
.confront-bonus-centered {
|
||||
font-family: @font-primary;
|
||||
font-size: 0.85rem;
|
||||
font-weight: bold;
|
||||
color: @steam-brass-dark;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Bonus spec — acid tint
|
||||
.bonus-spec .confront-dice {
|
||||
border-color: @steam-acid;
|
||||
background-color: mix(@steam-parchment, @steam-acid, 88%);
|
||||
box-shadow: 0 0 4px rgba(@steam-acid, 0.3);
|
||||
}
|
||||
}
|
||||
@@ -60,6 +60,7 @@
|
||||
|
||||
/* For nav and title */
|
||||
.window-app input,
|
||||
.application input,
|
||||
.fvtt-ecryme .item-form,
|
||||
.sheet header.sheet-header .flex-group-center.flex-compteurs,
|
||||
.sheet header.sheet-header .flex-group-center.flex-fatigue,
|
||||
@@ -76,9 +77,11 @@
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.window-app.sheet .window-content {
|
||||
.window-app.sheet .window-content,
|
||||
.application.sheet .window-content {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
.strong-text {
|
||||
@@ -396,13 +399,15 @@
|
||||
|
||||
/* ======================================== */
|
||||
/* Sheet */
|
||||
.window-app.sheet .window-content .sheet-header {
|
||||
.window-app.sheet .window-content .sheet-header,
|
||||
.application.sheet .window-content .sheet-header {
|
||||
color: rgba(19, 18, 18, 0.95);
|
||||
background: url("../images/ui/fond_carnet_01.webp");
|
||||
/*background: #494e6b;*/
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
select[type="text"] {
|
||||
background: white;
|
||||
color: #494e6b;
|
||||
@@ -420,14 +425,23 @@
|
||||
.window-app.sheet .window-content .sheet-header input[type="number"],
|
||||
.window-app.sheet .window-content .sheet-body input[type="text"],
|
||||
.window-app.sheet .window-content .sheet-body input[type="number"],
|
||||
.window-app.sheet .window-content .sheet-body select[type="text"] {
|
||||
.window-app.sheet .window-content .sheet-body select[type="text"],
|
||||
.application.sheet .window-content .sheet-header select[type="text"],
|
||||
.application.sheet .window-content .sheet-header input[type="text"],
|
||||
.application.sheet .window-content .sheet-header input[type="number"],
|
||||
.application.sheet .window-content .sheet-body input[type="text"],
|
||||
.application.sheet .window-content .sheet-body input[type="number"],
|
||||
.application.sheet .window-content .sheet-body select[type="text"] {
|
||||
color: rgba(19, 18, 18, 0.95);
|
||||
/*color: #494e6b;*/
|
||||
}
|
||||
|
||||
.window-app.sheet .window-content .sheet-header input[type="password"],
|
||||
.window-app.sheet .window-content .sheet-header input[type="date"],
|
||||
.window-app.sheet .window-content .sheet-header input[type="time"] {
|
||||
.window-app.sheet .window-content .sheet-header input[type="time"],
|
||||
.application.sheet .window-content .sheet-header input[type="password"],
|
||||
.application.sheet .window-content .sheet-header input[type="date"],
|
||||
.application.sheet .window-content .sheet-header input[type="time"] {
|
||||
color: rgba(19, 18, 18, 0.95);
|
||||
background: url("../images/ui/fond_carnet_01.webp");
|
||||
border: 1 none;
|
||||
@@ -437,7 +451,10 @@
|
||||
|
||||
.window-app.sheet .window-content .sheet-body input[type="password"],
|
||||
.window-app.sheet .window-content .sheet-body input[type="date"],
|
||||
.window-app.sheet .window-content .sheet-body input[type="time"] {
|
||||
.window-app.sheet .window-content .sheet-body input[type="time"],
|
||||
.application.sheet .window-content .sheet-body input[type="password"],
|
||||
.application.sheet .window-content .sheet-body input[type="date"],
|
||||
.application.sheet .window-content .sheet-body input[type="time"] {
|
||||
color: rgba(19, 18, 18, 0.95);
|
||||
background: url("../images/ui/fond_carnet_01.webp");
|
||||
border: 1 none;
|
||||
@@ -446,7 +463,9 @@
|
||||
}
|
||||
|
||||
.window-app.sheet .window-content .sheet-body select,
|
||||
.window-app.sheet .window-content .sheet-header select {
|
||||
.window-app.sheet .window-content .sheet-header select,
|
||||
.application.sheet .window-content .sheet-body select,
|
||||
.application.sheet .window-content .sheet-header select {
|
||||
color: rgba(19, 18, 18, 0.95);
|
||||
background: #fff;
|
||||
border: 1 none;
|
||||
@@ -455,7 +474,9 @@
|
||||
}
|
||||
|
||||
.window-app .window-content,
|
||||
.window-app.sheet .window-content .sheet-body {
|
||||
.window-app.sheet .window-content .sheet-body,
|
||||
.application .window-content,
|
||||
.application.sheet .window-content .sheet-body {
|
||||
font-size: 0.8rem;
|
||||
/*background: url("../images/ui/pc_sheet_bg.webp") repeat left top;*/
|
||||
background: url("../images/ui/fond_carnet_01.webp");
|
||||
@@ -1565,4 +1586,62 @@
|
||||
border: 2px ridge #443307;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==============================
|
||||
Application V2 Item Sheets
|
||||
============================== */
|
||||
|
||||
/* Compact header for item sheets (smaller than actor sheets) */
|
||||
.fvtt-ecryme.item .sheet-header {
|
||||
flex: 0 0 auto;
|
||||
min-height: 70px;
|
||||
padding: 4px 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fvtt-ecryme.item .sheet-header .item-sheet-img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
object-fit: contain;
|
||||
border: 1px solid #7a7971;
|
||||
cursor: pointer;
|
||||
flex: 0 0 64px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.fvtt-ecryme.item .sheet-header .header-fields {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.fvtt-ecryme.item .sheet-header h1.charname {
|
||||
height: auto;
|
||||
margin: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.fvtt-ecryme.item .sheet-header h1.charname input {
|
||||
font-family: MailartRubberstamp;
|
||||
font-size: 1.8rem;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Active tab styling for AppV2 (uses <a> without .item class) */
|
||||
.fvtt-ecryme.item nav.sheet-tabs a.active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Details tab content */
|
||||
.fvtt-ecryme.item .sheet-body ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 4px 2px;
|
||||
}
|
||||
|
||||
.fvtt-ecryme.item .sheet-body ul li.flexrow {
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
20
styles/ecryme.less
Normal file
20
styles/ecryme.less
Normal file
@@ -0,0 +1,20 @@
|
||||
// ============================================================
|
||||
// Ecryme — Main LESS entry point
|
||||
// Compiled output: css/ecryme.css
|
||||
// ============================================================
|
||||
|
||||
@import "_variables.less";
|
||||
@import "fonts.less";
|
||||
@import "global.less";
|
||||
@import "sheet.less";
|
||||
@import "actor-sheet.less";
|
||||
@import "actor-sheet-v2.less";
|
||||
@import "item-sheet.less";
|
||||
@import "ui.less";
|
||||
@import "sidebar.less";
|
||||
@import "chat.less";
|
||||
@import "chat-steampunk.less";
|
||||
@import "dialog-steampunk.less";
|
||||
@import "actor-sheet-steampunk.less";
|
||||
@import "item-sheet-steampunk.less";
|
||||
@import "hud.less";
|
||||
8
styles/fonts.less
Normal file
8
styles/fonts.less
Normal file
@@ -0,0 +1,8 @@
|
||||
// ============================================================
|
||||
// Fonts
|
||||
// ============================================================
|
||||
|
||||
@font-face {
|
||||
font-family: "MailartRubberstamp";
|
||||
src: url('../fonts/MailartRubberstamp-Regular.woff') format("woff");
|
||||
}
|
||||
179
styles/global.less
Normal file
179
styles/global.less
Normal file
@@ -0,0 +1,179 @@
|
||||
// ============================================================
|
||||
// Global base styles
|
||||
// ============================================================
|
||||
|
||||
:root {
|
||||
// Actor sheet font styles
|
||||
--window-header-title-font-size: 1.3rem;
|
||||
--window-header-title-font-weight: normal;
|
||||
--window-header-title-color: #f5f5f5;
|
||||
|
||||
--major-button-font-size: 1.05rem;
|
||||
--major-button-font-weight: normal;
|
||||
--major-button-color: #dadada;
|
||||
|
||||
--tab-header-font-size: 1.0rem;
|
||||
--tab-header-font-weight: 700;
|
||||
--tab-header-color: #403f3e;
|
||||
--tab-header-color-active: #4a0404;
|
||||
|
||||
--actor-input-font-size: 0.8rem;
|
||||
--actor-input-font-weight: 500;
|
||||
--actor-input-color: black;
|
||||
|
||||
--actor-label-font-size: 0.8rem;
|
||||
--actor-label-font-weight: 700;
|
||||
--actor-label-color: rgba(70, 67, 49, 0.76863);
|
||||
|
||||
// Debugging highlighters
|
||||
--debug-background-color-red: rgba(255, 0, 0, 0.32941);
|
||||
--debug-background-color-blue: rgba(29, 0, 255, 0.32941);
|
||||
--debug-background-color-green: rgba(84, 255, 0, 0.32941);
|
||||
|
||||
--debug-box-shadow-red: inset 0 0 2px red;
|
||||
--debug-box-shadow-blue: inset 0 0 2px blue;
|
||||
--debug-box-shadow-green: inset 0 0 2px green;
|
||||
}
|
||||
|
||||
.window-app {
|
||||
text-align: justify;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
// Fonts: title, sidebar, scene nav
|
||||
.sheet header.sheet-header h1 input,
|
||||
.window-app .window-header,
|
||||
#actors .directory-list,
|
||||
#navigation #scene-list .scene.nav-item {
|
||||
font-size: 1.0rem;
|
||||
}
|
||||
|
||||
// Nav and title
|
||||
.sheet nav.sheet-tabs {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
// Inputs, buttons, sidebar, navigation
|
||||
.window-app input,
|
||||
.application input,
|
||||
.fvtt-ecryme .item-form,
|
||||
.sheet header.sheet-header .flex-group-center.flex-compteurs,
|
||||
.sheet header.sheet-header .flex-group-center.flex-fatigue,
|
||||
select,
|
||||
button,
|
||||
.item-checkbox,
|
||||
#sidebar,
|
||||
#players,
|
||||
#navigation #nav-toggle {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.window-header {
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.window-app.sheet .window-content,
|
||||
.application.sheet .window-content {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
.strong-text {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tabs .item.active,
|
||||
.blessures-list li ul li:first-child:hover,
|
||||
a:hover {
|
||||
text-shadow: 1px 0px 0px @color-accent;
|
||||
}
|
||||
|
||||
.rollable {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #000;
|
||||
text-shadow: 0 0 10px red;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:hover {
|
||||
border-width: 4px;
|
||||
border-color: rgba(37, 124, 37, 0.7);
|
||||
}
|
||||
&:disabled {
|
||||
color: @color-text-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
select:disabled {
|
||||
color: @color-text-disabled;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 1px solid #7a7971;
|
||||
}
|
||||
|
||||
// Grid utilities
|
||||
.grid,
|
||||
.grid-2col {
|
||||
display: grid;
|
||||
grid-column: span 2 / span 2;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-gap: 10px;
|
||||
gap: 10px;
|
||||
margin: 10px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.grid-3col { grid-column: span 3 / span 3; grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.grid-4col { grid-column: span 4 / span 4; grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.grid-5col { grid-column: span 5 / span 5; grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||
.grid-6col { grid-column: span 5 / span 5; grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||
.grid-7col { grid-column: span 7 / span 7; grid-template-columns: repeat(7, minmax(0, 1fr)); }
|
||||
.grid-8col { grid-column: span 8 / span 8; grid-template-columns: repeat(8, minmax(0, 1fr)); }
|
||||
.grid-9col { grid-column: span 9 / span 9; grid-template-columns: repeat(9, minmax(0, 1fr)); }
|
||||
.grid-10col { grid-column: span 10 / span 10; grid-template-columns: repeat(10, minmax(0, 1fr)); }
|
||||
.grid-11col { grid-column: span 11 / span 11; grid-template-columns: repeat(11, minmax(0, 1fr)); }
|
||||
.grid-12col { grid-column: span 12 / span 12; grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
||||
|
||||
// Flex utilities
|
||||
.flex-group-center,
|
||||
.flex-group-left,
|
||||
.flex-group-right {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.flex-group-left {
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.flex-group-right {
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-create-actor {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-shrink {
|
||||
flex: 'flex-shrink';
|
||||
}
|
||||
75
styles/hud.less
Normal file
75
styles/hud.less
Normal file
@@ -0,0 +1,75 @@
|
||||
// ============================================================
|
||||
// HUD, token, pause, logo
|
||||
// ============================================================
|
||||
|
||||
// Token HUD extension
|
||||
.tokenhudext {
|
||||
display: flex;
|
||||
flex: 0 !important;
|
||||
font-weight: 600;
|
||||
|
||||
&.left {
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 2.75rem;
|
||||
right: 4rem;
|
||||
}
|
||||
|
||||
&.right {
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 2.75rem;
|
||||
left: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.control-icon.tokenhudicon {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
min-width: 6rem;
|
||||
flex-basis: auto;
|
||||
padding: 0;
|
||||
line-height: 1rem;
|
||||
margin: 0.25rem;
|
||||
|
||||
&.right {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
#token-hud .status-effects.active {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.token-sheet .window-content .flexcol .sheet-tabs {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
// Pause screen
|
||||
#pause {
|
||||
font-size: 2rem;
|
||||
|
||||
> h3 { color: #CCC; }
|
||||
|
||||
> img {
|
||||
content: @logo-image;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
top: -200px;
|
||||
left: calc(50% - 132px);
|
||||
}
|
||||
}
|
||||
|
||||
// Logo
|
||||
#logo {
|
||||
content: @logo-image;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
// Confront dice
|
||||
.confront-dice {
|
||||
border-width: 0px;
|
||||
}
|
||||
258
styles/item-sheet-steampunk.less
Normal file
258
styles/item-sheet-steampunk.less
Normal file
@@ -0,0 +1,258 @@
|
||||
// ============================================================
|
||||
// Item sheets — Steampunk theme
|
||||
// Scoped to .fvtt-ecryme.item
|
||||
// Same visual language as actor-sheet-steampunk.less
|
||||
// ============================================================
|
||||
|
||||
.fvtt-ecryme.item {
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// AppV2 window title bar — brass plate
|
||||
// ----------------------------------------------------------
|
||||
.window-header {
|
||||
.brass-gradient();
|
||||
border-bottom: 2px solid @steam-brass-dark;
|
||||
color: @steam-dark;
|
||||
|
||||
.window-title {
|
||||
font-family: @font-primary;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: @steam-dark;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.header-button,
|
||||
button[data-action="close"] {
|
||||
color: @steam-dark;
|
||||
opacity: 0.75;
|
||||
&:hover { opacity: 1; color: @steam-rust; }
|
||||
}
|
||||
}
|
||||
|
||||
// Window outer frame — rivets
|
||||
border: 2px solid @steam-brass-dark;
|
||||
box-shadow:
|
||||
inset 4px 4px 0 1px @steam-rivet,
|
||||
inset -4px 4px 0 1px @steam-rivet,
|
||||
inset 4px -4px 0 1px @steam-rivet,
|
||||
inset -4px -4px 0 1px @steam-rivet,
|
||||
0 4px 16px rgba(0, 0, 0, 0.55);
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Window content area — parchment background
|
||||
// ----------------------------------------------------------
|
||||
.window-content {
|
||||
background: @steam-parchment;
|
||||
color: @steam-rust;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Sheet header — item image + name
|
||||
// ----------------------------------------------------------
|
||||
.sheet-header {
|
||||
background: linear-gradient(180deg, @steam-parchment-dk 0%, @steam-parchment 100%);
|
||||
border-bottom: 2px solid @steam-brass-dark;
|
||||
padding: 8px 10px;
|
||||
align-items: center;
|
||||
|
||||
.item-sheet-img {
|
||||
border: 3px solid @steam-brass-dark;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.45);
|
||||
background: @steam-parchment-dk;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
h1.charname input {
|
||||
font-family: @font-primary;
|
||||
color: @steam-dark;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid rgba(@steam-brass-dark, 0.4);
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
|
||||
padding-bottom: 2px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-bottom-color: @steam-brass;
|
||||
background: rgba(@steam-cream, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Tab navigation — industrial metal bar
|
||||
// ----------------------------------------------------------
|
||||
nav.sheet-tabs {
|
||||
background: linear-gradient(180deg, @steam-metal 0%, @steam-metal-mid 100%);
|
||||
border-top: 1px solid @steam-brass-dark;
|
||||
border-bottom: 2px solid @steam-brass-dark;
|
||||
padding: 0 8px;
|
||||
gap: 4px;
|
||||
|
||||
a {
|
||||
font-family: @font-primary;
|
||||
font-size: 1.1rem;
|
||||
color: @steam-parchment-dk;
|
||||
padding: 4px 10px;
|
||||
letter-spacing: 0.04em;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: @steam-brass-light;
|
||||
border-bottom-color: rgba(@steam-brass, 0.5);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: @steam-brass-light;
|
||||
border-bottom-color: @steam-brass;
|
||||
text-shadow: 0 0 6px rgba(@steam-brass-light, 0.5);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Sheet body (tab content)
|
||||
// ----------------------------------------------------------
|
||||
.sheet-body {
|
||||
background: transparent;
|
||||
color: @steam-rust;
|
||||
padding: 0 8px;
|
||||
|
||||
// ---- Field rows ----
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 4px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li.flexrow {
|
||||
align-items: center;
|
||||
padding: 4px 2px;
|
||||
border-bottom: 1px solid rgba(@steam-brass-dark, 0.18);
|
||||
color: @steam-rust;
|
||||
font-size: 0.85rem;
|
||||
gap: 6px;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
}
|
||||
|
||||
// ---- Labels ----
|
||||
label,
|
||||
.item-name-label-short,
|
||||
.item-name-label-medium,
|
||||
.item-name-label-long,
|
||||
.item-name-label-long2,
|
||||
.item-name-label-free,
|
||||
.item-field-label-short,
|
||||
.item-field-label-medium {
|
||||
color: @steam-rust;
|
||||
}
|
||||
|
||||
// ---- Selects & inputs ----
|
||||
select,
|
||||
input[type="text"],
|
||||
input[type="number"] {
|
||||
background: @steam-cream;
|
||||
color: @steam-dark;
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
padding: 2px 5px;
|
||||
font-size: 0.85rem;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: @steam-brass;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),
|
||||
0 0 4px rgba(@steam-brass, 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Description editor area ----
|
||||
.tab.description {
|
||||
.editor,
|
||||
.editor-content,
|
||||
.prosemirror,
|
||||
[data-edit] {
|
||||
background: @steam-cream;
|
||||
color: @steam-dark;
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
padding: 6px 8px;
|
||||
font-size: 0.86rem;
|
||||
min-height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Section title rows ----
|
||||
.items-title-bg {
|
||||
.brass-gradient();
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
padding: 3px 6px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
h3, label, .items-title-text {
|
||||
font-family: @font-primary;
|
||||
font-size: 0.92rem;
|
||||
font-weight: bold;
|
||||
color: @steam-dark;
|
||||
text-shadow: 0 1px 1px rgba(255, 220, 60, 0.4);
|
||||
letter-spacing: 0.04em;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- h3/h4 outside section titles ----
|
||||
h3, h4 {
|
||||
font-family: @font-primary;
|
||||
color: @steam-brass-dark;
|
||||
margin: 6px 0 3px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
// ---- HR separator — brass wire + gear ----
|
||||
hr {
|
||||
border: none;
|
||||
height: 2px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
@steam-brass-dark 10%,
|
||||
@steam-brass 50%,
|
||||
@steam-brass-dark 90%,
|
||||
transparent 100%
|
||||
);
|
||||
margin: 10px 4px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "⚙";
|
||||
position: absolute;
|
||||
top: -0.6em;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: @steam-brass-dark;
|
||||
font-size: 0.85rem;
|
||||
background: @steam-parchment;
|
||||
padding: 0 4px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Item icon (competence img) ----
|
||||
img.sheet-competence-img {
|
||||
border: 1px solid @steam-brass-dark;
|
||||
border-radius: 2px;
|
||||
background: @steam-parchment-dk;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
59
styles/item-sheet.less
Normal file
59
styles/item-sheet.less
Normal file
@@ -0,0 +1,59 @@
|
||||
// ============================================================
|
||||
// AppV2 Item Sheet styles (.fvtt-ecryme.item)
|
||||
// ============================================================
|
||||
|
||||
.fvtt-ecryme.item {
|
||||
.sheet-header {
|
||||
flex: 0 0 auto;
|
||||
min-height: 70px;
|
||||
padding: 4px 6px;
|
||||
align-items: center;
|
||||
|
||||
.item-sheet-img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
object-fit: contain;
|
||||
border: 1px solid #7a7971;
|
||||
cursor: pointer;
|
||||
flex: 0 0 64px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.header-fields {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
h1.charname {
|
||||
height: auto;
|
||||
margin: 0;
|
||||
border-bottom: 0;
|
||||
|
||||
input {
|
||||
font-family: @font-primary;
|
||||
font-size: 1.8rem;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Active tab styling (AppV2 uses <a> without .item class)
|
||||
nav.sheet-tabs a.active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.sheet-body {
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 4px 2px;
|
||||
}
|
||||
|
||||
ul li.flexrow {
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
189
styles/sheet.less
Normal file
189
styles/sheet.less
Normal file
@@ -0,0 +1,189 @@
|
||||
// ============================================================
|
||||
// Sheet styles (actor + item, AppV1 + AppV2)
|
||||
// ============================================================
|
||||
|
||||
// Sheet header background
|
||||
.window-app.sheet .window-content .sheet-header,
|
||||
.application.sheet .window-content .sheet-header {
|
||||
color: @color-text-dark;
|
||||
background: @background-image;
|
||||
}
|
||||
|
||||
// Input / select base (light background)
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
select[type="text"] {
|
||||
background: @color-input-bg;
|
||||
color: @color-input-text;
|
||||
}
|
||||
|
||||
select {
|
||||
background: @color-input-bg;
|
||||
color: @color-input-text;
|
||||
}
|
||||
|
||||
// Sheet content inputs & selects — dark text
|
||||
.window-app.sheet .window-content,
|
||||
.application.sheet .window-content {
|
||||
.sheet-header,
|
||||
.sheet-body {
|
||||
select[type="text"],
|
||||
input[type="text"],
|
||||
input[type="number"] {
|
||||
color: @color-text-dark;
|
||||
}
|
||||
|
||||
input[type="password"],
|
||||
input[type="date"],
|
||||
input[type="time"] {
|
||||
color: @color-text-dark;
|
||||
background: @background-image;
|
||||
border: 1 none;
|
||||
margin-bottom: 0.25rem;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
color: @color-text-dark;
|
||||
background: #fff;
|
||||
border: 1 none;
|
||||
margin-bottom: 0.25rem;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sheet body + window-content background
|
||||
.window-app .window-content,
|
||||
.window-app.sheet .window-content .sheet-body,
|
||||
.application .window-content,
|
||||
.application.sheet .window-content .sheet-body {
|
||||
font-size: 0.8rem;
|
||||
background: @background-image;
|
||||
color: @color-text-dark;
|
||||
}
|
||||
|
||||
section.sheet-body {
|
||||
padding: 0.25rem 0.5rem;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.sheet {
|
||||
header.sheet-header {
|
||||
.profile-img {
|
||||
object-fit: cover;
|
||||
object-position: 50% 0;
|
||||
margin: 0.5rem 0 0.5rem 0.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.flex-compteurs {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.resource-content {
|
||||
width: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
nav.sheet-tabs {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
height: 3rem;
|
||||
flex: 0 0 3rem;
|
||||
margin: 0;
|
||||
padding: 0 0 0 0.25rem;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
border-top: 0 none;
|
||||
border-bottom: 0 none;
|
||||
background-color: @color-nav-bg;
|
||||
color: @color-nav-text;
|
||||
}
|
||||
|
||||
.tab[data-tab] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.010rem;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
nav.sheet-tabs {
|
||||
a,
|
||||
.item {
|
||||
position: relative;
|
||||
padding: 0 0.25rem;
|
||||
color: @color-nav-text;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 2rem;
|
||||
width: 1px;
|
||||
border-right: 1px dashed rgba(52, 52, 52, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltip
|
||||
.window-app.sheet .window-content {
|
||||
.tooltip:hover .tooltiptext {
|
||||
top: 2rem;
|
||||
left: 2rem;
|
||||
margin: 0;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.carac-value,
|
||||
.competence-xp {
|
||||
margin: 0.05rem;
|
||||
flex-basis: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltip widget
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.tooltiptext {
|
||||
text-align: left;
|
||||
background: rgba(231, 229, 226, 0.9);
|
||||
width: 150px;
|
||||
padding: 3px 0;
|
||||
font-size: 0.9rem;
|
||||
top: 1px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
&:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-nobottom {
|
||||
border-bottom: unset;
|
||||
}
|
||||
|
||||
// Select diff helper
|
||||
.select-diff {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
width: 50px;
|
||||
}
|
||||
156
styles/sidebar.less
Normal file
156
styles/sidebar.less
Normal file
@@ -0,0 +1,156 @@
|
||||
// ============================================================
|
||||
// Sidebar, controls, hotbar, navigation
|
||||
// ============================================================
|
||||
|
||||
#sidebar {
|
||||
font-size: 1rem;
|
||||
background-color: #f5f5f5;
|
||||
background-position: 0px 35px;
|
||||
background-repeat: no-repeat;
|
||||
background-image: @background-image;
|
||||
color: @color-text-dark;
|
||||
|
||||
&.collapsed {
|
||||
height: 470px !important;
|
||||
}
|
||||
|
||||
#sidebar-tabs i {
|
||||
display: inline-block;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-tabs {
|
||||
flex: 0 0 32px;
|
||||
box-sizing: border-box;
|
||||
margin: 0 0 5px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0);
|
||||
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.5);
|
||||
|
||||
> .collapsed,
|
||||
~ .chat-control-icon {
|
||||
color: @color-text-dark;
|
||||
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
> .item.active {
|
||||
border: 1px solid rgba(114, 98, 72, 1);
|
||||
background: rgba(30, 25, 20, 0.75);
|
||||
box-shadow: 0 0 6px inset rgba(114, 98, 72, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar tabs chat control icon
|
||||
#sidebar-tabs > .collapsed,
|
||||
#chat-controls .chat-control-icon {
|
||||
color: @color-text-dark;
|
||||
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.sidebar-tab .directory-list .entity {
|
||||
border-top: 1px dashed rgba(0, 0, 0, 0.25);
|
||||
border-bottom: 0 none;
|
||||
padding: 0.25rem 0;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Controls & tools
|
||||
#controls {
|
||||
.scene-control,
|
||||
.control-tool {
|
||||
box-shadow: 0 0 3px #000;
|
||||
margin: 0 0 8px;
|
||||
border-radius: 0;
|
||||
background: @color-control-dark;
|
||||
background-origin: padding-box;
|
||||
-o-border-image: url(img/ui/footer-button.png) 10 repeat;
|
||||
border-image: url(img/ui/footer-button.png) 10 repeat;
|
||||
border-image-width: 4px;
|
||||
border-image-outset: 0px;
|
||||
}
|
||||
|
||||
.scene-control.active,
|
||||
.control-tool.active,
|
||||
.scene-control:hover,
|
||||
.control-tool:hover {
|
||||
background: @color-control-warm;
|
||||
background-origin: padding-box;
|
||||
-o-border-image: url(img/ui/footer-button.png) 10 repeat;
|
||||
border-image: url(img/ui/footer-button.png) 10 repeat;
|
||||
border-image-width: 4px;
|
||||
border-image-outset: 0px;
|
||||
box-shadow: 0 0 3px #ff6400;
|
||||
}
|
||||
}
|
||||
|
||||
// Hotbar
|
||||
#hotbar {
|
||||
#action-bar #macro-list {
|
||||
border: 1px solid @color-control-warm;
|
||||
box-shadow: 2px 2px 5px #000000;
|
||||
}
|
||||
|
||||
#action-bar .macro {
|
||||
-o-border-image: url(img/ui/bg_control.jpg) 21 repeat;
|
||||
border-image: url(img/ui/bg_control.jpg) 21 repeat;
|
||||
border-image-slice: 6 6 6 6 fill;
|
||||
border-image-width: 6px 6px 6px 6px;
|
||||
border-image-outset: 0px 0px 0px 0px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.bar-controls {
|
||||
background: @color-control-dark;
|
||||
border: 1px solid @color-control-warm;
|
||||
}
|
||||
}
|
||||
|
||||
// Players & navigation
|
||||
#players {
|
||||
-o-border-image: url(img/ui/footer-button.png) 10 repeat;
|
||||
border-image: url(img/ui/footer-button.png) 10 repeat;
|
||||
border-image-width: 4px;
|
||||
border-image-outset: 0px;
|
||||
background: @color-control-dark;
|
||||
}
|
||||
|
||||
#navigation #scene-list {
|
||||
.scene.nav-item {
|
||||
background: @color-control-dark;
|
||||
background-origin: padding-box;
|
||||
-o-border-image: url(img/ui/footer-button.png) 10 repeat;
|
||||
border-image: url(img/ui/footer-button.png) 10 repeat;
|
||||
border-image-width: 4px;
|
||||
border-image-outset: 0px;
|
||||
|
||||
&.active {
|
||||
background: @color-control-warm;
|
||||
}
|
||||
}
|
||||
|
||||
.scene.view,
|
||||
.scene.context {
|
||||
background: @color-control-warm;
|
||||
background-origin: padding-box;
|
||||
-o-border-image: url(img/ui/footer-button.png) 10 repeat;
|
||||
border-image: url(img/ui/footer-button.png) 10 repeat;
|
||||
border-image-width: 4px;
|
||||
border-image-outset: 0px;
|
||||
box-shadow: 0 0 3px #ff6400;
|
||||
}
|
||||
}
|
||||
|
||||
#navigation #nav-toggle {
|
||||
background: @color-control-dark;
|
||||
background-origin: padding-box;
|
||||
-o-border-image: url(img/ui/footer-button.png) 10 repeat;
|
||||
border-image: url(img/ui/footer-button.png) 10 repeat;
|
||||
border-image-width: 4px;
|
||||
border-image-outset: 0px;
|
||||
}
|
||||
359
styles/ui.less
Normal file
359
styles/ui.less
Normal file
@@ -0,0 +1,359 @@
|
||||
// ============================================================
|
||||
// Generic UI utilities and layout helpers
|
||||
// ============================================================
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul, li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.header-fields li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Alternate list rows
|
||||
.alterne-list {
|
||||
> .list-item:hover {
|
||||
background: rgba(100, 100, 50, 0.25);
|
||||
}
|
||||
> .list-item:nth-child(even) {
|
||||
background: rgba(80, 60, 0, 0.10);
|
||||
}
|
||||
> .list-item:nth-child(odd) {
|
||||
background: rgb(160, 130, 100, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.specialisation-label {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.carac-label,
|
||||
.attr-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
flex: 1 1 5rem;
|
||||
display: flex !important;
|
||||
color: @color-text-dark;
|
||||
}
|
||||
|
||||
.list-item-shadow {
|
||||
background: rgba(87, 60, 32, 0.35);
|
||||
flex-grow: 0;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.list-item-shadow2 {
|
||||
background: rgba(87, 60, 32, 0.25);
|
||||
flex-grow: 0;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.item-display-show { display: block; }
|
||||
.item-display-hide { display: none; }
|
||||
|
||||
.item-quantite {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.list-item-margin1 { margin-left: 1rem; }
|
||||
.list-item-margin2 { margin-left: 2rem; }
|
||||
.list-item-margin3 { margin-left: 3rem; }
|
||||
.list-item-margin4 { margin-left: 4rem; }
|
||||
|
||||
.sheet-competence-img {
|
||||
width: 24px;
|
||||
max-width: 24px;
|
||||
height: 24px;
|
||||
max-height: 24px;
|
||||
flex-grow: 0;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.competence-column {
|
||||
flex-direction: column;
|
||||
align-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
flex-grow: 0;
|
||||
flex-basis: 1;
|
||||
}
|
||||
|
||||
.competence-header {
|
||||
align-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
font-weight: bold;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.description-label {
|
||||
flex-grow: 2;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.status-header-label { margin-left: 2px; }
|
||||
.roll-dialog-label { margin: 4px 0; min-width: 96px; }
|
||||
|
||||
// Select[multiple] in roll dialogs needs explicit height so options are visible
|
||||
.skill-roll-dialog,
|
||||
.confrontation-roll-dialog,
|
||||
.confrontation-start-dialog {
|
||||
select[multiple] {
|
||||
min-height: 60px;
|
||||
height: auto;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.short-label { flex-grow: 1; }
|
||||
.keyword-label { font-size: 0.85rem; }
|
||||
.item-sheet-label { flex-grow: 1; }
|
||||
.item-text-long-line { flex-grow: 3; }
|
||||
|
||||
.score-label {
|
||||
flex-grow: 2;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.attribut-value,
|
||||
.carac-value {
|
||||
flex-grow: 0;
|
||||
flex-basis: 64px;
|
||||
margin-right: 4px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.sante-value,
|
||||
.competence-value {
|
||||
flex-grow: 0;
|
||||
flex-basis: 2rem;
|
||||
margin-right: 0.25rem;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.description-value {
|
||||
flex-grow: 0;
|
||||
flex-basis: 4rem;
|
||||
margin-right: 0.25rem;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.small-label { margin-top: 5px; }
|
||||
.padd-right { margin-right: 8px; }
|
||||
.padd-left { margin-left: 8px; }
|
||||
|
||||
.stack-left {
|
||||
align-items: center;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.packed-left {
|
||||
white-space: nowrap;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.input-numeric-short {
|
||||
width: 40px;
|
||||
max-width: 40px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 40px;
|
||||
margin-right: 0.25rem;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.abilities-table {
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
// Image helpers
|
||||
.button-img {
|
||||
vertical-align: baseline;
|
||||
width: 8%;
|
||||
height: 8%;
|
||||
max-height: 48px;
|
||||
border-width: 0px;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
|
||||
&:hover {
|
||||
color: rgba(255, 255, 128, 0.7);
|
||||
border: 1px solid rgba(255, 128, 0, 0.8);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.button-effect-img {
|
||||
vertical-align: baseline;
|
||||
width: 16px;
|
||||
max-height: 16px;
|
||||
height: 16;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.small-button-container {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border: 0;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.item-checkbox {
|
||||
height: 25px;
|
||||
border: 1px solid rgba(115, 105, 83, 0.65098);
|
||||
border-left: none;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: black;
|
||||
padding-top: 5px;
|
||||
margin-right: 0px;
|
||||
width: 45px;
|
||||
position: relative;
|
||||
left: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.skill-label { font-size: 0.7rem; }
|
||||
.skill-good-checkbox { max-height: 10px; max-width: 10px; }
|
||||
|
||||
.flex-actions-bar { flex-grow: 2; }
|
||||
|
||||
// Item name / field labels
|
||||
.item-sheet-img {
|
||||
width: 64px;
|
||||
height: auto;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.item-name-img { flex-grow: 1; max-width: 2rem; min-width: 2rem; }
|
||||
.item-name-label-header { flex-grow: 2; max-width: 12rem; min-width: 12rem; }
|
||||
.item-name-label-header-long { flex-grow: 2; max-width: 14rem; min-width: 14rem; }
|
||||
.item-name-label-header-long2 { flex-grow: 2; max-width: 24rem; min-width: 24rem; }
|
||||
.item-name-label { flex-grow: 2; max-width: 10rem; min-width: 10rem; }
|
||||
.item-name-label-long { margin-top: 4px; flex-grow: 2; max-width: 12rem; min-width: 12rem; }
|
||||
.item-name-label-short { margin-top: 4px; flex-grow: 1; max-width: 4rem; min-width: 4rem; }
|
||||
.item-name-label-medium { margin-top: 4px; flex-grow: 2; max-width: 6rem; min-width: 6rem; }
|
||||
.item-name-label-medium2 { margin-top: 4px; flex-grow: 0; max-width: 10rem; min-width: 10rem; }
|
||||
.item-name-label-free { margin-top: 4px; align-self: flex-start; }
|
||||
.item-name-label-long2 { margin-top: 4px; flex-grow: 2; max-width: 22rem; min-width: 22rem; }
|
||||
.item-name-label-level2 { flex-grow: 2; max-width: 9rem; min-width: 9rem; }
|
||||
|
||||
.item-field-label-short { margin-top: 4px; flex-grow: 1; max-width: 4rem; min-width: 4rem; }
|
||||
.item-field-label-short-header { margin-top: 4px; flex-grow: 1; max-width: 2.2rem; min-width: 2.2rem; }
|
||||
.item-field-label-medium { flex-grow: 1; max-width: 6rem; min-width: 6rem; }
|
||||
.item-field-skill { flex-grow: 1; max-width: 6.8rem; min-width: 6.8rem; }
|
||||
.item-field-label-long { flex-grow: 1; max-width: 10rem; min-width: 10rem; }
|
||||
|
||||
.item-control-end { align-self: flex-end; }
|
||||
.alternate-list { margin-top: 4px; flex-wrap: nowrap; }
|
||||
.item-filler { flex-grow: 6; flex-shrink: 7; }
|
||||
.item-controls-fixed { min-width: 2rem; max-width: 2rem; }
|
||||
.item-controls-fixed-full { min-width: 3rem; max-width: 3rem; }
|
||||
.attribute-label { font-weight: bold; }
|
||||
.flexrow-no-expand { flex-grow: 0; }
|
||||
.flexrow-start { justify-content: flex-start; align-content: flex-start; align-self: flex-start; }
|
||||
.item-input-small { max-width: 16px; max-height: 12px; }
|
||||
.character-summary-rollable { text-decoration: underline; }
|
||||
.ul-level1 { padding-left: 2rem; }
|
||||
|
||||
// Impact / confrontation
|
||||
.impact-box {
|
||||
border-width: 2px;
|
||||
border-color: #000000;
|
||||
border-radius: 6px;
|
||||
border: 2px ridge #443307;
|
||||
margin: 4px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.impact-title {
|
||||
font-size: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.items-title-bg {
|
||||
margin-top: 6px;
|
||||
color: @color-text-dark;
|
||||
}
|
||||
|
||||
.items-title-text {
|
||||
text-align: center;
|
||||
font-family: @font-primary;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.lock-icon { width: 16px; height: 16px; }
|
||||
.img-no-border { max-width: 48px; max-height: 48px; border: 0px; }
|
||||
.no-grow { flex-grow: 1; max-width: 32px; }
|
||||
.status-col-name { max-width: 72px; }
|
||||
.status-small-label { font-size: 0.65rem; }
|
||||
|
||||
.confront-bonus-container {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.confront-bonus-centered {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
font-size: 1.6rem;
|
||||
color: darkgreen;
|
||||
font-family: @font-primary;
|
||||
transform: translate(-50%, -55%);
|
||||
}
|
||||
|
||||
.dice-spec { max-width: 64px; }
|
||||
.bonus-spec { max-width: 48px; }
|
||||
|
||||
.confront-dice-container {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.confront-dice-centered {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
font-size: 2rem;
|
||||
color: darkgreen;
|
||||
font-family: @font-primary;
|
||||
transform: translate(-50%, -55%);
|
||||
}
|
||||
|
||||
.confront-area {
|
||||
margin: 2px;
|
||||
padding: 4px;
|
||||
min-height: 64px;
|
||||
border-width: 2px;
|
||||
border-color: #000000;
|
||||
border-radius: 6px;
|
||||
border: 2px ridge #443307;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pool-list {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
Reference in New Issue
Block a user