Kobe/docupulse
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cool CSS

Browse Source
This commit is contained in:
Kobe
2025-06-05 12:27:57 +02:00
parent 5834aec885
commit 164e8373a4
2 changed files with 86 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
static/css/base.css
View File

@@ -88,10 +88,90 @@ body {
padding: 2rem; padding: 2rem;
} }
/* Enhanced Card Styles */
.card { .card {
border: none; border: none;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 2px 4px var(--shadow-color); box-shadow: 0 2px 4px var(--shadow-color);
background: var(--white);
position: relative;
overflow: hidden;
}
/* Hover effects only for dashboard and room/conversation cards */
body[data-page="dashboard"] .card,
body[data-page="rooms"] .card,
body[data-page="conversations"] .card {
transition: all 0.3s ease;
}
body[data-page="dashboard"] .card:hover,
body[data-page="rooms"] .card:hover,
body[data-page="conversations"] .card:hover {
box-shadow: 0 8px 16px var(--shadow-color);
}
body[data-page="dashboard"] .card::after,
body[data-page="rooms"] .card::after,
body[data-page="conversations"] .card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-opacity-15) 0%, var(--secondary-opacity-15) 100%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
body[data-page="dashboard"] .card:hover::after,
body[data-page="rooms"] .card:hover::after,
body[data-page="conversations"] .card:hover::after {
opacity: 1;
}
/* Override hover effects for file grid cards */
#fileGrid .card {
transform: none !important;
box-shadow: 0 2px 4px var(--shadow-color) !important;
}
#fileGrid .card:hover {
transform: none !important;
box-shadow: 0 2px 4px var(--shadow-color) !important;
}
#fileGrid .card::after {
display: none !important;
}
/* Custom Scrollbar Styles */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-color);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 4px;
transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-light);
}
/* Firefox Scrollbar */
* {
scrollbar-width: thin;
scrollbar-color: var(--primary-color) var(--bg-color);
} }
.btn-primary { .btn-primary {
@@ -108,6 +188,9 @@ body {
transition: transform 0.2s; transition: transform 0.2s;
} }
.document-card:hover {
transform: translateY(-5px); /* Remove hover effect from list group items */
.list-group-item-action:hover {
background-color: transparent !important;
color: inherit !important;
} }

2
templates/common/base.html
View File

@@ -16,7 +16,7 @@
{% block extra_css %}{% endblock %} {% block extra_css %}{% endblock %}
<script src="{{ url_for('static', filename='js/color-logger.js') }}?v={{ 'js/color-logger.js'|asset_version }}"></script> <script src="{{ url_for('static', filename='js/color-logger.js') }}?v={{ 'js/color-logger.js'|asset_version }}"></script>
</head> </head>
<body> <body data-page="{% if request.endpoint == 'main.dashboard' %}dashboard{% elif request.endpoint == 'rooms.rooms' %}rooms{% elif request.endpoint == 'conversations.conversations' %}conversations{% endif %}">
<!-- Navigation --> <!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark"> <nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid"> <div class="container-fluid">