/* ==================================================================== */ /* Delta Green 2 — "Tactical" sheet theme */ /* Modern federal-dossier look: dark surfaces, olive accent, Public Sans */ /* Applied when the characterSheetStyle setting is "tactical". */ /* ==================================================================== */ .deltagreen2 .tactical-style { --dg2-bg: #15171c; --dg2-panel: #1d2026; --dg2-panel-hover: #242832; --dg2-border: #31363f; --dg2-hairline: #272b32; --dg2-text: #e6e8ea; --dg2-text-muted: #8f98a3; --dg2-olive: #8aa353; --dg2-olive-bright: #a9c46a; --dg2-olive-deep: #556b2f; --dg2-steel: #6b93b8; --dg2-red: #d4553c; --dg2-input-bg: #12141a; color: var(--dg2-text); } .window-content.tactical-style { background: linear-gradient(160deg, #181b21 0%, #14161b 60%, #121419 100%) !important; font-family: "PublicSans", "Helvetica Neue", Arial, sans-serif !important; } /* Outranks the stock ".deltagreen2 section.window-content { color: black }" */ .deltagreen2 section.window-content.tactical-style { color: var(--dg2-text); scrollbar-color: var(--dg2-border) transparent !important; input[type="checkbox"]:checked::before { color: var(--dg2-olive-bright); } } /* Beat the font-setting utility classes if one is also applied */ .tactical-style.special-elite-font, .tactical-style.martel-font, .tactical-style.signika-font, .tactical-style.typewriter-condensed-font, .tactical-style.public-sans-font, .tactical-style .special-elite-font, .tactical-style .martel-font, .tactical-style .signika-font, .tactical-style .typewriter-condensed-font { font-family: "PublicSans", "Helvetica Neue", Arial, sans-serif !important; } /* ------------------------------------------------------------------ */ /* Inputs */ /* ------------------------------------------------------------------ */ .deltagreen2 .tactical-style input[type="text"], .deltagreen2 .tactical-style input[type="number"], .deltagreen2 .tactical-style select, .deltagreen2 .tactical-style textarea, .deltagreen2 .tactical-style button { font-family: "PublicSans", "Helvetica Neue", Arial, sans-serif; } .deltagreen2 .tactical-style input[type="text"], .deltagreen2 .tactical-style input[type="number"], .deltagreen2 .tactical-style select, .deltagreen2 .tactical-style textarea { background: var(--dg2-input-bg); color: var(--dg2-text); border: 1px solid var(--dg2-border); border-radius: 4px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .deltagreen2 .tactical-style input[type="text"]:hover, .deltagreen2 .tactical-style input[type="number"]:hover { border-color: #3d434e; } .deltagreen2 .tactical-style input[type="text"]:focus, .deltagreen2 .tactical-style input[type="number"]:focus, .deltagreen2 .tactical-style textarea:focus { border-color: var(--dg2-olive); box-shadow: 0 0 6px rgba(138, 163, 83, 0.35); outline: none; } .deltagreen2 .tactical-style input:disabled { color: var(--dg2-text-muted); background: transparent; border-color: var(--dg2-hairline); } .deltagreen2 .tactical-style input[type="checkbox"] { accent-color: var(--dg2-olive); } .deltagreen2 .tactical-style ::placeholder { color: #5c6572; opacity: 1; } /* ------------------------------------------------------------------ */ /* Header: portrait, name plate, profession */ /* ------------------------------------------------------------------ */ .deltagreen2 .tactical-style .sheet-header .profile-img { border: 1px solid var(--dg2-border); border-radius: 4px; background: var(--dg2-panel); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } .deltagreen2 .tactical-style .sheet-header h1.charname input { background: transparent; border: none; border-bottom: 3px solid var(--dg2-olive-deep); border-radius: 0; font-size: 1.9rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--dg2-text); padding-left: 2px; } .deltagreen2 .tactical-style .sheet-header h1.charname input:focus { border-bottom-color: var(--dg2-olive-bright); box-shadow: none; } .deltagreen2 .tactical-style .sheet-header h2.profession input { background: transparent; border: none; border-radius: 0; font-size: 0.95rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--dg2-olive); padding-left: 2px; height: 30px; } .deltagreen2 .tactical-style .sheet-header h2.profession input:focus { box-shadow: none; color: var(--dg2-olive-bright); } /* ------------------------------------------------------------------ */ /* Resource cards: HP / WP / SAN */ /* ------------------------------------------------------------------ */ .deltagreen2 .tactical-style .resources { gap: 8px; margin-top: 6px; } .deltagreen2 .tactical-style .resource-outer-grid-1col { background: var(--dg2-panel); border: 1px solid var(--dg2-border); border-top: 3px solid var(--dg2-olive); border-radius: 6px; padding: 6px 8px 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .deltagreen2 .tactical-style .resources .resource-outer-grid-1col:nth-child(2) { border-top-color: var(--dg2-steel); } .deltagreen2 .tactical-style .resources .resource-outer-grid-1col:nth-child(3) { border-top-color: var(--dg2-red); } .deltagreen2 .tactical-style .resource-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--dg2-text-muted); } .deltagreen2 .tactical-style .resource-inner-grid-3col input.centered { font-size: 1.25rem; font-weight: 700; color: var(--dg2-text); } .deltagreen2 .tactical-style .max-resource-value { border: 1px solid var(--dg2-hairline); border-radius: 4px; color: var(--dg2-text-muted); font-size: 1.1rem; font-weight: 600; background: transparent; } /* ------------------------------------------------------------------ */ /* Tab navigation */ /* ------------------------------------------------------------------ */ .deltagreen2 .tactical-style .tabs { height: 2rem; line-height: 2rem; gap: 2px; margin-top: 4px; } .deltagreen2 .tactical-style .tabs [data-action="tab"] { background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dg2-text-muted); transition: color 0.15s ease, border-color 0.15s ease; } .deltagreen2 .tactical-style .tabs [data-action="tab"]:hover { color: var(--dg2-text); text-shadow: none; } .deltagreen2 .tactical-style .tabs [data-action="tab"].active { background: transparent; color: var(--dg2-olive-bright); border-bottom: 2px solid var(--dg2-olive); font-style: normal; text-shadow: none; } .deltagreen2 .tactical-style .tab { border: none; border-top: 1px solid var(--dg2-hairline); border-radius: 0; padding: 8px 4px 4px; scrollbar-width: thin; scrollbar-color: var(--dg2-border) transparent; } /* ------------------------------------------------------------------ */ /* Section dividers */ /* ------------------------------------------------------------------ */ .deltagreen2 .tactical-style div.horizontal-bar-section-divider, .deltagreen2 .tactical-style div.horizontal-bar-section-header { background: transparent; color: var(--dg2-olive); border-left: 4px solid var(--dg2-olive); border-bottom: 1px solid var(--dg2-hairline); border-radius: 0; height: 28px; font-size: 0.78rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; text-align: left; padding-left: 8px; margin-top: 6px; margin-bottom: 6px; justify-content: start; } .deltagreen2 .tactical-style div.horizontal-bar-section-divider:not(.skills-header) { display: flex; align-items: center; } .deltagreen2 .tactical-style .horizontal-bar-section-divider .toggle-untrained { color: var(--dg2-text-muted); text-transform: none; letter-spacing: 0; font-weight: 400; } /* ------------------------------------------------------------------ */ /* Skills grid */ /* ------------------------------------------------------------------ */ .deltagreen2 .tactical-style .grid-3col { gap: 4px 8px; } .deltagreen2 .tactical-style .flex-thin-border { background: var(--dg2-panel); border: 1px solid var(--dg2-hairline); border-left: 3px solid var(--dg2-border); border-radius: 4px; padding: 3px 6px; transition: background 0.12s ease, border-color 0.12s ease; } .deltagreen2 .tactical-style .flex-thin-border:hover { background: var(--dg2-panel-hover); border-left-color: var(--dg2-olive); } /* Dim untrained skills as a whole row */ .deltagreen2 .tactical-style .flex-thin-border:has(.not-rollable) { opacity: 0.45; } .deltagreen2 .tactical-style .flex-thin-border { align-items: center; min-height: 30px; } .deltagreen2 .tactical-style .skill-label { color: var(--dg2-text); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-content: center; } .deltagreen2 .tactical-style .skill-label .fa-dice { color: var(--dg2-text-muted); opacity: 0.4; transition: opacity 0.12s ease, color 0.12s ease; } .deltagreen2 .tactical-style .flex-thin-border:hover .rollable .fa-dice { color: var(--dg2-olive-bright); opacity: 1; } .deltagreen2 .tactical-style input.percentile-skill-input { font-weight: 700; color: var(--dg2-olive-bright); height: 1.45rem; } .deltagreen2 .tactical-style .flex-thin-border:has(.not-rollable) input.percentile-skill-input { color: var(--dg2-text-muted); } /* Interactive elements */ .deltagreen2 .tactical-style .rollable:hover, .deltagreen2 .tactical-style .rollable:focus { color: var(--dg2-olive-bright); text-shadow: none; } .deltagreen2 .tactical-style a:hover { text-shadow: none; } /* ------------------------------------------------------------------ */ /* Item lists (Equipment tab etc.) */ /* ------------------------------------------------------------------ */ .deltagreen2 .tactical-style .items-list .item-header { background: transparent; border-bottom: 1px solid var(--dg2-border); color: var(--dg2-text-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 2px 0; } .deltagreen2 .tactical-style .items-list .item { border-bottom: 1px solid var(--dg2-hairline); padding: 3px 2px; transition: background 0.12s ease; } .deltagreen2 .tactical-style .items-list .item:not(.item-header):hover { background: var(--dg2-panel-hover); } .deltagreen2 .tactical-style .items-list .item img.item-image { border: 1px solid var(--dg2-hairline); border-radius: 3px; background: var(--dg2-input-bg); filter: invert(0.85) hue-rotate(180deg); } .deltagreen2 .tactical-style .item-controls a { color: var(--dg2-text-muted); transition: color 0.12s ease; } .deltagreen2 .tactical-style .item-controls a:hover { color: var(--dg2-olive-bright); } .deltagreen2 .tactical-style .item-controls a.action-pill { border: 1px solid var(--dg2-border); border-radius: 20px; padding: 1px 8px; font-size: 0.75rem; } .deltagreen2 .tactical-style .item-controls a.action-pill:hover { border-color: var(--dg2-olive); color: var(--dg2-olive-bright); } .deltagreen2 .tactical-style .dg-red, .deltagreen2 .tactical-style .dg2-out-of-ammo { color: var(--dg2-red); } /* ------------------------------------------------------------------ */ /* Contrast fixes: stock rules paint text black for the paper themes */ /* ------------------------------------------------------------------ */ .deltagreen2 .tactical-style label, .deltagreen2 .tactical-style span, .deltagreen2 .tactical-style p, .deltagreen2 .tactical-style b, .deltagreen2 .tactical-style h3, .deltagreen2 .tactical-style h4, .deltagreen2 .tactical-style .item-name { color: inherit; } /* ------------------------------------------------------------------ */ /* Buttons and misc */ /* ------------------------------------------------------------------ */ .deltagreen2 .tactical-style button { background: var(--dg2-panel); color: var(--dg2-text); border: 1px solid var(--dg2-border); border-radius: 4px; transition: border-color 0.15s ease, background 0.15s ease; } .deltagreen2 .tactical-style button:hover { border-color: var(--dg2-olive); background: var(--dg2-panel-hover); box-shadow: none; } .deltagreen2 .tactical-style span.max-attribute-value-label { border-color: var(--dg2-hairline); color: var(--dg2-text-muted); } .deltagreen2 .tactical-style ::-webkit-scrollbar-thumb { background: var(--dg2-border); border: none; border-radius: 4px; } .deltagreen2 .tactical-style ::-webkit-scrollbar-track { background: transparent; } /* ------------------------------------------------------------------ */ /* Item sheets (ApplicationV1: theme class sits on the app root) */ /* ------------------------------------------------------------------ */ .deltagreen2.item.tactical-style { --dg2-panel: #1d2026; --dg2-border: #31363f; --dg2-hairline: #272b32; --dg2-text: #e6e8ea; --dg2-text-muted: #8f98a3; --dg2-olive: #8aa353; --dg2-olive-bright: #a9c46a; --dg2-input-bg: #12141a; } .deltagreen2.item.tactical-style .window-content { background: linear-gradient(160deg, #181b21 0%, #14161b 60%, #121419 100%) !important; color: var(--dg2-text); font-family: "PublicSans", "Helvetica Neue", Arial, sans-serif !important; } .deltagreen2.item.tactical-style .window-content label, .deltagreen2.item.tactical-style .window-content span, .deltagreen2.item.tactical-style .window-content p, .deltagreen2.item.tactical-style .window-content .resource-label { color: inherit; } .deltagreen2.item.tactical-style .window-content input[type="text"], .deltagreen2.item.tactical-style .window-content input[type="number"], .deltagreen2.item.tactical-style .window-content select, .deltagreen2.item.tactical-style .window-content textarea { background: var(--dg2-input-bg); color: var(--dg2-text); border: 1px solid var(--dg2-border); border-radius: 4px; font-family: "PublicSans", "Helvetica Neue", Arial, sans-serif; } .deltagreen2.item.tactical-style .window-content input:focus, .deltagreen2.item.tactical-style .window-content textarea:focus { border-color: var(--dg2-olive); box-shadow: 0 0 6px rgba(138, 163, 83, 0.35); outline: none; } .deltagreen2.item.tactical-style .window-content input[type="checkbox"] { accent-color: var(--dg2-olive); } .deltagreen2.item.tactical-style .window-content img { border-color: var(--dg2-border); } .deltagreen2.item.tactical-style .sheet-tabs [data-tab] { color: var(--dg2-text-muted); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-size: 0.78rem; } .deltagreen2.item.tactical-style .sheet-tabs [data-tab].active { color: var(--dg2-olive-bright); border-bottom: 2px solid var(--dg2-olive); text-shadow: none; } .deltagreen2.item.tactical-style .window-content .editor, .deltagreen2.item.tactical-style .window-content .editor-content { background: var(--dg2-panel); color: var(--dg2-text); border: 1px solid var(--dg2-hairline); border-radius: 4px; } /* ------------------------------------------------------------------ */ /* Delta Green 2 - pause overlay (radar scope) */ /* ------------------------------------------------------------------ */ #pause.dg2-pause { background: none; } /* Layout ONLY while actually paused - never override Foundry's hidden (unpaused) state, or the stock GAME PAUSED markup shows after unpausing. */ #pause.dg2-pause.paused { display: flex; flex-direction: column; align-items: center; gap: 14px; } #pause.dg2-pause:not(.paused) { display: none; } #pause.dg2-pause img { display: none; } .dg2-pause-scope { position: relative; width: 190px; height: 190px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(138, 163, 83, 0.5); background: radial-gradient(circle at 50% 50%, rgba(138, 163, 83, 0.10), rgba(10, 13, 16, 0.85) 70%); box-shadow: 0 0 40px rgba(0, 0, 0, 0.75), inset 0 0 30px rgba(0, 0, 0, 0.6); } .dg2-pause-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(138, 163, 83, 0.30); border-radius: 50%; } .dg2-pause-ring.r1 { width: 32%; height: 32%; } .dg2-pause-ring.r2 { width: 64%; height: 64%; } .dg2-pause-ring.r3 { width: 94%; height: 94%; } .dg2-pause-cross::before, .dg2-pause-cross::after { content: ""; position: absolute; background: rgba(138, 163, 83, 0.22); } .dg2-pause-cross::before { left: 50%; top: 4%; bottom: 4%; width: 1px; } .dg2-pause-cross::after { top: 50%; left: 4%; right: 4%; height: 1px; } .dg2-pause-wedge { position: absolute; inset: 0; border-radius: 50%; animation: dg2-pause-spin 4s linear infinite; background: conic-gradient(from 0deg at 50% 50%, rgba(214, 240, 170, 0.85) 0deg, rgba(138, 163, 83, 0) 6deg, rgba(138, 163, 83, 0) 240deg, rgba(138, 163, 83, 0.16) 310deg, rgba(138, 163, 83, 0.45) 348deg, rgba(214, 240, 170, 0.85) 360deg); } .dg2-pause-beam { position: absolute; left: calc(50% - 1.5px); top: 3%; width: 3px; height: 47%; transform-origin: bottom center; animation: dg2-pause-spin 4s linear infinite; background: linear-gradient(to top, rgba(230, 248, 195, 1), rgba(183, 216, 115, 0)); box-shadow: 0 0 12px rgba(183, 216, 115, 0.8); } .dg2-pause-hub { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: 50%; background: #c9e59a; box-shadow: 0 0 10px rgba(183, 216, 115, 0.9); } .dg2-pause-blip { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #c9e59a; box-shadow: 0 0 8px rgba(183, 216, 115, 0.9); opacity: 0; animation: dg2-pause-blip 4s linear infinite; } .dg2-pause-blip.b1 { left: 64%; top: 36%; animation-delay: -0.6s; } .dg2-pause-blip.b2 { left: 40%; top: 62%; animation-delay: -2.4s; } @keyframes dg2-pause-spin { to { transform: rotate(360deg); } } @keyframes dg2-pause-blip { 0% { opacity: 0.95; } 14% { opacity: 0.45; } 32% { opacity: 0; } 100% { opacity: 0; } } .dg2-pause-caption { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: "PublicSans", sans-serif; } .dg2-pause-title { font-size: 1.5rem; font-weight: 800; letter-spacing: 8px; text-transform: uppercase; color: #e6ecef; text-shadow: 0 0 18px rgba(138, 163, 83, 0.55); animation: dg2-pause-flicker 3.2s infinite; } .dg2-pause-sub { font-size: 0.72rem; letter-spacing: 4px; color: #8aa353; text-transform: uppercase; } @keyframes dg2-pause-flicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: 0.35; } 94% { opacity: 1; } 96% { opacity: 0.6; } 97% { opacity: 1; } } /* ------------------------------------------------------------------ */ /* Delta Green 2 - critical event chat cards */ /* ------------------------------------------------------------------ */ .chat-message.dg2-msg-providence { border-left-color: #d6b45a; } .chat-message.dg2-msg-providence .dg2-card-strip .dg2-card-type { color: #e8cd7a; } .chat-message.dg2-msg-providence .dg2-chip { color: #e8cd7a; background: rgba(214, 180, 90, 0.12); border-color: rgba(214, 180, 90, 0.5); } .chat-message.dg2-msg-calamity { border-left-color: #8b1a12; } .chat-message.dg2-msg-calamity { animation: dg2-calamity-in 0.6s ease-out; } .chat-message.dg2-msg-calamity .dg2-card-strip .dg2-card-type { color: #ff6a4d; } .chat-message.dg2-msg-calamity .dg2-chip { color: #ff8d75; background: rgba(139, 26, 18, 0.2); border-color: rgba(184, 50, 38, 0.6); } @keyframes dg2-calamity-in { 0% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } 100% { transform: translateX(0); } } .dg2-crit-event .dg2-crit-lede { font-size: 0.85rem; color: #aeb9c0; margin: 2px 0 6px; } .dg2-crit-event .dg2-crit-text { font-size: 0.9rem; line-height: 1.45; color: #e6ecef; border-top: 1px solid #272b32; padding-top: 6px; }