Pq234/robot-learning-tutorial

1/* ============================================================================ */2/* Form Elements - Modern Minimal Design */3/* ============================================================================ */4 5/* Select styling with modern chevron */6select {7  background-color: var(--page-bg);8  border: 1px solid color-mix(in srgb, var(--primary-color) 50%, var(--border-color));9  border-radius: var(--button-radius);10  padding: var(--button-padding-y) var(--button-padding-x) var(--button-padding-y) var(--button-padding-x);11  font-family: var(--default-font-family);12  font-size: var(--button-font-size);13  color: var(--text-color);14  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8.825L1.175 4 2.35 2.825 6 6.475 9.65 2.825 10.825 4z'/%3E%3C/svg%3E");15  background-repeat: no-repeat;16  background-position: right calc(var(--button-padding-x) + 2px) center;17  background-size: 12px;18  cursor: pointer;19  transition: border-color 0.2s ease, box-shadow 0.2s ease;20  -webkit-appearance: none;21  -moz-appearance: none;22  appearance: none;23}24 25select:hover,26select:focus,27select:active {28  border-color: var(--primary-color);29}30 31select:focus {32  outline: none;33  border-color: var(--primary-color);34  box-shadow: 0 0 0 2px rgba(from var(--primary-color) r g b / 0.1);35}36 37select:disabled {38  opacity: 0.6;39  cursor: not-allowed;40  background-color: var(--surface-bg);41}42 43/* Dark theme select chevron */44[data-theme="dark"] select {45  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23bbb' d='M6 8.825L1.175 4 2.35 2.825 6 6.475 9.65 2.825 10.825 4z'/%3E%3C/svg%3E");46}47 48/* Checkbox styling */49input[type="checkbox"] {50  appearance: none;51  width: 16px;52  height: 16px;53  border: 2px solid var(--border-color);54  border-radius: 3px;55  background-color: var(--page-bg);56  cursor: pointer;57  position: relative;58  transition: all 0.2s ease;59  margin-right: var(--spacing-2);60}61 62input[type="checkbox"]:hover {63  border-color: var(--primary-color);64}65 66input[type="checkbox"]:focus {67  outline: none;68  border-color: var(--primary-color);69  box-shadow: 0 0 0 2px rgba(from var(--primary-color) r g b / 0.1);70}71 72input[type="checkbox"]:checked {73  background-color: var(--primary-color);74  border-color: var(--primary-color);75}76 77input[type="checkbox"]:checked::before {78  content: '';79  position: absolute;80  top: 1px;81  left: 4px;82  width: 4px;83  height: 8px;84  border: solid var(--on-primary);85  border-width: 0 2px 2px 0;86  transform: rotate(45deg);87}88 89input[type="checkbox"]:disabled {90  opacity: 0.6;91  cursor: not-allowed;92}93 94/* Radio button styling */95input[type="radio"] {96  appearance: none;97  width: 16px;98  height: 16px;99  border: 2px solid var(--border-color);100  border-radius: 50%;101  background-color: var(--page-bg);102  cursor: pointer;103  position: relative;104  transition: all 0.2s ease;105  margin-right: var(--spacing-2);106}107 108input[type="radio"]:hover {109  border-color: var(--primary-color);110}111 112input[type="radio"]:focus {113  outline: none;114  border-color: var(--primary-color);115  box-shadow: 0 0 0 2px rgba(from var(--primary-color) r g b / 0.1);116}117 118input[type="radio"]:checked {119  border-color: var(--primary-color);120}121 122input[type="radio"]:checked::before {123  content: '';124  position: absolute;125  top: 2px;126  left: 2px;127  width: 8px;128  height: 8px;129  border-radius: 50%;130  background-color: var(--primary-color);131}132 133input[type="radio"]:disabled {134  opacity: 0.6;135  cursor: not-allowed;136}137 138/* Input text styling for consistency */139input[type="text"],140input[type="email"],141input[type="password"],142input[type="number"],143input[type="url"],144input[type="search"],145textarea {146  appearance: none;147  background-color: var(--page-bg);148  border: 1px solid var(--border-color);149  border-radius: var(--button-radius);150  padding: var(--button-padding-y) var(--button-padding-x);151  font-family: var(--default-font-family);152  font-size: var(--button-font-size);153  color: var(--text-color);154  transition: border-color 0.2s ease, box-shadow 0.2s ease;155  width: 100%;156}157 158input[type="text"]:hover,159input[type="email"]:hover,160input[type="password"]:hover,161input[type="number"]:hover,162input[type="url"]:hover,163input[type="search"]:hover,164textarea:hover {165  border-color: var(--primary-color);166}167 168input[type="text"]:focus,169input[type="email"]:focus,170input[type="password"]:focus,171input[type="number"]:focus,172input[type="url"]:focus,173input[type="search"]:focus,174textarea:focus {175  outline: none;176  border-color: var(--primary-color);177  box-shadow: 0 0 0 2px rgba(from var(--primary-color) r g b / 0.1);178}179 180input[type="text"]:disabled,181input[type="email"]:disabled,182input[type="password"]:disabled,183input[type="number"]:disabled,184input[type="url"]:disabled,185input[type="search"]:disabled,186textarea:disabled {187  opacity: 0.6;188  cursor: not-allowed;189  background-color: var(--surface-bg);190}191 192/* Label styling */193label {194  display: flex;195  align-items: center;196  font-size: var(--button-font-size);197  color: var(--text-color);198  cursor: pointer;199  margin-bottom: 0;200  line-height: 1.4;201  user-select: none;202}203 204/* Form group spacing */205.form-group {206  margin-bottom: var(--spacing-4);207  display: flex;208  align-items: center;209  gap: var(--spacing-2);210}211 212.form-group label {213  margin-bottom: 0;214}215 216/* Alternative: for vertical form groups */217.form-group.vertical {218  flex-direction: column;219  align-items: flex-start;220}221 222.form-group.vertical label {223  margin-bottom: var(--spacing-1);224}225 226/* For inline form elements */227.form-inline {228  display: flex;229  align-items: center;230  gap: var(--spacing-2);231  margin-bottom: var(--spacing-3);232}233 234.form-inline label {235  margin-bottom: 0;236}237 238/* Ensure labels in flex containers don't break alignment */239div[style*="display: flex"] label,240div[class*="flex"] label,241.trackio-controls label,242.scale-controls label,243.theme-selector label {244  margin-bottom: 0 !important;245  align-self: center;246}