/* ========================================================================= style_scientic.css — troisième thème de Genix. Reprend le système de design des frontends scientic (radiotek_api / orbital_api) : palette « laboratoire Curie » (parchemin + vert radium), panneaux en cartes (coins arrondis, ombres douces), titres serif et bannière hero en dégradé. La disposition des div (grille principale et sous-grilles) reste STRICTEMENT identique à celle des thèmes clair/sombre : seules les couleurs, bordures, ombres, rayons et polices changent. La media-query « téléphone en portrait » en bas de fichier rend ce thème responsive. ========================================================================= */ :root { --bg: #ece6d9; --bg-grad-a: #e9e2d3; --bg-grad-b: #f3eee3; --surface: #fbf8f1; --surface-2: #f1ebdd; --ink: #20201c; --ink-soft: #423f36; --muted: #756f60; --line: #e0d8c5; --line-strong: #cabfa6; --primary: #1c6b5a; /* vert radium profond */ --primary-600: #14503f; --primary-050: #e4efe8; --accent: #a8632f; /* cuivre / minerai d'uranium */ /* Couleurs dédiées aux boutons (atténuées par rapport à --primary). */ --btn-bg: #1c6b5a; --btn-bg-hover: #14503f; --btn-fg: #fff; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(40,34,20,.06), 0 6px 20px rgba(40,34,20,.07); --shadow-lg: 0 12px 34px rgba(40,34,20,.16); --ring: 0 0 0 3px rgba(28,107,90,.22); --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Georgia", "Times New Roman", serif; --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; } /* Variante sombre du thème scientic — couleurs identiques aux frontends radiotek_api / orbital_api. Activée par data-theme="dark" sur (sélecteur soleil/lune dans la bannière de titre). */ html[data-theme="dark"] { --bg: #121614; --bg-grad-a: #10140f; --bg-grad-b: #161c19; --surface: #1a2120; --surface-2: #212a28; --ink: #ecf1ee; --ink-soft: #c3cdc8; --muted: #8a948e; --line: #2b3633; --line-strong: #3a4742; --primary: #4cbf9e; /* lueur radium */ --primary-600: #62d0b0; --primary-050: #15302a; --accent: #cc8a4e; /* Boutons en sombre : vert sapin très foncé, profond et terne. */ --btn-bg: #1c332c; --btn-bg-hover:#26423a; --btn-fg: #cdd9d4; --shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4); --shadow-lg: 0 14px 46px rgba(0,0,0,.55); --ring: 0 0 0 3px rgba(76,191,158,.32); } * { box-sizing: border-box; } body { margin: 0; padding: 0; height: 100vh; font-family: var(--font); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; background: radial-gradient(1100px 560px at 82% -10%, rgba(28,107,90,.10), transparent 60%), linear-gradient(180deg, var(--bg-grad-a), var(--bg-grad-b)); background-attachment: fixed; } .center { text-align: center; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* Cases à cocher (classeur, séquences, …) : teinte radium plutôt que le bleu par défaut du navigateur. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); } h1, h2, h3, h4 { line-height: 1.25; color: var(--ink); } h1, h2 { font-family: var(--font-serif); font-weight: 600; } h3 { margin-top: 0px; color: var(--primary); /* titres de section : vert radium */ } pre { padding-left: 0px; font-family: var(--mono); } label { font-size: 0.9rem; color: var(--ink-soft); } table { border-collapse: collapse; border: 1px solid var(--line); background: var(--surface); } th, td { border: 1px solid var(--line); padding: 4px; } thead th { background: var(--surface-2); } code { background-color: var(--surface-2); border-radius: 4px; padding: 4px; font-family: var(--mono); } li { margin-bottom: 10px; } #tuto { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; height: 95%; overflow-y: auto; background: var(--surface); box-shadow: var(--shadow); } #action > div:last-child { margin-bottom: 0 !important; } #action { box-sizing: border-box; } /* ---------- Grille principale (disposition inchangée) ---------- */ .grid { display: grid; grid-gap: 10px; grid-template-columns: 1fr; width: 100vw; margin: 0; padding: 0; box-sizing: border-box; grid-template-rows: 120px 250px 250px 580px 680px 650px 500px 500px 500px 100px; grid-template-areas: "head" "search" "classeur" "action" "lig" "blot" "blast" "pcr" "orf" "foot"; } /* ---------- Panneaux : style « carte » ---------- */ #search, #classeur, #action, #lig, #blot, #blast, #pcr, #orf, #foot { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } #search { grid-area: search; padding: 4px 4px 10px 4px; } #classeur{ grid-area: classeur; padding: 4px; } #action { grid-area: action; padding: 4px; } #lig { grid-area: lig; padding: 4px; } #blot { grid-area: blot; padding: 4px; } #blast { grid-area: blast; padding: 4px; } #pcr { grid-area: pcr; padding: 4px; } #orf { grid-area: orf; padding: 4px; } #foot { grid-area: foot; padding: 10px 16px; color: var(--muted); font-size: .9rem; } /* ---------- Bannière de titre : présentation « brand » de la topbar (pastille à logo + nom + sous-titre + sélecteur clair/sombre), reprise des frontends radiotek_api / orbital_api. ---------- */ #head { grid-area: head; margin-top: 6px; display: flex; align-items: center; gap: .8rem; padding: .65rem 1.1rem; background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: saturate(160%) blur(12px); } /* Pastille à dégradé (primary -> accent), exactement comme .brand__mark. */ .brand__mark { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: var(--shadow); } .brand__text { display: flex; flex-direction: column; line-height: 1.1; } #head h1 { margin: 0; font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; letter-spacing: 0; color: var(--ink); } #head h2 { margin: 2px 0 0 0; font-family: var(--font); font-style: normal; font-weight: 400; font-size: .82rem; color: var(--muted); } #head h2 i { font-style: normal; } /* Sélecteur clair / sombre (bouton rond soleil/lune), façon .theme-toggle. */ #scientic-theme-toggle { margin-left: auto; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); transition: border-color .12s, background .12s; } #scientic-theme-toggle:hover { border-color: var(--line-strong); background: var(--surface); } #scientic-theme-toggle .icon-moon { display: none; } html[data-theme="dark"] #scientic-theme-toggle .icon-sun { display: none; } html[data-theme="dark"] #scientic-theme-toggle .icon-moon { display: block; } #action button { border-radius: var(--radius-sm); padding: 6px 10px; cursor: pointer; } #action select, #action input, #action textarea { border-radius: var(--radius-sm); padding: 6px; } .search-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 2px 2px; padding: 0px 2px; align-items: stretch; height: 180px; } #recherche, #ajouter, #showseq { height: 100%; } #recherche { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; padding: 0; margin: 0; box-sizing: border-box; } #recherche form, #ajouter form { display: flex; flex-direction: column; gap: 10px; height: 100%; width: 100%; } #recherche input, #recherche button, #ajouter button { flex: 1; padding: 12px; font-size: 1rem; border-radius: var(--radius-sm); width: 100%; box-sizing: border-box; } #showseq { padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); overflow-y: auto; box-sizing: border-box; height: 100%; } #showseq label { font-size: 0.95rem; cursor: pointer; } #showseq input[type="checkbox"] { margin-right: 6px; accent-color: var(--primary); } #ajouter { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; padding: 0; margin: 0; box-sizing: border-box; } .classeur-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 2px; padding: 0px 2px; align-items: stretch; height: 180px; } #gestion-seq, #action-seq { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; height: 100%; padding: 0; margin: 0; box-sizing: border-box; } #gestion-seq form, #action-seq form { display: flex; flex-direction: column; gap: 10px; width: 100%; height: 100%; justify-content: space-evenly; } #gestion-seq button, #action-seq button { padding: 12px; font-size: 1rem; border-radius: var(--radius-sm); width: 100%; text-align: center; flex: 1; box-sizing: border-box; } #showclasseur { padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); margin-top: 0px; height: 100%; box-sizing: border-box; max-height: 180px; overflow-y: auto; } .orf-grid, .lig-grid, .pcr-grid, .blot-grid, .blast-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; height: 100%; } #orf_param, #lig_param, #pcr_param, #blot_param, #blast_param { padding: 6px; box-sizing: border-box; margin-right: 0px; } #orf_param form, #lig_param form, #pcr_param form, #blot_param form, #blast_param form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; } #orf_param input, #orf_param button, #lig_param input, #lig_param button, #pcr_param input, #pcr_param button, #blast_param input, #blast_param button { padding: 10px; font-size: 1rem; border-radius: var(--radius-sm); width: 100%; box-sizing: border-box; } #lig_param select, #blot_param input, #blot_param select, #blot_param button { padding: 10px; font-size: 1rem; border-radius: var(--radius-sm); width: 100%; box-sizing: border-box; } #orf_show, #lig_show, #pcr_show, #blast_show, #blot_show { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); padding: 10px; margin-right: 6px; box-sizing: border-box; overflow-y: auto; overflow-x: auto; height: 100%; max-width: 100%; box-shadow: var(--shadow); } #pcr_show, #lig_show { overflow-x: hidden; } #orf_param h3, #orf_show h3, #lig_param h3, #lig_show h3, #pcr_show h3, #pcr_param h3, #blast_show h3, #blast_param h3, #blot_show h3, #blot_param h3 { text-align: center; } #blot_show img { display: block; margin: 10px auto; border-radius: var(--radius-sm); } #blot_show button { display: block; margin: 10px auto; } #action img { margin-top: 10px; max-height: 100%; border-radius: var(--radius-sm); } #orf, #lig, #pcr, #blast, #blot { overflow-y: auto; padding-bottom: 10px; } #foot { max-width: 100vw; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; } .form-row { display: flex; flex-direction: column; margin-bottom: 10px; width: 100%; max-width: 400px; } .form-row label { margin-bottom: 5px; font-weight: 600; } .form-row input, .form-row textarea { width: 100%; height: 30px; padding: 6px 8px; box-sizing: border-box; font-size: 14px; } .form-row textarea { height: 30px; resize: vertical; } #submit-new-seq { margin-top: 10px; height: 40px; width: 150px; } /* ---------- Champs de formulaire (style scientic) ---------- */ input[type="text"], input[type="email"], input[type="number"], input[type="float"], input[type="int"], select, textarea, #recherche input, #orf_param input, #lig_param input, #pcr_param input, #blast_param input, #blot_param input, #lig_param select, #blot_param select, .form-row input, .form-row textarea { font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); transition: border-color .12s, box-shadow .12s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } /* ========================================================================= Identité visuelle : boutons « radium » verts, placés après la mise en page pour gagner la cascade sur les boutons ciblés par un #id (à spécificité égale, la dernière règle l'emporte) sans toucher à leur géométrie. ========================================================================= */ button, input[type="button"], input[type="submit"], #recherche button, #ajouter button, #gestion-seq button, #action-seq button, #action button, #orf_param button, #lig_param button, #pcr_param button, #blast_param button, #blot_param button { font: inherit; font-weight: 700; cursor: pointer; color: var(--btn-fg); background: var(--btn-bg); border: 1px solid transparent; border-radius: var(--radius-sm); transition: background .12s, transform .08s, box-shadow .12s; } button:hover, input[type="button"]:hover, input[type="submit"]:hover { background: var(--btn-bg-hover); } button:active, input[type="button"]:active, input[type="submit"]:active { transform: translateY(1px); } /* ---------- Toast ---------- */ #download-toast { position: fixed; bottom: 20px; right: 20px; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity 0.3s ease; z-index: 1000; font-weight: 600; } #download-toast.show { opacity: 1; } .popup { box-sizing: border-box; } .popup-eppendorf{ background: var(--surface); color: var(--ink); padding: 25px; border-radius: var(--radius); text-align: center; min-width: 300px; font-family: var(--font); box-shadow: var(--shadow-lg); } .popup-eppendorf input{ padding: 6px; margin: 10px; width: 120px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); } .popup-eppendorf button{ padding: 6px 12px; margin: 5px; border: none; border-radius: var(--radius-sm); cursor: pointer; } /* ========================================================================= Responsive : téléphones en portrait (≤ 600px). La grille passe en hauteurs automatiques et toutes les sous-grilles multi-colonnes s'empilent. Sur desktop, rien de ceci ne s'applique : la disposition reste identique. ========================================================================= */ @media (max-width: 600px) and (orientation: portrait) { body { height: auto; font-size: 0.95rem; } #head { padding: .55rem .8rem; gap: .6rem; } .brand__mark { width: 40px; height: 40px; } #head h1 { font-size: 1.3rem; } #head h2 { font-size: .75rem; } /* Hauteurs de lignes automatiques : le contenu empilé n'est plus contraint. */ .grid { grid-template-rows: repeat(10, auto); } /* Sous-grilles à plusieurs colonnes -> une seule colonne. */ .search-grid, .classeur-grid, .orf-grid, .lig-grid, .pcr-grid, .blot-grid, .blast-grid { grid-template-columns: 1fr; height: auto; } #recherche, #ajouter, #showseq, #gestion-seq, #action-seq, #showclasseur { height: auto; } #showseq, #showclasseur { max-height: 240px; } #orf_param form, #lig_param form, #pcr_param form, #blot_param form, #blast_param form { margin-bottom: 20px; } #orf_show, #lig_show, #pcr_show, #blast_show, #blot_show { height: auto; min-height: 200px; margin-right: 0; } #orf, #lig, #pcr, #blast, #blot { overflow-y: visible; } }