Fix colour system

This commit is contained in:
2025-05-27 14:36:40 +02:00
parent 60582d4520
commit 0c745e7544
13 changed files with 120 additions and 100 deletions

View File

@@ -8,7 +8,15 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}">
<link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}">
<link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}?v={{ site_settings.updated_at.timestamp() }}" onload="console.log('[CSS] Dynamic colors loaded with version:', '{{ site_settings.updated_at.timestamp() }}')">
<script>
console.log('[CSS] Base colors loaded');
document.addEventListener('DOMContentLoaded', function() {
console.log('[CSS] All CSS files loaded');
console.log('[CSS] Primary color:', getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim());
console.log('[CSS] Secondary color:', getComputedStyle(document.documentElement).getPropertyValue('--secondary-color').trim());
});
</script>
<style>
body {
min-height: 100vh;

View File

@@ -7,6 +7,16 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}">
<link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}?v={{ site_settings.updated_at.timestamp() }}" onload="console.log('[CSS] Dynamic colors loaded with version:', '{{ site_settings.updated_at.timestamp() }}')">
<script>
console.log('[CSS] Base colors loaded');
document.addEventListener('DOMContentLoaded', function() {
console.log('[CSS] All CSS files loaded');
console.log('[CSS] Primary color:', getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim());
console.log('[CSS] Secondary color:', getComputedStyle(document.documentElement).getPropertyValue('--secondary-color').trim());
});
</script>
</head>
<body>
<div class="container">

View File

@@ -10,8 +10,17 @@
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="{{ url_for('static', filename='css/file-grid.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/base.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}">
<link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}?v={{ site_settings.updated_at.timestamp() }}" onload="console.log('[CSS] Dynamic colors loaded with version:', '{{ site_settings.updated_at.timestamp() }}')">
{% block extra_css %}{% endblock %}
<script>
console.log('[CSS] Base colors loaded');
document.addEventListener('DOMContentLoaded', function() {
console.log('[CSS] All CSS files loaded');
console.log('[CSS] Primary color:', getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim());
console.log('[CSS] Secondary color:', getComputedStyle(document.documentElement).getPropertyValue('--secondary-color').trim());
});
</script>
</head>
<body>
<!-- Navigation -->

View File

@@ -5,7 +5,6 @@
{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
<link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}">
{% endblock %}
{% block content %}
@@ -70,17 +69,11 @@ document.addEventListener('DOMContentLoaded', function() {
// Get all chart colors
const chartColors = {
primary: getCssVar('--chart-primary'),
secondary: getCssVar('--chart-secondary'),
warning: getCssVar('--chart-warning'),
primaryLight: getCssVar('--chart-primary-light'),
primaryLighter: getCssVar('--chart-primary-lighter'),
primaryLightest: getCssVar('--chart-primary-lightest'),
primaryPale: getCssVar('--chart-primary-pale'),
secondaryLight: getCssVar('--chart-secondary-light'),
secondaryLighter: getCssVar('--chart-secondary-lighter'),
secondaryLightest: getCssVar('--chart-secondary-lightest'),
secondaryPale: getCssVar('--chart-secondary-pale')
color1: getCssVar('--chart-color-1'),
color2: getCssVar('--chart-color-2'),
color3: getCssVar('--chart-color-3'),
color4: getCssVar('--chart-color-4'),
warning: getCssVar('--warning-color')
};
// Contact Status Chart
@@ -92,7 +85,7 @@ document.addEventListener('DOMContentLoaded', function() {
labels: ['Active', 'Inactive'],
datasets: [{
data: [{{ active_count }}, {{ inactive_count }}],
backgroundColor: [chartColors.primary, chartColors.secondary],
backgroundColor: [chartColors.color1, chartColors.color2],
borderWidth: 0,
hoverOffset: 4
}]
@@ -119,7 +112,7 @@ document.addEventListener('DOMContentLoaded', function() {
labels: ['Starred', 'Unstarred'],
datasets: [{
data: [{{ starred_count }}, {{ file_count - starred_count }}],
backgroundColor: [chartColors.warning, chartColors.primary],
backgroundColor: [chartColors.warning, chartColors.color1],
borderWidth: 0,
hoverOffset: 4
}]
@@ -145,16 +138,10 @@ document.addEventListener('DOMContentLoaded', function() {
datasets: [{
data: [{% for type in storage_by_type %}{{ type.total_size }}{% if not loop.last %}, {% endif %}{% endfor %}],
backgroundColor: [
chartColors.primary,
chartColors.primaryLight,
chartColors.primaryLighter,
chartColors.primaryLightest,
chartColors.primaryPale,
chartColors.secondary,
chartColors.secondaryLight,
chartColors.secondaryLighter,
chartColors.secondaryLightest,
chartColors.secondaryPale
chartColors.color1,
chartColors.color2,
chartColors.color3,
chartColors.color4
],
borderWidth: 0,
hoverOffset: 4
@@ -185,16 +172,10 @@ document.addEventListener('DOMContentLoaded', function() {
datasets: [{
data: [{% for type in trash_by_type %}{{ type.count }}{% if not loop.last %}, {% endif %}{% endfor %}],
backgroundColor: [
chartColors.primary,
chartColors.primaryLight,
chartColors.primaryLighter,
chartColors.primaryLightest,
chartColors.primaryPale,
chartColors.secondary,
chartColors.secondaryLight,
chartColors.secondaryLighter,
chartColors.secondaryLightest,
chartColors.secondaryPale
chartColors.color1,
chartColors.color2,
chartColors.color3,
chartColors.color4
],
borderWidth: 0,
hoverOffset: 4

View File

@@ -5,7 +5,6 @@
{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/trash.css') }}">
<link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}">
{% endblock %}
{% block content %}