Spaces:
Running on Zero
Running on Zero
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| .mafia-chat-compose { | |
| width: 232px; | |
| height: 46px; | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) 62px; | |
| gap: 8px; | |
| align-items: stretch; | |
| pointer-events: auto; | |
| box-sizing: border-box; | |
| } | |
| .mafia-chat-dom-input { | |
| width: 100%; | |
| height: 44px; | |
| min-width: 0; | |
| box-sizing: border-box; | |
| border: 1px solid #6b5326; | |
| background: rgba(6, 5, 7, 0.93); | |
| color: #f4dfbd; | |
| padding: 0 12px; | |
| font: 13px/1.2 monospace; | |
| outline: none; | |
| box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.48), 0 0 18px rgba(0, 0, 0, 0.36); | |
| } | |
| .mafia-chat-send { | |
| display: block; | |
| width: 62px; | |
| height: 44px; | |
| box-sizing: border-box; | |
| border: 1px solid #6b5326; | |
| background: rgba(74, 20, 20, 0.94); | |
| color: #f4dfbd; | |
| font: 700 12px/1 monospace; | |
| cursor: pointer; | |
| box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.38); | |
| } | |
| .mafia-chat-send:hover, | |
| .mafia-chat-send:focus-visible { | |
| background: rgba(122, 40, 40, 0.96); | |
| outline: none; | |
| } | |
| .mafia-chat-dom-input::placeholder { | |
| color: rgba(185, 155, 112, 0.75); | |
| } | |
| .mafia-ledger-dom-panel, | |
| .mafia-chat-dom-panel, | |
| .mafia-suggestions-dom-panel { | |
| box-sizing: border-box; | |
| font-family: monospace; | |
| color: #e8dcc0; | |
| pointer-events: auto; | |
| text-shadow: 0 1px 0 #000; | |
| } | |
| .mafia-ledger-dom-panel { | |
| width: 232px; | |
| height: 676px; | |
| overflow: hidden auto; | |
| padding: 0 4px 10px; | |
| } | |
| .mafia-ledger-section { | |
| padding: 0 0 12px; | |
| margin-bottom: 12px; | |
| border-bottom: 1px solid rgba(107, 83, 38, 0.35); | |
| } | |
| .mafia-ledger-section h3 { | |
| margin: 0 0 8px; | |
| color: #e8c87a; | |
| font: 700 12px/1.2 monospace; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| } | |
| .mafia-ledger-row { | |
| display: grid; | |
| grid-template-columns: 10px 1fr; | |
| column-gap: 8px; | |
| margin-bottom: 8px; | |
| font-size: 12px; | |
| line-height: 1.35; | |
| } | |
| .mafia-ledger-row span { | |
| width: 7px; | |
| height: 7px; | |
| margin-top: 5px; | |
| border-radius: 999px; | |
| background: #b99b70; | |
| box-shadow: 0 0 8px rgba(185, 155, 112, 0.6); | |
| } | |
| .mafia-ledger-row.vote span, | |
| .mafia-ledger-row.vote_resolved span { | |
| background: #b8443c; | |
| } | |
| .mafia-ledger-row.death span, | |
| .mafia-ledger-row.dawn_announced span { | |
| background: #eb5757; | |
| } | |
| .mafia-ledger-row.claim span, | |
| .mafia-ledger-row.doctor_save span { | |
| background: #6fcf97; | |
| } | |
| .mafia-ledger-row p { | |
| margin: 0; | |
| } | |
| .mafia-ledger-empty, | |
| .mafia-chat-empty, | |
| .mafia-suggestion-note { | |
| color: #b99b70; | |
| font-size: 12px; | |
| line-height: 1.45; | |
| } | |
| .mafia-chat-dom-panel { | |
| width: 218px; | |
| height: 560px; | |
| overflow: hidden auto; | |
| padding: 0 4px 8px; | |
| scrollbar-width: thin; | |
| scrollbar-color: #6b5326 rgba(7, 6, 9, 0.4); | |
| } | |
| .mafia-chat-bubble { | |
| margin-bottom: 10px; | |
| padding: 9px 10px; | |
| border: 1px solid rgba(107, 83, 38, 0.7); | |
| background: rgba(13, 11, 15, 0.72); | |
| box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.22); | |
| border-radius: 3px; | |
| } | |
| .mafia-chat-bubble.human { | |
| border-color: rgba(232, 200, 122, 0.75); | |
| background: rgba(66, 46, 24, 0.58); | |
| } | |
| .mafia-chat-bubble.moderator { | |
| border-color: rgba(116, 183, 232, 0.62); | |
| background: rgba(14, 28, 40, 0.62); | |
| } | |
| .mafia-chat-bubble.private { | |
| border-color: rgba(158, 207, 255, 0.9); | |
| box-shadow: inset 0 0 18px rgba(40, 76, 112, 0.26), 0 0 16px rgba(80, 145, 210, 0.16); | |
| } | |
| .mafia-chat-bubble header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| margin-bottom: 4px; | |
| color: #e8c87a; | |
| font-size: 12px; | |
| } | |
| .mafia-chat-bubble header span { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .mafia-chat-bubble header em { | |
| color: #b99b70; | |
| font-style: normal; | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| } | |
| .mafia-chat-bubble p { | |
| margin: 0; | |
| color: #f0e3cb; | |
| font-size: 12px; | |
| line-height: 1.42; | |
| white-space: normal; | |
| } | |
| .mafia-suggestions-dom-panel { | |
| width: 218px; | |
| min-height: 94px; | |
| max-height: 124px; | |
| overflow: hidden auto; | |
| padding: 8px 4px; | |
| border-top: 1px solid rgba(107, 83, 38, 0.42); | |
| } | |
| .mafia-suggestion-kicker { | |
| color: #b8443c; | |
| font-size: 11px; | |
| letter-spacing: 0.08em; | |
| margin-bottom: 6px; | |
| text-transform: uppercase; | |
| } | |
| .mafia-suggestion-chip { | |
| display: block; | |
| width: 100%; | |
| margin-bottom: 6px; | |
| padding: 6px 8px; | |
| border: 1px solid rgba(107, 83, 38, 0.58); | |
| background: rgba(12, 10, 18, 0.62); | |
| color: inherit; | |
| cursor: pointer; | |
| text-align: left; | |
| font: inherit; | |
| } | |
| .mafia-suggestion-chip:hover { | |
| border-color: rgba(232, 200, 122, 0.82); | |
| background: rgba(66, 46, 24, 0.62); | |
| } | |
| .mafia-suggestion-chip:focus-visible { | |
| outline: 2px solid #e8c87a; | |
| outline-offset: 2px; | |
| } | |
| .mafia-suggestion-chip strong { | |
| color: #e8c87a; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| } | |
| .mafia-suggestion-chip span { | |
| margin-left: 8px; | |
| color: #b99b70; | |
| font-size: 10px; | |
| } | |
| .mafia-suggestion-chip p { | |
| margin: 4px 0 0; | |
| color: #e8dcc0; | |
| font-size: 11px; | |
| line-height: 1.35; | |
| } | |
| /* Custom game UI styles */ | |
| @layer components { | |
| /* CSS Custom Properties for reusable values */ | |
| :root { | |
| --pixel-container-progress-fill-clip-path: polygon( | |
| calc(100% - 3px) 0px, | |
| calc(100% - 3px) 3px, | |
| calc(100% - 0px) 3px, | |
| calc(100% - 0px) calc(100% - 3px), | |
| calc(100% - 3px) calc(100% - 3px), | |
| calc(100% - 3px) calc(100% - 0px), | |
| 3px calc(100% - 0px), | |
| 3px calc(100% - 3px), | |
| 0px calc(100% - 3px), | |
| 0px 3px, | |
| 3px 3px, | |
| 3px 0px | |
| ); | |
| --pixel-container-clip-path: polygon( | |
| calc(100% - 9px) 0px, | |
| calc(100% - 9px) 3px, | |
| calc(100% - 6px) 3px, | |
| calc(100% - 6px) 6px, | |
| calc(100% - 3px) 6px, | |
| calc(100% - 3px) 9px, | |
| calc(100% - 0px) 9px, | |
| calc(100% - 0px) calc(100% - 9px), | |
| calc(100% - 3px) calc(100% - 9px), | |
| calc(100% - 3px) calc(100% - 6px), | |
| calc(100% - 6px) calc(100% - 6px), | |
| calc(100% - 6px) calc(100% - 3px), | |
| calc(100% - 9px) calc(100% - 3px), | |
| calc(100% - 9px) calc(100% - 0px), | |
| 9px calc(100% - 0px), | |
| 9px calc(100% - 3px), | |
| 6px calc(100% - 3px), | |
| 6px calc(100% - 6px), | |
| 3px calc(100% - 6px), | |
| 3px calc(100% - 9px), | |
| 0px calc(100% - 9px), | |
| 0px calc(100% - 9px), | |
| 0px 9px, | |
| 3px 9px, | |
| 3px 6px, | |
| 6px 6px, | |
| 6px 3px, | |
| 9px 3px, | |
| 9px 0px | |
| ); | |
| --pixel-container-clickable-clip-path: polygon( | |
| calc(100% - 9px) 0px, | |
| calc(100% - 9px) 3px, | |
| calc(100% - 6px) 3px, | |
| calc(100% - 6px) 6px, | |
| calc(100% - 3px) 6px, | |
| calc(100% - 3px) 9px, | |
| calc(100% - 0px) 9px, | |
| calc(100% - 0px) calc(100% - 3px), | |
| calc(100% - 3px) calc(100% - 3px), | |
| calc(100% - 3px) calc(100% - 0px), | |
| calc(100% - 6px) calc(100% - 0px), | |
| calc(100% - 6px) calc(100% + 3px), | |
| calc(100% - 9px) calc(100% + 3px), | |
| calc(100% - 9px) calc(100% + 6px), | |
| 9px calc(100% + 6px), | |
| 9px calc(100% + 3px), | |
| 6px calc(100% + 3px), | |
| 6px calc(100% + 0px), | |
| 3px calc(100% + 0px), | |
| 3px calc(100% - 3px), | |
| 0px calc(100% - 3px), | |
| 0px calc(100% - 3px), | |
| 0px 9px, | |
| 3px 9px, | |
| 3px 6px, | |
| 6px 6px, | |
| 6px 3px, | |
| 9px 3px, | |
| 9px 0px | |
| ); | |
| --pixel-container-slot-clip-path: polygon( | |
| calc(100% - 6px) 0px, | |
| calc(100% - 6px) 3px, | |
| calc(100% - 3px) 3px, | |
| calc(100% - 3px) 6px, | |
| calc(100% - 0px) 6px, | |
| calc(100% - 0px) calc(100% - 6px), | |
| calc(100% - 3px) calc(100% - 6px), | |
| calc(100% - 3px) calc(100% - 3px), | |
| calc(100% - 6px) calc(100% - 3px), | |
| calc(100% - 6px) calc(100% - 0px), | |
| 6px calc(100% - 0px), | |
| 6px calc(100% - 3px), | |
| 3px calc(100% - 3px), | |
| 3px calc(100% - 6px), | |
| 0px calc(100% - 6px), | |
| 0px calc(100% - 6px), | |
| 0px 6px, | |
| 3px 6px, | |
| 3px 3px, | |
| 6px 3px, | |
| 6px 0px | |
| ); | |
| } | |
| } | |