/* wp-content/plugins/my-ai-gemini-interface/styles.css */
/* Define CSS Variables for future color schemes */
:root {
--user-defined-bg-color: #131314; /* Default from body background */
--ai-text-color: #e3e3e3;
--user-input-text-color: #4285F4;
--system-messages-text-color: #ADD8E6;
/* Define colors for the 9 major sections */
--pane-bg-color-top-left: #282a2c;
--pane-bg-color-top-middle: #2d2e30;
--pane-bg-color-top-right: #333537;
--pane-bg-color-middle-left: #2d2e30;
--pane-bg-color-center-center: #1f1f20; /* Main display, slightly darker */
--pane-bg-color-middle-right: #333537;
--pane-bg-color-bottom-left: #333537;
--pane-bg-color-bottom-center: #282a2c;
--pane-bg-color-bottom-right: #2d2e30;
}
/* Core layout for the app container */
#app-root {
height: 100vh; /* Full viewport height for the app root */
width: 100%;
margin: 0;
overflow: hidden; /* Prevent body scrollbars if content is managed by nested panes */
display: flex; /* Make it a flex container for the split columns */
flex-direction: column; /* Ensure vertical stacking if needed, though split.js handles this for columns/panes */
background-color: var(--user-defined-bg-color); /* Apply user-defined background if set */
color: var(--ai-text-color); /* Apply default AI text color, can be overridden */
}
/* Base styles for the split columns within the grid - Removed as we're now using a single CSS Grid for the 10x10 */
/* .grid-container, .split-col, .split-pane styles below are for the original Split.js setup.
They will be overridden by .myai-dashboard-layout-bagua and .myai-grid-section.
Keeping them for now as they might apply to nested grids if Fractal Grid is enabled,
but the main layout uses the new grid definitions.
*/
/* NEW: Styles for the 10x10 Dashboard-Layout-Bagua */
.myai-dashboard-layout-bagua {
display: grid;
/* Define 10 columns and 10 rows for a 10x10 grid */
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr);
gap: 8px; /* Gap between individual 10x10 cells, creating visual lines */
width: 100%;
height: 100vh; /* Make it fill the viewport height */
padding: 8px; /* Padding around the entire grid */
box-sizing: border-box;
background-color: var(--user-defined-bg-color); /* Overall background */
}
/* Style for each conceptual section, mapping to grid areas */
.myai-grid-section {
border: 1px solid #444; /* Border for the major sections */
border-radius: 6px;
padding: 10px;
overflow: hidden; /* Manage overflow within the section */
display: flex;
flex-direction: column;
color: var(--ai-text-color);
box-sizing: border-box;
}
/* Define the grid-area for each of the 9 major sections within the 10x10 grid */
/* Using grid-column and grid-row to span multiple cells of the 10x10 grid */
/* Assuming a standard grid where (1,1) is top-left, and cells are 1-indexed.
If (0,0) is top-left, adjust indices by +1 for CSS grid-row/column properties.
Given the user's "9:9" for top-right, assuming (0,0) is top-left for internal model.
Thus, for 10x10 grid, indices are 0-9.
Visual Column 1 (Left): spans grid columns 0-3 (e.g., 4 units wide)
Visual Column 2 (Middle): spans grid columns 4-7 (e.g., 4 units wide)
Visual Column 3 (Right): spans grid columns 8-9 (e.g., 2 units wide)
Visual Row 1 (Top): spans grid rows 0-3
Visual Row 2 (Middle): spans grid rows 4-7
Visual Row 3 (Bottom): spans grid rows 8-9
*/
/* Top-Left (Col 1, Row 1) - Company/Logo */
.myai-grid-section.top-left {
grid-column: 1 / span 3; /* Spans 3 columns */
grid-row: 1 / span 3; /* Spans 3 rows */
background-color: var(--pane-bg-color-top-left);
}
/* Top-Middle (Col 2, Row 1) - Notification Center */
.myai-grid-section.top-middle {
grid-column: 4 / span 4; /* Spans 4 columns */
grid-row: 1 / span 3; /* Spans 3 rows */
background-color: var(--pane-bg-color-top-middle);
}
/* Top-Right (Col 3, Row 1) - User Account */
.myai-grid-section.top-right {
grid-column: 8 / span 3; /* Spans 3 columns (e.g. 8,9,10) */
grid-row: 1 / span 3; /* Spans 3 rows */
background-color: var(--pane-bg-color-top-right);
}
/* Middle-Left (Col 1, Row 2) - Navigation */
.myai-grid-section.middle-left {
grid-column: 1 / span 3;
grid-row: 4 / span 4; /* Starts on row 4 */
background-color: var(--pane-bg-color-middle-left);
}
/* Center-Center (Col 2, Row 2) - Main Display */
.myai-grid-section.center-center {
grid-column: 4 / span 4;
grid-row: 4 / span 4;
background-color: var(--pane-bg-color-center-center);
}
/* Middle-Right (Col 3, Row 2) - AI Info & Output */
.myai-grid-section.middle-right {
grid-column: 8 / span 3;
grid-row: 4 / span 4;
background-color: var(--pane-bg-color-middle-right);
}
/* Bottom-Left (Col 1, Row 3) - Libraries */
.myai-grid-section.bottom-left {
grid-column: 1 / span 3;
grid-row: 8 / span 3; /* Starts on row 8 */
background-color: var(--pane-bg-color-bottom-left);
}
/* Bottom-Center (Col 2, Row 3) - Command Prompt */
.myai-grid-section.bottom-center {
grid-column: 4 / span 4;
grid-row: 8 / span 3;
background-color: var(--pane-bg-color-bottom-center);
}
/* Bottom-Right (Col 3, Row 3) - Tools */
.myai-grid-section.bottom-right {
grid-column: 8 / span 3;
grid-row: 8 / span 3;
background-color: var(--pane-bg-color-bottom-right);
}
/* General Styles for auth-screen (if not using the main dashboard) */
#auth-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
background-color: var(--user-defined-bg-color); /* Use user-defined background */
color: var(--ai-text-color); /* Use user-defined AI text color */
}
/* Login button styles (if not using the main dashboard for login) */
.login-btn {
display: inline-block;
padding: 12px 24px;
background-color: #4285F4;
color: white;
text-decoration: none;
border-radius: 4px;
font-weight: bold;
margin-top: 20px;
}
/* Ensure generic inheritance for text elements by not explicitly setting colors/fonts here */
h1, h2, h3, h4, h5, h6, p, a, ul, ol, li {
/* No specific styling here to allow theme inheritance */
}
/* Future: Styles for AI-generated text, user input text, system messages */
.ai-output-text { color: var(--ai-text-color); }
.user-input-text { color: var(--user-input-text-color); }
.system-message-text { color: var(--system-messages-text-color); }styles.css