Dice

treebalue

tree

/* styles.css */ /* Base Styles */ body { font-family: Arial, sans-serif; margin : 0px; color : #686154; } h1 { text-align: center; } #container { padding: 20px; } /* Container for the input boxes */ #input-container { width: 100%; max-width: none; /* Allow full browser width */ margin: 0 auto; /* Center the container if needed */ } /* Styles for the input wrapper */ .input-wrapper { display: flex; align-items: center; margin-bottom: 10px; width: 100%; /* Utilize full browser width */ } /* Updated input and select styles for better responsiveness */ .input-wrapper input[type="text"], .input-wrapper select { padding: 8px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; margin-right: 10px; margin-bottom: 10px; flex: none; } /* Specific width adjustments */ .input-wrapper input[type="text"].expr-input { flex: 1; /* Takes up remaining space */ min-width: 200px; /* Ensures a minimum width */ } .input-wrapper input[type="text"].name-input { width: 12%; /* Expression name input */ } .input-wrapper select.level-select, .input-wrapper select.cr-select { width: 8%; /* Minimal width for Level and CR selects */ } .input-wrapper .average, .input-wrapper .crit-percent, .input-wrapper .hit-percent { width: 8%; /* Equal widths for statistics */ font-weight: bold; color: #686154; margin-right: 10px; } /* Styling for the error message */ .error-message { color: red; font-size: 12px; margin-top: 5px; width: 100%; display: none; /* Hidden by default */ } /* Container for the chart */ #chart-container { width: 100%; max-width: none; /* Allow full browser width */ margin: 20px auto; /* Center the chart horizontally and add vertical spacing */ } /* Fixed height for the chart */ #dice-chart { width: 100%; height: 400px; /* Fixed height as per requirement */ } /* Header Styles */ #header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; height: 150px; padding: 10px; margin: 20px; background-color: #F6F2E8; /* Optional: Background color for header */ border: 1px solid #686154; /* Optional: Border for header */ border-radius: 5px; /* Optional: Rounded corners */ } /* Header Columns */ .header-column { display: flex; align-items: center; justify-content: center; } .image-column { flex: 0 0 150px; /* Fixed width and height for square */ height: 150px; } .header-image { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; } .textarea-column { flex: 1.5; margin: 0 20px; } .header-textarea { width: 100%; height: 80px; padding: 8px; font-size: 14px; resize: none; border: 1px solid #ccc; border-radius: 4px; } .key-column { flex: 1; margin: 0 20px; } .key-content { text-align: left; font-size: 13px; color : #686154; } .key-content h3 { margin-bottom: 5px; } .key-content ul { list-style: none; padding: 0; } .key-content li { display: flex; align-items: center; margin-bottom: 3px; } .key-item { display: inline-block; width: 20px; margin-right: 8px; border-radius: 50%; } /* Example key item colors */ .key-item.red { background-color: red; } .key-item.green { background-color: green; } .key-item.black { background-color: black; } .links-column { flex: .2; display: flex; justify-content: flex-end; margin: 0 20px; } .links-content a { margin-left: 15px; text-decoration: none; color: #007BFF; font-weight: bold; } .links-content a:hover { text-decoration: underline; } /* Share Button within Links Column */ .links-content button { padding: 8px 16px; font-size: 14px; cursor: pointer; display : block; margin-bottom: 10px; background-color: #686154; color: white; /* White text */ border: none; border-radius: 4px; transition: background-color 0.3s; } .links-content button:hover { background-color: #ccc; } /* ExpressionTree Stylesheet */ /* Base node styling */ .node { border: 1px solid #ccc; padding: 10px; margin: 5px; text-align: center; border-radius: 4px; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); } /* Operator nodes */ .operator { color: red; background-color: #ffe6e6; } /* Constant nodes */ .constant { color: blue; background-color: #e6f0ff; } /* Dice nodes */ .dice { color: green; background-color: #e6ffe6; } /* Conditional nodes */ .conditional { color: purple; background-color: #f3e6ff; } /* Operator symbols */ .operator-symbol { font-weight: bold; margin: 10px; } /* Container for child nodes */ .children { display: flex; justify-content: space-around; margin-top: 10px; } /* Individual child containers */ .child { margin: 0 10px; display: flex; flex-direction: column; } /* Labels within conditional nodes */ .label { font-weight: bold; margin-bottom: 5px; } /* Responsive adjustments */ @media (max-width: 600px) { .input-wrapper { flex-direction: column; align-items: flex-start; } .input-wrapper input[type="text"].expr-input, .input-wrapper input[type="text"].name-input, .input-wrapper select.level-select, .input-wrapper select.cr-select, .input-wrapper .average, .input-wrapper .crit-percent, .input-wrapper .hit-percent { width: 100%; /* Stack inputs vertically on smaller screens */ margin-right: 0; } .average, .crit-percent, .hit-percent { margin-right: 0; } /* Header Responsive Adjustments */ #header { flex-direction: column; height: auto; } .image-column { margin-bottom: 10px; } .textarea-column, .key-column, .links-column { margin: 10px 0; } .links-column { justify-content: center; } }