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