AstraOS Ver. 1.12:
- Benachrichtigungen breite gefixt - Falsche farben gefixt
This commit is contained in:
MrWhiff
parent
4fc95986bf
commit
ea9fe64944
|
|
@ -17,40 +17,6 @@
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div x-data="{ showUploadModal: false, showDeleteModal: false, botToDelete: null }">
|
<div x-data="{ showUploadModal: false, showDeleteModal: false, botToDelete: null }">
|
||||||
<!-- FLASH MESSAGES -->
|
|
||||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
||||||
{% if messages %}
|
|
||||||
<div class="toast-container">
|
|
||||||
{% for category, message in messages %}
|
|
||||||
<div x-data="{ show: true }" x-init="setTimeout(() => show = false, 5000)" x-show="show"
|
|
||||||
x-transition:enter="toast transition ease-out duration-300"
|
|
||||||
x-transition:enter-start="opacity-0 translate-x-8"
|
|
||||||
x-transition:enter-end="opacity-100 translate-x-0"
|
|
||||||
x-transition:leave="toast transition ease-in duration-300"
|
|
||||||
x-transition:leave-start="opacity-100"
|
|
||||||
x-transition:leave-end="opacity-0"
|
|
||||||
class="max-w-md w-full bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden border border-{{ 'red' if category == 'danger' else ('green' if category == 'success' else ('blue' if category == 'info' else 'gray')) }}-500/40">
|
|
||||||
<div class="p-4">
|
|
||||||
<div class="flex items-start">
|
|
||||||
<div class="flex-shrink-0">
|
|
||||||
{% if category == 'success' %}
|
|
||||||
<svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
||||||
{% elif category == 'danger' %}
|
|
||||||
<svg class="h-6 w-6 text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
||||||
{% else %}
|
|
||||||
<svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<div class="ml-3 w-0 flex-1 pt-0.5">
|
|
||||||
<p class="text-sm font-medium text-gray-100">{{ message }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% endwith %}
|
|
||||||
<!-- HEADER -->
|
<!-- HEADER -->
|
||||||
<header class="flex justify-between items-center mb-10">
|
<header class="flex justify-between items-center mb-10">
|
||||||
<h2 class="text-4xl font-bold tracking-wide {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Discord Bot Management</h2>
|
<h2 class="text-4xl font-bold tracking-wide {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Discord Bot Management</h2>
|
||||||
|
|
|
||||||
|
|
@ -14,14 +14,12 @@
|
||||||
::-webkit-scrollbar-thumb { background-color: #4b5563; border-radius: 4px; }
|
::-webkit-scrollbar-thumb { background-color: #4b5563; border-radius: 4px; }
|
||||||
::-webkit-scrollbar-thumb:hover { background-color: #6b7280; }
|
::-webkit-scrollbar-thumb:hover { background-color: #6b7280; }
|
||||||
|
|
||||||
/* Hintergrund / global - dunkler und etwas dichter */
|
/* Hintergrund / global (vereinheitlicht mit Referenz) */
|
||||||
body {
|
body {
|
||||||
background: radial-gradient(circle at top, #0f0f14, #050507 80%);
|
background: radial-gradient(circle at top, #1b1b26, #0a0a0f 70%);
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
color: #e6e6e6;
|
color: #e6e6e6;
|
||||||
/* leichte overlay-Atmosphäre */
|
|
||||||
background-blend-mode: multiply;
|
|
||||||
}
|
}
|
||||||
.custom-checkbox-label {
|
.custom-checkbox-label {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -84,14 +82,13 @@
|
||||||
height: 64px;
|
height: 64px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
/* Startup-Blur: andere Akzentfarbe (z.B. teal) */
|
|
||||||
#star .blur {
|
#star .blur {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
filter: blur(12px);
|
filter: blur(12px);
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
background: rgba(6,182,212,0.35);
|
background: rgba(192,132,252,0.7);
|
||||||
}
|
}
|
||||||
#startup p {
|
#startup p {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
|
|
@ -115,17 +112,17 @@
|
||||||
width: 4px;
|
width: 4px;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: rgba(6,182,212,0.12); /* neue, dezente Akzentfarbe */
|
background: rgba(192, 132, 252, 0.2);
|
||||||
animation: float 20s infinite linear;
|
animation: float 20s infinite linear;
|
||||||
}
|
}
|
||||||
.dot.maintenance {
|
.dot.maintenance {
|
||||||
background: rgba(14,165,233,0.12); /* leicht variiert im Wartungsmodus */
|
background: rgba(243, 156, 18, 0.2);
|
||||||
}
|
}
|
||||||
@keyframes float {
|
@keyframes float {
|
||||||
0% { transform: translateY(100vh) scale(1); }
|
0% { transform: translateY(100vh) scale(1); }
|
||||||
100% { transform: translateY(-10vh) scale(1.5); }
|
100% { transform: translateY(-10vh) scale(1.5); }
|
||||||
}
|
}
|
||||||
/* Breite, Abstand und Stacking für Benachrichtigungen (deutlich breiter) */
|
/* Benachrichtigungen: normale (schmale) Breite + Slide/Fade */
|
||||||
.toast-container {
|
.toast-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 1.25rem;
|
top: 1.25rem;
|
||||||
|
|
@ -135,29 +132,27 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.6rem;
|
gap: 0.6rem;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
width: auto;
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
padding-left: 0.5rem;
|
|
||||||
max-width: calc(100% - 3rem);
|
max-width: calc(100% - 3rem);
|
||||||
}
|
}
|
||||||
/* Einzelne Toast-Boxen: normale Desktop-Breite (~28rem), mobil volle Breite */
|
/* Einzelne Toasts: normale Desktop-Breite (~28rem), mobil volle Breite */
|
||||||
.toast {
|
.toast {
|
||||||
transform-origin: top right;
|
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 28rem; /* "normale" Breite (ändern bei Bedarf) */
|
max-width: 28rem; /* <- hier die "normale" Breite einstellen */
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
background: rgba(8,10,12,0.95); /* dunkler, leicht transparent */
|
background: rgba(8,10,12,0.95);
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
border: 1px solid rgba(255,255,255,0.04);
|
border: 1px solid rgba(255,255,255,0.04);
|
||||||
/* Slide + Fade Animation (arbeitet mit Alpine/Tailwind x-transition Klassen) */
|
padding: 0.75rem 1rem;
|
||||||
|
/* Slide + Fade (zusätzlich zu Alpine/Tailwind x-transition) */
|
||||||
transition: transform 0.32s cubic-bezier(.2,.9,.2,1), opacity 0.32s ease;
|
transition: transform 0.32s cubic-bezier(.2,.9,.2,1), opacity 0.32s ease;
|
||||||
|
transform: translateX(0);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
/* kleiner touch: Icon + Text vertikal zentriert */
|
/* Wenn ein Toast noch im "enter-start" Zustand ist (Tailwind-Klassen verwenden translate-x-8 / opacity-0),
|
||||||
.toast .flex-1 { display: block; }
|
sorgt die transition-Einstellung oben für sanftes Rein-/Rausrutschen. */
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||||
{% block head %}{% endblock %}
|
{% block head %}{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -30,41 +30,6 @@
|
||||||
</button>
|
</button>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- FLASH MESSAGES -->
|
|
||||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
||||||
{% if messages %}
|
|
||||||
<div class="toast-container">
|
|
||||||
{% for category, message in messages %}
|
|
||||||
<div x-data="{ show: true }" x-init="setTimeout(() => show = false, 5000)" x-show="show"
|
|
||||||
x-transition:enter="toast transition ease-out duration-300"
|
|
||||||
x-transition:enter-start="opacity-0 translate-x-8"
|
|
||||||
x-transition:enter-end="opacity-100 translate-x-0"
|
|
||||||
x-transition:leave="toast transition ease-in duration-300"
|
|
||||||
x-transition:leave-start="opacity-100"
|
|
||||||
x-transition:leave-end="opacity-0"
|
|
||||||
class="max-w-md w-full bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden border border-{{ 'red' if category == 'danger' else ('green' if category == 'success' else ('blue' if category == 'info' else 'gray')) }}-500/40">
|
|
||||||
<div class="p-4">
|
|
||||||
<div class="flex items-start">
|
|
||||||
<div class="flex-shrink-0">
|
|
||||||
{% if category == 'success' %}
|
|
||||||
<svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
||||||
{% elif category == 'danger' %}
|
|
||||||
<svg class="h-6 w-6 text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
||||||
{% else %}
|
|
||||||
<svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<div class="ml-3 w-0 flex-1 pt-0.5">
|
|
||||||
<p class="text-sm font-medium text-gray-100">{{ message }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% endwith %}
|
|
||||||
|
|
||||||
<!-- USER TABLE -->
|
<!-- USER TABLE -->
|
||||||
<div class="bg-black/40 rounded-xl backdrop-blur-lg overflow-hidden
|
<div class="bg-black/40 rounded-xl backdrop-blur-lg overflow-hidden
|
||||||
{% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
|
{% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
|
||||||
|
|
|
||||||
|
|
@ -7,40 +7,6 @@
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div x-data="{ showDeleteModal: false }">
|
<div x-data="{ showDeleteModal: false }">
|
||||||
<!-- FLASH MESSAGES -->
|
|
||||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
||||||
{% if messages %}
|
|
||||||
<div class="toast-container">
|
|
||||||
{% for category, message in messages %}
|
|
||||||
<div x-data="{ show: true }" x-init="setTimeout(() => show = false, 5000)" x-show="show"
|
|
||||||
x-transition:enter="toast transition ease-out duration-300"
|
|
||||||
x-transition:enter-start="opacity-0 translate-x-8"
|
|
||||||
x-transition:enter-end="opacity-100 translate-x-0"
|
|
||||||
x-transition:leave="toast transition ease-in duration-300"
|
|
||||||
x-transition:leave-start="opacity-100"
|
|
||||||
x-transition:leave-end="opacity-0"
|
|
||||||
class="max-w-md w-full bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden border border-{{ 'red' if category == 'danger' else ('green' if category == 'success' else ('blue' if category == 'info' else 'gray')) }}-500/40">
|
|
||||||
<div class="p-4">
|
|
||||||
<div class="flex items-start">
|
|
||||||
<div class="flex-shrink-0">
|
|
||||||
{% if category == 'success' %}
|
|
||||||
<svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
||||||
{% elif category == 'danger' %}
|
|
||||||
<svg class="h-6 w-6 text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
||||||
{% else %}
|
|
||||||
<svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<div class="ml-3 w-0 flex-1 pt-0.5">
|
|
||||||
<p class="text-sm font-medium text-gray-100">{{ message }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% endwith %}
|
|
||||||
<header class="flex justify-between items-center mb-6">
|
<header class="flex justify-between items-center mb-6">
|
||||||
<h2 class="text-4xl font-bold tracking-wide {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Benutzerdetails</h2>
|
<h2 class="text-4xl font-bold tracking-wide {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Benutzerdetails</h2>
|
||||||
<a href="{{ url_for('age_verification') }}" class="font-bold py-2 px-4 rounded-lg transition text-white {% if maintenance_active %}bg-yellow-600 hover:bg-yellow-700{% else %}bg-purple-600 hover:bg-purple-700{% endif %}">
|
<a href="{{ url_for('age_verification') }}" class="font-bold py-2 px-4 rounded-lg transition text-white {% if maintenance_active %}bg-yellow-600 hover:bg-yellow-700{% else %}bg-purple-600 hover:bg-purple-700{% endif %}">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue