mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-18 20:17:50 +00:00
theme upgrade
This commit is contained in:
Saifeddine ALOUI
parent
603bb8aa0f
commit
1e0d83983e
@ -606,13 +606,13 @@ async generateCode(prompt, images = [], {
|
||||
repeat_last_n: repeat_last_n,
|
||||
callback: streamingCallback
|
||||
});
|
||||
const newCodes = this.extractCodeBlocks(response);
|
||||
if (newCodes.length === 0) break;
|
||||
const codes = this.extractCodeBlocks(response);
|
||||
if (codes.length === 0) break;
|
||||
|
||||
if (!newCodes[0].is_complete) {
|
||||
code += '\n' + newCodes[0].content.split('\n').slice(0, -1).join('\n');
|
||||
if (!codes[0].is_complete) {
|
||||
code += '\n' + codes[0].content.split('\n').slice(0, -1).join('\n');
|
||||
} else {
|
||||
code += '\n' + newCodes[0].content;
|
||||
code += '\n' + codes[0].content;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
||||
@ -58,6 +58,20 @@ async def get_last_video_url():
|
||||
infos = base_path/"news"/"latest_video.txt"
|
||||
return infos.read_text(encoding="utf8")
|
||||
|
||||
@router.get("/get_themes")
|
||||
async def get_themes():
|
||||
"""Get the list of available themes."""
|
||||
base_path = Path(__file__).parent.parent
|
||||
themes_path = base_path / "web" / "dist" / "themes"
|
||||
|
||||
# Get all .css files in the themes directory
|
||||
theme_files = list(themes_path.glob('*.css'))
|
||||
|
||||
# Remove the .css extension from each file name
|
||||
themes = [theme_file.stem for theme_file in theme_files]
|
||||
|
||||
return themes
|
||||
|
||||
@router.get("/get_lollms_webui_version")
|
||||
async def get_lollms_webui_version():
|
||||
"""Get the version of the LoLLMs Web UI application."""
|
||||
|
||||
@ -1 +1 @@
|
||||
https://www.youtube.com/watch?v=avaixPtHUIc
|
||||
https://youtu.be/LVmF_IFHWKQ?si=exhRtwy0h0aIXxi7
|
||||
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-CgEQAUVL.css
vendored
8
web/dist/assets/index-CgEQAUVL.css
vendored
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-DBWXZ2MB.css
vendored
Normal file
8
web/dist/assets/index-DBWXZ2MB.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-CMcKC3ij.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-CgEQAUVL.css">
|
||||
<script type="module" crossorigin src="/assets/index-C_G9-j_h.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-DBWXZ2MB.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
150
web/dist/themes/amber.css
vendored
150
web/dist/themes/amber.css
vendored
@ -4582,7 +4582,7 @@ button:hover{
|
||||
}
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
height: 2.5rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 0.125rem;
|
||||
@ -4631,7 +4631,7 @@ button:hover{
|
||||
background: linear-gradient(45deg, #d97706, #fbbf24);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
color: #f59e0b;
|
||||
}
|
||||
.chat-bar{
|
||||
position: relative;
|
||||
@ -4890,6 +4890,152 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu{
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
min-width: 150px;
|
||||
border-radius: 0px;
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(245 158 11 / var(--tw-border-opacity));
|
||||
background-color: rgb(120 53 15 / var(--tw-bg-opacity));
|
||||
--tw-bg-opacity: 0.9;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--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);
|
||||
--tw-shadow-color: rgb(245 158 11 / 0.5);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(251 191 36 / var(--tw-border-opacity));
|
||||
background-color: rgb(69 26 3 / var(--tw-bg-opacity));
|
||||
--tw-bg-opacity: 0.9;
|
||||
--tw-shadow-color: rgb(251 191 36 / 0.5);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu::before{
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
z-index: -10;
|
||||
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: rgb(245 158 11 / 0.1) var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), rgb(245 158 11 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
--tw-gradient-to: transparent var(--tw-gradient-to-position);
|
||||
background-size: 100% 1000px;
|
||||
opacity: 0.3;
|
||||
--tw-content: '';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
.context-menu-item{
|
||||
cursor: pointer;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
--tw-shadow-color: rgb(245 158 11 / 0.7);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
transition-property: all;
|
||||
transition-duration: 300ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.context-menu-item: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));
|
||||
background-color: rgb(245 158 11 / 0.2);
|
||||
}
|
||||
.context-menu-item:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(251 191 36 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu-item:hover:is(.dark *){
|
||||
background-color: rgb(251 191 36 / 0.2);
|
||||
}
|
||||
.context-menu-separator{
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
height: 1px;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(245 158 11 / var(--tw-bg-opacity));
|
||||
--tw-shadow-color: #f59e0b;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu-separator:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(251 191 36 / var(--tw-bg-opacity));
|
||||
--tw-shadow-color: #fbbf24;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu-item-disabled{
|
||||
cursor: not-allowed;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(146 64 14 / var(--tw-text-opacity));
|
||||
--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);
|
||||
}
|
||||
.context-menu-item-disabled:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(180 83 9 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu-item-icon{
|
||||
margin-right: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu-item-icon:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(251 191 36 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu-item::after{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
transform-origin: center;
|
||||
--tw-scale-x: 0;
|
||||
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));
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: transparent var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), #f59e0b var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
--tw-gradient-to: transparent var(--tw-gradient-to-position);
|
||||
transition-property: transform;
|
||||
transition-duration: 300ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--tw-content: '';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
.context-menu-item:is(.dark *)::after{
|
||||
--tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), #fbbf24 var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
}
|
||||
.context-menu-item:hover::after{
|
||||
--tw-scale-x: 1;
|
||||
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));
|
||||
}
|
||||
@keyframes matrix-rain {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 1000px;
|
||||
}
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
148
web/dist/themes/borg.css
vendored
148
web/dist/themes/borg.css
vendored
@ -4195,7 +4195,7 @@ button:hover{
|
||||
background: linear-gradient(45deg, #00ff00, #39ff14);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
color: greenyellow;
|
||||
}
|
||||
.chat-bar{
|
||||
position: relative;
|
||||
@ -4457,6 +4457,152 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu{
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
min-width: 150px;
|
||||
border-radius: 0px;
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(14 159 110 / var(--tw-border-opacity));
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
--tw-bg-opacity: 0.9;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--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);
|
||||
--tw-shadow-color: rgb(14 159 110 / 0.5);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(49 196 141 / var(--tw-border-opacity));
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||
--tw-bg-opacity: 0.9;
|
||||
--tw-shadow-color: rgb(49 196 141 / 0.5);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu::before{
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
z-index: -10;
|
||||
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: rgb(14 159 110 / 0.1) var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(14 159 110 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: rgb(14 159 110 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), rgb(14 159 110 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
--tw-gradient-to: transparent var(--tw-gradient-to-position);
|
||||
background-size: 100% 1000px;
|
||||
opacity: 0.3;
|
||||
--tw-content: '';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
.context-menu-item{
|
||||
cursor: pointer;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 159 110 / var(--tw-text-opacity));
|
||||
--tw-shadow-color: rgb(14 159 110 / 0.7);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
transition-property: all;
|
||||
transition-duration: 300ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.context-menu-item: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));
|
||||
background-color: rgb(1 71 55 / 0.4);
|
||||
}
|
||||
.context-menu-item:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu-item:hover:is(.dark *){
|
||||
background-color: rgb(4 108 78 / 0.4);
|
||||
}
|
||||
.context-menu-separator{
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
height: 1px;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(14 159 110 / var(--tw-bg-opacity));
|
||||
--tw-shadow-color: #0E9F6E;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu-separator:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(49 196 141 / var(--tw-bg-opacity));
|
||||
--tw-shadow-color: #31C48D;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu-item-disabled{
|
||||
cursor: not-allowed;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
||||
--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);
|
||||
}
|
||||
.context-menu-item-disabled:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu-item-icon{
|
||||
margin-right: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 159 110 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu-item-icon:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu-item::after{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
transform-origin: center;
|
||||
--tw-scale-x: 0;
|
||||
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));
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: transparent var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: rgb(14 159 110 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), #0E9F6E var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
--tw-gradient-to: transparent var(--tw-gradient-to-position);
|
||||
transition-property: transform;
|
||||
transition-duration: 300ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--tw-content: '';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
.context-menu-item:is(.dark *)::after{
|
||||
--tw-gradient-to: rgb(49 196 141 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), #31C48D var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
}
|
||||
.context-menu-item:hover::after{
|
||||
--tw-scale-x: 1;
|
||||
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));
|
||||
}
|
||||
@keyframes borg-scan {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 1000px;
|
||||
}
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
5957
web/dist/themes/christmas.css
vendored
Normal file
5957
web/dist/themes/christmas.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
97
web/dist/themes/default.css
vendored
97
web/dist/themes/default.css
vendored
@ -872,6 +872,49 @@ body {
|
||||
max-width: 1536px;
|
||||
}
|
||||
}
|
||||
.context-menu{
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
min-width: 150px;
|
||||
border-radius: 0px;
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(14 159 110 / var(--tw-border-opacity));
|
||||
background-color: rgb(1 71 55 / var(--tw-bg-opacity));
|
||||
--tw-bg-opacity: 0.9;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--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);
|
||||
--tw-shadow-color: rgb(14 159 110 / 0.5);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(49 196 141 / var(--tw-border-opacity));
|
||||
background-color: rgb(5 46 22 / var(--tw-bg-opacity));
|
||||
--tw-bg-opacity: 0.9;
|
||||
--tw-shadow-color: rgb(49 196 141 / 0.5);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu::before{
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
z-index: -10;
|
||||
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: rgb(14 159 110 / 0.1) var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(14 159 110 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: rgb(14 159 110 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), rgb(14 159 110 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
--tw-gradient-to: transparent var(--tw-gradient-to-position);
|
||||
background-size: 100% 1000px;
|
||||
opacity: 0.3;
|
||||
--tw-content: '';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
.sr-only{
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
@ -4565,10 +4608,10 @@ background-clip: text;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||
background-color: rgb(225 239 254 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
color: rgb(26 86 219 / 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);
|
||||
@ -4580,11 +4623,11 @@ background-clip: text;
|
||||
}
|
||||
.chat-bar:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(4 108 78 / var(--tw-border-opacity));
|
||||
border-color: rgb(202 191 253 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
background-color: rgb(35 56 118 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
color: rgb(164 202 254 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
@ -4725,6 +4768,48 @@ background-clip: text;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(63 131 248 / var(--tw-text-opacity)); /* 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;
|
||||
}
|
||||
@keyframes matrix-rain {
|
||||
0% { background-position: 0 0; }
|
||||
100% { background-position: 0 1000px; }
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 1000px;
|
||||
}
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -6313,4 +6398,4 @@ background-clip: text;
|
||||
.\32xl\:h-96{
|
||||
height: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
87
web/dist/themes/lollms_blue.css
vendored
87
web/dist/themes/lollms_blue.css
vendored
@ -4565,7 +4565,7 @@ button:hover{
|
||||
}
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
height: 2.5rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 9999px;
|
||||
@ -4652,10 +4652,10 @@ button:hover{
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(35 56 118 / var(--tw-bg-opacity));
|
||||
background-color: rgb(225 239 254 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(164 202 254 / var(--tw-text-opacity));
|
||||
color: rgb(26 86 219 / 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);
|
||||
@ -4667,11 +4667,11 @@ button:hover{
|
||||
}
|
||||
.chat-bar:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(26 86 219 / var(--tw-border-opacity));
|
||||
border-color: rgb(202 191 253 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(23 37 84 / var(--tw-bg-opacity));
|
||||
background-color: rgb(35 56 118 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(195 221 253 / var(--tw-text-opacity));
|
||||
color: rgb(164 202 254 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
@ -4898,6 +4898,81 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(63 131 248 / var(--tw-text-opacity));
|
||||
}
|
||||
:root {
|
||||
--lollms-primary: #0056b3;
|
||||
--lollms-secondary: #007bff;
|
||||
--lollms-light: #e6f2ff;
|
||||
--lollms-dark: #004085;
|
||||
--lollms-text: #333333;
|
||||
}
|
||||
.context-menu {
|
||||
position: absolute;
|
||||
background-color: var(--lollms-light);
|
||||
border: 1px solid var(--lollms-secondary);
|
||||
box-shadow: 0 2px 10px rgba(0, 123, 255, 0.2);
|
||||
border-radius: 6px;
|
||||
padding: 8px 0;
|
||||
min-width: 180px;
|
||||
z-index: 1000;
|
||||
font-family: 'Arial', sans-serif;
|
||||
}
|
||||
.context-menu-item {
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
color: var(--lollms-text);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.context-menu-item:hover {
|
||||
background-color: var(--lollms-secondary);
|
||||
color: white;
|
||||
}
|
||||
.context-menu-separator {
|
||||
height: 1px;
|
||||
background-color: var(--lollms-secondary);
|
||||
margin: 6px 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.context-menu-item-disabled {
|
||||
color: #999999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.context-menu-item-icon {
|
||||
margin-right: 10px;
|
||||
color: var(--lollms-primary);
|
||||
}
|
||||
.context-menu-item:hover .context-menu-item-icon {
|
||||
color: white;
|
||||
}
|
||||
/* LoLLMs branding */
|
||||
.context-menu::before {
|
||||
content: "LoLLMs";
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 10px;
|
||||
font-size: 12px;
|
||||
color: var(--lollms-primary);
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
/* Subtle AI-inspired background pattern */
|
||||
.context-menu::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(circle, var(--lollms-secondary) 1px, transparent 1px),
|
||||
radial-gradient(circle, var(--lollms-secondary) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 10px 10px;
|
||||
opacity: 0.05;
|
||||
pointer-events: none;
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
88
web/dist/themes/matrix_reborn.css
vendored
88
web/dist/themes/matrix_reborn.css
vendored
@ -6022,6 +6022,94 @@ button:hover{
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
|
||||
@keyframes matrix-rain {
|
||||
0% { background-position: 0 0; }
|
||||
100% { background-position: 0 1000px; }
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 10, 0, 0.9); /* Dark green, slightly transparent background */
|
||||
border: 1px solid #00ff00; /* Bright green border */
|
||||
box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); /* Green glow */
|
||||
border-radius: 0; /* Sharp edges */
|
||||
padding: 8px 0;
|
||||
min-width: 150px;
|
||||
z-index: 1000;
|
||||
font-family: 'Courier New', monospace; /* Matrix-style font */
|
||||
}
|
||||
|
||||
.context-menu::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(180deg,
|
||||
rgba(0, 255, 0, 0.1) 0%,
|
||||
rgba(0, 255, 0, 0.05) 50%,
|
||||
rgba(0, 0, 0, 0) 100%);
|
||||
background-size: 100% 1000px;
|
||||
animation: matrix-rain 20s linear infinite;
|
||||
opacity: 0.3;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
color: #00ff00; /* Bright green text */
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
|
||||
.context-menu-item:hover {
|
||||
background-color: rgba(0, 255, 0, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.context-menu-separator {
|
||||
height: 1px;
|
||||
background-color: #00ff00; /* Bright green separator */
|
||||
margin: 4px 0;
|
||||
box-shadow: 0 0 10px #00ff00; /* Green glow */
|
||||
}
|
||||
|
||||
.context-menu-item-disabled {
|
||||
color: #005500; /* Darker green for disabled items */
|
||||
cursor: not-allowed;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.context-menu-item-icon {
|
||||
margin-right: 8px;
|
||||
color: #00ff00; /* Bright green icon color */
|
||||
}
|
||||
|
||||
/* Additional Matrix-inspired effect */
|
||||
|
||||
.context-menu-item::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
#00ff00 50%,
|
||||
transparent 100%);
|
||||
transform: scaleX(0);
|
||||
transform-origin: center;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.context-menu-item:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
97
web/dist/themes/red_dragon.css
vendored
97
web/dist/themes/red_dragon.css
vendored
@ -5663,7 +5663,7 @@ button:hover{
|
||||
background: linear-gradient(45deg, #dc2626, #ef4444);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.chat-bar{
|
||||
@ -5992,6 +5992,101 @@ button:hover{
|
||||
text-shadow: 0 0 5px rgba(255, 165, 0, 0.7);
|
||||
}
|
||||
|
||||
@keyframes fire-flicker {
|
||||
0% { opacity: 0.8; }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
position: absolute;
|
||||
background: linear-gradient(135deg, #2a0000 0%, #8b0000 100%);
|
||||
border: 2px solid #ff4500;
|
||||
box-shadow: 0 0 20px rgba(255, 69, 0, 0.6);
|
||||
border-radius: 8px;
|
||||
padding: 8px 0;
|
||||
min-width: 200px;
|
||||
z-index: 1000;
|
||||
font-family: 'Trajan Pro', 'Cinzel', serif;
|
||||
}
|
||||
|
||||
.context-menu::before {
|
||||
content: "🐉";
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
left: 10px;
|
||||
font-size: 24px;
|
||||
filter: drop-shadow(0 0 5px #ff4500);
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
color: #ffd700;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 0 0 5px rgba(255, 69, 0, 0.7);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.context-menu-item:hover {
|
||||
background-color: rgba(255, 69, 0, 0.3);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.context-menu-item::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -100%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 69, 0, 0.4), transparent);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.context-menu-item:hover::after {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.context-menu-separator {
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #ff4500, transparent);
|
||||
margin: 6px 0;
|
||||
animation: fire-flicker 2s infinite;
|
||||
}
|
||||
|
||||
.context-menu-item-disabled {
|
||||
color: #a0522d;
|
||||
cursor: not-allowed;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.context-menu-item-icon {
|
||||
margin-right: 10px;
|
||||
color: #ff4500;
|
||||
}
|
||||
|
||||
/* Dragon scale background */
|
||||
|
||||
.context-menu::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 50% 50%, rgba(255, 69, 0, 0.1) 20%, transparent 20%),
|
||||
radial-gradient(circle at 50% 50%, rgba(255, 69, 0, 0.1) 20%, transparent 20%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 10px 10px;
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
@ -4582,7 +4582,7 @@ button:hover{
|
||||
}
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
height: 2.5rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 0.125rem;
|
||||
@ -4631,7 +4631,7 @@ button:hover{
|
||||
background: linear-gradient(45deg, #d97706, #fbbf24);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
color: #f59e0b;
|
||||
}
|
||||
.chat-bar{
|
||||
position: relative;
|
||||
@ -4890,6 +4890,152 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu{
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
min-width: 150px;
|
||||
border-radius: 0px;
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(245 158 11 / var(--tw-border-opacity));
|
||||
background-color: rgb(120 53 15 / var(--tw-bg-opacity));
|
||||
--tw-bg-opacity: 0.9;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--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);
|
||||
--tw-shadow-color: rgb(245 158 11 / 0.5);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(251 191 36 / var(--tw-border-opacity));
|
||||
background-color: rgb(69 26 3 / var(--tw-bg-opacity));
|
||||
--tw-bg-opacity: 0.9;
|
||||
--tw-shadow-color: rgb(251 191 36 / 0.5);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu::before{
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
z-index: -10;
|
||||
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: rgb(245 158 11 / 0.1) var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), rgb(245 158 11 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
--tw-gradient-to: transparent var(--tw-gradient-to-position);
|
||||
background-size: 100% 1000px;
|
||||
opacity: 0.3;
|
||||
--tw-content: '';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
.context-menu-item{
|
||||
cursor: pointer;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
--tw-shadow-color: rgb(245 158 11 / 0.7);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
transition-property: all;
|
||||
transition-duration: 300ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.context-menu-item: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));
|
||||
background-color: rgb(245 158 11 / 0.2);
|
||||
}
|
||||
.context-menu-item:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(251 191 36 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu-item:hover:is(.dark *){
|
||||
background-color: rgb(251 191 36 / 0.2);
|
||||
}
|
||||
.context-menu-separator{
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
height: 1px;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(245 158 11 / var(--tw-bg-opacity));
|
||||
--tw-shadow-color: #f59e0b;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu-separator:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(251 191 36 / var(--tw-bg-opacity));
|
||||
--tw-shadow-color: #fbbf24;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu-item-disabled{
|
||||
cursor: not-allowed;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(146 64 14 / var(--tw-text-opacity));
|
||||
--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);
|
||||
}
|
||||
.context-menu-item-disabled:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(180 83 9 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu-item-icon{
|
||||
margin-right: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu-item-icon:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(251 191 36 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu-item::after{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
transform-origin: center;
|
||||
--tw-scale-x: 0;
|
||||
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));
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: transparent var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), #f59e0b var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
--tw-gradient-to: transparent var(--tw-gradient-to-position);
|
||||
transition-property: transform;
|
||||
transition-duration: 300ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--tw-content: '';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
.context-menu-item:is(.dark *)::after{
|
||||
--tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), #fbbf24 var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
}
|
||||
.context-menu-item:hover::after{
|
||||
--tw-scale-x: 1;
|
||||
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));
|
||||
}
|
||||
@keyframes matrix-rain {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 1000px;
|
||||
}
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
@ -4195,7 +4195,7 @@ button:hover{
|
||||
background: linear-gradient(45deg, #00ff00, #39ff14);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
color: greenyellow;
|
||||
}
|
||||
.chat-bar{
|
||||
position: relative;
|
||||
@ -4457,6 +4457,152 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu{
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
min-width: 150px;
|
||||
border-radius: 0px;
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(14 159 110 / var(--tw-border-opacity));
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
--tw-bg-opacity: 0.9;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--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);
|
||||
--tw-shadow-color: rgb(14 159 110 / 0.5);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(49 196 141 / var(--tw-border-opacity));
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||
--tw-bg-opacity: 0.9;
|
||||
--tw-shadow-color: rgb(49 196 141 / 0.5);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu::before{
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
z-index: -10;
|
||||
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: rgb(14 159 110 / 0.1) var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(14 159 110 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: rgb(14 159 110 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), rgb(14 159 110 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
--tw-gradient-to: transparent var(--tw-gradient-to-position);
|
||||
background-size: 100% 1000px;
|
||||
opacity: 0.3;
|
||||
--tw-content: '';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
.context-menu-item{
|
||||
cursor: pointer;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 159 110 / var(--tw-text-opacity));
|
||||
--tw-shadow-color: rgb(14 159 110 / 0.7);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
transition-property: all;
|
||||
transition-duration: 300ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.context-menu-item: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));
|
||||
background-color: rgb(1 71 55 / 0.4);
|
||||
}
|
||||
.context-menu-item:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu-item:hover:is(.dark *){
|
||||
background-color: rgb(4 108 78 / 0.4);
|
||||
}
|
||||
.context-menu-separator{
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
height: 1px;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(14 159 110 / var(--tw-bg-opacity));
|
||||
--tw-shadow-color: #0E9F6E;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu-separator:is(.dark *){
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(49 196 141 / var(--tw-bg-opacity));
|
||||
--tw-shadow-color: #31C48D;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu-item-disabled{
|
||||
cursor: not-allowed;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
||||
--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);
|
||||
}
|
||||
.context-menu-item-disabled:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu-item-icon{
|
||||
margin-right: 0.5rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 159 110 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu-item-icon:is(.dark *){
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
}
|
||||
.context-menu-item::after{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
transform-origin: center;
|
||||
--tw-scale-x: 0;
|
||||
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));
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: transparent var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: rgb(14 159 110 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), #0E9F6E var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
--tw-gradient-to: transparent var(--tw-gradient-to-position);
|
||||
transition-property: transform;
|
||||
transition-duration: 300ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--tw-content: '';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
.context-menu-item:is(.dark *)::after{
|
||||
--tw-gradient-to: rgb(49 196 141 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), #31C48D var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
}
|
||||
.context-menu-item:hover::after{
|
||||
--tw-scale-x: 1;
|
||||
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));
|
||||
}
|
||||
@keyframes borg-scan {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 1000px;
|
||||
}
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
5957
web/public/themes/christmas.css
Normal file
5957
web/public/themes/christmas.css
Normal file
File diff suppressed because it is too large
Load Diff
@ -872,6 +872,49 @@ body {
|
||||
max-width: 1536px;
|
||||
}
|
||||
}
|
||||
.context-menu{
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
min-width: 150px;
|
||||
border-radius: 0px;
|
||||
border-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(14 159 110 / var(--tw-border-opacity));
|
||||
background-color: rgb(1 71 55 / var(--tw-bg-opacity));
|
||||
--tw-bg-opacity: 0.9;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--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);
|
||||
--tw-shadow-color: rgb(14 159 110 / 0.5);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(49 196 141 / var(--tw-border-opacity));
|
||||
background-color: rgb(5 46 22 / var(--tw-bg-opacity));
|
||||
--tw-bg-opacity: 0.9;
|
||||
--tw-shadow-color: rgb(49 196 141 / 0.5);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.context-menu::before{
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
z-index: -10;
|
||||
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: rgb(14 159 110 / 0.1) var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(14 159 110 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: rgb(14 159 110 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), rgb(14 159 110 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
--tw-gradient-to: transparent var(--tw-gradient-to-position);
|
||||
background-size: 100% 1000px;
|
||||
opacity: 0.3;
|
||||
--tw-content: '';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
.sr-only{
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
@ -4565,10 +4608,10 @@ background-clip: text;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||
background-color: rgb(225 239 254 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(49 196 141 / var(--tw-text-opacity));
|
||||
color: rgb(26 86 219 / 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);
|
||||
@ -4580,11 +4623,11 @@ background-clip: text;
|
||||
}
|
||||
.chat-bar:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(4 108 78 / var(--tw-border-opacity));
|
||||
border-color: rgb(202 191 253 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
background-color: rgb(35 56 118 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(132 225 188 / var(--tw-text-opacity));
|
||||
color: rgb(164 202 254 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
@ -4725,6 +4768,48 @@ background-clip: text;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(63 131 248 / var(--tw-text-opacity)); /* 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;
|
||||
}
|
||||
@keyframes matrix-rain {
|
||||
0% { background-position: 0 0; }
|
||||
100% { background-position: 0 1000px; }
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 1000px;
|
||||
}
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -6313,4 +6398,4 @@ background-clip: text;
|
||||
.\32xl\:h-96{
|
||||
height: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4565,7 +4565,7 @@ button:hover{
|
||||
}
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
height: 2.5rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 9999px;
|
||||
@ -4652,10 +4652,10 @@ button:hover{
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(35 56 118 / var(--tw-bg-opacity));
|
||||
background-color: rgb(225 239 254 / var(--tw-bg-opacity));
|
||||
padding: 0.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(164 202 254 / var(--tw-text-opacity));
|
||||
color: rgb(26 86 219 / 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);
|
||||
@ -4667,11 +4667,11 @@ button:hover{
|
||||
}
|
||||
.chat-bar:is(.dark *){
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(26 86 219 / var(--tw-border-opacity));
|
||||
border-color: rgb(202 191 253 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(23 37 84 / var(--tw-bg-opacity));
|
||||
background-color: rgb(35 56 118 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(195 221 253 / var(--tw-text-opacity));
|
||||
color: rgb(164 202 254 / var(--tw-text-opacity));
|
||||
}
|
||||
.chat-bar {
|
||||
height: 50px;
|
||||
@ -4898,6 +4898,81 @@ button:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(63 131 248 / var(--tw-text-opacity));
|
||||
}
|
||||
:root {
|
||||
--lollms-primary: #0056b3;
|
||||
--lollms-secondary: #007bff;
|
||||
--lollms-light: #e6f2ff;
|
||||
--lollms-dark: #004085;
|
||||
--lollms-text: #333333;
|
||||
}
|
||||
.context-menu {
|
||||
position: absolute;
|
||||
background-color: var(--lollms-light);
|
||||
border: 1px solid var(--lollms-secondary);
|
||||
box-shadow: 0 2px 10px rgba(0, 123, 255, 0.2);
|
||||
border-radius: 6px;
|
||||
padding: 8px 0;
|
||||
min-width: 180px;
|
||||
z-index: 1000;
|
||||
font-family: 'Arial', sans-serif;
|
||||
}
|
||||
.context-menu-item {
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
color: var(--lollms-text);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.context-menu-item:hover {
|
||||
background-color: var(--lollms-secondary);
|
||||
color: white;
|
||||
}
|
||||
.context-menu-separator {
|
||||
height: 1px;
|
||||
background-color: var(--lollms-secondary);
|
||||
margin: 6px 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.context-menu-item-disabled {
|
||||
color: #999999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.context-menu-item-icon {
|
||||
margin-right: 10px;
|
||||
color: var(--lollms-primary);
|
||||
}
|
||||
.context-menu-item:hover .context-menu-item-icon {
|
||||
color: white;
|
||||
}
|
||||
/* LoLLMs branding */
|
||||
.context-menu::before {
|
||||
content: "LoLLMs";
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 10px;
|
||||
font-size: 12px;
|
||||
color: var(--lollms-primary);
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
/* Subtle AI-inspired background pattern */
|
||||
.context-menu::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(circle, var(--lollms-secondary) 1px, transparent 1px),
|
||||
radial-gradient(circle, var(--lollms-secondary) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 10px 10px;
|
||||
opacity: 0.05;
|
||||
pointer-events: none;
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
@ -6022,6 +6022,94 @@ button:hover{
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
|
||||
@keyframes matrix-rain {
|
||||
0% { background-position: 0 0; }
|
||||
100% { background-position: 0 1000px; }
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 10, 0, 0.9); /* Dark green, slightly transparent background */
|
||||
border: 1px solid #00ff00; /* Bright green border */
|
||||
box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); /* Green glow */
|
||||
border-radius: 0; /* Sharp edges */
|
||||
padding: 8px 0;
|
||||
min-width: 150px;
|
||||
z-index: 1000;
|
||||
font-family: 'Courier New', monospace; /* Matrix-style font */
|
||||
}
|
||||
|
||||
.context-menu::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(180deg,
|
||||
rgba(0, 255, 0, 0.1) 0%,
|
||||
rgba(0, 255, 0, 0.05) 50%,
|
||||
rgba(0, 0, 0, 0) 100%);
|
||||
background-size: 100% 1000px;
|
||||
animation: matrix-rain 20s linear infinite;
|
||||
opacity: 0.3;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
color: #00ff00; /* Bright green text */
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
|
||||
.context-menu-item:hover {
|
||||
background-color: rgba(0, 255, 0, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.context-menu-separator {
|
||||
height: 1px;
|
||||
background-color: #00ff00; /* Bright green separator */
|
||||
margin: 4px 0;
|
||||
box-shadow: 0 0 10px #00ff00; /* Green glow */
|
||||
}
|
||||
|
||||
.context-menu-item-disabled {
|
||||
color: #005500; /* Darker green for disabled items */
|
||||
cursor: not-allowed;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.context-menu-item-icon {
|
||||
margin-right: 8px;
|
||||
color: #00ff00; /* Bright green icon color */
|
||||
}
|
||||
|
||||
/* Additional Matrix-inspired effect */
|
||||
|
||||
.context-menu-item::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
#00ff00 50%,
|
||||
transparent 100%);
|
||||
transform: scaleX(0);
|
||||
transform-origin: center;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.context-menu-item:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
@ -5663,7 +5663,7 @@ button:hover{
|
||||
background: linear-gradient(45deg, #dc2626, #ef4444);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.chat-bar{
|
||||
@ -5992,6 +5992,101 @@ button:hover{
|
||||
text-shadow: 0 0 5px rgba(255, 165, 0, 0.7);
|
||||
}
|
||||
|
||||
@keyframes fire-flicker {
|
||||
0% { opacity: 0.8; }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
position: absolute;
|
||||
background: linear-gradient(135deg, #2a0000 0%, #8b0000 100%);
|
||||
border: 2px solid #ff4500;
|
||||
box-shadow: 0 0 20px rgba(255, 69, 0, 0.6);
|
||||
border-radius: 8px;
|
||||
padding: 8px 0;
|
||||
min-width: 200px;
|
||||
z-index: 1000;
|
||||
font-family: 'Trajan Pro', 'Cinzel', serif;
|
||||
}
|
||||
|
||||
.context-menu::before {
|
||||
content: "🐉";
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
left: 10px;
|
||||
font-size: 24px;
|
||||
filter: drop-shadow(0 0 5px #ff4500);
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
color: #ffd700;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 0 0 5px rgba(255, 69, 0, 0.7);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.context-menu-item:hover {
|
||||
background-color: rgba(255, 69, 0, 0.3);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.context-menu-item::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -100%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 69, 0, 0.4), transparent);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.context-menu-item:hover::after {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.context-menu-separator {
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #ff4500, transparent);
|
||||
margin: 6px 0;
|
||||
animation: fire-flicker 2s infinite;
|
||||
}
|
||||
|
||||
.context-menu-item-disabled {
|
||||
color: #a0522d;
|
||||
cursor: not-allowed;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.context-menu-item-icon {
|
||||
margin-right: 10px;
|
||||
color: #ff4500;
|
||||
}
|
||||
|
||||
/* Dragon scale background */
|
||||
|
||||
.context-menu::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 50% 50%, rgba(255, 69, 0, 0.1) 20%, transparent 20%),
|
||||
radial-gradient(circle at 50% 50%, rgba(255, 69, 0, 0.1) 20%, transparent 20%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 10px 10px;
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
@ -136,14 +136,14 @@
|
||||
<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 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()">
|
||||
<div v-if="isDarkMode" class="text-2xl svg-button hover:text-primary duration-150 cursor-pointer w-50 h-50 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()">
|
||||
<div v-else class="text-2xl svg-button hover:text-primary duration-150 cursor-pointer w-50 h-50 ml-2" title="Switch to Dark theme" @click="themeSwitch()">
|
||||
<i data-feather="moon"></i>
|
||||
</div>
|
||||
<div class="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">
|
||||
<button @click="toggleLanguageMenu" class="svg-button">
|
||||
{{ $store.state.language.slice(0, 2) }}
|
||||
</button>
|
||||
<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" style="position: absolute; top: 100%; width: 200px; max-height: 300px; overflow-y: auto;">
|
||||
@ -290,7 +290,7 @@ export default {
|
||||
return {
|
||||
themeDropdownOpen: false,
|
||||
currentTheme: localStorage.getItem('preferred-theme') || 'default',
|
||||
availableThemes: ['default', 'strawberry_milkshake', 'red_dragon', 'matrix_reborn', 'borg', 'amber', 'sober_gray', 'strawberry'],
|
||||
availableThemes: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
isInfosMenuVisible: false,
|
||||
@ -378,14 +378,24 @@ export default {
|
||||
this.userTheme = localStorage.getItem("theme");
|
||||
console.log(this.userTheme)
|
||||
this.systemTheme = window.matchMedia("prefers-color-scheme: dark").matches;
|
||||
this.fetchThemes();
|
||||
this.themeCheck()
|
||||
|
||||
this.$nextTick(() => {
|
||||
feather.replace()
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
async fetchThemes() {
|
||||
try {
|
||||
const response = await axios.get('/get_themes');
|
||||
this.availableThemes = response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching themes:', error);
|
||||
// Optionally, you can set a default list of themes in case the API call fails
|
||||
this.availableThemes = ['default', 'strawberry_milkshake', 'red_dragon', 'matrix_reborn', 'borg', 'amber', 'sober_gray', 'strawberry'];
|
||||
}
|
||||
},
|
||||
toggleThemeDropDown()
|
||||
{
|
||||
console.log("Toggling theme down:", this.themeDropdownOpen)
|
||||
@ -504,7 +514,9 @@ export default {
|
||||
this.$store.commit('setThemeVars', theme_vars);
|
||||
this.isDarkMode = document.documentElement.classList.contains("dark");
|
||||
|
||||
|
||||
this.$nextTick(() => {
|
||||
feather.replace()
|
||||
})
|
||||
} catch (error) {
|
||||
console.error(`Failed to load theme: ${themeName}`, error)
|
||||
this.error = `Failed to load theme: ${themeName}`
|
||||
|
||||
@ -37,9 +37,9 @@
|
||||
</div>
|
||||
|
||||
<!-- Floating button for latest ParisNeo video -->
|
||||
<div v-if="videoUrl && !buttonClicked" class="floating-button-container">
|
||||
<div v-if="showVideoButton" class="floating-button-container">
|
||||
<a :href="videoUrl" target="_blank" class="floating-button" @click="handleClick">
|
||||
<span class="tooltip">Latest ParisNeo Video</span>
|
||||
<span class="tooltip">New ParisNeo Video!</span>
|
||||
<img src="/play_video.png" alt="New Video" class="w-full h-full object-cover">
|
||||
</a>
|
||||
</div>
|
||||
@ -54,10 +54,11 @@ export default {
|
||||
name: 'WelcomeComponent',
|
||||
data() {
|
||||
return {
|
||||
buttonClicked: false,
|
||||
videoUrl: "",
|
||||
latestNews: "",
|
||||
error: ""
|
||||
error: "",
|
||||
showVideoButton: false,
|
||||
lastVideoUrl: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -82,22 +83,26 @@ export default {
|
||||
try {
|
||||
const response = await axios.get('/get_last_video_url')
|
||||
this.videoUrl = response.data
|
||||
this.checkVideoUpdate()
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch video URL:', err)
|
||||
this.error = 'Unable to fetch the latest video URL. Please try again later.'
|
||||
}
|
||||
},
|
||||
handleClick() {
|
||||
localStorage.setItem('videoButtonClicked', 'true')
|
||||
this.buttonClicked = true
|
||||
localStorage.setItem('lastVideoUrl', this.videoUrl)
|
||||
this.showVideoButton = false
|
||||
},
|
||||
checkVideoUpdate() {
|
||||
const storedVideoUrl = localStorage.getItem('lastVideoUrl')
|
||||
if (this.videoUrl !== storedVideoUrl) {
|
||||
this.showVideoButton = true
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchLatestNews()
|
||||
this.fetchVideoUrl()
|
||||
if (localStorage.getItem('videoButtonClicked') === 'true') {
|
||||
this.buttonClicked = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -146,43 +151,45 @@ export default {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(79, 70, 229, 0.9);
|
||||
background-color: rgba(255, 69, 0, 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;
|
||||
box-shadow: 0 0 30px rgba(255, 69, 0, 0.8);
|
||||
animation: pulse 1.5s infinite, glow 2s infinite, wobble 3s 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);
|
||||
transform: scale(1.2) rotate(5deg);
|
||||
background-color: rgba(255, 69, 0, 1);
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
pointer-events: none;
|
||||
top: -40px;
|
||||
top: -50px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transform: translateX(-50%) scale(0.9);
|
||||
}
|
||||
|
||||
.floating-button:hover .tooltip {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
@ -192,9 +199,14 @@ export default {
|
||||
}
|
||||
|
||||
@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); }
|
||||
0% { box-shadow: 0 0 30px rgba(255, 69, 0, 0.8); }
|
||||
50% { box-shadow: 0 0 60px rgba(255, 69, 0, 1), 0 0 90px rgba(255, 69, 0, 0.6); }
|
||||
100% { box-shadow: 0 0 30px rgba(255, 69, 0, 0.8); }
|
||||
}
|
||||
|
||||
@keyframes wobble {
|
||||
0%, 100% { transform: rotate(-3deg); }
|
||||
50% { transform: rotate(3deg); }
|
||||
}
|
||||
|
||||
.hidden {
|
||||
|
||||
@ -391,7 +391,7 @@ button:hover {
|
||||
}
|
||||
|
||||
.animated-progressbar-bg {
|
||||
@apply w-full h-24 relative overflow-hidden bg-gradient-to-r from-amber-950 to-amber-900 dark:from-black dark:to-amber-950 rounded-sm shadow-[0_0_15px_rgba(245,158,11,0.2)]
|
||||
@apply w-full h-10 relative overflow-hidden bg-gradient-to-r from-amber-950 to-amber-900 dark:from-black dark:to-amber-950 rounded-sm shadow-[0_0_15px_rgba(245,158,11,0.2)]
|
||||
}
|
||||
|
||||
.animated-progressbar-fg {
|
||||
@ -408,7 +408,7 @@ button:hover {
|
||||
background: linear-gradient(45deg, #d97706, #fbbf24);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.chat-bar {
|
||||
@ -480,3 +480,58 @@ button:hover {
|
||||
.toolbar-button:hover {
|
||||
@apply text-amber-500;
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
@apply absolute bg-opacity-90 bg-amber-900 border border-amber-500 shadow-lg shadow-amber-500/50 rounded-none py-2 min-w-[150px] z-[1000] font-mono;
|
||||
|
||||
@apply dark:bg-opacity-90 dark:bg-amber-950 dark:border-amber-400 dark:shadow-amber-400/50;
|
||||
}
|
||||
|
||||
.context-menu::before {
|
||||
@apply content-[''] absolute inset-0 bg-gradient-to-b from-amber-500/10 via-amber-500/5 to-transparent bg-[length:100%_1000px] opacity-30 -z-10;
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
@apply px-4 py-2 text-sm text-amber-500 cursor-pointer transition-all duration-300 ease-in-out shadow-amber-500/70;
|
||||
|
||||
@apply hover:bg-amber-500/20 hover:scale-105;
|
||||
|
||||
@apply dark:text-amber-400 dark:hover:bg-amber-400/20;
|
||||
}
|
||||
|
||||
.context-menu-separator {
|
||||
@apply h-px bg-amber-500 my-1 shadow-amber-500;
|
||||
|
||||
@apply dark:bg-amber-400 dark:shadow-amber-400;
|
||||
}
|
||||
|
||||
.context-menu-item-disabled {
|
||||
@apply text-amber-800 cursor-not-allowed shadow-none;
|
||||
|
||||
@apply dark:text-amber-700;
|
||||
}
|
||||
|
||||
.context-menu-item-icon {
|
||||
@apply mr-2 text-amber-500;
|
||||
|
||||
@apply dark:text-amber-400;
|
||||
}
|
||||
|
||||
.context-menu-item::after {
|
||||
@apply content-[''] absolute left-0 bottom-0 w-full h-px bg-gradient-to-r from-transparent via-amber-500 to-transparent scale-x-0 origin-center transition-transform duration-300 ease-in-out;
|
||||
|
||||
@apply dark:via-amber-400;
|
||||
}
|
||||
|
||||
.context-menu-item:hover::after {
|
||||
@apply scale-x-100;
|
||||
}
|
||||
|
||||
@keyframes matrix-rain {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -318,7 +318,7 @@ button:hover {
|
||||
background: linear-gradient(45deg, #00ff00, #39ff14);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
color: greenyellow;
|
||||
}
|
||||
.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-800;
|
||||
@ -389,3 +389,58 @@ button:hover {
|
||||
.toolbar-button:hover {
|
||||
@apply text-green-400;
|
||||
}
|
||||
.context-menu {
|
||||
@apply absolute bg-opacity-90 bg-black border border-green-500 shadow-lg shadow-green-500/50 rounded-none py-2 min-w-[150px] z-[1000] font-mono;
|
||||
|
||||
@apply dark:bg-opacity-90 dark:bg-gray-900 dark:border-green-400 dark:shadow-green-400/50;
|
||||
}
|
||||
|
||||
.context-menu::before {
|
||||
@apply content-[''] absolute inset-0 bg-gradient-to-b from-green-500/10 via-green-500/5 to-transparent bg-[length:100%_1000px] opacity-30 -z-10;
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
@apply px-4 py-2 text-sm text-green-500 cursor-pointer transition-all duration-300 ease-in-out shadow-green-500/70;
|
||||
|
||||
@apply hover:bg-green-900/40 hover:scale-105;
|
||||
|
||||
@apply dark:text-green-400 dark:hover:bg-green-700/40;
|
||||
}
|
||||
|
||||
.context-menu-separator {
|
||||
@apply h-px bg-green-500 my-1 shadow-green-500;
|
||||
|
||||
@apply dark:bg-green-400 dark:shadow-green-400;
|
||||
}
|
||||
|
||||
.context-menu-item-disabled {
|
||||
@apply text-gray-600 cursor-not-allowed shadow-none;
|
||||
|
||||
@apply dark:text-gray-500;
|
||||
}
|
||||
|
||||
.context-menu-item-icon {
|
||||
@apply mr-2 text-green-500;
|
||||
|
||||
@apply dark:text-green-400;
|
||||
}
|
||||
|
||||
.context-menu-item::after {
|
||||
@apply content-[''] absolute left-0 bottom-0 w-full h-px bg-gradient-to-r from-transparent via-green-500 to-transparent scale-x-0 origin-center transition-transform duration-300 ease-in-out;
|
||||
|
||||
@apply dark:via-green-400;
|
||||
}
|
||||
|
||||
.context-menu-item:hover::after {
|
||||
@apply scale-x-100;
|
||||
}
|
||||
|
||||
|
||||
@keyframes borg-scan {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,478 +1,365 @@
|
||||
/* Custom Christmas font */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&display=swap');
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--lollms-title: "LoLLMs Christmas";
|
||||
--falling-object: "❄️";
|
||||
--activate-dropping-animation: 1;
|
||||
--lollms-welcome-short-message: "Ho Ho Ho! Welcome to LoLLMs Christmas!";
|
||||
--lollms-welcome-message: "Merry Christmas! Enjoy the festive AI magic with LoLLMs!";
|
||||
|
||||
/* Light mode colors */
|
||||
--color-primary: #c41e3a;
|
||||
--color-primary-light: #ff4d6a;
|
||||
--color-secondary: #165b33;
|
||||
--color-accent: #f8b229;
|
||||
--color-light-text-panel: #333333;
|
||||
--color-bg-light: #f0f0f0;
|
||||
--color-bg-light-tone: #ffffff;
|
||||
--color-bg-light-code-block: #e6e6e6;
|
||||
--color-bg-light-tone-panel: #f9f9f9;
|
||||
--color-bg-light-discussion: #f5f5f5;
|
||||
--color-bg-light-discussion-odd: #ebebeb;
|
||||
|
||||
/* Dark mode colors */
|
||||
--color-dark-text-panel: #f0f0f0;
|
||||
--color-bg-dark: #1a1a1a;
|
||||
--color-bg-dark-tone: #2a2a2a;
|
||||
--color-bg-dark-code-block: #333333;
|
||||
--color-bg-dark-tone-panel: #222222;
|
||||
--color-bg-dark-discussion: #2c2c2c;
|
||||
--color-bg-dark-discussion-odd: #323232;
|
||||
--lollms-title: LoLLMS: Christmas Edition;
|
||||
--falling-object: ❄;
|
||||
--activate-dropping-animation: 1;
|
||||
--lollms-welcome-short-message: "Merry AI-mas!";
|
||||
--lollms-welcome-message: "Welcome to the festive world of LoLLMs - where AI meets holiday cheer! 🎄🤖 We're here to make your digital experience as merry and bright as a perfectly decorated Christmas tree. From natural language processing to multimodal tasks, LoLLMs is your one-stop AI assistant for the holiday season. Let's spread joy and cultivate brilliant ideas together!";
|
||||
|
||||
/* Light mode colors */
|
||||
--color-primary: #c41e3a;
|
||||
--color-primary-light: #e63946;
|
||||
--color-secondary: #165b33;
|
||||
--color-accent: #f8b229;
|
||||
--color-bg-light: #f1f8e9;
|
||||
--color-bg-light-tone: #e8f5e9;
|
||||
--color-bg-light-tone-panel: #c8e6c9;
|
||||
--color-light-text-panel: #1b5e20;
|
||||
|
||||
/* Dark mode colors */
|
||||
--color-bg-dark: #1a2c38;
|
||||
--color-bg-dark-tone: #234454;
|
||||
--color-bg-dark-tone-panel: #2c5364;
|
||||
--color-dark-text-panel: #e0f2f1;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
@apply scroll-smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
font-family: 'Mountains of Christmas', cursive;
|
||||
}
|
||||
|
||||
body.light-mode {
|
||||
background-color: var(--color-bg-light);
|
||||
color: var(--color-light-text-panel);
|
||||
}
|
||||
|
||||
body.dark-mode {
|
||||
background-color: var(--color-bg-dark);
|
||||
color: var(--color-dark-text-panel);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Georgia', serif;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-secondary);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.no-scrollbar {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.display-none {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.text-shadow-custom {
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: var(--color-primary-light);
|
||||
}
|
||||
|
||||
.active-link {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.feather-emoji {
|
||||
font-size: 1.2em;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.app-card {
|
||||
background-color: var(--color-bg-light-tone);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dark-mode .app-card {
|
||||
background-color: var(--color-bg-dark-tone);
|
||||
}
|
||||
|
||||
.scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--color-secondary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
padding: 10px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--color-primary);
|
||||
background-color: var(--color-bg-light-tone);
|
||||
}
|
||||
|
||||
.dark-mode .search-input {
|
||||
background-color: var(--color-bg-dark-tone);
|
||||
color: var(--color-dark-text-panel);
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-primary) var(--color-bg-light-tone);
|
||||
}
|
||||
|
||||
.dark-mode .scrollbar {
|
||||
scrollbar-color: var(--color-primary) var(--color-bg-dark-tone);
|
||||
}
|
||||
|
||||
.card-title, .subcard-title {
|
||||
font-size: 1.2em;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-content, .subcard-content {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-footer, .subcard-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.card-footer-button, .subcard-footer-button {
|
||||
padding: 5px 10px;
|
||||
background-color: var(--color-secondary);
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.card-footer-button:hover, .subcard-footer-button:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.background-color {
|
||||
@apply bg-gradient-to-br from-green-50 to-red-100 dark:from-gray-900 dark:to-gray-800 min-h-screen;
|
||||
}
|
||||
|
||||
.toolbar-color {
|
||||
@apply text-white bg-gradient-to-r from-red-600 to-green-600 dark:from-red-800 dark:to-green-800 rounded-full shadow-lg;
|
||||
}
|
||||
|
||||
.panels-color {
|
||||
@apply text-gray-800 dark:text-gray-200 bg-gradient-to-r from-red-100 to-green-100 dark:from-gray-800 dark:to-gray-700 rounded shadow-lg;
|
||||
}
|
||||
|
||||
.unicolor-panels-color {
|
||||
@apply bg-red-100 dark:bg-gray-800;
|
||||
}
|
||||
|
||||
.chatbox-color {
|
||||
@apply bg-gradient-to-br from-red-100 to-green-100 dark:from-gray-800 dark:to-gray-700;
|
||||
}
|
||||
|
||||
.message {
|
||||
@apply bg-white dark:bg-gray-800 border-2 border-red-500 dark:border-green-500;
|
||||
}
|
||||
|
||||
.message:nth-child(even) {
|
||||
@apply bg-red-50 dark:bg-gray-700;
|
||||
}
|
||||
|
||||
.message:nth-child(odd) {
|
||||
@apply bg-green-50 dark:bg-gray-800;
|
||||
}
|
||||
|
||||
.discussion {
|
||||
@apply mr-2 bg-gradient-to-r from-red-200 to-green-200 dark:from-gray-700 dark:to-gray-600 hover:from-red-100 hover:to-green-100 hover:dark:from-gray-600 hover:dark:to-gray-500;
|
||||
}
|
||||
|
||||
.discussion-hilighted {
|
||||
@apply bg-gradient-to-r from-red-100 to-green-100 dark:from-gray-700 dark:to-gray-600 hover:from-red-50 hover:to-green-50 hover:dark:from-gray-600 hover:dark:to-gray-500;
|
||||
}
|
||||
|
||||
.bg-gradient-welcome {
|
||||
@apply bg-gradient-to-br from-red-50 to-green-100 dark:from-gray-900 dark:to-gray-800;
|
||||
}
|
||||
|
||||
.bg-gradient-progress {
|
||||
@apply bg-gradient-to-r from-red-100 to-green-200 dark:from-gray-800 dark:to-gray-700;
|
||||
}
|
||||
|
||||
.text-gradient-title {
|
||||
@apply text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-green-600 dark:from-red-400 dark:to-green-400;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border-2 border-red-500 dark:border-green-500;
|
||||
}
|
||||
|
||||
.input {
|
||||
@apply bg-red-50 dark:bg-gray-700 border border-red-300 dark:border-green-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-green-400;
|
||||
}
|
||||
|
||||
.link {
|
||||
@apply text-red-600 hover:text-red-700 dark:text-green-400 dark:hover:text-green-300;
|
||||
}
|
||||
|
||||
.menu-item.active-link::before {
|
||||
background: linear-gradient(to right, #c41e3a, #165b33, #c41e3a);
|
||||
}
|
||||
|
||||
.dark .menu-item.active-link::before {
|
||||
background: linear-gradient(to right, #e63946, #2a9d8f, #e63946);
|
||||
}
|
||||
|
||||
.app-card {
|
||||
@apply transition-all duration-300 ease-in-out bg-gradient-to-br from-red-50 to-green-100 dark:from-gray-800 dark:to-gray-700 text-gray-800 dark:text-gray-200 border-2 border-red-500 dark:border-green-500 rounded-xl shadow-lg p-6 hover:shadow-xl;
|
||||
}
|
||||
|
||||
.scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: theme('colors.red.300') theme('colors.green.100');
|
||||
}
|
||||
|
||||
.dark .scrollbar-thin {
|
||||
scrollbar-color: theme('colors.green.600') theme('colors.gray.800');
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-track {
|
||||
@apply bg-red-100 dark:bg-gray-800 rounded-full;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
@apply bg-green-300 dark:bg-red-600 rounded-full;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-green-400 dark:bg-red-500;
|
||||
}
|
||||
|
||||
.interesting-facts {
|
||||
@apply mt-6 mb-6 p-4 bg-red-50/80 dark:bg-green-900/80 rounded-lg shadow-lg transform hover:scale-105 border-2 border-green-500 dark:border-red-500;
|
||||
}
|
||||
@layer components {
|
||||
.snowfall-bg {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='1' fill='white' opacity='0.7'/%3E%3C/svg%3E");
|
||||
background-repeat: repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.animated-progressbar-bg {
|
||||
background-color: var(--color-bg-light-tone);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
@apply w-full h-16 relative overflow-hidden bg-gradient-to-r from-green-900 via-red-900 to-green-900 dark:from-green-950 dark:via-red-950 dark:to-green-950 rounded-full shadow-[0_0_20px_rgba(255,0,0,0.4)] border-2 border-yellow-300;
|
||||
}
|
||||
|
||||
.animated-progressbar-fg {
|
||||
background-color: var(--color-primary);
|
||||
height: 100%;
|
||||
transition: width 0.5s ease-in-out;
|
||||
@apply absolute top-0 left-0 h-full bg-gradient-to-r from-green-500 via-red-500 to-green-500 dark:from-green-600 dark:via-red-600 dark:to-green-600 transition-all duration-500 ease-out
|
||||
[background-image:repeating-linear-gradient(-45deg,transparent,transparent_10px,rgba(255,255,255,0.2)_10px,rgba(255,255,255,0.2)_20px)]
|
||||
[animation:candy-cane_3s_linear_infinite];
|
||||
}
|
||||
|
||||
.discussion-toolbox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background-color: var(--color-bg-light-tone);
|
||||
border-radius: 5px;
|
||||
.animated-progressbar-fg::before {
|
||||
@apply content-[''] absolute inset-0 snowfall-bg [animation:snow-fall_10s_linear_infinite];
|
||||
}
|
||||
|
||||
.dark-mode .discussion-toolbox {
|
||||
background-color: var(--color-bg-dark-tone);
|
||||
.animated-progressbar-fg::after {
|
||||
@apply content-[''] absolute top-0 right-0 bottom-0 left-0 bg-gradient-to-r from-transparent via-yellow-300/30 to-transparent [animation:tinsel-shine_2s_ease-in-out_infinite];
|
||||
}
|
||||
|
||||
@keyframes candy-cane {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 40px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes snow-fall {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 50px 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tinsel-shine {
|
||||
0%, 100% {
|
||||
transform: translateX(-100%) rotate(45deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(100%) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animated-progressbar-text {
|
||||
@apply absolute inset-0 flex items-center justify-center text-white font-bold text-2xl z-10 [text-shadow:1px_1px_2px_rgba(0,0,0,0.7)] [animation:jingle_0.5s_ease-in-out_infinite_alternate];
|
||||
}
|
||||
|
||||
@keyframes jingle {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.christmas-icon {
|
||||
@apply absolute top-1/2 -translate-y-1/2 w-12 h-12 text-yellow-300 z-20 [animation:bounce_1s_ease-in-out_infinite];
|
||||
}
|
||||
|
||||
.christmas-icon-left {
|
||||
@apply left-2;
|
||||
}
|
||||
|
||||
.christmas-icon-right {
|
||||
@apply right-2;
|
||||
}
|
||||
|
||||
|
||||
.animated-progressbar-text {
|
||||
@apply absolute inset-0 flex items-center justify-center text-white font-bold text-2xl z-10 [text-shadow:1px_1px_2px_rgba(0,0,0,0.7)] [animation:jingle_0.5s_ease-in-out_infinite_alternate];
|
||||
}
|
||||
|
||||
@keyframes jingle {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.christmas-icon {
|
||||
@apply absolute top-1/2 -translate-y-1/2 w-12 h-12 text-yellow-300 z-20 [animation:bounce_1s_ease-in-out_infinite];
|
||||
}
|
||||
|
||||
.christmas-icon-left {
|
||||
@apply left-2;
|
||||
}
|
||||
|
||||
.christmas-icon-right {
|
||||
@apply right-2;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(-50%) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-60%) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.lollms-title-style {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 2em;
|
||||
color: var(--color-primary);
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.2),
|
||||
2px 2px 0px #f1f8e9,
|
||||
-2px -2px 0px #f1f8e9,
|
||||
2px -2px 0px #f1f8e9,
|
||||
-2px 2px 0px #f1f8e9;
|
||||
background: linear-gradient(45deg, #c41e3a, #165b33);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.chat-bar {
|
||||
@apply relative text-red-300 dark:text-green-100 grow flex cursor-pointer select-none items-center gap-2 bg-green-100 dark:bg-red-900 p-1 shadow-sm hover:shadow-none dark:border-red-700;
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(255, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 255, 0, 0.06);
|
||||
}
|
||||
|
||||
@keyframes snowfall {
|
||||
0% {
|
||||
transform: translateY(-10vh) rotate(0deg);
|
||||
}
|
||||
|
||||
.chat-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background-color: var(--color-bg-light-tone);
|
||||
border-radius: 20px;
|
||||
100% {
|
||||
transform: translateY(100vh) rotate(360deg);
|
||||
}
|
||||
|
||||
.dark-mode .chat-bar {
|
||||
background-color: var(--color-bg-dark-tone);
|
||||
}
|
||||
|
||||
.snowflake {
|
||||
position: fixed;
|
||||
top: -10vh;
|
||||
animation: snowfall 10s linear infinite;
|
||||
color: white;
|
||||
text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.svg-button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.svg-button:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
padding: 10px 15px;
|
||||
background-color: var(--color-bg-light-tone);
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.nav-button-active {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-on {
|
||||
background-color: var(--color-secondary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-off {
|
||||
background-color: var(--color-bg-light-tone);
|
||||
color: var(--color-light-text-panel);
|
||||
}
|
||||
|
||||
.interesting-facts {
|
||||
font-style: italic;
|
||||
color: var(--color-accent);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
padding: 5px 10px;
|
||||
background-color: var(--color-bg-light-tone);
|
||||
border: 1px solid var(--color-primary);
|
||||
border-radius: 3px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.toolbar-button:hover {
|
||||
background-color: var(--color-primary-light);
|
||||
}
|
||||
|
||||
.background-color {
|
||||
background-color: var(--color-bg-light);
|
||||
}
|
||||
|
||||
.dark-mode .background-color {
|
||||
background-color: var(--color-bg-dark);
|
||||
}
|
||||
|
||||
.toolbar-color {
|
||||
background-color: var(--color-bg-light-tone);
|
||||
}
|
||||
|
||||
.dark-mode .toolbar-color {
|
||||
background-color: var(--color-bg-dark-tone);
|
||||
}
|
||||
|
||||
.panels-color {
|
||||
background-color: var(--color-bg-light-tone);
|
||||
}
|
||||
|
||||
.dark-mode .panels-color {
|
||||
background-color: var(--color-bg-dark-tone);
|
||||
}
|
||||
|
||||
.unicolor-panels-color {
|
||||
background-color: var(--color-bg-light);
|
||||
}
|
||||
|
||||
.dark-mode .unicolor-panels-color {
|
||||
background-color: var(--color-bg-dark);
|
||||
}
|
||||
|
||||
.chatbox-color {
|
||||
background-color: var(--color-bg-light-discussion);
|
||||
}
|
||||
|
||||
.dark-mode .chatbox-color {
|
||||
background-color: var(--color-bg-dark-discussion);
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-bottom: 15px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--color-bg-light-discussion);
|
||||
}
|
||||
|
||||
.dark-mode .message {
|
||||
background-color: var(--color-bg-dark-discussion);
|
||||
}
|
||||
|
||||
.message-header {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.discussion {
|
||||
padding: 20px;
|
||||
background-color: var(--color-bg-light-discussion);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.dark-mode .discussion {
|
||||
background-color: var(--color-bg-dark-discussion);
|
||||
}
|
||||
|
||||
.discussion-hilighted {
|
||||
background-color: var(--color-bg-light-discussion-odd);
|
||||
}
|
||||
|
||||
.dark-mode .discussion-hilighted {
|
||||
background-color: var(--color-bg-dark-discussion-odd);
|
||||
}
|
||||
|
||||
.bg-gradient-welcome {
|
||||
background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
|
||||
}
|
||||
|
||||
.bg-gradient-progress {
|
||||
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
|
||||
}
|
||||
|
||||
.text-gradient-title {
|
||||
background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.text-subtitle {
|
||||
font-size: 1.2em;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.text-author {
|
||||
font-style: italic;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.text-loading {
|
||||
color: var(--color-primary);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text-progress {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--color-bg-light-tone);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dark-mode .card {
|
||||
background-color: var(--color-bg-dark-tone);
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--color-primary);
|
||||
background-color: var(--color-bg-light-tone);
|
||||
}
|
||||
|
||||
.dark-mode input {
|
||||
background-color: var(--color-bg-dark-tone);
|
||||
color: var(--color-dark-text-panel);
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--color-primary);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--color-secondary);
|
||||
text-decoration: underline;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
background-color: var(--color-bg-light-tone);
|
||||
padding: 10px;
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.dark-mode .navbar-container {
|
||||
background-color: var(--color-bg-dark-tone);
|
||||
}
|
||||
|
||||
.game-menu {
|
||||
background-color: var(--color-bg-light-tone);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dark-mode .game-menu {
|
||||
background-color: var(--color-bg-dark-tone);
|
||||
}
|
||||
|
||||
@keyframes snowfall {
|
||||
0% {
|
||||
transform: translateY(-100%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100vh) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.snowflake {
|
||||
position: fixed;
|
||||
top: -10px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
animation: snowfall 5s linear infinite;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.snowflake::after {
|
||||
content: var(--falling-object);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.card, .app-card {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.lollms-title-style {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.twinkle {
|
||||
animation: twinkle 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
@apply absolute bg-opacity-90 bg-red-900 border border-green-500 shadow-lg shadow-red-500/50 rounded-md py-2 min-w-[150px] z-[1000] font-serif;
|
||||
|
||||
@apply dark:bg-opacity-90 dark:bg-red-950 dark:border-green-400 dark:shadow-red-400/50;
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
@apply px-4 py-2 text-sm text-white cursor-pointer transition-all duration-300 ease-in-out shadow-red-500/70;
|
||||
|
||||
@apply hover:bg-green-500/20 hover:scale-105;
|
||||
|
||||
@apply dark:text-green-100 dark:hover:bg-green-400/20;
|
||||
}
|
||||
|
||||
.context-menu-separator {
|
||||
@apply h-px bg-gradient-to-r from-red-500 via-green-500 to-red-500 my-1 shadow-white;
|
||||
|
||||
@apply dark:from-red-400 dark:via-green-400 dark:to-red-400 dark:shadow-green-100;
|
||||
}
|
||||
|
||||
.context-menu-item-disabled {
|
||||
@apply text-gray-400 cursor-not-allowed shadow-none;
|
||||
|
||||
@apply dark:text-gray-500;
|
||||
}
|
||||
|
||||
.context-menu-item-icon {
|
||||
@apply mr-2 text-green-500;
|
||||
|
||||
@apply dark:text-green-400;
|
||||
}
|
||||
|
||||
.context-menu-item::after {
|
||||
@apply content-[''] absolute left-0 bottom-0 w-full h-px bg-gradient-to-r from-red-500 via-green-500 to-red-500 scale-x-0 origin-center transition-transform duration-300 ease-in-out;
|
||||
|
||||
@apply dark:from-red-400 dark:via-green-400 dark:to-red-400;
|
||||
}
|
||||
|
||||
.context-menu-item:hover::after {
|
||||
@apply scale-x-100;
|
||||
}
|
||||
|
||||
|
||||
@keyframes snowfall {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 100px 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -358,11 +358,12 @@ background-clip: text;
|
||||
}
|
||||
|
||||
.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;
|
||||
@apply relative text-blue-700 dark:text-blue-300 grow flex cursor-pointer select-none items-center gap-2 bg-blue-100 dark:bg-blue-900 p-1 shadow-sm hover:shadow-none dark:border-purple-300;
|
||||
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);
|
||||
}
|
||||
@ -404,4 +405,103 @@ background-clip: text;
|
||||
|
||||
.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;
|
||||
}
|
||||
@keyframes matrix-rain {
|
||||
0% { background-position: 0 0; }
|
||||
100% { background-position: 0 1000px; }
|
||||
}
|
||||
@layer components {
|
||||
.context-menu {
|
||||
@apply absolute bg-opacity-90 bg-green-900 border border-green-500 shadow-lg shadow-green-500/50 rounded-none py-2 min-w-[150px] z-[1000] font-mono;
|
||||
|
||||
@apply dark:bg-opacity-90 dark:bg-green-950 dark:border-green-400 dark:shadow-green-400/50;
|
||||
}
|
||||
|
||||
.context-menu::before {
|
||||
@apply content-[''] absolute inset-0 bg-gradient-to-b from-green-500/10 via-green-500/5 to-transparent bg-[length:100%_1000px] opacity-30 -z-10;
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
@apply px-4 py-2 text-sm text-green-500 cursor-pointer transition-all duration-300 ease-in-out shadow-green-500/70;
|
||||
|
||||
@apply hover:bg-green-500/20 hover:scale-105;
|
||||
|
||||
@apply dark:text-green-400 dark:hover:bg-green-400/20;
|
||||
}
|
||||
|
||||
.context-menu-separator {
|
||||
@apply h-px bg-green-500 my-1 shadow-green-500;
|
||||
|
||||
@apply dark:bg-green-400 dark:shadow-green-400;
|
||||
}
|
||||
|
||||
.context-menu-item-disabled {
|
||||
@apply text-green-800 cursor-not-allowed shadow-none;
|
||||
|
||||
@apply dark:text-green-700;
|
||||
}
|
||||
|
||||
.context-menu-item-icon {
|
||||
@apply mr-2 text-green-500;
|
||||
|
||||
@apply dark:text-green-400;
|
||||
}
|
||||
|
||||
.context-menu-item::after {
|
||||
@apply content-[''] absolute left-0 bottom-0 w-full h-px bg-gradient-to-r from-transparent via-green-500 to-transparent scale-x-0 origin-center transition-transform duration-300 ease-in-out;
|
||||
|
||||
@apply dark:via-green-400;
|
||||
}
|
||||
|
||||
.context-menu-item:hover::after {
|
||||
@apply scale-x-100;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes matrix-rain {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -391,7 +391,7 @@ button:hover {
|
||||
}
|
||||
|
||||
.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
|
||||
@apply w-full h-10 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
|
||||
}
|
||||
.animated-progressbar-fg{
|
||||
@apply absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-600 dark:to-purple-600 transition-all duration-300
|
||||
@ -413,11 +413,12 @@ button:hover {
|
||||
color: transparent;
|
||||
}
|
||||
.chat-bar {
|
||||
@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;
|
||||
@apply relative text-blue-700 dark:text-blue-300 grow flex cursor-pointer select-none items-center gap-2 bg-blue-100 dark:bg-blue-900 p-1 shadow-sm hover:shadow-none dark:border-purple-300;
|
||||
height: 50px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.chat-bar:hover {
|
||||
box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06);
|
||||
}
|
||||
@ -481,3 +482,87 @@ button:hover {
|
||||
.toolbar-button:hover {
|
||||
@apply text-blue-500;
|
||||
}
|
||||
:root {
|
||||
--lollms-primary: #0056b3;
|
||||
--lollms-secondary: #007bff;
|
||||
--lollms-light: #e6f2ff;
|
||||
--lollms-dark: #004085;
|
||||
--lollms-text: #333333;
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
position: absolute;
|
||||
background-color: var(--lollms-light);
|
||||
border: 1px solid var(--lollms-secondary);
|
||||
box-shadow: 0 2px 10px rgba(0, 123, 255, 0.2);
|
||||
border-radius: 6px;
|
||||
padding: 8px 0;
|
||||
min-width: 180px;
|
||||
z-index: 1000;
|
||||
font-family: 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
color: var(--lollms-text);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.context-menu-item:hover {
|
||||
background-color: var(--lollms-secondary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.context-menu-separator {
|
||||
height: 1px;
|
||||
background-color: var(--lollms-secondary);
|
||||
margin: 6px 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.context-menu-item-disabled {
|
||||
color: #999999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.context-menu-item-icon {
|
||||
margin-right: 10px;
|
||||
color: var(--lollms-primary);
|
||||
}
|
||||
|
||||
.context-menu-item:hover .context-menu-item-icon {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* LoLLMs branding */
|
||||
.context-menu::before {
|
||||
content: "LoLLMs";
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 10px;
|
||||
font-size: 12px;
|
||||
color: var(--lollms-primary);
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Subtle AI-inspired background pattern */
|
||||
.context-menu::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(circle, var(--lollms-secondary) 1px, transparent 1px),
|
||||
radial-gradient(circle, var(--lollms-secondary) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 10px 10px;
|
||||
opacity: 0.05;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -441,3 +441,89 @@ button:hover {
|
||||
@apply text-green-400;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
@keyframes matrix-rain {
|
||||
0% { background-position: 0 0; }
|
||||
100% { background-position: 0 1000px; }
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 10, 0, 0.9); /* Dark green, slightly transparent background */
|
||||
border: 1px solid #00ff00; /* Bright green border */
|
||||
box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); /* Green glow */
|
||||
border-radius: 0; /* Sharp edges */
|
||||
padding: 8px 0;
|
||||
min-width: 150px;
|
||||
z-index: 1000;
|
||||
font-family: 'Courier New', monospace; /* Matrix-style font */
|
||||
}
|
||||
|
||||
.context-menu::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(180deg,
|
||||
rgba(0, 255, 0, 0.1) 0%,
|
||||
rgba(0, 255, 0, 0.05) 50%,
|
||||
rgba(0, 0, 0, 0) 100%);
|
||||
background-size: 100% 1000px;
|
||||
animation: matrix-rain 20s linear infinite;
|
||||
opacity: 0.3;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
color: #00ff00; /* Bright green text */
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
|
||||
}
|
||||
|
||||
.context-menu-item:hover {
|
||||
background-color: rgba(0, 255, 0, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.context-menu-separator {
|
||||
height: 1px;
|
||||
background-color: #00ff00; /* Bright green separator */
|
||||
margin: 4px 0;
|
||||
box-shadow: 0 0 10px #00ff00; /* Green glow */
|
||||
}
|
||||
|
||||
.context-menu-item-disabled {
|
||||
color: #005500; /* Darker green for disabled items */
|
||||
cursor: not-allowed;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.context-menu-item-icon {
|
||||
margin-right: 8px;
|
||||
color: #00ff00; /* Bright green icon color */
|
||||
}
|
||||
|
||||
/* Additional Matrix-inspired effect */
|
||||
.context-menu-item::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
#00ff00 50%,
|
||||
transparent 100%);
|
||||
transform: scaleX(0);
|
||||
transform-origin: center;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.context-menu-item:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
@ -361,7 +361,7 @@ button:hover {
|
||||
background: linear-gradient(45deg, #dc2626, #ef4444);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
color: red;
|
||||
}
|
||||
.chat-bar {
|
||||
@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;
|
||||
@ -443,3 +443,96 @@ button:hover {
|
||||
@apply text-yellow-400;
|
||||
text-shadow: 0 0 5px rgba(255, 165, 0, 0.7);
|
||||
}
|
||||
@keyframes fire-flicker {
|
||||
0% { opacity: 0.8; }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
position: absolute;
|
||||
background: linear-gradient(135deg, #2a0000 0%, #8b0000 100%);
|
||||
border: 2px solid #ff4500;
|
||||
box-shadow: 0 0 20px rgba(255, 69, 0, 0.6);
|
||||
border-radius: 8px;
|
||||
padding: 8px 0;
|
||||
min-width: 200px;
|
||||
z-index: 1000;
|
||||
font-family: 'Trajan Pro', 'Cinzel', serif;
|
||||
}
|
||||
|
||||
.context-menu::before {
|
||||
content: "🐉";
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
left: 10px;
|
||||
font-size: 24px;
|
||||
filter: drop-shadow(0 0 5px #ff4500);
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
color: #ffd700;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 0 0 5px rgba(255, 69, 0, 0.7);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.context-menu-item:hover {
|
||||
background-color: rgba(255, 69, 0, 0.3);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.context-menu-item::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -100%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 69, 0, 0.4), transparent);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.context-menu-item:hover::after {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.context-menu-separator {
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #ff4500, transparent);
|
||||
margin: 6px 0;
|
||||
animation: fire-flicker 2s infinite;
|
||||
}
|
||||
|
||||
.context-menu-item-disabled {
|
||||
color: #a0522d;
|
||||
cursor: not-allowed;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.context-menu-item-icon {
|
||||
margin-right: 10px;
|
||||
color: #ff4500;
|
||||
}
|
||||
|
||||
/* Dragon scale background */
|
||||
.context-menu::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 50% 50%, rgba(255, 69, 0, 0.1) 20%, transparent 20%),
|
||||
radial-gradient(circle at 50% 50%, rgba(255, 69, 0, 0.1) 20%, transparent 20%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 10px 10px;
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@ -1261,6 +1261,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
interestingFacts: [
|
||||
"ParisNeo, the creator of LoLLMs, originally built his high-performance PC to play Cyberpunk 2077. However, his passion for AI took an unexpected turn, leading him to develop LoLLMs instead. Ironically, he never found the time to actually play the game that inspired his powerful setup!",
|
||||
"Saïph, the new version of LoLLMs, is named after a star in Orion's constellation (Kappa Orionis), representing bright guidance in AI!",
|
||||
"Did you know? The first computer programmer was a woman - Ada Lovelace!",
|
||||
"Large Language Models (LLMs) have evolved from having millions of parameters to hundreds of billions in just a few years.",
|
||||
|
||||
@ -1 +1 @@
|
||||
Subproject commit af98da30c9737dcfac71ad4486f5e992d9558e0f
|
||||
Subproject commit 3fd684a56ba32f68b10210479818e4b5b2d50ffd
|
||||
Loading…
Reference in New Issue
Block a user