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 name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Administration</title>
|
||||
<link rel="stylesheet" href="../assets/css/admin.css">
|
||||
<link rel="stylesheet" href="../assets/css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="admin-nav">
|
||||
|
||||
@ -22,7 +22,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Connexion - Administration</title>
|
||||
<link rel="stylesheet" href="../assets/css/admin.css">
|
||||
<link rel="stylesheet" href="../assets/css/main.css">
|
||||
</head>
|
||||
<body class="login-page">
|
||||
<div class="login-container">
|
||||
|
||||
@ -62,7 +62,7 @@ function generateSlug($title) {
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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">
|
||||
</head>
|
||||
<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