mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-18 20:17:50 +00:00
Enhanced ui
This commit is contained in:
Saifeddine ALOUI
parent
7c94470e35
commit
61104b236e
8
web/dist/assets/index-b52b9629.css
vendored
8
web/dist/assets/index-b52b9629.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-f21dbb62.css
vendored
Normal file
8
web/dist/assets/index-f21dbb62.css
vendored
Normal file
File diff suppressed because one or more lines are too long
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-484e4067.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-b52b9629.css">
|
||||
<script type="module" crossorigin src="/assets/index-e8a9945d.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-f21dbb62.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="currentTheme" class="flex flex-col h-screen font-sans bg-bg-light text-slate-950 dark:bg-bg-dark dark:text-slate-50 w-full dark:bg-bg-dark overflow-hidden">
|
||||
<div :class="currentTheme" class="flex flex-col h-screen font-sans background-color text-slate-950 dark:bg-bg-dark dark:text-slate-50 w-full overflow-hidden">
|
||||
<TopBar />
|
||||
|
||||
<div class="flex overflow-hidden flex-grow w-full">
|
||||
|
||||
@ -15,70 +15,54 @@
|
||||
src: url('./fonts/PTSans/PTSans-Regular.ttf') format('truetype');
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.display-none {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
@apply text-5xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400;
|
||||
}
|
||||
|
||||
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
@apply text-3xl font-semibold text-gray-800 dark:text-gray-200;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
@apply text-2xl font-semibold text-gray-700 dark:text-gray-300;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
font-style: italic;
|
||||
@apply text-xl font-semibold italic text-gray-600 dark:text-gray-400;
|
||||
}
|
||||
|
||||
/* Include any additional styles you need */
|
||||
p {
|
||||
font-size: 16px;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
white-space: normal;
|
||||
@apply text-base text-gray-600 dark:text-gray-300 break-words;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
margin-left: 0px;
|
||||
@apply list-disc ml-0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: disc;
|
||||
margin-left: 20px;
|
||||
@apply list-disc ml-5;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
margin-left: 20px;
|
||||
@apply list-decimal ml-5;
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--color-primary: #0e8ef0;
|
||||
--color-primary-light: #3dabff;
|
||||
@ -99,4 +83,113 @@ ol {
|
||||
--color-bg-dark-code-block: #2254a7;
|
||||
--color-bg-dark-discussion: #435E8A;
|
||||
--color-bg-dark-discussion-odd: #284471;
|
||||
}
|
||||
}
|
||||
|
||||
.background-color {
|
||||
@apply bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900 min-h-screen;
|
||||
}
|
||||
|
||||
.toolbar-color {
|
||||
@apply text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800 rounded-full shadow-lg
|
||||
}
|
||||
.panels-color {
|
||||
@apply text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800 rounded shadow-lg
|
||||
}
|
||||
.unicolor-panels-color {
|
||||
@apply bg-blue-200 dark:bg-blue-800
|
||||
}
|
||||
.chatbox-color {
|
||||
@apply bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800
|
||||
}
|
||||
.message {
|
||||
@apply relative w-full rounded-lg m-2 shadow-lg border-2 border-transparent
|
||||
flex flex-col flex-grow flex-wrap overflow-visible p-4 pb-2;
|
||||
}
|
||||
|
||||
.message:hover {
|
||||
@apply border-primary border-solid;
|
||||
}
|
||||
|
||||
/* Light theme */
|
||||
.message:nth-child(even) {
|
||||
@apply bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800;
|
||||
}
|
||||
|
||||
.message:nth-child(odd) {
|
||||
@apply bg-gradient-to-r from-blue-300 to-purple-300 dark:from-blue-900 dark:to-purple-900;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
@apply bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900 min-h-screen;
|
||||
}
|
||||
|
||||
.bg-gradient-welcome {
|
||||
@apply bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900;
|
||||
}
|
||||
|
||||
.bg-gradient-progress {
|
||||
@apply bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800;
|
||||
}
|
||||
|
||||
.text-gradient-title {
|
||||
@apply text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400;
|
||||
}
|
||||
|
||||
.text-subtitle {
|
||||
@apply text-gray-600 dark:text-gray-300;
|
||||
}
|
||||
|
||||
.text-author {
|
||||
@apply text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
|
||||
.text-loading {
|
||||
@apply text-gray-700 dark:text-gray-300;
|
||||
}
|
||||
|
||||
.text-progress {
|
||||
@apply text-blue-600 dark:text-blue-400;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6;
|
||||
}
|
||||
|
||||
.input {
|
||||
@apply bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400;
|
||||
}
|
||||
|
||||
.label {
|
||||
@apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
|
||||
}
|
||||
|
||||
.link {
|
||||
@apply text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300;
|
||||
}
|
||||
|
||||
.nav-ul {
|
||||
@apply list-none p-0 m-0 flex flex-row justify-center h-full;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
@apply relative inline-block px-4 py-2 mx-1 text-white font-bold rounded transition-all duration-300 ease-in-out;
|
||||
@apply text-gray-700 dark:text-gray-50 bg-gradient-to-r from-indigo-300 to-purple-400 dark:from-indigo-500 dark:to-purple-600; /* Light mode gradient */
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
@apply transform -translate-y-1;
|
||||
@apply text-gray-700 dark:text-gray-50 bg-gradient-to-r from-indigo-300 to-purple-300 dark:from-indigo-400 dark:to-purple-500; /* Reverse gradient on hover */
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
@apply bg-white text-indigo-600 shadow-lg; /* Active state styles */
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
<form>
|
||||
<div class="absolute bottom-0 left-0 w-fit min-w-96 w-full justify-center text-center">
|
||||
<div v-if="filesList.length > 0 || showPersonalities" class="items-center gap-2 bg-bg-light-panel dark:bg-bg-dark-tone shadow-sm hover:shadow-none dark:border-gray-800 w-fit">
|
||||
<div v-if="filesList.length > 0 || showPersonalities" class="items-center gap-2 panels-color shadow-sm hover:shadow-none dark:border-gray-800 w-fit">
|
||||
<!-- EXPAND / COLLAPSE BUTTON -->
|
||||
<div class="flex">
|
||||
<button
|
||||
@ -112,7 +112,7 @@
|
||||
</div>
|
||||
|
||||
<!-- CHAT BOX -->
|
||||
<div v-if="selecting_model||selecting_binding" title="Selecting model" class="flex flex-row flex-grow justify-end bg-primary">
|
||||
<div v-if="selecting_model||selecting_binding" title="Selecting model" class="flex flex-row flex-grow justify-end panels-color">
|
||||
<!-- SPINNER -->
|
||||
<div role="status">
|
||||
<img :src="loader_v0" class="w-50 h-50">
|
||||
@ -120,7 +120,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-fit relative grow w-full">
|
||||
<div class="relative text-light-text-panel dark:text-dark-text-panel grow flex h-12.5 cursor-pointer select-none items-center gap-2 bg-bg-light-panel dark:bg-bg-dark-tone p-1 shadow-sm hover:shadow-none dark:border-gray-800" tabindex="0">
|
||||
<div class="relative text-light-text-panel dark:text-dark-text-panel grow flex h-12.5 cursor-pointer select-none items-center gap-2 chatbox-color p-1 shadow-sm hover:shadow-none dark:border-gray-800" tabindex="0">
|
||||
<div v-if="loading" title="Waiting for reply">
|
||||
<img :src="loader_v0">
|
||||
<!-- SPINNER -->
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative w-full group rounded-lg m-2 shadow-lg hover:border-primary dark:hover:border-primary hover:border-solid hover:border-2 border-2 border-transparent even:bg-bg-light-discussion-odd dark:even:bg-bg-dark-discussion-odd flex flex-col flex-grow flex-wrap overflow-visible p-4 pb-2 ">
|
||||
class="relative w-full group rounded-lg m-2 shadow-lg message hover:border-primary dark:hover:border-primary hover:border-solid hover:border-2 border-2 border-transparent flex flex-col flex-grow flex-wrap overflow-visible p-4 pb-2 ">
|
||||
<div class="flex flex-row gap-2 ">
|
||||
<div class=" flex-shrink-0">
|
||||
<!-- AVATAR -->
|
||||
|
||||
@ -1,241 +1,92 @@
|
||||
<template>
|
||||
<div v-if="$store.state.ready" class="container z-60 flex flex-col sm:flex-row items-center">
|
||||
<div class="w-full text-center">
|
||||
<div class="m-0 flex border-b w-full items-center justify-center flex flex-row font-medium nav-ul text-center">
|
||||
<RouterLink
|
||||
:to="{ name: 'discussions' }"
|
||||
class="inline-block border-l border-t border-r rounded-t py-2 px-4 text-blue-700 font-semibold"
|
||||
:class="{
|
||||
'text-green-600 hover:text-green-500 dark:text-green-100 font-bold bg-bg-secondary shadow-no-bottom': isRouteActive('discussions'),
|
||||
'bounce-in': isRouteActive('discussions'),
|
||||
}">
|
||||
Discussions
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
:to="{ name: 'playground' }"
|
||||
class="inline-block border-l border-t border-r rounded-t py-2 px-4 text-blue-700 font-semibold"
|
||||
:class="{
|
||||
'text-green-600 hover:text-green-500 dark:text-green-100 font-bold bg-bg-secondary shadow-no-bottom': isRouteActive('playground'),
|
||||
'bounce-in': isRouteActive('playground'),
|
||||
}"
|
||||
>
|
||||
Playground
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
:to="{ name: 'AppsZoo' }"
|
||||
class="inline-block border-l border-t border-r rounded-t py-2 px-4 text-blue-700 font-semibold"
|
||||
:class="{
|
||||
'text-green-600 hover:text-green-500 dark:text-green-100 font-bold bg-bg-secondary shadow-no-bottom': isRouteActive('AppsZoo'),
|
||||
'bounce-in': isRouteActive('AppsZoo'),
|
||||
}"
|
||||
>
|
||||
Apps Zoo
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
v-if="$store.state.config.enable_sd_service | $store.state.config.active_tti_service== 'autosd'"
|
||||
:to="{ name: 'AutoSD' }"
|
||||
class="inline-block border-l border-t border-r rounded-t py-2 px-4 text-blue-700 font-semibold"
|
||||
:class="{
|
||||
'text-green-600 hover:text-green-500 dark:text-green-100 font-bold bg-bg-secondary shadow-no-bottom': isRouteActive('AutoSD'),
|
||||
'bounce-in': isRouteActive('AutoSD'),
|
||||
}"
|
||||
>
|
||||
Auto111-SD
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
v-if="$store.state.config.enable_comfyui_service | $store.state.config.active_tti_service== 'comfyui'"
|
||||
:to="{ name: 'ComfyUI' }"
|
||||
class="inline-block border-l border-t border-r rounded-t py-2 px-4 text-blue-700 font-semibold"
|
||||
:class="{
|
||||
'text-green-600 hover:text-green-500 dark:text-green-100 font-bold bg-bg-secondary shadow-no-bottom': isRouteActive('ComfyUI'),
|
||||
'bounce-in': isRouteActive('ComfyUI'),
|
||||
}"
|
||||
>
|
||||
ComfyUI
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
v-if="$store.state.config.active_tts_service!='None' & $store.state.config.active_stt_service!='None'"
|
||||
:to="{ name: 'interactive' }"
|
||||
class="inline-block border-l border-t border-r rounded-t py-2 px-4 text-blue-700 font-semibold"
|
||||
:class="{
|
||||
'text-green-600 hover:text-green-500 dark:text-green-100 font-bold bg-bg-secondary shadow-no-bottom': isRouteActive('interactive'),
|
||||
'bounce-in': isRouteActive('interactive'),
|
||||
}"
|
||||
>
|
||||
interactive
|
||||
</RouterLink>
|
||||
<!--
|
||||
<RouterLink :to="{ name: 'nodes' }" class="link-item dark:link-item-dark">
|
||||
Nodes (under construction)
|
||||
</RouterLink>
|
||||
-->
|
||||
<!--
|
||||
|
||||
<RouterLink :to="{ name: 'training' }" class="link-item dark:link-item-dark">
|
||||
Training
|
||||
</RouterLink>
|
||||
<RouterLink :to="{ name: 'quantizing' }" class="link-item dark:link-item-dark">
|
||||
Quantizing
|
||||
</RouterLink>
|
||||
|
||||
-->
|
||||
<RouterLink
|
||||
:to="{ name: 'settings' }"
|
||||
class="inline-block border-l border-t border-r rounded-t py-2 px-4 text-blue-700 font-semibold"
|
||||
:class="{
|
||||
'text-green-600 hover:text-green-500 dark:text-green-100 font-bold bg-bg-secondary shadow-no-bottom': isRouteActive('settings'),
|
||||
'bounce-in': isRouteActive('settings'),
|
||||
}"
|
||||
>
|
||||
Settings
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
:to="{ name: 'help_view' }"
|
||||
class="inline-block border-l border-t border-r rounded-t py-2 px-4 text-blue-700 font-semibold"
|
||||
:class="{
|
||||
'text-green-600 hover:text-green-500 dark:text-green-100 font-bold bg-bg-secondary shadow-no-bottom': isRouteActive('help_view'),
|
||||
'bounce-in': isRouteActive('help_view'),
|
||||
}"
|
||||
>
|
||||
Help
|
||||
</RouterLink>
|
||||
|
||||
|
||||
</div>
|
||||
<div v-if="$store.state.ready" class="navbar-container z-60 flex flex-col sm:flex-row items-center">
|
||||
<div class="w-full text-center">
|
||||
<div class="m-0 flex border-b w-full items-center justify-center flex-row font-medium nav-ul text-center">
|
||||
<RouterLink
|
||||
v-for="(link, index) in filteredNavLinks"
|
||||
:key="index"
|
||||
:to="{ name: link.route }"
|
||||
class="nav-link"
|
||||
:class="{ 'active_link': isRouteActive(link.route) }"
|
||||
>
|
||||
{{ link.text }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick } from 'vue';
|
||||
import feather from 'feather-icons';
|
||||
import { RouterLink } from 'vue-router';
|
||||
import { store } from '../main';
|
||||
import { computed } from 'vue';
|
||||
import { RouterLink } from 'vue-router';
|
||||
import { store } from '../main';
|
||||
|
||||
const navLinks = [
|
||||
{ active: true, route: 'discussions', text: 'Discussions' },
|
||||
{ active: true, route: 'playground', text: 'Playground' },
|
||||
{ active: true, route: 'AppsZoo', text: 'Apps Zoo' },
|
||||
{
|
||||
active: false,
|
||||
route: 'AutoSD',
|
||||
text: 'Auto111-SD',
|
||||
condition: () => store.state.config.enable_sd_service || store.state.config.active_tti_service === 'autosd'
|
||||
},
|
||||
{
|
||||
active: false,
|
||||
route: 'ComfyUI',
|
||||
text: 'ComfyUI',
|
||||
condition: () => store.state.config.enable_comfyui_service || store.state.config.active_tti_service === 'comfyui'
|
||||
},
|
||||
{
|
||||
active: false,
|
||||
route: 'interactive',
|
||||
text: 'Interactive',
|
||||
condition: () => store.state.config.active_tts_service !== 'None' && store.state.config.active_stt_service !== 'None'
|
||||
},
|
||||
{ active: true, route: 'settings', text: 'Settings' },
|
||||
{ active: true, route: 'help_view', text: 'Help' }
|
||||
];
|
||||
|
||||
const filteredNavLinks = computed(() => {
|
||||
if (!store.state.ready) {
|
||||
return navLinks.filter(link => link.active);
|
||||
}
|
||||
return navLinks.filter(link => {
|
||||
if (link.condition) {
|
||||
return link.condition();
|
||||
}
|
||||
return link.active;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
name: 'Navigation',
|
||||
data() {
|
||||
return {
|
||||
// component data
|
||||
};
|
||||
computed: {
|
||||
filteredNavLinks() {
|
||||
return filteredNavLinks.value;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
isRouteActive(routeName) {
|
||||
try{
|
||||
try {
|
||||
return this.$route.name === routeName;
|
||||
}
|
||||
catch{
|
||||
console.log("routeName not found")
|
||||
return False;
|
||||
} catch {
|
||||
console.log("routeName not found");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// your methods
|
||||
},
|
||||
// other options
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.container {
|
||||
/* Remove margin and padding */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.link-item {
|
||||
height: 25px;
|
||||
margin-top: 5px;
|
||||
/* Thin out the links */
|
||||
padding: 0px 20px;
|
||||
margin-bottom: -5px; /* Removes the gap between li elements */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid transparent; /* Ensure all links have the same height */
|
||||
border-radius: 5px 5px 0 0; /* Rounded corners on the top */
|
||||
font-weight: bold; /* Optional: Add font-weight for emphasis */
|
||||
|
||||
/* Animate the links when hovered */
|
||||
transition: duration-300 ease-in-out transform;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.link-item-dark {
|
||||
/* Thin out the links */
|
||||
padding: 0px 20px;
|
||||
color: aliceblue;
|
||||
margin-bottom: -5px; /* Removes the gap between li elements */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid transparent; /* Ensure all links have the same height */
|
||||
border-radius: 5px 5px 0 0; /* Rounded corners on the top */
|
||||
font-weight: bold; /* Optional: Add font-weight for emphasis */
|
||||
|
||||
/* Animate the links when hovered */
|
||||
transition: duration-300 ease-in-out transform;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* Ensure each li extends to the bottom of its container */
|
||||
|
||||
.nav-ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nav-li {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeInAnimation 0.5s;
|
||||
}
|
||||
|
||||
@keyframes fadeInAnimation {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bounce-in {
|
||||
animation: bounceInAnimation 0.5s;
|
||||
}
|
||||
.bounce-out {
|
||||
animation: bounceOutAnimation 0.5s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes bounceInAnimation {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.shadow-no-bottom {
|
||||
box-shadow: 0px -4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
<style scoped>
|
||||
.nav-link.active_link {
|
||||
font-weight: bold;
|
||||
color: #fff; /* White text for active link */
|
||||
background-color: #007bff; /* Blue background for active link */
|
||||
border-radius: 5px; /* Rounded corners for active link */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
<!-- LEFT SIDE PANEL -->
|
||||
<div id="leftPanel" class="flex flex-col flex-grow overflow-y-scroll no-scrollbar "
|
||||
@dragover.stop.prevent="setDropZoneDiscussion()">
|
||||
<div class="text-light-text-panel dark:text-dark-text-panel bg-bg-light-panel sticky z-10 top-0 dark:bg-bg-dark-tone shadow-md ">
|
||||
<div class="text-light-text-panel dark:text-dark-text-panel panels-color sticky z-10 top-0 ">
|
||||
|
||||
<!-- CONTROL PANEL -->
|
||||
<div class="flex-row p-4 flex items-center gap-3 flex-0">
|
||||
@ -255,7 +255,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute h-15 bottom-0 left-0 w-full bg-bg-light-panel dark:bg-bg-dark-tone light-text-panel py-4 cursor-pointer text-light-text-panel dark:text-dark-text-panel hover:text-secondary" @click="showDatabaseSelector">
|
||||
<div class="absolute h-15 bottom-0 left-0 w-full unicolor-panels-color light-text-panel py-4 cursor-pointer text-light-text-panel dark:text-dark-text-panel hover:text-secondary" @click="showDatabaseSelector">
|
||||
<p class="text-center font-large font-bold text-l drop-shadow-md align-middle">{{ formatted_database_name.replace("_"," ") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -29,17 +29,37 @@ module.exports = {
|
||||
'bg-dark-code-block': 'var(--color-bg-dark-code-block)',
|
||||
'bg-dark-discussion': 'var(--color-bg-dark-discussion)',
|
||||
'bg-dark-discussion-odd': 'var(--color-bg-dark-discussion-odd)'
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['PTSans', 'Roboto', 'sans-serif']
|
||||
},
|
||||
container: {
|
||||
padding: '2rem',
|
||||
center: true
|
||||
}
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-light': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
|
||||
'gradient-dark': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
|
||||
},
|
||||
gradientColorStops: {
|
||||
'light-start': '#e0eaff',
|
||||
'light-end': '#f0e6ff',
|
||||
'dark-start': '#0f2647',
|
||||
'dark-end': '#1e1b4b',
|
||||
},
|
||||
}
|
||||
},
|
||||
plugins: [require('flowbite/plugin'), require('tailwind-scrollbar')],
|
||||
plugins: [
|
||||
require('flowbite/plugin'),
|
||||
require('tailwind-scrollbar'),
|
||||
function({ addBase, theme }) {
|
||||
addBase({
|
||||
'body': {
|
||||
'@apply bg-gradient-light from-light-start to-light-end dark:bg-gradient-dark dark:from-dark-start dark:to-dark-end min-h-screen': {}
|
||||
},
|
||||
})
|
||||
}
|
||||
],
|
||||
variants: {
|
||||
h1: {
|
||||
fontWeight: 'bold'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user