265 lines
6.7 KiB
Plaintext
265 lines
6.7 KiB
Plaintext
// ============================================================
|
|
// 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);
|
|
}
|
|
}
|