forked from React-Group/interstellar_ai
Merge branch 'main' into main
This commit is contained in:
commit
473e097b8b
2 changed files with 87 additions and 49 deletions
|
|
@ -22,10 +22,12 @@
|
||||||
/* Main container for the settings */
|
/* Main container for the settings */
|
||||||
.settings-container {
|
.settings-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 3fr; /* 1fr for sidebar, 3fr for main content */
|
grid-template-columns: 1fr 3fr;
|
||||||
|
/* 1fr for sidebar, 3fr for main content */
|
||||||
grid-auto-flow: column;
|
grid-auto-flow: column;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
height: 100%; /* Ensure it takes full height */
|
height: 100%;
|
||||||
|
/* Ensure it takes full height */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Settings content */
|
/* Settings content */
|
||||||
|
|
@ -39,23 +41,30 @@
|
||||||
height: 90%;
|
height: 90%;
|
||||||
max-height: 600px;
|
max-height: 600px;
|
||||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||||
overflow: hidden; /* Prevents overflow of the content */
|
overflow: hidden;
|
||||||
position: relative; /* Needed for absolute positioning of close button */
|
/* Prevents overflow of the content */
|
||||||
|
position: relative;
|
||||||
|
/* Needed for absolute positioning of close button */
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column; /* Flexbox for vertical stacking */
|
flex-direction: column;
|
||||||
|
/* Flexbox for vertical stacking */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sidebar styles */
|
/* Sidebar styles */
|
||||||
.sidebar {
|
.sidebar {
|
||||||
background: var(--settings-background-color);
|
background: var(--settings-background-color);
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 10px 0 0 10px; /* Rounded corners on the left side */
|
border-radius: 10px 0 0 10px;
|
||||||
|
/* Rounded corners on the left side */
|
||||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||||
overflow-y: auto; /* Scroll if content exceeds height */
|
overflow-y: auto;
|
||||||
|
/* Scroll if content exceeds height */
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
grid-column: 1; /* Places sidebar in the first grid column */
|
grid-column: 1;
|
||||||
height: 100%; /* Ensures sidebar takes full height */
|
/* Places sidebar in the first grid column */
|
||||||
|
height: 100%;
|
||||||
|
/* Ensures sidebar takes full height */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sidebar item styles */
|
/* Sidebar item styles */
|
||||||
|
|
@ -64,8 +73,10 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column; /* Make the ul a column */
|
flex-direction: column;
|
||||||
flex-grow: 1; /* Allows the list to take available space */
|
/* Make the ul a column */
|
||||||
|
flex-grow: 1;
|
||||||
|
/* Allows the list to take available space */
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar li {
|
.sidebar li {
|
||||||
|
|
@ -77,66 +88,88 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar li:hover {
|
.sidebar li:hover {
|
||||||
background: var(--input-button-hover-color); /* Highlight on hover */
|
background: var(--input-button-hover-color);
|
||||||
|
/* Highlight on hover */
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar li.active {
|
.sidebar li.active {
|
||||||
background: var(--button-hover-background-color); /* Active section highlight */
|
background: var(--button-hover-background-color);
|
||||||
|
/* Active section highlight */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Main settings area */
|
/* Main settings area */
|
||||||
.settings-main {
|
.settings-main {
|
||||||
grid-column: 2; /* Places main settings in the second grid column */
|
grid-column: 2;
|
||||||
|
/* Places main settings in the second grid column */
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 0 10px 10px 0; /* Rounded corners on the right side */
|
border-radius: 0 10px 10px 0;
|
||||||
overflow-y: auto; /* Scroll if content exceeds height */
|
/* Rounded corners on the right side */
|
||||||
|
overflow-y: auto;
|
||||||
|
/* Scroll if content exceeds height */
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column; /* Stack content vertically */
|
flex-direction: column;
|
||||||
|
/* Stack content vertically */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Close button positioning */
|
/* Close button positioning */
|
||||||
.close-popup {
|
.close-popup {
|
||||||
background: var(--close-button-color); /* Use variable for close button color */
|
background: var(--close-button-color);
|
||||||
color: white; /* Use white for text color */
|
/* Use variable for close button color */
|
||||||
|
color: white;
|
||||||
|
/* Use white for text color */
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: absolute; /* Position the button absolutely */
|
position: absolute;
|
||||||
top: 15px; /* Distance from the top */
|
/* Position the button absolutely */
|
||||||
right: 40px; /* Distance from the right */
|
top: 15px;
|
||||||
|
/* Distance from the top */
|
||||||
|
right: 40px;
|
||||||
|
/* Distance from the right */
|
||||||
transition: background 0.3s;
|
transition: background 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Close button positioning */
|
/* Close button positioning */
|
||||||
.apply {
|
.apply {
|
||||||
background: var(--apply-button-color); /* Use variable for close button color */
|
background: var(--apply-button-color);
|
||||||
color: white; /* Use white for text color */
|
/* Use variable for close button color */
|
||||||
|
color: white;
|
||||||
|
/* Use white for text color */
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: absolute; /* Position the button absolutely */
|
position: absolute;
|
||||||
top: 50px; /* Distance from the top */
|
/* Position the button absolutely */
|
||||||
right: 40px; /* Distance from the right */
|
top: 50px;
|
||||||
|
/* Distance from the top */
|
||||||
|
right: 40px;
|
||||||
|
/* Distance from the right */
|
||||||
transition: background 0.3s;
|
transition: background 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-popup:hover {
|
.close-popup:hover {
|
||||||
background: darkred; /* Optional hover effect */
|
background: darkred;
|
||||||
|
/* Optional hover effect */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Additional styles for inputs and options */
|
/* Additional styles for inputs and options */
|
||||||
.settings-option {
|
.settings-option {
|
||||||
margin-bottom: 20px; /* Adds space between each setting option */
|
margin-bottom: 20px;
|
||||||
padding-bottom: 10px; /* Adds internal spacing */
|
/* Adds space between each setting option */
|
||||||
border-bottom: 1px solid var(--input-border-color); /* Optional, creates a separator between options */
|
padding-bottom: 10px;
|
||||||
|
/* Adds internal spacing */
|
||||||
|
border-bottom: 1px solid var(--input-border-color);
|
||||||
|
/* Optional, creates a separator between options */
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-option:last-child {
|
.settings-option:last-child {
|
||||||
margin-bottom: 0; /* Removes bottom margin from last option */
|
margin-bottom: 0;
|
||||||
border-bottom: none; /* Removes separator from last option */
|
/* Removes bottom margin from last option */
|
||||||
|
border-bottom: none;
|
||||||
|
/* Removes separator from last option */
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-option input[type="text"],
|
.settings-option input[type="text"],
|
||||||
|
|
@ -151,7 +184,9 @@
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 10px; /* Adds spacing between inputs */
|
height: 40px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
/* Adds spacing between inputs */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Optional additional spacing for labels */
|
/* Optional additional spacing for labels */
|
||||||
|
|
@ -161,14 +196,14 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.export-button{
|
.export-button {
|
||||||
background-color: var(--button-hover-background-color);
|
background-color: var(--button-hover-background-color);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.import-file{
|
.import-file {
|
||||||
background-color: var(--button-hover-background-color);
|
background-color: var(--button-hover-background-color);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
|
|
@ -189,17 +224,20 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-option.active {
|
.slider-option.active {
|
||||||
background-color: #007bff; /* Change to your active color */
|
background-color: #007bff;
|
||||||
|
/* Change to your active color */
|
||||||
color: white;
|
color: white;
|
||||||
border-color: #007bff;
|
border-color: #007bff;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="radio"] {
|
input[type="radio"] {
|
||||||
display: none; /* Hide the default radio buttons */
|
display: none;
|
||||||
|
/* Hide the default radio buttons */
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-option.disabled {
|
.slider-option.disabled {
|
||||||
opacity: 0.5; /* Make the option appear greyed out */
|
opacity: 0.5;
|
||||||
pointer-events: none; /* Prevent clicks */
|
/* Make the option appear greyed out */
|
||||||
|
pointer-events: none;
|
||||||
|
/* Prevent clicks */
|
||||||
}
|
}
|
||||||
|
|
||||||
6
main.js
6
main.js
|
|
@ -2,12 +2,12 @@ const { app, BrowserWindow } = require('electron');
|
||||||
|
|
||||||
function createWindow() {
|
function createWindow() {
|
||||||
const win = new BrowserWindow({
|
const win = new BrowserWindow({
|
||||||
width: 800,
|
width: 1280,
|
||||||
height: 600,
|
height: 720,
|
||||||
webPreferences: {
|
webPreferences: {
|
||||||
nodeIntegration: true,
|
nodeIntegration: true,
|
||||||
},
|
},
|
||||||
autoHideMenuBar: true,
|
autoHideMenuBar: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
win.loadURL('http://localhost:3000');
|
win.loadURL('http://localhost:3000');
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue