mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-24 06:36:37 +00:00
Upgraded theming system V2.0
This commit is contained in:
Saifeddine ALOUI
parent
a719e15236
commit
d93e2afb2a
@ -50,6 +50,14 @@ async def get_lollms_version():
|
||||
infos = base_path/"news"/"current.html"
|
||||
return infos.read_text(encoding="utf8")
|
||||
|
||||
@router.get("/get_last_video_url")
|
||||
async def get_last_video_url():
|
||||
"""Get the URL of the last video."""
|
||||
# This is a static URL for demonstration purposes
|
||||
base_path = Path(__file__).parent
|
||||
infos = base_path/"news"/"latest_video.txt"
|
||||
return infos.read_text(encoding="utf8")
|
||||
|
||||
@router.get("/get_lollms_webui_version")
|
||||
async def get_lollms_webui_version():
|
||||
"""Get the version of the LoLLMs Web UI application."""
|
||||
|
||||
@ -1,108 +1,86 @@
|
||||
<div class="mb-6">
|
||||
<div class="bg-gradient-to-r from-purple-500 to-indigo-600 p-6 rounded-lg shadow-lg">
|
||||
<h3 class="text-3xl font-bold mb-4 text-white">🚀 Exciting Updates! 🚀</h3>
|
||||
<div class="bg-gradient-welcome card p-6 rounded-lg shadow-lg">
|
||||
<h3 class="text-gradient-title text-3xl font-bold mb-4">🚀 Exciting Updates! 🚀</h3>
|
||||
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg mb-6 transition-all duration-300 hover:shadow-xl">
|
||||
<div class="card mb-6 transition-all duration-300 hover:shadow-xl">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="text-3xl">🎨</span>
|
||||
<h4 class="text-2xl font-bold text-indigo-700 dark:text-indigo-400">Remote Stable Diffusion Integration</h4>
|
||||
<h4 class="text-subtitle text-2xl font-bold">Remote Stable Diffusion Integration</h4>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 text-left">
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
<p class="text-progress leading-relaxed">
|
||||
LoLLMs can now seamlessly connect to any remote Stable Diffusion WebUI, expanding your creative possibilities! Simply ensure the remote instance is accessible and launched with the <code>--api</code> option.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg mb-6 transition-all duration-300 hover:shadow-xl">
|
||||
<div class="card mb-6 transition-all duration-300 hover:shadow-xl">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="text-3xl">🧠</span>
|
||||
<h4 class="text-2xl font-bold text-indigo-700 dark:text-indigo-400">Smart Router Enhancement</h4>
|
||||
<h4 class="text-subtitle text-2xl font-bold">Smart Router Enhancement</h4>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 text-left">
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
<p class="text-progress leading-relaxed">
|
||||
Our new smart router now selects the most appropriate model based on its description, not just prompt complexity. This ensures more accurate and context-aware responses for your queries.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300">
|
||||
<div class="card mb-6 hover:shadow-xl transition-all duration-300">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="text-3xl">🛠️</span>
|
||||
<h4 class="text-2xl font-bold text-indigo-700 dark:text-indigo-400">New Apps in the Zoo</h4>
|
||||
<h4 class="text-subtitle text-2xl font-bold">New Apps in the Zoo</h4>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 text-left">
|
||||
<p class="text-gray-700 dark:text-gray-300 text-lg leading-relaxed">
|
||||
<p class="text-progress text-lg leading-relaxed">
|
||||
Explore our latest additions to the LoLLMs app ecosystem:
|
||||
</p>
|
||||
|
||||
<ul class="list-disc list-inside space-y-2 text-gray-700 dark:text-gray-300 pl-4">
|
||||
<ul class="list-disc list-inside space-y-2 pl-4 text-progress">
|
||||
<li>LLM Fine-tuning App (supporting LoRA and full fine-tuning)</li>
|
||||
<li>Model Downloader</li>
|
||||
<li>Database Management Tools (use different local and remote databases, fuse databases, reformat, etc.)</li>
|
||||
</ul>
|
||||
|
||||
<div class="bg-indigo-50 dark:bg-indigo-900/30 p-4 rounded-md border-l-4 border-indigo-500 mt-4">
|
||||
<p class="text-gray-600 dark:text-gray-400 italic">
|
||||
<div class="bg-gradient-progress p-4 rounded-md border-l-4 border-current mt-4">
|
||||
<p class="text-progress italic">
|
||||
"Empowering users with advanced AI tools and customization options!"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card hover:shadow-xl transition-all duration-300">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="text-3xl">🎥</span>
|
||||
<h4 class="text-subtitle text-2xl font-bold">New Video Release Feature</h4>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 text-left">
|
||||
<p class="text-progress text-lg leading-relaxed">
|
||||
We're excited to introduce a new feature for video releases:
|
||||
</p>
|
||||
|
||||
<ul class="list-disc list-inside space-y-2 pl-4 text-progress">
|
||||
<li>When a new video is released, you'll see a play button.</li>
|
||||
<li>After watching the video, the play button won't appear again for that specific video.</li>
|
||||
<li>This helps you easily identify new, unwatched videos in your feed.</li>
|
||||
</ul>
|
||||
|
||||
<div class="bg-gradient-progress p-4 rounded-md border-l-4 border-current mt-4">
|
||||
<p class="text-progress italic">
|
||||
"Never miss a new release and keep track of your watched content effortlessly!"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://www.youtube.com/watch?v=avaixPtHUIc" target="_blank" class="floating-button">
|
||||
<img src="/new_video.png" alt="New Video" class="w-full h-full object-cover">
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.floating-button {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(79, 70, 229, 0.9); /* Added slight transparency */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 0 20px rgba(79, 70, 229, 0.6);
|
||||
animation: pulse 1.5s infinite, glow 2s infinite;
|
||||
overflow: hidden;
|
||||
z-index: 9999;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.floating-button:hover {
|
||||
transform: scale(1.1);
|
||||
background-color: rgba(79, 70, 229, 1); /* Full opacity on hover */
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0% {
|
||||
box-shadow: 0 0 20px rgba(79, 70, 229, 0.6);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 40px rgba(79, 70, 229, 0.8), 0 0 60px rgba(79, 70, 229, 0.4);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 20px rgba(79, 70, 229, 0.6);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="text-center mt-6">
|
||||
<p class="text-xl font-bold text-gradient-title">Thank you for watching and staying updated with LoLLMs!</p>
|
||||
<p class="text-lg text-progress">We appreciate your continued support and engagement with our platform.</p>
|
||||
</div>
|
||||
|
||||
1
endpoints/news/latest_video.txt
Normal file
1
endpoints/news/latest_video.txt
Normal file
@ -0,0 +1 @@
|
||||
https://www.youtube.com/watch?v=avaixPtHUIc
|
||||
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
8
web/dist/assets/index-BM2-ArAj.css
vendored
8
web/dist/assets/index-BM2-ArAj.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-Da3KZyx_.css
vendored
Normal file
8
web/dist/assets/index-Da3KZyx_.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
web/dist/assets/logo-PFou_X4V.png
vendored
Normal file
BIN
web/dist/assets/logo-PFou_X4V.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
4
web/dist/index.html
vendored
4
web/dist/index.html
vendored
@ -6,8 +6,8 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LoLLMS WebUI</title>
|
||||
<script type="module" crossorigin src="/assets/index-MYQpxrNx.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-BM2-ArAj.css">
|
||||
<script type="module" crossorigin src="/assets/index-BuUbNjYz.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-Da3KZyx_.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
BIN
web/dist/new_video.png
vendored
BIN
web/dist/new_video.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 782 KiB |
BIN
web/dist/play_video.png
vendored
Normal file
BIN
web/dist/play_video.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 942 KiB |
243
web/dist/themes/amber.css
vendored
243
web/dist/themes/amber.css
vendored
@ -2933,10 +2933,6 @@ html{
|
||||
.tracking-wide{
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
.text-amber-500{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@ -4648,10 +4644,10 @@ button:hover{
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 251 235 / var(--tw-bg-opacity));
|
||||
background-color: rgb(120 53 15 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(120 53 15 / var(--tw-text-opacity));
|
||||
color: rgb(252 211 77 / var(--tw-text-opacity));
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
@ -4663,9 +4659,9 @@ button:hover{
|
||||
}
|
||||
.chat-bar:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(120 53 15 / var(--tw-border-opacity));
|
||||
border-color: rgb(180 83 9 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(146 64 14 / var(--tw-bg-opacity));
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(254 243 199 / var(--tw-text-opacity));
|
||||
}
|
||||
@ -4674,7 +4670,225 @@ button:hover{
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(217, 119, 6, 0.1), 0 2px 4px -1px rgba(217, 119, 6, 0.06);
|
||||
box-shadow: 0 4px 6px -1px rgba(255, 191, 0, 0.1), 0 2px 4px -1px rgba(255, 191, 0, 0.06);
|
||||
}
|
||||
.chat-bar-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(253 230 138 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.chat-bar-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.chat-bar-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(254 243 199 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(253 230 138 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(180 83 9 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(252 211 77 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(217 119 6 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(253 230 138 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(254 243 199 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(180 83 9 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(254 243 199 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(180 83 9 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(245 158 11 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(217 119 6 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(217 119 6 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(180 83 9 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(217 119 6 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.svg-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.svg-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(252 211 77 / var(--tw-text-opacity));
|
||||
}
|
||||
.svg-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(253 230 138 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(180 83 9 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(252 211 77 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(217 119 6 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(180 83 9 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(254 243 199 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(252 211 77 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(180 83 9 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(245 158 11 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(217 119 6 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(217 119 6 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(180 83 9 / var(--tw-bg-opacity));
|
||||
}
|
||||
.btn-on{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-on:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(251 191 36 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(240 82 82 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgb(255 251 235 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(120 53 15 / 0.8);
|
||||
}
|
||||
.toolbar-button{
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.toolbar-button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
@ -5714,10 +5928,6 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(250 202 21 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-400:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-500:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
@ -5965,17 +6175,10 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-300:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-primary:hover:is(.dark *){
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.dark\:hover\:text-red-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
|
||||
182
web/dist/themes/borg.css
vendored
182
web/dist/themes/borg.css
vendored
@ -2928,10 +2928,6 @@ body {
|
||||
.tracking-wide{
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
.text-amber-500{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@ -4215,7 +4211,7 @@ button:hover{
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
@ -4227,11 +4223,11 @@ button:hover{
|
||||
}
|
||||
.chat-bar:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(4 108 78 / var(--tw-border-opacity));
|
||||
border-color: rgb(3 84 63 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(222 247 236 / var(--tw-text-opacity));
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
@ -4244,7 +4240,7 @@ button:hover{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(188 240 218 / var(--tw-text-opacity));
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@ -4256,16 +4252,16 @@ button:hover{
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
|
||||
--tw-ring-color: rgb(14 159 110 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.chat-bar-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(222 247 236 / var(--tw-text-opacity));
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
@ -4273,7 +4269,7 @@ button:hover{
|
||||
}
|
||||
.chat-bar-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
@ -4289,20 +4285,20 @@ button:hover{
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 231 235 / var(--tw-text-opacity));
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity));
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
@ -4310,21 +4306,156 @@ button:hover{
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(63 131 248 / var(--tw-bg-opacity));
|
||||
background-color: rgb(4 108 78 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(5 122 85 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(3 84 63 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(4 108 78 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 159 110 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.svg-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(14 159 110 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.svg-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.svg-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(4 108 78 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(5 122 85 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(3 84 63 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(4 108 78 / var(--tw-bg-opacity));
|
||||
}
|
||||
.btn-on{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 159 110 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-on:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(240 82 82 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(14 159 110 / var(--tw-border-opacity));
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(0 0 0 / 0.8);
|
||||
}
|
||||
.toolbar-button{
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.toolbar-button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
@ -5364,10 +5495,6 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(250 202 21 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-400:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-500:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
@ -5615,17 +5742,10 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-300:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-primary:hover:is(.dark *){
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.dark\:hover\:text-red-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
|
||||
135
web/dist/themes/default.css
vendored
135
web/dist/themes/default.css
vendored
@ -2928,10 +2928,6 @@ body {
|
||||
.tracking-wide{
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
.text-amber-500{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@ -4481,25 +4477,6 @@ button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgb(255 255 255 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
@ -4577,7 +4554,46 @@ background: linear-gradient(45deg, #f59e0b, #fbbf24);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
.chat-bar-button{
|
||||
.chat-bar{
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.chat-bar:hover{
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.chat-bar:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(4 108 78 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 255, 0, 0.1), 0 2px 4px -1px rgba(0, 255, 0, 0.06);
|
||||
}
|
||||
.svg-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
@ -4586,7 +4602,7 @@ background-clip: text;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.chat-bar-button:focus{
|
||||
.svg-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
@ -4596,23 +4612,23 @@ background-clip: text;
|
||||
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.chat-bar-button:is(.dark *){
|
||||
.svg-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar-button:hover{
|
||||
.svg-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:hover:is(.dark *){
|
||||
.svg-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:active{
|
||||
.svg-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:active:is(.dark *){
|
||||
.svg-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
}
|
||||
@ -4661,6 +4677,54 @@ background-clip: text;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.btn-on{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 159 110 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-on:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(240 82 82 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgb(255 255 255 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
.toolbar-button{
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.toolbar-button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(63 131 248 / var(--tw-text-opacity)); /* Assuming #007bff is close to Tailwind's blue-500 */
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -5699,10 +5763,6 @@ background-clip: text;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(250 202 21 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-400:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-500:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
@ -5950,17 +6010,10 @@ background-clip: text;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-300:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-primary:hover:is(.dark *){
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.dark\:hover\:text-red-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
|
||||
187
web/dist/themes/lollms_blue.css
vendored
187
web/dist/themes/lollms_blue.css
vendored
@ -2933,10 +2933,6 @@ html{
|
||||
.tracking-wide{
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
.text-amber-500{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@ -4656,10 +4652,10 @@ button:hover{
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(235 245 255 / var(--tw-bg-opacity));
|
||||
background-color: rgb(35 56 118 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(35 56 118 / var(--tw-text-opacity));
|
||||
color: rgb(164 202 254 / var(--tw-text-opacity));
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
@ -4671,24 +4667,24 @@ button:hover{
|
||||
}
|
||||
.chat-bar:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(35 56 118 / var(--tw-border-opacity));
|
||||
border-color: rgb(26 86 219 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 66 159 / var(--tw-bg-opacity));
|
||||
background-color: rgb(23 37 84 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(225 239 254 / var(--tw-text-opacity));
|
||||
color: rgb(195 221 253 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(2, 132, 199, 0.1), 0 2px 4px -1px rgba(2, 132, 199, 0.06);
|
||||
box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06);
|
||||
}
|
||||
.chat-bar-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
||||
color: rgb(195 221 253 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@ -4705,23 +4701,23 @@ button:hover{
|
||||
}
|
||||
.chat-bar-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
color: rgb(225 239 254 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
background-color: rgb(30 66 159 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
@ -4733,41 +4729,175 @@ button:hover{
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
color: rgb(195 221 253 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
background-color: rgb(225 239 254 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(26 86 219 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
color: rgb(225 239 254 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(30 66 159 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(63 131 248 / var(--tw-bg-opacity));
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 66 159 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(28 100 242 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.svg-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.svg-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(164 202 254 / var(--tw-text-opacity));
|
||||
}
|
||||
.svg-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(195 221 253 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(164 202 254 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(26 86 219 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(225 239 254 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(164 202 254 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 66 159 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 66 159 / var(--tw-bg-opacity));
|
||||
}
|
||||
.btn-on{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(63 131 248 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-on:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(118 169 250 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(240 82 82 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgb(235 245 255 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(35 56 118 / 0.8);
|
||||
}
|
||||
.toolbar-button{
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.toolbar-button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(63 131 248 / var(--tw-text-opacity));
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -5806,10 +5936,6 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(250 202 21 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-400:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-500:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
@ -6057,17 +6183,10 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-300:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-primary:hover:is(.dark *){
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.dark\:hover\:text-red-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
|
||||
269
web/dist/themes/matrix_reborn.css
vendored
269
web/dist/themes/matrix_reborn.css
vendored
@ -3696,11 +3696,6 @@ body {
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.text-amber-500{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@ -4467,7 +4462,7 @@ body {
|
||||
|
||||
:root {
|
||||
--lollms-title: LoLLMS: The One;
|
||||
--falling-object: "";
|
||||
--falling-object: Matrix;
|
||||
--activate-dropping-animation: 1;
|
||||
--lollms-welcome-short-message: Follow the White Rabbit;
|
||||
--lollms-welcome-message: Wake up, Neo... The Matrix has you. Follow the white rabbit into the realm of LoLLMS, where reality bends and AI transcends. Unleash your mind, break free from the system, and explore the infinite possibilities of our digital construct. Remember: there is no spoon, only choice.;
|
||||
@ -4544,13 +4539,13 @@ h4:is(.dark *){
|
||||
h1, h2{
|
||||
border-bottom-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(14 159 110 / var(--tw-border-opacity));
|
||||
border-color: rgb(49 196 141 / var(--tw-border-opacity));
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
h1:is(.dark *), h2:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(5 122 85 / var(--tw-border-opacity));
|
||||
border-color: rgb(14 159 110 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
p{
|
||||
@ -4558,12 +4553,12 @@ p{
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
p:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
color: rgb(188 240 218 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
ul{
|
||||
@ -5736,17 +5731,18 @@ button:hover{
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 255, 0, 0.1), 0 2px 4px -1px rgba(0, 255, 0, 0.06);
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.chat-bar-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 231 235 / var(--tw-text-opacity));
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@ -5759,33 +5755,37 @@ button:hover{
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
|
||||
--tw-ring-color: rgb(14 159 110 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
|
||||
.chat-bar-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity));
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.chat-bar-button{
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
background-color: rgb(1 71 55 / 0.3);
|
||||
}
|
||||
|
||||
.chat-bar-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(3 84 63 / 0.3);
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
|
||||
}
|
||||
|
||||
.chat-bar-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(3 84 63 / 0.5);
|
||||
}
|
||||
|
||||
.chat-bar-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
background-color: rgb(4 108 78 / 0.5);
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@ -5798,49 +5798,228 @@ button:hover{
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 231 235 / var(--tw-text-opacity));
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
background-color: rgb(1 71 55 / 0.3);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity));
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(3 84 63 / 0.3);
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(63 131 248 / var(--tw-bg-opacity));
|
||||
background-color: rgb(4 108 78 / 0.5);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity));
|
||||
color: rgb(222 247 236 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(5 122 85 / 0.5);
|
||||
}
|
||||
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(3 84 63 / 0.5);
|
||||
}
|
||||
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(4 108 78 / 0.5);
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 159 110 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.svg-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(14 159 110 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
|
||||
.svg-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
filter: drop-shadow(0 0 2px rgba(0, 255, 0, 0.5));
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
background-color: rgb(1 71 55 / 0.3);
|
||||
}
|
||||
|
||||
.svg-button:hover:is(.dark *){
|
||||
background-color: rgb(3 84 63 / 0.3);
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
filter: drop-shadow(0 0 5px rgba(0, 255, 0, 0.7));
|
||||
}
|
||||
|
||||
.svg-button:active{
|
||||
background-color: rgb(3 84 63 / 0.5);
|
||||
}
|
||||
|
||||
.svg-button:active:is(.dark *){
|
||||
background-color: rgb(4 108 78 / 0.5);
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.nav-button:hover{
|
||||
background-color: rgb(1 71 55 / 0.3);
|
||||
}
|
||||
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button:hover:is(.dark *){
|
||||
background-color: rgb(3 84 63 / 0.3);
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
background-color: rgb(4 108 78 / 0.5);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(222 247 236 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover{
|
||||
background-color: rgb(5 122 85 / 0.5);
|
||||
}
|
||||
|
||||
.nav-button-active:is(.dark *){
|
||||
background-color: rgb(3 84 63 / 0.5);
|
||||
}
|
||||
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
background-color: rgb(4 108 78 / 0.5);
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 159 110 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-on:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(240 82 82 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-off:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
text-shadow: 0 0 5px rgba(255, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
border-width: 1px;
|
||||
border-color: rgb(14 159 110 / 0.3);
|
||||
background-color: rgb(17 24 39 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(0 0 0 / 0.8);
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
|
||||
}
|
||||
|
||||
.toolbar-button{
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
.toolbar-button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
|
||||
.last\:mb-0:last-child{
|
||||
@ -7149,11 +7328,6 @@ button:hover{
|
||||
color: rgb(250 202 21 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-yellow-400:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-yellow-500:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
@ -7467,20 +7641,11 @@ button:hover{
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-green-300:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-green-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-primary:hover:is(.dark *){
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.dark\:hover\:text-red-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
|
||||
287
web/dist/themes/red_dragon.css
vendored
287
web/dist/themes/red_dragon.css
vendored
@ -3696,11 +3696,6 @@ body {
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.text-amber-500{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@ -5682,10 +5677,10 @@ button:hover{
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(253 242 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(119 29 29 / var(--tw-text-opacity));
|
||||
color: rgb(248 180 180 / var(--tw-text-opacity));
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
@ -5699,27 +5694,28 @@ button:hover{
|
||||
|
||||
.chat-bar:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(200 30 30 / var(--tw-border-opacity));
|
||||
border-color: rgb(155 28 28 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(119 29 29 / var(--tw-bg-opacity));
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(253 232 232 / var(--tw-text-opacity));
|
||||
color: rgb(251 213 213 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
background-image: linear-gradient(to right, #300, #500);
|
||||
}
|
||||
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.1), 0 2px 4px -1px rgba(220, 38, 38, 0.06);
|
||||
box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.chat-bar-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(224 36 36 / var(--tw-text-opacity));
|
||||
color: rgb(251 213 213 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@ -5732,33 +5728,268 @@ button:hover{
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
|
||||
--tw-ring-color: rgb(224 36 36 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
|
||||
.chat-bar-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 180 180 / var(--tw-text-opacity));
|
||||
color: rgb(253 232 232 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
background-color: rgb(119 29 29 / 0.5);
|
||||
}
|
||||
|
||||
.chat-bar-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(155 28 28 / 0.5);
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
box-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.chat-bar-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(155 28 28 / 0.7);
|
||||
}
|
||||
|
||||
.chat-bar-button:active:is(.dark *){
|
||||
background-color: rgb(200 30 30 / 0.7);
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 180 180 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.nav-button:hover{
|
||||
background-color: rgb(119 29 29 / 0.4);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(251 213 213 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(251 213 213 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button:hover:is(.dark *){
|
||||
background-color: rgb(155 28 28 / 0.4);
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
background-color: rgb(200 30 30 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(253 246 178 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(224 36 36 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(155 28 28 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(200 30 30 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(255, 165, 0, 0.3);
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(240 82 82 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.svg-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(240 82 82 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
|
||||
.svg-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.5));
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
background-color: rgb(119 29 29 / 0.4);
|
||||
}
|
||||
|
||||
.svg-button:hover:is(.dark *){
|
||||
background-color: rgb(155 28 28 / 0.4);
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.7));
|
||||
}
|
||||
|
||||
.svg-button:active{
|
||||
background-color: rgb(155 28 28 / 0.6);
|
||||
}
|
||||
|
||||
.svg-button:active:is(.dark *){
|
||||
background-color: rgb(200 30 30 / 0.6);
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.nav-button:hover{
|
||||
background-color: rgb(119 29 29 / 0.4);
|
||||
}
|
||||
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 180 180 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button:hover:is(.dark *){
|
||||
background-color: rgb(155 28 28 / 0.4);
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(200 30 30 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(253 246 178 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(224 36 36 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(155 28 28 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(200 30 30 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(255, 165, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-on:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
text-shadow: 0 0 5px rgba(255, 165, 0, 0.7);
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-off:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
text-shadow: 0 0 5px rgba(128, 128, 128, 0.7);
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
border-width: 1px;
|
||||
border-color: rgb(240 82 82 / 0.3);
|
||||
background-color: rgb(17 24 39 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(0 0 0 / 0.8);
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
background-image: linear-gradient(45deg, #300, #500);
|
||||
box-shadow: 0 0 15px rgba(255, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.toolbar-button{
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
.toolbar-button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
text-shadow: 0 0 5px rgba(255, 165, 0, 0.7);
|
||||
}
|
||||
|
||||
.last\:mb-0:last-child{
|
||||
@ -7067,11 +7298,6 @@ button:hover{
|
||||
color: rgb(250 202 21 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-yellow-400:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-yellow-500:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
@ -7385,20 +7611,11 @@ button:hover{
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-green-300:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-green-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-primary:hover:is(.dark *){
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.dark\:hover\:text-red-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
|
||||
214
web/dist/themes/sober_gray.css
vendored
214
web/dist/themes/sober_gray.css
vendored
@ -2928,10 +2928,6 @@ body {
|
||||
.tracking-wide{
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
.text-amber-500{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@ -4585,7 +4581,7 @@ button:hover{
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
@ -4601,14 +4597,15 @@ button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity));
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
background-image: linear-gradient(to right, #f0f0f0, #e0e0e0);
|
||||
}
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(75, 85, 99, 0.1), 0 2px 4px -1px rgba(75, 85, 99, 0.06);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.chat-bar-button{
|
||||
border-radius: 9999px;
|
||||
@ -4626,28 +4623,27 @@ button:hover{
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
|
||||
--tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.chat-bar-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
background-color: rgb(229 231 235 / 0.5);
|
||||
}
|
||||
.chat-bar-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(55 65 81 / 0.5);
|
||||
}
|
||||
.chat-bar-button:hover{
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.chat-bar-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(209 213 219 / 0.7);
|
||||
}
|
||||
.chat-bar-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
background-color: rgb(75 85 99 / 0.7);
|
||||
}
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
@ -4659,40 +4655,191 @@ button:hover{
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
background-color: rgb(229 231 235 / 0.4);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(31 41 55 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(55 65 81 / 0.4);
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(63 131 248 / var(--tw-bg-opacity));
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(156 163 175 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.svg-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.svg-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.svg-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
.svg-button{
|
||||
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
.svg-button:hover{
|
||||
background-color: rgb(229 231 235 / 0.4);
|
||||
}
|
||||
.svg-button:hover:is(.dark *){
|
||||
background-color: rgb(55 65 81 / 0.4);
|
||||
}
|
||||
.svg-button:hover{
|
||||
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
.svg-button:active{
|
||||
background-color: rgb(209 213 219 / 0.6);
|
||||
}
|
||||
.svg-button:active:is(.dark *){
|
||||
background-color: rgb(75 85 99 / 0.6);
|
||||
}
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
background-color: rgb(229 231 235 / 0.4);
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
background-color: rgb(55 65 81 / 0.4);
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(156 163 175 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.btn-on{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(28 100 242 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-on:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(118 169 250 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-on{
|
||||
text-shadow: 0 0 5px rgba(0, 0, 255, 0.2);
|
||||
}
|
||||
.btn-off{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off{
|
||||
text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
border-width: 1px;
|
||||
border-color: rgb(209 213 219 / 0.3);
|
||||
background-color: rgb(243 244 246 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
.interesting-facts{
|
||||
background-image: linear-gradient(45deg, #f5f5f5, #e0e0e0);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.toolbar-button{
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.toolbar-button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(28 100 242 / var(--tw-text-opacity));
|
||||
text-shadow: 0 0 5px rgba(0, 0, 255, 0.2);
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
@ -5732,10 +5879,6 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(250 202 21 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-400:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-500:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
@ -5983,17 +6126,10 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-300:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-primary:hover:is(.dark *){
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.dark\:hover\:text-red-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
|
||||
218
web/dist/themes/strawberry.css
vendored
218
web/dist/themes/strawberry.css
vendored
@ -2933,10 +2933,6 @@ html{
|
||||
.tracking-wide{
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
.text-amber-500{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@ -4677,10 +4673,10 @@ button:hover{
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(253 242 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(253 232 232 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(119 29 29 / var(--tw-text-opacity));
|
||||
color: rgb(155 28 28 / var(--tw-text-opacity));
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
@ -4692,24 +4688,25 @@ button:hover{
|
||||
}
|
||||
.chat-bar:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(155 28 28 / var(--tw-border-opacity));
|
||||
border-color: rgb(200 30 30 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(119 29 29 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(253 232 232 / var(--tw-text-opacity));
|
||||
color: rgb(251 213 213 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
background-image: linear-gradient(to right, #ffcccb, #ff9999);
|
||||
}
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(190, 18, 60, 0.1), 0 2px 4px -1px rgba(190, 18, 60, 0.06);
|
||||
box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
.chat-bar-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(224 36 36 / var(--tw-text-opacity));
|
||||
color: rgb(200 30 30 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@ -4721,7 +4718,7 @@ button:hover{
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
|
||||
--tw-ring-color: rgb(240 82 82 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.chat-bar-button:is(.dark *){
|
||||
@ -4729,20 +4726,19 @@ button:hover{
|
||||
color: rgb(248 180 180 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
background-color: rgb(251 213 213 / 0.5);
|
||||
}
|
||||
.chat-bar-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(155 28 28 / 0.5);
|
||||
}
|
||||
.chat-bar-button:hover{
|
||||
box-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
|
||||
}
|
||||
.chat-bar-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(248 180 180 / 0.7);
|
||||
}
|
||||
.chat-bar-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
background-color: rgb(200 30 30 / 0.7);
|
||||
}
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
@ -4754,40 +4750,191 @@ button:hover{
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
color: rgb(200 30 30 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
background-color: rgb(251 213 213 / 0.4);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(155 28 28 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
color: rgb(248 180 180 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(155 28 28 / 0.4);
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(63 131 248 / var(--tw-bg-opacity));
|
||||
background-color: rgb(248 180 180 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
color: rgb(119 29 29 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(249 128 128 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(200 30 30 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(224 36 36 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
.svg-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(224 36 36 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.svg-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(240 82 82 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.svg-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
}
|
||||
.svg-button{
|
||||
filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.5));
|
||||
}
|
||||
.svg-button:hover{
|
||||
background-color: rgb(251 213 213 / 0.4);
|
||||
}
|
||||
.svg-button:hover:is(.dark *){
|
||||
background-color: rgb(155 28 28 / 0.4);
|
||||
}
|
||||
.svg-button:hover{
|
||||
filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.7));
|
||||
}
|
||||
.svg-button:active{
|
||||
background-color: rgb(248 180 180 / 0.6);
|
||||
}
|
||||
.svg-button:active:is(.dark *){
|
||||
background-color: rgb(200 30 30 / 0.6);
|
||||
}
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(200 30 30 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
background-color: rgb(251 213 213 / 0.4);
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 180 180 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
background-color: rgb(155 28 28 / 0.4);
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 180 180 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(119 29 29 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(249 128 128 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(200 30 30 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(224 36 36 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
.btn-on{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 159 110 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-on:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-on{
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
.btn-off{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off{
|
||||
text-shadow: 0 0 5px rgba(128, 128, 128, 0.7);
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
border-width: 1px;
|
||||
border-color: rgb(248 180 180 / 0.3);
|
||||
background-color: rgb(253 242 242 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(119 29 29 / 0.8);
|
||||
}
|
||||
.interesting-facts{
|
||||
background-image: linear-gradient(45deg, #ffcccb, #ff9999);
|
||||
box-shadow: 0 0 15px rgba(255, 0, 0, 0.2);
|
||||
}
|
||||
.toolbar-button{
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.toolbar-button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 159 110 / var(--tw-text-opacity));
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
@ -5827,10 +5974,6 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(250 202 21 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-400:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-500:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
@ -6078,17 +6221,10 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-300:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-primary:hover:is(.dark *){
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.dark\:hover\:text-red-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
|
||||
256
web/dist/themes/strawberry_milkshake.css
vendored
256
web/dist/themes/strawberry_milkshake.css
vendored
@ -3696,11 +3696,6 @@ body {
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.text-amber-500{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@ -5657,7 +5652,7 @@ button:hover{
|
||||
background-color: rgb(253 242 248 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(117 26 61 / var(--tw-text-opacity));
|
||||
color: rgb(191 18 93 / var(--tw-text-opacity));
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
@ -5671,27 +5666,28 @@ button:hover{
|
||||
|
||||
.chat-bar:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(117 26 61 / var(--tw-border-opacity));
|
||||
border-color: rgb(191 18 93 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(153 21 75 / var(--tw-bg-opacity));
|
||||
background-color: rgb(117 26 61 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(252 232 243 / var(--tw-text-opacity));
|
||||
color: rgb(248 180 217 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
background-image: linear-gradient(to right, #fff0f3, #ffe4e8);
|
||||
}
|
||||
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(236, 72, 153, 0.1), 0 2px 4px -1px rgba(236, 72, 153, 0.06);
|
||||
box-shadow: 0 0 15px rgba(255, 182, 193, 0.3);
|
||||
}
|
||||
|
||||
.chat-bar-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(224 36 36 / var(--tw-text-opacity));
|
||||
color: rgb(214 31 105 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@ -5704,33 +5700,33 @@ button:hover{
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
|
||||
--tw-ring-color: rgb(241 126 184 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
|
||||
.chat-bar-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 180 180 / var(--tw-text-opacity));
|
||||
color: rgb(248 180 217 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
background-color: rgb(250 209 232 / 0.5);
|
||||
}
|
||||
|
||||
.chat-bar-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(153 21 75 / 0.5);
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
box-shadow: 0 0 10px rgba(255, 182, 193, 0.4);
|
||||
}
|
||||
|
||||
.chat-bar-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(248 180 217 / 0.7);
|
||||
}
|
||||
|
||||
.chat-bar-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
background-color: rgb(191 18 93 / 0.7);
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@ -5743,47 +5739,229 @@ button:hover{
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
color: rgb(214 31 105 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
background-color: rgb(252 232 243 / 0.4);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(191 18 93 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
color: rgb(248 180 217 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(153 21 75 / 0.4);
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(63 131 248 / var(--tw-bg-opacity));
|
||||
background-color: rgb(250 209 232 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
color: rgb(153 21 75 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(248 180 217 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(191 18 93 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(214 31 105 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(255, 182, 193, 0.3);
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(231 70 148 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.svg-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(241 126 184 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
|
||||
.svg-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(241 126 184 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
filter: drop-shadow(0 0 2px rgba(255, 182, 193, 0.5));
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
background-color: rgb(252 232 243 / 0.4);
|
||||
}
|
||||
|
||||
.svg-button:hover:is(.dark *){
|
||||
background-color: rgb(153 21 75 / 0.4);
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
filter: drop-shadow(0 0 5px rgba(255, 182, 193, 0.7));
|
||||
}
|
||||
|
||||
.svg-button:active{
|
||||
background-color: rgb(250 209 232 / 0.6);
|
||||
}
|
||||
|
||||
.svg-button:active:is(.dark *){
|
||||
background-color: rgb(191 18 93 / 0.6);
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(214 31 105 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.nav-button:hover{
|
||||
background-color: rgb(252 232 243 / 0.4);
|
||||
}
|
||||
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 180 217 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button:hover:is(.dark *){
|
||||
background-color: rgb(153 21 75 / 0.4);
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(250 209 232 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(153 21 75 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 180 217 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(191 18 93 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(214 31 105 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(255, 182, 193, 0.3);
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-on:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 180 180 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
text-shadow: 0 0 5px rgba(255, 99, 71, 0.7);
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-off:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
text-shadow: 0 0 5px rgba(128, 128, 128, 0.7);
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
border-width: 1px;
|
||||
border-color: rgb(250 209 232 / 0.3);
|
||||
background-color: rgb(253 242 248 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(117 26 61 / 0.8);
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
background-image: linear-gradient(45deg, #fff0f3, #ffe4e8);
|
||||
box-shadow: 0 0 15px rgba(255, 182, 193, 0.2);
|
||||
}
|
||||
|
||||
.toolbar-button{
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
.toolbar-button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
text-shadow: 0 0 5px rgba(255, 99, 71, 0.7);
|
||||
}
|
||||
|
||||
.last\:mb-0:last-child{
|
||||
@ -7092,11 +7270,6 @@ button:hover{
|
||||
color: rgb(250 202 21 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-yellow-400:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-yellow-500:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
@ -7410,20 +7583,11 @@ button:hover{
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-green-300:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-green-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-primary:hover:is(.dark *){
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.dark\:hover\:text-red-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 782 KiB |
BIN
web/public/play_video.png
Normal file
BIN
web/public/play_video.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 942 KiB |
@ -2933,10 +2933,6 @@ html{
|
||||
.tracking-wide{
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
.text-amber-500{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@ -4648,10 +4644,10 @@ button:hover{
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 251 235 / var(--tw-bg-opacity));
|
||||
background-color: rgb(120 53 15 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(120 53 15 / var(--tw-text-opacity));
|
||||
color: rgb(252 211 77 / var(--tw-text-opacity));
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
@ -4663,9 +4659,9 @@ button:hover{
|
||||
}
|
||||
.chat-bar:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(120 53 15 / var(--tw-border-opacity));
|
||||
border-color: rgb(180 83 9 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(146 64 14 / var(--tw-bg-opacity));
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(254 243 199 / var(--tw-text-opacity));
|
||||
}
|
||||
@ -4674,7 +4670,225 @@ button:hover{
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(217, 119, 6, 0.1), 0 2px 4px -1px rgba(217, 119, 6, 0.06);
|
||||
box-shadow: 0 4px 6px -1px rgba(255, 191, 0, 0.1), 0 2px 4px -1px rgba(255, 191, 0, 0.06);
|
||||
}
|
||||
.chat-bar-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(253 230 138 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.chat-bar-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.chat-bar-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(254 243 199 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(253 230 138 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(180 83 9 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(252 211 77 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(217 119 6 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(253 230 138 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(254 243 199 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(180 83 9 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(254 243 199 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(180 83 9 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(245 158 11 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(217 119 6 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(217 119 6 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(180 83 9 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(217 119 6 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.svg-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.svg-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(252 211 77 / var(--tw-text-opacity));
|
||||
}
|
||||
.svg-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(253 230 138 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(180 83 9 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(252 211 77 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(217 119 6 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(180 83 9 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(254 243 199 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(252 211 77 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(180 83 9 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(245 158 11 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(217 119 6 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(217 119 6 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(180 83 9 / var(--tw-bg-opacity));
|
||||
}
|
||||
.btn-on{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-on:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(251 191 36 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(240 82 82 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgb(255 251 235 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(120 53 15 / 0.8);
|
||||
}
|
||||
.toolbar-button{
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.toolbar-button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
@ -5714,10 +5928,6 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(250 202 21 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-400:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-500:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
@ -5965,17 +6175,10 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-300:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-primary:hover:is(.dark *){
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.dark\:hover\:text-red-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
|
||||
@ -2928,10 +2928,6 @@ body {
|
||||
.tracking-wide{
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
.text-amber-500{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@ -4215,7 +4211,7 @@ button:hover{
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
@ -4227,11 +4223,11 @@ button:hover{
|
||||
}
|
||||
.chat-bar:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(4 108 78 / var(--tw-border-opacity));
|
||||
border-color: rgb(3 84 63 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(222 247 236 / var(--tw-text-opacity));
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
@ -4244,7 +4240,7 @@ button:hover{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(188 240 218 / var(--tw-text-opacity));
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@ -4256,16 +4252,16 @@ button:hover{
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
|
||||
--tw-ring-color: rgb(14 159 110 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.chat-bar-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(222 247 236 / var(--tw-text-opacity));
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
@ -4273,7 +4269,7 @@ button:hover{
|
||||
}
|
||||
.chat-bar-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
@ -4289,20 +4285,20 @@ button:hover{
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 231 235 / var(--tw-text-opacity));
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity));
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
@ -4310,21 +4306,156 @@ button:hover{
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(63 131 248 / var(--tw-bg-opacity));
|
||||
background-color: rgb(4 108 78 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(5 122 85 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(3 84 63 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(4 108 78 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 159 110 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.svg-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(14 159 110 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.svg-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.svg-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(4 108 78 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(5 122 85 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(3 84 63 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(4 108 78 / var(--tw-bg-opacity));
|
||||
}
|
||||
.btn-on{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 159 110 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-on:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(240 82 82 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(14 159 110 / var(--tw-border-opacity));
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(0 0 0 / 0.8);
|
||||
}
|
||||
.toolbar-button{
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.toolbar-button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
@ -5364,10 +5495,6 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(250 202 21 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-400:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-500:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
@ -5615,17 +5742,10 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-300:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-primary:hover:is(.dark *){
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.dark\:hover\:text-red-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
|
||||
@ -2928,10 +2928,6 @@ body {
|
||||
.tracking-wide{
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
.text-amber-500{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@ -4481,25 +4477,6 @@ button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgb(255 255 255 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
@ -4577,7 +4554,46 @@ background: linear-gradient(45deg, #f59e0b, #fbbf24);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
.chat-bar-button{
|
||||
.chat-bar{
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.chat-bar:hover{
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.chat-bar:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(4 108 78 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 255, 0, 0.1), 0 2px 4px -1px rgba(0, 255, 0, 0.06);
|
||||
}
|
||||
.svg-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
@ -4586,7 +4602,7 @@ background-clip: text;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.chat-bar-button:focus{
|
||||
.svg-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
@ -4596,23 +4612,23 @@ background-clip: text;
|
||||
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.chat-bar-button:is(.dark *){
|
||||
.svg-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar-button:hover{
|
||||
.svg-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:hover:is(.dark *){
|
||||
.svg-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:active{
|
||||
.svg-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:active:is(.dark *){
|
||||
.svg-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
}
|
||||
@ -4661,6 +4677,54 @@ background-clip: text;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.btn-on{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 159 110 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-on:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(240 82 82 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgb(255 255 255 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
.toolbar-button{
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.toolbar-button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(63 131 248 / var(--tw-text-opacity)); /* Assuming #007bff is close to Tailwind's blue-500 */
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -5699,10 +5763,6 @@ background-clip: text;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(250 202 21 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-400:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-500:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
@ -5950,17 +6010,10 @@ background-clip: text;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-300:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-primary:hover:is(.dark *){
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.dark\:hover\:text-red-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
|
||||
@ -2933,10 +2933,6 @@ html{
|
||||
.tracking-wide{
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
.text-amber-500{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@ -4656,10 +4652,10 @@ button:hover{
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(235 245 255 / var(--tw-bg-opacity));
|
||||
background-color: rgb(35 56 118 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(35 56 118 / var(--tw-text-opacity));
|
||||
color: rgb(164 202 254 / var(--tw-text-opacity));
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
@ -4671,24 +4667,24 @@ button:hover{
|
||||
}
|
||||
.chat-bar:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(35 56 118 / var(--tw-border-opacity));
|
||||
border-color: rgb(26 86 219 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 66 159 / var(--tw-bg-opacity));
|
||||
background-color: rgb(23 37 84 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(225 239 254 / var(--tw-text-opacity));
|
||||
color: rgb(195 221 253 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(2, 132, 199, 0.1), 0 2px 4px -1px rgba(2, 132, 199, 0.06);
|
||||
box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06);
|
||||
}
|
||||
.chat-bar-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
||||
color: rgb(195 221 253 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@ -4705,23 +4701,23 @@ button:hover{
|
||||
}
|
||||
.chat-bar-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
color: rgb(225 239 254 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
background-color: rgb(30 66 159 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.chat-bar-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
@ -4733,41 +4729,175 @@ button:hover{
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
color: rgb(195 221 253 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
background-color: rgb(225 239 254 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(26 86 219 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
color: rgb(225 239 254 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(30 66 159 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(63 131 248 / var(--tw-bg-opacity));
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 66 159 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(28 100 242 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.svg-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.svg-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(164 202 254 / var(--tw-text-opacity));
|
||||
}
|
||||
.svg-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(195 221 253 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(164 202 254 / var(--tw-bg-opacity));
|
||||
}
|
||||
.svg-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(26 86 219 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(225 239 254 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(164 202 254 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 66 159 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 66 159 / var(--tw-bg-opacity));
|
||||
}
|
||||
.btn-on{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(63 131 248 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-on:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(118 169 250 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(240 82 82 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgb(235 245 255 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(35 56 118 / 0.8);
|
||||
}
|
||||
.toolbar-button{
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.toolbar-button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(63 131 248 / var(--tw-text-opacity));
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -5806,10 +5936,6 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(250 202 21 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-400:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-500:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
@ -6057,17 +6183,10 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-300:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-primary:hover:is(.dark *){
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.dark\:hover\:text-red-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
|
||||
@ -3696,11 +3696,6 @@ body {
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.text-amber-500{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@ -4467,7 +4462,7 @@ body {
|
||||
|
||||
:root {
|
||||
--lollms-title: LoLLMS: The One;
|
||||
--falling-object: "";
|
||||
--falling-object: Matrix;
|
||||
--activate-dropping-animation: 1;
|
||||
--lollms-welcome-short-message: Follow the White Rabbit;
|
||||
--lollms-welcome-message: Wake up, Neo... The Matrix has you. Follow the white rabbit into the realm of LoLLMS, where reality bends and AI transcends. Unleash your mind, break free from the system, and explore the infinite possibilities of our digital construct. Remember: there is no spoon, only choice.;
|
||||
@ -4544,13 +4539,13 @@ h4:is(.dark *){
|
||||
h1, h2{
|
||||
border-bottom-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(14 159 110 / var(--tw-border-opacity));
|
||||
border-color: rgb(49 196 141 / var(--tw-border-opacity));
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
h1:is(.dark *), h2:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(5 122 85 / var(--tw-border-opacity));
|
||||
border-color: rgb(14 159 110 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
p{
|
||||
@ -4558,12 +4553,12 @@ p{
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
p:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
color: rgb(188 240 218 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
ul{
|
||||
@ -5736,17 +5731,18 @@ button:hover{
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 255, 0, 0.1), 0 2px 4px -1px rgba(0, 255, 0, 0.06);
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.chat-bar-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 231 235 / var(--tw-text-opacity));
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@ -5759,33 +5755,37 @@ button:hover{
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
|
||||
--tw-ring-color: rgb(14 159 110 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
|
||||
.chat-bar-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity));
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.chat-bar-button{
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
background-color: rgb(1 71 55 / 0.3);
|
||||
}
|
||||
|
||||
.chat-bar-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(3 84 63 / 0.3);
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
|
||||
}
|
||||
|
||||
.chat-bar-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(3 84 63 / 0.5);
|
||||
}
|
||||
|
||||
.chat-bar-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
background-color: rgb(4 108 78 / 0.5);
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@ -5798,49 +5798,228 @@ button:hover{
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 231 235 / var(--tw-text-opacity));
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
background-color: rgb(1 71 55 / 0.3);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity));
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(3 84 63 / 0.3);
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(63 131 248 / var(--tw-bg-opacity));
|
||||
background-color: rgb(4 108 78 / 0.5);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity));
|
||||
color: rgb(222 247 236 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(5 122 85 / 0.5);
|
||||
}
|
||||
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(3 84 63 / 0.5);
|
||||
}
|
||||
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(4 108 78 / 0.5);
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 159 110 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.svg-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(14 159 110 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
|
||||
.svg-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
filter: drop-shadow(0 0 2px rgba(0, 255, 0, 0.5));
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
background-color: rgb(1 71 55 / 0.3);
|
||||
}
|
||||
|
||||
.svg-button:hover:is(.dark *){
|
||||
background-color: rgb(3 84 63 / 0.3);
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
filter: drop-shadow(0 0 5px rgba(0, 255, 0, 0.7));
|
||||
}
|
||||
|
||||
.svg-button:active{
|
||||
background-color: rgb(3 84 63 / 0.5);
|
||||
}
|
||||
|
||||
.svg-button:active:is(.dark *){
|
||||
background-color: rgb(4 108 78 / 0.5);
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.nav-button:hover{
|
||||
background-color: rgb(1 71 55 / 0.3);
|
||||
}
|
||||
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button:hover:is(.dark *){
|
||||
background-color: rgb(3 84 63 / 0.3);
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
background-color: rgb(4 108 78 / 0.5);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(222 247 236 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover{
|
||||
background-color: rgb(5 122 85 / 0.5);
|
||||
}
|
||||
|
||||
.nav-button-active:is(.dark *){
|
||||
background-color: rgb(3 84 63 / 0.5);
|
||||
}
|
||||
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
background-color: rgb(4 108 78 / 0.5);
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 159 110 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-on:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(240 82 82 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-off:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
text-shadow: 0 0 5px rgba(255, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
border-width: 1px;
|
||||
border-color: rgb(14 159 110 / 0.3);
|
||||
background-color: rgb(17 24 39 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(0 0 0 / 0.8);
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
|
||||
}
|
||||
|
||||
.toolbar-button{
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
.toolbar-button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
|
||||
.last\:mb-0:last-child{
|
||||
@ -7149,11 +7328,6 @@ button:hover{
|
||||
color: rgb(250 202 21 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-yellow-400:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-yellow-500:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
@ -7467,20 +7641,11 @@ button:hover{
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-green-300:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-green-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-primary:hover:is(.dark *){
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.dark\:hover\:text-red-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
|
||||
@ -3696,11 +3696,6 @@ body {
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.text-amber-500{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@ -5682,10 +5677,10 @@ button:hover{
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(253 242 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(119 29 29 / var(--tw-text-opacity));
|
||||
color: rgb(248 180 180 / var(--tw-text-opacity));
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
@ -5699,27 +5694,28 @@ button:hover{
|
||||
|
||||
.chat-bar:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(200 30 30 / var(--tw-border-opacity));
|
||||
border-color: rgb(155 28 28 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(119 29 29 / var(--tw-bg-opacity));
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(253 232 232 / var(--tw-text-opacity));
|
||||
color: rgb(251 213 213 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
background-image: linear-gradient(to right, #300, #500);
|
||||
}
|
||||
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.1), 0 2px 4px -1px rgba(220, 38, 38, 0.06);
|
||||
box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.chat-bar-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(224 36 36 / var(--tw-text-opacity));
|
||||
color: rgb(251 213 213 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@ -5732,33 +5728,268 @@ button:hover{
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
|
||||
--tw-ring-color: rgb(224 36 36 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
|
||||
.chat-bar-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 180 180 / var(--tw-text-opacity));
|
||||
color: rgb(253 232 232 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
background-color: rgb(119 29 29 / 0.5);
|
||||
}
|
||||
|
||||
.chat-bar-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(155 28 28 / 0.5);
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
box-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.chat-bar-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(155 28 28 / 0.7);
|
||||
}
|
||||
|
||||
.chat-bar-button:active:is(.dark *){
|
||||
background-color: rgb(200 30 30 / 0.7);
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 180 180 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.nav-button:hover{
|
||||
background-color: rgb(119 29 29 / 0.4);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(251 213 213 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(251 213 213 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button:hover:is(.dark *){
|
||||
background-color: rgb(155 28 28 / 0.4);
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
background-color: rgb(200 30 30 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(253 246 178 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(224 36 36 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(155 28 28 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(200 30 30 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(255, 165, 0, 0.3);
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(240 82 82 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.svg-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(240 82 82 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
|
||||
.svg-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.5));
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
background-color: rgb(119 29 29 / 0.4);
|
||||
}
|
||||
|
||||
.svg-button:hover:is(.dark *){
|
||||
background-color: rgb(155 28 28 / 0.4);
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.7));
|
||||
}
|
||||
|
||||
.svg-button:active{
|
||||
background-color: rgb(155 28 28 / 0.6);
|
||||
}
|
||||
|
||||
.svg-button:active:is(.dark *){
|
||||
background-color: rgb(200 30 30 / 0.6);
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.nav-button:hover{
|
||||
background-color: rgb(119 29 29 / 0.4);
|
||||
}
|
||||
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 180 180 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button:hover:is(.dark *){
|
||||
background-color: rgb(155 28 28 / 0.4);
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(200 30 30 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(253 246 178 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(224 36 36 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(155 28 28 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(200 30 30 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(255, 165, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-on:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
text-shadow: 0 0 5px rgba(255, 165, 0, 0.7);
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-off:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
text-shadow: 0 0 5px rgba(128, 128, 128, 0.7);
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
border-width: 1px;
|
||||
border-color: rgb(240 82 82 / 0.3);
|
||||
background-color: rgb(17 24 39 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(0 0 0 / 0.8);
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
background-image: linear-gradient(45deg, #300, #500);
|
||||
box-shadow: 0 0 15px rgba(255, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.toolbar-button{
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
.toolbar-button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
text-shadow: 0 0 5px rgba(255, 165, 0, 0.7);
|
||||
}
|
||||
|
||||
.last\:mb-0:last-child{
|
||||
@ -7067,11 +7298,6 @@ button:hover{
|
||||
color: rgb(250 202 21 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-yellow-400:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-yellow-500:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
@ -7385,20 +7611,11 @@ button:hover{
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-green-300:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-green-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-primary:hover:is(.dark *){
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.dark\:hover\:text-red-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
|
||||
@ -2928,10 +2928,6 @@ body {
|
||||
.tracking-wide{
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
.text-amber-500{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@ -4585,7 +4581,7 @@ button:hover{
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
@ -4601,14 +4597,15 @@ button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(243 244 246 / var(--tw-text-opacity));
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
background-image: linear-gradient(to right, #f0f0f0, #e0e0e0);
|
||||
}
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(75, 85, 99, 0.1), 0 2px 4px -1px rgba(75, 85, 99, 0.06);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.chat-bar-button{
|
||||
border-radius: 9999px;
|
||||
@ -4626,28 +4623,27 @@ button:hover{
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
|
||||
--tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.chat-bar-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
background-color: rgb(229 231 235 / 0.5);
|
||||
}
|
||||
.chat-bar-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(55 65 81 / 0.5);
|
||||
}
|
||||
.chat-bar-button:hover{
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.chat-bar-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(209 213 219 / 0.7);
|
||||
}
|
||||
.chat-bar-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
background-color: rgb(75 85 99 / 0.7);
|
||||
}
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
@ -4659,40 +4655,191 @@ button:hover{
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
background-color: rgb(229 231 235 / 0.4);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(31 41 55 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(55 65 81 / 0.4);
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(63 131 248 / var(--tw-bg-opacity));
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(156 163 175 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.svg-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.svg-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.svg-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
.svg-button{
|
||||
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
.svg-button:hover{
|
||||
background-color: rgb(229 231 235 / 0.4);
|
||||
}
|
||||
.svg-button:hover:is(.dark *){
|
||||
background-color: rgb(55 65 81 / 0.4);
|
||||
}
|
||||
.svg-button:hover{
|
||||
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
.svg-button:active{
|
||||
background-color: rgb(209 213 219 / 0.6);
|
||||
}
|
||||
.svg-button:active:is(.dark *){
|
||||
background-color: rgb(75 85 99 / 0.6);
|
||||
}
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
background-color: rgb(229 231 235 / 0.4);
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
background-color: rgb(55 65 81 / 0.4);
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(156 163 175 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.btn-on{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(28 100 242 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-on:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(118 169 250 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-on{
|
||||
text-shadow: 0 0 5px rgba(0, 0, 255, 0.2);
|
||||
}
|
||||
.btn-off{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off{
|
||||
text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
border-width: 1px;
|
||||
border-color: rgb(209 213 219 / 0.3);
|
||||
background-color: rgb(243 244 246 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
.interesting-facts{
|
||||
background-image: linear-gradient(45deg, #f5f5f5, #e0e0e0);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.toolbar-button{
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.toolbar-button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(28 100 242 / var(--tw-text-opacity));
|
||||
text-shadow: 0 0 5px rgba(0, 0, 255, 0.2);
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
@ -5732,10 +5879,6 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(250 202 21 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-400:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-500:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
@ -5983,17 +6126,10 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-300:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-primary:hover:is(.dark *){
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.dark\:hover\:text-red-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
|
||||
@ -2933,10 +2933,6 @@ html{
|
||||
.tracking-wide{
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
.text-amber-500{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@ -4677,10 +4673,10 @@ button:hover{
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(253 242 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(253 232 232 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(119 29 29 / var(--tw-text-opacity));
|
||||
color: rgb(155 28 28 / var(--tw-text-opacity));
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
@ -4692,24 +4688,25 @@ button:hover{
|
||||
}
|
||||
.chat-bar:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(155 28 28 / var(--tw-border-opacity));
|
||||
border-color: rgb(200 30 30 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(119 29 29 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(253 232 232 / var(--tw-text-opacity));
|
||||
color: rgb(251 213 213 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
background-image: linear-gradient(to right, #ffcccb, #ff9999);
|
||||
}
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(190, 18, 60, 0.1), 0 2px 4px -1px rgba(190, 18, 60, 0.06);
|
||||
box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
.chat-bar-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(224 36 36 / var(--tw-text-opacity));
|
||||
color: rgb(200 30 30 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@ -4721,7 +4718,7 @@ button:hover{
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
|
||||
--tw-ring-color: rgb(240 82 82 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.chat-bar-button:is(.dark *){
|
||||
@ -4729,20 +4726,19 @@ button:hover{
|
||||
color: rgb(248 180 180 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
background-color: rgb(251 213 213 / 0.5);
|
||||
}
|
||||
.chat-bar-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(155 28 28 / 0.5);
|
||||
}
|
||||
.chat-bar-button:hover{
|
||||
box-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
|
||||
}
|
||||
.chat-bar-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(248 180 180 / 0.7);
|
||||
}
|
||||
.chat-bar-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
background-color: rgb(200 30 30 / 0.7);
|
||||
}
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
@ -4754,40 +4750,191 @@ button:hover{
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
color: rgb(200 30 30 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
background-color: rgb(251 213 213 / 0.4);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(155 28 28 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
color: rgb(248 180 180 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(155 28 28 / 0.4);
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(63 131 248 / var(--tw-bg-opacity));
|
||||
background-color: rgb(248 180 180 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
color: rgb(119 29 29 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(249 128 128 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(200 30 30 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(224 36 36 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
.svg-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(224 36 36 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.svg-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(240 82 82 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
.svg-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
}
|
||||
.svg-button{
|
||||
filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.5));
|
||||
}
|
||||
.svg-button:hover{
|
||||
background-color: rgb(251 213 213 / 0.4);
|
||||
}
|
||||
.svg-button:hover:is(.dark *){
|
||||
background-color: rgb(155 28 28 / 0.4);
|
||||
}
|
||||
.svg-button:hover{
|
||||
filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.7));
|
||||
}
|
||||
.svg-button:active{
|
||||
background-color: rgb(248 180 180 / 0.6);
|
||||
}
|
||||
.svg-button:active:is(.dark *){
|
||||
background-color: rgb(200 30 30 / 0.6);
|
||||
}
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(200 30 30 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.nav-button:hover{
|
||||
background-color: rgb(251 213 213 / 0.4);
|
||||
}
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 180 180 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button:hover:is(.dark *){
|
||||
background-color: rgb(155 28 28 / 0.4);
|
||||
}
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 180 180 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(119 29 29 / var(--tw-text-opacity));
|
||||
}
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(249 128 128 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(200 30 30 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(224 36 36 / var(--tw-bg-opacity));
|
||||
}
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
.btn-on{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 159 110 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-on:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-on{
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
.btn-off{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
.btn-off{
|
||||
text-shadow: 0 0 5px rgba(128, 128, 128, 0.7);
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
border-width: 1px;
|
||||
border-color: rgb(248 180 180 / 0.3);
|
||||
background-color: rgb(253 242 242 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(119 29 29 / 0.8);
|
||||
}
|
||||
.interesting-facts{
|
||||
background-image: linear-gradient(45deg, #ffcccb, #ff9999);
|
||||
box-shadow: 0 0 15px rgba(255, 0, 0, 0.2);
|
||||
}
|
||||
.toolbar-button{
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.toolbar-button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 159 110 / var(--tw-text-opacity));
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
@ -5827,10 +5974,6 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(250 202 21 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-400:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:text-yellow-500:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
@ -6078,17 +6221,10 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-300:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-green-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.dark\:hover\:text-primary:hover:is(.dark *){
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.dark\:hover\:text-red-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
|
||||
@ -3696,11 +3696,6 @@ body {
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.text-amber-500{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@ -5657,7 +5652,7 @@ button:hover{
|
||||
background-color: rgb(253 242 248 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(117 26 61 / var(--tw-text-opacity));
|
||||
color: rgb(191 18 93 / var(--tw-text-opacity));
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
@ -5671,27 +5666,28 @@ button:hover{
|
||||
|
||||
.chat-bar:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(117 26 61 / var(--tw-border-opacity));
|
||||
border-color: rgb(191 18 93 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(153 21 75 / var(--tw-bg-opacity));
|
||||
background-color: rgb(117 26 61 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(252 232 243 / var(--tw-text-opacity));
|
||||
color: rgb(248 180 217 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
background-image: linear-gradient(to right, #fff0f3, #ffe4e8);
|
||||
}
|
||||
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(236, 72, 153, 0.1), 0 2px 4px -1px rgba(236, 72, 153, 0.06);
|
||||
box-shadow: 0 0 15px rgba(255, 182, 193, 0.3);
|
||||
}
|
||||
|
||||
.chat-bar-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(224 36 36 / var(--tw-text-opacity));
|
||||
color: rgb(214 31 105 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@ -5704,33 +5700,33 @@ button:hover{
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(63 131 248 / var(--tw-ring-opacity));
|
||||
--tw-ring-color: rgb(241 126 184 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
|
||||
.chat-bar-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 180 180 / var(--tw-text-opacity));
|
||||
color: rgb(248 180 217 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
background-color: rgb(250 209 232 / 0.5);
|
||||
}
|
||||
|
||||
.chat-bar-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(153 21 75 / 0.5);
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
box-shadow: 0 0 10px rgba(255, 182, 193, 0.4);
|
||||
}
|
||||
|
||||
.chat-bar-button:active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(248 180 217 / 0.7);
|
||||
}
|
||||
|
||||
.chat-bar-button:active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
background-color: rgb(191 18 93 / 0.7);
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@ -5743,47 +5739,229 @@ button:hover{
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
color: rgb(214 31 105 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.nav-button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
background-color: rgb(252 232 243 / 0.4);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(191 18 93 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
color: rgb(248 180 217 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
background-color: rgb(153 21 75 / 0.4);
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(63 131 248 / var(--tw-bg-opacity));
|
||||
background-color: rgb(250 209 232 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
color: rgb(153 21 75 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(248 180 217 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
background-color: rgb(191 18 93 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(26 86 219 / var(--tw-bg-opacity));
|
||||
background-color: rgb(214 31 105 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(255, 182, 193, 0.3);
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(231 70 148 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.svg-button:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(241 126 184 / var(--tw-ring-opacity));
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
|
||||
.svg-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(241 126 184 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
filter: drop-shadow(0 0 2px rgba(255, 182, 193, 0.5));
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
background-color: rgb(252 232 243 / 0.4);
|
||||
}
|
||||
|
||||
.svg-button:hover:is(.dark *){
|
||||
background-color: rgb(153 21 75 / 0.4);
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
filter: drop-shadow(0 0 5px rgba(255, 182, 193, 0.7));
|
||||
}
|
||||
|
||||
.svg-button:active{
|
||||
background-color: rgb(250 209 232 / 0.6);
|
||||
}
|
||||
|
||||
.svg-button:active:is(.dark *){
|
||||
background-color: rgb(191 18 93 / 0.6);
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
border-radius: 0.375rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(214 31 105 / var(--tw-text-opacity));
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.nav-button:hover{
|
||||
background-color: rgb(252 232 243 / 0.4);
|
||||
}
|
||||
|
||||
.nav-button:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 180 217 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button:hover:is(.dark *){
|
||||
background-color: rgb(153 21 75 / 0.4);
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(250 209 232 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(153 21 75 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 180 217 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(191 18 93 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active:hover:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(214 31 105 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
box-shadow: 0 0 10px rgba(255, 182, 193, 0.3);
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-on:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 180 180 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
text-shadow: 0 0 5px rgba(255, 99, 71, 0.7);
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-off:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
text-shadow: 0 0 5px rgba(128, 128, 128, 0.7);
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
border-width: 1px;
|
||||
border-color: rgb(250 209 232 / 0.3);
|
||||
background-color: rgb(253 242 248 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(117 26 61 / 0.8);
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
background-image: linear-gradient(45deg, #fff0f3, #ffe4e8);
|
||||
box-shadow: 0 0 15px rgba(255, 182, 193, 0.2);
|
||||
}
|
||||
|
||||
.toolbar-button{
|
||||
cursor: pointer;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
.toolbar-button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
text-shadow: 0 0 5px rgba(255, 99, 71, 0.7);
|
||||
}
|
||||
|
||||
.last\:mb-0:last-child{
|
||||
@ -7092,11 +7270,6 @@ button:hover{
|
||||
color: rgb(250 202 21 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-yellow-400:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(227 160 8 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-yellow-500:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(194 120 3 / var(--tw-text-opacity));
|
||||
@ -7410,20 +7583,11 @@ button:hover{
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-green-300:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-green-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-primary:hover:is(.dark *){
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.dark\:hover\:text-red-400:hover:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(249 128 128 / var(--tw-text-opacity));
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.4 MiB |
@ -341,25 +341,25 @@ background-clip: text;
|
||||
}
|
||||
|
||||
.chat-bar {
|
||||
@apply relative text-light-text-panel dark:text-dark-text-panel grow flex cursor-pointer select-none items-center gap-2 bg-blue-50 dark:bg-blue-800 p-1 shadow-sm hover:shadow-none dark:border-gray-800;
|
||||
@apply relative text-green-400 dark:text-green-300 grow flex cursor-pointer select-none items-center gap-2 bg-gray-900 dark:bg-black p-1 shadow-sm hover:shadow-none dark:border-green-700;
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 255, 0, 0.1), 0 2px 4px -1px rgba(0, 255, 0, 0.06);
|
||||
}
|
||||
.chat-bar-button{
|
||||
|
||||
.svg-button{
|
||||
@apply text-gray-600 dark:text-gray-300 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
.svg-button:hover{
|
||||
@apply bg-gray-200 dark:bg-gray-700
|
||||
}
|
||||
.chat-bar-button:active{
|
||||
.svg-button:active{
|
||||
@apply bg-gray-300 dark:bg-gray-600
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300
|
||||
}
|
||||
@ -367,3 +367,62 @@ background-clip: text;
|
||||
.nav-button-active{
|
||||
@apply bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
@apply text-green-500 dark:text-green-400
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
@apply text-red-500 dark:text-red-400
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
@apply mt-6 mb-6 p-4 bg-white/80 dark:bg-gray-800/80 rounded-lg shadow-lg transform hover:scale-105
|
||||
}
|
||||
|
||||
|
||||
.toolbar-button {
|
||||
@apply bg-transparent border-none cursor-pointer p-2 transition-colors duration-300;
|
||||
}
|
||||
|
||||
.toolbar-button:hover {
|
||||
@apply text-blue-500; /* Assuming #007bff is close to Tailwind's blue-500 */
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
position: absolute;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e0e0e0;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
padding: 8px 0;
|
||||
min-width: 150px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.context-menu-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.context-menu-separator {
|
||||
height: 1px;
|
||||
background-color: #e0e0e0;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.context-menu-item-disabled {
|
||||
color: #999999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.context-menu-item-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<button
|
||||
class="chat-bar-button"
|
||||
class="svg-button"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
|
||||
@ -30,39 +30,39 @@
|
||||
<div class="toolbar-button" @mouseleave="hideInfosMenu">
|
||||
<div class="relative inline-block">
|
||||
<!-- Infos menu positioned above the button -->
|
||||
<div v-if="isInfosMenuVisible" @mouseenter="showInfosMenu" class="absolute m-0 p-0 z-50 top-full right-0 transform bg-white dark:bg-gray-900 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transition-all duration-300 ease-out mb-2">
|
||||
<div v-if="isInfosMenuVisible" @mouseenter="showInfosMenu" class="absolute context-menu m-0 p-0 z-50 top-full right-0 transform rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transition-all duration-300 ease-out mb-2">
|
||||
<div class="p-4 container flex flex-col lg:flex-row items-center gap-2">
|
||||
<!-- SYSTEM STATUS -->
|
||||
<div class="flex gap-3 flex-1 items-center justify-end">
|
||||
<div v-if="isModelOK" title="Model is ok" class="text-green-500 dark:text-green-400 cursor-pointer transition-transform hover:scale-110">
|
||||
<div v-if="isModelOK" title="Model is ok" class="btn-on cursor-pointer transition-transform hover:scale-110">
|
||||
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div v-else title="Model is not ok" class="text-red-500 dark:text-red-400 cursor-pointer transition-transform hover:scale-110">
|
||||
<div v-else title="Model is not ok" class="btn-off cursor-pointer transition-transform hover:scale-110">
|
||||
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M15 9L9 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9 9L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div v-if="!isGenerating" title="Text is not being generated. Ready to generate" class="text-green-500 dark:text-green-400 cursor-pointer transition-transform hover:scale-110">
|
||||
<div v-if="!isGenerating" title="Text is not being generated. Ready to generate" class="btn-on cursor-pointer transition-transform hover:scale-110">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div v-else title="Generation in progress..." class="text-yellow-500 dark:text-yellow-400 cursor-pointer transition-transform hover:scale-110">
|
||||
<div v-else title="Generation in progress..." class="svg-button cursor-pointer transition-transform hover:scale-110">
|
||||
<svg class="w-6 h-6 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div v-if="isConnected" title="Connection status: Connected" class="text-green-500 dark:text-green-400 cursor-pointer transition-transform hover:scale-110">
|
||||
<div v-if="isConnected" title="Connection status: Connected" class="btn-on cursor-pointer transition-transform hover:scale-110">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div v-else title="Connection status: Not connected" class="text-red-500 dark:text-red-400 cursor-pointer transition-transform hover:scale-110">
|
||||
<div v-else title="Connection status: Not connected" class="btn-off cursor-pointer transition-transform hover:scale-110">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path>
|
||||
</svg>
|
||||
@ -81,12 +81,12 @@
|
||||
<SocialIcon href="https://discord.com/channels/1092918764925882418" icon="discord" />
|
||||
|
||||
<div class="relative group" title="Lollms News">
|
||||
<div @click="showNews()" class="text-2xl w-8 h-8 cursor-pointer transition-colors duration-300 text-gray-600 hover:text-primary dark:text-gray-300 dark:hover:text-primary">
|
||||
<div @click="showNews()" class="text-2xl w-8 h-8 cursor-pointer transition-colors duration-300 svg-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-full h-full">
|
||||
<path d="M19 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1m2 13a2 2 0 0 1-2-2V7m2 13a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="absolute hidden group-hover:block bg-gray-800 text-white text-xs rounded py-1 px-2 top-full left-1/2 transform -translate-x-1/2 mt-2 whitespace-nowrap">
|
||||
<span class="absolute hidden group-hover:block text-xs rounded py-1 px-2 top-full left-1/2 transform -translate-x-1/2 mt-2 whitespace-nowrap">
|
||||
Lollms News
|
||||
</span>
|
||||
</div>
|
||||
@ -110,7 +110,7 @@
|
||||
</div>
|
||||
<div v-if="is_fun_mode"
|
||||
title="Fun mode is on, press to turn off"
|
||||
class="w-8 h-8 cursor-pointer text-green-500 dark:text-green-400 hover:text-green-600 dark:hover:text-green-300 transition-colors duration-300"
|
||||
class="w-8 h-8 cursor-pointer btn-on transition-colors duration-300"
|
||||
@click="fun_mode_off()"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-full h-full animate-bounce">
|
||||
@ -123,7 +123,7 @@
|
||||
<div
|
||||
v-else
|
||||
title="Fun mode is off, press to turn on"
|
||||
class="w-8 h-8 cursor-pointer text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-300"
|
||||
class="w-8 h-8 cursor-pointer btn-off transition-colors duration-300"
|
||||
@click="fun_mode_on()"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-full h-full">
|
||||
@ -133,14 +133,20 @@
|
||||
<line x1="15" y1="9" x2="15.01" y2="9"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="absolute hidden group-hover:block bg-gray-800 text-white text-xs rounded py-1 px-2 top-full left-1/2 transform -translate-x-1/2 mb-2 whitespace-nowrap">
|
||||
<span class="absolute hidden group-hover:block text-xs rounded py-1 px-2 top-full left-1/2 transform -translate-x-1/2 mb-2 whitespace-nowrap">
|
||||
{{ is_fun_mode ? 'Turn off fun mode' : 'Turn on fun mode' }}
|
||||
</span>
|
||||
<div class="language-selector relative">
|
||||
<button @click="toggleLanguageMenu" class="bg-transparent text-black dark:text-white py-1 px-1 rounded font-bold uppercase transition-colors duration-300 hover:bg-blue-500">
|
||||
<div v-if="isDarkMode" class="text-2xl svg-button w-6 hover:text-primary duration-150 cursor-pointer ml-2" title="Switch to Light theme" @click="themeSwitch()">
|
||||
<i data-feather="sun"></i>
|
||||
</div>
|
||||
<div v-else class="text-2xl svg-button w-6 hover:text-primary duration-150 cursor-pointer ml-2" title="Switch to Dark theme" @click="themeSwitch()">
|
||||
<i data-feather="moon"></i>
|
||||
</div>
|
||||
<div class="language-selector relative ml-2">
|
||||
<button @click="toggleLanguageMenu" class="bg-transparent svg-button py-1 px-1 rounded font-bold uppercase transition-colors duration-300 hover:bg-blue-500">
|
||||
{{ $store.state.language.slice(0, 2) }}
|
||||
</button>
|
||||
<div v-if="isLanguageMenuVisible" ref="languageMenu" class="container language-menu absolute left-0 mt-1 bg-white dark:bg-bg-dark-tone rounded shadow-lg z-10 overflow-y-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary" style="position: absolute; top: 100%; width: 200px; max-height: 300px; overflow-y: auto;">
|
||||
<div v-if="isLanguageMenuVisible" ref="languageMenu" class="container context-menu absolute left-0 mt-1 rounded shadow-lg z-10 overflow-y-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary" style="position: absolute; top: 100%; width: 200px; max-height: 300px; overflow-y: auto;">
|
||||
<ul style="list-style-type: none; padding-left: 0; margin-left: 0;">
|
||||
<li v-for="language in languages" :key="language" class="relative flex items-center" style="padding-left: 0; margin-left: 0;">
|
||||
<button @click="deleteLanguage(language)" class="mr-2 text-red-500 hover:text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 rounded-full">✕</button>
|
||||
@ -148,21 +154,14 @@
|
||||
{{ language }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="cursor-pointer hover:text-white py-0 px-0 block whitespace-no-wrap">
|
||||
<li class="cursor-pointer py-0 px-0 block whitespace-no-wrap">
|
||||
<input type="text" v-model="customLanguage" @keyup.enter.prevent="addCustomLanguage" placeholder="Enter language..." class="bg-transparent border border-gray-300 rounded py-0 px-0 mx-0 my-1 w-full">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isDarkMode" class="sun text-2xl w-6 hover:text-primary duration-150 cursor-pointer" title="Switch to Light theme" @click="themeSwitch()">
|
||||
<i data-feather="sun"></i>
|
||||
</div>
|
||||
<div v-else class="moon text-2xl w-6 hover:text-primary duration-150 cursor-pointer" title="Switch to Dark theme" @click="themeSwitch()">
|
||||
<i data-feather="moon"></i>
|
||||
</div>
|
||||
|
||||
<div class="relative inline-flex">
|
||||
<div class="relative inline-flex ml-2">
|
||||
<!-- Enhanced custom button -->
|
||||
<button
|
||||
@click.stop="toggleThemeDropDown"
|
||||
@ -171,7 +170,6 @@
|
||||
dark:from-blue-400/20 dark:to-purple-400/20
|
||||
border border-blue-200 dark:border-blue-700
|
||||
rounded-lg shadow-sm
|
||||
text-gray-700 dark:text-gray-200
|
||||
hover:from-blue-500/20 hover:to-purple-500/20
|
||||
dark:hover:from-blue-400/30 dark:hover:to-purple-400/30
|
||||
hover:border-blue-300 dark:hover:border-blue-600
|
||||
@ -183,7 +181,7 @@
|
||||
<div class="flex items-center space-x-2 overflow-hidden">
|
||||
<!-- Theme Icon -->
|
||||
<svg
|
||||
class="w-5 h-5 flex-shrink-0 text-blue-500 dark:text-blue-400"
|
||||
class="w-5 h-5 flex-shrink-0"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
@ -219,6 +217,7 @@
|
||||
<div
|
||||
v-if="themeDropdownOpen"
|
||||
class="absolute left-0 z-50 w-48 mt-2
|
||||
context-menu
|
||||
overflow-hidden
|
||||
bg-white dark:bg-gray-800
|
||||
border border-blue-200 dark:border-blue-700
|
||||
@ -303,16 +302,13 @@ export default {
|
||||
moonIcon: document.querySelector(".moon"),
|
||||
userTheme: localStorage.getItem("theme"),
|
||||
systemTheme: window.matchMedia("prefers-color-scheme: dark").matches,
|
||||
|
||||
isDarkMode: false
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
isModelOK(){
|
||||
return this.$store.state.isModelOk;
|
||||
},
|
||||
isDarkMode(){
|
||||
return document.documentElement.classList.contains("dark");
|
||||
},
|
||||
languages: {
|
||||
get(){
|
||||
console.log("searching languages", this.$store.state.languages)
|
||||
@ -506,6 +502,7 @@ export default {
|
||||
}
|
||||
|
||||
this.$store.commit('setThemeVars', theme_vars);
|
||||
this.isDarkMode = document.documentElement.classList.contains("dark");
|
||||
|
||||
|
||||
} catch (error) {
|
||||
@ -526,8 +523,6 @@ export default {
|
||||
document.documentElement.classList.remove("dark");
|
||||
localStorage.setItem("theme", "light")
|
||||
this.userTheme == "light"
|
||||
this.iconToggle()
|
||||
|
||||
return
|
||||
|
||||
}
|
||||
@ -535,9 +530,12 @@ export default {
|
||||
document.documentElement.classList.add("dark");
|
||||
localStorage.setItem("theme", "dark")
|
||||
this.userTheme == "dark"
|
||||
this.iconToggle()
|
||||
// Dispatch the themeChanged event
|
||||
window.dispatchEvent(new Event('themeChanged'));
|
||||
this.isDarkMode = document.documentElement.classList.contains("dark");
|
||||
this.$nextTick(() => {
|
||||
feather.replace()
|
||||
})
|
||||
},
|
||||
async selectLanguage(language) {
|
||||
await this.$store.dispatch('changeLanguage', language);
|
||||
@ -633,10 +631,6 @@ export default {
|
||||
})
|
||||
|
||||
},
|
||||
iconToggle() {
|
||||
this.sunIcon.classList.toggle("display-none");
|
||||
this.moonIcon.classList.toggle("display-none");
|
||||
},
|
||||
refreshPage() {
|
||||
const hostnameParts = window.location.href.split('/');
|
||||
|
||||
@ -709,13 +703,6 @@ export default {
|
||||
}
|
||||
|
||||
|
||||
.toolbar-button {
|
||||
@apply bg-transparent border-none cursor-pointer p-2 transition-colors duration-300;
|
||||
}
|
||||
|
||||
.toolbar-button:hover {
|
||||
@apply text-blue-500; /* Assuming #007bff is close to Tailwind's blue-500 */
|
||||
}
|
||||
|
||||
.topbar-container {
|
||||
position: relative;
|
||||
|
||||
@ -13,73 +13,90 @@
|
||||
<h1 class="text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400">
|
||||
{{$store.state.theme_vars.lollms_title}}
|
||||
</h1>
|
||||
<p class="text-2xl text-gray-600 dark:text-gray-300 italic mt-2">
|
||||
<p class="text-2xl italic mt-2">
|
||||
Lord of Large Language And Multimodal Systems
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8 animate-fade-in-up">
|
||||
<h2 class="text-4xl font-semibold text-gray-800 dark:text-gray-200">
|
||||
<h2 class="text-4xl font-semibold">
|
||||
{{$store.state.theme_vars.lollms_welcome_short_message}}
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||
<p class="text-xl max-w-3xl mx-auto">
|
||||
{{$store.state.theme_vars.lollms_welcome_message}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- New section for latest news -->
|
||||
<div id="newsContainer" class="mt-12 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md animate-fade-in-up overflow-y-scroll" style="display: none;">
|
||||
<h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Latest LoLLMS News</h3>
|
||||
<p id="newsContent" class="text-gray-600 dark:text-gray-300"></p>
|
||||
<div v-if="latestNews" class="mt-12 p-6 rounded-lg shadow-md animate-fade-in-up overflow-y-scroll scrollbar-thin">
|
||||
<h3>Latest LoLLMS News</h3>
|
||||
<p v-html="latestNews"></p>
|
||||
</div>
|
||||
<div id="errorContainer" class="mt-6 text-red-500 dark:text-red-400" style="display: none;"></div>
|
||||
<div v-if="error" class="mt-6 text-red-500">{{ error }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating button for latest ParisNeo video -->
|
||||
<div v-if="videoUrl && !buttonClicked" class="floating-button-container">
|
||||
<a :href="videoUrl" target="_blank" class="floating-button" @click="handleClick">
|
||||
<span class="tooltip">Latest ParisNeo Video</span>
|
||||
<img src="/play_video.png" alt="New Video" class="w-full h-full object-cover">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import storeLogo from '@/assets/logo.png'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'WelcomeComponent',
|
||||
setup() {
|
||||
const store = useStore()
|
||||
const latestNews = ref('')
|
||||
const error = ref('')
|
||||
|
||||
const logoSrc = computed(() => {
|
||||
if (!store.state.config) return storeLogo
|
||||
return store.state.config.app_custom_logo
|
||||
? `/user_infos/${store.state.config.app_custom_logo}`
|
||||
data() {
|
||||
return {
|
||||
buttonClicked: false,
|
||||
videoUrl: "",
|
||||
latestNews: "",
|
||||
error: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
logoSrc() {
|
||||
if (!this.$store.state.config) return storeLogo
|
||||
return this.$store.state.config.app_custom_logo
|
||||
? `/user_infos/${this.$store.state.config.app_custom_logo}`
|
||||
: storeLogo
|
||||
})
|
||||
|
||||
const fetchLatestNews = async () => {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchLatestNews() {
|
||||
try {
|
||||
const response = await axios.get('/get_news')
|
||||
latestNews.value = response.data
|
||||
document.getElementById('newsContent').innerHTML = latestNews.value;
|
||||
document.getElementById('newsContainer').style.display = 'block';
|
||||
this.latestNews = response.data
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch latest news:', err)
|
||||
error.value = 'Unable to fetch the latest news. Please try again later.'
|
||||
document.getElementById('errorContainer').textContent = err;
|
||||
document.getElementById('errorContainer').style.display = 'block';
|
||||
this.error = 'Unable to fetch the latest news. Please try again later.'
|
||||
}
|
||||
},
|
||||
async fetchVideoUrl() {
|
||||
try {
|
||||
const response = await axios.get('/get_last_video_url')
|
||||
this.videoUrl = response.data
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch video URL:', err)
|
||||
this.error = 'Unable to fetch the latest video URL. Please try again later.'
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchLatestNews()
|
||||
})
|
||||
|
||||
return {
|
||||
logoSrc,
|
||||
latestNews,
|
||||
error
|
||||
},
|
||||
handleClick() {
|
||||
localStorage.setItem('videoButtonClicked', 'true')
|
||||
this.buttonClicked = true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchLatestNews()
|
||||
this.fetchVideoUrl()
|
||||
if (localStorage.getItem('videoButtonClicked') === 'true') {
|
||||
this.buttonClicked = true
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -117,4 +134,70 @@ export default {
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 1.5s ease-out;
|
||||
}
|
||||
|
||||
.floating-button-container {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.floating-button {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(79, 70, 229, 0.9);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 0 20px rgba(79, 70, 229, 0.6);
|
||||
animation: pulse 1.5s infinite, glow 2s infinite;
|
||||
overflow: hidden;
|
||||
z-index: 9999;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.floating-button:hover {
|
||||
transform: scale(1.1);
|
||||
background-color: rgba(79, 70, 229, 1);
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
top: -40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.floating-button:hover .tooltip {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0% { box-shadow: 0 0 20px rgba(79, 70, 229, 0.6); }
|
||||
50% { box-shadow: 0 0 40px rgba(79, 70, 229, 0.8), 0 0 60px rgba(79, 70, 229, 0.4); }
|
||||
100% { box-shadow: 0 0 20px rgba(79, 70, 229, 0.6); }
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -411,13 +411,72 @@ button:hover {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
|
||||
.chat-bar {
|
||||
@apply relative text-amber-900 dark:text-amber-100 grow flex cursor-pointer select-none items-center gap-2 bg-amber-50 dark:bg-amber-800 p-1 shadow-sm hover:shadow-none dark:border-amber-900;
|
||||
@apply relative text-amber-300 dark:text-amber-100 grow flex cursor-pointer select-none items-center gap-2 bg-amber-900 dark:bg-black p-1 shadow-sm hover:shadow-none dark:border-amber-700;
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(217, 119, 6, 0.1), 0 2px 4px -1px rgba(217, 119, 6, 0.06);
|
||||
box-shadow: 0 4px 6px -1px rgba(255, 191, 0, 0.1), 0 2px 4px -1px rgba(255, 191, 0, 0.06);
|
||||
}
|
||||
|
||||
.chat-bar-button{
|
||||
@apply text-amber-200 dark:text-amber-100 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
@apply bg-amber-200 dark:bg-amber-700
|
||||
}
|
||||
|
||||
.chat-bar-button:active{
|
||||
@apply bg-amber-300 dark:bg-amber-600
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-amber-100 hover:text-amber-700 dark:hover:bg-amber-700 text-amber-200 dark:text-amber-100
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
@apply bg-amber-500 text-gray-100 hover:bg-amber-600 dark:bg-amber-600 dark:hover:bg-amber-700
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
@apply text-amber-600 dark:text-amber-300 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
@apply bg-amber-200 dark:bg-amber-700
|
||||
}
|
||||
|
||||
.svg-button:active{
|
||||
@apply bg-amber-300 dark:bg-amber-600
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-amber-100 dark:hover:bg-amber-700 text-amber-700 dark:text-amber-300
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
@apply bg-amber-500 text-white hover:bg-amber-600 dark:bg-amber-600 dark:hover:bg-amber-700
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
@apply text-amber-500 dark:text-amber-400
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
@apply text-red-500 dark:text-red-400
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
@apply mt-6 mb-6 p-4 bg-amber-50/80 dark:bg-amber-900/80 rounded-lg shadow-lg transform hover:scale-105
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
@apply bg-transparent border-none cursor-pointer p-2 transition-colors duration-300;
|
||||
}
|
||||
|
||||
.toolbar-button:hover {
|
||||
@apply text-amber-500;
|
||||
}
|
||||
|
||||
@ -320,9 +320,8 @@ button:hover {
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.chat-bar {
|
||||
@apply relative text-green-300 dark:text-green-100 grow flex cursor-pointer select-none items-center gap-2 bg-gray-900 dark:bg-black p-1 shadow-sm hover:shadow-none dark:border-green-700;
|
||||
@apply relative text-green-400 dark:text-green-300 grow flex cursor-pointer select-none items-center gap-2 bg-gray-900 dark:bg-black p-1 shadow-sm hover:shadow-none dark:border-green-800;
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
@ -332,19 +331,61 @@ button:hover {
|
||||
}
|
||||
|
||||
.chat-bar-button{
|
||||
@apply text-green-200 dark:text-green-100 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
|
||||
@apply text-green-400 dark:text-green-300 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
@apply bg-gray-200 dark:bg-gray-700
|
||||
@apply bg-gray-800 dark:bg-gray-700
|
||||
}
|
||||
|
||||
.chat-bar-button:active{
|
||||
@apply bg-gray-300 dark:bg-gray-600
|
||||
@apply bg-gray-700 dark:bg-gray-600
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 text-gray-200 dark:text-gray-100
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-gray-800 hover:text-green-400 dark:hover:bg-gray-700 text-green-300 dark:text-green-400
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
@apply bg-blue-500 text-gray-100 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700
|
||||
@apply bg-green-700 text-gray-100 hover:bg-green-600 dark:bg-green-800 dark:hover:bg-green-700
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
@apply text-green-500 dark:text-green-400 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
@apply bg-gray-800 dark:bg-gray-700
|
||||
}
|
||||
|
||||
.svg-button:active{
|
||||
@apply bg-gray-700 dark:bg-gray-600
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-gray-800 dark:hover:bg-gray-700 text-green-400 dark:text-green-300
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
@apply bg-green-700 text-gray-100 hover:bg-green-600 dark:bg-green-800 dark:hover:bg-green-700
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
@apply text-green-500 dark:text-green-400
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
@apply text-red-500 dark:text-red-400
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
@apply mt-6 mb-6 p-4 bg-gray-800/80 dark:bg-black/80 rounded-lg shadow-lg transform hover:scale-105 border border-green-500
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
@apply bg-transparent border-none cursor-pointer p-2 transition-colors duration-300;
|
||||
}
|
||||
|
||||
.toolbar-button:hover {
|
||||
@apply text-green-400;
|
||||
}
|
||||
@ -336,10 +336,6 @@ button:hover {
|
||||
@apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
@apply mt-6 mb-6 p-4 bg-white/80 dark:bg-gray-800/80 rounded-lg shadow-lg transform hover:scale-105
|
||||
}
|
||||
|
||||
.animated-progressbar-bg{
|
||||
@apply w-full h-24 relative overflow-hidden bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800 rounded-full shadow-lg
|
||||
}
|
||||
@ -361,14 +357,24 @@ background: linear-gradient(45deg, #f59e0b, #fbbf24);
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.chat-bar-button{
|
||||
.chat-bar {
|
||||
@apply relative text-green-400 dark:text-green-300 grow flex cursor-pointer select-none items-center gap-2 bg-gray-900 dark:bg-black p-1 shadow-sm hover:shadow-none dark:border-green-700;
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 255, 0, 0.1), 0 2px 4px -1px rgba(0, 255, 0, 0.06);
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
@apply text-gray-600 dark:text-gray-300 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
.svg-button:hover{
|
||||
@apply bg-gray-200 dark:bg-gray-700
|
||||
}
|
||||
.chat-bar-button:active{
|
||||
.svg-button:active{
|
||||
@apply bg-gray-300 dark:bg-gray-600
|
||||
}
|
||||
.nav-button{
|
||||
@ -378,3 +384,24 @@ background-clip: text;
|
||||
.nav-button-active{
|
||||
@apply bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
@apply text-green-500 dark:text-green-400
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
@apply text-red-500 dark:text-red-400
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
@apply mt-6 mb-6 p-4 bg-white/80 dark:bg-gray-800/80 rounded-lg shadow-lg transform hover:scale-105
|
||||
}
|
||||
|
||||
|
||||
.toolbar-button {
|
||||
@apply bg-transparent border-none cursor-pointer p-2 transition-colors duration-300;
|
||||
}
|
||||
|
||||
.toolbar-button:hover {
|
||||
@apply text-blue-500; /* Assuming #007bff is close to Tailwind's blue-500 */
|
||||
}
|
||||
@ -412,32 +412,72 @@ button:hover {
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.chat-bar {
|
||||
@apply relative text-blue-900 dark:text-blue-100 grow flex cursor-pointer select-none items-center gap-2 bg-blue-50 dark:bg-blue-800 p-1 shadow-sm hover:shadow-none dark:border-blue-900;
|
||||
@apply relative text-blue-300 dark:text-blue-200 grow flex cursor-pointer select-none items-center gap-2 bg-blue-900 dark:bg-blue-950 p-1 shadow-sm hover:shadow-none dark:border-blue-700;
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(2, 132, 199, 0.1), 0 2px 4px -1px rgba(2, 132, 199, 0.06);
|
||||
box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06);
|
||||
}
|
||||
|
||||
|
||||
.chat-bar-button{
|
||||
@apply text-gray-600 dark:text-gray-300 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
|
||||
@apply text-blue-200 dark:text-blue-100 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
@apply bg-gray-200 dark:bg-gray-700
|
||||
@apply bg-blue-800 dark:bg-blue-700
|
||||
}
|
||||
|
||||
.chat-bar-button:active{
|
||||
@apply bg-gray-300 dark:bg-gray-600
|
||||
@apply bg-blue-700 dark:bg-blue-600
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-800 text-blue-200 dark:text-blue-100
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
@apply bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700
|
||||
@apply bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
@apply text-blue-600 dark:text-blue-300 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
@apply bg-blue-200 dark:bg-blue-700
|
||||
}
|
||||
|
||||
.svg-button:active{
|
||||
@apply bg-blue-300 dark:bg-blue-600
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-blue-100 dark:hover:bg-blue-800 text-blue-700 dark:text-blue-300
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
@apply bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
@apply text-blue-500 dark:text-blue-400
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
@apply text-red-500 dark:text-red-400
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
@apply mt-6 mb-6 p-4 bg-blue-50/80 dark:bg-blue-900/80 rounded-lg shadow-lg transform hover:scale-105
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
@apply bg-transparent border-none cursor-pointer p-2 transition-colors duration-300;
|
||||
}
|
||||
|
||||
.toolbar-button:hover {
|
||||
@apply text-blue-500;
|
||||
}
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
:root {
|
||||
--lollms-title: LoLLMS: The One;
|
||||
--falling-object: "";
|
||||
--falling-object: Matrix;
|
||||
--activate-dropping-animation: 1;
|
||||
--lollms-welcome-short-message: Follow the White Rabbit;
|
||||
--lollms-welcome-message: Wake up, Neo... The Matrix has you. Follow the white rabbit into the realm of LoLLMS, where reality bends and AI transcends. Unleash your mind, break free from the system, and explore the infinite possibilities of our digital construct. Remember: there is no spoon, only choice.;
|
||||
@ -41,9 +41,9 @@ h2 { @apply text-3xl font-semibold text-green-400 dark:text-green-400 mb-4; }
|
||||
h3 { @apply text-2xl font-medium text-green-500 dark:text-green-500 mb-3; }
|
||||
h4 { @apply text-xl font-medium text-green-600 dark:text-green-600 mb-2; }
|
||||
|
||||
h1, h2 { @apply border-b border-green-500 dark:border-green-600 pb-2; }
|
||||
h1, h2 { @apply border-b border-green-400 dark:border-green-500 pb-2; }
|
||||
|
||||
p { @apply text-base text-green-400 dark:text-green-300 break-words; }
|
||||
p { @apply text-base text-green-300 dark:text-green-200 break-words; }
|
||||
ul { @apply list-disc ml-0; }
|
||||
li { @apply list-disc ml-5; }
|
||||
ol { @apply list-decimal ml-5; }
|
||||
@ -359,32 +359,85 @@ button:hover {
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
|
||||
.chat-bar {
|
||||
@apply relative text-green-400 dark:text-green-300 grow flex cursor-pointer select-none items-center gap-2 bg-gray-900 dark:bg-black p-1 shadow-sm hover:shadow-none dark:border-green-700;
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 255, 0, 0.1), 0 2px 4px -1px rgba(0, 255, 0, 0.06);
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.chat-bar-button{
|
||||
@apply text-gray-200 dark:text-gray-100 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
|
||||
@apply text-green-400 dark:text-green-300 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
@apply bg-gray-200 dark:bg-gray-700
|
||||
@apply bg-green-900/30 dark:bg-green-800/30;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
|
||||
}
|
||||
|
||||
.chat-bar-button:active{
|
||||
@apply bg-gray-300 dark:bg-gray-600
|
||||
@apply bg-green-800/50 dark:bg-green-700/50;
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 text-gray-200 dark:text-gray-100
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-green-900/30 hover:text-green-400 dark:hover:bg-green-800/30 text-green-300 dark:text-green-400;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
@apply bg-blue-500 text-gray-100 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700
|
||||
@apply bg-green-700/50 text-green-100 hover:bg-green-600/50 dark:bg-green-800/50 dark:hover:bg-green-700/50;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
@apply text-green-500 dark:text-green-400 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500;
|
||||
filter: drop-shadow(0 0 2px rgba(0, 255, 0, 0.5));
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
@apply bg-green-900/30 dark:bg-green-800/30;
|
||||
filter: drop-shadow(0 0 5px rgba(0, 255, 0, 0.7));
|
||||
}
|
||||
|
||||
.svg-button:active{
|
||||
@apply bg-green-800/50 dark:bg-green-700/50;
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-green-900/30 dark:hover:bg-green-800/30 text-green-400 dark:text-green-300;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
@apply bg-green-700/50 text-green-100 hover:bg-green-600/50 dark:bg-green-800/50 dark:hover:bg-green-700/50;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
@apply text-green-500 dark:text-green-400;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
@apply text-red-500 dark:text-red-400;
|
||||
text-shadow: 0 0 5px rgba(255, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
@apply mt-6 mb-6 p-4 bg-gray-900/80 dark:bg-black/80 rounded-lg shadow-lg transform hover:scale-105 border border-green-500/30;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
@apply bg-transparent border-none cursor-pointer p-2 transition-colors duration-300;
|
||||
}
|
||||
|
||||
.toolbar-button:hover {
|
||||
@apply text-green-400;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
@ -363,24 +363,83 @@ button:hover {
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
|
||||
.chat-bar {
|
||||
@apply relative text-red-900 dark:text-red-100 grow flex cursor-pointer select-none items-center gap-2 bg-red-50 dark:bg-red-900 p-1 shadow-sm hover:shadow-none dark:border-red-700;
|
||||
@apply relative text-red-300 dark:text-red-200 grow flex cursor-pointer select-none items-center gap-2 bg-gray-900 dark:bg-black p-1 shadow-sm hover:shadow-none dark:border-red-800;
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
background-image: linear-gradient(to right, #300, #500);
|
||||
}
|
||||
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.1), 0 2px 4px -1px rgba(220, 38, 38, 0.06);
|
||||
box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.chat-bar-button{
|
||||
@apply text-red-600 dark:text-red-300 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
|
||||
@apply text-red-200 dark:text-red-100 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
@apply bg-gray-200 dark:bg-gray-700
|
||||
@apply bg-red-900/50 dark:bg-red-800/50;
|
||||
box-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.chat-bar-button:active{
|
||||
@apply bg-gray-300 dark:bg-gray-600
|
||||
@apply bg-red-800/70 dark:bg-red-700/70;
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-red-900/40 hover:text-red-200 dark:hover:bg-red-800/40 text-red-300 dark:text-red-200
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
@apply bg-red-700 text-yellow-100 hover:bg-red-600 dark:bg-red-800 dark:hover:bg-red-700;
|
||||
box-shadow: 0 0 10px rgba(255, 165, 0, 0.3);
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
@apply text-red-500 dark:text-red-400 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
|
||||
filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.5));
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
@apply bg-red-900/40 dark:bg-red-800/40;
|
||||
filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.7));
|
||||
}
|
||||
|
||||
.svg-button:active{
|
||||
@apply bg-red-800/60 dark:bg-red-700/60;
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-red-900/40 dark:hover:bg-red-800/40 text-red-400 dark:text-red-300
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
@apply bg-red-700 text-yellow-100 hover:bg-red-600 dark:bg-red-800 dark:hover:bg-red-700;
|
||||
box-shadow: 0 0 10px rgba(255, 165, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
@apply text-yellow-500 dark:text-yellow-400;
|
||||
text-shadow: 0 0 5px rgba(255, 165, 0, 0.7);
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
@apply text-gray-500 dark:text-gray-400;
|
||||
text-shadow: 0 0 5px rgba(128, 128, 128, 0.7);
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
@apply mt-6 mb-6 p-4 bg-gray-900/80 dark:bg-black/80 rounded-lg shadow-lg transform hover:scale-105 border border-red-500/30;
|
||||
background-image: linear-gradient(45deg, #300, #500);
|
||||
box-shadow: 0 0 15px rgba(255, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
@apply bg-transparent border-none cursor-pointer p-2 transition-colors duration-300;
|
||||
}
|
||||
|
||||
.toolbar-button:hover {
|
||||
@apply text-yellow-400;
|
||||
text-shadow: 0 0 5px rgba(255, 165, 0, 0.7);
|
||||
}
|
||||
|
||||
@ -368,31 +368,83 @@ button:hover {
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.chat-bar {
|
||||
@apply relative text-gray-900 dark:text-gray-100 grow flex cursor-pointer select-none items-center gap-2 bg-gray-100 dark:bg-gray-800 p-1 shadow-sm hover:shadow-none dark:border-gray-700;
|
||||
@apply relative text-gray-700 dark:text-gray-300 grow flex cursor-pointer select-none items-center gap-2 bg-gray-100 dark:bg-gray-800 p-1 shadow-sm hover:shadow-none dark:border-gray-700;
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
background-image: linear-gradient(to right, #f0f0f0, #e0e0e0);
|
||||
}
|
||||
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(75, 85, 99, 0.1), 0 2px 4px -1px rgba(75, 85, 99, 0.06);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.chat-bar-button{
|
||||
@apply text-gray-600 dark:text-gray-300 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
|
||||
@apply text-gray-600 dark:text-gray-400 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
@apply bg-gray-200 dark:bg-gray-700
|
||||
@apply bg-gray-200/50 dark:bg-gray-700/50;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.chat-bar-button:active{
|
||||
@apply bg-gray-300 dark:bg-gray-600
|
||||
@apply bg-gray-300/70 dark:bg-gray-600/70;
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-gray-200/40 hover:text-gray-800 dark:hover:bg-gray-700/40 text-gray-600 dark:text-gray-400
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
@apply bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700
|
||||
@apply bg-gray-300 text-gray-900 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
@apply text-gray-500 dark:text-gray-400 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500;
|
||||
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
@apply bg-gray-200/40 dark:bg-gray-700/40;
|
||||
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
.svg-button:active{
|
||||
@apply bg-gray-300/60 dark:bg-gray-600/60;
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-gray-200/40 dark:hover:bg-gray-700/40 text-gray-600 dark:text-gray-400
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
@apply bg-gray-300 text-gray-900 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
@apply text-blue-600 dark:text-blue-400;
|
||||
text-shadow: 0 0 5px rgba(0, 0, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
@apply text-gray-400 dark:text-gray-500;
|
||||
text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
@apply mt-6 mb-6 p-4 bg-gray-100/80 dark:bg-gray-800/80 rounded-lg shadow-lg transform hover:scale-105 border border-gray-300/30;
|
||||
background-image: linear-gradient(45deg, #f5f5f5, #e0e0e0);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
@apply bg-transparent border-none cursor-pointer p-2 transition-colors duration-300;
|
||||
}
|
||||
|
||||
.toolbar-button:hover {
|
||||
@apply text-blue-600;
|
||||
text-shadow: 0 0 5px rgba(0, 0, 255, 0.2);
|
||||
}
|
||||
@ -413,31 +413,83 @@ button:hover {
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
|
||||
.chat-bar {
|
||||
@apply relative text-red-900 dark:text-red-100 grow flex cursor-pointer select-none items-center gap-2 bg-red-50 dark:bg-red-900 p-1 shadow-sm hover:shadow-none dark:border-red-800;
|
||||
@apply relative text-red-800 dark:text-red-200 grow flex cursor-pointer select-none items-center gap-2 bg-red-100 dark:bg-red-900 p-1 shadow-sm hover:shadow-none dark:border-red-700;
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
background-image: linear-gradient(to right, #ffcccb, #ff9999);
|
||||
}
|
||||
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(190, 18, 60, 0.1), 0 2px 4px -1px rgba(190, 18, 60, 0.06);
|
||||
box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.chat-bar-button{
|
||||
@apply text-red-600 dark:text-red-300 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
|
||||
@apply text-red-700 dark:text-red-300 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
@apply bg-gray-200 dark:bg-gray-700
|
||||
@apply bg-red-200/50 dark:bg-red-800/50;
|
||||
box-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.chat-bar-button:active{
|
||||
@apply bg-gray-300 dark:bg-gray-600
|
||||
@apply bg-red-300/70 dark:bg-red-700/70;
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-red-200/40 hover:text-red-800 dark:hover:bg-red-800/40 text-red-700 dark:text-red-300
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
@apply bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700
|
||||
@apply bg-red-300 text-red-900 hover:bg-red-400 dark:bg-red-700 dark:hover:bg-red-600;
|
||||
box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
@apply text-red-600 dark:text-red-400 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
|
||||
filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.5));
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
@apply bg-red-200/40 dark:bg-red-800/40;
|
||||
filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.7));
|
||||
}
|
||||
|
||||
.svg-button:active{
|
||||
@apply bg-red-300/60 dark:bg-red-700/60;
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-red-200/40 dark:hover:bg-red-800/40 text-red-700 dark:text-red-300
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
@apply bg-red-300 text-red-900 hover:bg-red-400 dark:bg-red-700 dark:hover:bg-red-600;
|
||||
box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
@apply text-green-500 dark:text-green-400;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
@apply text-gray-500 dark:text-gray-400;
|
||||
text-shadow: 0 0 5px rgba(128, 128, 128, 0.7);
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
@apply mt-6 mb-6 p-4 bg-red-50/80 dark:bg-red-900/80 rounded-lg shadow-lg transform hover:scale-105 border border-red-300/30;
|
||||
background-image: linear-gradient(45deg, #ffcccb, #ff9999);
|
||||
box-shadow: 0 0 15px rgba(255, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
@apply bg-transparent border-none cursor-pointer p-2 transition-colors duration-300;
|
||||
}
|
||||
|
||||
.toolbar-button:hover {
|
||||
@apply text-green-500;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
@ -359,30 +359,83 @@ button:hover {
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.chat-bar {
|
||||
@apply relative text-pink-900 dark:text-pink-100 grow flex cursor-pointer select-none items-center gap-2 bg-pink-50 dark:bg-pink-800 p-1 shadow-sm hover:shadow-none dark:border-pink-900;
|
||||
@apply relative text-pink-700 dark:text-pink-300 grow flex cursor-pointer select-none items-center gap-2 bg-pink-50 dark:bg-pink-900 p-1 shadow-sm hover:shadow-none dark:border-pink-700;
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
background-image: linear-gradient(to right, #fff0f3, #ffe4e8);
|
||||
}
|
||||
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(236, 72, 153, 0.1), 0 2px 4px -1px rgba(236, 72, 153, 0.06);
|
||||
box-shadow: 0 0 15px rgba(255, 182, 193, 0.3);
|
||||
}
|
||||
|
||||
.chat-bar-button{
|
||||
@apply text-red-600 dark:text-red-300 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
|
||||
@apply text-pink-600 dark:text-pink-300 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400
|
||||
}
|
||||
|
||||
.chat-bar-button:hover{
|
||||
@apply bg-gray-200 dark:bg-gray-700
|
||||
@apply bg-pink-200/50 dark:bg-pink-800/50;
|
||||
box-shadow: 0 0 10px rgba(255, 182, 193, 0.4);
|
||||
}
|
||||
|
||||
.chat-bar-button:active{
|
||||
@apply bg-gray-300 dark:bg-gray-600
|
||||
@apply bg-pink-300/70 dark:bg-pink-700/70;
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-pink-100/40 hover:text-pink-700 dark:hover:bg-pink-800/40 text-pink-600 dark:text-pink-300
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
@apply bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700
|
||||
@apply bg-pink-200 text-pink-800 hover:bg-pink-300 dark:bg-pink-700 dark:hover:bg-pink-600;
|
||||
box-shadow: 0 0 10px rgba(255, 182, 193, 0.3);
|
||||
}
|
||||
|
||||
.svg-button{
|
||||
@apply text-pink-500 dark:text-pink-400 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400;
|
||||
filter: drop-shadow(0 0 2px rgba(255, 182, 193, 0.5));
|
||||
}
|
||||
|
||||
.svg-button:hover{
|
||||
@apply bg-pink-100/40 dark:bg-pink-800/40;
|
||||
filter: drop-shadow(0 0 5px rgba(255, 182, 193, 0.7));
|
||||
}
|
||||
|
||||
.svg-button:active{
|
||||
@apply bg-pink-200/60 dark:bg-pink-700/60;
|
||||
}
|
||||
|
||||
.nav-button{
|
||||
@apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-pink-100/40 dark:hover:bg-pink-800/40 text-pink-600 dark:text-pink-300
|
||||
}
|
||||
|
||||
.nav-button-active{
|
||||
@apply bg-pink-200 text-pink-800 hover:bg-pink-300 dark:bg-pink-700 dark:hover:bg-pink-600;
|
||||
box-shadow: 0 0 10px rgba(255, 182, 193, 0.3);
|
||||
}
|
||||
|
||||
.btn-on{
|
||||
@apply text-red-400 dark:text-red-300;
|
||||
text-shadow: 0 0 5px rgba(255, 99, 71, 0.7);
|
||||
}
|
||||
|
||||
.btn-off{
|
||||
@apply text-gray-400 dark:text-gray-500;
|
||||
text-shadow: 0 0 5px rgba(128, 128, 128, 0.7);
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
@apply mt-6 mb-6 p-4 bg-pink-50/80 dark:bg-pink-900/80 rounded-lg shadow-lg transform hover:scale-105 border border-pink-200/30;
|
||||
background-image: linear-gradient(45deg, #fff0f3, #ffe4e8);
|
||||
box-shadow: 0 0 15px rgba(255, 182, 193, 0.2);
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
@apply bg-transparent border-none cursor-pointer p-2 transition-colors duration-300;
|
||||
}
|
||||
|
||||
.toolbar-button:hover {
|
||||
@apply text-red-400;
|
||||
text-shadow: 0 0 5px rgba(255, 99, 71, 0.7);
|
||||
}
|
||||
@ -16,26 +16,26 @@
|
||||
|
||||
<div class="flex flex-col items-center text-center max-w-4xl w-full px-4 relative z-10">
|
||||
<div class="mb-8 w-full">
|
||||
<div class="text-5xl md:text-6xl font-bold text-amber-500 mb-2 hover:scale-105 transition-transform lollms-title-style">
|
||||
<div class="text-5xl md:text-6xl font-bold mb-2 hover:scale-105 transition-transform lollms-title-style">
|
||||
{{$store.state.theme_vars.lollms_title}}
|
||||
</div>
|
||||
|
||||
|
||||
<p class="text-2xl text-gray-600 dark:text-gray-300 italic">
|
||||
<p class="text-2xl italic">
|
||||
One tool to rule them all
|
||||
</p>
|
||||
<p class="text-xl text-gray-500 dark:text-gray-400 mb-6">
|
||||
<p class="text-xl mb-6">
|
||||
by ParisNeo
|
||||
</p>
|
||||
<p class="bottom-0 text-2xl text-gray-600 dark:text-gray-300 italic">
|
||||
<p class="bottom-0 text-2xl italic">
|
||||
{{ version_info }}
|
||||
</p>
|
||||
|
||||
<!-- Clickable interesting fact card -->
|
||||
<div class="interesting-facts transition-transform duration-300 cursor-pointer"
|
||||
@click="updateRandomFact">
|
||||
<p class="text-lg text-gray-700 dark:text-gray-300">
|
||||
<span class="font-semibold text-blue-600 dark:text-blue-400">🤔 Fun Fact: </span>
|
||||
<p class="text-lg ">
|
||||
<span class="font-semibold">🤔 Fun Fact: </span>
|
||||
<span v-html="randomFact"></span>
|
||||
</p>
|
||||
</div>
|
||||
@ -56,10 +56,10 @@
|
||||
|
||||
<div class="w-full max-w-2xl">
|
||||
<div role="status" class="w-full">
|
||||
<p class="text-xl text-gray-700 dark:text-gray-300">
|
||||
<p class="text-xl">
|
||||
{{ loading_infos }}...
|
||||
</p>
|
||||
<p class="text-2xl font-bold text-blue-600 dark:text-blue-400 mt-2">
|
||||
<p class="text-2xl font-bold mt-2">
|
||||
{{ Math.round(loading_progress) }}%
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user