FEAScript-platform.css

/*  ______ ______           _____           _       _   
   |  ____|  ____|   /\    / ____|         (_)     | |  
   | |__  | |__     /  \  | (___   ___ ____ _ ____ | |_ 
   |  __| |  __|   / /\ \  \___ \ / __|  __| |  _ \| __|
   | |    | |____ / ____ \ ____) | (__| |  | | |_) | |  
   |_|    |______/_/    \_\_____/ \___|_|  |_|  __/| |  
                                             | |   | |  
                                             |_|   | |_ 
       Website: https://feascript.com/              \__|  */

/* Tab styles */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 75%;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #d4aa00;
  color: white;
}

.tabcontent {
  display: none;
  width: 75%;
  height: 80vh;
  border: 1px solid #ddd;
  border-top: none;
}

#blocklyDiv {
  width: 100%;
  height: 100%; 
  border: none;
  float: none;
}

#solutionPlot {
  width: 100%;
  height: 100%;
  overflow: auto; /* Add scroll bars */
}

#controlPanelContainer {
  width: 20%;
  height: 80vh;
  margin: 20px;
  text-align: center;
  float: right;
}

:root {
  --tp-base-background-color: #4d4d4d; /* Base background color: dark gray */
  --tp-base-shadow-color: rgba(0, 0, 0, 0.2); /* Shadow color */
  --tp-button-background-color: #d4aa00; /* Button background color: gold */
  --tp-button-background-color-active: #e6b800; /* Button active background: slightly lighter gold */
  --tp-button-background-color-focus: #c29500; /* Button focus background: darker gold */
  --tp-button-background-color-hover: #ffcc00; /* Button hover background: brighter gold */
  --tp-button-foreground-color: #ffffff; /* Button text color: white */
  --tp-container-background-color: #333333; /* Container background: darker gray */
  --tp-container-background-color-active: #4d4d4d; /* Active container background: matching the base */
  --tp-container-background-color-focus: #5e5e5e; /* Focused container background: slightly lighter gray */
  --tp-container-background-color-hover: #666666; /* Hovered container background: mid-gray */
  --tp-container-foreground-color: #ffffff; /* Container text color: white */
  --tp-groove-foreground-color: #d4aa00; /* Groove color: gold */
  --tp-input-background-color: #4d4d4d; /* Input background: dark gray */
  --tp-input-background-color-active: #333333; /* Active input background: darker gray */
  --tp-input-background-color-focus: #5e5e5e; /* Focused input background: slightly lighter gray */
  --tp-input-background-color-hover: #666666; /* Hovered input background: mid-gray */
  --tp-input-foreground-color: #ffffff; /* Input text color: white */
  --tp-label-foreground-color: #d4aa00; /* Label text color: gold */
  --tp-monitor-background-color: #333333; /* Monitor (display box) background: darker gray */
  --tp-monitor-foreground-color: #ffffff; /* Monitor text color: white */
}