Ross
80 lines
2.2 KiB
CSS
80 lines
2.2 KiB
CSS
/* Nice, light styling for forms and modals used in request flows */
|
|
:root{
|
|
--primary:#2b8fd6;
|
|
--primary-dark:#226a9e;
|
|
--muted:#6b7280;
|
|
--bg:#ffffff;
|
|
--glass: rgba(255,255,255,0.8);
|
|
}
|
|
|
|
/* Make modal card a pleasant width and add gentle shadow */
|
|
#modal .modal-card, #modal .modal-content {
|
|
width: min(820px, 96%);
|
|
border-radius: 10px;
|
|
overflow: visible;
|
|
}
|
|
|
|
#modal .modal-card-head .modal-card-title {
|
|
font-weight: 600;
|
|
font-size: 1.15rem;
|
|
color: #0b2540;
|
|
}
|
|
|
|
#modal .modal-card-body {
|
|
padding-top: 0.75rem;
|
|
}
|
|
|
|
/* Form layout improvements */
|
|
form .field {
|
|
margin-bottom: 0.9rem;
|
|
}
|
|
|
|
form label {
|
|
font-weight: 600;
|
|
color: var(--muted);
|
|
margin-bottom: 0.25rem;
|
|
display:block;
|
|
}
|
|
|
|
/* Make inputs stretch and more modern */
|
|
input[type="text"], input[type="date"], input[type="email"], input[type="number"], textarea, select {
|
|
width: 100%;
|
|
padding: 0.55rem 0.6rem;
|
|
border-radius: 6px;
|
|
border: 1px solid #dfe6ee;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
|
|
background: linear-gradient(180deg,#fff,#fcfdff);
|
|
}
|
|
|
|
textarea { min-height: 100px; }
|
|
|
|
.form-errors, .help.is-danger { color: #9b1c1c; background: #fff2f2; padding:0.5rem; border-radius:6px; border:1px solid #f1c0c0 }
|
|
|
|
/* Primary button styling */
|
|
.button.is-primary {
|
|
background: linear-gradient(180deg,var(--primary),var(--primary-dark));
|
|
color: white;
|
|
border: none;
|
|
box-shadow: 0 4px 12px rgba(43,143,214,0.16);
|
|
}
|
|
|
|
.button.is-primary:hover{ background: linear-gradient(180deg,var(--primary-dark),#1b5a82); }
|
|
|
|
.button + .button { margin-left: 0.5rem; }
|
|
|
|
/* Small helpers for inline legend */
|
|
.legend-swatch { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:0.5rem; vertical-align:middle; border:1px solid #ddd }
|
|
|
|
/* Responsive tweaks */
|
|
@media (max-width: 640px){
|
|
#modal .modal-card, #modal .modal-content { width: 96%; }
|
|
.button.is-primary { width: 100%; }
|
|
}
|
|
|
|
/* Leave list styling */
|
|
#leave-list ul { list-style:none; padding:0; margin:0; }
|
|
#leave-list li { padding:0.6rem 0; border-bottom:1px solid #f3f6f9; display:flex; align-items:center; justify-content:space-between }
|
|
#leave-list li .leave-range { font-weight:600; color:#0b2540 }
|
|
#leave-list li em { color:var(--muted); margin-left:0.5rem }
|
|
#leave-list li form { margin-left:1rem }
|