/* ===================================================== FreeITTools Framework v2.3 form.css Form System Final Production Version ===================================================== */ /* ===================================================== FORM GROUP ===================================================== */ .form-group{ margin-bottom:var(--space-5); } /* ===================================================== LABEL ===================================================== */ label{ display:block; margin-bottom:var(--space-2); color:var(--text-color); font-size:var(--font-size-sm); font-weight:var(--font-medium); line-height:1.4; } label.required::after{ content:" *"; color:var(--danger-color); } /* ===================================================== INPUT / TEXTAREA / SELECT ===================================================== */ input, textarea, select{ width:100%; min-height:var(--input-height); padding:12px 16px; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--surface-color); color:var(--text-color); font-family:var(--font-family); font-size:var(--font-size-md); line-height:1.5; box-sizing:border-box; transition: border-color .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease; } /* ===================================================== TEXTAREA ===================================================== */ textarea{ min-height:160px; resize:vertical; } /* ===================================================== PLACEHOLDER ===================================================== */ input::placeholder, textarea::placeholder{ color:var(--text-muted-color); opacity:1; } /* ===================================================== HOVER ===================================================== */ input:hover:not(:disabled), textarea:hover:not(:disabled), select:hover:not(:disabled){ border-color:var(--border-dark-color); } /* ===================================================== FOCUS ===================================================== */ input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--primary-color); box-shadow:var(--focus-ring); } /* ===================================================== FOCUS VISIBLE ===================================================== */ input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:2px solid var(--primary-color); outline-offset:2px; } /* ===================================================== DISABLED ===================================================== */ input:disabled, textarea:disabled, select:disabled{ cursor:not-allowed; opacity:.65; background:var(--surface-secondary); } /* ===================================================== READONLY ===================================================== */ input[readonly], textarea[readonly]{ background:var(--surface-secondary); cursor:default; } /* ===================================================== SELECT ===================================================== */ select{ cursor:pointer; } /* ===================================================== FORM HELP TEXT ===================================================== */ .form-help{ margin-top:var(--space-2); color:var(--text-light-color); font-size:var(--font-size-sm); line-height:1.5; } /* ===================================================== FORM ERROR / SUCCESS ===================================================== */ .form-error{ margin-top:var(--space-2); color:var(--danger-color); font-size:var(--font-size-sm); line-height:1.5; } .form-success{ margin-top:var(--space-2); color:var(--success-color); font-size:var(--font-size-sm); line-height:1.5; } /* ===================================================== VALIDATION STATES ===================================================== */ .input-success{ border-color:var(--success-color) !important; } .input-success:focus{ box-shadow: 0 0 0 3px rgba(22,163,74,.15); } .input-warning{ border-color:var(--warning-color) !important; } .input-warning:focus{ box-shadow: 0 0 0 3px rgba(245,158,11,.15); } .input-error{ border-color:var(--danger-color) !important; } .input-error:focus{ box-shadow: 0 0 0 3px rgba(220,38,38,.15); } /* ===================================================== FORM ROW ===================================================== */ .form-row{ display:flex; flex-wrap:wrap; gap:var(--space-5); } .form-row .form-group{ flex:1; min-width:220px; } /* ===================================================== INPUT GROUP ===================================================== */ .input-group{ display:flex; align-items:stretch; width:100%; } .input-group input, .input-group textarea, .input-group select{ flex:1; min-width:0; } /* ===================================================== INPUT GROUP BUTTON ===================================================== */ .input-group .btn{ flex-shrink:0; } /* ===================================================== INLINE INPUT GROUP ===================================================== */ .input-group > input, .input-group > select{ border-top-right-radius:0; border-bottom-right-radius:0; } .input-group > .btn{ border-top-left-radius:0; border-bottom-left-radius:0; } /* ===================================================== CHECKBOX ===================================================== */ input[type="checkbox"]{ width:18px; height:18px; min-height:18px; padding:0; accent-color:var(--primary-color); cursor:pointer; } /* ===================================================== RADIO ===================================================== */ input[type="radio"]{ width:18px; height:18px; min-height:18px; padding:0; accent-color:var(--primary-color); cursor:pointer; } /* ===================================================== CHECKBOX / RADIO GROUP ===================================================== */ .form-check{ display:flex; align-items:flex-start; gap:10px; margin-bottom:var(--space-3); } .form-check input{ flex-shrink:0; margin-top:3px; } .form-check label{ display:inline; margin:0; font-weight:var(--font-normal); cursor:pointer; } /* ===================================================== FILE UPLOAD ===================================================== */ input[type="file"]{ min-height:auto; padding:10px; cursor:pointer; } /* ===================================================== RANGE SLIDER ===================================================== */ input[type="range"]{ min-height:auto; padding:0; border:0; background:transparent; box-shadow:none; accent-color:var(--primary-color); cursor:pointer; } input[type="range"]:focus{ box-shadow:none; } /* ===================================================== SEARCH INPUT ===================================================== */ input[type="search"]{ appearance:none; -webkit-appearance:none; } /* ===================================================== NUMBER INPUT ===================================================== */ input[type="number"]{ appearance:textfield; -moz-appearance:textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button{ appearance:none; -webkit-appearance:none; margin:0; } /* ===================================================== FIELDSET ===================================================== */ fieldset{ margin:0 0 var(--space-5); padding:var(--space-5); border:1px solid var(--border-color); border-radius:var(--radius-md); } legend{ padding:0 var(--space-2); color:var(--text-color); font-size:var(--font-size-md); font-weight:var(--font-semibold); } /* ===================================================== FORM ACTIONS ===================================================== */ .form-actions{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-5); } /* ===================================================== DARK MODE ===================================================== */ html.dark input, html.dark textarea, html.dark select{ background:var(--surface-color); color:var(--text-color); border-color:var(--border-color); } html.dark input::placeholder, html.dark textarea::placeholder{ color:var(--text-muted-color); } html.dark input:hover:not(:disabled), html.dark textarea:hover:not(:disabled), html.dark select:hover:not(:disabled){ border-color:var(--border-dark-color); } html.dark fieldset{ border-color:var(--border-color); } html.dark legend{ color:var(--text-color); } /* ===================================================== RESPONSIVE ===================================================== */ @media (max-width:768px){ .form-row{ flex-direction:column; gap:var(--space-4); } .form-row .form-group{ min-width:100%; } .input-group{ flex-direction:column; gap:var(--space-2); } .input-group > input, .input-group > select{ border-radius:var(--radius-md); } .input-group > .btn{ width:100%; border-radius:var(--radius-md); } .form-actions{ flex-direction:column; align-items:stretch; } .form-actions .btn{ width:100%; } } /* ===================================================== SMALL MOBILE ===================================================== */ @media (max-width:480px){ input, textarea, select{ padding:11px 14px; font-size:var(--font-size-sm); } textarea{ min-height:140px; } fieldset{ padding:var(--space-4); } } /* ===================================================== REDUCED MOTION ===================================================== */ @media (prefers-reduced-motion:reduce){ input, textarea, select{ transition:none !important; } } /* ===================================================== PRINT ===================================================== */ @media print{ input, textarea, select{ color:#000000; background:#ffffff; border-color:#000000; box-shadow:none; } } /* ===================================================== END OF FORM.CSS ===================================================== */