Skip to content

Commit

Permalink
Update styles.css
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kynlos
Kynlos authored Mar 22, 2024
1 parent 8b68433 commit d6b4e52
Showing 1 changed file with 1 addition and 378 deletions.
379 changes: 1 addition & 378 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,378 +1 @@
/* Styles for the body */
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 20px;
background-color: #f7f7f7;
color: #333;
transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode styles for the body */
body.dark-mode {
background-color: #333;
color: #fff;
}

/* Styles for the selected context option */
.context-option.selected {
background-color: #5cb85c;
color: white;
border-color: #5cb85c;
}

/* Styles for the container */
.container {
max-width: 600px;
margin: auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode styles for the container */
.container.dark-mode {
background: #333;
color: #fff;
}

/* Styles for the h1 heading */
h1 {
font-weight: 600;
color: #5cb85c;
}

/* Styles for input, button, and select elements */
input[type="text"],
button,
select {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
border: 1px solid #ddd;
box-sizing: border-box;
color: inherit;
background-color: inherit;
}

/* Styles for the button */
button {
background-color: #5cb85c;
color: white;
border: none;
cursor: pointer;
font-weight: 600;
transition: background-color 0.3s ease;
}

/* Hover styles for the button */
button:hover {
background-color: #4cae4c;
}



/* Styles for the context option */
.context-option {
display: inline-block;
padding: 10px 15px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}

/* Styles for the selected context option */
.context-option.selected {
background-color: #5cb85c;
color: white;
border-color: #5cb85c;
}

/* Styles for the dark mode toggle */
#darkModeToggle {
position: fixed;
top: 20px;
right: 20px;
cursor: pointer;
font-size: 24px;
}



/* Styles for the modal */
.modal {
display: none;
position: fixed;
z-index: 1001;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
padding-top: 60px;
}

/* Styles for the modal content */
.modal-content {
background-color: #fefefe;
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

/* Styles for the close button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

/* Hover and focus styles for the close button */
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

/* Styles for the jsonDisplay element */
#jsonDisplay {
white-space: pre-wrap;
background-color: #000; /* Black background */
color: #fff; /* White text */
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 10px;
overflow: auto; /* In case of overflow */
max-height: 400px;
}

/* Styles for the tooltip */
.tooltip {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}

/* Styles for the tooltip arrow */
.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

/* Styles for showing the tooltip */
.show-tooltip {
visibility: visible;
opacity: 1;
}


/* Styles for the GitHub Updates Banner */
.github-updates-banner {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333; /* Dark background for contrast */
color: #fff;
z-index: 1002; /* Higher than other elements, but lower than modal */
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
font-size: 0.9rem;
}

.github-updates-content {
max-width: 1200px; /* Limit the content width */
margin: auto; /* Center the content */
padding: 10px; /* Padding for aesthetics */
text-align: center; /* Center the text */
overflow: hidden; /* Hide overflowing content */
white-space: nowrap; /* Keep the text in one line */
text-overflow: ellipsis; /* Add ellipsis for overflowing text */
}


/* Styles for links within the GitHub Updates Banner */
.github-updates-content a {
color: #4da6ff;
text-decoration: none;
font-weight: bold;
}

/* Change the link color on hover for better user interaction */
.github-updates-content a:hover {
color: #ff8533;
text-decoration: underline;
}


/* Light theme styles for Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
background-color: #fff; /* Light background for the dropdown */
border: 1px solid #aaa; /* Light border color */
color: #000; /* Dark text color for light mode */
margin-top: 15px; /* Add padding above the dropdown */
}

/* Common styles for Select2 arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--multiple .select2-selection__arrow {
position: absolute;
top: 70%; /* Center vertically */
transform: translateY(-50%); /* Center the arrow vertically */
/* Ensure there's enough height for the arrow */
height: 20px; /* Adjust as needed */
width: 20px; /* Adjust as needed */
}

.select2-dropdown {
background-color: #fff; /* Light background for the dropdown options */
border: 1px solid #aaa; /* Light border color */
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #eaeaea; /* Light background for highlighted option */
color: #000; /* Dark text color for highlighted option, for better visibility */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #000; /* Dark text color for light mode */
line-height: 28px;
}

/* Dark theme styles for Select2 when .dark-mode class is active */
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
background-color: #333; /* Dark background for the dropdown */
border: 2px solid #555; /* Darker border color */
color: #e0e0e0; /* Lighter grey text color, adjusted for better visibility */
margin-top: 15px; /* Add padding above the dropdown */
line-height: normal; /* Adjust line-height as needed */
}


body.dark-mode .select2-dropdown {
background-color: #333; /* Dark background for the dropdown options */
border: 1px solid #555; /* Darker border color */
}

body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #444; /* Darker background for highlighted option */
color: #fff; /* White text color for highlighted option, for maximum contrast */
}

body.dark-mode .select2-container--default .select2-results__option {
color: #fff; /* Lighter grey text color for dropdown options, adjusted for better visibility */
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #e0e0e0; /* Lighter grey text color, adjusted for better visibility */
line-height: 28px;
}



/* Styles for the sidebar */
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: #333;
color: #fff;
transition: transform 0.3s ease;
transform: translateX(-100%);
z-index: 1000;
}

/* Styles for the sidebar when active class is present */
.sidebar.active {
transform: translateX(0); /* Slide in */
}

/* Styles for the sidebar navigation */
.sidebar-nav {
display: flex;
flex-direction: column;
padding-top: 20px;
}

/* Styles for the sidebar link */
.sidebar-link {
padding: 10px 20px;
text-decoration: none;
color: #fff;
font-weight: 600;
transition: background-color 0.3s ease;
}

/* Hover styles for the sidebar link */
.sidebar-link:hover {
background-color: #5cb85c;
}

/* Styles for the sidebar link icon */
.sidebar-link i {
margin-right: 8px;
}

/* Responsive adjustments for the sidebar */
@media (max-width: 768px) {
.sidebar {
width: 100%;
}

}


/* Light theme styles for the textarea */
#commandPrompt {
width: 100%;
height: 100px; /* Adjust as needed */
padding: 8px;
box-sizing: border-box;
border: 1px solid #aaa;
border-radius: 4px;
margin-top: 15px;
font-size: 14px;
}

/* Dark theme styles for textarea when .dark-mode class is active */
body.dark-mode #commandPrompt {
background-color: #333; /* Dark background for textarea */
border: 1px solid #555; /* Darker border color */
color: #e0e0e0; /* Lighter grey text color, adjusted for better visibility */
}

body.dark-mode #commandPrompt::placeholder {
color: #aaa; /* Lighter placeholder color in dark mode */
}

/* Removed - See /src */

0 comments on commit d6b4e52

Please sign in to comment.