Move css to separate files

Move css styles from `<style>` tags to `static/css/`.
More modularity.
This commit is contained in:
Candifloss 2025-04-06 16:44:45 +05:30
parent 07c870fb71
commit 23419e9ceb
10 changed files with 120 additions and 126 deletions

View File

@ -0,0 +1,39 @@
/* Custom styles for the preview page */
.table-container {
overflow-x: auto;
margin-bottom: 2rem;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
}
.table-valid-entries {
background-color: rgba(212, 237, 218, 0.1);
}
.table-invalid-entries {
background-color: rgba(248, 215, 218, 0.1);
}
[contenteditable="true"] {
padding: 0.5rem;
min-width: 100px;
}
[contenteditable="true"]:focus {
outline: 2px solid #86b7fe;
background-color: white;
}
.sticky-actions {
position: sticky;
bottom: 0;
background: white;
padding: 1rem 0;
border-top: 1px solid #dee2e6;
margin-top: 2rem;
}
.error-details {
background-color: #f8d7da;
border-left: 4px solid #dc3545;
padding: 1rem;
margin-bottom: 2rem;
}
.error-details summary {
font-weight: bold;
cursor: pointer;
}

View File

@ -0,0 +1,30 @@
.delete-container {
max-width: 800px;
margin: 0 auto;
}
.preview-card {
background: white;
border-radius: 0.5rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.attribute-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
}
.attribute-item {
padding: 0.75rem;
border-bottom: 1px solid #eee;
}
.attribute-label {
font-weight: 600;
color: #6c757d;
}
.sticky-actions {
position: sticky;
bottom: 0;
background: white;
padding: 1rem 0;
border-top: 1px solid #dee2e6;
margin-top: 2rem;
}

30
static/css/form_page.css Normal file
View File

@ -0,0 +1,30 @@
.form-container {
max-width: 1000px;
margin: 0 auto;
}
.form-card {
background: white;
border-radius: 0.5rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.form-field {
margin-bottom: 1.5rem;
}
.sticky-actions {
position: sticky;
bottom: 0;
background: white;
padding: 1rem 0;
border-top: 1px solid #dee2e6;
margin-top: 2rem;
}
.error-message {
color: #dc3545;
margin-bottom: 1.5rem;
padding: 0.75rem;
background-color: #f8d7da;
border-radius: 0.25rem;
}
select.form-control {
appearance: auto; /* Keep native select dropdown arrow */
}

View File

@ -0,0 +1,8 @@
.upload-container {
max-width: 800px;
margin: 0 auto;
}
.error-details {
background-color: #f8d7da;
border-left: 4px solid #dc3545;
}

View File

@ -0,0 +1,8 @@
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}
.action-buttons {
white-space: nowrap;
}

View File

@ -7,47 +7,7 @@
{% include 'favicon.html' %}
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}" rel="stylesheet">
<style>
/* Custom styles for the preview page */
.table-container {
overflow-x: auto;
margin-bottom: 2rem;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
}
.table-valid-entries {
background-color: rgba(212, 237, 218, 0.1);
}
.table-invalid-entries {
background-color: rgba(248, 215, 218, 0.1);
}
[contenteditable="true"] {
padding: 0.5rem;
min-width: 100px;
}
[contenteditable="true"]:focus {
outline: 2px solid #86b7fe;
background-color: white;
}
.sticky-actions {
position: sticky;
bottom: 0;
background: white;
padding: 1rem 0;
border-top: 1px solid #dee2e6;
margin-top: 2rem;
}
.error-details {
background-color: #f8d7da;
border-left: 4px solid #dc3545;
padding: 1rem;
margin-bottom: 2rem;
}
.error-details summary {
font-weight: bold;
cursor: pointer;
}
</style>
<link href="{{ url_for('static', filename='css/csv_preview.css') }}" rel="stylesheet">
</head>
<body>
{% include 'header.html' %}

View File

@ -6,38 +6,7 @@
{% include 'favicon.html' %}
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}" rel="stylesheet">
<style>
.delete-container {
max-width: 800px;
margin: 0 auto;
}
.preview-card {
background: white;
border-radius: 0.5rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.attribute-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
}
.attribute-item {
padding: 0.75rem;
border-bottom: 1px solid #eee;
}
.attribute-label {
font-weight: 600;
color: #6c757d;
}
.sticky-actions {
position: sticky;
bottom: 0;
background: white;
padding: 1rem 0;
border-top: 1px solid #dee2e6;
margin-top: 2rem;
}
</style>
<link href="{{ url_for('static', filename='css/delete_page.css') }}" rel="stylesheet">
</head>
<body>
{% include 'header.html' %}

View File

@ -6,38 +6,7 @@
{% include 'favicon.html' %}
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}" rel="stylesheet">
<style>
.form-container {
max-width: 1000px;
margin: 0 auto;
}
.form-card {
background: white;
border-radius: 0.5rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.form-field {
margin-bottom: 1.5rem;
}
.sticky-actions {
position: sticky;
bottom: 0;
background: white;
padding: 1rem 0;
border-top: 1px solid #dee2e6;
margin-top: 2rem;
}
.error-message {
color: #dc3545;
margin-bottom: 1.5rem;
padding: 0.75rem;
background-color: #f8d7da;
border-radius: 0.25rem;
}
select.form-control {
appearance: auto; /* Keep native select dropdown arrow */
}
</style>
<link href="{{ url_for('static', filename='css/form_page.css') }}" rel="stylesheet">
</head>
<body>
{% include 'header.html' %}

View File

@ -7,16 +7,7 @@
{% include 'favicon.html' %}
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}" rel="stylesheet">
<style>
.upload-container {
max-width: 800px;
margin: 0 auto;
}
.error-details {
background-color: #f8d7da;
border-left: 4px solid #dc3545;
}
</style>
<link href="{{ url_for('static', filename='css/upload_page.css') }}" rel="stylesheet">
</head>
<body>
{% include 'header.html' %}

View File

@ -6,17 +6,7 @@
<title>View Inventory</title>
{% include 'favicon.html' %}
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<style>
/* Minimal custom CSS for table responsiveness */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}
.action-buttons {
white-space: nowrap;
}
</style>
<link href="{{ url_for('static', filename='static/css/view_table.css') }}" rel="stylesheet">
</head>
<body>
{% include 'header.html' %}