/* π₯π₯π₯ Theme Laboratory CSS Variables - controlled by superadmin color sliders in nav_right.html */
:root {
--page-background: #ffffff;
--sidebar-background: #ffffff;
--ai-selector-background: #ffffff;
--table-border-color: #dddddd;
--ai-inner-box-background: #fafafa;
--ai-inner-box-border: #e0e0e0;
--ai-selector-hover: #f0f0f0;
}
html, body {
margin: 0;
padding: 0;
min-height: 100%;
height: auto;
font-family: Arial, sans-serif;
overflow: auto;
background-color: var(--page-background);
}
/* π₯π₯π₯ GLOBAL: Tooltip image sizing classes - work on ALL pages */
img.img-small {
max-width: 200px !important;
width: 200px !important;
height: auto !important;
display: block;
}
img.img-medium {
max-width: 400px !important;
width: 400px !important;
height: auto !important;
display: block;
}
img.img-large {
max-width: 600px !important;
width: 600px !important;
height: auto !important;
display: block;
}
img.img-full {
max-width: 100% !important;
width: auto !important;
height: auto !important;
display: block;
}
/* Pacman Progress Modal Styles */
.pacman-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 30000;
opacity: 0;
transition: opacity 0.3s ease;
}
.pacman-modal-overlay.show {
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
}
.pacman-modal-box {
background: white;
border-radius: 8px;
padding: 30px;
max-width: 600px;
width: 90%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.pacman-modal-content {
text-align: center;
}
/* Project Title - editable inline */
.project-title-display {
font-size: 18px;
color: rgba(255, 255, 255, 0.9);
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s ease;
display: inline-block;
min-width: 100px;
max-width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.project-title-display:hover {
background: rgba(132, 208, 240, 0.1);
}
.project-title-input {
font-size: 18px;
color: #ffffff;
background: rgba(132, 208, 240, 0.25);
border: 2px solid #84d0f0;
padding: 8px 12px;
border-radius: 4px;
min-width: 200px;
max-width: 400px;
font-family: inherit;
}
.project-title-input:focus {
outline: none;
background: rgba(132, 208, 240, 0.35);
color: #ffffff;
}
/* Custom H1 styling - applies to all page titles */
h1 {
text-align: center;
margin: 25px 0 35px 0;
color: #111827;
font-weight: 500;
letter-spacing: -0.5px;
font-size: 28px;
}
/* Custom H3 spacing adjustment */
h3 {
margin-bottom: 0.25rem;
}
/* Custom H1 spacing adjustment */
h3 {
margin-bottom: 0.125rem;
}
.tonal-edit-icon {
position: absolute;
bottom: 10px;
right: 10px;
width: 20px;
height: 20px;
cursor: pointer;
transition: transform 0.2s ease;
}
.tonal-edit-icon:hover {
transform: scale(1.15);
}
/* Editing state (unlocked icon) */
.tonal-edit-icon.editing {
background-image: url('/static/images/unlocked.png');
transform: scale(1.15);
}
/* Saving state (locked icon) */
.tonal-edit-icon.saving {
background-image: url('/static/images/locked.png');
transform: scale(1.15);
transition: all 0.3s ease;
}
/* π₯π₯π₯ Suggestion Edit Icon (inline editing for suggestions/implementation) */
.suggestion-edit-icon {
width: 20px;
height: 20px;
cursor: pointer;
transition: transform 0.3s ease;
display: inline-block;
vertical-align: middle;
margin-left: 8px;
}
.suggestion-edit-icon:hover {
transform: scale(1.15);
}
/* Editing state - just rotate the same icon 45 degrees */
.suggestion-edit-icon.editing {
transform: rotate(45deg);
}
/* Editable input fields for suggestions */
.suggestion-edit-textarea {
border: 2px solid #007bff;
border-radius: 4px;
padding: 8px;
font-size: inherit;
font-family: inherit;
width: 100%;
box-sizing: border-box;
background-color: #f8f9fa;
resize: vertical;
min-height: 80px;
transition: border-color 0.2s ease;
}
.suggestion-edit-textarea:focus {
outline: none;
border-color: #0056b3;
background-color: #ffffff;
}
/* Editable input fields */
.tonal-edit-input {
border: 2px solid #007bff;
border-radius: 4px;
padding: 8px;
font-size: inherit;
font-family: inherit;
width: 100%;
box-sizing: border-box;
background-color: #f8f9fa;
transition: border-color 0.2s ease;
}
.tonal-edit-input:focus {
outline: none;
border-color: #0056b3;
background-color: #ffffff;
}
.tonal-edit-textarea {
border: 2px solid #007bff;
border-radius: 4px;
padding: 8px;
font-size: inherit;
font-family: inherit;
width: 100%;
box-sizing: border-box;
background-color: #f8f9fa;
resize: vertical;
min-height: 80px;
transition: border-color 0.2s ease;
}
.tonal-edit-textarea:focus {
outline: none;
border-color: #0056b3;
background-color: #ffffff;
}
.act-tone.editing-mode {
background-color: #f0f8ff;
border: 1px solid #b3d9ff;
border-radius: 4px;
}
/* Order Toggle Switch */
.order-toggle-container {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 15px 0 30px; /* Added left margin to move it right */
}
.toggle-label {
color: transparent; /* Make text transparent by default */
font-size: 12px;
font-weight: 500;
transition: color 0.2s ease;
}
/* Show labels on hover */
.order-toggle-container:hover .toggle-label {
color: #fff;
}
/* Original toggle switch (green) - keeping for other pages */
.toggle-switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .3s;
border-radius: 24px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .3s;
border-radius: 50%;
/* Add green outline when toggle is unchecked (false position) */
box-shadow: inset 0 0 0 2px #4CAF50;
}
/* When checked, use green background and remove outline */
.toggle-switch input:checked + .toggle-slider {
background-color: #4CAF50;
}
.toggle-switch input:checked + .toggle-slider:before {
transform: translateX(26px);
box-shadow: none; /* Remove outline when in checked position */
}
/* Three-position toggle (extending existing toggle style) */
.three-position-toggle {
position: relative;
display: inline-block;
width: 100px;
height: 24px;
}
.three-position-toggle input[type="range"] {
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
position: absolute;
z-index: 2;
margin: 0;
}
.three-position-toggle .toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .3s;
border-radius: 24px;
width: 100px;
}
.three-position-toggle .toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: #6366f1;
transition: .3s;
border-radius: 50%;
transform: translateX(0);
}
/* Position the thumb based on slider value */
.three-position-toggle input[value="0"] + .toggle-slider:before {
transform: translateX(0);
}
.three-position-toggle input[value="1"] + .toggle-slider:before {
transform: translateX(38px);
}
.three-position-toggle input[value="2"] + .toggle-slider:before {
transform: translateX(76px);
}
/* Hover state */
.three-position-toggle:hover .toggle-slider:before {
width: 22px;
height: 22px;
bottom: 1px;
background-color: #5558d9;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.5);
}
/* Active state - even more swollen */
.three-position-toggle:active .toggle-slider:before {
width: 24px;
height: 24px;
bottom: 0px;
background-color: #4447c7;
box-shadow: 0 2px 12px rgba(99, 102, 241, 0.7);
}
/* Grid toggle switch (blue) - for image grid */
.grid-toggle-switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.grid-toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.grid-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .3s;
border-radius: 24px;
}
.grid-toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .3s;
border-radius: 50%;
/* Add blue outline when toggle is unchecked (false position) */
box-shadow: inset 0 0 0 2px #3b82f6;
}
/* When checked, use blue background and remove outline */
.grid-toggle-switch input:checked + .grid-toggle-slider {
background-color: #3b82f6;
}
.grid-toggle-switch input:checked + .grid-toggle-slider:before {
transform: translateX(26px);
box-shadow: none; /* Remove outline when in checked position */
}
/* Image Class Dropdown */
.image-class-selector {
display: inline-block;
margin-left: 20px;
}
.image-class-dropdown {
background-color: #333;
color: #fff;
border: 1px solid #555;
border-radius: 4px;
padding: 6px 12px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.image-class-dropdown:hover {
background-color: #444;
border-color: #3b82f6;
}
.image-class-dropdown:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}
/* Character Name Tooltip */
.image-container {
position: relative;
}
.character-tooltip {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.9);
color: #fff;
padding: 6px 12px;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
pointer-events: none;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.image-container:hover .character-tooltip {
opacity: 1;
visibility: visible;
}
/* STYLING FOR TIMELINE DISPLAY */
.timeline-container, .tonal-container {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 10px;
}
.timeline-item, .act-tone {
padding: 10px 12px;
border-radius: 4px;
border-left: 5px solid #ccc;
}
.timeline-item--main, .act-tone--act_one {
border-left-color: #4b76e8;
background-color: rgba(75, 118, 232, 0.05);
}
.timeline-item--backstory, .act-tone--act_two_a {
border-left-color: #e87c4b;
background-color: rgba(232, 124, 75, 0.05);
}
.timeline-item--alternate, .act-tone--midpoint {
border-left-color: #9c4be8;
background-color: rgba(156, 75, 232, 0.05);
}
.timeline-item--future, .act-tone--act_two_b {
border-left-color: #4be89c;
background-color: rgba(75, 232, 156, 0.05);
}
.act-tone--act_three {
border-left-color: #e84b9c;
background-color: rgba(232, 75, 156, 0.05);
}
.act-tone--character {
border-left-color: #4b4be8;
background-color: rgba(75, 75, 232, 0.03);
}
.act-tone--core {
border-left-color: #2d7a45; /* Lighter forest green for core profile */
background-color: rgba(45, 122, 69, 0.03);
}
.act-tone--flags {
border-left-color: #4be8e8; /* Teal color for flags */
background-color: rgba(75, 232, 232, 0.03);
}
.act-tone--summary {
border-left-color: #c1e84b; /* Lime green color for summary */
background-color: rgba(193, 232, 75, 0.03);
}
.timeline-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.timeline-name {
margin: 0;
font-size: 1.05em;
font-weight: bold;
}
.timeline-type {
font-size: 0.8em;
padding: 2px 6px;
background: #eee;
}
border-radius: 3px;
}
.timeline-description {
font-size: 0.95em;
line-height: 1.4;
}
/* STYLING FOR FLAG ADVISORY */
.resync-confirm-dialog {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
}
.resync-confirm-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 30px;
border-radius: 8px;
max-width: 550px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.resync-confirm-title {
color: #7b2cbf;
margin-top: 0;
margin-bottom: 20px;
}
.resync-confirm-text {
margin-bottom: 25px;
line-height: 1.5;
}
.resync-confirm-buttons {
display: flex;
justify-content: space-between;
margin-top: 25px;
}
.resync-cancel-button {
padding: 10px 18px;
background: linear-gradient(to right, #10b981 0%, #14b8a6 100%);
color: white;
border: 1px solid #059669;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
}
.resync-cancel-button:hover {
background: linear-gradient(to right, #059669 0%, #0d9488 100%);
border-color: #047857;
}
.resync-continue-button {
text-decoration: none;
padding: 10px 18px;
background-color: #9d5ec4;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
display: inline-block;
text-align: center;
font-size: 16px;
transition: background-color 0.3s ease;
}
.resync-continue-button:hover {
background-color: #7b2cbf;
}
.btn-scene-drafter--dimmed {
opacity: 0.6;
filter: grayscale(30%);
transition: opacity 0.3s ease;
}
.btn-scene-drafter--dimmed:hover {
opacity: 0.8;
}
.start-page {
background: url('/static/LogoStorylaunchIcon.svg') no-repeat center center fixed;
background-size: cover;
background-color: rgba(255, 255, 255, 0.9);
background-blend-mode: overlay;
min-height: 100vh;
width: 100%;
}
/* Add a buffer and center the logo */
.logo-container {
text-align: center;
margin-top: 40px;
margin-bottom: 20px;
}
.logo {
max-width: 400px;
width: 100%;
height: auto;
}
/* NOTE: table_primary BECOMES table_fresh */
/* Start of fresh table styles */
.table_fresh {
border: 1px solid #00bf7c; /* Green border */
width: 100%;
}
.table_fresh th, .table_fresh td {
border: 1px solid #e9f7fb; /* Pale cyan borders */
padding: 10px;
text-align: left;
}
.table_fresh th {
background-color: #99fcd990; /* Semi-transparent mint green */
font-weight: bold;
color: #333;
border-bottom: 2px solid #00bf7c; /* Double width green line under header */
}
/* Dashboard table specific styles */
.dashboard-table {
margin-bottom: 30px;
}
.table_feedback {
border: 1px solid #4146f5;
background-color: white;
border-collapse: collapse;
}
.table_feedback .variant-active-row {
background-color: #e6e0f5; /* Light purple background for active rows */
}
.table_feedback th, .table_feedback td {
border: 1px solid #d8ddfa; /* Pale cyan borders */
padding: 6px 8px; /* Reduced padding */
text-align: left;
}
.table_feedback th {
background-color: #cceefd; /* Semi-transparent mint green */
font-weight: bold;
color: #333;
}
/* Start of fresh_primary table styles */
/* NOTE: table_primary_breakdown BECOMES table_fresh_primary */
.table_fresh_primary {
border: 1px solid #bddcfa; /* Powder blue border */
}
.table_fresh_primary th, .table_fresh_primary td {
border: 1px solid #bddcfa; /* Same blue as outer border */
padding: 10px;
text-align: left;
}
.table_fresh_primary th {
background-color: #efe0f690; /* Semi-transparent lilac */
font-weight: bold;
color: #333;
}
/* Default table styles */
table {
width: 100%;
border-collapse: separate !important;
border-spacing: 0 !important;
border: 1px solid transparent; /* π₯π₯π₯ INVISIBLE border - structure only */
border-radius: 10px;
overflow: hidden;
background-color: #ffffff;
margin-bottom: 5px;
}
table th, table td {
border: 1px solid transparent; /* π₯π₯π₯ INVISIBLE borders - provide structure but not visible to users */
padding: 10px;
text-align: left;
line-height: var(--lineHeight);
font-size: var(--baseFontSize);
}
table th {
background-color: #f9f9f9;
font-weight: bold;
color: #333;
}
.table tr:hover {
background-color: #ffffff;
}
.table tr {
background-color: #ffffff;
}
/* Specialized styling for the character block */
.table_char {
width: 100%;
border-collapse: separate !important;
border-spacing: 0 !important;
/* Set only the outer border to the new color */
border: 1px solid var(--table-border-color) !important;
border-radius: 10px;
overflow: hidden;
background-color: #ffffff;
margin-bottom: 5px;
}
/* Remove the cell-level border override for .table_char so that the inner cells use the global style */
.table_char th,
.table_char td {
/* Either remove the border property or set it to inherit from the global rule */
border: 1px solid #ddd;
padding: 10px;
text-align: left;
line-height: var(--lineHeight);
font-size: var(--baseFontSize);
}
table tr:hover {
/* background-color: #f5f5f5; */
background-color: #fafafa;
}
/* End of Table Styles */
div, p, span {
line-height: var(--lineHeight);
font-size: var(--baseFontSize);
}
/* Main button style */
.btn {
padding: 10px 20px;
font-size: 16px;
background-color: #6ddbf61d;
color: #000;
border: 1px solid #ccc !important;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
}
/* Shorter lock button variant */
.btn-short {
padding: 5px 15px;
font-size: 16px;
background-color: #6ddbf61d;
color: #000;
border: 1px solid #ccc !important;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
overflow: hidden; /* Prevents icon or content from making the button taller */
}
.btn:hover {
background-color: #50b7d08b;
}
/* Small button style */
.btn-small {
width: 100px;
height: 50px;
padding: 10px 20px;
font-size: 16px;
background-color: #6ddbf61d;
color: #000;
border: 1px solid #ccc !important;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
}
/* Next-step button (green-ish) */
.btn-next {
background-color: #99fcd990; /* Provided as is */
color: #000000;
border: 1px solid #00bf7c !important;
width: auto !important; /* Force the width to be auto */
min-width: fit-content !important; /* Ensure it fits the content at minimum */
max-width: none !important; /* No maximum width limitation */
}
.btn-next:hover {
background-color: #35dba1a4 !important; /* π₯π₯π₯ Added !important to override specificity issues */
border-color: #00bf7c !important;
}
.btn-generate {
background: linear-gradient(135deg, #23f04c81, #8afffdae); /* Gradient from light green to darker green */
color: #000000;
border: 1px solid #00bf7c !important;
line-height: 1.4; /* Add this line to increase spacing between text lines */
}
.btn-generate-scenes {
background: linear-gradient(135deg, #23f04c81, #8afffdae); /* Gradient from light green to darker green */
color: #000000;
border: 1px solid #00bf7c !important;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
line-height: 1.4;
white-space: nowrap; /* Prevent text wrapping */
width: auto !important; /* Force the width to be auto */
}
.btn-generate-synopsis {
background: linear-gradient(135deg, #2390f081, #70d6fbcf); /* Gradient from light green to darker green */
color: #000000;
border: 1px solid #008cbf !important;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
line-height: 1.4;
white-space: nowrap; /* Prevent text wrapping */
width: auto !important; /* Force the width to be auto */
}
/* Hover effect */
.btn-generate-synopsis:hover {
background: linear-gradient(135deg, #97c0ec, #6fbbedf5); /* Hover gradient */
box-shadow: 0 0 8px rgba(31, 130, 216, 0.6); /* Enhanced blue glow */
}
/* Blue button for scene pacing analysis */
.btn-analyze-pacing {
position: relative;
overflow: hidden; /* Required to contain the animation */
background: linear-gradient(135deg, #d1f1f7, #99c9f3); /* More contrasting blue gradient */
color: #000000; /* Black text as requested */
border: 1px solid #2980b9; /* Darker blue border */
border-radius: 4px;
font-size: 16px;
cursor: pointer;
line-height: 1.4;
white-space: nowrap; /* Prevent text wrapping */
width: auto !important; /* Force the width to be auto */
min-width: fit-content !important; /* Ensure it fits the content at minimum */
max-width: none !important; /* No maximum width limitation */
display: inline-block; /* Allow button to expand to fit content */
text-align: center; /* Center the text inside the button */
padding: 10px 20px; /* Standard padding */
}
/* Animated gradient sweep effect */
.btn-analyze-pacing::after {
content: '';
position: absolute;
top: -100px;
left: -50px;
height: 300px;
width: 80px;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 70%,
rgba(255, 255, 255, 0) 100%
);
transform: translateX(-100%) rotate(135deg);
opacity: 0; /* Hide by default */
}
/* Keyframes for the shimmer animation */
@keyframes shimmer {
0% {
transform: translateX(-100%) rotate(135deg);
opacity: 0.35; /* Half as opaque */
}
100% {
transform: translateX(400%) rotate(135deg);
opacity: 0.35; /* Consistent reduced opacity */
}
}
/* Hover effect */
.btn-analyze-pacing:hover {
background: linear-gradient(135deg, #b3cbe4, #83bee6f4); /* Hover gradient */
box-shadow: 0 0 8px rgba(26, 108, 182, 0.6); /* Enhanced blue glow */
}
/* Animation only on hover - complete sweep across button at half speed */
.btn-analyze-pacing:hover::after {
animation: shimmer 1s ease-out forwards; /* 1s = half the speed (was 0.5s) */
}
/* START BACKWARD DECREMENT */
/* version of the analyze button for back to hybridizing */
.btn-backwd-decrement {
position: relative;
overflow: hidden; /* Required to contain the animation */
background: linear-gradient(315deg, #d1f1f7, #b0bdf3); /* Adjusted angle - more vertical */
color: #000000; /* Black text as requested */
border: 1px solid #2930b9; /* Darker blue border */
border-radius: 4px;
font-size: 16px;
cursor: pointer;
line-height: 1.4;
white-space: nowrap; /* Prevent text wrapping */
width: auto !important; /* Force the width to be auto */
min-width: fit-content !important; /* Ensure it fits the content at minimum */
max-width: none !important; /* No maximum width limitation */
display: inline-block; /* Allow button to expand to fit content */
text-align: center; /* Center the text inside the button */
padding: 10px 20px; /* Standard padding */
}
/* Animated gradient sweep effect */
.btn-backwd-decrement::after {
content: '';
position: absolute;
top: -100px;
left: -50px;
height: 300px;
width: 80px;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 70%,
rgba(255, 255, 255, 0) 100%
);
transform: translateX(-100%) rotate(315deg);
opacity: 0; /* Hide by default */
}
.btn-backwd-decrement:hover {
background: linear-gradient(315deg, #b4b3e4, #8385e6f4); /* Hover gradient with matching angle */
box-shadow: 0 0 8px rgba(26, 108, 182, 0.6); /* Enhanced blue glow */
}
/* Animation only on hover - complete sweep across button at half speed */
.btn-backwd-decrement:hover::after {
animation: shimmer 1s ease-out forwards; /* 1s = half the speed (was 0.5s) */
}
/* END BACKWARD DECREMENT */
/* START FORWARD INCREMENT */
/* Blue button for scene pacing analysis */
.btn-fwd-increment {
position: relative;
overflow: hidden; /* Required to contain the animation */
background: linear-gradient(45deg, #d1f1f7, #b0bdf3); /* Adjusted angle - less vertical */
color: #000000; /* Black text as requested */
border: 1px solid #2930b9; /* Darker blue border */
border-radius: 4px;
font-size: 16px;
cursor: pointer;
line-height: 1.4;
white-space: nowrap; /* Prevent text wrapping */
width: auto !important; /* Force the width to be auto */
min-width: fit-content !important; /* Ensure it fits the content at minimum */
max-width: none !important; /* No maximum width limitation */
display: inline-block; /* Allow button to expand to fit content */
text-align: center; /* Center the text inside the button */
padding: 10px 20px; /* Standard padding */
}
/* Animated gradient sweep effect */
.btn-fwd-increment::after {
content: '';
position: absolute;
top: -100px;
left: -50px;
height: 300px;
width: 80px;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 70%,
rgba(255, 255, 255, 0) 100%
);
transform: translateX(-100%) rotate(45deg);
opacity: 0; /* Hide by default */
}
/* Keyframes for the shimmer animation */
@keyframes shimmer {
0% {
transform: translateX(-100%) rotate(135deg);
opacity: 0.35; /* Half as opaque */
}
100% {
transform: translateX(400%) rotate(135deg);
opacity: 0.35; /* Consistent reduced opacity */
}
}
/* Hover effect */
.btn-fwd-increment:hover {
background: linear-gradient(45deg, #b4b3e4, #8385e6f4); /* Hover gradient with matching angle */
box-shadow: 0 0 8px rgba(26, 108, 182, 0.6); /* Enhanced blue glow */
}
/* Animation only on hover - complete sweep across button at half speed */
.btn-fwd-increment:hover::after {
animation: shimmer 1s ease-out forwards; /* 1s = half the speed (was 0.5s) */
}
/* END FORWARD INCREMENT */
/* Expand/Collapse button for sections */
.suggestions-section-btn {
/* Exact same properties as .accept-all-btn */
padding: 4px 12px;
margin: 0;
margin-top: 5px;
background-color: #f5f5f5;
border: 1px solid #959393;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
color: #000000;
position: relative;
overflow: hidden;
}
.suggestions-section-btn:hover {
background-color: #e9e9e9;
border-color: #7b7b7b;
}
/* Button to expand scene details (teal/green style) */
.btn-expand-scene-details {
position: relative;
overflow: hidden; /* Required to contain the animation */
background: linear-gradient(135deg, #e0f7fa, #26a69a); /* Teal gradient */
color: #000000; /* Black text */
border: 1px solid #00897b; /* Teal border */
border-radius: 4px;
font-size: 16px;
cursor: pointer;
line-height: 1.4;
white-space: nowrap; /* Prevent text wrapping */
width: auto !important; /* Force the width to be auto */
min-width: fit-content !important; /* Ensure it fits the content at minimum */
max-width: none !important; /* No maximum width limitation */
display: inline-block; /* Allow button to expand to fit content */
text-align: center; /* Center the text inside the button */
padding: 10px 20px; /* Standard padding */
}
/* Animated gradient sweep effect */
.btn-expand-scene-details::after {
content: '';
position: absolute;
top: -100px;
left: -50px;
height: 300px;
width: 80px;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 70%,
rgba(255, 255, 255, 0) 100%
);
transform: translateX(-100%) rotate(135deg);
opacity: 0; /* Hide by default */
}
.btn-expand-scene-details:hover {
background: linear-gradient(135deg, #b2ebf2, #00897b); /* Darker teal on hover */
box-shadow: 0 0 8px rgba(38, 166, 154, 0.6); /* Teal glow */
}
/* Animation only on hover - complete sweep across button at half speed */
.btn-expand-scene-details:hover::after {
animation: shimmer 1s ease-out forwards; /* 1s = half the speed */
}
/* Button for three_act_gen (/green style) */
.btn-5-act {
position: relative;
overflow: hidden; /* Required to contain the animation */
background: linear-gradient(135deg, #e0f7fa, #34cf8f); /* Green gradient */
color: #000000; /* Black text */
border: 1px solid #00894e !important; /* Green border */
border-radius: 4px;
font-size: 16px;
cursor: pointer;
line-height: 1.4;
white-space: nowrap; /* Prevent text wrapping */
width: auto !important; /* Force the width to be auto */
min-width: fit-content !important; /* Ensure it fits the content at minimum */
max-width: none !important; /* No maximum width limitation */
display: inline-block; /* Allow button to expand to fit content */
text-align: center; /* Center the text inside the button */
padding: 10px 20px; /* Standard padding */
}
.btn-5-act:hover {
background: linear-gradient(135deg, #b2f2df, #01b179); /* Darker teal on hover */
box-shadow: 0 0 8px rgba(38, 166, 117, 0.6); /* Teal glow */
}
/* Button to scene-beats (/green style) */
.btn-scene-beats {
position: relative;
overflow: hidden; /* Required to contain the animation */
background: linear-gradient(135deg, #e0f7fa, #26a671); /* Green gradient */
color: #000000; /* Black text */
border: 1px solid #00894e !important; /* Green border */
border-radius: 4px;
font-size: 16px;
cursor: pointer;
line-height: 1.4;
white-space: nowrap; /* Prevent text wrapping */
width: auto !important; /* Force the width to be auto */
min-width: fit-content !important; /* Ensure it fits the content at minimum */
max-width: none !important; /* No maximum width limitation */
display: inline-block; /* Allow button to expand to fit content */
text-align: center; /* Center the text inside the button */
padding: 10px 20px; /* Standard padding */
}
/* Animated gradient sweep effect */
.btn-scene-beats::after {
content: '';
position: absolute;
top: -100px;
left: -50px;
height: 300px;
width: 80px;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 70%,
rgba(255, 255, 255, 0) 100%
);
transform: translateX(-100%) rotate(135deg);
opacity: 0; /* Hide by default */
}
.btn-scene-beats:hover {
background: linear-gradient(135deg, #b2f2df, #00895e); /* Darker teal on hover */
box-shadow: 0 0 8px rgba(38, 166, 117, 0.6); /* Teal glow */
}
/* Animation only on hover - complete sweep across button at half speed */
.btn-scene-beats:hover::after {
animation: shimmer 1s ease-out forwards; /* 1s = half the speed */
}
/* Suggestion counter styling */
.suggestion-counter {
color: #4a90e2;
font-size: 16px;
min-width: 150px;
text-align: right;
align-self: flex-end;
margin-bottom: 2px;
}
/* Applied suggestion counter styling */
.applied-counter {
color: #4caf50; /* Green color for applied status */
font-size: 16px;
min-width: 150px;
text-align: right;
align-self: flex-end;
margin-bottom: 2px;
}
/* Accept All button - green styling */
.accept-all-btn {
/* EXACTLY MATCH suggestions-section-btn EXCEPT COLOR */
padding: 4px 12px;
margin: 0;
margin-top: 5px;
background: linear-gradient(135deg, #d4f2d5, #8aed8f);
color: #000000;
border: 1px solid #388e3c;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.accept-all-btn::after {
content: '';
position: absolute;
top: -100px;
left: -50px;
height: 300px;
width: 80px;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.7) 50%,
rgba(255, 255, 255, 0) 70%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(25deg);
opacity: 0;
}
.accept-all-btn:hover {
background: linear-gradient(135deg, #a5d6a7, #4caf50); /* Darker green on hover */
box-shadow: 0 0 8px rgba(56, 142, 60, 0.6); /* Green glow */
}
.accept-all-btn:hover::after {
animation: shimmer 1s ease-out forwards; /* 1s animation */
}
/* Section headings vertical alignment */
/* Class for heading cells - removed inline styles */
.priority-heading {
position: relative;
vertical-align: middle;
padding: 10px;
}
/* Buttons in headings */
.heading-buttons {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 10px;
}
.btn-generate-scenes:hover {
background: linear-gradient(135deg, #1ecc4281, #7beeeede); /* Slightly darker gradient on hover */
box-shadow: 0 0 5px rgba(0, 191, 124, 0.5); /* Add a subtle glow */
}
.btn-generate-orange {
background: linear-gradient(135deg, #ffa50081, #ff7f50ae); /* Orange gradient like hybridize button */
color: #000000;
border: 1px solid #ff6b35 !important; /* Deep orange border */
border-radius: 4px;
font-size: 16px;
cursor: pointer;
line-height: 1.4;
white-space: nowrap; /* Prevent text wrapping */
width: auto !important; /* Force the width to be auto */
}
.btn-generate-orange:hover {
background: linear-gradient(135deg, #ff8c0081, #ff6347ae); /* Slightly darker orange gradient on hover */
box-shadow: 0 0 5px rgba(255, 165, 0, 0.5); /* Orange glow */
}
.btn-generate-red {
background: linear-gradient(135deg, #ff110081, #ff7f50); /* Orange gradient like hybridize button */
color: #000000;
border: 1px solid #ff3535 !important; /* Deep red border */
border-radius: 4px;
font-size: 16px;
cursor: pointer;
line-height: 1.4;
white-space: nowrap; /* Prevent text wrapping */
width: auto !important; /* Force the width to be auto */
}
.btn-generate-red:hover {
background: linear-gradient(135deg, #ff4d008e, #ff4747ae); /* Slightly darker red gradient on hover */
box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); /* Orange glow */
}
.btn-generate-alt {
background: #c8e8ff;
color: #000000;
border: 1px solid #6b4db8;
border-radius: 5px;
line-height: 1.4;
box-shadow: inset 0 0 15px rgba(124, 97, 214, 0.5);
position: relative;
transition: all 0.3s ease;
}
.btn-generate-alt:hover {
background: #b8e0fa;
box-shadow: inset 0 0 15px rgba(124, 97, 214, 0.65);
border-color: #5a3dac;
}
/* Route variant dropdown styling */
.route-variant-selector {
position: relative;
display: inline-block;
margin-left: 10px;
}
/* Route selector container */
.route-variant-selector {
position: relative;
display: inline-block;
}
/* Route dropdown toggle button - styled similar to character dropdown */
.route-dropdown-toggle {
min-width: 170px !important;
border: 1px solid #007a87 !important; /* Dark teal border */
background-color: #f7ffff !important; /* Extremely light cyan background */
color: #09082b !important;
border-radius: 5px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 6px 12px !important;
box-shadow: inset 0 0 5px rgba(0, 122, 135, 0.15) !important; /* Subtle teal inner glow */
transition: all 0.3s ease !important;
}
/* Variant-specific styles: shift along the color spectrum by 15% increments */
/* Standard Critique - Default teal */
.route-variant-A .route-dropdown-toggle {
border: 1px solid #007a87 !important; /* Default teal border */
background-color: #f7ffff !important; /* Default extremely light cyan background */
box-shadow: inset 0 0 5px rgba(0, 122, 135, 0.15) !important; /* Default subtle teal inner glow */
}
/* Timeline Analysis - Shift toward blue */
.route-variant-B .route-dropdown-toggle {
border: 1px solid #0066a3 !important; /* Shifted toward blue */
background-color: #f7fbff !important; /* Slightly bluer background */
box-shadow: inset 0 0 5px rgba(0, 102, 163, 0.15) !important; /* Blue-shifted inner glow */
}
/* Character Focus - Further shift toward purple */
.route-variant-C .route-dropdown-toggle {
border: 1px solid #3359b8 !important; /* More blue-purple border */
background-color: #f8f7ff !important; /* Subtle blue-purple background */
box-shadow: inset 0 0 5px rgba(51, 89, 184, 0.15) !important; /* Blue-purple inner glow */
}
.route-dropdown-toggle:hover {
border-color: #005a65 !important; /* Darker teal on hover */
box-shadow: inset 0 0 8px rgba(0, 122, 135, 0.25) !important; /* More pronounced inner glow */
}
/* Variant-specific hover styles */
.route-variant-A .route-dropdown-toggle:hover {
border-color: #005a65 !important; /* Darker teal on hover */
box-shadow: inset 0 0 8px rgba(0, 122, 135, 0.25) !important; /* More pronounced teal glow */
}
.route-variant-B .route-dropdown-toggle:hover {
border-color: #00497a !important; /* Darker blue on hover */
box-shadow: inset 0 0 8px rgba(0, 102, 163, 0.25) !important; /* More pronounced blue glow */
}
.route-variant-C .route-dropdown-toggle:hover {
border-color: #263f89 !important; /* Darker blue-purple on hover */
box-shadow: inset 0 0 8px rgba(51, 89, 184, 0.25) !important; /* More pronounced blue-purple glow */
}
/* Route selector dropdown content */
.route-selector-content {
position: absolute !important;
z-index: 1000 !important;
background-color: white !important;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) !important;
min-width: 300px !important;
max-height: 435px !important;
overflow-y: auto !important;
border-radius: 5px !important;
padding: 10px !important;
top: 100% !important;
left: 0 !important;
border: 1px solid #007a87 !important; /* Match button teal border */
margin-top: 5px !important; /* Space between button and dropdown */
}
/* Individual route option styling */
.route-option {
padding: 10px;
border-radius: 4px;
cursor: pointer;
margin-bottom: 8px;
transition: all 0.2s ease;
border: 1px solid #ddd; /* Gray border for unselected items, matching character options */
}
/* Route option hover state */
.route-option:hover {
background-color: #f0f8ff !important;
}
/* Selected route option - use blue border when selected */
.route-option[style*="background-color: #f0f8ff"] {
border-color: #007bff !important; /* Blue border for selected items, matching character options */
}
/* Keep the original select for form submission but hidden */
.route-variant-selector select {
display: none;
}
.route-variant-selector select:focus {
outline: none;
}
/* Character dropdown toggle button styling */
.character-dropdown-toggle {
min-width: 170px !important; /* Width as requested */
border: 1px solid #7d5cd7 !important; /* Match button purple border */
background-color: #fbfdff !important; /* Extremely light bluish background */
color: #09082b !important; /* Dark text */
border-radius: 5px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 6px 12px !important;
box-shadow: inset 0 0 5px rgba(149, 132, 214, 0.15) !important; /* Subtle purple inner glow */
transition: all 0.3s ease !important;
}
.character-dropdown-toggle:hover {
border-color: #5a3dac !important; /* Darker purple on hover */
box-shadow: inset 0 0 8px rgba(149, 132, 214, 0.25) !important; /* More pronounced inner glow */
}
/* Character profile selector container */
.character-profile-selector {
position: relative;
display: inline-block;
}
/* Character selector dropdown content styling */
.character-selector-content {
position: absolute !important;
z-index: 1000 !important;
background-color: white !important;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) !important;
min-width: 300px !important; /* Slightly narrower */
max-height: 530px !important;
overflow-y: auto !important;
border-radius: 5px !important;
padding: 10px !important;
top: 100% !important;
left: 0 !important;
border: 1px solid #7d5cd7 !important; /* Match button purple border */
}
/* This maintains the visibility toggle for the dropdown */
.character-selector-content[style*="display: none"] {
display: none !important;
}
/* Global rule: buttons in .container are stacked and centered */
.container button.btn {
display: block;
margin: 10px auto;
width: 200px;
text-align: center;
}
/* For small buttons in container */
.container button.btn-small {
display: block;
margin: 10px auto;
width: 100px;
}
/* Add spacing between stacked buttons */
.container button + button {
margin-top: 15px;
}
/* Flex container for two buttons side by side, aligned left */
.button-container_sidebyside {
display: flex;
justify-content: flex-start;
gap: 25px;
margin: 0;
}
/* Override global stacking for side-by-side buttons */
.container .button-container_sidebyside .btn {
display: inline-block !important;
margin: 0 !important;
width: auto !important;
}
.three-act-save-btn {
background-color: #73f66f80; /* your custom color */
border: 1px solid #13d813; /* a darker shade, perhaps */
color: #000000; /* ensure text is visible */
}
/***
* __ __ ___ __ __ __ ___ __ __ ___ __ ___
* /__` | | \ |__ |\ | /\ \ / /__` /\ |\ | | \ |__) | |\ | /__` __ /__` | /\ |__) |
* .__/ | |__/ |___ | \| /~~\ \/ .__/ /~~\ | \| |__/ |__) | | \| ..__/ .__/ | /~~\ | \ |
*/
/* Panel Containers */
.panel_container {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
}
/* Panel Headers */
.panel_header--blue {
background-color: #dcecfa;
border-bottom: 2px solid #386ddc;
padding: 12px 15px;
cursor: pointer;
}
.panel_header--orange {
background-color: #ffecd9;
border-bottom: 2px solid #ff9933;
padding: 12px 15px;
cursor: pointer;
}
.panel_header--purple {
background-color: #eadef3;
border-bottom: 2px solid #8456a6;
padding: 12px 15px;
cursor: pointer;
}
/* Panel Content */
.panel_content {
padding: 20px;
}
/* Panel Title */
.panel_title {
margin: 0;
color: #333;
font-size: 1.2em;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Emphasis Boxes */
.emphasis_box {
background-color: #f8f9fa;
padding: 10px 15px;
margin-bottom: 15px;
border-left-width: 4px;
border-left-style: solid;
}
.emphasis_box--info {
border-left-color: #386ddc;
}
.emphasis_box--warning {
border-left-color: #ff9933;
}
.emphasis_box--success {
border-left-color: #00bf7c;
}
.emphasis_box--highlight {
border-left-color: #8456a6;
}
/* Flex Layout Classes */
.flex_container {
display: flex;
flex-wrap: wrap;
}
.flex_container--spaced {
justify-content: space-between;
}
.flex_container--centered {
justify-content: center;
}
.flex_item {
flex: 1;
min-width: 200px;
margin-right: 10px;
margin-bottom: 10px;
}
.flex_item:last-child {
margin-right: 0;
}
.responsive_container {
overflow-x: auto;
}
/* Left navigation styles */
.left-nav {
position: fixed;
top: 5px;
left: 20px;
width: 150px;
padding: 10px;
overflow: visible !important;
z-index: 1000;
background-color: transparent;
border: none;
border-radius: 5px;
text-align: center;
}
.left-nav-table {
margin-bottom: 10px;
margin-left: 0;
margin-right: 0;
}
.left-nav-table {
margin-bottom: 10px;
}
/* Reset ALL table styles first */
.left-nav table {
border: none;
border-collapse: collapse;
border-spacing: 0;
padding: 0;
margin: 0;
}
.left-nav table td {
border: none;
padding: 10px;
}
/* Then apply our clean single border */
.left-nav table {
width: calc(100% + 20px);
margin-left: -10px;
margin-bottom: 15px;
text-align: center;
background-color: var(--sidebar-background);
box-shadow: 0 0 0 1px var(--table-border-color);
border-radius: 5px;
}
.left-nav table:hover,
.left-nav table:hover td {
background-color: var(--nav-hover-background) !important;
}
.left-nav td {
text-align: center;
}
.left-nav a {
display: block;
margin: 0 auto;
line-height: 1.2;
font-size: 16px;
color: #007bff;
text-decoration: none;
}
.left-nav a:hover {
text-decoration: underline;
}
/* Right navigation styles modified to match left-nav */
.right-nav {
position: fixed;
top: 5px;
right: 20px;
width: 150px;
padding: 10px;
background-color: transparent;
border: none;
border-radius: 5px;
text-align: center;
}
.right-nav-table {
margin-bottom: 10px;
margin-left: 0;
margin-right: 0;
}
/* Reset ALL table styles first */
.right-nav table {
border: none;
border-collapse: collapse;
border-spacing: 0;
padding: 0;
margin: 0;
}
.right-nav table td {
border: none;
padding: 10px;
}
/* Then apply our clean single border */
.right-nav table {
width: calc(100% + 20px);
margin-left: -10px;
margin-bottom: 15px;
text-align: center;
background-color: var(--sidebar-background);
box-shadow: 0 0 0 1px var(--table-border-color);
border-radius: 5px;
}
.right-nav table:hover,
.right-nav table:hover td {
background-color: var(--nav-hover-background) !important;
}
.right-nav td {
text-align: center;
}
.right-nav a {
display: block;
margin: 0 auto;
line-height: 1.2;
font-size: 16px;
color: #007bff;
text-decoration: none;
}
.right-nav a:hover {
text-decoration: underline;
}
/* Similar updates for right-nav_list if needed */
.right-nav_list {
position: fixed;
top: 20px;
right: 20px;
width: 150px;
padding: 10px;
background-color: transparent;
border: none;
border-radius: 5px;
text-align: left;
}
.right-nav_list table {
border: none;
border-collapse: collapse;
border-spacing: 0;
padding: 0;
margin: 0;
width: calc(100% + 20px);
margin-left: -10px;
margin-bottom: 15px;
background-color: #f8f9fa;
box-shadow: 0 0 0 1px #ccc;
border-radius: 5px;
}
.right-nav_list td {
border: none;
padding: 10px;
}
.swimlane-view-button {
margin-top: 5px;
background: linear-gradient(to bottom, #2196F3, #0c4f99);
color: white;
width: 100%;
padding: 5px 10px;
border: 1px solid #052c56;
cursor: pointer;
border-radius: 4px;
transition: all 0.15s ease-in-out;
}
.swimlane-view-button:hover {
background: linear-gradient(to bottom, #4aa7f5, #1966b3) !important;
border: 1px solid #052c56; /* Keep exact same border */
}
.swimlane-view-button:active {
transform: translateY(1px);
background: linear-gradient(to bottom, #083e75, #0c7cd5) !important;
border: 1px solid #052c56; /* Keep exact same border */
}
/* Center all content horizontally within the second table cell */
.second_table td {
text-align: center;
vertical-align: middle; /* optional if you want vertical centering in the cell */
}
/* A container to ensure 10px spacing between stacked buttons */
.nav_panel_btn_wrapper {
display: flex;
flex-direction: column; /* stack vertically */
align-items: center; /* center the buttons */
}
/* Every button in this wrapper gets a 10px margin at the bottom */
.nav_panel_btn_wrapper > .nav_panel_btn {
margin-bottom: 10px;
}
/* Base style for small nav panel buttons */
.nav_panel_btn {
display: inline-block; /* or block if you prefer full-width */
width: 140px; /* uniform width - adjust as you like */
padding: 5px 10px; /* smaller than the .btn you showed */
font-size: 14px; /* a bit smaller than 16px */
line-height: 1.2;
background-color: #f3f3f3; /* a light neutral background */
color: #333; /* dark text for good contrast */
border: 1px solid #ccc; /* 1px border at all times */
border-radius: 4px;
cursor: pointer;
text-decoration: none; /* remove underlines if used on */
box-sizing: border-box; /* ensures padding doesnβt expand width */
/* Ensure the outline or focus ring doesnβt thicken the border */
outline: none;
}
/* Hover effect - slightly darker background, consistent border */
.nav_panel_btn:hover {
background-color: #e8e8e8;
border-color: #bbb;
}
/* Active (clicked) state - override any default thick border */
.nav_panel_btn:active {
background-color: #ddd;
border: 1px solid #999;
outline: none;
}
/* Focus (keyboard) state - keep border 1px, or highlight differently */
.nav_panel_btn:focus {
border: 1px solid #666;
outline: none;
}
/* ------------------------------
OPTIONAL COLOR VARIANTS
------------------------------ */
/* 1) A subtle pastel blue variant */
.nav_panel_btn--blue,
button.nav_panel_btn--blue,
.nav_panel_btn.nav_panel_btn--blue {
background-color: #dcecfa !important; /* pastel blue */
border-color: #386ddc !important;
color: #09082b !important;
}
.nav_panel_btn--blue:hover,
button.nav_panel_btn--blue:hover,
.nav_panel_btn.nav_panel_btn--blue:hover {
background-color: #9ab9f9 !important;
border-color: #1a4399 !important;
}
/* Harmonized blue button for inline use with three-act-btn */
.three-act-btn--blue {
background-color: #dcecfa; /* same pastel blue */
border: 1px solid #386ddc; /* properly defined 1px border */
color: #09082b;
padding: 4px 10px; /* harmonized with three-act-btn */
border-radius: 4px;
cursor: pointer;
font-size: 14px;
line-height: 1.2;
/* Natural width like three-act-btn, no fixed sizing */
}
.three-act-btn--blue:hover {
background-color: #9ab9f9;
border: 1px solid #1a4399; /* properly defined 1px border on hover */
}
/* Blue stretchable variant */
.nav_panel_btn--blue_stretch,
button.nav_panel_btn--blue_stretch,
.nav_panel_btn.nav_panel_btn--blue_stretch {
background-color: #dcecfa !important;
border-color: #386ddc !important;
color: #09082b !important; /* dark text that stands out on blue */
width: auto !important; /* Allows stretching based on content */
min-width: 140px; /* Maintains minimum width */
}
.nav_panel_btn--blue_stretch:hover,
button.nav_panel_btn--blue_stretch:hover,
.nav_panel_btn.nav_panel_btn--blue_stretch:hover {
background-color: #9ab9f9 !important;
border-color: #1a4399 !important;
}
/* Green stretchable variant */
.nav_panel_btn--green_stretch,
button.nav_panel_btn--green_stretch,
.nav_panel_btn.nav_panel_btn--green_stretch {
background-color: #dcfaee !important;
border-color: #109916 !important;
color: #09082b !important; /* dark text that stands out on green */
width: auto !important; /* Allows stretching based on content */
min-width: 140px; /* Maintains minimum width */
}
.nav_panel_btn--green_stretch:hover,
button.nav_panel_btn--green_stretch:hover,
.nav_panel_btn.nav_panel_btn--green_stretch:hover {
background-color: #9af9b3 !important;
border-color: #13893a !important;
}
/* RED stretchable variant */
.nav_panel_btn--red_stretch,
button.nav_panel_btn--red_stretch,
.nav_panel_btn.nav_panel_btn--red_stretch {
background-color: #fadddc !important;
border-color: #993510 !important;
color: #09082b !important; /* dark text that stands out on RED */
width: auto !important; /* Allows stretching based on content */
min-width: 140px; /* Maintains minimum width */
}
.nav_panel_btn--red_stretch:hover,
button.nav_panel_btn--red_stretch:hover,
.nav_panel_btn.nav_panel_btn--red_stretch:hover {
background-color: #f99a9a !important;
border-color: #891313 !important;
}
/* 2) A slightly bolder accent colour */
.nav_panel_btn--purple,
button.nav_panel_btn--purple,
.nav_panel_btn.nav_panel_btn--purple {
background-color: #eadef3 !important;
border-color: #8456a6 !important;
color: #451d0f !important; /* dark text that stands out on purple */
}
.nav_panel_btn--purple:hover,
button.nav_panel_btn--purple:hover,
.nav_panel_btn.nav_panel_btn--purple:hover {
background-color: #dbc3ed !important;
border-color: #9161b6 !important;
}
/* Purple stretchable variant */
.nav_panel_btn--purple_stretch,
button.nav_panel_btn--purple_stretch,
.nav_panel_btn.nav_panel_btn--purple_stretch {
background-color: #eadef3 !important;
border-color: #8456a6 !important;
color: #451d0f !important; /* dark text that stands out on purple */
width: auto !important; /* Allows stretching based on content */
min-width: 140px; /* Maintains minimum width */
}
.nav_panel_btn--purple_stretch:hover,
button.nav_panel_btn--purple_stretch:hover,
.nav_panel_btn.nav_panel_btn--purple_stretch:hover {
background-color: #dbc3ed !important;
border-color: #9161b6 !important;
}
/* 3) Orange variant for Character Profiles button */
.nav_panel_btn--orange,
button.nav_panel_btn--orange,
.nav_panel_btn.nav_panel_btn--orange {
background-color: #ffecd9 !important;
border-color: #ff9933 !important;
color: #663c00 !important;
}
.nav_panel_btn--orange:hover,
button.nav_panel_btn--orange:hover,
.nav_panel_btn.nav_panel_btn--orange:hover {
background-color: #ffd6a4 !important;
border-color: #e68a00 !important;
}
.nav_panel_btn--save_prefs {
background-color: #dcecfa; /* pastel blue */
border-color: #386ddc;
}
.nav_panel_btn--safe_prefs:hover {
background-color: #9ab9f9;
border-color: #1a4399;
}
.carosel_controls {
width: 20px;
height: 20px;
border: none;
background: none;
padding: 0;
cursor: pointer;
}
/* NOTICE PANEL BUTTON CSS
/*
*/
/* A container to ensure 10px spacing between stacked buttons */
.notice_panel_btn_wrapper {
display: flex;
flex-direction: column; /* stack vertically */
align-items: center; /* center the buttons */
}
/* Every button in this wrapper gets a 10px margin at the bottom */
.notice_panel_btn_wrapper > .notice_panel_btn {
margin-bottom: 10px;
}
/* Base style for small nav panel buttons */
.notice_panel_btn {
display: inline-block; /* or block if you prefer full-width */
max-width: none; /* flex width - adjust as you like */
padding: 5px 10px; /* smaller than the .btn you showed */
font-size: 14px; /* a bit smaller than 16px */
line-height: 1.2;
background-color: #f3f3f3; /* a light neutral background */
color: #333; /* dark text for good contrast */
border: 1px solid #ccc; /* 1px border at all times */
border-radius: 4px;
cursor: pointer;
text-decoration: none; /* remove underlines if used on */
box-sizing: border-box; /* ensures padding doesnβt expand width */
/* Ensure the outline or focus ring doesnβt thicken the border */
outline: none;
}
/* Hover effect - slightly darker background, consistent border */
.notice_panel_btn:hover {
background-color: #e8e8e8;
border-color: #bbb;
}
/* Active (clicked) state - override any default thick border */
.notice_panel_btn:active {
background-color: #ddd;
border: 1px solid #999;
outline: none;
}
/* Focus (keyboard) state - keep border 1px, or highlight differently */
.notice_panel_btn:focus {
border: 1px solid #666;
outline: none;
}
/* 1) A subtle green green variant */
.notice_panel_btn--green {
background-color: #c1f8db; /* pastel blue */
border-color: #089522;
border: 1px solid;
outline: none;
}
.notice_panel_btn--green:hover {
background-color: #8aed9b;
border-color: #07730f;
border: 1px solid;
outline: none;
}
/* 1) A subtle red red variant */
.notice_panel_btn--red {
background-color: #f8d8c1; /* pastel blue */
border-color: #b35744;
border: 1px solid;
outline: none;
}
.notice_panel_btn--red:hover {
background-color: #ee9e81;
border-color: #730b07;
border: 1px solid;
outline: none;
}
/* Disabled button state */
.notice_panel_btn--disabled,
.notice_panel_btn--disabled:hover,
.notice_panel_btn--disabled:active,
.notice_panel_btn--disabled:focus {
background-color: #e0e0e0 !important;
color: #999 !important;
border-color: #ccc !important;
cursor: not-allowed !important;
opacity: 0.7;
text-decoration: none;
outline: none;
box-shadow: none;
}
/* Make it even more clear visually */
.notice_panel_btn[disabled] {
pointer-events: none;
opacity: 0.7;
}
/* NOTICE PANEL BUTTON CSS
/*
*/
/* Pacing review button styling to match the View Timeline button */
.pacing-review-button {
margin-top: 5px;
background: linear-gradient(to bottom, #68b7e6, #3180b8); /* Lighter blue gradient */
color: white;
width: 100%;
padding: 5px 10px;
border: 1px solid #1c5f93; /* Slightly lighter border */
cursor: pointer;
border-radius: 4px;
transition: all 0.15s ease-in-out;
}
.pacing-review-button:hover {
background: linear-gradient(to bottom, #7ec2e9, #4a90d4) !important; /* Lighter hover gradient */
border: 1px solid #1c5f93; /* Keep same border */
}
.pacing-review-button:active {
transform: translateY(1px);
background: linear-gradient(to bottom, #2676ae, #4a90d4) !important; /* Slightly darker active state */
border: 1px solid #1c5f93; /* Keep same border */
}
/* Pacing review button styling to match the View Timeline button */
.view-in-manager-button {
margin-top: 5px;
background: linear-gradient(to bottom, #c3e3f6, #6bbdf8); /* Lighter blue gradient */
color: rgb(0, 0, 0);
width: 100%;
padding: 4px 10px;
border: 1px solid #1c5f93; /* Slightly lighter border */
cursor: pointer;
border-radius: 4px;
transition: all 0.15s ease-in-out;
font-size: 14px;
line-height: 1.2;
}
.view-in-manager-button:hover {
background: linear-gradient(to bottom, #92cdf0, #76b1eb) !important; /* Lighter hover gradient */
border: 1px solid #1c5f93; /* Keep same border */
}
.view-in-manager-button:active {
transform: translateY(1px);
background: linear-gradient(to bottom, #96cbf1, #3591ed) !important; /* Slightly darker active state */
border: 1px solid #1c5f93; /* Keep same border */
}
/* ======================================
Scene Pacing Review Styles
====================================== */
.pacing-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.pacing-table th, .pacing-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.pacing-table th {
background-color: #f2f2f2;
font-weight: bold;
}
.sortable {
cursor: pointer;
position: relative;
}
.sortable:hover {
background-color: #e8e8e8;
}
.sort-arrow {
display: inline-block;
width: 12px;
color: #999;
font-size: 1.1em;
margin-left: 5px;
}
.sort-arrow.active-sort {
color: #333;
font-weight: bold;
}
.priority-1 { background-color: #f8f8f8; }
.priority-2 { background-color: #f2f8ff; }
.priority-3 { background-color: #e6f2ff; }
.priority-4 { background-color: #d9ecff; }
.priority-5 { background-color: #cce5ff; }
.priority-indicator {
color: #4a90e2;
font-size: 1.2em;
}
.pacing-review-summary, .pacing-instructions, .no-pacing-issues {
margin: 15px 0;
padding: 15px;
border-radius: 5px;
}
.pacing-review-summary {
background-color: #e8f4fd;
border-left: 4px solid #4a90e2;
}
.pacing-instructions {
background-color: #e8f7ee;
border-left: 4px solid #28a745;
}
.no-pacing-issues {
background-color: #e8f7ee;
border-left: 4px solid #28a745;
padding: 20px;
text-align: center;
}
/***
* __ __ ___ __ __ __ ___ __ ___ __
* /__` | | \ |__ |\ | /\ \ / /__` /\ |\ | | \ |__) | |\ | /__` __ |__ | |\ | | /__` |__|
* .__/ | |__/ |___ | \| /~~\ \/ .__/ /~~\ | \| |__/ |__) | | \| ..__/ | | | \| | .__/ | |
*/
#image_return_container {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
max-width: 90%;
background-color: #f8f9fa;
border: 1px solid #ccc;
border-radius: 10px;
padding: 35px;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
opacity: 1;
}
/***
* __ __ __ __ __ __ ___ ___ __
* | |\/| / _` | \ | /__` |__) | /\ \ / / ` / \ |\ | | /\ | |\ | |__ |__)
* | | | \__> |__/ | .__/ | |___ /~~\ | \__, \__/ | \| | /~~\ | | \| |___ | \
*/
/* ################### Container ################### */
#image_display_container {
/* Fill the entire browser window */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
/* Dark background overlay */
background: rgba(0,0,0,0.8);
transition: opacity 0.5s ease;
/* Flexbox to center content horizontally & vertically */
display: flex;
align-items: center;
justify-content: center;
}
#image_display_container img {
max-width: 80%;
max-height: 80%;
border: 0px solid #00557b;
border-radius: 4px;
}
#bigPicPrevBtn:hover,
#bigPicNextBtn:hover {
opacity: 1.0;
}
/*** NOTICE PREFS
* __ __ ___ ___ __
* / ` / \ |\ | | /\ | |\ | |__ |__)
* \__, \__/ | \| | /~~\ | | \| |___ | \
*/
/* Make the container bigger with more padding */
/* Make the container wider and add more padding */
/* Keep the existing close button styling unchanged */
/* Adjusted container: a bit wider, with extra padding, but otherwise as before */
/* Container: wide, centered near top, plenty of padding. */
/* Container styling */
/* Container: wide, centered near top, with padding. */
#notice_container {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 900px; /* or 1000px if you want bigger */
max-width: 95%;
background-color: #f8f9fa;
border: 1px solid #a833ff;
border-radius: 10px;
padding: 30px;
z-index: 10000; /* Increased z-index to be above everything */
box-shadow: 0 10px 30px #3d0a64;
opacity: 1.0;
}
#notice_container-wide {
/* Container fixed in viewport, content scrolls */
display: none;
position: fixed;
top: 50px; /* 50px down from the top edge */
left: 50%;
transform: translateX(-50%); /* only center horizontally */
width: 90%; /* 90% of viewport width */
max-width: none; /* don't constrain it with 95% */
background-color: #f8f9fa;
border: 1px solid #a833ff;
border-radius: 10px;
padding: 30px;
z-index: 10000;
box-shadow: 0 10px 30px #3d0a64;
/* Container scrolls but stays completely fixed in place */
max-height: calc(100vh - 120px);
overflow-y: auto; /* CONTENT SCROLLS! */
}
#notice_container-less-wide {
/* Container fixed in viewport, content scrolls */
display: none;
position: fixed;
top: 50px; /* 50px down from the top edge */
left: 50%;
transform: translateX(-50%); /* only center horizontally */
width: 50%; /* 90% of viewport width */
max-width: none; /* don't constrain it with 95% */
background-color: #f8f9fa;
border: 1px solid #a833ff;
border-radius: 10px;
padding: 30px;
z-index: 10000;
box-shadow: 0 10px 30px #3d0a64;
/* Container scrolls but stays completely fixed in place */
max-height: calc(100vh - 120px);
overflow-y: auto; /* CONTENT SCROLLS! */
}
/* Removed unused CSS for header and content areas */
/* Semi-transparent black overlay */
.notice-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999; /* Just below the notice container */
opacity: 0;
transition: opacity 0.5s;
}
/***
* ___ __ __ ___ __
* |__ |__) /\ /__` |__ |__)
* |___ | \ /~~\ .__/ |___ | \
*
*/
.delete-timeline-btn {
position: absolute;
right: 10px;
top: 0;
width: 20px;
height: 20px;
cursor: pointer;
background: transparent;
border: none;
}
.delete-timeline-btn::before,
.delete-timeline-btn::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: opacity 0.5s ease;
}
.delete-timeline-btn::before {
background-image: url('/static/images/eraser_black.png');
opacity: 1;
}
.delete-timeline-btn::after {
background-image: url('/static/images/eraser_pink.png');
opacity: 0;
}
.delete-timeline-btn:hover::before {
opacity: 0;
}
.delete-timeline-btn:hover::after {
opacity: 1;
}
.add-timeline-btn {
width: 30px;
height: 30px;
cursor: pointer;
background-image: url('/static/images/plus.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
border: none;
padding: 0;
display: block;
margin-top: 10px;
margin-left: auto;
}
/***
* __ __ ___ ___ __ __ __ ___ ___ __
* | | | |__) |__) |__ |__ /__` / ` / \ |\ | | /\ | |\ | |__ |__)
* | |___ |___ | | \ |___ | .__/ \__, \__/ | \| | /~~\ | | \| |___ | \
*/
/* Make the container bigger with more padding */
/* Make the container wider and add more padding */
/* Keep the existing close button styling unchanged */
/* Adjusted container: a bit wider, with extra padding, but otherwise as before */
/* Container: wide, centered near top, plenty of padding. */
/* Container styling */
/* Container: wide, centered near top, with padding. */
#illustration_prefs_container {
display: none;
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 900px; /* or 1000px if you want bigger */
max-width: 95%;
background-color: #f8f9fa;
border: 1px solid #a833ff;
border-radius: 10px;
padding: 30px;
z-index: 1000;
box-shadow: 0 10px 30px #3d0a64;
opacity: 1.0;
}
/* Title spacing */
.prefs-title {
margin-top: 0;
margin-bottom: 20px;
font-size: 1.4rem;
font-weight: normal;
}
/* The table: no borders, full width inside container */
#illustration_prefs_table {
width: 100%;
border-collapse: collapse; /* ensures no internal lines */
/* no border on the table itself */
border: none;
}
/* Hide all cell borders */
#illustration_prefs_table td {
border: none;
}
/* Label cells: fixed width, right-aligned */
.labelCell {
width: 220px; /* tweak if you want narrower/wider labels */
text-align: right;
vertical-align: middle;
padding: 8px;
}
/* Input cells: left-aligned */
.inputCell {
text-align: left;
vertical-align: middle;
padding: 8px;
}
/* Basic styling for inputs, selects, textareas */
#illustration_prefs_table input,
#illustration_prefs_table select,
#illustration_prefs_table textarea {
line-height: 1.4;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
margin-right: 10px; /* small gap between multiple fields in same cell */
padding: 6px 8px;
}
/* Make numeric inputs wide enough for e.g. 1440 or 42069 */
#illustration_prefs_table input[type="number"] {
width: 80px;
max-width: 100px;
}
/* Move the buttons to the left (last row in the table) */
#illustration_prefs_table #saveIllustrationPrefsBtn,
#illustration_prefs_table #savePrefsAndGenBtn {
margin-right: 10px; /* small space between them */
}
/* If you want them flush to the left, ensure the | is also left-aligned */
#illustration_prefs_table tr:last-child .inputCell {
text-align: left;
}
#user_prefs_container {
display: none;
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 900px; /* or 1000px if you want bigger */
max-width: 95%;
background-color: #f8f9fa;
border: 1px solid #a833ff;
border-radius: 10px;
padding: 30px;
z-index: 1000;
box-shadow: 0 10px 30px #3d0a64;
opacity: 1.0;
}
/* Title spacing */
.prefs-title {
margin-top: 0;
margin-bottom: 20px;
font-size: 1.4rem;
font-weight: normal;
}
/* The table: no borders, full width inside container */
#user_prefs_table {
width: 100%;
border-collapse: collapse; /* ensures no internal lines */
/* no border on the table itself */
border: none;
}
/* Hide all cell borders */
#user_prefs_table td {
border: none;
}
/* Label cells: fixed width, right-aligned */
.labelCell {
width: 220px; /* tweak if you want narrower/wider labels */
text-align: right;
vertical-align: middle;
padding: 8px;
}
/* Input cells: left-aligned */
.inputCell {
text-align: left;
vertical-align: middle;
padding: 8px;
}
/* Changed container ID */
#user_prefs_container {
display: none;
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 900px; /* or 1000px if you want bigger */
max-width: 95%;
background-color: #f8f9fa;
border: 1px solid #a833ff;
border-radius: 10px;
padding: 30px;
z-index: 1000;
box-shadow: 0 10px 30px #3d0a64;
opacity: 1.0;
}
/* Changed table ID and related selectors */
#user_prefs_table {
width: 100%;
border-collapse: collapse;
border: none;
}
#user_prefs_table td {
border: none;
}
#user_prefs_table input,
#user_prefs_table select,
#user_prefs_table textarea {
line-height: 1.4;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
margin-right: 10px;
padding: 6px 8px;
}
#user_prefs_table input[type="number"] {
width: 80px;
max-width: 100px;
}
/* Changed button IDs */
#user_prefs_table #saveUserPrefsBtn,
#user_prefs_table #savePrefsAndGenBtn {
margin-right: 10px;
}
#user_prefs_table tr:last-child .inputCell {
text-align: left;
}
/***
* __ __ __ ___ __ ___ ___ __ ___ ___ ___ ___ __ ___ __
* / ` | / \ /__` |__ |__) | | | | / \ |\ | |__ |__ |__ |__ / ` | /__`
* \__, |___ \__/ .__/ |___ |__) \__/ | | \__/ | \| |___ | | |___ \__, | .__/
*/
#image-close-button {
position: absolute;
top: -30px; /* Adjust as needed */
right: -30px;
width: 24px; /* Set an appropriate width */
height: 24px; /* Set an appropriate height */
background: url('/static/images/close_button.png') no-repeat center center;
background-size: contain;
border: none;
cursor: pointer;
padding: 0;
line-height: 1;
}
/* Position the close button absolutely at top-right, if desired */
.container_close_button {
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
background: none;
border: none;
cursor: pointer;
padding: 0;
/* π₯π₯π₯ FOUC Prevention: Start invisible, only show after page fully loads */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s;
}
/* π₯π₯π₯ Show close buttons after page load completes */
body.page-loaded .container_close_button {
opacity: 1;
visibility: visible;
}
/* π₯π₯π₯ EXCEPTION: Resources modal close button only shows when modal is active */
.resources-modal:not(.active) .container_close_button {
opacity: 0 !important;
visibility: hidden !important;
}
#video-tooltip-close-button {
position: absolute;
top: 10px; /* Adjust as needed */
right: 10px;
width: 35px;
height: 35px;
background: url('/static/images/close_button.png') no-repeat center center;
background-size: contain;
border: none;
cursor: pointer;
padding: 0;
line-height: 1;
}
/* Special styling for close button in wide container - stays in place while content scrolls */
/* Completely separate fixed close button that stays in place */
#fixed-close-button {
position: fixed; /* Fixed to the viewport */
top: 75px; /* Matches container top (50px) + some padding */
right: calc(5% + 10px); /* Matches the container's right edge based on width: 90% */
z-index: 10001; /* Higher than container */
background-color: rgba(248, 249, 250, 0.9); /* Semi-transparent background */
border-radius: 50%;
padding: 5px;
width: 30px;
height: 30px;
border: none;
cursor: pointer;
display: none; /* Initially hidden, shown with container */
}
/* Apply the same hover effects to the fixed close button */
#fixed-close-button img {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}
#fixed-close-button .icon-active {
opacity: 0;
}
#fixed-close-button:hover .icon-default {
opacity: 0;
}
#fixed-close-button:hover .icon-active {
opacity: 1;
transform: scale(1.05);
filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.4));
}
#fixed-close-button:active img {
transform: scale(0.95);
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5) inset);
}
/* Download icon styles */
.download_icon {
height: 25px;
cursor: pointer;
transition: transform 0.3s ease;
vertical-align: middle;
}
.download_icon:hover {
transform: scale(1.25);
}
/* π₯π₯π₯ Unified checkbox style for Story Elements and Tonal Profiles */
.checkbox {
width: 20px;
height: 20px;
cursor: pointer;
}
/* Expandable row triangle */
.expand-triangle {
display: inline-block;
width: 0;
height: 0;
border-left: 12.5px solid transparent;
border-right: 12.5px solid transparent;
border-top: 25px solid #666;
transition: transform 0.3s ease;
cursor: pointer;
margin-right: 10px;
}
.expand-triangle.expanded {
transform: rotate(90deg);
}
/* π₯π₯π₯ Image-based triangle icons for breakdown_align */
.triangle-icon {
display: inline-block;
width: 25px;
height: 25px;
cursor: pointer;
transition: transform 0.3s ease;
vertical-align: middle;
opacity: 0.65; /* Controls Transparency of main table Toggle Triangle */
}
.triangle-icon.expanded {
transform: rotate(90deg);
}
/* Subtable toggle triangle icon */
.triangle-subtable-icon {
display: inline-block;
width: 25px;
height: 25px;
cursor: pointer;
transition: transform 0.3s ease;
vertical-align: middle;
opacity: 0.65; /* Controls Transparency of subtable Toggle Triangle */
}
.triangle-subtable-icon.expanded {
transform: rotate(90deg);
}
/* Metadata icon */
.metadata-icon {
width: 25px;
height: 25px;
cursor: pointer;
transition: transform 0.3s ease;
vertical-align: middle;
}
.metadata-icon:hover {
transform: scale(1.1);
}
.clickable-header-row {
cursor: pointer;
user-select: none;
}
.clickable-header-row:hover {
background-color: rgba(0, 0, 0, 0.05);
}
/* Both images fill the same space and stack on top of each other */
.container_close_button img {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
/* Smooth 0.5s transitions on scale, shadow, opacity, etc. */
transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
/* Use the PNGβs alpha channel for a shaped drop shadow */
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}
/* Start with the 'active' image hidden */
.icon-active {
opacity: 0;
}
/* On hover, fade out the default icon and fade in the active icon */
.container_close_button:hover .icon-default {
opacity: 0;
}
.container_close_button:hover .icon-active {
opacity: 1;
/* Scale up 5% and darken with a deeper drop shadow */
transform: scale(1.05);
filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.4));
}
/* On click (active) provide a pressed effect for both icons */
.container_close_button:active img {
transform: scale(0.95);
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5) inset);
}
/*** Grid Close */
.grid_close_button {
position: relative; /* or absolute if you need it in a specific place */
width: 30px;
height: 30px;
border: none;
background: none;
padding: 0;
cursor: pointer;
}
/* Both images fill the same space and stack on top of each other */
.grid_close_button img {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}
/* Start with the 'active' image hidden */
.grid_close_button .icon-active {
opacity: 0;
}
/* On hover, fade out the default icon and fade in the active icon */
.grid_close_button:hover .icon-default {
opacity: 0;
}
.grid_close_button:hover .icon-active {
opacity: 1;
transform: scale(1.05);
filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.4));
}
/* On click (active) provide a pressed effect for both icons */
.grid_close_button:active img {
transform: scale(0.95);
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5) inset);
}
.fancy-grid-button {
/* Match the nav_panel_btn style but with a subtle silver variant */
display: inline-block;
width: 140px;
padding: 5px 10px;
font-size: 14px;
line-height: 1.2;
background-color: #f5f5f5; /* Light silver-gray background */
color: #333; /* Dark text for good contrast */
border: 1px solid #999; /* Slightly darker gray border */
border-radius: 4px;
cursor: pointer;
font-family: inherit;
/* Simple transition for hover effect */
transition:
background-color 0.2s ease,
border-color 0.2s ease;
}
/* Hover: darken slightly like other nav buttons */
.fancy-grid-button:hover {
background-color: #e8e8e8;
border-color: #777;
/* No transform/wiggle - just color change */
}
/* Active: subtle pressed effect */
.fancy-grid-button:active {
background-color: #ddd;
border-color: #666;
}
/***
* ___ __ __ __ __ ___ __ ___ ___ __ ___ ___ ___ ___ __ ___ __
* |__ |\ | | \ / ` | / \ /__` |__ |__) | | | | / \ |\ | |__ |__ |__ |__ / ` | /__`
* |___ | \| |__/ \__, |___ \__/ .__/ |___ |__) \__/ | | \__/ | \| |___ | | |___ \__, | .__/
*/
/***
*
* GRID VIEW STYLES
*
*/
/* Grid View Container */
#gridViewContainer {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.85);
z-index: 10500; /* π₯π₯π₯ Raised above tooltips (10000) but below display image (99999) */
overflow-y: auto;
padding: 20px;
transition: opacity 0.5s ease;
opacity: 1;
}
/* Top Bar for Close Button & Slider */
.gridTopBar {
position: fixed;
top: 20px; /* Change this value to move it vertically */
left: 20px; /* Change this value to move it horizontally */
z-index: 10501; /* π₯π₯π₯ Above grid container (10500) to ensure controls stay on top */
display: flex;
align-items: center;
gap: 20px;
background-color: #222; /* Optional: for contrast */
padding: 10px;
border-radius: 4px;
}
/* Example: if you want to move it 20px more right and down, change top and left to 40px */
.gridTopBar.adjusted {
top: 40px;
left: 40px;
}
/* Ensure slider and controls are properly aligned */
.gridSliderLabel {
display: flex;
align-items: center;
margin: 0;
}
/* Thumbnails Container (ensure there's margin so content doesn't get hidden behind the top bar) */
#gridImagesWrapper {
margin-top: 80px; /* Adjust if needed */
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 20px;
}
/***
* ___ __ __ __ __ ___ __ __ ___ __
* |__ | /\ /__` |__| /\ |\ | | \ |__) /__` |__ | | | \ / \ |__ | /\ /__` |__|
* | |___ /~~\ .__/ | | /~~\ | \| |__/ | .__/ |___ \__/ |__/ \__/ | |___ /~~\ .__/ | |
*/
#flash-message-container {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
max-width: 90%;
background-color: #f8f9fa;
border: 1px solid #ccc;
border-radius: 10px;
padding: 35px;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
opacity: 1; /* Start fully opaque */
transition: opacity 3s ease; /* Fade-out transition over 3 seconds */
}
#flash-message {
position: relative;
text-align: center;
}
#flash-close-button {
position: absolute;
top: -30px; /* Adjust as needed */
right: -30px;
width: 24px; /* Set an appropriate width */
height: 24px; /* Set an appropriate height */
background: url('/static/images/close_button.png') no-repeat center center;
background-size: contain;
border: none;
cursor: pointer;
padding: 0;
line-height: 1;
}
/* Flash PSEUDO */
.flash-message-item.success {
color: green;
}
.flash-message-item.error,
.flash-message-item.warning {
color: red;
}
#flash-pseudo-message-container {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
max-width: 90%;
background-color: #f8f9fa;
border: 1px solid #ccc;
border-radius: 10px;
padding: 35px;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
opacity: 1; /* Start fully opaque */
transition: opacity 3s ease; /* Fade-out transition over 3 seconds */
}
/* Grid View Styles */
.image-container {
position: relative;
display: inline-block;
margin: 5px;
vertical-align: top;
/* Force the container to constrain width */
width: fit-content;
max-width: 100%;
}
/* Header container that appears above the image */
.image-header-container {
display: none;
/* Force width to match the image below it */
width: 100%;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.85);
color: #e0e0e0;
padding: 6px 10px;
font-size: 13px;
border: 1px solid #444;
border-bottom: none;
margin-bottom: 0;
overflow: hidden;
border-radius: 3px 3px 0 0;
justify-content: space-between;
align-items: center;
}
.image-header-container.visible {
display: flex;
}
.image-id {
font-weight: bold;
color: #4cafff;
font-family: monospace;
}
.image-select-checkbox {
margin-left: 5px;
cursor: pointer;
width: 16px;
height: 16px;
}
/* Grid image with transitions */
.gridImage {
transition: width 0.3s ease, height 0.3s ease;
}
.metadata-container {
display: none;
/* Force width to match the image above it */
width: 100%;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.85);
color: #e0e0e0;
padding: 8px 10px;
font-size: 13px;
border: 1px solid #444;
border-top: none;
margin-top: 0;
overflow: auto;
border-radius: 0 0 3px 3px;
}
.metadata-container.visible {
display: block;
}
/* Seed Row in Metadata */
.seed-row {
font-weight: bold;
color: #4cafff;
margin-bottom: 6px;
font-family: monospace;
font-size: 14px;
/* Handle text wrapping for long numbers */
overflow-wrap: break-word;
word-break: break-word;
/* Make sure it stays within its container */
width: 100%;
box-sizing: border-box;
}
/* Metadata Row */
.metadata-row {
color: #f0f0f0;
font-size: 13px;
line-height: 1.4;
margin-top: 6px;
/* Handle text wrapping properly */
overflow-wrap: break-word;
word-break: break-word;
white-space: normal;
/* Allow scrolling for very long metadata */
max-height: 220px;
overflow-y: auto;
/* Visual separator */
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 6px;
/* Make sure it stays within its container */
width: 100%;
box-sizing: border-box;
}
/* Individual metadata items */
.metadata-item {
margin-bottom: 6px;
width: 100%;
}
/* Label styling */
.metadata-label {
font-weight: bold;
color: #88ccff;
}
/* Value styling */
.metadata-value {
color: #f0f0f0;
}
/* Grid Controls */
.gridControls {
display: flex;
align-items: center;
gap: 15px;
}
/* Grid Info Button */
.grid_info_button {
position: relative;
width: 30px;
height: 30px;
border: none;
background: none;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.grid_info_button img {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
transition: opacity 0.5s ease;
}
/* Initially show white icon, hide blue icon */
.grid_info_button .icon-default {
opacity: 1;
}
.grid_info_button .icon-active {
opacity: 0;
}
/* When active, hide white icon, show blue icon */
.grid_info_button.active .icon-default {
opacity: 0;
}
.grid_info_button.active .icon-active {
opacity: 1;
}
/* Grid Reorder Button */
.grid_reorder_button {
position: relative;
width: 30px;
height: 30px;
border: none;
background: none;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
}
.grid_reorder_button img {
width: 30px;
height: 30px;
transition: transform 0.3s ease, filter 0.3s ease;
filter: brightness(1);
}
.grid_reorder_button {
position: relative;
width: 30px;
height: 30px;
}
.grid_reorder_button img {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
transition: opacity 0.5s ease;
}
.grid_reorder_button .icon-default {
opacity: 1;
}
.grid_reorder_button .icon-active {
opacity: 0;
}
/* Grid Delete Button */
.grid_delete_button {
position: relative;
width: 30px;
height: 30px;
border: none;
background: none;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
}
.grid_delete_button img {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
transition: opacity 0.5s ease;
}
.grid_delete_button .icon-default {
opacity: 1;
}
.grid_delete_button .icon-active {
opacity: 0;
}
/* When active or hovered, hide default icon, show active icon */
.grid_delete_button:hover .icon-default,
.grid_delete_button.active .icon-default {
opacity: 0;
}
.grid_delete_button:hover .icon-active,
.grid_delete_button.active .icon-active {
opacity: 1;
}
}
.grid_reorder_button.active .icon-default {
opacity: 0;
}
.grid_reorder_button.active .icon-active {
opacity: 1;
}
.grid_reorder_button:hover img {
transform: scale(1.1);
}
/* Apply to image containers when in reorder mode */
.image-container.reorder-mode {
cursor: grab;
}
.image-container.reorder-mode:active {
cursor: grabbing;
}
/* Dragging and dropping styles */
.image-container {
/* This controls scaling and opacity changes */
transition: transform 0.25s ease-out, opacity 0.25s ease, box-shadow 0.25s ease;
position: relative;
z-index: 1;
}
/* This class is added to the gridImagesWrapper during reordering to control movement speed */
#gridImagesWrapper.reordering .image-container {
/* This controls the speed of repositioning when items move to new locations */
transition: all 0.75s cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* Ensure the transition applies to left/top positioning if those are used for layout */
#gridImagesWrapper.reordering .image-container {
transition-property: transform, opacity, left, top, margin, position, box-shadow;
transition-duration: 0.75s;
}
.image-container.dragging {
opacity: 0.85;
transform: scale(0.95);
z-index: 1000;
box-shadow: 0 10px 20px rgba(0,0,0,0.4);
cursor: grabbing !important;
filter: drop-shadow(0 0 10px #2196F3) drop-shadow(0 0 20px #03A9F4);
border: 2px solid #03A9F4;
}
.image-container.drop-target {
transform: scale(1.25);
z-index: 2;
}
#flash-pseudo-message {
position: relative;
text-align: center;
}
#flash-pseudo-close-button {
position: absolute;
top: -30px; /* Adjust as needed */
right: -30px;
width: 24px; /* Set an appropriate width */
height: 24px; /* Set an appropriate height */
background: url('/static/images/close_button.png') no-repeat center center;
background-size: contain;
border: none;
cursor: pointer;
padding: 0;
line-height: 1;
}
/* Grid View Styles */
.image-container {
position: relative;
display: inline-block;
margin: 5px;
vertical-align: top;
}
.metadata-container {
display: none;
width: 100%;
background-color: rgba(0, 0, 0, 0.85);
color: #e0e0e0;
padding: 6px 8px;
font-size: 11px;
border: 1px solid #444;
border-top: none;
margin-top: 0;
box-sizing: border-box;
overflow: hidden;
border-radius: 0 0 3px 3px;
}
.metadata-container.visible {
display: block;
}
/* Seed Row in Metadata */
.seed-row {
font-weight: bold;
color: #4cafff;
margin-bottom: 3px;
font-family: monospace;
font-size: 12px;
}
/* Grid Controls */
.gridControls {
display: flex;
align-items: center;
gap: 15px;
}
.flash-pseudo-message-item.success {
color: green;
}
.flash-pseudo-message-item.error,
.flash-pseudo-message-item.warning {
color: red;
}
/***
* ___ __ ___ __ __ __ __ ___ __ __ ___ __
* |__ |\ | | \ |__ | /\ /__` |__| /\ |\ | | \ |__) /__` |__ | | | \ / \ |__ | /\ /__` |__|
* |___ | \| |__/ | |___ /~~\ .__/ | | /~~\ | \| |__/ | .__/ |___ \__/ |__/ \__/ | |___ /~~\ .__/ | |
*/
/* Tooltip for role */
#role-tooltip {
position: absolute;
top: 0;
left: 0;
background-color: #000;
color: #fff;
padding: 5px;
border-radius: 5px;
box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-in-out;
font-size: 14px;
z-index: 999999;
}
.tooltip-icon {
font-size: 16px;
color: #007bff;
margin-left: 5px;
cursor: pointer;
position: relative;
z-index: 1001;
}
.tooltip-icon::after {
content: attr(data-tooltip);
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
width: 200px;
background-color: #333;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 5px;
box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
z-index: 10000;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0s 0.3s;
}
.tooltip-icon:hover::after {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease, visibility 0s 0s;
}
/* Center custom-guidance text area */
#custom-guidance {
display: block;
margin: 10px auto;
width: 80%;
text-align: left;
resize: none;
}
/* Dashboard table styling */
.dashboard-table {
width: 66%;
margin: 0 auto;
border-collapse: collapse;
}
.dashboard-table th, .dashboard-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.container {
max-width: 66%;
margin: 0 auto;
text-align: left;
}
/* -------------- Button Slide + Fade Animation -------------- */
/* Use classes instead of IDs so multiple buttons can share styles */
/* -------------------------------
1) Button Slide + Fade
------------------------------- */
.resync-button {
background: linear-gradient(135deg, #ffa50081, #ff7f50ae); /* Gradient from light orange to darker orange */
color: #000000;
border-color: #bf5900;
line-height: 1.4; /* Add this line to increase spacing between text lines */
transform: translateX(-50%);
opacity: 1;
transition:
left 1s ease-in-out,
transform 1s ease-in-out,
opacity 1s ease-in-out;
}
/* Centered version of resync button without transform offset */
.resync-button-centered {
background: linear-gradient(135deg, #ffa50081, #ff7f50ae); /* Gradient from light orange to darker orange */
color: #000000;
border-color: #bf5900;
line-height: 1.4;
opacity: 1;
transition: opacity 0.5s ease-out;
white-space: nowrap; /* Prevent text wrapping */
width: auto !important; /* Force the width to be auto */
min-width: fit-content !important; /* Ensure it fits the content at minimum */
max-width: none !important; /* No maximum width limitation */
display: inline-block; /* Allow button to expand to fit content */
text-align: center; /* Center the text inside the button */
padding: 10px 20px; /* Standard padding */
}
.resync-button.slide-left {
left: 10px;
transform: translateX(0);
opacity: 0;
}
/* -------------------------------
2) Spinner Container
(No animation here, just
absolute position & hidden
by default)
------------------------------- */
.spinner-rolling-container {
width: 75px;
height: 75px;
position: absolute;
display: none;
}
/* -------------------------------
3) The Rolling Spinner
We'll do a 3s cycle for spin,
fade, and scale so that at 1.5s
(50%) we are exactly in the middle
horizontally AND at minimal
opacity/scale.
------------------------------- */
.thinking-spinner-rolling {
width: 75px;
height: 75px;
background: url('/static/images/brain.png') no-repeat center center;
background-size: contain;
/*
spinRolling -> 3s for a full rotation
fadeOnlyRolling -> 3s so it dims at 1.5s
scaleOnlyRolling-> 3s so it shrinks at 1.5s
*/
animation:
spinRolling 3s linear infinite,
fadeOnlyRolling 1.5s ease-in-out infinite,
scaleOnlyRolling 1.5s ease-in-out infinite;
}
/* -------------------------------
4) Keyframes
------------------------------- */
/* a) The spinner does a full rotate every 3s */
@keyframes spinRolling {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* b) Fades to 0.75 opacity in the exact middle of its cycle */
@keyframes fadeOnlyRolling {
0% { opacity: 1; }
50% { opacity: 0.75; }
100% { opacity: 1; }
}
/* c) Scales to 0.85 in the exact middle */
@keyframes scaleOnlyRolling {
0% { scale: 1; }
50% { scale: 0.85; }
100% { scale: 1; }
}
/* Keyframes from your snippet (unchanged) */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes fadeOnly {
0% { opacity: 1; }
66% { opacity: 0.66; }
100% { opacity: 1; }
}
@keyframes scaleOnly {
0% { scale: 1; }
66% { scale: 0.925; }
100% { scale: 1; }
}
/* Apply all three animations: spin, fade, scale */
#test-spinner,
#thinking-spinner,
#thinking-spinner-tonal,
#thinking-spinner-3acts,
#thinking-spinner-acts-subplots-conflicts,
#thinking-spinner-acts-subplots,
#thinking-spinner-timeline,
#thinking-spinner-artwork,
#thinking-spinner-knowledge,
#thinking-spinner-template-ai {
min-width: 75px !important;
min-height: 75px !important;
width: 75px;
height: 75px;
background: url('/static/images/brain.png') no-repeat center center;
background-size: contain;
flex-shrink: 0;
transform: scale(0.01); /* Start tiny and invisible */
opacity: 0;
animation:
growSpinner 0.8s ease-out forwards, /* Slightly slower growth and fade-in animation */
combinedSpinGrow 3s linear infinite, /* Slower rotation */
scaleOnly 1s ease-in-out infinite 0.8s; /* Scale pulsing (delayed until growth completes) */
}
/* Custom growth animation for timeline spinner */
@keyframes growSpinner {
0% {
transform: scale(0.01);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Combined animation with rotation only */
@keyframes combinedSpinGrow {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Mini thinking spinner for inline use (buttons, etc.) */
.thinking-spinner-mini {
display: inline-block;
width: 30px;
height: 30px;
background: url('/static/images/brain.png') no-repeat center center;
background-size: contain;
animation: combinedSpinGrow 3s linear infinite;
vertical-align: middle;
margin-left: 5px;
}
/* Other spinners */
#thinking-spinner-hybridize,
#thinking-spinner-pacing,
#thinking-spinner-profile,
#thinking-spinner-enrich,
.thinking-spinner-feedback {
min-width: 75px !important;
min-height: 75px !important;
width: 75px;
height: 75px;
background: url('/static/images/brain.png') no-repeat center center;
background-size: contain;
flex-shrink: 0; /* Prevent the spinner from shrinking */
/* Each animation can have its own duration and easing */
animation:
spin 2s linear infinite, /* rotation speed can be adjusted independently */
fadeOnly 1s ease-in-out infinite, /* fade speed can be adjusted independently */
scaleOnly 1s ease-in-out infinite; /* scale timing can be adjusted independently */
}
/* Scene Drafting spinner */
#thinking-spinner-drafting {
min-width: 75px !important;
min-height: 75px !important;
width: 75px;
height: 75px;
background: url('/static/images/brain.png') no-repeat center center;
background-size: contain;
flex-shrink: 0; /* Prevent the spinner from shrinking */
/* Each animation can have its own duration and easing */
animation:
spin 3s linear infinite, /* rotation speed can be adjusted independently */
fadeOnly 1.5s ease-in-out infinite, /* fade speed can be adjusted independently */
scaleOnly 1.5s ease-in-out infinite; /* scale timing can be adjusted independently */
}
/* Base alert styling */
.alert {
position: relative;
padding: 10px 40px 10px 10px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 5px;
font-size: 14px;
line-height: 1.4;
}
/* Success variant styling */
.alert-success {
background-color: #177e58;
color: #fff;
border-color: #2F4F4F;
}
/* Danger variant styling */
.alert-danger {
background-color: #B22222;
color: #fff;
border-color: #B22222;
}
/* Close button in alert */
.alert-dismissible .close {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
color: #fff;
font-size: 20px;
line-height: 20px;
cursor: pointer;
}
/* Fade transitions for alerts */
.fade {
opacity: 0;
transition: opacity 0.3s linear;
}
.show {
opacity: 1;
}
.left-aligned-buttons {
text-align: left !important;
}
.container .left-aligned-buttons .btn {
display: inline-block !important;
margin: 10px 0 !important;
width: auto !important;
text-align: center !important;
}
/* Apply border-radius to inputs, checkboxes, radios, textareas, and selects */
input[type="text"],
input[type="checkbox"],
input[type="radio"],
textarea,
select {
border: 1px solid #ccc !important;
box-shadow: none !important;
border-radius: 5px !important;
background-color: #fff;
color: #000;
}
input[type="text"]:focus,
textarea:focus,
select:focus {
outline: none;
border-color: #999;
}
td, th {
text-align: center;
vertical-align: middle;
}
/* Base styling for inline-block alignment on all related elements */
.lock-btn,
.action-btns,
.action-btns > button,
.action-btns form > button {
display: inline-block;
vertical-align: middle;
}
/* Additional styling specifically for .lock-btn */
.lock-btn {
margin-right: 5px; /* Remove if not needed */
text-align: center;
}
/* If you need special handling only for lock buttons inside #characterTableBody */
#characterTableBody .lock-btn {
/* If you already have text-align and display set above, you might not need anything here */
/* Remove this if no extra styling is required */
text-align: center;
}
/* Shorter lock button variant */
.lock-btn-short {
height: 25px;
line-height: 25px; /* Centers the icon vertically */
padding: 0 5px; /* Horizontal padding, adjust as needed */
overflow: hidden; /* Prevents icon from making the button taller */
}
.actions-col {
width: 100px; !important;
}
.actions-col .lock-btn {
height: 25px;
line-height: 25x;
padding: 0 5px;
overflow: hidden;
}
/* A special class to reduce vertical space in these particular rows */
.tight-rows td {
padding: 1px 10px; /* less vertical padding by altering first digit, still some horizontal */
line-height: 1; /* tighter line-height */
}
/* Create a custom class for these lock buttons to reduce their height and padding further */
.lock-btn-tight {
height: auto; /* Let height be dictated by content & line-height */
padding: 1px 5px; /* Reduce vertical padding inside the button by altering first digit */
line-height: 1; /* Ensures no extra vertical spacing from line-height */
font-size: 14px; /* Adjust font if needed to keep it neat */
}
textarea {
background-color: #e4faff41; /* A light background makes it stand out */
border: 1px solid #ccc; /* A subtle border to define the area */
color: #333; /* Dark text for good contrast */
font-size: 16px; /* Slightly larger font for readability */
padding: 10px; /* Some padding for comfort */
border-radius: 25px; !important;
width: 100%;
box-sizing: border-box; /* Make sure padding is included in total width */
}
.textarea_suggestions {
height: 300px;
box-sizing: border-box;
min-width: 200px;
max-width: none;
width: 100%;
}
.textarea_suggestions_subplots {
height: 200px;
box-sizing: border-box;
min-width: 200px;
max-width: none;
width: 100%;
}
.editing-table tr:hover {
background-color: #ffffff; !important;
}
/* =========================
Expand/Collapse Button
========================= */
.toggle-details-btn {
background-color: #f0f0f0;
border: 1px solid #6c6c6c;
color: #000000;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
line-height: 1.2;
}
.toggle-details-btn:hover {
background-color: #dcecfa; /* noble blue background like Download Options */
border: 1px solid #386ddc; /* matching blue border */
color: #09082b; /* matching dark text */
}
.show-user-prefs-btn {
background-color: #f0f0f0; /* Light gray background */
border: 1px solid #848282; /* Neutral border */
color: #000; /* Black text */
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
line-height: 1.2;
}
.show-user-prefs-btn:hover {
background-color: #dcecfa; /* noble blue background like Download Options */
border: 1px solid #386ddc; /* matching blue border */
color: #09082b; /* matching dark text */
}
.toggle-tonal-details-btn {
background-color: #f0f0f0;
border: 1px solid #0063af;
color: #000000;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
line-height: 1.2;
}
.toggle-tonal-details-btn:hover {
background-color: #cfcfcf;
}
.toggle-subtables-btn {
background-color: #f0f0f0;
border: 1px solid #1711c6;
color: #000000;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
line-height: 1.2;
}
.scenes_act_header {
border: 1px solid #c6e6ff;
overflow: hidden;
background-color: #ffffff;
margin: 5px;
}
.scenes_act_header h5 {
float: left;
margin: 0;
line-height: 30px;
}
.scenes_act_header .toggle-subtables-btn {
float: right;
}
.toggle-subtables-btn:hover {
background-color: #cfcfcf;
}
/* =========================
Base Three-Act Button
========================= */
.three-act-btn {
background-color: #f0f0f0; /* Light gray background */
border: 1px solid #ccc; /* Neutral border by default */
color: #000; /* Black text */
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
line-height: 1.2;
/* No forced width or height, so they size naturally with content */
}
.three-act-btn:hover {
background-color: #dcecfa; /* noble blue background like Download Options */
border: 1px solid #386ddc; /* matching blue border */
color: #09082b; /* matching dark text */
}
/* =========================
Make Primary Variant
========================= */
.three-act-btn-primary {
background-color: #f0f0f0; /* Light gray background */
border: 1px solid #007bff !important; /* Neutral border by default */
color: #000; /* Black text */
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
line-height: 1.2;
/* No forced width or height, so they size naturally with content */
}
.three-act-btn-primary:hover {
background-color: #e6f3ff; /* Light blue hover background */
border: 1px solid #0056b3 !important; /* Darker blue border on hover */
}
/* =========================
Text DL Variant
========================= */
.dl-txt-btn {
background-color: #f0f0f0; /* Light gray background */
border: 1px solid #4000ff !important; /* Neutral border by default */
color: #000; /* Black text */
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
line-height: 1.2;
/* No forced width or height, so they size naturally with content */
}
.dl-txt-btn:hover {
background-color: #dcecfa; /* noble blue background like Download Options */
border: 1px solid #386ddc !important; /* matching blue border */
color: #09082b; /* matching dark text */
}
/* =========================
Delete (Danger) Variant
========================= */
.three-act-btn-danger {
border-color: #dc3545; /* Red border */
background-color: #f0f0f0; /* Light gray background */
border: 1px solid #dc3545 !important; /* Neutral border by default */
color: #000; /* Black text */
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
line-height: 1.2;
}
.three-act-btn-danger:hover {
background-color: #ffeaea; /* Light red hover background */
border: 1px solid #c82333 !important; /* Darker red border on hover */
}
/* =========================
Purple Variant
========================= */
.three-act-btn-purple {
background-color: #f0f0f0; /* Light gray background */
border: 1px solid #7b3ff2 !important; /* Purple border */
color: #000; /* Black text */
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
line-height: 1.2;
}
.three-act-btn-purple:hover {
background-color: #f3eaff; /* Light purple hover background */
border: 1px solid #5a1fd1 !important; /* Darker purple border on hover */
}
/* =========================
Bulk Delete Danger Button (33% larger, starts in hover state)
========================= */
.bulk-delete-btn-danger {
border-color: #c82333; /* Darker red border as starting state */
background-color: #ffeaea; /* Light red background as starting state */
border: 1px solid #c82333 !important;
color: #000; /* Black text */
padding: 5px 13px; /* 33% larger than 4px 10px */
border-radius: 4px;
cursor: pointer;
font-size: 14px; /* 33% larger than 14px */
line-height: 1.2;
font-weight: normal; /* Remove the offensive bold */
margin-bottom: 10px; /* Add spacing below */
}
.bulk-delete-btn-danger:hover {
background-color: #EC7674; /* Even darker red on hover */
border: 1px solid #a71e2a !important; /* Much darker red border on hover */
color: #fff; /* White text on hover */
}
/* =========================
Show Context
========================= */
.show-context-btn {
/*border-color: #1ee072; */
background-color: #f0f0f0; /* Light gray background */
border: 1px solid #007bff;
color: #000; /* Black text */
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
line-height: 1.2;
}
/* =========================
Feedback Metadata
========================= */
.show-feedback-metadata-btn {
border-color: #8035dc; /* Red border */
background-color: #f0f0f0; /* Light gray background */
border: 1px solid #7835dc !important; /* Neutral border by default */
color: #000; /* Black text */
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
line-height: 1.2;
}
/* =========================
Reorder Button
========================= */
.reorder-btn {
border-color: #8035dc; /* border */
background-color: #f0f0f0; /* Light gray background */
border: 1px solid #007bff; !important; /* Neutral border by default */
color: #000; /* Black text */
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
line-height: 1.2;
}
/* =========================
Synch Button β SAFE VERSION
(no animations, no pseudo-elements)
========================= */
button.synch-btn {
/* Kill any inherited gradient/background images */
background-image: none;
/* Base look */
background-color: #b9e4e3; /* teal-ish base */
border: 1px solid #0a4b8c; /* dark blue border */
color: #000; /* black text */
padding: 4px 10px;
border-radius: 4px;
font-size: 14px;
line-height: 1.2;
cursor: pointer;
/* Ensure predictable box model & rendering */
display: inline-block;
box-sizing: border-box;
/* Smooth fades both ways */
transition:
background-color 0.33s ease,
color 0.33s ease,
border-color 0.33s ease;
}
/* Hover/Focus */
button.synch-btn:hover,
button.synch-btn:focus-visible {
background-color: #78adac; /* hover color */
color: #fff; /* text fades to white */
border-color: #0a4b8c;
}
/* π₯π₯π₯ Commit Sandbox Success Message */
.commit-success-message {
padding: 12px 20px;
background: linear-gradient(135deg, #9ae29e, #83d387);
color: white;
border-radius: 8px;
text-align: center;
font-weight: 600;
font-size: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: opacity 0.5s ease;
}
.char-lock-btn {
padding: 6px 12px;
cursor: pointer;
display: inline-block;
font-size: 16px;
/* your background, border, etc. */
}
.rotIcon {
display: inline-block;
transform: rotate(-20deg);
}
.synopsis-container {
display: flex;
flex-wrap: wrap;
border: 1px solid #ccc;
padding: 16px; /* Adds extra breathing room inside the border */
}
.synopsis-left {
flex: 1;
min-width: 200px;
padding: 8px; /* Retains a smaller local padding around text */
}
.synopsis-actions {
flex: 0 0 auto;
white-space: nowrap;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 8px;
padding: 8px;
text-align: center;
}
/* When unlocked, .synopsis-container also has synopsis-unlocked => background color #fff */
.synopsis-container.synopsis-unlocked {
background-color: #fff; /* or whatever color you want */
}
/* When locked, .synopsis-container also has synopsis-locked => default/transparent background */
.synopsis-container.synopsis-locked {
background-color: #fff;
}
.preserve-lines {
white-space: pre-wrap; /* Keeps your typed line breaks */
word-wrap: break-word; /* Allows wrapping within words if needed */
}
:root {
--baseFontSize: 17px; /* Default size */
--lineHeight: 1.4; /* You can also store line-height here if desired */
}
/* If you want transitions: */
* {
transition: all 0.1s ease;
}
.highlight-suggestion {
background-color: #f0f8ff; /* Light green */
}
.highlight-suggestion:hover {
background-color: #f0f8ff !important;
}
.light-blue-heading {
background-color: #ccffcc; /* Actually light green, not light blue! lol */
height: 10px;
}
.light-blue-heading:hover {
background-color: #ccffcc; /* Same color on hover */
}
.act_heading {
background-color: #e6f3ff; /* Light blue shade */
}
/* Outline row in dark/deep blue and hide the normal content if is_applied=1 */
.suggestion-applied-row {
outline: 1px solid rgba(0, 0, 128, 0.467); /* or border: 1px solid navy */
}
/* Hide the main content area by default if is_applied=1 */
.suggestion-applied-row .applied-body {
display: none;
}
/* We only show the "Suggestion Applied" header by default */
.suggestion-applied-row .applied-header {
background-color: #EEF; /* light bluish background */
padding: 8px;
cursor: pointer;
}
/***
* _______ _ _ _
* (_______|_) (_) (_)
* _ _ ____ _____ _ _ ____ _____ ____
* | | | | \| ___ | | | | _ \| ___ |/ ___)
* | | | | | | | ____| |_____| | | | | ____| |
* |_| |_|_|_|_|_____)_______)_|_| |_|_____)_|
*
*/
/* Nav Panel Button Group - Organized in order of appearance */
/* 1. Base nav panel button style (shared across all buttons) */
.nav_panel_btn {
display: inline-block;
width: 140px;
padding: 5px 10px;
font-size: 14px;
line-height: 1.2;
background-color: #f3f3f3;
color: #333;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
box-sizing: border-box;
margin-top: 7px; /* Reduced spacing between buttons by ~1/3 */
outline: none;
}
.nav_panel_btn:hover {
background-color: #e8e8e8;
border-color: #bbb;
}
.nav_panel_btn:active {
background-color: #ddd;
border: 1px solid #999;
outline: none;
}
.nav_panel_btn:focus {
border: 1px solid #666;
outline: none;
}
/* 2. Character Export & User Preferences Buttons (Blue variant) */
.nav_panel_btn--blue {
background-color: #dcecfa;
border-color: #386ddc;
}
.nav_panel_btn--blue:hover {
background-color: #9ab9f9;
border-color: #1a4399;
}
/* 3. Generate Timeline Button (Green variant) */
.timeline-generate-button {
background: linear-gradient(to bottom, #4CAF50, #2e7d32);
color: white;
width: 100%;
padding: 5px 10px;
border: 1px solid #1b5e20;
border-radius: 4px;
transition: all 0.15s ease-in-out;
margin-top: 7px; /* Reduced spacing between buttons by ~1/3 */
}
.timeline-generate-button:hover {
background: linear-gradient(to bottom, #5cba60, #39854c) !important;
border: 1px solid #1b5e20;
}
.timeline-generate-button:active {
transform: translateY(1px);
background: linear-gradient(to bottom, #2e7d32, #43a047) !important;
border: 1px solid #1b5e20;
}
.timeline-generate-button:disabled {
background: linear-gradient(to bottom, #a5d6a7, #81c784) !important;
border: 1px solid #66bb6a;
cursor: not-allowed;
opacity: 0.8;
}
/* 4. View Timeline Button (Blue variant) */
.swimlane-view-button {
background: linear-gradient(to bottom, #2196F3, #0c4f99);
color: white;
width: 100%;
padding: 5px 10px;
border: 1px solid #052c56;
cursor: pointer;
border-radius: 4px;
transition: all 0.15s ease-in-out;
margin-top: 7px; /* Reduced spacing between buttons by ~1/3 */
}
.swimlane-view-button:hover {
background: linear-gradient(to bottom, #4aa7f5, #1966b3) !important;
border: 1px solid #052c56;
}
.swimlane-view-button:active {
transform: translateY(1px);
background: linear-gradient(to bottom, #083e75, #0c7cd5) !important;
border: 1px solid #052c56;
}
/***
* ______ _ ______ ______ ___
* (_____ \ | | _ / _____) (______) / __) _
* _____) )___ ___ ____ _____ _____ __| | _| |_ ___ ( (____ ____ _____ ____ _____ _ _ ____ _____ _| |__ _| |_ _____ ____
* | ____/ ___) _ \ / ___) ___ | ___ |/ _ | (_ _) _ \ \____ \ / ___) ___ | _ \| ___ | | | | / ___|____ (_ __|_ _) ___ |/ ___)
* | | | | | |_| ( (___| ____| ____( (_| | | || |_| | _____) | (___| ____| | | | ____| | |__/ / | / ___ | | | | |_| ____| |
* |_| |_| \___/ \____)_____)_____)\____| \__)___/ (______/ \____)_____)_| |_|_____) |_____/|_| \_____| |_| \__)_____)_|
*
*/
/* Scene Drafter Navigation Button */
.btn-scene-drafter {
background: linear-gradient(135deg, #23f04c81, #8afffdae);
color: #000000;
border: 1px solid #00bf7c;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
line-height: 1.4;
white-space: nowrap;
display: inline-block;
width: auto;
text-decoration: none;
}
.btn-scene-drafter:hover {
background: linear-gradient(135deg, #1ecc4281, #7beeeede);
}
/* Greyed out version of button - used when scene drafter isn't enabled yet */
.btn-scene-drafter--greyed {
background: linear-gradient(135deg, #a9a9a981, #c0c0c0ae);
border: 1px solid #888888;
color: #555555;
opacity: 0.8;
}
.btn-scene-drafter--greyed:hover {
background: linear-gradient(135deg, #9a9a9a81, #b0b0b0de);
}
/***
* _______ _ _ _
* (_______) | | | | |
* _____ | | _____ ___| |__ | | ___ ____ ___
* | ___) | |(____ |/___) _ \ | |/ _ \ / _ |/___)
* | | | |/ ___ |___ | | | |______| | |_| ( (_| |___ |
* |_| \_)_____(___/|_| |_(_______)_)___/ \___ (___/
* (_____|
*/
#global-timezone-select {
width: 100%;
box-sizing: border-box;
}
#flash-logs-container {
width: 100%;
margin: 0 auto;
text-align: left;
overflow-x: auto;
max-width: 100%;
}
.flash-log-table {
width: 100%;
border-collapse: collapse;
table-layout: auto;
max-width: 100%;
}
.flash-log-table th,
.flash-log-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
white-space: normal; /* allow text wrapping */
word-wrap: break-word;
overflow-wrap: anywhere;
}
.flash_logs_controls {
width: 20px;
height: 20px;
border: none;
background: none;
padding: 0;
cursor: pointer;
display: inline-block;
vertical-align: middle;
}
.flash-log-pagination .btn:disabled .flash_logs_controls {
opacity: 0.5;
filter: grayscale(100%);
}
/* Optional: adjust width on smaller screens */
@media screen and (max-width: 768px) {
#flash-logs-container {
width: 95%;
}
}
/* Ensure timezone selector doesn't break layout */
#global-timezone-select {
font-size: 0.9em;
}
/* Color coding for flash messages */
.flash-msg-info { background-color: #EEF; }
.flash-msg-success { background-color: #E6F9E6; }
.flash-msg-warning { background-color: #FFF7E0; }
.flash-msg-error { background-color: #FFDCE0; }
/***
* _______ _____ _____ _______ _______ ______ _____ _______ _____ _______ _____ __ _
* |______ |_____] | | |______ | \ | | | | | | | \ |
* |______ | __|__ |_____ |______ |_____/ __|__ | __|__ |_____ |_____| | \_|
*
*/
.icon-container {
display: flex;
justify-content: center;
gap: 10px;
}
.edit-icon, .grab-icon {
cursor: pointer;
width: 30px;
height: 30px;
transition: all 0.5s ease; /* 0.5 seconds transition */
}
.edit-icon:hover {
content: url('/static/images/edit_icon_pink.png');
}
.grab-icon:hover {
content: url('/static/images/hand-grab-pink.png');
}
.button-container {
display: flex;
gap: 10px;
margin-top: 10px;
}
/***
* __ ___ __ ___ __ __ __ ___ __ __ __
* | | | | | /__` | |__) /\ | | / \ |\ | / ` / \ |\ | | |__) / \ | /__`
* | |___ |___ \__/ .__/ | | \ /~~\ | | \__/ | \| ___ \__, \__/ | \| | | \ \__/ |___ .__/
*/
.illustration_controls {
cursor:pointer;
margin:0 10px;
width: 15px;
}
.notice_window {
border: 1px solid green;
background-color: white;
padding: 15px;
position: relative;
margin-top: 10px;
border-radius: 10px; /* Rounded borders */
overflow: hidden; /* Ensures the rounding applies to content as well */
}
.notice_window .close-btn {
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
font-weight: bold;
font-size: 16px;
line-height: 1;
}
/*** For the Grid View Slider */
.sliderContainer {
position: fixed !important;
top: 20px !important;
right: 20px !important;
z-index: 10000 !important;
background-color: #fff !important;
padding: 10px !important;
border-radius: 5px !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}
/***
*
*/
/* Hybrid scene styling - must override all table styles */
tr.hybrid-scene {
position: relative !important;
border-left: 4px solid transparent !important;
background-color: transparent !important;
}
/* Override table styling to show our borders */
table tr.hybrid-scene td:first-child {
position: relative !important;
}
table tr.hybrid-scene.alternate-scene td:first-child:before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 4px !important;
background-color: #ff7f50 !important;
}
table tr.hybrid-scene.suggested-scene td:first-child:before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 4px !important;
background-color: #ffbf00 !important;
}
/* Alternate version scenes */
tr.hybrid-scene.alternate-scene {
border-left-color: #ff7f50 !important; /* Coral color */
box-shadow: inset 0 0 0 1px rgba(255, 127, 80, 0.3) !important;
background-color: rgba(255, 127, 80, 0.05) !important;
}
/* Make the hover state maintain styling */
tr.hybrid-scene.alternate-scene:hover {
border-left-color: #ff7f50 !important;
box-shadow: inset 0 0 0 1px rgba(255, 127, 80, 0.5) !important;
background-color: rgba(255, 127, 80, 0.08) !important;
}
/* AI suggested scenes */
tr.hybrid-scene.suggested-scene {
border-left-color: #ffbf00 !important; /* Amber color */
box-shadow: inset 0 0 0 1px rgba(255, 191, 0, 0.3) !important;
background-color: rgba(255, 191, 0, 0.05) !important;
}
/* Make the hover state maintain styling */
tr.hybrid-scene.suggested-scene:hover {
border-left-color: #ffbf00 !important;
box-shadow: inset 0 0 0 1px rgba(255, 191, 0, 0.5) !important;
background-color: rgba(255, 191, 0, 0.08) !important;
}
/* π₯π₯π₯ Scene Roadmap Card Styling */
.scene-cards-container {
display: block;
width: 100%;
}
.scene-card {
border: 1px solid #ddd;
border-left: 4px solid var(--scene-roadmap-left-border, #7a8a99);
border-radius: 6px;
margin-bottom: 12px;
background-color: #fff;
}
/* π₯π₯π₯ CRITICAL: Merged scene styling - MUST override default */
.scene-card.merged {
background-color: #fff5f0 !important;
border-left-color: #ff7f50 !important;
}
/* π₯π₯π₯ CRITICAL: Suggested scene styling - MUST override default */
.scene-card.suggested {
background-color: #fff9e6 !important;
border-left-color: #ffbf00 !important;
}
.scene-row {
display: flex;
padding: 10px;
align-items: flex-start;
}
.scene-col {
padding: 0 8px;
overflow: hidden;
text-overflow: ellipsis;
}
/* π₯π₯π₯ Act Header Toggle Triangle */
.act-toggle-triangle {
float: right;
font-size: 24px;
color: #333;
transition: transform 0.3s ease;
cursor: pointer;
font-weight: bold;
line-height: 1;
}
.act-toggle-triangle.collapsed {
transform: rotate(180deg);
}
/* Source badges */
.source-badge {
font-size: 0.8em !important;
padding: 3px 6px !important;
border-radius: 3px !important;
}
/* Alternate version badge */
.alternate-badge {
background-color: #ff7f50 !important; /* Coral color */
color: white !important;
}
/* AI suggested badge */
.suggested-badge {
background-color: #ffbf00 !important; /* Amber color */
color: #333 !important;
}
.toggle-section {
padding: 0;
margin: 0;
border: none;
color: inherit !important;
}
/* ===================================================
Dashboard Page & Panel Container Styles
=================================================== */
.panel_container {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
margin-bottom: 30px;
}
.panel_header--blue {
background-color: #dcecfa;
border-bottom: 2px solid #386ddc;
padding: 12px 15px;
}
.panel_header--orange {
background-color: #ffecd9;
border-bottom: 2px solid #ff9933;
padding: 12px 15px;
}
.panel_header--purple {
background-color: #eadef3;
border-bottom: 2px solid #8456a6;
padding: 12px 15px;
}
.panel_header--green {
background-color: #99fcd990;
border-bottom: 2px solid #00bf7c;
padding: 12px 15px;
}
.panel_content {
padding: 20px;
}
.panel_title {
font-size: 20px;
margin: 0;
color: #333;
}
/* Emphasis boxes with left border */
.emphasis_box {
background-color: #f8f9fa;
padding: 10px 15px;
margin-bottom: 15px;
border-left-width: 4px;
border-left-style: solid;
}
.emphasis_box--info {
border-left-color: #386ddc;
}
.emphasis_box--warning {
border-left-color: #ff9933;
}
.emphasis_box--success {
border-left-color: #00bf7c;
}
.emphasis_box--highlight {
border-left-color: #8456a6;
}
/* Flex layout containers */
.flex_container {
display: flex;
flex-wrap: wrap;
}
.flex_container--spaced {
justify-content: space-between;
}
.flex_container--centered {
justify-content: center;
}
.flex_item {
flex: 1;
min-width: 200px;
margin-right: 10px;
margin-bottom: 10px;
}
.flex_item:last-child {
margin-right: 0;
}
.responsive_container {
overflow-x: auto;
width: 100%;
display: block;
margin-bottom: 20px;
}
/* Dashboard stats cards */
.stats_card {
text-align: center;
background-color: #eadef3;
border: 1px solid #8456a6;
border-radius: 5px;
padding: 15px;
}
.stats_number {
font-size: 28px;
margin: 0 0 5px 0;
color: #451d0f;
}
.stats_label {
color: #555;
font-size: 14px;
margin: 0;
}
/* Dashboard layout */
.dashboard_container {
width: 90%;
margin: 30px auto;
}
.dashboard_header {
margin-bottom: 20px;
}
.dashboard_title {
font-size: 28px;
color: #333;
margin-bottom: 5px;
}
.dashboard_subtitle {
color: #666;
font-size: 14px;
}
/* Action buttons area */
.action_area {
text-align: center;
margin-top: 20px;
}
/* ===================================================
Flash Logs Styling
=================================================== */
.flash-logs-section {
max-width: 1200px;
margin: 40px auto;
padding: 0 20px; /* Match dashboard container padding */
}
.flash-url, .flash-route-name {
/* Style for URLs and route names in flash logs */
word-break: break-word;
overflow-wrap: break-word;
white-space: normal;
}
/* Flash log rows with metadata - set to white background */
.flash-log-row {
background-color: white;
}
#outer-toggle-container {
width: 100% !important;
margin: 0 auto 30px auto !important;
text-align: center;
}
#flash-logs-container {
width: 100%;
padding: 0;
overflow: hidden;
}
.flash-log-control-container {
background-color: white;
border-radius: 8px;
border: 1px solid #4146f5; /* Purple border matching the table_feedback border */
padding: 15px;
margin-bottom: 20px;
}
.flash-log-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin: 0;
}
.flash-log-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 0 auto;
font-size: 0.95rem;
}
.flash-log-table th {
background-color: #cceefd;
padding: 14px 16px;
text-align: left;
font-weight: 600;
color: #333;
border: 1px solid #d8ddfa;
}
.flash-log-table td {
padding: 14px 16px;
border: 1px solid #d8ddfa;
color: #334155;
}
.flash-msg-success {
background-color: rgba(34, 197, 94, 0.1);
color: #166534;
padding: 16px !important;
}
.flash-msg-error {
background-color: rgba(239, 68, 68, 0.1);
color: #b91c1c;
padding: 16px !important;
}
.flash-msg-danger {
background-color: rgba(249, 115, 22, 0.1);
color: #c2410c;
padding: 16px !important;
}
.flash-msg-info {
background-color: rgba(59, 130, 246, 0.1);
color: #1e40af;
padding: 16px !important;
}
.flash-url {
word-break: break-all;
}
#global-timezone-select {
padding: 6px 8px;
border: 1px solid #e2e8f0;
border-radius: 4px;
background-color: white;
color: #475569;
font-size: 0.9rem;
}
/* ===================================================
Dashboard table improvements
=================================================== */
.dashboard-container {
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
}
.dashboard-header {
text-align: center;
margin-bottom: 30px;
}
.welcome-heading {
font-size: 2.2rem;
margin-bottom: 10px;
color: #1a202c;
}
.projects-heading {
font-size: 1.6rem;
color: #4a5568;
margin-bottom: 25px;
}
.table-container {
overflow-x: auto;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.dashboard-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background-color: white;
border-radius: 8px;
}
.dashboard-table thead {
background-color: #99fcd990;
}
.dashboard-table th {
padding: 16px 20px;
text-align: left;
font-weight: 600;
color: #333;
border: 1px solid #e9f7fb;
white-space: nowrap;
}
.dashboard-table td {
padding: 16px 20px;
border: 1px solid #e9f7fb;
color: #2d3748;
}
.dashboard-table tbody tr:hover {
background-color: #f9fafb;
}
.project-name-col {
width: 40%;
}
.project-id-col, .database-col, .actions-col {
width: 15%;
}
.created-date-col {
width: 25%;
}
.project-link {
color: #3182ce;
font-weight: 500;
text-decoration: none;
transition: color 0.2s;
}
.project-link:hover {
color: #2c5282;
text-decoration: underline;
}
.delete-btn {
background-color: #eadef3;
color: #451d0f;
border: 1px solid #8456a6;
padding: 8px 16px;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}
.delete-btn:hover {
background-color: #dbc3ed;
}
.no-projects-cell {
text-align: center;
padding: 30px !important;
}
.no-projects-message {
color: #718096;
font-size: 1.1rem;
}
.route-block {
padding: 10px;
margin-bottom: 15px;
/* Removed inner border */
}
.panel_container {
border: 1px solid #ccc;
border-radius: 6px;
margin: 0;
background-color: white;
overflow: hidden;
box-sizing: border-box;
}
.panel_header--blue {
background-color: #e6f0ff;
padding: 8px 12px; /* Reduced padding */
border-bottom: 3px solid #4285f4;
margin: 0;
cursor: pointer;
position: relative;
}
.panel_title {
margin: 0;
font-size: 1.1em;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
.responsive_container {
padding: 8px 10px;
margin: 0;
box-sizing: border-box;
overflow-x: auto;
}
.no-routes-msg {
text-align: center;
padding: 16px;
background: #f4f4f4;
border-radius: 4px;
}
.toggle-icon {
display: inline-block;
font-size: 25px; /* Much larger triangle */
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smoother animation */
transform: rotate(90deg); /* Start position: pointing right */
}
.panel_header--blue.collapsed .toggle-icon {
transform: rotate(0deg); /* Return to original position when collapsed */
}
.expanded .toggle-icon {
transform: rotate(180deg);
}
.toggle-icon--spaced {
margin-left: 10px;
}
.panel_content {
max-height: 2000px; /* Higher value to accommodate all content */
overflow: hidden;
transition-property: max-height;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* More symmetrical timing */
will-change: max-height;
}
.panel_header--blue.collapsed + .panel_content {
max-height: 0;
overflow: hidden;
/* Removed padding change which was causing jarring animation */
}
/* Secondary Generate More button - subdued variant */
.btn-generate-more {
position: relative;
border: 1px solid #386ddc !important;
border-radius: 5px;
color: #09082b;
box-shadow: inset 0 0 10px rgba(193, 219, 245, 0.5);
}
/* Use a pseudo-element for the background with transition */
.btn-generate-more::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #d3e7f9, #e5f1fc 15%, #dcecfa 50%, #e5f1fc 85%, #d3e7f9);
opacity: 0.85;
transition: opacity 0.5s ease;
z-index: -1;
border-radius: 5px; /* Match button border radius */
}
/* Overlay for hover effect */
.btn-generate-more::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #d3e7f9, #c1dbf5, #b0d0f0);
opacity: 0;
transition: opacity 0.5s ease;
z-index: -1;
border-radius: 5px; /* Match button border radius */
}
.btn-generate-more:hover::before {
opacity: 0;
}
.btn-generate-more:hover::after {
opacity: 1;
}
/* Make text stay visible */
.btn-generate-more {
position: relative;
z-index: 1;
}
/* Tonal Profile Styling */
.tonal-card {
background-color: #f8f9fa;
border-radius: 5px;
padding: 15px;
margin-bottom: 15px;
border-left: 3px solid #4e73df;
}
.edit-icon {
cursor: pointer;
display: inline-block;
margin-left: 8px;
vertical-align: middle;
}
.tonal-version-btn {
margin-right: 5px;
}
.act-tone, .pov-tone {
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.act-tone:last-child, .pov-tone:last-child {
border-bottom: none;
}
/* Character star rating system */
.character-star-rating {
display: inline-flex;
font-size: 14px;
color: #ddd;
margin-top: 4px;
align-items: center;
}
.character-star-rating .star.filled {
color: #ffc107;
}
.character-star-rating .star.half-filled {
color: #ffc107;
}
.character-star-rating .star.empty {
color: #ddd;
}
.character-star-rating .no-rating {
font-size: 12px;
color: #6c757d;
font-style: italic;
}
.character-star-rating .rating-number {
margin-left: 8px;
font-size: 12px;
color: #6c757d;
}
/* Five-Part Act Structure Content Styling */
.act-one-content-display {
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px 20px 10px 25px;
background-color: #ffffff;
border-left: 4px solid rgba(40, 167, 69, 0.3); /* Muted green for setup */
border-radius: 5px;
}
.act-two-a-content-display {
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px 20px 10px 25px;
background-color: #ffffff;
border-left: 4px solid rgba(255, 193, 7, 0.4); /* Muted yellow for rising action */
border-radius: 5px;
}
.midpoint-content-display {
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px 20px 10px 25px;
background-color: #ffffff;
border-left: 4px solid rgba(220, 53, 69, 0.4); /* Muted red for turning point */
border-radius: 5px;
}
.act-two-b-content-display {
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px 20px 10px 25px;
background-color: #ffffff;
border-left: 4px solid rgba(253, 126, 20, 0.4); /* Muted orange for escalation */
border-radius: 5px;
}
.act-three-content-display {
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px 20px 10px 25px;
background-color: #ffffff;
border-left: 4px solid rgba(111, 66, 193, 0.3); /* Muted purple for resolution */
border-radius: 5px;
}
/* Plot Summary Synopsis Content Styling
.synopsis-content-display {
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px 20px 10px 25px;
background-color: #ffffff;
border-left: 4px solid rgba(40, 167, 69, 0.3);
border-radius: 5px;
}
*/
.synopsis-content-container {
background-color: #ffffff;
padding: 10px 20px 10px 25px;;
border-left: 4px solid rgba(40, 167, 69, 0.3);
margin-bottom: 5px;
border-radius: 5px;
}
.synopsis-content-container.primary {
border-left: 4px solid #e8c5d6;
}
.synopsis-content-display {
white-space: pre-wrap;
word-wrap: break-word;
margin: 0;
font-style: italic;
}
.why-novel-works-container {
background-color: #ffffff;
padding: 10px 20px 10px 25px;;
border-left: 4px solid rgba(40, 167, 69, 0.3);
margin-bottom: 5px;
border-radius: 5px;
}
.why-novel-works-container.primary {
border-left: 4px solid #e8c5d6;
}
.why-novel-works-display {
white-space: pre-wrap;
word-wrap: break-word;
margin: 0;
font-style: italic;
}
.guidance-content-container {
background-color: #ffffff;
padding: 10px 20px 10px 25px;
border-left: 4px solid rgba(40, 167, 69, 0.3);
margin-bottom: 5px;
border-radius: 5px;
}
.guidance-content-display {
white-space: pre-wrap;
word-wrap: break-word;
margin: 0;
font-style: italic;
}
.themes-container {
background-color: #ffffff;
padding: 10px 20px 10px 25px;
border-left: 4px solid #ffffff;
margin-bottom: 5px;
border-radius: 5px;
}
.themes-list {
margin: 0;
padding-left: 20px;
}
.themes-list li {
margin-bottom: 0 !important;
}
/* Foundation Edit Icons and Dropdowns */
.foundation-edit-icon {
width: 20px;
height: 20px;
cursor: pointer;
transition: transform 0.5s ease;
vertical-align: middle;
float: right;
margin-right: 10px;
margin-bottom: 5px;
}
/* Reduce vertical padding only in content cells with preserve-lines class */
#resourcesModal td.preserve-lines {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
/* Remove paragraph margins inside resource modal cells - except for tonal fields */
#resourcesModal td p:not([data-field]) {
margin: 0 !important;
}
.foundation-edit-icon:hover {
transform: scale(1.25);
}
.foundation-edit-icon.active {
transform: scale(1.25) rotate(30deg);
}
.foundation-dropdown-container {
display: none;
margin-top: 8px;
}
.foundation-dropdown-container.active {
display: block;
}
.foundation-dropdown {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px;
padding: 4px 8px;
min-width: 200px;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
}
.foundation-dropdown select {
min-width: 200px;
max-width: 300px;
padding: 8px 12px;
font-size: 14px;
font-family: inherit;
background: #f3e8ff; /* Light purple background */
border: 1px solid #d8b4fe; /* Purple border */
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
outline: none;
width: 100%;
margin: 3px 0;
}
.foundation-dropdown select:hover {
background: #ede9fe; /* Slightly darker purple on hover */
border-color: #c084fc;
}
.foundation-dropdown select:focus {
background: #faf5ff; /* Even lighter purple when focused */
border-color: #a855f7; /* Darker purple border when focused */
box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1); /* Purple focus glow */
}
.foundation-dropdown select option {
padding: 8px;
background: white;
color: #374151;
}
/* Spacing for multiple selects in secondary genres/plots */
.secondary-genres-selects select,
.secondary-plots-selects select {
margin-bottom: 5px;
}
.secondary-genres-selects select:not(:last-child),
.secondary-plots-selects select:not(:last-child) {
margin-right: 8px;
}
/* Add vertical padding to foundational section category column */
tr[data-summary-row] td:first-child {
padding: 8px 5px;
vertical-align: middle;
}
/* Clean Story Guidance Empty Styling */
.story-guidance-empty {
border: 1px solid #999 !important;
animation: pulse-border 2s infinite;
min-height: 100px;
padding: 0.5rem;
margin: 0;
border-radius: 4px;
}
@keyframes pulse-border {
0% { border-color: #999; }
50% { border-color: #666; }
100% { border-color: #999; }
}
/* Target the OUTSIDE spacing around the green-bordered container */
tr[data-summary-row="user_guidance"] {
margin: 0 !important;
padding: 0 !important;
}
tr[data-summary-row="user_guidance"] td {
margin: 0 !important;
vertical-align: top;
}
/* Story Guidance Container - Default State (With Content) */
.guidance-content-container {
background-color: #ffffff;
padding: 10px 20px 10px 25px;
border-left: 4px solid rgba(40, 167, 69, 0.3); /* Green left border */
margin-bottom: 5px;
border-radius: 5px;
margin-top: 10px !important;
}
/* Story Guidance Container - Placeholder State (Empty) */
.guidance-content-container.placeholder {
background-color: #ffffff;
padding: 10px 20px 10px 25px;
border-left: 4px solid rgba(0, 123, 255, 0.4); /* Medium blue left border */
border-top: 1px solid rgba(0, 123, 255, 0.2);
border-right: 1px solid rgba(0, 123, 255, 0.2);
border-bottom: 1px solid rgba(0, 123, 255, 0.2);
margin-bottom: 5px;
border-radius: 5px;
margin-top: 10px !important;
}
.guidance-content-display {
white-space: pre-wrap;
word-wrap: break-word;
margin: 0 !important;
cursor: pointer; /* indicate it's clickable */
font-style: italic;
}
/* Blue placeholder styling ONLY when empty */
.story-guidance-placeholder {
color: #1e3a8a !important; /* darkish blue, no opacity */
cursor: pointer;
}
/* Clickable area for Story Guidance */
.guidance-content-clickable {
cursor: pointer;
width: 100%;
}
.foundation-dropdown-label {
font-size: 12px;
color: #666;
margin-bottom: 2px;
display: block;
line-height: 1.4;
}
/* Quill Edit Icon Styling */
.quill-edit-icon {
width: 30px;
height: 30px;
cursor: pointer;
transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
background-image: url('/static/images/edit_icon.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
float: right;
margin-left: 10px;
position: relative;
z-index: 10;
display: block;
}
.quill-edit-icon:hover,
button.quill-edit-icon:hover {
transform: scale(1.25) !important;
background-color: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* π₯π₯π₯ Refdoc edit icon - identical styling, different class name to avoid conflicts */
.refdoc-edit-icon {
width: 30px;
height: 30px;
cursor: pointer;
transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
background-image: url('/static/images/edit_icon.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
float: right;
margin-left: 10px;
position: relative;
z-index: 10;
display: block;
}
.refdoc-edit-icon:hover {
transform: scale(1.25) !important;
background-color: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* Arcs Edit Icon Styling */
.arcs-edit-icon {
width: 20px;
height: 20px;
cursor: pointer;
transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
background-image: url('/static/images/edit_icon.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
float: right;
margin-left: 10px;
position: relative;
z-index: 10;
display: block;
}
.arcs-edit-icon:hover,
button.quill-edit-icon:hover {
transform: scale(1.25) !important;
background-color: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* π₯π₯π₯ Arc Container Reusable Classes */
/* Base container for all arc sections */
.arc-container {
flex: 1 1 100%;
background: white;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
position: relative;
}
.arc-container--entry {
border-left: 4px solid #16a085;
}
.arc-container--turning-points {
border-left: 4px solid #e67e22;
}
.arc-container--resolution {
border-left: 4px solid #c0392b;
}
.arc-container--plot-intersections {
border-left: 4px solid #2980b9;
}
.arc-container--relationships {
border-left: 4px solid #8e44ad;
}
.arc-container__header {
display: flex;
justify-content: space-between;
align-items: center;
}
.arc-container__title {
font-weight: bold;
margin-bottom: 8px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.arc-container__title--entry {
color: #16a085;
}
.arc-container__title--turning-points {
color: #e67e22;
}
.arc-container__title--resolution {
color: #c0392b;
}
.arc-container__title--plot-intersections {
color: #2980b9;
}
.arc-container__title--relationships {
color: #8e44ad;
}
.arc-container__content {
color: #2c3e50;
line-height: 1.6;
}
/* Relationship sub-items */
.relationship-item {
margin-bottom: 15px;
padding: 10px;
background: white;
border: 1px solid rgba(142, 68, 173, 0.5);
border-left: 4px solid rgba(142, 68, 173, 0.5);
border-radius: 8px;
}
.relationship-item__name {
font-weight: 600;
color: #34495e;
margin-bottom: 5px;
}
.relationship-item__field {
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #ecf0f1;
}
.relationship-item__field:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.relationship-item__label {
font-weight: 600;
color: #34495e;
}
.relationship-item__value {
color: #5a6c7d;
margin-left: 5px;
}
/* Arc inline editing styles */
.arc-editable[data-editable="true"] {
display: block;
background-color: rgba(255, 235, 59, 0.3);
box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
cursor: pointer;
border-radius: 3px;
padding: 8px;
transition: all 0.3s ease;
margin: -8px;
}
.arc-editable[contenteditable="true"] {
display: block;
background-color: rgba(255, 255, 255, 0.95);
border: 2px solid #ffc107;
outline: none;
padding: 8px;
border-radius: 3px;
margin: -8px;
}
/* Arc dropdown styles */
.arc-dropdown {
background-color: rgba(255, 255, 255, 0.95);
border: 2px solid #ffc107;
outline: none;
padding: 4px 8px;
border-radius: 3px;
font-size: inherit;
font-family: inherit;
color: inherit;
}
.arc-editable--dropdown[data-editable="true"] {
/* Dropdown spans don't need the full block treatment */
display: inline-block;
padding: 2px 4px;
margin: 0;
}
/* Relationship editable styles - inherits from relationship-item__value */
.relationship-editable[data-editable="true"] {
background-color: rgba(255, 255, 255, 0.95);
border: 2px solid #ffc107;
outline: none;
padding: 4px 8px;
margin-left: 0;
display: inline-block;
border-radius: 3px;
cursor: text;
}
/* Tiptap Pro Edit Icon Styling */
.tiptap-edit-icon {
width: 50px;
height: 50px;
cursor: pointer;
transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
background-image: url('/static/images/ai_brain.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
float: right;
margin-left: 10px;
position: relative;
top: 19px;
vertical-align: middle;
z-index: 10;
display: block;
}
.tiptap-edit-icon:hover,
button.tiptap-edit-icon:hover {
transform: scale(1.25) !important;
background-color: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* Character and Setting Edit Icon Styling */
.assigned-character-edit-icon,
.setting-edit-icon {
cursor: pointer;
transition: transform 0.5s ease !important;
display: inline-block;
}
.assigned-character-edit-icon:hover,
.setting-edit-icon:hover {
transform: scale(1.25) !important;
}
/* Delete Draft Icon (Eraser) Styling - Scene Draft Manager */
.sdm-delete-draft-btn {
width: 30px;
height: 30px;
cursor: pointer;
margin-right: 10px;
transition: transform 0.5s ease !important;
display: inline-block;
}
.sdm-delete-draft-btn:hover {
transform: scale(1.25) !important;
}
/* Delete Icon (Eraser) Styling - Appears in table headers in various endpoints */
.header-delete-btn {
width: 25px;
height: 25px;
cursor: pointer;
margin-right: 0px;
transition: transform 0.33s ease !important;
display: inline-block;
opacity: 0.65;
}
.header-delete-btn:hover {
transform: scale(1.25) !important;
}
/*Make Primary Styling - Appears in table headers in various endpoints */
.header-primary-btn {
width: 25px;
height: 25px;
cursor: pointer;
margin-right: 0px;
transition: transform 0.33s ease !important;
display: inline-block;
opacity: 0.65;
}
.header-primary-btn:hover {
transform: scale(1.25) !important;
}
/* Tonal Profile Edit Icon Styling */
.tonal-edit-icon {
cursor: pointer;
transition: transform 0.5s ease !important;
display: inline-block;
}
.tonal-edit-icon.editing {
transform: rotate(30deg) !important;
}
.tonal-edit-icon.editing:hover {
transform: rotate(30deg) scale(1.25) !important;
}
/* All Tonal Edit Textareas Styling */
.tonal-edit-textarea {
background-color: #ffffff !important;
border-left: 4px solid #007bff !important;
padding-left: 12px !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
line-height: 1.5 !important;
}
/* π₯π₯π₯ Fix spacing for tonal editing fields in both main UI and modal */
p[data-field] {
margin: 0.666rem !important; /* Tiny spacing with proper unit */
}
/* Ensure proper spacing when field contains input/textarea */
p[data-field] .tonal-edit-input,
p[data-field] .tonal-edit-textarea {
margin-top: 0; /* No margin */
margin-bottom: 0; /* No margin */
}
.tonal-edit-textarea::placeholder {
color: #6c757d !important;
font-style: italic !important;
opacity: 0.8 !important;
}
/* Solid Bullets for Tone Flags */
.solid-bullets {
list-style-type: disc !important;
}
.solid-bullets li {
list-style-type: disc !important;
}
/* Layout modifier for centering icons */
.icon-centred {
display: block;
margin: 0 auto;
position: relative;
z-index: 10;
}
/* Quill Modal Dropdown Styling */
.ql-multirow-select {
font-size: 14px;
font-family: inherit;
background: #f3e8ff;
border: 2px solid #d8b4fe;
border-radius: 6px;
padding: 8px 12px;
min-width: 200px;
max-width: 300px;
margin-left: 3px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.ql-multirow-select:hover {
background: #ede9fe;
border-color: #c084fc;
}
.ql-multirow-select:focus {
background: #faf5ff;
border-color: #a855f7;
box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
outline: none;
}
/* Character Profile Scrollable Navigation Menu */
.character-profile-meta-row {
position: relative;
display: flex;
align-items: stretch;
gap: 15px;
padding: 8px;
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
min-height: 60px;
}
.name-container {
display: flex;
align-items: center;
margin-right: 10px;
}
.name-container span {
font-size: 16px;
color: #495057;
}
.character-field-scroll-container {
flex: 1;
max-height: 200px;
overflow-y: auto;
border: 2px solid #d8b4fe;
border-radius: 6px;
background: #f3e8ff;
padding: 8px;
outline: none;
}
.character-field-scroll-container:focus {
border-color: #553c9a;
box-shadow: 0 0 0 2px rgba(85, 60, 154, 0.2);
}
.character-field-scroll-container .category-header {
font-weight: bold;
color: #5b21b6;
margin: 8px 0 4px 0;
font-size: 14px;
}
.character-field-option {
padding: 4px 8px;
margin: 2px 0;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.2s;
font-size: 15px;
}
.character-field-option:hover {
background-color: #e0e7ff;
}
.character-field-option.selected {
background-color: #553c9a;
color: white;
font-weight: bold;
}
.scroll-resize-handle {
width: 24px;
height: 24px;
cursor: ns-resize;
display: flex;
align-items: center;
justify-content: center;
align-self: center;
color: #374151;
font-size: 18px;
font-weight: bold;
user-select: none;
border-radius: 4px;
border: 1px solid #6b7280;
background-color: #f3f4f6;
transition: all 0.2s;
}
.scroll-resize-handle:hover {
background-color: #553c9a;
color: white;
border-color: #553c9a;
transform: scale(1.1);
}
.keyboard-hints-section {
position: absolute;
bottom: 8px;
left: 8px;
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
transition: opacity 0.75s ease-out;
}
.hints-label {
font-size: 11px;
color: #6b7280;
font-weight: normal;
}
.hints-images {
display: flex;
gap: 4px;
align-items: center;
}
.keyboard-hint {
width: 19px;
height: 19px;
opacity: 0.8;
user-select: none;
}
/* Profile Field Edit Icons */
.profile-field-edit-icon {
width: 18px;
height: 18px;
margin-right: 8px;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s ease;
vertical-align: middle;
}
.profile-field-edit-icon:hover {
opacity: 1;
transform: scale(1.1);
}
.profile-section h4 {
display: flex;
align-items: center;
margin-bottom: 8px;
}
/* ================================
SIBLING VERSIONING MODAL STYLES
================================ */
/* Modal Backdrop */
.unlock-confirmation-modal {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(2px);
animation: fadeIn 0.2s ease-out;
}
.unlock-confirmation-modal.hidden {
display: none;
}
/* Modal Container */
.unlock-modal-content {
background-color: #ffffff;
margin: 5% auto;
padding: 0;
border: none;
width: 90%;
max-width: 520px;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
animation: slideIn 0.3s ease-out;
overflow: hidden;
max-height: 90vh;
overflow-y: auto;
}
/* Modal Header */
.unlock-modal-header {
background: linear-gradient(to bottom, #f0e8f5, #eadef3);
color: #451d0f;
padding: 20px 24px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #8456a6;
}
.unlock-modal-title {
font-size: 18px;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.unlock-modal-title .warning-icon {
font-size: 20px;
animation: pulse 2s infinite;
}
.unlock-modal-close {
background: none;
border: none;
color: #8456a6;
font-size: 24px;
font-weight: bold;
cursor: pointer;
padding: 0;
width: 32px;
height: 32px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.unlock-modal-close:hover {
background-color: rgba(132, 86, 166, 0.1);
color: #451d0f;
transform: scale(1.1);
}
/* Modal Body */
.unlock-modal-body {
padding: 24px;
line-height: 1.6;
background-color: #fdf3d1;
}
/* Royal Emphasis Boxes */
.emphasis_box {
background-color: #f8f9fa;
padding: 15px;
margin-bottom: 15px;
border-left-width: 4px;
border-left-style: solid;
border-radius: 4px;
}
.emphasis_box--info {
border-left-color: #386ddc;
}
.emphasis_box--warning {
border-left-color: #ff9933;
}
.emphasis_box--success {
border-left-color: #00bf7c;
}
.emphasis_box--highlight {
border-left-color: #8456a6;
}
/* Modal-Specific Emphasis Boxes (Independent Copies) */
.modal_emphasis_box {
background-color: #ffffff;
padding: 15px;
margin-bottom: 15px;
border: 1px solid #e9ecef;
border-left-width: 4px;
border-left-style: solid;
border-radius: 4px;
}
.modal_emphasis_box--info {
border-left-color: #386ddc;
border-top-color: #386ddc;
border-right-color: #386ddc;
border-bottom-color: #386ddc;
}
.modal_emphasis_box--warning {
border-left-color: #ff9933;
border-top-color: #ff9933;
border-right-color: #ff9933;
border-bottom-color: #ff9933;
}
.modal_emphasis_box--success {
border-left-color: #00bf7c;
border-top-color: #00bf7c;
border-right-color: #00bf7c;
border-bottom-color: #00bf7c;
}
.modal_emphasis_box--highlight {
border-left-color: #8456a6;
border-top-color: #8456a6;
border-right-color: #8456a6;
border-bottom-color: #8456a6;
}
.unlock-modal-warning-list {
background-color: #ffffff;
border: 1px solid #ff9933;
border-left: 4px solid #ff9933;
padding: 16px;
margin: 16px 0;
border-radius: 4px;
}
.unlock-modal-warning-list h4 {
color: #663c00;
font-size: 14px;
font-weight: 600;
margin: 0 0 12px 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.unlock-modal-warning-list ul {
margin: 0;
padding-left: 20px;
color: #663c00;
}
.unlock-modal-warning-list li {
margin-bottom: 8px;
font-weight: 500;
}
/* Modal Footer */
.unlock-modal-footer {
padding: 20px 24px;
background-color: #f8f9fa;
display: flex;
justify-content: center;
gap: 12px;
border-top: 1px solid #e9ecef;
}
/* Modal-Specific Button Copies (Independent of nav_panel_btn) */
.modal_nav_btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
line-height: 1.2;
transition: all 0.2s ease;
display: inline-block;
text-align: center;
text-decoration: none;
white-space: nowrap;
min-width: auto;
vertical-align: top;
box-sizing: border-box;
}
.modal_nav_btn--blue {
background-color: #dcecfa;
color: #386ddc;
border: 1px solid #386ddc;
height: 40px;
}
.modal_nav_btn--blue:hover {
background-color: #386ddc;
color: white;
transform: translateY(-1px);
}
.modal_nav_btn--orange {
background-color: #ffecd9;
color: #663c00;
border: 1px solid #ff9933;
height: 40px;
}
.modal_nav_btn--orange:hover {
background-color: #ff9933;
color: white;
transform: translateY(-1px);
}
/* Modal uses royal button classes defined elsewhere in style.css */
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* Responsive Design */
@media (max-width: 768px) {
.unlock-modal-content {
margin: 2% auto;
width: 95%;
max-width: none;
max-height: 95vh;
}
.unlock-modal-header {
padding: 16px 20px;
}
.unlock-modal-title {
font-size: 16px;
}
.unlock-modal-body {
padding: 20px;
}
.unlock-modal-footer {
flex-direction: column;
gap: 8px;
}
.unlock-btn {
width: 100%;
}
}
/***
* ______ ______
* / _____) (____ \ _
* ( (____ ____ _____ ____ _____ ____) )_____ _____ _| |_ ___
* \____ \ / ___) ___ | _ \| ___ | | __ (| ___ (____ (_ _)/___)
* _____) | (___| ____| | | | ____| | |__) ) ____/ ___ | | |_|___ |
* (______/ \____)_____)_| |_|_____) |______/|_____)_____| \__|___/
*
*/
.scene_beats_icon-container {
display: flex;
justify-content: center;
gap: 10px;
}
.scene_beats_edit-icon, .grab-icon {
cursor: pointer;
width: 30px;
height: 30px;
transition: all 0.5s ease; /* 0.5 seconds transition */
}
.scene_beats_edit-icon:hover {
transform: scale(1.25);
}
/* Freshly injected edit icons - dimmed until page refresh */
.scene_beats_edit-icon.freshly-injected {
opacity: 0.5;
transition: opacity 0.3s ease;
}
.scene_beats_edit-icon.freshly-injected:hover {
opacity: 0.7;
transform: scale(1.1); /* Slightly less scale for dimmed state */
}
/* Beat action icons - arrows, plus, eraser */
.beat-action-icon {
cursor: pointer;
transition: transform 0.5s ease;
}
.beat-action-icon:hover {
transform: scale(1.25);
}
/* Quill editor focus states */
.ql-editor:focus {
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
outline: none;
}
/* When Quill is focused, dim the navigation menus */
.ql-editor:focus ~ * .scene-field-scroll-container.active-dropdown,
.ql-editor:focus ~ * .beat-field-scroll-container.active-dropdown {
opacity: 0.6;
}
.scene_beats_grab-icon:hover {
content: url('/static/images/hand-grab-pink.png');
}
/* π ROYAL SCENE BEATS STYLING - Refined for Royal Dignity π */
/* Scene Beats Container */
.scene-beats-container {
padding: 20px;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
border-radius: 12px;
border: 1px solid #cbd5e0;
margin: 10px 0;
}
/* Scene Beats Header */
.scene-beats-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
padding-bottom: 12px;
border-bottom: none;
}
.scene-beats-title {
color: #ffffff; /* ROYAL WHITE TEXT */
font-weight: 700;
font-size: 1.3em;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.beat-count {
background: #4299e1;
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.85em;
font-weight: 600;
}
/* π ROYAL TYPOGRAPHY: Regular weight beat count for scene headers */
.beat-count-regular {
background: #ffffff; /* White background like the existing beat-count */
color: #000000; /* BLACK text as requested by His Majesty */
padding: 3px 10px; /* 10% larger container width */
border-radius: 20px;
font-size: 0.7em; /* 10% larger than 0.64em */
font-weight: 400; /* Regular weight instead of 600 */
margin-left: 15px; /* 15px spacing from "Beats" word */
}
/* Individual Beat Cards */
.beat-card {
background: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 16px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
transition: all 0.2s ease;
overflow: hidden;
}
.beat-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transform: translateY(-1px);
}
/* Beat Header - Royal Subtle Styling */
.beat-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: linear-gradient(90deg, #f7fafc 0%, #edf2f7 100%);
color: #2d3748;
border-bottom: 1px solid #e2e8f0;
cursor: pointer;
transition: background 0.2s ease;
}
.beat-header:hover {
background: linear-gradient(90deg, #edf2f7 0%, #e2e8f0 100%);
}
.beat-number {
font-size: 1.1em;
color: #4a5568;
}
/* π ROYAL STYLING: Separate bold and regular text in beat headers */
.beat-number-bold {
font-weight: 700;
}
.beat-title-regular {
font-weight: 400;
}
/* Collapse/Expand Toggle Button */
.beat-toggle-btn {
background: rgba(255,255,255,0.9);
border: 1px solid #e2e8f0;
color: #4a5568;
padding: 4px 8px;
border-radius: 6px;
font-size: 0.8em;
cursor: pointer;
transition: all 0.2s ease;
font-weight: 500;
}
.beat-toggle-btn:hover {
background: white;
border-color: #cbd5e0;
transform: scale(1.05);
}
/* Beat Content */
.beat-content {
padding: 20px;
line-height: 1.6;
font-size: 1rem;
}
/* Markdown Styling within Beat Content */
.beat-content h3, .beat-content h4, .beat-content h5, .beat-content h6 {
color: #2d3748;
margin: 16px 0 8px 0;
font-weight: 600;
}
.beat-content h3 { color: #1a202c; font-size: 1.1em; }
.beat-content h4 { color: #2d3748; font-size: 1.05em; }
.beat-content h5, .beat-content h6 { color: #4a5568; font-size: 1em; }
.beat-content p {
margin: 8px 0;
color: #4a5568;
}
.beat-content strong {
color: #2d3748;
font-weight: 600;
}
/* Component-specific colors */
.beat-content h3:first-child {
color: #805ad5;
border-bottom: 2px solid #e9d5ff;
padding-bottom: 4px;
margin-bottom: 16px;
}
/* Beat Notes */
.beat-notes {
background: #fef5e7;
border-top: 1px solid #f6e05e;
padding: 12px 20px;
}
.notes-header {
font-weight: 600;
color: #744210;
margin-bottom: 6px;
font-size: 0.9em;
}
.notes-content {
color: #744210;
font-style: italic;
font-size: 0.95em;
}
/* No Beats State */
.no-beats-container {
text-align: center;
padding: 40px 20px;
color: #a0aec0;
}
.no-beats-icon {
font-size: 3em;
margin-bottom: 12px;
opacity: 0.6;
}
.no-beats-message {
font-size: 1.1em;
margin: 0;
}
/* Scene Beats Collapse Button */
.scene-beats-collapse-btn {
background: rgba(255,255,255,0.9);
border: 1px solid #e2e8f0;
color: #4a5568;
padding: 6px 12px;
border-radius: 6px;
font-size: 0.85em;
cursor: pointer;
transition: all 0.2s ease;
font-weight: 500;
}
.scene-beats-collapse-btn:hover {
background: white;
border-color: #cbd5e0;
transform: scale(1.05);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/***
* _ _ ___
* (_) _ | | / __)
* _ ____ ____ ___ ____ _| |_ _____ __| | _____ _| |__ ____ ___ ____
* | | \| _ \ / _ \ / ___|_ _) ___ |/ _ | (_____) (_ __) ___) _ \| \
* | | | | | |_| | |_| | | | |_| ____( (_| | | | | | | |_| | | | |
* |_|_|_|_| __/ \___/|_| \__)_____)\____| |_| |_| \___/|_|_|_|
* |_|
* _ _ _ _
* | | _ | | _ | | | |
* | |__ _____ _____ _| |_ ___ _____ ____ __| | _____ _ _ _| |_ _____ ____ __| |_____ __| |
* | _ \| ___ (____ (_ _)/___) (____ | _ \ / _ | | ___ ( \ / |_ _) ___ | _ \ / _ | ___ |/ _ |
* | |_) ) ____/ ___ | | |_|___ | / ___ | | | ( (_| | | ____|) X ( | |_| ____| | | ( (_| | ____( (_| |
* |____/|_____)_____| \__|___/ \_____|_| |_|\____| |_____|_/ \_) \__)_____)_| |_|\____|_____)\____|
*
*/
.expanded_scenes_act_header {
display: flex;
justify-content: space-between;
align-items: center;
border-left: 6px solid #0056b3; /* Higher contrast blue border */
background-color: #f0f7ff; /* Light blue background */
padding: 12px 16px;
border-radius: 4px 0 0 4px;
margin-bottom: 0;
cursor: pointer;
transition: background-color 0.2s ease;
}
.expanded_scenes_act_header:hover {
background-color: #e1f0ff; /* Slightly darker blue on hover */
}
.expanded_scenes_act_header h5 {
margin: 0;
color: #0056b3; /* Matching text color */
font-weight: 600;
font-size: 1.2em; /* Moderate font size for act titles */
}
.expanded-scene-card {
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
margin-bottom: 5px; /* Add spacing between scenes */
}
.expanded-scene-header {
background-color: #f8f9fa;
padding: 10px 15px;
cursor: pointer;
display: flex;
align-items: center;
font-weight: bold;
}
.expanded-scene-header:hover {
background-color: #e9ecef;
}
.scene-number {
margin-right: 10px;
}
.scene-name {
flex-grow: 1;
}
.expanded-scene-content {
padding: 15px;
border-top: 1px solid #ddd;
}
.expanded-scene-description {
background-color: #f8f9fa;
padding: 10px;
border-radius: 5px;
border-left: 4px solid #007bff;
font-style: italic;
}
.scene-ai-notes pre {
background-color: #f8f9fa;
padding: 10px;
border-radius: 5px;
border-left: 4px solid #28a745;
font-size: 0.9em;
white-space: pre-wrap;
}
/* Section headings for scene elements */
.section-heading {
font-size: 1.15em;
margin-bottom: 8px;
font-weight: 600;
}
/* Act container styling */
.act-expanded-container {
border: none;
border-radius: 5px;
overflow: visible;
margin-bottom: 20px;
}
.expanded-scenes-section {
padding: 16px;
background-color: transparent;
border: none;
}
/* Scene notes toggle styling */
.toggle-scene-notes {
display: flex;
align-items: center;
cursor: pointer;
margin-top: 15px;
}
.toggle-scene-notes .toggle-triangle {
display: inline-block;
margin-right: 5px;
}
.toggle-scene-notes span:not(.toggle-triangle) {
font-weight: 600;
font-size: 1.1em;
}
/***
* ______ ______ ___
* / _____) (______) / __) _
* ( (____ ____ _____ ____ _____ _ _ ____ _____ _| |__ _| |_ _____ ____
* \____ \ / ___) ___ | _ \| ___ | | | | / ___|____ (_ __|_ _) ___ |/ ___)
* _____) | (___| ____| | | | ____| | |__/ / | / ___ | | | | |_| ____| |
* (______/ \____)_____)_| |_|_____) |_____/|_| \_____| |_| \__)_____)_|
*
*/
/* Scene Drafter Tab Styles */
.scene-tabs-container {
margin-top: 20px;
font-family: Arial, sans-serif;
}
.act-section {
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
}
.section-header {
background-color: #f5f5f5;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.section-header h2 {
margin: 0;
color: #444;
font-size: 1.3em;
}
.toggle-section {
background: none;
border: none;
font-size: 1.2em;
color: #666;
cursor: pointer;
}
.section-content {
padding: 0;
transition: max-height 0.3s ease-out;
}
.section-content.collapsed {
max-height: 0;
overflow: hidden;
}
/* Tab Navigation */
.tab-container {
display: flex;
flex-direction: column;
}
.tab-container {
display: flex;
flex-direction: column;
}
.tab-nav {
display: flex;
position: relative;
background-color: transparent;
border-bottom: 1px solid #ddd; /* Light gray bottom border */
}
.scene-tab-button {
padding: 10px 20px;
border: 1px solid #ddd; /* Light gray border */
border-bottom: none; /* No bottom border */
border-radius: 4px 4px 0 0; /* Rounded top corners */
background-color: #f5f5f5; /* Light gray background for inactive tabs */
cursor: pointer;
font-weight: bold;
color: #666;
transition: all 0.2s ease;
font-size: 1.1rem;
margin-right: 2px; /* Small gap between tabs */
position: relative;
top: 1px; /* Align with bottom border */
min-height: 48px; /* ROYAL HEIGHT CONSISTENCY - ESSENTIAL! */
}
.scene-tab-button:hover {
background-color: #e9e9e9;
}
.scene-tab-button.active {
background-color: #fff; /* White background */
color: #3b82f6; /* Blue text color */
border-color: #3b82f6; /* Blue border color */
border-bottom: 1px solid white; /* Hide bottom border */
z-index: 2; /* Higher z-index for ANY active tab */
}
/* Tab Content */
.tab-content-container {
padding: 0; /* No padding since content will have padding */
background-color: #fff;
position: relative;
}
.scene-tab-content {
display: none;
}
.scene-tab-content.active,
.scene-tab-content[style*="display: block"] {
display: block;
border: 1px solid #3b82f6; /* 1px blue border around active content */
padding: 15px;
border-radius: 0 0 4px 4px; /* Rounded bottom corners */
background-color: #ffffff; /* White background */
}
/* Scene Lists */
.scene-list {
list-style-type: none;
padding: 0;
}
.scene-item {
padding: 15px;
border: 1px solid #e0e0e0;
border-radius: 5px;
margin-bottom: 10px;
background-color: #fff;
transition: all 0.2s ease;
}
.scene-item:hover {
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.scene-title {
font-weight: bold;
margin-bottom: 5px;
color: #333;
}
.scene-description {
color: #666;
margin-bottom: 10px;
line-height: 1.5;
}
.scene-actions {
display: flex;
gap: 10px;
}
.scene-action-button {
padding: 5px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
transition: background-color 0.2s;
}
.scene-action-button.generate {
background-color: #3b82f6; /* Changed from green #00bf7c to blue #3b82f6 */
color: white;
}
.scene-action-button.generate:hover {
background-color: #2563eb; /* Changed from green #00a66c to darker blue #2563eb */
}
.scene-action-button.edit {
background-color: #4a90e2;
color: white;
}
.scene-action-button.edit:hover {
background-color: #3a7dc8;
}
/* Scene Outline Specific Styles */
.scene-table {
margin-bottom: 0 !important;
border-collapse: separate !important;
}
.scene-header-row {
background-color: #99fcd990; /* Semi-transparent mint green */
}
.scene-id-cell {
font-weight: bold;
width: 120px;
}
.scene-name-cell {
font-weight: bold;
}
.scene-actions-cell {
width: 120px;
text-align: center;
}
.scene-pov-row {
background-color: #f8f8f8;
}
.scene-pov-cell {
font-style: italic;
padding: 10px 15px;
}
.scene-summary-cell {
padding: 15px !important;
line-height: 1.5;
}
.scene-ai-notes-row {
background-color: #f0f8ff; /* Light blue background */
}
.scene-ai-notes-cell {
padding: 15px !important;
border-top: 1px dashed #ccc;
font-size: 0.95em;
}
.scene-user-notes-row {
background-color: #fff8e8; /* Light yellow background */
}
.scene-user-notes-cell {
padding: 15px !important;
border-top: 1px dashed #ccc;
font-size: 0.95em;
}
.scene-actions-header {
display: flex;
justify-content: flex-end;
margin-bottom: 15px;
}
.select-all-container {
background-color: #f8f8f8;
padding: 10px 15px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.scene-spacer {
height: 20px;
}
.no-scenes-message {
padding: 30px;
background-color: #f8f8f8;
border-radius: 5px;
text-align: center;
color: #666;
}
/* Add a subtle hover effect to scene tables */
.scene-table:hover {
box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
}
/* END OF Scene Drafter Tab Styles */
/* πΏ SCENE BEATS CHUNK 3 - NUCLEAR OVERRIDE πΏ */
.scene-tab-button.active {
border-bottom: 1px solid white !important; /* FORCE WHITE BORDER ON ALL ACTIVE TABS */
z-index: 2 !important;
position: relative !important;
}
.scene-tab-button[data-tab^="scene_beats_version_"].active {
color: #10b981 !important;
border-color: #10b981 !important;
border-bottom: 1px solid white !important; /* NUCLEAR OVERRIDE */
}
/* Scene Beats Tabs - INACTIVE STATE (Gray with bottom border) */
.scene-tab-button[data-tab="scene_beats_tab"]:not(.active),
.scene-tab-button[data-tab^="scene_beats_version_"]:not(.active) {
color: #666 !important; /* Gray text when inactive */
border-color: #ddd !important; /* Gray border when inactive */
background-color: #f5f5f5 !important; /* Gray background when inactive */
}
/* Scene Beats Tabs - HOVER STATE */
.scene-tab-button[data-tab="scene_beats_tab"]:hover,
.scene-tab-button[data-tab^="scene_beats_version_"]:hover {
background-color: #e9e9e9 !important;
}
/* CONTENT AREA - Green border when Scene Beats tab is active */
.scene-tab-content[id="scene_beats_tab"].active,
.scene-tab-content[id^="scene_beats_version_"].active {
border: 1px solid #10b981 !important; /* GREEN content border */
}
/* π· CROSS-TAB INTERACTION RULES (Handled by JavaScript) π· */
/* JavaScript will manage: */
/* - Scene Beats tabs gray when Scene Versions active */
/* - Content area border color coordination */
/* Green Act Header styling within Scene Beats tab only */
#scene_beats_tab .expanded_scenes_act_header {
border-left: 6px solid #047857; /* Dark green left border instead of blue */
background-color: #d1fae5; /* Light green background instead of blue */
}
#scene_beats_tab .expanded_scenes_act_header h5 {
color: #047857; /* Dark green text instead of blue */
}
/* Forest Green Scene Beats Container within Scene Beats tab only */
#scene_beats_tab .scene-beats-container {
background: linear-gradient(to bottom,
#064e3b 0%, /* Dark emerald at top */
#064e3b 50px, /* Stay dark for first 50px only */
#16a085 125px, /* Complete transition by 125px (50px + 75px) */
#16a085 100%); /* Remain light emerald for all remaining content */
}
#scene_beats_tab .scene-beats-header {
border-bottom: none; /* Remove the horizontal line */
}
#scene_beats_tab .scene-beats-title {
color: #ffffff; /* White text for contrast against forest green */
}
#scene_beats_tab .beat-count {
background: #ffffff; /* White background for beat count */
color: #047857; /* Dark green text */
}
/* Scene Beats Edit Icon - Scale hover instead of pink */
#scene_beats_tab .scene_beats_edit-icon {
transition: transform 0.5s ease; /* 0.5 second transition */
}
#scene_beats_tab .scene_beats_edit-icon:hover {
content: url('/static/images/edit_icon.png'); /* Keep original icon, no pink */
transform: scale(1.25); /* Scale up by 25% */
}
/* POV character styling fix - not bold */
.scene-pov {
font-weight: normal;
}
/* π° ROYAL THREE-STATE SCENE BEAT SYSTEM */
/* Base scene header states */
.scene-header--completed {
/* Full character colors applied via JavaScript */
}
.scene-header--unpopulated {
opacity: 0.5;
color: #999;
}
.scene-header--in-progress {
/* Full character colors with animations applied via JavaScript */
position: relative;
}
/* Three-column scene header layout */
.scene-header-left {
display: flex;
align-items: center;
flex: 1;
gap: 10px;
}
.scene-header-center {
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
min-width: 60px;
}
.scene-header-right {
display: flex;
align-items: center;
flex: 1;
justify-content: flex-end;
gap: 10px;
}
/* Brain Spinner for In-Progress Scene Headers */
.scene-header--in-progress .royal-brain-spinner {
width: 48px;
height: 48px;
background: url('/static/images/brain.png') no-repeat center center;
background-size: contain;
display: inline-block;
vertical-align: middle;
animation:
spinRolling 3s linear infinite,
fadeOnlyRolling 1.5s ease-in-out infinite,
scaleOnlyRolling 1.5s ease-in-out infinite;
}
/* Brain Spinner for small progress buttons */
.button-brain-spinner-progress {
width: 35px;
height: 35px;
background: url('/static/images/brain.png') no-repeat center center;
background-size: contain;
display: inline-block;
vertical-align: middle;
animation:
spinRolling 3s linear infinite,
fadeOnlyRolling 1.5s ease-in-out infinite,
scaleOnlyRolling 1.5s ease-in-out infinite;
}
/* π― BEAT FILTER SYSTEM */
.beat-filter-dropdown {
position: relative;
display: inline-block;
}
.beat-filter-btn {
/* background: #fffdf0; */
/* border: 1px solid #e6d84a; */
/* color: #4a4a4a; */
font-size: 14px;
font-weight: 500;
cursor: pointer;
padding: 6px 12px;
margin: 0 5px;
border-radius: 6px;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.beat-filter-btn:hover {
/* background-color: #fff8dc; */
/* color: #2c2c2c; */
/* border-color: #dac420; */
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.beat-filter-btn.active {
/* background-color: #e6d84a; */
/* color: #2c2c2c; */
/* border-color: #dac420; */
font-weight: 600;
}
.beat-filter-menu {
position: absolute;
top: 100%;
right: 0;
/* background: #fffdf0; */
/* border: 2px solid #e6d84a; */
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
min-width: 260px;
z-index: 1000;
padding: 16px;
}
.beat-filter-menu label {
display: block;
padding: 12px 16px;
cursor: pointer;
font-size: 15px;
font-weight: 500;
white-space: nowrap;
border-radius: 6px;
margin-bottom: 4px;
transition: all 0.2s ease;
/* color: #4a4a4a; */
}
.beat-filter-menu label:hover {
background-color: var(--hover-bg-color, #fff8dc);
color: var(--hover-text-color, #2c2c2c);
transform: translateX(2px);
}
.beat-filter-menu input[type="checkbox"] {
margin-right: 12px;
width: 18px;
height: 18px;
/* accent-color: #e6d84a; */
cursor: pointer;
}
/* Special styling for checked items */
.beat-filter-menu label:has(input:checked) {
/* background-color: #fff8dc; */
/* color: #2c2c2c; */
font-weight: 600;
/* border-left: 4px solid #e6d84a; */
padding-left: 12px;
}
/* Special styling for filtered content */
.beat-filtered .beat-content {
/* Border will use character color dynamically (lightened by 0.55) */
/* Fallback removed - no blue! JavaScript will set the proper character color */
font-size: 16px !important;
line-height: 1.6 !important;
background-color: #f8f9fa !important;
border-radius: 4px !important;
padding: 15px 20px 15px 20px !important; /* Max 15px top/bottom, 20px sides for filtered content */
box-sizing: border-box !important;
}
/* Extra padding for normal (non-filtered) beat content */
.beat-content-normal {
padding: 30px 65px 30px 65px !important; /* 30px top/bottom, 65px sides when filters are OFF */
box-sizing: border-box !important;
}
/* Only brain spinner - no other animations */
/* ========================================================================
AI PREFERENCES BEAUTIFICATION SYSTEM
======================================================================== */
/* Royal AI Preferences Container */
.ai-preferences-container {
background-color: var(--ai-selector-background);
border: 1px solid var(--table-border-color);
border-radius: 15px; /* OVERFLOW CONTROL CORNER - SEARCH COMMENT FOR SISTER CORNERS */
overflow: visible;
margin-bottom: 20px;
transition: all 0.3s ease;
}
/* Royal Header - Collapsible Toggle */
.ai-preferences-header {
background: var(--ai-selector-background);
border-bottom: 2px solid #386ddc;
padding: 12px 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
user-select: none;
border-radius: 15px 15px 0 0; /* OVERFLOW CONTROL CORNER - SEARCH COMMENT FOR SISTER CORNERS */
}
/* π₯π₯π₯ When content is collapsed, header becomes bottom element - round all corners */
.ai-preferences-container:has(.ai-preferences-content.collapsed) .ai-preferences-header {
border-radius: 15px; /* All four corners to match container */
}
.ai-preferences-header:hover {
background: var(--ai-selector-hover);
box-shadow: inset 0 0 10px rgba(56, 109, 220, 0.15);
}
/* π₯π₯π₯ Left section wrapper for AI Selector text + toggle icon */
.ai-header-left-section {
display: flex;
align-items: center;
gap: 8px;
}
.ai-preferences-header h3 {
margin: 0;
color: #09082b;
font-size: 16px;
font-weight: 600;
}
/* π₯π₯π₯ Dynamic page title in AI header - positioned center, prominent size */
.ai-preferences-header h2.ai-header-page-title {
margin: 0;
color: #09082b;
font-size: 24px;
font-weight: 100;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.ai-preferences-toggle-icon {
font-size: 18px;
color: #386ddc;
transition: transform 0.3s ease;
}
.ai-preferences-toggle-icon.expanded {
transform: rotate(180deg);
}
/* Royal Content Area */
.ai-preferences-content {
padding: 20px;
background-color: var(--ai-selector-background);
transition: all 0.3s ease;
overflow: hidden;
border-radius: 0 0 15px 15px; /* OVERFLOW CONTROL CORNER - SEARCH COMMENT FOR SISTER CORNERS */
}
.ai-preferences-content.collapsed {
max-height: 0;
padding: 0 20px;
opacity: 0;
pointer-events: none;
overflow: hidden;
}
.ai-preferences-content.expanded {
max-height: 1000px;
opacity: 1;
pointer-events: auto;
overflow: visible;
}
/***
* _ _ _ _ _
* (_) | | | | | | | |
* _____ _ ____ ___ __| |_____| | __| | ____ ___ ____ __| | ___ _ _ _ ____
* (____ | | | \ / _ \ / _ | ___ | | / _ |/ ___) _ \| _ \ / _ |/ _ \| | | | _ \
* / ___ | |_______| | | | |_| ( (_| | ____| | ______( (_| | | | |_| | |_| ( (_| | |_| | | | | | | |
* \_____|_(_______)_|_|_|\___/ \____|_____)\_|_______)____|_| \___/| __/ \____|\___/ \___/|_| |_|
* |_|
*/
/* Beautiful AI Model Dropdown and three-act-dropdown combined*/
.ai-model-dropdown,
.three-act-dropdown
{
min-width: 250px !important;
border: 1px solid #007a87 !important;
background: linear-gradient(135deg, #f7ffff, #ffffff) !important;
color: #09082b !important;
border-radius: 8px !important;
padding: 10px 15px !important;
font-size: 14px !important;
font-weight: 500 !important;
box-shadow: inset 0 0 8px rgba(0, 122, 135, 0.12) !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
}
/* Wide dropdown for AI models with token information */
.ai-model-dropdown.ai-model-dropdown-wide {
/* Closed state: normal width like regular dropdown */
min-width: 250px !important;
width: auto !important;
font-family: 'Courier New', monospace !important;
font-size: 24px; /* π₯π₯π₯ Removed !important to allow inline override */
line-height: 1.4 !important;
padding: 15px 20px; /* π₯π₯π₯ Removed !important to allow inline override */
}
/* π₯π₯π₯ Specific ID override for maximum control */
#ai-model-select-main {
font-size: 18px !important;
padding: 10px 15px !important;
}
/* When dropdown is opened, expand to accommodate token info */
.ai-model-dropdown.ai-model-dropdown-wide option {
font-family: 'Courier New', monospace !important;
font-size: 24px !important;
padding: 12px 16px !important;
color: #999 !important;
line-height: 1.6 !important;
}
/* Ensure dropdown list expands properly when opened */
.ai-model-dropdown-wide:focus,
.ai-model-dropdown-wide[size],
.ai-model-dropdown-wide[multiple] {
min-width: 500px !important;
max-width: 650px !important;
width: auto !important;
}
.ai-model-dropdown:focus,
.three-act-dropdown:focus
{
outline: none !important;
border-color: #386ddc !important;
box-shadow: 0 0 0 3px rgba(56, 109, 220, 0.2), inset 0 0 8px rgba(56, 109, 220, 0.15) !important;
background: linear-gradient(135deg, #dcecfa, #ffffff) !important;
}
.ai-model-dropdown:hover,
.three-act-dropdown:hover
{
border-color: #386ddc !important;
background: linear-gradient(135deg, #dcecfa, #f7ffff) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 8px rgba(0, 122, 135, 0.2), inset 0 0 8px rgba(56, 109, 220, 0.15) !important;
}
/* Special Dropdown for Grok Content Moderation */
.grok-content-dropdown {
min-width: 200px !important;
border: 1px solid #ff9933 !important;
background: linear-gradient(135deg, #ffecd9, #ffffff) !important;
color: #663c00 !important;
border-radius: 8px !important;
padding: 10px 15px !important;
font-size: 14px !important;
font-weight: 500 !important;
box-shadow: inset 0 0 8px rgba(255, 153, 51, 0.12) !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
}
.grok-content-dropdown:focus {
outline: none !important;
border-color: #ff7f00 !important;
box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.2), inset 0 0 8px rgba(255, 153, 51, 0.15) !important;
background: linear-gradient(135deg, #ffecd9, #ffffff) !important;
}
.grok-content-dropdown:hover {
border-color: #ff7f00 !important;
background: linear-gradient(135deg, #ffecd9, #fff8dc) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 8px rgba(255, 153, 51, 0.2), inset 0 0 8px rgba(255, 153, 51, 0.15) !important;
}
/* Royal Grid Layout for Preferences */
.ai-preferences-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: start;
}
/* Dynamic single column layout when second column is empty */
.ai-preferences-grid.single-column {
grid-template-columns: 1fr;
}
.ai-preferences-grid.single-column .ai-preferences-column:nth-child(2) {
display: none;
}
.ai-preferences-column {
background-color: var(--ai-inner-box-background);
padding: 15px;
border-radius: 6px;
border: 1px solid var(--ai-inner-box-border);
overflow: visible;
}
.ai-preferences-column h4 {
margin: 0 0 15px 0;
color: #451d0f;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Special styling for warnings */
.ai-preferences-warning {
background: linear-gradient(135deg, #fff3cd, #ffeaa7);
border: 1px solid #E65100;
border-radius: 6px;
padding: 12px;
margin-bottom: 15px;
color: #E65100;
font-weight: 600;
font-size: 13px;
}
/* ========================================================================
π° ROYAL CUSTOM DROPDOWN SYSTEM - Complete Visual Control
======================================================================== */
/* Royal Dropdown Container */
.royal-dropdown {
position: relative;
display: inline-block;
min-width: 250px;
user-select: none;
margin: 5px 0;
}
/* Royal Dropdown Selected Display */
.royal-dropdown-selected {
border: 1px solid #007a87;
background: linear-gradient(135deg, #f7ffff, #ffffff);
color: #09082b;
border-radius: 8px;
padding: 5px 15px;
font-size: 14px;
font-weight: 500;
box-shadow: inset 0 0 8px rgba(0, 122, 135, 0.12);
transition: all 0.3s ease;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.royal-dropdown-selected:hover {
border-color: #386ddc;
background: linear-gradient(135deg, #dcecfa, #f7ffff);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 122, 135, 0.2), inset 0 0 8px rgba(56, 109, 220, 0.15);
}
.royal-dropdown-selected.opened {
border-color: #386ddc;
background: linear-gradient(135deg, #dcecfa, #ffffff);
box-shadow: 0 0 0 3px rgba(56, 109, 220, 0.2), inset 0 0 8px rgba(56, 109, 220, 0.15);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* Royal Dropdown Arrow */
.royal-dropdown-arrow {
font-size: 16px;
color: #386ddc;
transition: transform 0.3s ease;
margin-left: 10px;
}
.royal-dropdown-selected.opened .royal-dropdown-arrow {
transform: rotate(180deg);
}
/* Royal Dropdown Options Container */
.royal-dropdown-options {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: linear-gradient(135deg, #ffffff, #f0f8ff);
border: 1px solid #386ddc;
border-top: none;
border-radius: 0 0 8px 8px;
box-shadow: 0 4px 12px rgba(56, 109, 220, 0.25);
z-index: 9999;
/* SMART SIZING: Auto-size to content, but limit to 90% of viewport if too big */
max-height: 90vh;
overflow-y: auto;
display: none;
}
.royal-dropdown-options.show {
display: block;
animation: royalDropdownSlide 0.2s ease-out;
}
@keyframes royalDropdownSlide {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Royal Dropdown Individual Options */
.royal-dropdown-option {
padding: 12px 15px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 14px;
font-weight: 500;
color: #09082b;
border-bottom: 1px solid rgba(56, 109, 220, 0.1);
/* VISUAL DIFFERENTIATOR: Slightly different background to show we're "inside" */
background: linear-gradient(135deg, #ffffff, #f8fbff);
}
.royal-dropdown-option:last-child {
border-bottom: none;
border-radius: 0 0 8px 8px;
}
.royal-dropdown-option:hover {
/* VISUAL DIFFERENTIATOR: More intense inside colors */
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
color: #1565c0;
transform: translateX(3px);
border-left: 3px solid #386ddc;
padding-left: 12px;
}
.royal-dropdown-option.selected {
background: linear-gradient(135deg, #dcecfa, #c5e1f7);
color: #1565c0;
font-weight: 600;
border-left: 3px solid #386ddc;
padding-left: 12px;
}
/* Special Grok Dropdown Styling */
.royal-dropdown.grok-style .royal-dropdown-selected {
border-color: #ff9933;
background: linear-gradient(135deg, #ffecd9, #ffffff);
color: #663c00;
box-shadow: inset 0 0 8px rgba(255, 153, 51, 0.12);
}
.royal-dropdown.grok-style .royal-dropdown-selected:hover {
border-color: #ff7f00;
background: linear-gradient(135deg, #ffecd9, #fff8dc);
box-shadow: 0 4px 8px rgba(255, 153, 51, 0.2), inset 0 0 8px rgba(255, 153, 51, 0.15);
}
.royal-dropdown.grok-style .royal-dropdown-selected.opened {
border-color: #ff7f00;
box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.2), inset 0 0 8px rgba(255, 153, 51, 0.15);
}
.royal-dropdown.grok-style .royal-dropdown-options {
background: linear-gradient(135deg, #ffffff, #fff8f0);
border-color: #ff7f00;
box-shadow: 0 4px 12px rgba(255, 153, 51, 0.25);
z-index: 9999;
}
.royal-dropdown.grok-style .royal-dropdown-option {
color: #663c00;
background: linear-gradient(135deg, #ffffff, #fffaf5);
border-bottom-color: rgba(255, 153, 51, 0.1);
}
.royal-dropdown.grok-style .royal-dropdown-option:hover {
background: linear-gradient(135deg, #fff3e0, #ffe0b2);
color: #e65100;
border-left-color: #ff9933;
}
.royal-dropdown.grok-style .royal-dropdown-option.selected {
background: linear-gradient(135deg, #ffecd9, #ffcc80);
color: #e65100;
border-left-color: #ff9933;
}
/* Responsive design */
@media (max-width: 768px) {
.ai-preferences-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.ai-model-dropdown,
.grok-content-dropdown,
.royal-dropdown {
min-width: 100% !important;
}
.ai-preferences-header {
padding: 10px 15px;
}
.ai-preferences-content {
padding: 15px;
}
}
/* =============================================================================== */
/* π‘οΈ ROYAL AJAX PREFERENCE FEEDBACK SYSTEM - VISUAL DRAGON SLAYING FEEDBACK */
/* =============================================================================== */
/* Loading state for preference updates */
.preference-loading {
position: relative;
transition: all 0.3s ease;
}
.preference-loading::after {
content: '';
position: absolute;
top: 50%;
right: 10px;
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border-top: 2px solid #007bff;
border-radius: 50%;
animation: royal-spinner 1s linear infinite;
transform: translateY(-50%);
z-index: 10;
}
/* Success state for preference updates */
.preference-success {
background-color: #d4edda !important;
border-color: #c3e6cb !important;
color: #155724 !important;
transition: all 0.3s ease;
}
/* Error state for preference updates */
.preference-error {
background-color: #f8d7da !important;
border-color: #f5c6cb !important;
color: #721c24 !important;
transition: all 0.3s ease;
}
.preference-error::after {
content: 'β ';
position: absolute;
top: 50%;
right: 10px;
color: #dc3545;
font-weight: bold;
font-size: 16px;
transform: translateY(-50%);
z-index: 10;
}
/* Royal spinner animation */
@keyframes royal-spinner {
0% { transform: translateY(-50%) rotate(0deg); }
100% { transform: translateY(-50%) rotate(360deg); }
}
/* Ensure form elements have relative positioning for feedback */
form[action*="prefs"] .form-group,
form[action*="grok_modes"] .form-group,
form[action*="prefs"] > div,
form[action*="grok_modes"] > div {
position: relative;
}
/* Style improvements for preference forms */
form[action*="prefs"] select,
form[action*="grok_modes"] select {
transition: opacity 0.2s ease, border-color 0.2s ease;
}
form[action*="prefs"] input[type="checkbox"],
form[action*="grok_modes"] input[type="checkbox"] {
transition: opacity 0.2s ease;
}
/* Flash dragon elimination celebration */
.no-more-flash-dragons {
animation: celebrate 0.5s ease-in-out;
}
@keyframes celebrate {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/***
* _ _ _
* | | _ | | | | _
* ___ ____ _____ ____ _____ | |__ _____ _____ _| |_ __| |_____| | _____ _| |_ _____
* /___)/ ___) ___ | _ \| ___ | | _ \| ___ (____ (_ _) / _ | ___ | || ___ (_ _) ___ |
* |___ ( (___| ____| | | | ____| | |_) ) ____/ ___ | | |_ ( (_| | ____| || ____| | |_| ____|
* (___/ \____)_____)_| |_|_____) |____/|_____)_____| \__) \____|_____)\_)_____) \__)_____)
*
*/
/* ==============================================
SCENE BEATS DELETE BUTTON STYLING
============================================== */
.scene-beats-buttons-group {
display: flex;
align-items: center;
gap: 10px;
}
.scene-beats-delete-btn {
background: transparent;
border: none;
padding: 0;
margin-left: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(-5px);
}
.eraser-icon {
width: 25px;
height: 25px;
display: block;
transition: transform 0.2s ease;
}
.scene-beats-delete-btn:hover .eraser-icon {
transform: scale(1.25);
}
/* ==============================================
KNOWLEDGE STATE DELETE BUTTON STYLING
============================================== */
.knowledge-buttons-group {
display: flex;
align-items: center;
gap: 25px;
margin-right: 10px
}
.knowledge-delete-btn {
background: transparent;
border: none;
padding: 0;
margin-left: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
/* transform: translateY(-5px);*/
background-image: url('/static/images/eraser_black.png');
opacity: 1;
width: 20px;
height: 20px;
display: block;
transition: transform 0.2s ease;
}
.knowledge-delete-btn:hover {
transform: scale(1.25);
}
/* ==============================================
PUZZLE EASTER EGG ICON
============================================== */
.puzzle_icon {
width: 15px;
height: 15px;
cursor: pointer;
opacity: 0.7;
transition: transform 0.2s ease;
}
.puzzle_icon:hover {
transform: scale(1.1);
}
/* π₯π₯π₯ Grid puzzle overlay specific styles */
.grid_puzzle_overlay {
width: 24px;
height: 24px;
opacity: 0.6;
}
.grid_puzzle_overlay:hover {
opacity: 1;
transform: scale(1.2);
}
/* π₯π₯π₯ Carousel puzzle overlay */
.carousel_puzzle_overlay {
position: absolute;
bottom: 15px;
left: 5px;
width: 15px;
height: 15px;
z-index: 500;
cursor: pointer;
}
/* π₯π₯π₯ Grid puzzle overlay specific styles */
.grid_puzzle_overlay {
width: 24px;
height: 24px;
opacity: 0.6;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.grid_puzzle_overlay:hover {
opacity: 1;
transform: scale(1.2);
}
/* Ensure puzzle icon stays visible on hover */
.image-container:hover .grid_puzzle_overlay {
opacity: 0.8;
}
/***
* _ _
* | | (_) _
* _____ ____ __| | _ ____ ____ ___ ____ _| |_
* | ___ | _ \ / _ | | | \| _ \ / _ \ / ___|_ _)
* | ____| | | ( (_| | | | | | | |_| | |_| | | | |_
* |_____)_| |_|\____| |_|_|_|_| __/ \___/|_| \__)
* |_|
*/
/***
* KNOWLEDGE DOCS MODAL STYLES
* For Character Knowledge State Generation Interface
*/
/* Modal Overlay */
.knowledge-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.85);
z-index: 10000;
}
/* Modal Box */
.knowledge-modal-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 30px;
border-radius: 8px;
max-width: 800px;
width: 90%;
max-height: 80%;
overflow-y: auto;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
/* Expanded modals for knowledge state generation */
#knowledgeModalContent,
#printModalContent {
height: calc(100vh - 50px) !important;
max-height: 950px !important;
margin: 25px auto !important;
}
/* Modal overlay base styles */
.modal-overlay-base {
display: none;
position: fixed;
z-index: 9000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.85);
}
/* Modal content container */
.modal-content-container {
background-color: #fefefe;
border: 1px solid #888;
border-radius: 8px;
position: relative;
overflow: hidden;
}
/* Custom scroller container */
.custom-scroller-container-base {
position: relative;
height: 100%;
}
/* Modal content scroll area */
.modal-content-scroll {
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
padding: 20px;
padding-right: 40px;
padding-bottom: 5px;
box-sizing: border-box;
}
/* Position close button higher */
.knowledge-modal-box .container_close_button {
position: absolute;
top: 10px;
right: 10px;
}
/* Modal Header */
.knowledge-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
border-bottom: 2px solid #386ddc;
padding-bottom: 15px;
}
.knowledge-modal-header h3 {
margin: 0;
color: #333;
}
/* Loading State */
.knowledge-loading {
text-align: center;
padding: 50px 0;
}
.knowledge-spinner {
display: inline-block;
width: 50px;
height: 50px;
border: 4px solid #f3f3f3;
border-top: 4px solid #386ddc;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.knowledge-loading-text {
margin-top: 20px;
color: #666;
}
/* Info Box */
.knowledge-info-box {
background: #dcecfa;
border-left: 4px solid #386ddc;
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
}
.knowledge-info-box h6 {
margin: 0 0 10px 0;
color: #386ddc;
font-size: 20px;
font-weight: bold;
}
.knowledge-info-box p {
margin: 0;
color: #333;
}
/* Stats Container */
.knowledge-stats-container {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
margin-bottom: 0;
}
.knowledge-stats-row {
display: flex;
justify-content: space-around;
text-align: center;
}
.knowledge-stat-item {
flex: 1;
}
.knowledge-stat-number {
margin: 0;
font-size: 24px;
font-weight: bold;
}
.knowledge-stat-label {
color: #666;
font-size: 14px;
}
/* Character List */
.knowledge-character-list {
max-height: 400px;
overflow-y: scroll; /* Always show scrollbar */
margin-bottom: 20px;
padding-right: 5px; /* Space between content and scrollbar */
/* Firefox scrollbar styling */
scrollbar-width: thick; /* Make scrollbar thicker in Firefox */
scrollbar-color: #6fa3d8 #f0f4f8; /* thumb and track colors */
}
/* Custom Scrollbar Styling for Character List - Webkit browsers */
.knowledge-character-list::-webkit-scrollbar {
width: 20px; /* Wider than default for visibility */
}
.knowledge-character-list::-webkit-scrollbar-track {
background: #f0f4f8; /* Light gray-blue background */
border-radius: 10px;
border: 1px solid #d1dde6; /* Subtle border for definition */
}
.knowledge-character-list::-webkit-scrollbar-thumb {
background: #6fa3d8; /* Light blue thumb */
border-radius: 10px;
border: 2px solid #f0f4f8; /* Creates padding effect */
}
.knowledge-character-list::-webkit-scrollbar-thumb:hover {
background: #5890c7; /* Slightly darker on hover */
}
.knowledge-character-item {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 10px;
padding: 10px;
}
.knowledge-character-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.knowledge-character-info h6 {
margin: 0 0 5px 0;
}
.knowledge-character-details {
color: #666;
font-size: 14px;
}
/* Profile Status Badges */
.knowledge-badge {
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
}
.knowledge-badge--success {
background: #00bf7c;
color: white;
}
.knowledge-badge--danger {
background: #ff6b6b;
color: white;
}
/* Section Divider */
.knowledge-divider {
border: 0;
border-top: 1px solid #ddd;
margin: 20px 0;
}
.knowledge-section-title {
color: #ff6b6b;
margin-bottom: 10px;
}
.knowledge-section-header {
color: #e67e00;
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
}
/* Action Buttons */
.knowledge-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
margin-bottom: 20px;
}
/* Progress Section */
.knowledge-progress-container {
padding: 20px 0;
}
.knowledge-progress-bar {
background: #e9ecef;
border-radius: 4px;
height: 30px;
margin-bottom: 15px;
overflow: hidden;
}
.knowledge-progress-fill {
background: #386ddc;
height: 100%;
transition: width 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.knowledge-progress-details {
color: #666;
text-align: center;
}
/* Knowledge Modal Custom Button Styles */
.knowledge-btn {
display: inline-block;
width: auto; /* Auto width to fit text */
padding: 5px 15px; /* More horizontal padding for better appearance */
font-size: 14px;
line-height: 1.2;
background-color: #f3f3f3;
color: #333;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
box-sizing: border-box;
outline: none;
white-space: nowrap; /* Prevent text wrapping */
}
.knowledge-btn:hover {
background-color: #e8e8e8;
border-color: #bbb;
}
.knowledge-btn:active {
background-color: #ddd;
border: 1px solid #999;
outline: none;
}
.knowledge-btn:focus {
border: 1px solid #666;
outline: none;
}
/* Knowledge Button Blue Variant */
.knowledge-btn--blue {
background-color: #c8e4fc !important; /* Brightened from #dcecfa */
border-color: #4a7de6 !important; /* Slightly brighter border */
color: #09082b !important;
position: relative;
overflow: hidden;
}
.knowledge-btn--blue:hover {
background-color: #8fb1f8 !important; /* Brightened from #9ab9f9 */
border-color: #2654b3 !important;
}
/* Shimmer effect for blue button */
.knowledge-btn--blue::after {
content: '';
position: absolute;
top: -100px;
left: -50px;
height: 300px;
width: 100px; /* Wider for more visibility */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 20%,
rgba(255, 255, 255, 0.8) 50%, /* Much brighter center */
rgba(255, 255, 255, 0) 80%,
rgba(255, 255, 255, 0) 100%
);
transform: translateX(-100%) rotate(135deg);
opacity: 0;
}
/* Class to trigger shimmer */
.knowledge-btn--blue.shimmer::after {
animation: knowledge-shimmer 1.6s ease-out forwards;
}
/* Simple shimmer animation */
@keyframes knowledge-shimmer {
0% {
transform: translateX(-100%) rotate(135deg);
opacity: 0.7; /* Much more visible */
}
100% {
transform: translateX(400%) rotate(135deg);
opacity: 0.7;
}
}
/* Knowledge Button Orange Variant */
.knowledge-btn--orange {
background-color: #ffecd9 !important;
border-color: #ff9933 !important;
color: #663c00 !important;
}
.knowledge-btn--orange:hover {
background-color: #ffd6a4 !important;
border-color: #e68a00 !important;
}
/* Knowledge State Required Button - Eye-catching green gradient */
.knowledge-state-btn,
.scene_gen_button {
background: linear-gradient(135deg, #23f04c81, #8afffdae);
color: #000000;
border: 1px solid #00bf7c;
border-radius: 8px;
font-size: 16px;
padding: 10px 20px;
cursor: pointer;
line-height: 1.4;
white-space: normal;
min-width: 250px;
width: auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
height: 42px;
text-align: center;
}
.knowledge-state-btn:hover,
.scene_gen_button:hover {
background: linear-gradient(135deg, #1fcc3f, #7ce6e4);
border-color: #00a366;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
}
/* Purple variant for Knowledge States button - ethereally light */
.knowledge-state-btn--purple {
background: linear-gradient(135deg, #c99eff, #e6d0ff);
border: 1px solid #b88ce6;
}
.knowledge-state-btn--purple:hover {
background: linear-gradient(135deg, #b88ce6, #dcc0ff);
border-color: #a77dd9;
}
/* Character Card Styles */
.knowledge-character-card {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 10px;
padding: 15px;
display: flex;
align-items: flex-start;
gap: 15px;
}
/* Character Profile Image */
.knowledge-character-image {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
object-position: center top; /* Focus on the top portion of the image */
border: 3px solid #ddd;
flex-shrink: 0;
}
.knowledge-character-image-placeholder {
width: 100px;
height: 100px;
border-radius: 50%;
background: #e0e0e0;
border: 3px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 36px;
color: #999;
font-weight: bold;
}
.knowledge-character-content {
flex: 1;
min-width: 0;
}
.knowledge-character-name {
font-size: 20px !important;
font-weight: bold;
margin: 0 0 8px 0;
}
.knowledge-character-stats {
font-size: 18px !important; /* 50% larger than ~12px default */
color: #666;
line-height: 1.4;
}
.knowledge-profile-badge {
padding: 4px 12px;
border-radius: 4px;
font-size: 15px !important; /* Halfway between 18px and 12px */
white-space: nowrap;
font-weight: 500;
}
.knowledge-profile-badge--exists {
background: #00bf7c;
color: white;
}
.knowledge-profile-badge--missing {
background: #ff6b6b;
color: white;
}
/***
* _ _ _
* _ | | || |
* ____ _ _ ___ _| |_ ___ ____ ___ ____ ____ ___ | | || |__ _____ ____
* / ___) | | |/___|_ _) _ \| \ /___)/ ___)/ ___) _ \| | || _ \(____ |/ ___)
* ( (___| |_| |___ | | || |_| | | | | |___ ( (___| | | |_| | | || |_) ) ___ | |
* \____)____/(___/ \__)___/|_|_|_| (___/ \____)_| \___/ \_)_)____/\_____|_|
*/
/* Hide native scrollbars for custom scrollbar areas */
.custom-scroller-content::-webkit-scrollbar {
display: none;
}
.custom-scroller-content {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Custom scrollbar styling */
.custom-scrollerbar-track {
position: absolute;
right: 2px;
top: 0;
width: 14px;
height: 100%;
background: #e8f0ff;
border-radius: 8px;
}
.custom-scrollerbar-thumb {
position: absolute;
width: 100%;
background: #386ddc;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
}
.custom-scrollerbar-thumb:hover {
background: #2c5bc4;
}
/***
* _ _ _ _ ______
* (_) | | | | | | / _____) _ _
* _____| |____ ___ _ _ _| | _____ __| | ____ _____ ( (____ _| |_ _____ _| |_ _____ ___
* | _ _) _ \ / _ \| | | | || ___ |/ _ |/ _ | ___ | \____ (_ _|____ (_ _) ___ |/___)
* | | \ \| | | | |_| | | | | || ____( (_| ( (_| | ____| _____) )| |_/ ___ | | |_| ____|___ |
* |_| \_)_| |_|\___/ \___/ \_)_____)\____|\___ |_____) (______/ \__)_____| \__)_____|___/
* (_____|
*/
/* Knowledge State Scene Containers */
.knowledge-scene-container {
margin-bottom: 15px;
padding: 10px;
background-color: #fefefe; /* Almost pure white */
border-radius: 5px;
border: 1px solid #e0e0e0;
}
.knowledge-scene-header {
cursor: pointer;
font-size: 18px;
font-weight: bold;
background-color: #f9f6f2; /* Slightly darker for visibility */
padding: 8px;
margin: -10px -10px 10px -10px;
border-radius: 5px 5px 0 0;
}
.knowledge-scene-header:hover {
background-color: #f5f0e8; /* Even darker on hover */
}
.knowledge-scene-toggle {
float: right;
font-size: 24px;
transition: transform 0.3s ease;
display: inline-block;
}
.knowledge-scene-details {
margin-top: 10px;
}
.knowledge-scene-section {
margin-bottom: 10px;
}
.knowledge-scene-label {
font-weight: bold;
margin-bottom: 5px;
}
/* Knowledge State Coverage UI Styles */
/* Emphasis Box Styles for Knowledge State Coverage */
.emphasis_box {
background-color: #f8f9fa;
padding: 10px 15px;
margin-bottom: 15px;
border-left-width: 4px;
border-left-style: solid;
border-radius: 4px;
}
.emphasis_box--info {
border-left-color: #386ddc;
background-color: #dcecfa;
}
.emphasis_box--warning {
border-left-color: #ff9933;
background-color: #ffecd9;
}
.emphasis_box--success {
border-left-color: #00bf7c;
background-color: #99fcd990;
}
.emphasis_box--highlight {
border-left-color: #8456a6;
background-color: #eadef3;
}
/* Character Coverage Card Styles */
.character_coverage_card {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
min-width: 280px;
max-width: 350px;
flex: 1;
}
.character_coverage_card h4 {
margin-top: 0;
color: #333;
border-bottom: 2px solid #8456a6;
padding-bottom: 5px;
}
.coverage_progress_bar {
width: 100%;
height: 20px;
background-color: #e0e0e0;
border-radius: 10px;
overflow: hidden;
margin: 10px 0;
}
.coverage_progress_fill {
height: 100%;
background-color: #00bf7c;
transition: width 0.3s ease;
}
.scene_list_section {
margin-top: 10px;
}
.scene_list_section h5 {
margin: 10px 0 5px 0;
color: #666;
font-size: 14px;
}
.scene_item {
padding: 3px 0;
font-size: 13px;
}
.scene_item--has_state {
color: #00bf7c;
}
.scene_item--missing_state {
color: #ff6b6b;
}
.coverage_icon {
display: inline-block;
width: 16px;
text-align: center;
margin-right: 5px;
}
/* Knowledge State Coverage Tooltip */
.coverage_tooltip {
position: absolute;
background: #fff;
border: 2px solid #8456a6;
border-radius: 8px;
padding: 20px;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
z-index: 1000;
min-width: 400px;
max-width: 600px;
display: none;
}
.coverage_tooltip h5 {
margin: 0 0 15px 0;
color: #8456a6;
border-bottom: 2px solid #8456a6;
padding-bottom: 5px;
}
.version_coverage_grid {
margin-bottom: 15px;
}
.version_coverage_row {
display: flex;
align-items: center;
padding: 5px 0;
border-bottom: 1px solid #eee;
}
.version_label {
font-weight: bold;
width: 120px;
color: #666;
}
.scene_coverage_list {
flex: 1;
font-size: 13px;
}
.missing_scenes_section {
background: #ffecd9;
border-left: 4px solid #ff9933;
padding: 10px;
margin: 15px 0;
border-radius: 4px;
}
.tooltip_actions {
display: flex;
gap: 10px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #ddd;
}
.tooltip_action_btn {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
transition: all 0.2s ease;
}
.tooltip_action_btn--generate {
background: linear-gradient(135deg, #23f04c81, #8afffdae);
color: #000;
border: 1px solid #00bf7c;
}
.tooltip_action_btn--generate:hover {
background: linear-gradient(135deg, #1fcc3f, #7ce6e4);
transform: translateY(-1px);
}
.tooltip_action_btn--merge {
background: linear-gradient(135deg, #c99eff, #e6d0ff);
color: #000;
border: 1px solid #b88ce6;
}
.tooltip_action_btn--merge:hover {
background: linear-gradient(135deg, #b88ce6, #dcc0ff);
transform: translateY(-1px);
}
.coverage_hover_target:hover {
color: #8456a6;
text-decoration-color: #8456a6 !important;
}
/* Modal Styles */
.modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #fefefe;
margin: 5% auto;
padding: 0;
border: 1px solid #888;
width: 90%;
max-width: 600px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.modal-header {
padding: 20px;
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
border-radius: 8px 8px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h2 {
margin: 0;
color: #333;
}
.modal-body {
padding: 20px;
max-height: 400px;
overflow-y: auto;
}
.modal-footer {
padding: 20px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
border-radius: 0 0 8px 8px;
text-align: right;
}
.modal .close {
color: #aaa;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.modal .close:hover,
.modal .close:focus {
color: #000;
text-decoration: none;
}
/* ================================================================== */
/* SCENE SELECTION MODAL - SUPREME Z-INDEX HIERARCHY */
/* ================================================================== */
/* π₯π₯π₯ Scene Selection Modal - Rules Above All Tooltips */
#sceneSelectionModal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 200003; /* Higher than Template Manager (200002) */
pointer-events: auto; /* Ensures overlay blocks all interactions */
}
/* π₯π₯π₯ Scene Generation Modal - Also needs supreme z-index */
#sceneGenerationModal {
z-index: 200001 !important; /* Match scene selection modal */
}
#sceneSelectionModal .modal-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 30px;
border-radius: 8px;
max-width: 800px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
z-index: 200001; /* Even higher for the content */
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
#sceneSelectionModal h3 {
margin-top: 0;
color: #333;
font-size: 24px;
border-bottom: 2px solid #386ddc;
padding-bottom: 10px;
}
#sceneListContainer {
margin-top: 20px;
}
#sceneSelectionModal .modal-actions {
margin-top: 20px;
text-align: center;
}
/* ================================================================== */
/* WHOLEDRAFT CHARACTER COVERAGE CARDS - NO MORE INLINE STYLES! */
/* ================================================================== */
/* Character Coverage Card Container */
.character_coverage_card {
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.character_coverage_card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
/* Character Name Header with Image */
.character_coverage_header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.character_coverage_title {
display: flex;
align-items: center;
gap: 15px;
}
.character_coverage_card h4 {
margin: 0;
font-size: 20px;
font-weight: 600;
}
/* Character Avatar */
.character_coverage_avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--character-color, #e0e0e0);
}
/* Character Avatar - Initials */
.character_coverage_avatar--initials {
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 20px;
text-transform: uppercase;
}
/* Non-canonical indicator */
.non_canonical_badge {
color: #f59e0b;
font-size: 0.8em;
font-weight: normal;
}
/* Coverage Progress Bar */
.coverage_progress_bar {
width: 100%;
height: 20px;
background-color: #f0f0f0;
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px;
position: relative;
}
.coverage_progress_fill {
height: 100%;
background: linear-gradient(90deg, var(--character-color, #6366f1) 0%, var(--character-color-light, #818cf8) 100%);
transition: width 0.5s ease;
position: relative;
overflow: hidden;
}
/* Animated shine effect */
.coverage_progress_fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
transform: translateX(-100%);
animation: shine 2s infinite;
}
@keyframes shine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Coverage Text */
.coverage_stats {
text-align: center;
margin-bottom: 20px;
font-size: 16px;
}
.coverage_stats strong {
color: var(--character-color, #6366f1);
font-size: 24px;
}
/* Scene Lists */
.scene_list_section {
margin-bottom: 20px;
}
.scene_list_section h5 {
color: #666;
font-size: 14px;
font-weight: 600;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.scene_item {
line-height: 1.8;
}
/* Individual Scene Items */
.scene_item--has_state {
display: inline-block;
padding: 4px 8px;
margin: 2px;
background-color: #f0fdf4;
border-radius: 4px;
font-size: 14px;
}
.scene_item--missing_state {
display: inline-block;
padding: 4px 8px;
margin: 2px;
background-color: #fef2f2;
border-radius: 4px;
font-size: 14px;
}
/* Coverage Icons */
.coverage_icon {
margin-right: 5px;
font-weight: bold;
}
.scene_item--has_state .coverage_icon {
color: #10b981;
}
.scene_item--missing_state .coverage_icon {
color: #ef4444;
}
/* Scene Links */
.scene_item a {
text-decoration: none;
color: var(--character-color, #6366f1);
font-weight: 600;
transition: all 0.2s ease;
}
.scene_item a:hover {
text-decoration: underline;
filter: brightness(0.8);
}
/* Action Buttons */
.character_action_button {
text-align: center;
margin-top: 20px;
}
.character_action_button .btn {
padding: 8px 16px;
border-radius: 6px;
border: none;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.character_action_button .btn-primary {
background-color: #6366f1;
color: white;
}
.character_action_button .btn-primary:hover {
background-color: #4f46e5;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.character_action_button .btn-warning {
background-color: #f59e0b;
color: white;
}
.character_action_button .btn-warning:hover {
background-color: #d97706;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
/* Character Color Accent Border */
.character_coverage_card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--character-color, #6366f1);
}
/* Scene List View (Alternative Layout) */
.scene_coverage_list {
background: white;
border-radius: 8px;
padding: 0;
overflow: hidden;
}
.scene_coverage_item {
padding: 15px 20px;
border-bottom: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.2s ease;
}
.scene_coverage_item:hover {
background-color: #f9fafb;
}
.scene_coverage_item:last-child {
border-bottom: none;
}
/* POV Character Color Bar */
.scene_coverage_item::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--pov-character-color, #e0e0e0);
}
/* Responsive Design */
@media (max-width: 768px) {
.character_coverage_card {
padding: 15px;
}
.character_coverage_avatar {
width: 40px;
height: 40px;
}
.character_coverage_card h4 {
font-size: 18px;
}
.coverage_stats strong {
font-size: 20px;
}
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.character_coverage_card {
background: #1f2937;
border-color: #374151;
color: #f3f4f6;
}
.coverage_progress_bar {
background-color: #374151;
}
.scene_item--has_state {
background-color: #064e3b;
}
.scene_item--missing_state {
background-color: #7f1d1d;
}
}
/* π₯π₯π₯ Template Assignment Manager Styles */
.rusty-red-alert-text-colour {
color: #a94442;
font-style: italic;
}
.custom-draft-option {
padding: 10px 12px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.custom-draft-option:hover {
background-color: #f0f0f0 !important;
}
.custom-draft-option.selected {
background-color: #e8f4f8 !important;
}
.custom-draft-option.selected:hover {
background-color: #d0e8f0 !important;
}
/* Phase 2 Payload Filter Button */
.payload-filter-button {
width: 30px;
height: 30px;
background-image: url('/static/images/filter.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: none;
background-color: transparent;
cursor: pointer;
transition: transform 0.33s ease;
margin-left: auto;
margin-top: 15px;
display: inline-block;
vertical-align: middle;
}
.payload-filter-button:hover {
transform: scale(1.25);
}
/* Phase 2 Payload Options Section */
.payload-options-section {
margin-top: 20px;
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
border: 1px solid #dee2e6;
display: none;
animation: slideDown 0.3s ease;
}
.payload-options-section.active {
display: block;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.payload-options-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
color: #333;
}
.payload-option-group {
margin-bottom: 15px;
}
.payload-option-label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: #555;
}
.payload-checkbox-container {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.payload-checkbox-container input[type="checkbox"] {
margin-right: 8px;
}
/* Extract Objects Button */
.extract-objects-btn {
background-color: #dcecfa;
color: black;
padding: 10px 20px;
border: 1px solid #386ddc;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: background-color 0.2s ease;
}
.extract-objects-btn:hover {
background-color: #c5e1f7;
}
.extract-objects-btn:active {
background-color: #b3d7f2;
}
/* Scene Notes AI Headers Bolding */
.scene-ai-notes pre {
white-space: pre-wrap;
font-family: monospace;
}
/* Target lines that start with spaces followed by dash - these are the section headers */
.scene-ai-notes .header-line {
font-weight: bold !important;
color: #333;
}
/* π₯π₯π₯ Story Elements Inline Editing - EXACT Tonal Profile Style */
.professional-edit-textarea {
background-color: #ffffff !important;
border: none !important;
border-left: 4px solid #007bff !important;
border-radius: 4px !important;
padding: 8px !important;
padding-left: 12px !important;
font-size: inherit !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
line-height: 1.5 !important;
width: 100% !important;
box-sizing: border-box !important;
resize: vertical !important;
min-height: 80px !important;
margin-bottom: 5px !important;
}
.professional-edit-textarea:focus {
outline: none !important;
background-color: #ffffff !important;
}
/* Container style - EXACT copy of .act-tone.editing-mode */
.professional-editing-container {
background-color: #f0f8ff !important;
border: 1px solid #b3d9ff !important;
border-radius: 4px !important;
padding: 10px !important;
}
/* Button styles for Add buttons */
.professional-add-btn {
background-color: #007bff !important;
color: white !important;
border: none !important;
border-radius: 4px !important;
padding: 6px 12px !important;
font-size: 14px !important;
cursor: pointer !important;
transition: background-color 0.2s ease !important;
margin-top: 5px !important;
}
.professional-add-btn:hover {
background-color: #0056b3 !important;
}
.professional-add-btn:active {
transform: scale(0.98) !important;
}
/* ========================================
π₯π₯π₯ MODERN AUTHENTICATION PAGES STYLES
======================================== */
/* Split-screen wrapper for auth pages */
.auth-split-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
/* Hide navigation on auth pages */
body:has(.auth-split-wrapper) .left-nav,
body:has(.auth-split-wrapper) .right-nav {
display: none !important;
}
/* Positino of background image */
.auth-image-side {
position: absolute;
top: 0;
right: 0;
width: 50%; /* 50 = Right half background image */
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
/* Form overlay positioned 25% from left with logo background */
.auth-form-side {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 33%;
z-index: 2;
background-image: url('/static/images/Logo-Storylaunch_large_transp.png');
background-repeat: no-repeat;
background-position: 12% center;
background-size: 20% auto;
}
/* Auth page container (for centering card) */
.auth-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 600px;
}
.auth-card {
background: #ffffff;
border-radius: 16px;
padding: 40px;
width: 100%;
max-width: 420px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.auth-card h1 {
font-size: 32px;
font-weight: 600;
color: #1a202c;
margin: 0 0 12px 0;
text-align: center;
letter-spacing: -0.5px;
}
.auth-card .auth-subtitle {
font-size: 15px;
color: #718096;
text-align: center;
margin-bottom: 32px;
line-height: 1.5;
}
/* Flash messages for auth pages */
.auth-flash-messages {
margin-bottom: 24px;
}
.auth-flash-message {
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
margin-bottom: 8px;
}
.auth-flash-message.error {
background-color: #fff5f5;
color: #c53030;
border: 1px solid #feb2b2;
}
.auth-flash-message.success {
background-color: #f0fff4;
color: #2f855a;
border: 1px solid #9ae6b4;
}
.auth-flash-message.info {
background-color: #ebf8ff;
color: #2c5282;
border: 1px solid #90cdf4;
}
/* Form groups */
.auth-form-group {
margin-bottom: 24px;
}
.auth-form-group label {
display: block;
font-size: 14px;
font-weight: 600;
color: #2d3748;
margin-bottom: 8px;
}
/* Input fields */
.auth-input-wrapper {
position: relative;
}
.auth-input {
width: 100%;
padding: 12px 16px;
font-size: 15px;
line-height: 1.5;
color: #2d3748;
background-color: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 8px;
transition: all 0.2s ease;
box-sizing: border-box;
}
.auth-input:focus {
outline: none;
border-color: #4299e1;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}
.auth-input:hover:not(:focus) {
border-color: #cbd5e0;
}
.auth-input::placeholder {
color: #a0aec0;
}
/* Password visibility toggle */
.auth-password-toggle {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s ease;
}
.auth-password-toggle:hover {
opacity: 0.7;
}
.auth-password-toggle img {
height: 20px;
width: auto;
}
/* Input with toggle (padding adjustment for password fields) */
.auth-input-wrapper .auth-input {
padding-right: 48px;
}
/* π₯π₯π₯ Hide browser's default password reveal button (the small eye icon) */
.auth-input-wrapper input[type="password"]::-ms-reveal,
.auth-input-wrapper input[type="password"]::-ms-clear {
display: none !important;
}
.auth-input-wrapper input[type="password"]::-webkit-credentials-auto-fill-button,
.auth-input-wrapper input[type="password"]::-webkit-textfield-decoration-container {
display: none !important;
}
/* Helper text */
.auth-helper-text {
display: block;
margin-top: 6px;
font-size: 13px;
color: #718096;
line-height: 1.4;
}
/* Submit button */
.auth-submit-btn {
width: 100%;
padding: 14px 24px;
font-size: 16px;
font-weight: 600;
color: #ffffff;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 8px;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.auth-submit-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.auth-submit-btn:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}
/* Secondary button for testing/utility actions */
.auth-secondary-btn {
width: 100%;
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
color: #667eea;
background: #ffffff;
border: 2px solid #667eea;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
}
.auth-secondary-btn:hover {
background: #f7fafc;
border-color: #764ba2;
color: #764ba2;
transform: translateY(-1px);
}
.auth-secondary-btn:active {
transform: translateY(0);
}
.auth-secondary-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Links */
.auth-link-wrapper {
margin-top: 20px;
text-align: center;
}
.auth-link {
color: #4299e1;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.2s ease;
}
.auth-link:hover {
color: #2b6cb0;
text-decoration: underline;
}
/* Registration code specific styling */
.auth-input.registration-code {
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
}
/* ============================================================================
π₯π₯π₯ LANDING PAGE STYLES
============================================================================ */
/* Landing Page Base */
.landing-page {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #1a202c;
background: #ffffff;
}
/* Hero Section */
.landing-hero {
min-height: 100vh;
display: flex;
align-items: center;
color: white;
padding: 60px 20px;
position: relative;
z-index: 10;
}
/* Fixed gradient background */
.landing-hero::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #4e92da 0%, #26186d 100%);
z-index: -1;
}
/* π₯π₯π₯ Large logo underlay - FIXED with gradient */
.landing-hero-logo-underlay {
position: fixed;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
width: 100%;
opacity: 0.6;
pointer-events: none;
z-index: 1;
}
.landing-hero-logo-underlay img {
width: 100%;
height: auto;
}
.landing-hero-content {
position: relative;
z-index: 2;
max-width: 90vw;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 140px;
align-items: center;
}
/* π₯π₯π₯ Make video column 10% larger */
.landing-hero-visual-large {
transform: scale(1.1);
transform-origin: center center;
}
.landing-hero-text {
max-width: 600px;
}
.landing-hero-title {
font-size: 3.8rem;
font-weight: 800;
line-height: 1.1;
margin: 0 0 20px 0;
color: white;
}
.landing-hero-subtitle {
font-size: 1.25rem;
line-height: 1.7;
margin: 0 0 30px 0;
opacity: 0.95;
}
.landing-cta-button {
display: block;
background: #1a2947;
color: white;
padding: 18px 40px;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
width: fit-content;
margin: 0 auto;
text-align: center;
border: 1px solid #1a2947;
}
.landing-cta-button:hover {
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
background: var(--landing-button-hover, #365b9b);
}
.landing-cta-large {
font-size: 1.3rem;
padding: 22px 50px;
}
.landing-trust-signal {
margin-top: 15px;
font-size: 0.9rem;
opacity: 0.85;
}
/* Video Container */
.landing-video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
background: rgba(0, 0, 0, 0.2);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.landing-video-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
}
.landing-video-placeholder img {
max-width: 200px;
opacity: 0.7;
margin-bottom: 10px;
}
.landing-video-placeholder p {
margin: 0;
font-size: 1.1rem;
opacity: 0.8;
}
.landing-video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Section Styles */
.landing-section-content {
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px;
}
.landing-section-title {
font-size: 2.5rem;
font-weight: 800;
text-align: center;
margin: 0 0 15px 0;
color: #1a202c;
}
.landing-creator .landing-section-title {
text-align: left;
}
.landing-section-intro {
font-size: 1.3rem;
text-align: center;
margin: 0 0 50px 0;
color: #4a5568;
}
/* Comparison Section - Slides in from LEFT */
.landing-comparison {
background: transparent;
padding: 0;
position: relative;
z-index: 10;
margin-top: -25vh;
opacity: 1;
transform: translateX(-100%);
transition: transform 0.8s ease;
}
.landing-comparison.visible {
transform: translateX(0);
}
.landing-comparison .landing-section-content {
padding: 0 20px 80px 20px;
}
.landing-comparison .landing-section-title {
color: white;
}
.landing-comparison .landing-section-intro {
color: white;
}
.landing-comparison-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
margin-top: 40px;
}
.landing-comparison-card {
position: relative;
background: white;
padding: 35px;
border-radius: 16px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.landing-comparison-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.landing-card-icon {
font-size: 3rem;
margin-bottom: 15px;
}
.landing-comparison-card h3 {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 8px 0;
color: #1a202c;
}
.landing-card-vs {
font-size: 0.9rem;
color: #e53e3e;
font-weight: 600;
margin: 0 0 15px 0;
}
.landing-comparison-card p:last-child {
margin: 0;
color: #4a5568;
line-height: 1.7;
}
/* Creator Section */
.landing-creator {
background: white;
/* Removed hardcoded padding - now controlled by JS inline styles */
position: relative;
z-index: 10;
transform: translateX(100%); /* Hidden off-screen to the RIGHT */
/* π₯π₯π₯ Extend section 300px to the left for fade zone */
margin-left: -300px;
padding-left: 320px; /* 300px extension + 20px original padding */
/* π₯π₯π₯ Gradient mask: fade left 300px from transparent to opaque */
-webkit-mask-image: linear-gradient(to right, transparent 0px, black 300px);
mask-image: linear-gradient(to right, transparent 0px, black 300px);
transition: transform 0.8s ease;
}
.landing-creator.visible {
transform: translateX(0); /* Slide into view when visible class added */
}
.landing-creator-content {
position: relative;
}
.landing-creator-image {
float: left;
margin: 0 40px 20px 0;
position: relative;
}
.landing-creator-image img {
width: 300px;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.landing-creator-bio h3 {
font-size: 2rem;
font-weight: 700;
margin: 0 0 5px 0;
color: #1a202c;
}
.landing-creator-title {
font-size: 1.1rem;
color: #667eea;
font-weight: 600;
margin: 0 0 25px 0;
}
.landing-creator-bio p {
font-size: 1.1rem;
line-height: 1.8;
color: #4a5568;
margin: 0 0 20px 0;
}
/* Trust Signals Section */
.landing-trust {
background: #f7fafc;
padding: 60px 20px;
position: relative;
z-index: 10;
}
.landing-trust-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
margin-top: 30px;
}
.landing-trust-item {
text-align: center;
}
.landing-trust-icon {
font-size: 3rem;
margin-bottom: 15px;
}
.landing-trust-item h4 {
font-size: 1.3rem;
font-weight: 700;
margin: 0 0 10px 0;
color: #1a202c;
}
.landing-trust-item p {
margin: 0;
color: #4a5568;
line-height: 1.6;
}
/* Final CTA Section */
.landing-final-cta {
background: linear-gradient(135deg, #4e92da 0%, #26186d 100%);
color: white;
padding: 80px 20px;
text-align: center;
position: relative;
z-index: 10;
}
.landing-final-cta h2 {
font-size: 2.5rem;
font-weight: 800;
margin: 0 0 15px 0;
color: white;
}
.landing-final-cta p {
font-size: 1.2rem;
margin: 0 0 30px 0;
opacity: 0.95;
}
.landing-cta-links {
margin-top: 20px !important;
font-size: 1rem !important;
}
.landing-cta-links a {
color: white;
text-decoration: underline;
opacity: 0.9;
}
.landing-cta-links a:hover {
opacity: 1;
}
/* Footer */
.landing-footer {
background: #1a202c;
color: white;
padding: 40px 20px;
text-align: center;
position: relative;
z-index: 10;
}
.landing-footer p {
margin: 0 0 10px 0;
opacity: 0.8;
}
.landing-footer-links a {
color: white;
text-decoration: none;
opacity: 0.8;
}
.landing-footer-links a:hover {
opacity: 1;
text-decoration: underline;
}
/* Mobile Video Section */
.landing-mobile-video {
background: #f7fafc;
padding: 60px 20px;
position: relative;
z-index: 10;
}
.landing-mobile-video h3 {
font-size: 2rem;
font-weight: 700;
text-align: center;
margin: 0 0 30px 0;
color: #1a202c;
}
/* ============================================================================
π₯π₯π₯ RESPONSIVE MOBILE STYLES
============================================================================ */
@media (max-width: 1024px) {
.landing-hero-content {
grid-template-columns: 1fr;
gap: 40px;
}
.landing-hero-title {
font-size: 2.5rem;
}
.landing-hero-subtitle {
font-size: 1.1rem;
}
.landing-creator-content {
grid-template-columns: 1fr;
gap: 30px;
}
.landing-creator-image {
max-width: 300px;
margin: 0 auto;
}
.landing-section-title {
font-size: 2rem;
}
.landing-section-intro {
font-size: 1.1rem;
}
}
@media (max-width: 768px) {
.landing-hero {
min-height: auto;
padding: 40px 20px;
}
.landing-hero-title {
font-size: 2rem;
}
.landing-hero-subtitle {
font-size: 1rem;
}
.landing-cta-button {
display: block;
text-align: center;
padding: 16px 30px;
font-size: 1rem;
}
.landing-cta-large {
font-size: 1.1rem;
padding: 18px 35px;
}
.landing-section-content {
padding: 50px 20px;
}
.landing-comparison-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.landing-comparison-card {
padding: 25px;
}
.landing-section-title {
font-size: 1.75rem;
}
.landing-final-cta h2 {
font-size: 2rem;
}
}
/* ============================================================================
π₯π₯π₯ COLOR PICKER PANEL (Dev Tool)
============================================================================ */
.color-picker-panel {
position: fixed;
bottom: 20px;
right: 20px;
background: white;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
width: 320px;
z-index: 10000;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.color-picker-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: #1a202c;
color: white;
border-radius: 12px 12px 0 0;
}
.color-picker-header h4 {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.toggle-picker-btn {
background: transparent;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.toggle-picker-btn:hover {
opacity: 0.7;
}
.color-picker-content {
padding: 20px;
}
.color-control {
margin-bottom: 15px;
}
.color-control label {
display: block;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 8px;
color: #1a202c;
}
.color-control input[type="color"] {
width: 100%;
height: 50px;
border: 2px solid #e5e7eb;
border-radius: 8px;
cursor: pointer;
}
.gradient-preview {
width: 100%;
height: 80px;
border-radius: 8px;
margin: 20px 0;
border: 2px solid #e5e7eb;
}
.color-values {
background: #f7fafc;
padding: 15px;
border-radius: 8px;
margin-top: 15px;
}
.color-values p {
margin: 0 0 8px 0;
font-size: 0.85rem;
color: #4a5568;
}
.color-values code {
display: block;
background: white;
padding: 12px;
border-radius: 6px;
font-size: 0.8rem;
color: #2d3748;
word-wrap: break-word;
border: 1px solid #e5e7eb;
margin-bottom: 10px;
}
.copy-btn {
background: #667eea;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
width: 100%;
transition: all 0.2s ease;
}
.copy-btn:hover {
background: #5568d3;
transform: translateY(-1px);
}
.copy-btn:active {
transform: translateY(0);
}
.text-color-toggle {
display: flex;
gap: 10px;
}
.text-color-btn {
flex: 1;
padding: 10px;
border: 2px solid #e5e7eb;
background: white;
color: #4a5568;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.text-color-btn:hover {
border-color: #667eea;
}
.text-color-btn.active {
background: #667eea;
color: white;
border-color: #667eea;
}
/* Mobile adjustments for color picker */
@media (max-width: 768px) {
.color-picker-panel {
width: calc(100% - 40px);
right: 20px;
bottom: 10px;
}
.control-panel {
width: calc(100% - 40px);
right: 20px;
top: 10px;
}
}
/* ============================================================================
π₯π₯π₯ COMBINED CONTROL PANEL (Dev Tool - Layout Controls + Gradient Designer)
============================================================================ */
.control-panel {
position: fixed;
top: 20px;
right: 20px;
background: white;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
width: 320px;
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
z-index: 10000;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.control-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: #1a202c;
color: white;
border-radius: 12px 12px 0 0;
flex-shrink: 0;
}
.control-header h4 {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.control-tab {
transition: all 0.2s ease;
}
.control-tab:hover {
opacity: 0.8;
}
.toggle-control-btn {
background: transparent;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.toggle-control-btn:hover {
opacity: 0.7;
}
.control-content {
padding: 20px;
overflow-y: auto !important;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
/* π₯π₯π₯ Critical: Use calc to fill available space minus header */
max-height: calc(100vh - 100px);
}
.control-content::-webkit-scrollbar {
width: 8px;
}
.control-content::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.control-content::-webkit-scrollbar-thumb {
background: #667eea;
border-radius: 4px;
}
.control-content::-webkit-scrollbar-thumb:hover {
background: #5568d3;
}
/* Legacy support for old class names */
.logo-control-panel {
position: fixed;
top: 20px;
right: 20px;
background: white;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
width: 280px;
z-index: 10000;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.logo-control-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: #1a202c;
color: white;
border-radius: 12px 12px 0 0;
}
.logo-control-header h4 {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.toggle-logo-btn {
background: transparent;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.toggle-logo-btn:hover {
opacity: 0.7;
}
.logo-control-content {
padding: 20px;
}
.logo-slider-control {
margin-bottom: 20px;
}
.logo-slider-control:last-child {
margin-bottom: 0;
}
.logo-slider-control label {
display: block;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 8px;
color: #1a202c;
}
.logo-slider-control label span {
float: right;
color: #667eea;
font-weight: 700;
}
.logo-slider-control input[type="range"] {
width: 100%;
height: 6px;
background: #e5e7eb;
border-radius: 3px;
outline: none;
-webkit-appearance: none;
}
.logo-slider-control input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
background: #667eea;
border-radius: 50%;
cursor: pointer;
}
.logo-slider-control input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
background: #667eea;
border-radius: 50%;
cursor: pointer;
border: none;
}
/* Checkpoint/Restore Controls */
.checkpoint-controls {
padding: 15px;
background: #f7fafc;
border-radius: 8px;
}
.checkpoint-btn {
flex: 1;
padding: 10px 15px;
background: #667eea;
color: white;
border: none;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.checkpoint-btn:hover {
background: #5568d3;
transform: translateY(-1px);
}
.checkpoint-btn:active {
transform: translateY(0);
}
/* Creator Top Edge Slider */
.creator-top-edge-slider {
margin-bottom: 20px;
}
.creator-top-edge-slider label {
display: block;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 8px;
color: #1a202c;
}
.creator-top-edge-slider label span {
float: right;
color: #667eea;
font-weight: 700;
}
.creator-top-edge-slider input[type="range"] {
width: 100%;
height: 6px;
background: #e5e7eb;
border-radius: 3px;
outline: none;
-webkit-appearance: none;
}
.creator-top-edge-slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
background: #667eea;
border-radius: 50%;
cursor: pointer;
}
.creator-top-edge-slider input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
background: #667eea;
border-radius: 50%;
cursor: pointer;
border: none;
}
/* π₯π₯π₯ Save Template Button positioning (styling comes from start.html embedded CSS) */
.save-template-btn {
float: right;
margin-left: 15px;
margin-bottom: 10px;
}
|