Update CSS to properly style Hijri field with label layout matching Odoo standards

This commit is contained in:
Mohamed Eltayar 2025-08-28 15:41:41 +03:00
parent d56250eca8
commit b24a733f24
1 changed files with 52 additions and 41 deletions

View File

@ -60,34 +60,44 @@
.o_datepicker {
.o_datepicker_button {
&.o_hijri_datepicker_button {
top: 30px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
}
// New styles for date labels and sections
.o_date_section {
margin-bottom: 5px;
// Hijri field container
.o_hijri_field_container {
margin-top: 8px;
.o_date_label {
display: block;
font-size: 11px;
font-weight: 600;
color: #6c757d;
margin-bottom: 2px;
&.o_gregorian_label {
color: #007bff;
}
&.o_hijri_label {
color: #28a745;
}
}
.o_date_input_container {
position: relative;
.o_hijri_field_row {
display: flex;
align-items: center;
.o_hijri_label_container {
min-width: 120px;
padding-right: 8px;
text-align: right;
.o_hijri_label {
font-size: 13px;
font-weight: normal;
color: #495057;
margin-bottom: 0;
white-space: nowrap;
}
}
.o_hijri_input_container {
flex: 1;
position: relative;
.o_hijri {
width: 100%;
padding-right: 30px; // مساحة للزرار
}
}
}
}
}
@ -95,30 +105,31 @@
// Form view specific styles
.o_form_view {
.o_datepicker {
.o_date_section {
.o_date_label {
font-size: 12px;
margin-bottom: 3px;
.o_hijri_field_container {
.o_hijri_field_row {
.o_hijri_label_container {
min-width: 140px; // عرض أكبر في الفورم
}
}
}
}
}
// Read-only mode improvements
.o_field_date.o_readonly_modifier {
.o_date_section {
margin-bottom: 8px;
.o_date_label {
font-size: 11px;
font-weight: 600;
color: #6c757d;
margin-bottom: 2px;
}
.o_date_value {
padding: 2px 0;
font-size: 13px;
// Responsive adjustments
@media (max-width: 768px) {
.o_datepicker {
.o_hijri_field_container {
.o_hijri_field_row {
flex-direction: column;
align-items: stretch;
.o_hijri_label_container {
min-width: auto;
text-align: right;
padding-right: 0;
margin-bottom: 4px;
}
}
}
}
}