wisplite/BLE-mesh-sim
1
0
Fork 0
mirror of https://github.com/wisplite/BLE-mesh-sim.git synced 2026-10-30 13:32:21 -05:00
Code Issues Packages Projects Releases Wiki Activity

dark mode and improved network coloring

Browse Source
This commit is contained in:
wisplite
2025-09-08 17:43:06 -05:00
parent e7469ac081
commit 9f7b05294c
6 changed files with 256 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style-dark.css
+207
View File
@@ -0,0 +1,207 @@
#simContainer {
width: 100%;
height: 90%;
margin: 0 auto;
border: 1px solid #404040;
box-sizing: border-box;
position: relative;
padding: 0;
overflow: hidden;
background-color: #1a1a1a;
}
#controlContainer {
width: 100%;
height: 10%;
margin: 0 auto;
border: 1px solid #404040;
padding: 5px;
box-sizing: border-box;
display: flex;
gap: 5px;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #2d2d2d;
}
#connectionViewer, #propertyViewer {
width: 15%;
height: 90%;
margin: 0 auto;
border: 1px solid #404040;
padding: 5px;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
background-color: #252525;
color: #e0e0e0;
}
.controlButton {
width: 100%;
height: 100%;
cursor: pointer;
background-color: #3a3a3a;
color: #e0e0e0;
border: 1px solid #555555;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.controlButton:hover {
background-color: #4a4a4a;
}
.controlButton:active {
background-color: #2a2a2a;
}
html, body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #1a1a1a;
color: #e0e0e0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.rangeVis {
position: absolute;
border: 1px solid #666666;
border-radius: 50%;
z-index: 1000;
opacity: 0.3;
background-color: #ff6b6b;
pointer-events: none;
}
#controlButtons {
display: flex;
flex-direction: row;
flex-grow: 1;
gap: 10px;
}
#simToggles {
display: flex;
flex-direction: row;
flex-shrink: 1;
gap: 10px;
}
#simpleSettingsContent, #engineSettingsContent, #hardwareConstraintsContent {
display: flex;
flex-direction: column;
gap: 10px;
padding-left: 20px;
padding-top: 10px;
}
#simpleSettings, #hardwareConstraints, #engineSettings {
margin-bottom: 10px;
}
#randomGraphModal, #warningModal {
display: none;
position: absolute;
top: 0%;
left: 0%;
transform: translate(0%, 0%);
background-color: rgba(0, 0, 0, 0.8);
padding: 20px;
border: none;
width: 100%;
height: 100%;
}
#warningModalContent {
padding: 20px;
background-color: #2d2d2d;
border: 2px solid #ffaa00;
border-radius: 8px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #e0e0e0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
#randomGraphModalContent {
padding: 20px;
background-color: #2d2d2d;
border: 1px solid #555555;
border-radius: 8px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #e0e0e0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
#createRandomGraphConfirm {
margin-top: 10px;
background-color: #4a9eff;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease;
}
#createRandomGraphConfirm:hover {
background-color: #3a8eef;
}
#createRandomGraphConfirm:active {
background-color: #2a7edf;
}
/* Input and form styling for dark mode */
input, select, textarea {
background-color: #3a3a3a;
color: #e0e0e0;
border: 1px solid #555555;
border-radius: 4px;
padding: 4px 8px;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: #4a9eff;
box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2);
}
/* Label styling */
label {
color: #e0e0e0;
}
/* Button styling */
button {
background-color: #3a3a3a;
color: #e0e0e0;
border: 1px solid #555555;
border-radius: 4px;
padding: 6px 12px;
cursor: pointer;
transition: background-color 0.2s ease;
}
button:hover {
background-color: #4a4a4a;
}
button:active {
background-color: #2a2a2a;
}
/* Checkbox and radio button styling */
input[type="checkbox"], input[type="radio"] {
accent-color: #4a9eff;
}