mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-19 04:17:52 +00:00
60 lines
1.7 KiB
Markdown
60 lines
1.7 KiB
Markdown
Lollms theme:
|
|
|
|
1. Use Tailwind CSS for styling:
|
|
```html
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
```
|
|
|
|
2. Implement a gradient background:
|
|
```html
|
|
<body class="bg-gradient-to-r from-blue-100 to-purple-100 font-sans">
|
|
```
|
|
|
|
3. Create a container with responsive padding:
|
|
```html
|
|
<div class="container mx-auto px-4 py-8">
|
|
```
|
|
|
|
4. Style headers with large, bold text in indigo:
|
|
```html
|
|
<h1 class="text-4xl font-bold text-indigo-800">Chat with PDFs</h1>
|
|
```
|
|
|
|
5. Use white backgrounds with shadow for content areas:
|
|
```html
|
|
<div class="bg-white shadow-lg rounded-lg p-6 mb-8">
|
|
```
|
|
|
|
6. Style buttons with indigo background and hover effects:
|
|
```html
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded transition duration-300">
|
|
```
|
|
|
|
7. Implement a responsive layout using Flexbox:
|
|
```html
|
|
<main class="flex flex-col md:flex-row gap-8">
|
|
```
|
|
|
|
8. Style input fields with indigo borders and focus effects:
|
|
```html
|
|
<input type="text" class="border border-indigo-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
|
```
|
|
|
|
9. Use SVG icons for buttons:
|
|
```html
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<!-- SVG path data -->
|
|
</svg>
|
|
```
|
|
|
|
10. Implement a settings popup with a blurred overlay:
|
|
```html
|
|
<div id="settingsOverlay" class="blurred-overlay"></div>
|
|
<div id="settingsPopup" class="settings-popup">
|
|
<!-- Settings content -->
|
|
</div>
|
|
```
|
|
|
|
This style guide focuses on creating a clean, modern interface with a purple-blue color scheme, responsive design, and smooth transitions. It uses Tailwind CSS for rapid styling and incorporates SVG icons for a polished look.
|
|
|