1391 lines
28 KiB
CSS
1391 lines
28 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
--bg-top: #f7f0d8;
|
|
--bg-bottom: #ecdfc4;
|
|
--button-hover: #dccfb4;
|
|
--card: #fffaf0e0;
|
|
--card-border: #c3b28b;
|
|
--text: #2b2418;
|
|
--muted: #6a5b3f;
|
|
--accent: #385f3d;
|
|
--accent-2: #9a402b;
|
|
--warn: #b4681b;
|
|
--danger: #8f2323;
|
|
--focus: #1d3f72;
|
|
--public: #2d6645;
|
|
--private-self: #4f3a8f;
|
|
--private-gm: #915119;
|
|
--page-background: url("/images/light.png");
|
|
--card-strong: #fff8ea;
|
|
--accent-dark: #2f4f34;
|
|
--accent-2-hover: #6b2419;
|
|
--header-bg: linear-gradient(120deg, #f1e4c9, #efe0bf);
|
|
--input-bg: #fffdf5;
|
|
--input-border: #8e7b57;
|
|
--button-text: #f8f7ef;
|
|
--switch-active-text: #fff9ef;
|
|
--tab-active-bg: linear-gradient(145deg, #e9d4a4, #d7b672);
|
|
--tab-active-border: #9e7328;
|
|
--section-border: #a89066;
|
|
--skill-group-bg: #f8f0de;
|
|
--chip-border: #decbb7;
|
|
--menu-shadow: rgba(34, 24, 9, 0.2);
|
|
--die-border: #2a2418;
|
|
--die-bg: #ffffff;
|
|
--die-text: #1f1a13;
|
|
--die-wild: #c79913;
|
|
--die-crit-bg: #d8ffc2;
|
|
--die-crit-text: #18490f;
|
|
--die-fumble-bg: #ffb5a8;
|
|
--die-fumble-text: #661110;
|
|
--die-added-bg: #dbffdf;
|
|
--die-added-text: #206029;
|
|
--die-removed-bg: #fde0dd;
|
|
--die-removed-text: #7f5f55;
|
|
--die-neutral-bg: #f8f1df;
|
|
--die-neutral-text: #3f2f12;
|
|
--die-open-high-bg: #dff6df;
|
|
--die-open-high-text: #1d5b26;
|
|
--die-open-high-border: #2a7c39;
|
|
--die-open-low-bg: #ffe1dc;
|
|
--die-open-low-text: #8a2217;
|
|
--die-open-low-border: #b74334;
|
|
--success-bg: #e8f7e8;
|
|
--success-border: #78a978;
|
|
--success-text: #1f5425;
|
|
--error-bg: #ffe9e5;
|
|
--error-border: #bb6e62;
|
|
--error-text: #7f2015;
|
|
--rare-bg: #fff1c7;
|
|
--rare-border: #b48b34;
|
|
--rare-text: #6d4c05;
|
|
--active-bg: #f6d28d;
|
|
--active-border: #8f5f12;
|
|
--active-text: #5d3808;
|
|
--skeleton-bg: linear-gradient(90deg, #dfd2b7, #efe3c9, #dfd2b7);
|
|
--health-bg: #fff2db;
|
|
--health-border: #b77a29;
|
|
--modal-overlay: rgba(35, 25, 9, 0.55);
|
|
--mobile-nav-bg: rgba(241, 228, 201, 0.96);
|
|
--toast-shadow: rgba(34, 24, 9, 0.22);
|
|
--surface-mix: #ffffff;
|
|
--transparent-mix: transparent;
|
|
--custom-roll-error-bg: #fff0ee;
|
|
--custom-roll-error-border: #6b2015;
|
|
--custom-roll-error-shadow: rgba(181, 58, 35, 0.12);
|
|
--entry-shadow: rgba(60, 41, 12, 0.07);
|
|
--entry-shadow-hover: rgba(60, 41, 12, 0.11);
|
|
--fresh-shadow: rgba(199, 153, 19, 0.16);
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
--bg-top: #060b13;
|
|
--bg-bottom: #0c1726;
|
|
--button-hover: rgba(62, 89, 123, 0.72);
|
|
--card: rgba(8, 15, 26, 0.84);
|
|
--card-border: #37516c;
|
|
--text: #edf5ff;
|
|
--muted: #adc1d6;
|
|
--accent: #5aa0cf;
|
|
--accent-2: #f0b35a;
|
|
--warn: #f4c35f;
|
|
--danger: #ff8b7a;
|
|
--focus: #91d5ff;
|
|
--public: #78d08f;
|
|
--private-self: #b9a0ff;
|
|
--private-gm: #f0b16c;
|
|
--page-background: url("/images/dark.png");
|
|
--card-strong: rgba(13, 24, 39, 0.96);
|
|
--accent-dark: #2d638f;
|
|
--accent-2-hover: #ffd085;
|
|
--header-bg: linear-gradient(120deg, rgba(10, 18, 31, 0.94), rgba(17, 31, 48, 0.9));
|
|
--input-bg: rgba(7, 14, 24, 0.92);
|
|
--input-border: #52708f;
|
|
--button-text: #f3f8ff;
|
|
--switch-active-text: #0b1420;
|
|
--tab-active-bg: linear-gradient(145deg, #244967, #17324d);
|
|
--tab-active-border: #6ca6d0;
|
|
--section-border: #486986;
|
|
--skill-group-bg: rgba(19, 34, 52, 0.72);
|
|
--chip-border: #415f7b;
|
|
--menu-shadow: rgba(0, 0, 0, 0.42);
|
|
--die-border: #9cb8d3;
|
|
--die-bg: #0f1c2d;
|
|
--die-text: #edf5ff;
|
|
--die-wild: #ffd770;
|
|
--die-crit-bg: #163f2a;
|
|
--die-crit-text: #a5f0b5;
|
|
--die-fumble-bg: #4b1c20;
|
|
--die-fumble-text: #ffc0b8;
|
|
--die-added-bg: #163f2a;
|
|
--die-added-text: #a5f0b5;
|
|
--die-removed-bg: #3b2630;
|
|
--die-removed-text: #e0abb7;
|
|
--die-neutral-bg: #14283e;
|
|
--die-neutral-text: #e5f1ff;
|
|
--die-open-high-bg: #133b2b;
|
|
--die-open-high-text: #a5f0b5;
|
|
--die-open-high-border: #64c783;
|
|
--die-open-low-bg: #482025;
|
|
--die-open-low-text: #ffc0b8;
|
|
--die-open-low-border: #ff8b7a;
|
|
--success-bg: #173b29;
|
|
--success-border: #66bd7f;
|
|
--success-text: #b6f1c3;
|
|
--error-bg: #452126;
|
|
--error-border: #d46b62;
|
|
--error-text: #ffc2ba;
|
|
--rare-bg: #3d3218;
|
|
--rare-border: #cfae52;
|
|
--rare-text: #ffe09a;
|
|
--active-bg: #4a3514;
|
|
--active-border: #e0b35d;
|
|
--active-text: #ffe1a3;
|
|
--skeleton-bg: linear-gradient(90deg, #172438, #263b54, #172438);
|
|
--health-bg: #3a2d19;
|
|
--health-border: #d09b4c;
|
|
--modal-overlay: rgba(1, 6, 13, 0.74);
|
|
--mobile-nav-bg: rgba(10, 18, 31, 0.96);
|
|
--toast-shadow: rgba(0, 0, 0, 0.42);
|
|
--surface-mix: #000000;
|
|
--transparent-mix: transparent;
|
|
--custom-roll-error-bg: #371c21;
|
|
--custom-roll-error-border: #ffc0b8;
|
|
--custom-roll-error-shadow: rgba(255, 139, 122, 0.18);
|
|
--entry-shadow: rgba(0, 0, 0, 0.24);
|
|
--entry-shadow-hover: rgba(0, 0, 0, 0.34);
|
|
--fresh-shadow: rgba(255, 215, 112, 0.2);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
min-height: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
html {
|
|
background-image: var(--page-background);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
body {
|
|
background: transparent;
|
|
color: var(--text);
|
|
font-family:
|
|
"Baloo 2",
|
|
"Nunito",
|
|
"Segoe UI",
|
|
system-ui,
|
|
-apple-system,
|
|
sans-serif;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.emoji {
|
|
font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
|
|
text-shadow: 0 0 1px black;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.rr-app {
|
|
max-width: 78rem;
|
|
margin: 0 auto;
|
|
padding: 1rem 1rem 4.5rem;
|
|
}
|
|
|
|
.rr-app.app-play {
|
|
height: 100dvh;
|
|
overflow: hidden;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.loading-shell,
|
|
.auth-shell {
|
|
display: grid;
|
|
gap: 1rem;
|
|
max-width: 70rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.auth-subtitle {
|
|
margin-top: 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.workspace-shell {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.app-play .workspace-shell {
|
|
height: 100%;
|
|
min-height: 0;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
}
|
|
|
|
.workspace-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
display: flex;
|
|
background: var(--header-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 0.8rem;
|
|
padding: 0.5rem 0.7rem;
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
|
|
.header-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.7rem;
|
|
width: 100%;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.header-row h1 {
|
|
margin: 0;
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.header-identity {
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.header-campaign {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
color: var(--muted);
|
|
min-width: 12rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.header-campaign label {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.header-campaign select {
|
|
max-width: 16rem;
|
|
min-width: 9rem;
|
|
padding: 0.25rem 0.45rem;
|
|
}
|
|
|
|
.header-campaign span {
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
}
|
|
|
|
.header-connection-cell {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.switch-group,
|
|
.header-actions,
|
|
.inline-actions {
|
|
display: flex;
|
|
gap: 0.45rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.card {
|
|
background: var(--card);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 0.8rem;
|
|
padding: 0.7rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.campaign-current {
|
|
display: grid;
|
|
gap: 0.15rem;
|
|
}
|
|
|
|
.campaign-current span,
|
|
.campaign-current p {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.campaign-current p {
|
|
margin: 0;
|
|
}
|
|
|
|
.auth-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
label {
|
|
font-weight: 600;
|
|
}
|
|
|
|
input,
|
|
select,
|
|
button {
|
|
font: inherit;
|
|
border-radius: 0.45rem;
|
|
border: 1px solid var(--input-border);
|
|
padding: 0.55rem 0.65rem;
|
|
}
|
|
|
|
input,
|
|
select {
|
|
background: var(--input-bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
button {
|
|
background: linear-gradient(180deg, var(--accent), var(--accent-dark));
|
|
color: var(--button-text);
|
|
border-color: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button.ghost {
|
|
background: transparent;
|
|
color: var(--text);
|
|
border-color: var(--input-border);
|
|
}
|
|
|
|
button.switch {
|
|
background: transparent;
|
|
color: var(--text);
|
|
border-color: var(--input-border);
|
|
}
|
|
|
|
button.switch.active {
|
|
background: var(--accent-2);
|
|
border-color: var(--accent-2);
|
|
color: var(--switch-active-text);
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.55;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
button:focus-visible,
|
|
input:focus-visible,
|
|
select:focus-visible {
|
|
outline: 3px solid var(--focus);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.status-message,
|
|
.form-error,
|
|
.field-error {
|
|
margin: 0;
|
|
}
|
|
|
|
.field-help {
|
|
margin: -0.1rem 0 0;
|
|
color: var(--muted);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.status-message {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.status-message.success {
|
|
color: var(--public);
|
|
}
|
|
|
|
.status-message.error,
|
|
.form-error,
|
|
.field-error {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.section-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.play-screen {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 2fr) minmax(19rem, 1fr);
|
|
gap: 1rem;
|
|
min-height: 0;
|
|
}
|
|
|
|
.app-play .play-screen {
|
|
height: 100%;
|
|
}
|
|
|
|
.app-play .play-screen > * {
|
|
min-height: 0;
|
|
}
|
|
|
|
.management-screen {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.character-picker {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 0.3rem;
|
|
padding-bottom: 0.15rem;
|
|
}
|
|
|
|
.icon-tab {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
min-width: 0;
|
|
padding: 0.22rem 0.45rem;
|
|
white-space: nowrap;
|
|
background: transparent;
|
|
color: var(--text);
|
|
border-color: var(--input-border);
|
|
}
|
|
|
|
.icon-tab.active {
|
|
background: var(--tab-active-bg);
|
|
border-color: var(--tab-active-border);
|
|
}
|
|
|
|
.icon-tab-glyph {
|
|
width: 1.35rem;
|
|
height: 1.35rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--input-border);
|
|
font-weight: 700;
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.icon-tab-text {
|
|
font-size: 0.76rem;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.skills-section {
|
|
border: 1px dashed var(--section-border);
|
|
border-radius: 0.65rem;
|
|
padding: 0.55rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.45rem;
|
|
}
|
|
|
|
.app-play .character-panel {
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.app-play .skills-section {
|
|
min-height: 0;
|
|
flex: 1 1 auto;
|
|
contain: layout;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.character-panel-fill {
|
|
flex: 1 1 auto;
|
|
min-height: 0.1rem;
|
|
}
|
|
|
|
.log-panel {
|
|
min-height: 0;
|
|
display: grid;
|
|
gap: 1rem;
|
|
grid-template-rows: auto minmax(0, 1fr) auto;
|
|
align-content: stretch;
|
|
}
|
|
|
|
.app-play .log-panel {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.log-panel-feed {
|
|
min-height: 0;
|
|
display: grid;
|
|
align-content: start;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
padding-right: 0.15rem;
|
|
}
|
|
|
|
.skill-list {
|
|
display: grid;
|
|
gap: 0.1rem;
|
|
}
|
|
|
|
.skill-group-block {
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.skill-group-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background-color: var(--skill-group-bg);
|
|
padding: 0.1rem;
|
|
border-top: 1px solid var(--card-border);
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.skill-item {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 0.6rem;
|
|
color: var(--text);
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.skill-details {
|
|
gap: 0.8rem;
|
|
min-width: 0;
|
|
align-content: center;
|
|
align-items: center;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.skill-details span {
|
|
color: var(--muted);
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
.skill-chip-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.chip-button {
|
|
min-width: 2rem;
|
|
height: 2rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--text);
|
|
border-color: var(--chip-border);
|
|
}
|
|
|
|
.chip-button:hover {
|
|
border-color: var(--input-border);
|
|
background: var(--button-hover);
|
|
}
|
|
|
|
.create-skill-item {
|
|
grid-template-columns: auto 1fr;
|
|
align-items: center;
|
|
justify-items: start;
|
|
background: transparent;
|
|
}
|
|
|
|
.skill-create-icon {
|
|
width: 1.45rem;
|
|
height: 1.45rem;
|
|
border: 1px solid var(--input-border);
|
|
border-radius: 999px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.skills-heading {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.skill-filter-wrap {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.skill-filter-input {
|
|
width: 10rem;
|
|
padding: 0.2rem 0.35rem;
|
|
}
|
|
|
|
.chip-toolbar {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.visibility-control {
|
|
font-size: 0.85rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.chip-toolbar select {
|
|
width: auto;
|
|
padding: 0.2rem 0.35rem;
|
|
}
|
|
|
|
.header-menu-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.menu-toggle {
|
|
background: transparent;
|
|
color: var(--text);
|
|
border-color: var(--input-border);
|
|
display: inline-flex;
|
|
gap: 0.4rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.menu-toggle-label {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.screen-menu {
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(100% + 0.3rem);
|
|
z-index: 40;
|
|
min-width: 14.5rem;
|
|
padding: 0.35rem;
|
|
background: var(--card-strong);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 0.55rem;
|
|
display: grid;
|
|
gap: 0.3rem;
|
|
box-shadow: 0 8px 16px var(--menu-shadow);
|
|
}
|
|
|
|
.menu-item {
|
|
width: 100%;
|
|
text-align: left;
|
|
background: transparent;
|
|
color: var(--text);
|
|
border-color: var(--input-border);
|
|
}
|
|
|
|
.menu-item.active {
|
|
background: var(--button-hover);
|
|
border-color: var(--tab-active-border);
|
|
}
|
|
|
|
.logout-link {
|
|
color: var(--accent-2);
|
|
font-weight: 700;
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.logout-link:hover {
|
|
color: var(--accent-2-hover);
|
|
}
|
|
|
|
.logout-link:focus-visible {
|
|
outline: 3px solid var(--focus);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.theme-toggle {
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
background: transparent;
|
|
color: var(--text);
|
|
border-color: var(--input-border);
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
background: var(--button-hover);
|
|
}
|
|
|
|
.roll-total {
|
|
font-size: 1.8rem;
|
|
font-weight: 800;
|
|
margin: 0;
|
|
}
|
|
|
|
.roll-total.inline {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.roll-dice-strip {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.die-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 2.1rem;
|
|
height: 2.1rem;
|
|
padding: 0.2rem 0.45rem 0;
|
|
border: 2px solid var(--die-border);
|
|
border-radius: 0.45rem;
|
|
background: var(--die-bg);
|
|
color: var(--die-text);
|
|
font-size: 2rem;
|
|
line-height: 1;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.die-chip.wild {
|
|
border-width: 3px;
|
|
border-color: var(--die-wild);
|
|
}
|
|
|
|
.die-chip.crit {
|
|
background: var(--die-crit-bg);
|
|
color: var(--die-crit-text);
|
|
}
|
|
|
|
.die-chip.fumble {
|
|
background: var(--die-fumble-bg);
|
|
color: var(--die-fumble-text);
|
|
}
|
|
|
|
.die-chip.added {
|
|
background: var(--die-added-bg);
|
|
color: var(--die-added-text);
|
|
}
|
|
|
|
.die-chip.removed {
|
|
background: var(--die-removed-bg);
|
|
color: var(--die-removed-text);
|
|
border-style: dashed;
|
|
}
|
|
|
|
.die-chip.rolemaster-initiative,
|
|
.die-chip.rolemaster-percentile,
|
|
.die-chip.rolemaster-open-ended-initial,
|
|
.die-chip.rolemaster-open-ended-high,
|
|
.die-chip.rolemaster-open-ended-low-subtract {
|
|
padding-top: 0;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.die-chip.rolemaster-initiative,
|
|
.die-chip.rolemaster-percentile,
|
|
.die-chip.rolemaster-open-ended-initial {
|
|
background: var(--die-neutral-bg);
|
|
color: var(--die-neutral-text);
|
|
}
|
|
|
|
.die-chip.rolemaster-open-ended-high {
|
|
background: var(--die-open-high-bg);
|
|
color: var(--die-open-high-text);
|
|
border-color: var(--die-open-high-border);
|
|
}
|
|
|
|
.die-chip.rolemaster-open-ended-low-subtract {
|
|
background: var(--die-open-low-bg);
|
|
color: var(--die-open-low-text);
|
|
border-color: var(--die-open-low-border);
|
|
}
|
|
|
|
.empty,
|
|
.muted {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.log-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
gap: 0.7rem;
|
|
}
|
|
|
|
.custom-roll-panel {
|
|
border-top: 1px solid color-mix(in srgb, var(--card-border) 72%, var(--surface-mix) 28%);
|
|
background: color-mix(in srgb, var(--card) 88%, var(--surface-mix) 12%);
|
|
border-radius: 0.95rem;
|
|
padding: 0.85rem 0.9rem 0.9rem;
|
|
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-mix) 45%, transparent 55%);
|
|
}
|
|
|
|
.custom-roll-composer {
|
|
display: grid;
|
|
gap: 0.45rem;
|
|
}
|
|
|
|
.custom-roll-composer-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.custom-roll-label {
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.custom-roll-composer-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 0.55rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.custom-roll-input {
|
|
min-width: 0;
|
|
padding: 0.72rem 0.9rem;
|
|
border-radius: 999px;
|
|
border: 1px solid color-mix(in srgb, var(--card-border) 78%, var(--surface-mix) 22%);
|
|
background: color-mix(in srgb, var(--card) 90%, var(--surface-mix) 10%);
|
|
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-mix) 60%, transparent 40%);
|
|
transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
|
|
}
|
|
|
|
.custom-roll-input::placeholder {
|
|
color: color-mix(in srgb, var(--muted) 80%, var(--surface-mix) 20%);
|
|
}
|
|
|
|
.custom-roll-input:hover:not(:disabled) {
|
|
border-color: color-mix(in srgb, var(--accent) 26%, var(--card-border) 74%);
|
|
}
|
|
|
|
.custom-roll-input.error {
|
|
border-color: color-mix(in srgb, var(--danger) 74%, var(--custom-roll-error-border) 26%);
|
|
background: color-mix(in srgb, var(--custom-roll-error-bg) 84%, var(--card) 16%);
|
|
box-shadow: 0 0 0 3px var(--custom-roll-error-shadow);
|
|
}
|
|
|
|
.custom-roll-composer-row button {
|
|
min-width: 5.2rem;
|
|
border-radius: 999px;
|
|
padding-inline: 1rem;
|
|
}
|
|
|
|
.log-entry {
|
|
border: 1px solid color-mix(in srgb, var(--card-border) 84%, var(--surface-mix) 16%);
|
|
border-radius: 0.85rem;
|
|
background: color-mix(in srgb, var(--card) 96%, var(--surface-mix) 4%);
|
|
overflow: hidden;
|
|
box-shadow: 0 0.45rem 1.2rem var(--entry-shadow);
|
|
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
|
|
}
|
|
|
|
.log-entry-toggle {
|
|
all: unset;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
text-align: left;
|
|
display: grid;
|
|
gap: 0.7rem;
|
|
padding: 0.8rem 0.9rem;
|
|
color: inherit;
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.log-entry:hover {
|
|
border-color: color-mix(in srgb, var(--accent) 28%, var(--card-border) 72%);
|
|
box-shadow: 0 0.7rem 1.55rem var(--entry-shadow-hover);
|
|
}
|
|
|
|
.log-entry.private-self {
|
|
border-left: 0.35rem solid color-mix(in srgb, var(--private-self) 78%, var(--surface-mix) 22%);
|
|
}
|
|
|
|
.log-entry.private-gm {
|
|
border-left: 0.35rem solid color-mix(in srgb, var(--private-gm) 78%, var(--surface-mix) 22%);
|
|
}
|
|
|
|
.log-entry.public {
|
|
border-left: 0.35rem solid color-mix(in srgb, var(--public) 70%, var(--surface-mix) 30%);
|
|
}
|
|
|
|
.log-entry.private-generic {
|
|
border-left: 0.35rem solid color-mix(in srgb, var(--muted) 52%, var(--surface-mix) 48%);
|
|
}
|
|
|
|
.log-entry.expanded {
|
|
border-color: color-mix(in srgb, var(--accent) 38%, var(--card-border) 62%);
|
|
}
|
|
|
|
.log-entry.fresh {
|
|
border-color: color-mix(in srgb, var(--die-wild) 52%, var(--card-border) 48%);
|
|
box-shadow: 0 0.9rem 1.8rem var(--fresh-shadow);
|
|
}
|
|
|
|
.log-entry-toggle:hover {
|
|
background: color-mix(in srgb, var(--card) 84%, var(--surface-mix) 16%);
|
|
}
|
|
|
|
.log-entry-toggle:focus-visible {
|
|
outline: 2px solid var(--focus);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.log-entry-main {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: start;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.log-entry-copy {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
column-gap: 0.38rem;
|
|
row-gap: 0.14rem;
|
|
min-width: 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.log-entry-actor,
|
|
.log-entry-skill,
|
|
.log-entry-character {
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
}
|
|
|
|
.log-entry-action {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.log-summary-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.log-summary-text {
|
|
color: var(--muted);
|
|
font-size: 0.92rem;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.log-event-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 1.5rem;
|
|
padding: 0.12rem 0.5rem;
|
|
border-radius: 999px;
|
|
border: 1px solid transparent;
|
|
font-size: 0.76rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.log-event-badge.positive {
|
|
border-color: var(--success-border);
|
|
background: var(--success-bg);
|
|
color: var(--success-text);
|
|
}
|
|
|
|
.log-event-badge.danger {
|
|
border-color: var(--error-border);
|
|
background: var(--error-bg);
|
|
color: var(--error-text);
|
|
}
|
|
|
|
.log-event-badge.rare {
|
|
border-color: var(--rare-border);
|
|
background: var(--rare-bg);
|
|
color: var(--rare-text);
|
|
}
|
|
|
|
.log-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
color: var(--muted);
|
|
font-size: 0.86rem;
|
|
}
|
|
|
|
.log-detail {
|
|
margin: 0 0.65rem 0.65rem;
|
|
padding: 0.7rem 0.8rem 0.75rem;
|
|
border-top: 1px solid color-mix(in srgb, var(--card-border) 38%, transparent 62%);
|
|
background: color-mix(in srgb, var(--surface-mix) 42%, var(--card) 58%);
|
|
border-radius: 0.7rem;
|
|
}
|
|
|
|
.log-detail p {
|
|
margin: 0.35rem 0 0;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
border-radius: 999px;
|
|
font-size: 0.78rem;
|
|
padding: 0.18rem 0.45rem;
|
|
border: 1px solid transparent;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.badge.active {
|
|
border-color: var(--active-border);
|
|
background: var(--active-bg);
|
|
color: var(--active-text);
|
|
}
|
|
|
|
.badge.public {
|
|
background: color-mix(in srgb, var(--public) 14%, var(--surface-mix) 86%);
|
|
color: var(--public);
|
|
border-color: color-mix(in srgb, var(--public) 34%, transparent 66%);
|
|
}
|
|
|
|
.badge.private-self {
|
|
background: color-mix(in srgb, var(--private-self) 12%, var(--surface-mix) 88%);
|
|
color: var(--private-self);
|
|
border-color: color-mix(in srgb, var(--private-self) 30%, transparent 70%);
|
|
}
|
|
|
|
.badge.private-gm {
|
|
background: color-mix(in srgb, var(--private-gm) 12%, var(--surface-mix) 88%);
|
|
color: var(--private-gm);
|
|
border-color: color-mix(in srgb, var(--private-gm) 30%, transparent 70%);
|
|
}
|
|
|
|
.badge.private-generic {
|
|
background: color-mix(in srgb, var(--muted) 12%, var(--surface-mix) 88%);
|
|
color: var(--muted);
|
|
border-color: color-mix(in srgb, var(--muted) 28%, transparent 72%);
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.log-entry-toggle {
|
|
gap: 0.65rem;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.log-entry-main,
|
|
.log-meta {
|
|
grid-template-columns: 1fr;
|
|
display: grid;
|
|
justify-content: stretch;
|
|
}
|
|
|
|
.log-meta {
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.roll-total.inline {
|
|
justify-self: start;
|
|
}
|
|
|
|
.log-detail {
|
|
margin: 0 0.5rem 0.5rem;
|
|
padding: 0.65rem 0.7rem 0.7rem;
|
|
}
|
|
|
|
.custom-roll-composer-row {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.custom-roll-composer-row button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.connection {
|
|
font-weight: 700;
|
|
margin: 0;
|
|
}
|
|
|
|
.connection.ok {
|
|
color: var(--public);
|
|
}
|
|
|
|
.connection.warn {
|
|
color: var(--warn);
|
|
}
|
|
|
|
.connection.offline {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.skeleton-stack {
|
|
display: grid;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.skeleton-line {
|
|
height: 0.85rem;
|
|
border-radius: 0.4rem;
|
|
background: var(--skeleton-bg);
|
|
background-size: 220% 100%;
|
|
animation: shimmer 1.1s linear infinite;
|
|
}
|
|
|
|
.skeleton-line.short {
|
|
width: 65%;
|
|
}
|
|
|
|
.health-banner {
|
|
border: 1px solid var(--health-border);
|
|
background: var(--health-bg);
|
|
border-radius: 0.75rem;
|
|
padding: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.management-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
gap: 0.45rem;
|
|
}
|
|
|
|
.management-list li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 0.55rem;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.management-list li p {
|
|
margin: 0;
|
|
}
|
|
|
|
.management-actions {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.action-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
align-self: flex-start;
|
|
padding: 0.55rem 0.65rem;
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 0.45rem;
|
|
background: var(--input-bg);
|
|
color: var(--text);
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.action-link:hover {
|
|
background: var(--button-hover);
|
|
}
|
|
|
|
.action-link:focus-visible {
|
|
outline: 3px solid var(--focus);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.add-row-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
align-self: flex-start;
|
|
background: var(--input-bg);
|
|
color: var(--text);
|
|
border: 1px solid var(--card-border);
|
|
}
|
|
|
|
.add-row-icon {
|
|
width: 1.2rem;
|
|
height: 1.2rem;
|
|
border: 1px solid var(--input-border);
|
|
border-radius: 999px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: var(--modal-overlay);
|
|
display: grid;
|
|
place-items: center;
|
|
z-index: 20;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.modal-card {
|
|
width: min(32rem, 100%);
|
|
background: var(--card);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 0.85rem;
|
|
padding: 0.9rem;
|
|
display: grid;
|
|
gap: 0.65rem;
|
|
}
|
|
|
|
.rolemaster-roll-modal {
|
|
width: min(28rem, 100%);
|
|
}
|
|
|
|
.mobile-bottom-nav {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 30;
|
|
padding: 0.55rem;
|
|
display: none;
|
|
gap: 0.45rem;
|
|
background: var(--mobile-nav-bg);
|
|
border-top: 1px solid var(--card-border);
|
|
}
|
|
|
|
.toast-stack {
|
|
position: fixed;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
z-index: 60;
|
|
display: grid;
|
|
gap: 0.45rem;
|
|
width: min(22rem, calc(100vw - 2rem));
|
|
}
|
|
|
|
.toast {
|
|
border-radius: 0.6rem;
|
|
border: 1px solid;
|
|
padding: 0.55rem 0.7rem;
|
|
box-shadow: 0 6px 14px var(--toast-shadow);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.toast p {
|
|
margin: 0;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.toast.success {
|
|
background: var(--success-bg);
|
|
border-color: var(--success-border);
|
|
color: var(--success-text);
|
|
}
|
|
|
|
.toast.error {
|
|
background: var(--error-bg);
|
|
border-color: var(--error-border);
|
|
color: var(--error-text);
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
border: 0;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
from {
|
|
background-position: 220% 0;
|
|
}
|
|
|
|
to {
|
|
background-position: -220% 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.workspace-header {
|
|
position: static;
|
|
}
|
|
|
|
.header-row {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.play-screen {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.play-screen.mobile-log .character-panel {
|
|
display: none;
|
|
}
|
|
|
|
.play-screen.mobile-character .log-panel {
|
|
display: none;
|
|
}
|
|
|
|
.management-screen {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.auth-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.header-row h1,
|
|
.header-identity,
|
|
.header-campaign {
|
|
white-space: normal;
|
|
}
|
|
|
|
.header-campaign {
|
|
flex-wrap: wrap;
|
|
min-width: 0;
|
|
}
|
|
|
|
.header-campaign select {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.mobile-bottom-nav {
|
|
display: flex;
|
|
}
|
|
|
|
.rr-app.app-play {
|
|
padding-bottom: 4.25rem;
|
|
}
|
|
}
|