function starthtml()
{
+$theme="light";
$curtime=time(); //Loading time stamp
$STR = <<<EOT
<script defer src="translations.js?v={$curtime}"></script>
<script defer src="directives.js?v={$curtime}"></script>
<script defer src="coloration.js?v={$curtime}"></script>
-<style>
-.table-filter-row {
- display:flex;
- gap:8px;
- align-items:center;
- margin-bottom:6px;
- flex-wrap: wrap;
- }
-.filter-col {
- cursor:pointer;
- color:#003;
- background:#f7f7ff;
- }
-.filter-col.active {
- background:blue;
- }
-.highlight {
- background:#ff9;
- color:#000;
- }
-</style>
+<link rel="stylesheet" href="theme.css?v=$curtime">
</HEAD>
-<BODY>
+<BODY data-theme={$theme}>
EOT;
return $STR;
<table class="table-userlist" WIDTH="100%" BORDER="1" CellSpacing="0">
<TR>
<TH align=center>Num</TH>
-<TH align=center><span class="translatable" trkey="Status">Status</span></TH>
-<TH align=center><span class="translatable" trkey="Date">Date</span></TH>
-<TH align=center>IP</TH>
-<TH align=center><span class="translatable" trkey="Reverse IP">Reverse IP</span></TH>
+<TH align=center class="filter-col" trkey="Status">
+<span class="translatable">Status</span>
+</TH>
+<TH align=center class="filter-col" trkey="Date">
+<span class="translatable">Date</span>
+</TH>
+<TH align=center class="filter-col" trkey="IP">
+<span>IP</span>
+</TH>
+<TH align=center class="filter-col" trkey="Reverse IP">
+<span class="translatable">Reverse IP</span>
+</TH>
<TH align=center class="filter-col" trkey="Originator">
<span class="translatable">Originator</span>
</TH>
-<TH align=center><span class="filter-col translatable" trkey="Recipient">Recipient</span></TH>
-<TH align=center><span class="translatable" trkey="Subject">Subject</span></TH>
+<TH align=center class="filter-col" trkey="Recipient">
+<span class="translatable">Recipient</span>
+</TH>
+<TH align=center class="filter-col" trkey="Subject">
+<span class="translatable">Subject</span>
+</TH>
</TR>
$line
</Table>
--- /dev/null
+/*
+ * theme.css
+ * Deux thèmes : light (défaut) et dark
+ * Conçu pour être inclus depuis starthtml()
+ */
+
+/* =========================
+ Thème par défaut : LIGHT
+ ========================= */
+:root {
+ /* Couleurs générales */
+ --bg-main: #ffffff;
+ --fg-main: #000000;
+
+ /* En-têtes / tableaux */
+ --bg-header: #f2f4f8;
+ --fg-header: #002244;
+
+ /* États */
+ --bg-active: #53CABA; /* sélection colonne */
+ --bg-hover: #ddeeff;
+
+ /* Bordures */
+ --border-main: #cccccc;
+}
+
+/* =========================
+ Thème DARK
+ ========================= */
+[data-theme="dark"] {
+ --bg-main: #121212;
+ --fg-main: #e0e0e0;
+
+ --bg-header: #1e1e2e;
+ --fg-header: #9ecbff;
+
+ --bg-active: #2a7f78;
+ --bg-hover: #2a2a40;
+
+ --border-main: #333333;
+}
+
+/* =========================
+ Styles génériques
+ ========================= */
+body {
+ margin: 0;
+ padding: 0;
+ background: var(--bg-main);
+ color: var(--fg-main);
+ font-family: sans-serif;
+}
+
+/* =========================
+ Table / colonnes filtrables
+ ========================= */
+
+th.filter-col {
+ background: var(--bg-header);
+ color: var(--fg-header);
+ border: 1px solid var(--border-main);
+ padding: 6px 10px;
+ cursor: pointer;
+ user-select: none;
+}
+
+th.filter-col:hover {
+ background: var(--bg-hover);
+}
+
+th.filter-col.active {
+ background: var(--bg-active);
+}
+
+/* Le texte interne hérite automatiquement */
+th.filter-col span {
+ pointer-events: none; /* clic toujours sur le TH */
+}
+
vps2: / jmp / mailleur / commitdiff