Files
Inventarsystem/Web/static/css/styles.css
T
2026-04-10 14:48:52 +02:00

806 lines
18 KiB
CSS
Executable File

/*
* Copyright 2025-2026 AIIrondev
*
* Licensed under the Inventarsystem EULA (Endbenutzer-Lizenzvertrag).
* See Legal/LICENSE for the full license text.
* Unauthorized commercial use, SaaS hosting, or removal of branding is prohibited.
* For commercial licensing inquiries: https://github.com/AIIrondev
*/
/* Global visual system for all pages */
:root {
--ui-bg: #f2f5f8;
--ui-bg-accent: #e7edf4;
--ui-surface: #ffffff;
--ui-surface-soft: #f8fafc;
--ui-border: #d8e0e8;
--ui-text: #1f2d3d;
--ui-text-muted: #5d6d7e;
--ui-title: #1a2e44;
--ui-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
--ui-shadow-md: 0 10px 24px rgba(15, 23, 42, 0.1);
--ui-radius: 12px;
}
body {
font-family: "Manrope", "Segoe UI", "Noto Sans", sans-serif;
color: var(--ui-text);
background: var(--ui-bg);
margin: 0;
padding: 0;
}
.container {
background-color: var(--ui-surface);
border: 0;
padding: 22px;
border-radius: var(--ui-radius);
box-shadow: none;
width: min(1200px, calc(100% - 28px));
margin: 16px auto;
}
.container-fluid {
padding-left: 16px;
padding-right: 16px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--ui-title);
letter-spacing: 0.01em;
}
h1,
h2 {
text-align: center;
}
p,
small,
label,
span {
color: var(--ui-text-muted);
}
.card,
.content,
.form-card,
.modal-content,
.list-group-item,
.dropdown-menu,
.table,
.alert {
border-radius: var(--ui-radius);
}
.card,
.content,
.form-card,
.modal-content,
.list-group-item,
.dropdown-menu,
.table {
border: 0;
box-shadow: none;
background: var(--ui-surface);
}
.card-header,
.modal-header,
thead th {
background: linear-gradient(180deg, #f7fafd, #edf3f8) !important;
border-bottom: 1px solid var(--ui-border) !important;
color: var(--ui-title) !important;
}
.form-control,
.form-select,
textarea,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="date"],
select {
border-radius: 10px !important;
border: 1px solid #cad5e0 !important;
min-height: 40px;
color: var(--ui-text) !important;
background-color: #fff !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus,
select:focus {
border-color: #7ea3c8 !important;
box-shadow: 0 0 0 0.2rem rgba(70, 130, 180, 0.14) !important;
outline: 0;
}
.table {
overflow: hidden;
}
.table th,
.table td {
vertical-align: middle;
border-color: #dee6ee !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
background-color: #f8fbff;
}
.alert {
border-width: 1px;
box-shadow: none;
}
.navbar {
border-bottom: 1px solid #273341;
box-shadow: none;
}
.navbar-brand {
font-weight: 800;
letter-spacing: 0.02em;
}
@media (max-width: 900px) {
.container {
width: calc(100% - 18px);
padding: 14px;
margin: 10px auto;
border-radius: 10px;
}
}
/* Edit and generate buttons with black text for better visibility */
.edit-button {
color: black !important; /* Override any existing color */
}
.duplicate-button {
color: black !important; /* Override any existing color */
}
.generate-qr-button {
color: black !important; /* Override any existing color */
}
.ausleihen {
color: black !important; /* Override any existing color */
}
/* Modal image display fix */
.modal-image {
display: none;
max-width: 100%;
max-height: 80vh;
margin: 0 auto;
}
.modal-image.active-image {
display: block;
}
/* Active image display classes */
.item-image.active-image {
display: block !important;
opacity: 1 !important;
z-index: 5;
}
.item-image:not(.active-image) {
display: none !important;
}
/* QR Reader styling */
#qr-reader {
width: 500px;
display: none;
}
/* Edit new location container */
.edit-new-location-container {
display: none;
margin-top: 10px;
}
/* Modal dialog styling */
.modal-dialog-white {
background: white;
padding: 20px;
border-radius: 5px;
text-align: center;
}
.modal-content-margin {
margin-top: 10px;
}
/* Unified list/card view switch styling for main and main_admin */
.view-switch-group {
position: absolute;
right: 0;
top: 0;
display: flex;
gap: 8px;
padding: 4px;
border-radius: 999px;
background: transparent;
border: 0;
box-shadow: none;
}
.view-toggle-btn {
width: 38px;
height: 38px;
border: 1px solid #c7ced6;
border-radius: 50%;
background: #ffffff;
font-size: 1.15rem;
cursor: pointer;
color: #2f3e4e;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.view-toggle-btn:hover {
transform: translateY(-1px);
border-color: #8fa2b7;
background: #f8fbff;
box-shadow: 0 3px 8px rgba(33, 37, 41, 0.12);
}
.view-toggle-btn:active {
transform: translateY(0);
}
.view-toggle-btn[aria-pressed='true'] {
background: #e9f2ff;
border-color: #7ea1c8;
color: #1f4f7a;
}
.table-view-header {
display: none;
}
body.table-view .table-view-header {
display: grid;
grid-template-columns: var(--table-columns, minmax(180px, 2fr) repeat(5, minmax(110px, 1fr)));
gap: 10px 14px;
align-items: center;
padding: 12px 14px;
margin-bottom: 8px;
border: 0;
border-radius: 10px;
background: transparent;
color: #3f4e5d;
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
body.table-view .items-container {
display: block !important;
padding: 0;
overflow-x: visible;
scroll-snap-type: none;
}
body.table-view .item-card {
width: 100%;
max-width: none;
margin: 0 0 10px 0;
padding: 12px 14px;
border: 1px solid #e1e6ed;
border-radius: 10px;
background: #ffffff;
box-shadow: none;
scroll-snap-align: none;
}
body.table-view .item-card .card-content {
display: grid;
grid-template-columns: var(--table-columns, minmax(180px, 2fr) repeat(5, minmax(110px, 1fr)));
gap: 10px 14px;
align-items: center;
}
body.table-view .item-card .card-content h3,
body.table-view .item-card .card-content p {
margin: 0;
max-height: none;
}
body.table-view .item-card .card-content p strong {
display: none;
}
body.table-view .item-card .card-content .item-name-cell,
body.table-view .item-card .card-content .item-col-name {
font-size: 0.98rem;
font-weight: 700;
color: #1f2d3d;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.table-view .item-card .card-content .item-ort-cell,
body.table-view .item-card .card-content .item-col-location,
body.table-view .item-card .card-content .item-filter1-cell,
body.table-view .item-card .card-content .item-col-filter1,
body.table-view .item-card .card-content .item-filter2-cell,
body.table-view .item-card .card-content .item-col-filter2,
body.table-view .item-card .card-content .item-filter3-cell,
body.table-view .item-card .card-content .item-col-filter3,
body.table-view .item-card .card-content .item-code-cell,
body.table-view .item-card .card-content .item-col-code,
body.table-view .item-card .card-content .item-col-count {
color: #445465;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.table-view .item-card .image-container,
body.table-view .item-card .borrower-badge,
body.table-view .item-card .appointment-badge,
body.table-view .item-card .damage-badge {
display: none !important;
}
body.table-view .item-card .actions {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed #d9e0e8;
}
@media (max-width: 900px) {
.view-switch-group {
position: static;
margin: 8px auto 0;
width: fit-content;
}
body.table-view .table-view-header {
display: none !important;
}
body.table-view .item-card .card-content {
grid-template-columns: 1fr !important;
gap: 6px;
}
body.table-view .item-card .card-content p strong {
display: inline;
}
}
/* Unified action button styling for main and main_admin */
:root {
--action-radius: 10px;
--action-shadow: none;
--action-shadow-hover: none;
}
.actions,
.modal-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.actions form,
.modal-actions form {
margin: 0;
}
.actions .ausleihen,
.actions .schedule-button,
.actions .quick-details-button,
.actions .edit-button,
.actions .duplicate-button,
.actions .delete-button,
.actions .damage-button,
.modal-actions .ausleihen,
.modal-actions .schedule-button,
.modal-actions .quick-details-button,
.modal-actions .edit-button,
.modal-actions .duplicate-button,
.modal-actions .delete-button,
.modal-actions .damage-button {
min-height: 38px !important;
padding: 8px 14px !important;
border-radius: var(--action-radius) !important;
border-width: 1px !important;
border-style: solid !important;
font-size: 0.88rem !important;
font-weight: 700 !important;
letter-spacing: 0.01em;
box-shadow: var(--action-shadow);
transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
.actions .ausleihen,
.modal-actions .ausleihen {
background: #198754 !important;
border-color: #157347 !important;
color: #ffffff !important;
}
.actions .schedule-button,
.modal-actions .schedule-button {
background: #fd7e14 !important;
border-color: #e46f10 !important;
color: #ffffff !important;
}
.actions .quick-details-button,
.modal-actions .quick-details-button {
background: #6c757d !important;
border-color: #616971 !important;
color: #ffffff !important;
}
.actions .edit-button,
.modal-actions .edit-button {
background: #0d6efd !important;
border-color: #0b5ed7 !important;
color: #ffffff !important;
}
.actions .duplicate-button,
.modal-actions .duplicate-button {
background: #6f42c1 !important;
border-color: #6439af !important;
color: #ffffff !important;
}
.actions .delete-button,
.modal-actions .delete-button {
background: #dc3545 !important;
border-color: #bb2d3b !important;
color: #ffffff !important;
}
.actions .damage-button,
.modal-actions .damage-button {
background: #0dcaf0 !important;
border-color: #0aa5c0 !important;
color: #0b1f2a !important;
}
.actions .disabled-button,
.modal-actions .disabled-button,
.actions button:disabled,
.modal-actions button:disabled {
opacity: 0.72;
filter: grayscale(0.28);
box-shadow: none;
cursor: not-allowed;
}
.actions .ausleihen:hover,
.actions .schedule-button:hover,
.actions .quick-details-button:hover,
.actions .edit-button:hover,
.actions .duplicate-button:hover,
.actions .delete-button:hover,
.actions .damage-button:hover,
.modal-actions .ausleihen:hover,
.modal-actions .schedule-button:hover,
.modal-actions .quick-details-button:hover,
.modal-actions .edit-button:hover,
.modal-actions .duplicate-button:hover,
.modal-actions .delete-button:hover,
.modal-actions .damage-button:hover {
transform: translateY(-1px);
box-shadow: var(--action-shadow-hover);
filter: brightness(1.02);
}
.actions button:active,
.modal-actions button:active {
transform: translateY(0);
box-shadow: var(--action-shadow);
}
@media (max-width: 700px) {
.actions,
.modal-actions {
gap: 6px;
}
.actions .ausleihen,
.actions .schedule-button,
.actions .quick-details-button,
.actions .edit-button,
.actions .duplicate-button,
.actions .delete-button,
.actions .damage-button,
.modal-actions .ausleihen,
.modal-actions .schedule-button,
.modal-actions .quick-details-button,
.modal-actions .edit-button,
.modal-actions .duplicate-button,
.modal-actions .delete-button,
.modal-actions .damage-button {
min-height: 36px !important;
padding: 7px 12px !important;
font-size: 0.84rem !important;
}
}
/* Global uniform button system for all pages */
:root {
--ui-btn-radius: 10px;
--ui-btn-min-height: 38px;
--ui-btn-padding-y: 8px;
--ui-btn-padding-x: 14px;
--ui-btn-font-size: 0.9rem;
--ui-btn-font-weight: 700;
--ui-btn-shadow: none;
--ui-btn-shadow-hover: none;
}
.btn,
.action-button,
.button,
.export-button,
.search-button,
.scan-button,
.save-button,
.cancel-button,
.primary-button,
.danger-button,
.submit-button,
.nav-back-button,
.back-button,
.add-new-btn,
.fetch-isbn-button,
.import-book-button,
.return-button,
.item-reset-button,
.admin-only-button,
.reset-cancel-btn,
.reset-confirm-btn,
.btn-accept,
.btn-decline,
.popup-close-button,
.delete-image-button,
.remove-book-cover-button,
.remove-duplicate-image-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px;
min-height: var(--ui-btn-min-height) !important;
padding: var(--ui-btn-padding-y) var(--ui-btn-padding-x) !important;
border-radius: var(--ui-btn-radius) !important;
border: 1px solid transparent !important;
font-size: var(--ui-btn-font-size) !important;
font-weight: var(--ui-btn-font-weight) !important;
line-height: 1.2;
letter-spacing: 0.01em;
text-decoration: none !important;
cursor: pointer;
box-shadow: var(--ui-btn-shadow);
transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
.btn:hover,
.action-button:hover,
.button:hover,
.export-button:hover,
.search-button:hover,
.scan-button:hover,
.save-button:hover,
.cancel-button:hover,
.primary-button:hover,
.danger-button:hover,
.submit-button:hover,
.nav-back-button:hover,
.back-button:hover,
.add-new-btn:hover,
.fetch-isbn-button:hover,
.import-book-button:hover,
.return-button:hover,
.item-reset-button:hover,
.admin-only-button:hover,
.reset-cancel-btn:hover,
.reset-confirm-btn:hover,
.btn-accept:hover,
.btn-decline:hover,
.popup-close-button:hover,
.delete-image-button:hover,
.remove-book-cover-button:hover,
.remove-duplicate-image-button:hover {
transform: translateY(-1px);
box-shadow: var(--ui-btn-shadow-hover);
filter: brightness(1.02);
}
.btn:active,
.action-button:active,
.button:active,
.export-button:active,
.search-button:active,
.scan-button:active,
.save-button:active,
.cancel-button:active,
.primary-button:active,
.danger-button:active,
.submit-button:active,
.nav-back-button:active,
.back-button:active,
.add-new-btn:active,
.fetch-isbn-button:active,
.import-book-button:active,
.return-button:active,
.item-reset-button:active,
.admin-only-button:active,
.reset-cancel-btn:active,
.reset-confirm-btn:active,
.btn-accept:active,
.btn-decline:active,
.popup-close-button:active,
.delete-image-button:active,
.remove-book-cover-button:active,
.remove-duplicate-image-button:active {
transform: translateY(0);
box-shadow: var(--ui-btn-shadow);
}
.btn:disabled,
.action-button:disabled,
.button:disabled,
.export-button:disabled,
.search-button:disabled,
.scan-button:disabled,
.save-button:disabled,
.cancel-button:disabled,
.primary-button:disabled,
.danger-button:disabled,
.submit-button:disabled,
.add-new-btn:disabled,
.fetch-isbn-button:disabled,
.import-book-button:disabled,
.return-button:disabled,
.item-reset-button:disabled,
.admin-only-button:disabled,
.reset-cancel-btn:disabled,
.reset-confirm-btn:disabled,
.btn-accept:disabled,
.btn-decline:disabled,
.popup-close-button:disabled,
.delete-image-button:disabled,
.remove-book-cover-button:disabled,
.remove-duplicate-image-button:disabled {
opacity: 0.72;
box-shadow: none;
cursor: not-allowed;
filter: grayscale(0.25);
}
/* Preserve consistent role colors */
.btn-primary,
.save-button,
.submit-button,
.primary-button,
.register-button {
background: #0d6efd !important;
border-color: #0b5ed7 !important;
color: #fff !important;
}
.btn-secondary,
.cancel-button,
.button,
.nav-back-button,
.back-button,
.reset-cancel-btn {
background: #6c757d !important;
border-color: #616971 !important;
color: #fff !important;
}
.btn-success,
.btn-accept,
.return-button,
.item-reset-button,
.import-book-button,
.fetch-isbn-button,
.scan-button {
background: #198754 !important;
border-color: #157347 !important;
color: #fff !important;
}
.btn-warning,
.export-button,
.search-button,
.add-new-btn {
background: #fd7e14 !important;
border-color: #e46f10 !important;
color: #fff !important;
}
.btn-danger,
.danger-button,
.btn-decline,
.reset-confirm-btn,
.delete-image-button,
.remove-book-cover-button,
.remove-duplicate-image-button {
background: #dc3545 !important;
border-color: #bb2d3b !important;
color: #fff !important;
}
.btn-sm {
min-height: 32px !important;
padding: 6px 10px !important;
font-size: 0.82rem !important;
}
.w-100.btn,
.w-100.action-button,
.w-100.button,
.w-100.export-button,
.w-100.save-button,
.w-100.submit-button,
.w-100.primary-button,
.w-100.danger-button,
.w-100.cancel-button {
width: 100% !important;
}
@media (max-width: 700px) {
.btn,
.action-button,
.button,
.export-button,
.search-button,
.scan-button,
.save-button,
.cancel-button,
.primary-button,
.danger-button,
.submit-button,
.nav-back-button,
.back-button,
.add-new-btn,
.fetch-isbn-button,
.import-book-button,
.return-button,
.item-reset-button,
.admin-only-button,
.reset-cancel-btn,
.reset-confirm-btn,
.btn-accept,
.btn-decline,
.popup-close-button,
.delete-image-button,
.remove-book-cover-button,
.remove-duplicate-image-button {
min-height: 36px !important;
padding: 7px 12px !important;
font-size: 0.84rem !important;
}
}