mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-18 20:17:50 +00:00
upgraded ui
This commit is contained in:
Saifeddine ALOUI
parent
51b182c92c
commit
c42dda7811
308
docs/prompts/prompts_placeholders.md
Normal file
308
docs/prompts/prompts_placeholders.md
Normal file
@ -0,0 +1,308 @@
|
||||
Here's the complete component code combining both the template and script:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div v-if="discussionArr.length < 2 && personality.prompts_list.length > 0" class="w-full rounded-lg m-2 shadow-lg hover:border-primary dark:hover:border-primary hover:border-solid hover:border-2 border-2 border-transparent even:bg-bg-light-discussion-odd dark:even:bg-bg-dark-discussion-odd flex flex-col overflow-hidden p-4 pb-2">
|
||||
<h2 class="text-xl font-semibold mb-4">Prompt examples</h2>
|
||||
<div class="overflow-x-auto flex-grow scrollbar-thin scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-600 scrollbar-track-gray-200 dark:scrollbar-track-gray-800 scrollbar-thumb-rounded-full scrollbar-track-rounded-full">
|
||||
<div class="flex flex-nowrap gap-4 p-2 min-w-full">
|
||||
<div
|
||||
v-for="(prompt, index) in personality.prompts_list"
|
||||
:key="index"
|
||||
@click="handlePromptSelection(prompt)"
|
||||
class="flex-shrink-0 w-[300px] bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg p-4 cursor-pointer hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 flex flex-col justify-between h-[220px] overflow-hidden group"
|
||||
>
|
||||
<div
|
||||
:title="prompt"
|
||||
class="text-base text-gray-700 dark:text-gray-300 overflow-hidden relative h-full"
|
||||
>
|
||||
<div class="absolute inset-0 overflow-hidden">
|
||||
{{ prompt }}
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-white dark:to-gray-800 group-hover:opacity-0 transition-opacity duration-300"></div>
|
||||
</div>
|
||||
<div class="mt-2 text-sm text-gray-500 dark:text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
Click to select
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Modal for placeholder inputs with live preview -->
|
||||
<div v-if="showPlaceholderModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl max-w-4xl w-full">
|
||||
<h3 class="text-lg font-semibold mb-4">Fill in the placeholders</h3>
|
||||
|
||||
<!-- Live Preview Section -->
|
||||
<div class="mb-4 p-4 bg-gray-100 dark:bg-gray-700 rounded-lg">
|
||||
<h4 class="text-sm font-medium mb-2 text-gray-600 dark:text-gray-400">Live Preview:</h4>
|
||||
<div class="text-base">{{ previewPrompt }}</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 max-h-[60vh] overflow-y-auto">
|
||||
<div v-for="(placeholder, index) in parsedPlaceholders" :key="placeholder.fullText" class="flex flex-col">
|
||||
<label :for="'placeholder-'+index" class="text-sm font-medium mb-1">
|
||||
{{ placeholder.label }}
|
||||
</label>
|
||||
|
||||
<!-- Single line text input -->
|
||||
<input
|
||||
v-if="placeholder.type === 'text'"
|
||||
:id="'placeholder-'+index"
|
||||
v-model="placeholderValues[index]"
|
||||
type="text"
|
||||
class="border rounded-md p-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
:placeholder="placeholder.label"
|
||||
@input="updatePreview"
|
||||
>
|
||||
|
||||
<!-- Number input (int) -->
|
||||
<input
|
||||
v-if="placeholder.type === 'int'"
|
||||
:id="'placeholder-'+index"
|
||||
v-model.number="placeholderValues[index]"
|
||||
type="number"
|
||||
step="1"
|
||||
class="border rounded-md p-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
@input="updatePreview"
|
||||
>
|
||||
|
||||
<!-- Number input (float) -->
|
||||
<input
|
||||
v-if="placeholder.type === 'float'"
|
||||
:id="'placeholder-'+index"
|
||||
v-model.number="placeholderValues[index]"
|
||||
type="number"
|
||||
step="0.01"
|
||||
class="border rounded-md p-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
@input="updatePreview"
|
||||
>
|
||||
|
||||
<!-- Multiline text input -->
|
||||
<textarea
|
||||
v-if="placeholder.type === 'multiline'"
|
||||
:id="'placeholder-'+index"
|
||||
v-model="placeholderValues[index]"
|
||||
rows="4"
|
||||
class="border rounded-md p-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
@input="updatePreview"
|
||||
></textarea>
|
||||
|
||||
<!-- Code editor -->
|
||||
<div v-if="placeholder.type === 'code'" class="border rounded-md overflow-hidden">
|
||||
<div class="bg-gray-200 dark:bg-gray-900 p-2 text-sm">
|
||||
{{ placeholder.language || 'Plain text' }}
|
||||
</div>
|
||||
<textarea
|
||||
:id="'placeholder-'+index"
|
||||
v-model="placeholderValues[index]"
|
||||
rows="8"
|
||||
class="w-full p-2 font-mono bg-gray-100 dark:bg-gray-900 border-t"
|
||||
@input="updatePreview"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Options (dropdown) -->
|
||||
<select
|
||||
v-if="placeholder.type === 'options'"
|
||||
:id="'placeholder-'+index"
|
||||
v-model="placeholderValues[index]"
|
||||
class="border rounded-md p-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
@change="updatePreview"
|
||||
>
|
||||
<option value="" disabled>Select an option</option>
|
||||
<option
|
||||
v-for="option in placeholder.options"
|
||||
:key="option"
|
||||
:value="option"
|
||||
>
|
||||
{{ option }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex justify-end space-x-4">
|
||||
<button
|
||||
@click="cancelPlaceholders"
|
||||
class="px-4 py-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="applyPlaceholders"
|
||||
class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
|
||||
>
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PromptExamples',
|
||||
props: {
|
||||
personality: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
discussionArr: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showPlaceholderModal: false,
|
||||
placeholderValues: {},
|
||||
selectedPrompt: '',
|
||||
previewPrompt: '',
|
||||
uniquePlaceholders: new Map(),
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlePromptSelection(prompt) {
|
||||
this.selectedPrompt = prompt;
|
||||
this.previewPrompt = prompt;
|
||||
const placeholders = this.extractPlaceholders(prompt);
|
||||
if (placeholders.length > 0) {
|
||||
this.placeholderValues = {};
|
||||
this.showPlaceholderModal = true;
|
||||
} else {
|
||||
this.$emit('prompt-selected', prompt);
|
||||
}
|
||||
},
|
||||
|
||||
extractPlaceholders(text) {
|
||||
const regex = /\[(.*?)\]/g;
|
||||
return Array.from(new Set(text.match(regex) || []));
|
||||
},
|
||||
|
||||
parsePlaceholder(placeholder) {
|
||||
const parts = placeholder.replace('[', '').replace(']', '').split('::');
|
||||
const label = parts[0];
|
||||
|
||||
if (parts.length === 1) {
|
||||
return {
|
||||
label,
|
||||
type: 'text',
|
||||
fullText: placeholder
|
||||
};
|
||||
}
|
||||
|
||||
const type = parts[1];
|
||||
const result = {
|
||||
label,
|
||||
type,
|
||||
fullText: placeholder
|
||||
};
|
||||
|
||||
switch (type) {
|
||||
case 'int':
|
||||
case 'float':
|
||||
case 'multiline':
|
||||
break;
|
||||
case 'code':
|
||||
result.language = parts[2] || 'plaintext';
|
||||
break;
|
||||
case 'options':
|
||||
result.options = parts[2] ? parts[2].split(',').map(o => o.trim()) : [];
|
||||
break;
|
||||
default:
|
||||
result.type = 'text';
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
escapeRegExp(string) {
|
||||
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
},
|
||||
|
||||
updatePreview() {
|
||||
let preview = this.selectedPrompt;
|
||||
this.parsedPlaceholders.forEach((placeholder, index) => {
|
||||
const value = this.placeholderValues[index];
|
||||
const regex = new RegExp(this.escapeRegExp(placeholder.fullText), 'g');
|
||||
preview = preview.replace(regex, value || placeholder.fullText);
|
||||
});
|
||||
this.previewPrompt = preview;
|
||||
},
|
||||
|
||||
applyPlaceholders() {
|
||||
let finalPrompt = this.selectedPrompt;
|
||||
this.parsedPlaceholders.forEach((placeholder, index) => {
|
||||
const value = this.placeholderValues[index];
|
||||
if (value) {
|
||||
const regex = new RegExp(this.escapeRegExp(placeholder.fullText), 'g');
|
||||
finalPrompt = finalPrompt.replace(regex, value);
|
||||
}
|
||||
});
|
||||
this.$emit('prompt-selected', finalPrompt);
|
||||
this.showPlaceholderModal = false;
|
||||
},
|
||||
|
||||
cancelPlaceholders() {
|
||||
this.showPlaceholderModal = false;
|
||||
this.placeholderValues = {};
|
||||
this.selectedPrompt = '';
|
||||
this.previewPrompt = '';
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholders() {
|
||||
return this.extractPlaceholders(this.selectedPrompt);
|
||||
},
|
||||
parsedPlaceholders() {
|
||||
const uniqueMap = new Map();
|
||||
this.placeholders.forEach(p => {
|
||||
const parsed = this.parsePlaceholder(p);
|
||||
uniqueMap.set(parsed.fullText, parsed);
|
||||
});
|
||||
return Array.from(uniqueMap.values());
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Add any additional styling here */
|
||||
</style>
|
||||
```
|
||||
|
||||
This complete component:
|
||||
1. Shows a list of prompt examples
|
||||
2. Handles placeholder detection and parsing
|
||||
3. Provides appropriate input types based on placeholder syntax
|
||||
4. Handles repeated placeholders by showing only one input for each unique placeholder
|
||||
5. Updates all instances of the same placeholder simultaneously
|
||||
6. Provides a live preview of the final prompt
|
||||
7. Supports dark mode
|
||||
8. Has proper styling and transitions
|
||||
|
||||
To use it, simply import and include it in your parent component:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<PromptExamples
|
||||
:personality="personality"
|
||||
:discussionArr="discussionArr"
|
||||
@prompt-selected="handlePromptSelection"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PromptExamples from './PromptExamples.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PromptExamples
|
||||
},
|
||||
// ... rest of your component code
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
The component will emit a 'prompt-selected' event with the final processed prompt when the user completes the placeholder inputs and clicks "Apply".
|
||||
8
web/dist/assets/index-ByL6zcwy.css
vendored
8
web/dist/assets/index-ByL6zcwy.css
vendored
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-DlO61W0c.css
vendored
Normal file
8
web/dist/assets/index-DlO61W0c.css
vendored
Normal file
File diff suppressed because one or more lines are too long
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-csGg9iMY.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-ByL6zcwy.css">
|
||||
<script type="module" crossorigin src="/assets/index-hg90DEcF.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-DlO61W0c.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
85
web/dist/themes/amber.css
vendored
85
web/dist/themes/amber.css
vendored
@ -2425,11 +2425,6 @@ html{
|
||||
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-200{
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-400{
|
||||
--tw-gradient-from: #76A9FA var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
@ -2598,9 +2593,6 @@ html{
|
||||
.to-pink-700{
|
||||
--tw-gradient-to: #BF125D var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-200{
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-500{
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
}
|
||||
@ -4559,6 +4551,67 @@ button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(217 119 6 / var(--tw-bg-opacity));
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgb(255 255 255 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 0.125rem;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #451a03 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(69 26 3 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #78350f var(--tw-gradient-to-position);
|
||||
--tw-shadow: 0 0 15px rgba(245,158,11,0.2);
|
||||
--tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.animated-progressbar-bg:is(.dark *){
|
||||
--tw-gradient-from: #000000 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: #451a03 var(--tw-gradient-to-position);
|
||||
}
|
||||
.animated-progressbar-fg{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #f59e0b 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: #fbbf24 var(--tw-gradient-to-position);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
background-image: repeating-linear-gradient(90deg,transparent,transparent 5px,rgba(0,0,0,0.1) 5px,rgba(0,0,0,0.1) 10px);
|
||||
}
|
||||
.animated-progressbar-fg:is(.dark *){
|
||||
--tw-gradient-from: #fbbf24 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #f59e0b var(--tw-gradient-to-position);
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -5440,16 +5493,6 @@ button:hover{
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-600:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-800:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-indigo-400:is(.dark *){
|
||||
--tw-gradient-from: #8DA2FB var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(141 162 251 / 0) var(--tw-gradient-to-position);
|
||||
@ -5468,12 +5511,6 @@ button:hover{
|
||||
.dark\:to-purple-400\/20:is(.dark *){
|
||||
--tw-gradient-to: rgb(172 148 250 / 0.2) var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-600:is(.dark *){
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-800:is(.dark *){
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:fill-gray-300:is(.dark *){
|
||||
fill: #D1D5DB;
|
||||
}
|
||||
|
||||
87
web/dist/themes/borg.css
vendored
87
web/dist/themes/borg.css
vendored
@ -2420,11 +2420,6 @@ body {
|
||||
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-200{
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-400{
|
||||
--tw-gradient-from: #76A9FA var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
@ -2593,9 +2588,6 @@ body {
|
||||
.to-pink-700{
|
||||
--tw-gradient-to: #BF125D var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-200{
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-500{
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
}
|
||||
@ -4060,6 +4052,69 @@ body{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 0px;
|
||||
border-width: 2px;
|
||||
border-color: rgb(16 185 129 / 0.3);
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #18181b var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #1e293b var(--tw-gradient-to-position);
|
||||
--tw-shadow: inset 0 0 10px rgba(16,185,129,0.3);
|
||||
--tw-shadow-colored: inset 0 0 10px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.animated-progressbar-bg:is(.dark *){
|
||||
--tw-gradient-from: #000000 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: #18181b var(--tw-gradient-to-position);
|
||||
}
|
||||
.animated-progressbar-fg{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #10b981 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #059669 var(--tw-gradient-to-position);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
background-image: repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(0,0,0,0.2) 10px,rgba(0,0,0,0.2) 20px);
|
||||
}
|
||||
.animated-progressbar-fg:is(.dark *){
|
||||
--tw-gradient-from: #34d399 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #10b981 var(--tw-gradient-to-position);
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -4941,16 +4996,6 @@ body{
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-600:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-800:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-indigo-400:is(.dark *){
|
||||
--tw-gradient-from: #8DA2FB var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(141 162 251 / 0) var(--tw-gradient-to-position);
|
||||
@ -4969,12 +5014,6 @@ body{
|
||||
.dark\:to-purple-400\/20:is(.dark *){
|
||||
--tw-gradient-to: rgb(172 148 250 / 0.2) var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-600:is(.dark *){
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-800:is(.dark *){
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:fill-gray-300:is(.dark *){
|
||||
fill: #D1D5DB;
|
||||
}
|
||||
|
||||
65
web/dist/themes/default.css
vendored
65
web/dist/themes/default.css
vendored
@ -2420,11 +2420,6 @@ body {
|
||||
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-200{
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-400{
|
||||
--tw-gradient-from: #76A9FA var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
@ -2593,9 +2588,6 @@ body {
|
||||
.to-pink-700{
|
||||
--tw-gradient-to: #BF125D var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-200{
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-500{
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
}
|
||||
@ -4494,6 +4486,47 @@ button:hover{
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 9999px;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
--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);
|
||||
}
|
||||
.animated-progressbar-bg:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
.animated-progressbar-fg{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #3F83F8 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.animated-progressbar-fg:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -5375,16 +5408,6 @@ button:hover{
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-600:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-800:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-indigo-400:is(.dark *){
|
||||
--tw-gradient-from: #8DA2FB var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(141 162 251 / 0) var(--tw-gradient-to-position);
|
||||
@ -5403,12 +5426,6 @@ button:hover{
|
||||
.dark\:to-purple-400\/20:is(.dark *){
|
||||
--tw-gradient-to: rgb(172 148 250 / 0.2) var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-600:is(.dark *){
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-800:is(.dark *){
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:fill-gray-300:is(.dark *){
|
||||
fill: #D1D5DB;
|
||||
}
|
||||
|
||||
84
web/dist/themes/lollms_blue.css
vendored
84
web/dist/themes/lollms_blue.css
vendored
@ -2425,11 +2425,6 @@ html{
|
||||
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-200{
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-400{
|
||||
--tw-gradient-from: #76A9FA var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
@ -2598,9 +2593,6 @@ html{
|
||||
.to-pink-700{
|
||||
--tw-gradient-to: #BF125D var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-200{
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-500{
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
}
|
||||
@ -4542,6 +4534,66 @@ button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgb(255 255 255 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 9999px;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
--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);
|
||||
}
|
||||
.animated-progressbar-bg:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
.animated-progressbar-fg{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #3F83F8 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.animated-progressbar-fg:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -5423,16 +5475,6 @@ button:hover{
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-600:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-800:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-indigo-400:is(.dark *){
|
||||
--tw-gradient-from: #8DA2FB var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(141 162 251 / 0) var(--tw-gradient-to-position);
|
||||
@ -5451,12 +5493,6 @@ button:hover{
|
||||
.dark\:to-purple-400\/20:is(.dark *){
|
||||
--tw-gradient-to: rgb(172 148 250 / 0.2) var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-600:is(.dark *){
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-800:is(.dark *){
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:fill-gray-300:is(.dark *){
|
||||
fill: #D1D5DB;
|
||||
}
|
||||
|
||||
88
web/dist/themes/matrix_reborn.css
vendored
88
web/dist/themes/matrix_reborn.css
vendored
@ -3044,12 +3044,6 @@ body {
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.from-blue-200{
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.from-blue-400{
|
||||
--tw-gradient-from: #76A9FA var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
@ -3259,10 +3253,6 @@ body {
|
||||
--tw-gradient-to: #BF125D var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-purple-200{
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-purple-500{
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
}
|
||||
@ -5599,6 +5589,62 @@ button:hover{
|
||||
background-color: rgb(4 108 78 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 9999px;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #014737 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(1 71 55 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #03543F var(--tw-gradient-to-position);
|
||||
--tw-shadow: 0 0 15px rgba(0,255,0,0.3);
|
||||
--tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.animated-progressbar-bg:is(.dark *){
|
||||
--tw-gradient-from: #000000 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: #052e16 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.animated-progressbar-fg{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@keyframes pulse{
|
||||
|
||||
50%{
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
.animated-progressbar-fg{
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #31C48D var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(49 196 141 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #0E9F6E var(--tw-gradient-to-position);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
.animated-progressbar-fg:is(.dark *){
|
||||
--tw-gradient-from: #84E1BC var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(132 225 188 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #31C48D var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -6708,18 +6754,6 @@ button:hover{
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.dark\:from-blue-600:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.dark\:from-blue-800:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.dark\:from-indigo-400:is(.dark *){
|
||||
--tw-gradient-from: #8DA2FB var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(141 162 251 / 0) var(--tw-gradient-to-position);
|
||||
@ -6743,14 +6777,6 @@ button:hover{
|
||||
--tw-gradient-to: rgb(172 148 250 / 0.2) var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.dark\:to-purple-600:is(.dark *){
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.dark\:to-purple-800:is(.dark *){
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.dark\:fill-gray-300:is(.dark *){
|
||||
fill: #D1D5DB;
|
||||
}
|
||||
@ -7621,4 +7647,4 @@ button:hover{
|
||||
.\32xl\:h-96{
|
||||
height: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
99
web/dist/themes/red_dragon.css
vendored
99
web/dist/themes/red_dragon.css
vendored
@ -3044,12 +3044,6 @@ body {
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.from-blue-200{
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.from-blue-400{
|
||||
--tw-gradient-from: #76A9FA var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
@ -3259,10 +3253,6 @@ body {
|
||||
--tw-gradient-to: #BF125D var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-purple-200{
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-purple-500{
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
}
|
||||
@ -5557,6 +5547,73 @@ button:hover{
|
||||
background-color: rgb(200 30 30 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgb(255 255 255 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 9999px;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #FDE8E8 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(253 232 232 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #FBD5D5 var(--tw-gradient-to-position);
|
||||
--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);
|
||||
}
|
||||
|
||||
.animated-progressbar-bg:is(.dark *){
|
||||
--tw-gradient-from: #450a0a var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(69 10 10 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #771D1D var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.animated-progressbar-fg{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #E02424 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(224 36 36 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #9B1C1C var(--tw-gradient-to-position);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
.animated-progressbar-fg:is(.dark *){
|
||||
--tw-gradient-from: #C81E1E var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(200 30 30 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #9B1C1C var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -6666,18 +6723,6 @@ button:hover{
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.dark\:from-blue-600:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.dark\:from-blue-800:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.dark\:from-indigo-400:is(.dark *){
|
||||
--tw-gradient-from: #8DA2FB var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(141 162 251 / 0) var(--tw-gradient-to-position);
|
||||
@ -6701,14 +6746,6 @@ button:hover{
|
||||
--tw-gradient-to: rgb(172 148 250 / 0.2) var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.dark\:to-purple-600:is(.dark *){
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.dark\:to-purple-800:is(.dark *){
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.dark\:fill-gray-300:is(.dark *){
|
||||
fill: #D1D5DB;
|
||||
}
|
||||
@ -7579,4 +7616,4 @@ button:hover{
|
||||
.\32xl\:h-96{
|
||||
height: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
85
web/dist/themes/sober_gray.css
vendored
85
web/dist/themes/sober_gray.css
vendored
@ -2420,11 +2420,6 @@ body {
|
||||
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-200{
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-400{
|
||||
--tw-gradient-from: #76A9FA var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
@ -2593,9 +2588,6 @@ body {
|
||||
.to-pink-700{
|
||||
--tw-gradient-to: #BF125D var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-200{
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-500{
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
}
|
||||
@ -4467,6 +4459,67 @@ button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 3rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 9999px;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #F3F4F6 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #E5E7EB var(--tw-gradient-to-position);
|
||||
--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);
|
||||
}
|
||||
.animated-progressbar-bg:is(.dark *){
|
||||
--tw-gradient-from: #374151 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(55 65 81 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
|
||||
}
|
||||
.animated-progressbar-fg{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #9CA3AF var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(156 163 175 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #6B7280 var(--tw-gradient-to-position);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.animated-progressbar-fg:is(.dark *){
|
||||
--tw-gradient-from: #6B7280 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(107 114 128 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #4B5563 var(--tw-gradient-to-position);
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -5348,16 +5401,6 @@ button:hover{
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-600:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-800:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-indigo-400:is(.dark *){
|
||||
--tw-gradient-from: #8DA2FB var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(141 162 251 / 0) var(--tw-gradient-to-position);
|
||||
@ -5376,12 +5419,6 @@ button:hover{
|
||||
.dark\:to-purple-400\/20:is(.dark *){
|
||||
--tw-gradient-to: rgb(172 148 250 / 0.2) var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-600:is(.dark *){
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-800:is(.dark *){
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:fill-gray-300:is(.dark *){
|
||||
fill: #D1D5DB;
|
||||
}
|
||||
|
||||
87
web/dist/themes/strawberry.css
vendored
87
web/dist/themes/strawberry.css
vendored
@ -2425,11 +2425,6 @@ html{
|
||||
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-200{
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-400{
|
||||
--tw-gradient-from: #76A9FA var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
@ -2598,9 +2593,6 @@ html{
|
||||
.to-pink-700{
|
||||
--tw-gradient-to: #BF125D var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-200{
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-500{
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
}
|
||||
@ -4562,6 +4554,67 @@ button:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(28 100 242 / var(--tw-bg-opacity));
|
||||
}
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(251 213 213 / var(--tw-bg-opacity));
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 9999px;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #FDF2F8 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(253 242 248 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #ffe4e6 var(--tw-gradient-to-position);
|
||||
--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);
|
||||
}
|
||||
.animated-progressbar-bg:is(.dark *){
|
||||
--tw-gradient-from: #F8B4D9 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(248 180 217 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #fecdd3 var(--tw-gradient-to-position);
|
||||
}
|
||||
.animated-progressbar-fg{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #F8B4D9 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(248 180 217 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #fb7185 var(--tw-gradient-to-position);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.animated-progressbar-fg:is(.dark *){
|
||||
--tw-gradient-from: #F17EB8 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(241 126 184 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #f43f5e var(--tw-gradient-to-position);
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -5443,16 +5496,6 @@ button:hover{
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-600:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-800:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-indigo-400:is(.dark *){
|
||||
--tw-gradient-from: #8DA2FB var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(141 162 251 / 0) var(--tw-gradient-to-position);
|
||||
@ -5471,12 +5514,6 @@ button:hover{
|
||||
.dark\:to-purple-400\/20:is(.dark *){
|
||||
--tw-gradient-to: rgb(172 148 250 / 0.2) var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-600:is(.dark *){
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-800:is(.dark *){
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:fill-gray-300:is(.dark *){
|
||||
fill: #D1D5DB;
|
||||
}
|
||||
@ -6159,4 +6196,4 @@ button:hover{
|
||||
.\32xl\:h-96{
|
||||
height: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
100
web/dist/themes/strawberry_milkshake.css
vendored
100
web/dist/themes/strawberry_milkshake.css
vendored
@ -3044,12 +3044,6 @@ body {
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.from-blue-200{
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.from-blue-400{
|
||||
--tw-gradient-from: #76A9FA var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
@ -3259,10 +3253,6 @@ body {
|
||||
--tw-gradient-to: #BF125D var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-purple-200{
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-purple-500{
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
}
|
||||
@ -5557,6 +5547,74 @@ button:hover{
|
||||
background-color: rgb(191 18 93 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(251 213 213 / var(--tw-bg-opacity));
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 3rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 9999px;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #FDF2F8 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(253 242 248 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #ffe4e6 var(--tw-gradient-to-position);
|
||||
--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);
|
||||
}
|
||||
|
||||
.animated-progressbar-bg:is(.dark *){
|
||||
--tw-gradient-from: #F8B4D9 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(248 180 217 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #fecdd3 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.animated-progressbar-fg{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #F8B4D9 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(248 180 217 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #fb7185 var(--tw-gradient-to-position);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
.animated-progressbar-fg:is(.dark *){
|
||||
--tw-gradient-from: #F17EB8 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(241 126 184 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #f43f5e var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -6666,18 +6724,6 @@ button:hover{
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.dark\:from-blue-600:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.dark\:from-blue-800:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.dark\:from-indigo-400:is(.dark *){
|
||||
--tw-gradient-from: #8DA2FB var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(141 162 251 / 0) var(--tw-gradient-to-position);
|
||||
@ -6701,14 +6747,6 @@ button:hover{
|
||||
--tw-gradient-to: rgb(172 148 250 / 0.2) var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.dark\:to-purple-600:is(.dark *){
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.dark\:to-purple-800:is(.dark *){
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.dark\:fill-gray-300:is(.dark *){
|
||||
fill: #D1D5DB;
|
||||
}
|
||||
@ -7579,4 +7617,4 @@ button:hover{
|
||||
.\32xl\:h-96{
|
||||
height: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2425,11 +2425,6 @@ html{
|
||||
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-200{
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-400{
|
||||
--tw-gradient-from: #76A9FA var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
@ -2598,9 +2593,6 @@ html{
|
||||
.to-pink-700{
|
||||
--tw-gradient-to: #BF125D var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-200{
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-500{
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
}
|
||||
@ -4578,6 +4570,48 @@ button:hover{
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 0.125rem;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #451a03 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(69 26 3 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #78350f var(--tw-gradient-to-position);
|
||||
--tw-shadow: 0 0 15px rgba(245,158,11,0.2);
|
||||
--tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.animated-progressbar-bg:is(.dark *){
|
||||
--tw-gradient-from: #000000 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: #451a03 var(--tw-gradient-to-position);
|
||||
}
|
||||
.animated-progressbar-fg{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #f59e0b 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: #fbbf24 var(--tw-gradient-to-position);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
background-image: repeating-linear-gradient(90deg,transparent,transparent 5px,rgba(0,0,0,0.1) 5px,rgba(0,0,0,0.1) 10px);
|
||||
}
|
||||
.animated-progressbar-fg:is(.dark *){
|
||||
--tw-gradient-from: #fbbf24 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #f59e0b var(--tw-gradient-to-position);
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -5459,16 +5493,6 @@ button:hover{
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-600:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-800:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-indigo-400:is(.dark *){
|
||||
--tw-gradient-from: #8DA2FB var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(141 162 251 / 0) var(--tw-gradient-to-position);
|
||||
@ -5487,12 +5511,6 @@ button:hover{
|
||||
.dark\:to-purple-400\/20:is(.dark *){
|
||||
--tw-gradient-to: rgb(172 148 250 / 0.2) var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-600:is(.dark *){
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-800:is(.dark *){
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:fill-gray-300:is(.dark *){
|
||||
fill: #D1D5DB;
|
||||
}
|
||||
@ -6175,4 +6193,4 @@ button:hover{
|
||||
.\32xl\:h-96{
|
||||
height: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2420,11 +2420,6 @@ body {
|
||||
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-200{
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-400{
|
||||
--tw-gradient-from: #76A9FA var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
@ -2593,9 +2588,6 @@ body {
|
||||
.to-pink-700{
|
||||
--tw-gradient-to: #BF125D var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-200{
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-500{
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
}
|
||||
@ -4079,6 +4071,50 @@ body{
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 0px;
|
||||
border-width: 2px;
|
||||
border-color: rgb(16 185 129 / 0.3);
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #18181b var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #1e293b var(--tw-gradient-to-position);
|
||||
--tw-shadow: inset 0 0 10px rgba(16,185,129,0.3);
|
||||
--tw-shadow-colored: inset 0 0 10px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.animated-progressbar-bg:is(.dark *){
|
||||
--tw-gradient-from: #000000 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: #18181b var(--tw-gradient-to-position);
|
||||
}
|
||||
.animated-progressbar-fg{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #10b981 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #059669 var(--tw-gradient-to-position);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
background-image: repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(0,0,0,0.2) 10px,rgba(0,0,0,0.2) 20px);
|
||||
}
|
||||
.animated-progressbar-fg:is(.dark *){
|
||||
--tw-gradient-from: #34d399 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #10b981 var(--tw-gradient-to-position);
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -4960,16 +4996,6 @@ body{
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-600:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-800:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-indigo-400:is(.dark *){
|
||||
--tw-gradient-from: #8DA2FB var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(141 162 251 / 0) var(--tw-gradient-to-position);
|
||||
@ -4988,12 +5014,6 @@ body{
|
||||
.dark\:to-purple-400\/20:is(.dark *){
|
||||
--tw-gradient-to: rgb(172 148 250 / 0.2) var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-600:is(.dark *){
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-800:is(.dark *){
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:fill-gray-300:is(.dark *){
|
||||
fill: #D1D5DB;
|
||||
}
|
||||
@ -5676,4 +5696,4 @@ body{
|
||||
.\32xl\:h-96{
|
||||
height: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2420,11 +2420,6 @@ body {
|
||||
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-200{
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-400{
|
||||
--tw-gradient-from: #76A9FA var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
@ -2593,9 +2588,6 @@ body {
|
||||
.to-pink-700{
|
||||
--tw-gradient-to: #BF125D var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-200{
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-500{
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
}
|
||||
@ -4494,6 +4486,47 @@ button:hover{
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 9999px;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
--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);
|
||||
}
|
||||
.animated-progressbar-bg:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
.animated-progressbar-fg{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #3F83F8 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.animated-progressbar-fg:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -5375,16 +5408,6 @@ button:hover{
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-600:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-800:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-indigo-400:is(.dark *){
|
||||
--tw-gradient-from: #8DA2FB var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(141 162 251 / 0) var(--tw-gradient-to-position);
|
||||
@ -5403,12 +5426,6 @@ button:hover{
|
||||
.dark\:to-purple-400\/20:is(.dark *){
|
||||
--tw-gradient-to: rgb(172 148 250 / 0.2) var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-600:is(.dark *){
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-800:is(.dark *){
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:fill-gray-300:is(.dark *){
|
||||
fill: #D1D5DB;
|
||||
}
|
||||
|
||||
@ -2425,11 +2425,6 @@ html{
|
||||
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-200{
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-400{
|
||||
--tw-gradient-from: #76A9FA var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
@ -2598,9 +2593,6 @@ html{
|
||||
.to-pink-700{
|
||||
--tw-gradient-to: #BF125D var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-200{
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-500{
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
}
|
||||
@ -4561,6 +4553,47 @@ button:hover{
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 9999px;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
--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);
|
||||
}
|
||||
.animated-progressbar-bg:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
.animated-progressbar-fg{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #3F83F8 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(63 131 248 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.animated-progressbar-fg:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -5442,16 +5475,6 @@ button:hover{
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-600:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-800:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-indigo-400:is(.dark *){
|
||||
--tw-gradient-from: #8DA2FB var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(141 162 251 / 0) var(--tw-gradient-to-position);
|
||||
@ -5470,12 +5493,6 @@ button:hover{
|
||||
.dark\:to-purple-400\/20:is(.dark *){
|
||||
--tw-gradient-to: rgb(172 148 250 / 0.2) var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-600:is(.dark *){
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-800:is(.dark *){
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:fill-gray-300:is(.dark *){
|
||||
fill: #D1D5DB;
|
||||
}
|
||||
|
||||
@ -3044,12 +3044,6 @@ body {
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.from-blue-200{
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.from-blue-400{
|
||||
--tw-gradient-from: #76A9FA var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
@ -3259,10 +3253,6 @@ body {
|
||||
--tw-gradient-to: #BF125D var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-purple-200{
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-purple-500{
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
}
|
||||
@ -5599,6 +5589,62 @@ button:hover{
|
||||
background-color: rgb(4 108 78 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 9999px;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #014737 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(1 71 55 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #03543F var(--tw-gradient-to-position);
|
||||
--tw-shadow: 0 0 15px rgba(0,255,0,0.3);
|
||||
--tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.animated-progressbar-bg:is(.dark *){
|
||||
--tw-gradient-from: #000000 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: #052e16 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.animated-progressbar-fg{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@keyframes pulse{
|
||||
|
||||
50%{
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
.animated-progressbar-fg{
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #31C48D var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(49 196 141 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #0E9F6E var(--tw-gradient-to-position);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
.animated-progressbar-fg:is(.dark *){
|
||||
--tw-gradient-from: #84E1BC var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(132 225 188 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #31C48D var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -6708,18 +6754,6 @@ button:hover{
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.dark\:from-blue-600:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.dark\:from-blue-800:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.dark\:from-indigo-400:is(.dark *){
|
||||
--tw-gradient-from: #8DA2FB var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(141 162 251 / 0) var(--tw-gradient-to-position);
|
||||
@ -6743,14 +6777,6 @@ button:hover{
|
||||
--tw-gradient-to: rgb(172 148 250 / 0.2) var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.dark\:to-purple-600:is(.dark *){
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.dark\:to-purple-800:is(.dark *){
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.dark\:fill-gray-300:is(.dark *){
|
||||
fill: #D1D5DB;
|
||||
}
|
||||
@ -7621,4 +7647,4 @@ button:hover{
|
||||
.\32xl\:h-96{
|
||||
height: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3044,12 +3044,6 @@ body {
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.from-blue-200{
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.from-blue-400{
|
||||
--tw-gradient-from: #76A9FA var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
@ -3259,10 +3253,6 @@ body {
|
||||
--tw-gradient-to: #BF125D var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-purple-200{
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-purple-500{
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
}
|
||||
@ -5562,8 +5552,7 @@ button:hover{
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(253 232 232 / var(--tw-bg-opacity));
|
||||
background-color: rgb(255 255 255 / 0.8);
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
@ -5580,6 +5569,51 @@ button:hover{
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 9999px;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #FDE8E8 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(253 232 232 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #FBD5D5 var(--tw-gradient-to-position);
|
||||
--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);
|
||||
}
|
||||
|
||||
.animated-progressbar-bg:is(.dark *){
|
||||
--tw-gradient-from: #450a0a var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(69 10 10 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #771D1D var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.animated-progressbar-fg{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #E02424 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(224 36 36 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #9B1C1C var(--tw-gradient-to-position);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
.animated-progressbar-fg:is(.dark *){
|
||||
--tw-gradient-from: #C81E1E var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(200 30 30 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #9B1C1C var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -6689,18 +6723,6 @@ button:hover{
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.dark\:from-blue-600:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.dark\:from-blue-800:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.dark\:from-indigo-400:is(.dark *){
|
||||
--tw-gradient-from: #8DA2FB var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(141 162 251 / 0) var(--tw-gradient-to-position);
|
||||
@ -6724,14 +6746,6 @@ button:hover{
|
||||
--tw-gradient-to: rgb(172 148 250 / 0.2) var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.dark\:to-purple-600:is(.dark *){
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.dark\:to-purple-800:is(.dark *){
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.dark\:fill-gray-300:is(.dark *){
|
||||
fill: #D1D5DB;
|
||||
}
|
||||
@ -7602,4 +7616,4 @@ button:hover{
|
||||
.\32xl\:h-96{
|
||||
height: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2420,11 +2420,6 @@ body {
|
||||
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-200{
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-400{
|
||||
--tw-gradient-from: #76A9FA var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
@ -2593,9 +2588,6 @@ body {
|
||||
.to-pink-700{
|
||||
--tw-gradient-to: #BF125D var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-200{
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-500{
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
}
|
||||
@ -4487,6 +4479,47 @@ button:hover{
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 3rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 9999px;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #F3F4F6 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #E5E7EB var(--tw-gradient-to-position);
|
||||
--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);
|
||||
}
|
||||
.animated-progressbar-bg:is(.dark *){
|
||||
--tw-gradient-from: #374151 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(55 65 81 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #1F2937 var(--tw-gradient-to-position);
|
||||
}
|
||||
.animated-progressbar-fg{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #9CA3AF var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(156 163 175 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #6B7280 var(--tw-gradient-to-position);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.animated-progressbar-fg:is(.dark *){
|
||||
--tw-gradient-from: #6B7280 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(107 114 128 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #4B5563 var(--tw-gradient-to-position);
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -5368,16 +5401,6 @@ button:hover{
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-600:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-800:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-indigo-400:is(.dark *){
|
||||
--tw-gradient-from: #8DA2FB var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(141 162 251 / 0) var(--tw-gradient-to-position);
|
||||
@ -5396,12 +5419,6 @@ button:hover{
|
||||
.dark\:to-purple-400\/20:is(.dark *){
|
||||
--tw-gradient-to: rgb(172 148 250 / 0.2) var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-600:is(.dark *){
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-800:is(.dark *){
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:fill-gray-300:is(.dark *){
|
||||
fill: #D1D5DB;
|
||||
}
|
||||
@ -6084,4 +6101,4 @@ button:hover{
|
||||
.\32xl\:h-96{
|
||||
height: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2425,11 +2425,6 @@ html{
|
||||
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-200{
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.from-blue-400{
|
||||
--tw-gradient-from: #76A9FA var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
@ -2598,9 +2593,6 @@ html{
|
||||
.to-pink-700{
|
||||
--tw-gradient-to: #BF125D var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-200{
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
}
|
||||
.to-purple-500{
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
}
|
||||
@ -4582,6 +4574,47 @@ button:hover{
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 9999px;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #FDF2F8 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(253 242 248 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #ffe4e6 var(--tw-gradient-to-position);
|
||||
--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);
|
||||
}
|
||||
.animated-progressbar-bg:is(.dark *){
|
||||
--tw-gradient-from: #F8B4D9 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(248 180 217 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #fecdd3 var(--tw-gradient-to-position);
|
||||
}
|
||||
.animated-progressbar-fg{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #F8B4D9 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(248 180 217 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #fb7185 var(--tw-gradient-to-position);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.animated-progressbar-fg:is(.dark *){
|
||||
--tw-gradient-from: #F17EB8 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(241 126 184 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #f43f5e var(--tw-gradient-to-position);
|
||||
}
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -5463,16 +5496,6 @@ button:hover{
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-600:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-blue-800:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.dark\:from-indigo-400:is(.dark *){
|
||||
--tw-gradient-from: #8DA2FB var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(141 162 251 / 0) var(--tw-gradient-to-position);
|
||||
@ -5491,12 +5514,6 @@ button:hover{
|
||||
.dark\:to-purple-400\/20:is(.dark *){
|
||||
--tw-gradient-to: rgb(172 148 250 / 0.2) var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-600:is(.dark *){
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:to-purple-800:is(.dark *){
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
.dark\:fill-gray-300:is(.dark *){
|
||||
fill: #D1D5DB;
|
||||
}
|
||||
@ -6179,4 +6196,4 @@ button:hover{
|
||||
.\32xl\:h-96{
|
||||
height: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3044,12 +3044,6 @@ body {
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.from-blue-200{
|
||||
--tw-gradient-from: #C3DDFD var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(195 221 253 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.from-blue-400{
|
||||
--tw-gradient-from: #76A9FA var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(118 169 250 / 0) var(--tw-gradient-to-position);
|
||||
@ -3259,10 +3253,6 @@ body {
|
||||
--tw-gradient-to: #BF125D var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-purple-200{
|
||||
--tw-gradient-to: #DCD7FE var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-purple-500{
|
||||
--tw-gradient-to: #9061F9 var(--tw-gradient-to-position);
|
||||
}
|
||||
@ -5557,6 +5547,74 @@ button:hover{
|
||||
background-color: rgb(191 18 93 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.interesting-facts{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
border-radius: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(251 213 213 / var(--tw-bg-opacity));
|
||||
padding: 1rem;
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.interesting-facts:hover{
|
||||
--tw-scale-x: 1.05;
|
||||
--tw-scale-y: 1.05;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.interesting-facts:is(.dark *){
|
||||
background-color: rgb(31 41 55 / 0.8);
|
||||
}
|
||||
|
||||
.animated-progressbar-bg{
|
||||
position: relative;
|
||||
height: 3rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 9999px;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #FDF2F8 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(253 242 248 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #ffe4e6 var(--tw-gradient-to-position);
|
||||
--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);
|
||||
}
|
||||
|
||||
.animated-progressbar-bg:is(.dark *){
|
||||
--tw-gradient-from: #F8B4D9 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(248 180 217 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #fecdd3 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.animated-progressbar-fg{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
--tw-gradient-from: #F8B4D9 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(248 180 217 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #fb7185 var(--tw-gradient-to-position);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
.animated-progressbar-fg:is(.dark *){
|
||||
--tw-gradient-from: #F17EB8 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(241 126 184 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
--tw-gradient-to: #f43f5e var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.last\:mb-0:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -6666,18 +6724,6 @@ button:hover{
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.dark\:from-blue-600:is(.dark *){
|
||||
--tw-gradient-from: #1C64F2 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(28 100 242 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.dark\:from-blue-800:is(.dark *){
|
||||
--tw-gradient-from: #1E429F var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(30 66 159 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.dark\:from-indigo-400:is(.dark *){
|
||||
--tw-gradient-from: #8DA2FB var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(141 162 251 / 0) var(--tw-gradient-to-position);
|
||||
@ -6701,14 +6747,6 @@ button:hover{
|
||||
--tw-gradient-to: rgb(172 148 250 / 0.2) var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.dark\:to-purple-600:is(.dark *){
|
||||
--tw-gradient-to: #7E3AF2 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.dark\:to-purple-800:is(.dark *){
|
||||
--tw-gradient-to: #5521B5 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.dark\:fill-gray-300:is(.dark *){
|
||||
fill: #D1D5DB;
|
||||
}
|
||||
@ -7579,4 +7617,4 @@ button:hover{
|
||||
.\32xl\:h-96{
|
||||
height: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -381,4 +381,13 @@ button:hover {
|
||||
|
||||
.interesting-facts{
|
||||
@apply mt-6 mb-6 p-4 bg-white/80 dark:bg-gray-800/80 rounded-lg shadow-lg transform hover:scale-105
|
||||
}
|
||||
}
|
||||
|
||||
.animated-progressbar-bg {
|
||||
@apply w-full h-24 relative overflow-hidden bg-gradient-to-r from-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 {
|
||||
@apply absolute top-0 left-0 h-full bg-gradient-to-r from-amber-500 to-amber-400 dark:from-amber-400 dark:to-amber-500 transition-all duration-300
|
||||
[background-image:repeating-linear-gradient(90deg,transparent,transparent_5px,rgba(0,0,0,0.1)_5px,rgba(0,0,0,0.1)_10px)]
|
||||
}
|
||||
|
||||
@ -266,4 +266,13 @@ body {
|
||||
|
||||
.interesting-facts{
|
||||
@apply mt-6 mb-6 p-4 bg-gray-800/80 dark:bg-gray-800/80 rounded-lg shadow-lg transform hover:scale-105
|
||||
}
|
||||
}
|
||||
|
||||
.animated-progressbar-bg {
|
||||
@apply w-full h-24 relative overflow-hidden bg-gradient-to-r from-zinc-900 to-slate-800 dark:from-black dark:to-zinc-900 rounded-none border-2 border-emerald-500/30 shadow-[inset_0_0_10px_rgba(16,185,129,0.3)]
|
||||
}
|
||||
|
||||
.animated-progressbar-fg {
|
||||
@apply absolute top-0 left-0 h-full bg-gradient-to-r from-emerald-500 to-emerald-600 dark:from-emerald-400 dark:to-emerald-500 transition-all duration-300
|
||||
[background-image:repeating-linear-gradient(45deg,transparent,transparent_10px,rgba(0,0,0,0.2)_10px,rgba(0,0,0,0.2)_20px)]
|
||||
}
|
||||
|
||||
@ -330,4 +330,11 @@ button:hover {
|
||||
|
||||
.interesting-facts{
|
||||
@apply mt-6 mb-6 p-4 bg-white/80 dark:bg-gray-800/80 rounded-lg shadow-lg transform hover:scale-105
|
||||
}
|
||||
|
||||
.animated-progressbar-bg{
|
||||
@apply w-full h-24 relative overflow-hidden bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800 rounded-full shadow-lg
|
||||
}
|
||||
.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
|
||||
}
|
||||
@ -380,4 +380,11 @@ button:hover {
|
||||
|
||||
.interesting-facts{
|
||||
@apply mt-6 mb-6 p-4 bg-white/80 dark:bg-gray-800/80 rounded-lg shadow-lg transform hover:scale-105
|
||||
}
|
||||
|
||||
.animated-progressbar-bg{
|
||||
@apply w-full h-24 relative overflow-hidden bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800 rounded-full shadow-lg
|
||||
}
|
||||
.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
|
||||
}
|
||||
@ -333,4 +333,12 @@ button:hover {
|
||||
|
||||
.interesting-facts{
|
||||
@apply mt-6 mb-6 p-4 bg-gray-200 dark:bg-gray-800/80 rounded-lg shadow-lg transform hover:scale-105
|
||||
}
|
||||
}
|
||||
|
||||
.animated-progressbar-bg {
|
||||
@apply w-full h-12 relative overflow-hidden bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 rounded-full shadow-lg
|
||||
}
|
||||
|
||||
.animated-progressbar-fg {
|
||||
@apply absolute top-0 left-0 h-full bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-600 transition-all duration-300
|
||||
}
|
||||
|
||||
@ -379,4 +379,12 @@ button:hover {
|
||||
|
||||
.interesting-facts{
|
||||
@apply mt-6 mb-6 p-4 bg-red-200 dark:bg-gray-800/80 rounded-lg shadow-lg transform hover:scale-105
|
||||
}
|
||||
}
|
||||
|
||||
.animated-progressbar-bg {
|
||||
@apply w-full h-24 relative overflow-hidden bg-gradient-to-r from-pink-50 to-rose-100 dark:from-pink-300 dark:to-rose-200 rounded-full shadow-lg
|
||||
}
|
||||
|
||||
.animated-progressbar-fg {
|
||||
@apply absolute top-0 left-0 h-full bg-gradient-to-r from-pink-300 to-rose-400 dark:from-pink-400 dark:to-rose-500 transition-all duration-300
|
||||
}
|
||||
|
||||
@ -1895,9 +1895,26 @@ export default {
|
||||
case 3: return Math.random() * 100; // Bottom or left edge
|
||||
}
|
||||
},
|
||||
extractTitle(prompt) {
|
||||
const titleMatch = prompt.match(/@<(.*?)>@/);
|
||||
return titleMatch ? titleMatch[1] : null;
|
||||
},
|
||||
getPromptContent(prompt) {
|
||||
// Remove the title tag if it exists and return the remaining content
|
||||
return prompt.replace(/@<.*?>@/, '').trim();
|
||||
},
|
||||
handlePromptSelection(prompt) {
|
||||
this.selectedPrompt = prompt;
|
||||
this.previewPrompt = prompt; // Initialize preview
|
||||
const title = this.extractTitle(prompt)
|
||||
console.log("title");
|
||||
console.log(title);
|
||||
if (title){
|
||||
this.previewPrompt = this.getPromptContent(prompt); // Initialize preview
|
||||
}
|
||||
else{
|
||||
this.previewPrompt = prompt; // Initialize preview
|
||||
|
||||
}
|
||||
this.placeholders = this.extractPlaceholders(prompt);
|
||||
|
||||
if (this.placeholders.length > 0) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user