89 lines
4.5 KiB
CSS
89 lines
4.5 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* ================================
|
|
Variables globales
|
|
================================ */
|
|
|
|
:root {
|
|
--accent: #7c3aed;
|
|
--accent-hover: #6d28d9;
|
|
}
|
|
|
|
/* ================================
|
|
Article Wikipedia (HTML externe — ne peut pas être tailwindifié)
|
|
================================ */
|
|
|
|
.article-container {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
padding: 28px 20px 80px;
|
|
background: #fff;
|
|
color: #202122;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.article-title {
|
|
font-size: clamp(24px, 5vw, 32px);
|
|
font-weight: 800;
|
|
line-height: 1.2;
|
|
margin-bottom: 4px;
|
|
color: #000;
|
|
border-bottom: 1px solid #a2a9b1;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.wiki-link { color: #3366cc; text-decoration: none; cursor: pointer; }
|
|
.wiki-link:hover { text-decoration: underline; color: #0645ad; }
|
|
|
|
.article-content p { margin: 0 0 0.8em; line-height: 1.75; font-size: 15px; color: #202122; }
|
|
.article-content h2 { font-size: 22px; font-weight: normal; font-family: "Linux Libertine","Georgia",serif; border-bottom: 1px solid #a2a9b1; padding-bottom: 3px; margin: 20px 0 8px; color: #000; }
|
|
.article-content h3 { font-size: 17px; font-weight: bold; margin: 16px 0 6px; color: #000; }
|
|
.article-content h4 { font-size: 15px; font-weight: bold; margin: 12px 0 4px; }
|
|
.article-content ul, .article-content ol { padding-left: 28px; margin: 0 0 0.8em; }
|
|
.article-content li { margin-bottom: 4px; font-size: 15px; line-height: 1.6; }
|
|
.article-content b, .article-content strong { font-weight: bold; }
|
|
.article-content i, .article-content em { font-style: italic; }
|
|
.article-content figure { margin: 12px 0 16px; max-width: 100%; }
|
|
.article-content figure img { max-width: 100%; height: auto; border-radius: 4px; display: block; }
|
|
.article-content figcaption, .article-content .thumbcaption, .article-content .mw-file-description { font-size: 12px; color: #555; margin-top: 4px; font-style: italic; }
|
|
.article-content .thumb, .article-content .thumbinner { float: none !important; display: block; margin: 12px 0; max-width: 100%; }
|
|
.article-content .pcs-collapse-table-container { float: right; clear: right; margin: 0 0 16px 20px; max-width: 280px; width: 100%; font-size: 13px; }
|
|
.article-content .pcs-collapse-table-collapsed-container { display: none; }
|
|
.article-content .infobox, .article-content .infobox_v3 { width: 100% !important; max-width: 280px; border: 1px solid #a2a9b1; border-collapse: collapse; background: #f8f9fa; font-size: 13px; line-height: 1.5; }
|
|
.article-content .infobox td, .article-content .infobox th, .article-content .infobox_v3 td, .article-content .infobox_v3 th { padding: 4px 8px; border: 1px solid #a2a9b1; vertical-align: top; color: #202122; }
|
|
.article-content .infobox th, .article-content .infobox_v3 th, .article-content .entete { background: #eaecf0; font-weight: bold; text-align: center; }
|
|
.article-content .infobox img, .article-content .infobox_v3 img { max-width: 100%; height: auto; }
|
|
.article-content .toc, .article-content #toc { display: inline-block; background: #f8f9fa; border: 1px solid #a2a9b1; padding: 10px 16px; margin: 0 0 16px; font-size: 13px; min-width: 180px; }
|
|
.article-content .toc h2, .article-content #toc h2 { font-size: 14px; font-weight: bold; border: none; margin: 0 0 6px; padding: 0; }
|
|
.article-content .toc ul, .article-content #toc ul { margin: 0; padding-left: 16px; list-style: none; }
|
|
.article-content .toc li, .article-content #toc li { margin: 2px 0; font-size: 13px; }
|
|
.article-content .pcs-edit-section-header,
|
|
.article-content [style*="display:none"],
|
|
.article-content .noprint { display: none !important; }
|
|
|
|
@media (max-width: 500px) {
|
|
.article-content .pcs-collapse-table-container { float: none; max-width: 100%; margin: 0 0 16px; }
|
|
.article-content .infobox, .article-content .infobox_v3 { max-width: 100%; }
|
|
}
|
|
|
|
/* ================================
|
|
Animations
|
|
================================ */
|
|
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
|
|
@keyframes countPop { from { transform: scale(1.3); opacity: 0.7; } to { transform: scale(1); opacity: 1; } }
|
|
|
|
.animate-fade-in { animation: fadeIn 200ms ease; }
|
|
.animate-count-pop { animation: countPop 0.3s ease; }
|
|
.animate-pulse-slow { animation: pulse 2s infinite; }
|
|
.spinner {
|
|
width: 20px; height: 20px;
|
|
border: 2px solid #2e2e2e;
|
|
border-top-color: #7c3aed;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
animation: spin 0.7s linear infinite;
|
|
}
|