259 lines
7.0 KiB
Plaintext
259 lines
7.0 KiB
Plaintext
// ============================================================
|
|
// 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;
|
|
}
|
|
}
|
|
}
|