amélioration et réorganisation du css
This commit is contained in:
parent
bd59582428
commit
c3f5e9afc0
@ -17,7 +17,7 @@ $stories = Stories::getAll();
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Administration</title>
|
<title>Administration</title>
|
||||||
<link rel="stylesheet" href="../assets/css/admin.css">
|
<link rel="stylesheet" href="../assets/css/main.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class="admin-nav">
|
<nav class="admin-nav">
|
||||||
|
|||||||
@ -22,7 +22,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Connexion - Administration</title>
|
<title>Connexion - Administration</title>
|
||||||
<link rel="stylesheet" href="../assets/css/admin.css">
|
<link rel="stylesheet" href="../assets/css/main.css">
|
||||||
</head>
|
</head>
|
||||||
<body class="login-page">
|
<body class="login-page">
|
||||||
<div class="login-container">
|
<div class="login-container">
|
||||||
|
|||||||
@ -62,7 +62,7 @@ function generateSlug($title) {
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title><?= $story ? 'Modifier' : 'Nouveau' ?> roman - Administration</title>
|
<title><?= $story ? 'Modifier' : 'Nouveau' ?> roman - Administration</title>
|
||||||
<link rel="stylesheet" href="../assets/css/admin.css">
|
<link rel="stylesheet" href="../assets/css/main.css">
|
||||||
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
|
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@ -1,406 +0,0 @@
|
|||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Login Page */
|
|
||||||
.login-page {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
background-color: #2c1810;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-container {
|
|
||||||
background: white;
|
|
||||||
padding: 2rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
width: 100%;
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-form .form-group {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-form label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-form input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.5rem;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-form button {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.75rem;
|
|
||||||
background-color: #8b4513;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-form button:hover {
|
|
||||||
background-color: #703610;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message {
|
|
||||||
background-color: #ffebee;
|
|
||||||
color: #c62828;
|
|
||||||
padding: 0.75rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Admin Dashboard */
|
|
||||||
.admin-nav {
|
|
||||||
background-color: #2c1810;
|
|
||||||
color: white;
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-brand {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-menu {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
background-color: #8b4513;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:hover {
|
|
||||||
background-color: #703610;
|
|
||||||
}
|
|
||||||
|
|
||||||
.admin-main {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stories-list {
|
|
||||||
display: grid;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.story-item {
|
|
||||||
background: white;
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.story-cover {
|
|
||||||
width: 100px;
|
|
||||||
height: 150px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.story-info {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.story-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-story {
|
|
||||||
background-color: #c62828;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-story:hover {
|
|
||||||
background-color: #b71c1c;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Formulaire d'édition du roman */
|
|
||||||
.story-form {
|
|
||||||
background: white;
|
|
||||||
padding: 2rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
color: #2c1810;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group input[type="text"],
|
|
||||||
.form-group textarea {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.75rem;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group textarea {
|
|
||||||
resize: vertical;
|
|
||||||
min-height: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.current-cover {
|
|
||||||
display: block;
|
|
||||||
max-width: 200px;
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Section des chapitres */
|
|
||||||
.chapters-section {
|
|
||||||
background: white;
|
|
||||||
padding: 2rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapters-section h2 {
|
|
||||||
margin-top: 0;
|
|
||||||
color: #2c1810;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapters-list {
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-item {
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
background: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 1rem;
|
|
||||||
background: #fff;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-number {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
background: #8b4513;
|
|
||||||
color: white;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-weight: bold;
|
|
||||||
cursor: move;
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-title {
|
|
||||||
flex: 1;
|
|
||||||
padding: 0.5rem;
|
|
||||||
margin-right: 1rem;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-content {
|
|
||||||
padding: 1rem;
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-content .editor {
|
|
||||||
min-height: 100px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modal d'édition */
|
|
||||||
.modal {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
background: white;
|
|
||||||
padding: 2rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
width: 90%;
|
|
||||||
max-width: 800px;
|
|
||||||
max-height: 90vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content h2 {
|
|
||||||
margin-top: 0;
|
|
||||||
color: #2c1810;
|
|
||||||
}
|
|
||||||
|
|
||||||
#chapterTitle {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.75rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Éditeur Quill personnalisé */
|
|
||||||
.ql-container {
|
|
||||||
min-height: 300px;
|
|
||||||
font-size: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ql-toolbar {
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
background: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ql-container {
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Boutons et actions */
|
|
||||||
.modal-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-message {
|
|
||||||
background-color: #e8f5e9;
|
|
||||||
color: #2e7d32;
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Styles pour le drag & drop */
|
|
||||||
.chapter-item.sortable-ghost {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-item.sortable-drag {
|
|
||||||
cursor: move;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.story-form,
|
|
||||||
.chapters-section {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-header {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-number {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-title {
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
width: 95%;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ql-container {
|
|
||||||
min-height: 200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Thème personnalisé pour l'éditeur */
|
|
||||||
.ql-snow .ql-toolbar button:hover,
|
|
||||||
.ql-snow .ql-toolbar button.ql-active {
|
|
||||||
color: #8b4513;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ql-snow .ql-toolbar button:hover .ql-stroke,
|
|
||||||
.ql-snow .ql-toolbar button.ql-active .ql-stroke {
|
|
||||||
stroke: #8b4513;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ql-snow .ql-toolbar button:hover .ql-fill,
|
|
||||||
.ql-snow .ql-toolbar button.ql-active .ql-fill {
|
|
||||||
fill: #8b4513;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animation de transition */
|
|
||||||
.chapter-item {
|
|
||||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-item:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
transition: background-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* États de survol pour les éléments interactifs */
|
|
||||||
.chapter-title:hover,
|
|
||||||
.chapter-title:focus {
|
|
||||||
border-color: #8b4513;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-chapter {
|
|
||||||
background-color: #dc3545;
|
|
||||||
color: white;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-chapter:hover {
|
|
||||||
background-color: #c82333;
|
|
||||||
}
|
|
||||||
90
assets/css/components.css
Normal file
90
assets/css/components.css
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
/* Cartes des romans */
|
||||||
|
.story-item {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-lg);
|
||||||
|
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.story-item:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.story-cover {
|
||||||
|
width: 120px;
|
||||||
|
height: 180px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.story-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.story-info h2 {
|
||||||
|
margin: 0 0 var(--spacing-sm) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Messages système */
|
||||||
|
.error-message,
|
||||||
|
.success-message {
|
||||||
|
padding: var(--spacing-sm);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
margin-bottom: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
background-color: var(--error-color);
|
||||||
|
border: 1px solid #a33;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-message {
|
||||||
|
background-color: var(--success-color);
|
||||||
|
border: 1px solid #373;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal */
|
||||||
|
.modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
width: 90%;
|
||||||
|
max-width: 800px;
|
||||||
|
max-height: 90vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Media queries */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.story-item {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.story-cover {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 200px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
55
assets/css/editor.css
Normal file
55
assets/css/editor.css
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
/* Personnalisation de l'éditeur Quill */
|
||||||
|
.ql-toolbar {
|
||||||
|
background: var(--bg-secondary) !important;
|
||||||
|
border-color: var(--border-color) !important;
|
||||||
|
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-container {
|
||||||
|
background: var(--input-bg) !important;
|
||||||
|
border-color: var(--border-color) !important;
|
||||||
|
color: var(--text-primary) !important;
|
||||||
|
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-editor {
|
||||||
|
color: var(--text-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Boutons de la barre d'outils */
|
||||||
|
.ql-snow .ql-stroke {
|
||||||
|
stroke: var(--text-secondary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-fill {
|
||||||
|
fill: var(--text-secondary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-snow .ql-picker {
|
||||||
|
color: var(--text-secondary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Menu déroulant */
|
||||||
|
.ql-snow .ql-picker-options {
|
||||||
|
background-color: var(--bg-secondary) !important;
|
||||||
|
border-color: var(--border-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* États au survol */
|
||||||
|
.ql-snow .ql-toolbar button:hover,
|
||||||
|
.ql-snow .ql-toolbar button.ql-active {
|
||||||
|
.ql-stroke {
|
||||||
|
stroke: var(--accent-primary) !important;
|
||||||
|
}
|
||||||
|
.ql-fill {
|
||||||
|
fill: var(--accent-primary) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.ql-container {
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
75
assets/css/forms.css
Normal file
75
assets/css/forms.css
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
/* Styles communs des formulaires */
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inputs et textareas */
|
||||||
|
.form-group input[type="text"],
|
||||||
|
.form-group input[type="password"],
|
||||||
|
.form-group textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--spacing-sm);
|
||||||
|
background-color: var(--input-bg);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: border-color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group textarea {
|
||||||
|
resize: vertical;
|
||||||
|
min-height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input file personnalisé */
|
||||||
|
.form-group input[type="file"] {
|
||||||
|
background-color: var(--input-bg);
|
||||||
|
padding: var(--spacing-sm);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* États des champs */
|
||||||
|
.form-group input:focus,
|
||||||
|
.form-group textarea:focus {
|
||||||
|
border-color: var(--accent-primary);
|
||||||
|
box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Conteneurs de formulaire */
|
||||||
|
.story-form,
|
||||||
|
.login-form {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
margin-bottom: var(--spacing-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Page de connexion */
|
||||||
|
.login-page {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-container {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
47
assets/css/layout.css
Normal file
47
assets/css/layout.css
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
/* Navigation */
|
||||||
|
.admin-nav {
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
padding: var(--spacing-md) var(--spacing-xl);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-brand {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Conteneur principal */
|
||||||
|
.admin-main {
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grilles et listes */
|
||||||
|
.stories-list {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--spacing-lg);
|
||||||
|
margin-top: var(--spacing-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Media queries */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.admin-main {
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu {
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stories-list {
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
}
|
||||||
|
}
|
||||||
6
assets/css/main.css
Normal file
6
assets/css/main.css
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
/* Import des différents modules CSS */
|
||||||
|
@import 'theme.css';
|
||||||
|
@import 'layout.css';
|
||||||
|
@import 'components.css';
|
||||||
|
@import 'forms.css';
|
||||||
|
@import 'editor.css';
|
||||||
74
assets/css/theme.css
Normal file
74
assets/css/theme.css
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
/* Thème et variables globales */
|
||||||
|
:root {
|
||||||
|
/* Couleurs principales */
|
||||||
|
--bg-primary: #1a1512;
|
||||||
|
--bg-secondary: #2c1810;
|
||||||
|
--bg-tertiary: #382218;
|
||||||
|
|
||||||
|
/* Textes */
|
||||||
|
--text-primary: #e0d6cc;
|
||||||
|
--text-secondary: #b3a69b;
|
||||||
|
|
||||||
|
/* Accents */
|
||||||
|
--accent-primary: #8b4513;
|
||||||
|
--accent-secondary: #d4691e;
|
||||||
|
|
||||||
|
/* Utilitaires */
|
||||||
|
--border-color: #483225;
|
||||||
|
--success-color: #2d5a27;
|
||||||
|
--error-color: #802020;
|
||||||
|
--input-bg: #241610;
|
||||||
|
|
||||||
|
/* Espacements */
|
||||||
|
--spacing-xs: 0.5rem;
|
||||||
|
--spacing-sm: 0.75rem;
|
||||||
|
--spacing-md: 1rem;
|
||||||
|
--spacing-lg: 1.5rem;
|
||||||
|
--spacing-xl: 2rem;
|
||||||
|
|
||||||
|
/* Transitions */
|
||||||
|
--transition-fast: 0.2s ease-in-out;
|
||||||
|
--transition-normal: 0.3s ease-in-out;
|
||||||
|
|
||||||
|
/* Border radius */
|
||||||
|
--radius-sm: 4px;
|
||||||
|
--radius-md: 8px;
|
||||||
|
--radius-lg: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reset et styles de base */
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input, textarea {
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Utilitaires globaux */
|
||||||
|
.button {
|
||||||
|
padding: var(--spacing-sm) var(--spacing-md);
|
||||||
|
background-color: var(--accent-primary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: var(--accent-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* États de focus globaux */
|
||||||
|
:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus-visible {
|
||||||
|
box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.2);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user