431 lines
11 KiB
Plaintext
431 lines
11 KiB
Plaintext
// ============================================================
|
|
// 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;
|
|
}
|
|
}
|
|
}
|