The CSS file (https://twd-team.be/media/css/app.css) contains standard application layout styles, custom variables, font-face definitions for Source Sans 3, and UI component stylings (like sidebars, header navigation, buttons, and alert growls).
Here are a few quick observations and key takeaways:
Typography: Uses Google Font Source Sans 3 across multiple weights (300, 400, 600, 700) and styles (normal, italic) using .woff2 files and font-display: swap.
Theme Variables (:root):
Focuses on a cohesive slate/indigo theme (#4e5e9e) with standard borders and layer states.
Respects accessibility preferences via @media (prefers-reduced-motion: reduce).
Layout Structure: Built around an #app-wrapper containing a fixed #app-header.navbar, toggleable left/right sidebars (.app-sidebar), and #app-content.
Brand/Mautic References: Class names like .mautic-brand suggest this is or is based on the Mautic marketing automation platform theme (built on Bootstrap/FontAwesome/Remix Icon foundations).
| Category | Classes | Details |
| Font Weights | .fw-b, .fw-sb, .fw-n, .fw-t |
700 (Bold), 600 (Semi), 400 (Normal), 300 (Thin) |
| Font Sizes | .fs-2 through .fs-56 |
Incremental font-size utilities with !important |
| Colors | .text-primary, .text-success, etc. |
Custom theme colors (#4E5D9D, #00B49C, #FDB933, #F86B4F, #35B4B9) |
| Buttons | .btn-rounded, .btn-circle, .btn-outline |
Specialty modifier classes for standard buttons |
At the very end of the snippet, the CSS cuts off mid-selector:
.xdsoft_datetimepicker .xdsoft_calendar td:hover,.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box
If you plan to use datetime pickers (like xdsoft_datetimepicker), you'll want to append the missing styling block at the end, for example:
.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
background: #3d497b !important;
color: #fff !important;
}