m3tam3re/fabric
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made gui look a little nicer

Browse Source
This commit is contained in:
Jonathan Dunn 2024-04-01 10:14:45 -04:00
parent 7eb5f953d7
commit 7e3e38ee18
2 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
installer/client/gui/index.html
View File

@ -46,8 +46,10 @@
</nav> </nav>
<main> <main>
<div class="container" id="my-form"> <div class="container" id="my-form">
<select class="form-control" id="patternSelector"></select> <div class="selector-container">
<select class="form-control" id="modelSelector"></select> <select class="form-control" id="patternSelector"></select>
<select class="form-control" id="modelSelector"></select>
</div>
<textarea <textarea
rows="5" rows="5"
class="form-control" class="form-control"

32
installer/client/gui/static/stylesheet/style.css
View File

@ -37,14 +37,27 @@ body {
border: 1px solid #555; /* Adjusted border color */ border: 1px solid #555; /* Adjusted border color */
padding: 10px; /* Added padding for better text visibility */ padding: 10px; /* Added padding for better text visibility */
} }
#patternSelector {
.selector-container {
display: flex;
gap: 10px;
margin-bottom: 10px; margin-bottom: 10px;
background-color: #424242; /* Darker shade for textarea */ }
color: #e0e0e0; /* Light text for readability */
border: 1px solid #555; /* Adjusted border color */ #patternSelector,
padding: 10px; /* Added padding for better text visibility */ #modelSelector {
flex: 1;
background-color: #424242;
color: #e0e0e0;
border: 1px solid #555;
padding: 10px;
height: 40px; height: 40px;
} }
.light-theme #modelSelector {
background-color: #fff;
color: #333;
border: 1px solid #ddd;
}
@media (min-width: 768px) { @media (min-width: 768px) {
.container { .container {
@ -78,6 +91,7 @@ body {
.hidden { .hidden {
display: none; display: none;
} }
.drag-over { .drag-over {
background-color: #505050; /* Slightly lighter than the regular background for visibility */ background-color: #505050; /* Slightly lighter than the regular background for visibility */
border: 2px dashed #007bff; /* Dashed border with the primary button color for emphasis */ border: 2px dashed #007bff; /* Dashed border with the primary button color for emphasis */
@ -123,6 +137,7 @@ body.light-theme .navbar-toggler-icon {
padding: 0.25rem 0.5rem; /* Adjust padding for the toggle button */ padding: 0.25rem 0.5rem; /* Adjust padding for the toggle button */
} }
} }
#responseContainer { #responseContainer {
position: relative; /* Needed for absolute positioning of the child button */ position: relative; /* Needed for absolute positioning of the child button */
} }
@ -158,6 +173,7 @@ body.light-theme .navbar-toggler-icon {
#copyButton:focus { #copyButton:focus {
outline: none; outline: none;
} }
#patternCreatedMessage { #patternCreatedMessage {
margin-top: 10px; margin-top: 10px;
padding: 10px; padding: 10px;
@ -177,8 +193,14 @@ body.light-theme .navbar-toggler-icon {
color: #333; color: #333;
border: 1px solid #ddd; border: 1px solid #ddd;
} }
#patternCreator textarea { #patternCreator textarea {
background-color: #424242; background-color: #424242;
color: #e0e0e0; color: #e0e0e0;
border: 1px solid #555; border: 1px solid #555;
} }
#patternCreator input {
background-color: #424242;
color: #e0e0e0;
border: 1px solid #555;
}