Réorganisation du CSS
This commit is contained in:
Colin Maudry
+200
-195
@@ -1,21 +1,34 @@
|
||||
@import url(https://fonts.bunny.net/css?family=fira-code:400|inter:300,500|inter-tight:400);
|
||||
|
||||
/* ==========================================================================
|
||||
Variables
|
||||
========================================================================== */
|
||||
:root {
|
||||
--bs-font-monospace: "Fira Code";
|
||||
--primary-color: rgb(179, 56, 33);
|
||||
--primary-color-text: #b33821;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base & Reset
|
||||
========================================================================== */
|
||||
body {
|
||||
font-family: "Inter";
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 300;
|
||||
background-color: rgb(255 240 240 / 40%);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 36px 0 20px 0;
|
||||
}
|
||||
|
||||
/* Base Button Styles */
|
||||
button {
|
||||
font-weight: 300;
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
appearance: auto;
|
||||
border: solid rgb(179, 56, 33) 1px; /* couleur thème foncée */
|
||||
border: solid var(--primary-color) 1px; /* couleur thème foncée */
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
@@ -27,36 +40,34 @@ button:hover:not([disabled]) {
|
||||
background-color: #fee;
|
||||
}
|
||||
|
||||
/* Change la marge bout d'export */
|
||||
.table-menu {
|
||||
font-size: 16px;
|
||||
margin: 12px 0 12px 0;
|
||||
height: 36px;
|
||||
/* Global Link Styles */
|
||||
#_pages_content a {
|
||||
color: #993333;
|
||||
}
|
||||
|
||||
.table-menu > * {
|
||||
margin: 8px 16px 8px 0;
|
||||
float: left;
|
||||
/* ==========================================================================
|
||||
Layout
|
||||
========================================================================== */
|
||||
#_pages_content {
|
||||
padding: 28px 24px 0 24px;
|
||||
}
|
||||
|
||||
#source_table p {
|
||||
line-height: 1.5;
|
||||
.wrapper {
|
||||
display: grid;
|
||||
grid-gap: 10px;
|
||||
margin-bottom: 50px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#source_table {
|
||||
margin-bottom: 25px;
|
||||
#header > * {
|
||||
margin: 0 0 20px 0px;
|
||||
}
|
||||
|
||||
#instructions {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
details > div {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
/* Logo et version */
|
||||
/* ==========================================================================
|
||||
Components
|
||||
========================================================================== */
|
||||
|
||||
/* --- Navigation & Header --- */
|
||||
a.logo {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
@@ -82,145 +93,13 @@ p.version > a {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Réduire la taille du texte de la colonne Objet */
|
||||
|
||||
/*
|
||||
td[data-dash-column="objet"],td[data-dash-column="titulaire_nom"],td[data-dash-column="acheteur_nom"], {
|
||||
font-size: 85%;
|
||||
}*/
|
||||
|
||||
/* Couleur des liens */
|
||||
#_pages_content a {
|
||||
color: #993333;
|
||||
}
|
||||
|
||||
/* Couleur des en-têtes */
|
||||
.dash-table-container
|
||||
.dash-spreadsheet-container
|
||||
.dash-spreadsheet-inner
|
||||
th.dash-header {
|
||||
background-color: #b33821;
|
||||
color: white;
|
||||
font-family: "Inter", sans-serif;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dash-table-container
|
||||
.dash-spreadsheet-container
|
||||
.dash-spreadsheet-inner
|
||||
.dash-filter
|
||||
input[type="text"] {
|
||||
border-color: #ccc;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 2px;
|
||||
height: 28px;
|
||||
font-family: "Fira Code";
|
||||
caret-color: #000;
|
||||
|
||||
text-align: left !important;
|
||||
padding: 1px 2px 0 2px;
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
.dash-table-container .dash-spreadsheet-container *:focus {
|
||||
}
|
||||
|
||||
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.dash-table-container p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dash-table-container
|
||||
.dash-spreadsheet-container
|
||||
.dash-spreadsheet-inner
|
||||
td
|
||||
div.dash-cell-value.cell-markdown {
|
||||
font-family: "Inter Tight";
|
||||
}
|
||||
|
||||
.dash-filter--case {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dash-tooltip,
|
||||
.dash-table-tooltip {
|
||||
color: #333;
|
||||
width: 400px !important;
|
||||
max-width: 400px !important;
|
||||
height: 150px !important;
|
||||
max-height: 150px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dash-tooltip pre,
|
||||
.dash-tooltip code {
|
||||
overflow: hidden;
|
||||
height: 150px;
|
||||
text-wrap: wrap;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
/* Menu de masquage des colonnes */
|
||||
.column-actions {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.column-header--hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show-hide {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.show-hide::before {
|
||||
background: inherit;
|
||||
content: "Colonnes affichées";
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.show-hide-menu-item > input {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* Alternance des couleurs pour les lignes */
|
||||
.marches_table table td,
|
||||
.marches_table table th {
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
.marches_table.stuck {
|
||||
position: relative;
|
||||
right: 200px;
|
||||
}
|
||||
|
||||
.marches_table .cell-table tr:nth-child(even) td {
|
||||
background-color: #feeeee;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
#header > * {
|
||||
margin: 0 0 20px 0px;
|
||||
}
|
||||
|
||||
/* Annonces */
|
||||
#announcements {
|
||||
margin: 25px 40px 0 60px;
|
||||
font-size: 90%;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
/* Page de recherche */
|
||||
|
||||
/* --- Search Page --- */
|
||||
.tagline {
|
||||
text-align: center;
|
||||
font-size: 120%;
|
||||
@@ -255,27 +134,141 @@ td[data-dash-column="objet"],td[data-dash-column="titulaire_nom"],td[data-dash-c
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 36px 0 20px 0;
|
||||
/* --- Tables (Dash & Custom) --- */
|
||||
|
||||
/* Table Menu (Exports etc) */
|
||||
.table-menu {
|
||||
font-size: 16px;
|
||||
margin: 12px 0 12px 0;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
summary > h4 {
|
||||
margin: 0;
|
||||
display: inline;
|
||||
.table-menu > * {
|
||||
margin: 8px 16px 8px 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#_pages_content {
|
||||
padding: 28px 24px 0 24px;
|
||||
#source_table {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
/* Vue acheteur/titulaire/recherche */
|
||||
.wrapper {
|
||||
display: grid;
|
||||
grid-gap: 10px;
|
||||
margin-bottom: 50px;
|
||||
justify-content: space-between;
|
||||
#source_table p {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Dash Table Overrides */
|
||||
.dash-table-container p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dash-table-container
|
||||
.dash-spreadsheet-container
|
||||
.dash-spreadsheet-inner
|
||||
th.dash-header {
|
||||
background-color: #b33821;
|
||||
color: white;
|
||||
font-family: "Inter", sans-serif;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.dash-table-container
|
||||
.dash-spreadsheet-container
|
||||
.dash-spreadsheet-inner
|
||||
td
|
||||
div.dash-cell-value.cell-markdown {
|
||||
font-family: "Inter Tight";
|
||||
}
|
||||
|
||||
/* Dash Filters */
|
||||
.dash-table-container
|
||||
.dash-spreadsheet-container
|
||||
.dash-spreadsheet-inner
|
||||
.dash-filter
|
||||
input[type="text"] {
|
||||
border-color: #ccc;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 2px;
|
||||
height: 28px;
|
||||
font-family: "Fira Code";
|
||||
caret-color: #000;
|
||||
text-align: left !important;
|
||||
padding: 1px 2px 0 2px;
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
.dash-filter--case {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Custom Marches Table */
|
||||
.marches_table table td,
|
||||
.marches_table table th {
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
.marches_table.stuck {
|
||||
position: relative;
|
||||
right: 200px;
|
||||
}
|
||||
|
||||
.marches_table .cell-table tr:nth-child(even) td {
|
||||
background-color: #feeeee;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
/* Column Visibility Menu */
|
||||
.column-actions {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.column-header--hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show-hide {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.show-hide::before {
|
||||
background: inherit;
|
||||
content: "Colonnes affichées";
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.show-hide-menu-item > input {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* Tooltips */
|
||||
.dash-tooltip,
|
||||
.dash-table-tooltip {
|
||||
color: #333;
|
||||
width: 400px !important;
|
||||
max-width: 400px !important;
|
||||
height: 150px !important;
|
||||
max-height: 150px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dash-tooltip pre,
|
||||
.dash-tooltip code {
|
||||
overflow: hidden;
|
||||
height: 150px;
|
||||
text-wrap: wrap;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
/* --- Organization Cards (Grid Items) --- */
|
||||
.org_title {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1;
|
||||
@@ -310,15 +303,7 @@ summary > h4 {
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
#announcements-nav {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* CSS for the /a-propos page Layout and Table of Contents
|
||||
Généré par Gemini 3.0 Pro */
|
||||
|
||||
/* --- About Page (A Propos) --- */
|
||||
.a-propos-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -349,20 +334,7 @@ summary > h4 {
|
||||
/* Aligns visually with the first header */
|
||||
}
|
||||
|
||||
/* Hide TOC on smaller screens */
|
||||
@media (max-width: 992px) {
|
||||
.a-propos-content {
|
||||
max-width: 100%;
|
||||
padding-right: 0;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.a-propos-toc {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styling for TOC links */
|
||||
/* TOC Links */
|
||||
.toc-link {
|
||||
display: block;
|
||||
color: #666;
|
||||
@@ -383,17 +355,50 @@ summary > h4 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Indentation for H5 levels (Level 2 in our simplified TOC) */
|
||||
/* Using specific classes if I generate them, or just generic hierarchy if nested */
|
||||
.toc-level-2 {
|
||||
margin-left: 15px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
/* Header title for TOC (optional) */
|
||||
.toc-header {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* --- Misc & Utility --- */
|
||||
#instructions {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
details > div {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
summary > h4 {
|
||||
margin: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Media Queries
|
||||
========================================================================== */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
/* Navigation */
|
||||
#announcements-nav {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* About Page */
|
||||
.a-propos-content {
|
||||
max-width: 100%;
|
||||
padding-right: 0;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.a-propos-toc {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user