[
{
"id": "template_1782997901397",
"Value": {
"name": "Styled Dropdown List",
"description": "Add a custom style to the N4V Dropdown List.",
"type": "listederoul",
"target": "listederoul",
"settings": {
"Extended_Parameters": {
"custom0CSS": "/* closed list */\nselect#list_1 {\n appearance: none !important;\n -webkit-appearance: none !important;\n font-family: arial !important;\n font-size: 13px !important;\n color: #001740 !important;\n background-color: #ffffff !important;\n border: 1px solid #D6DEE9 !important;\n border-radius: 10px !important;\n padding: 8px 38px 8px 14px !important;\n min-width: 200px !important;\n box-shadow: 0 1px 2px rgba(0,23,64,.06) !important;\n cursor: pointer !important;\n transition: border-color .15s ease, box-shadow .15s ease !important;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C7A99' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\") !important;\n background-repeat: no-repeat !important;\n background-position: right 12px center !important;\n}\nselect#list_1:hover { border-color: #94A3B8 !important; }\nselect#list_1:focus {\n outline: none !important;\n border-color: #002157 !important;\n box-shadow: 0 0 0 3px #00215722 !important;\n}\n\n\nselect#list_1.optionGroup { font-weight: 700 !important; font-style: normal !important; }\nselect#list_1.optionChild,\nselect#list_1.optionAllval { font-weight: 600 !important; }\n\n/* Liste ouverte (stylable partiellement sur select natif) */\n#list_1 option { font-family: arial !important; font-size: 13px !important; padding: 6px 10px !important; background: #ffffff !important; }\n#list_1 .optionAllval { color: #001740 !important; font-weight: 700 !important; }\n#list_1 .optionGroup {\n color: #5C7A99 !important;\n font-weight: 700 !important;\n font-style: normal !important;\n font-size: 11px !important;\n text-transform: uppercase !important;\n letter-spacing: .6px !important;\n background: #F1F5FA !important;\n}\n#list_1 .optionChild { color: #334155 !important; padding-left: 18px !important; }\n#list_1 option:checked { background: #00215714 !important; color: #002157 !important; }"
}
},
"createdAt": "2026-07-02T13:11:41.387Z",
"version": 2
}
},
{
"id": "template_1783528609856",
"Value": {
"name": "Styled Multi Select List",
"description": "Add a custom style to the N4V Multi Selection List",
"type": "listemulti",
"target": "listemulti",
"settings": {
"Extended_Parameters": {
"custom0CSS": ":root{\n\t--accent: #008CB2;\n\t--accent-hover: #006e8c;\n\t--accent-soft: #e6f5f9;\n\t--accent-text: #075e79;\n\t--border: #e2e8f0;\n\t--text: #334155;\n\t--text-soft: #94a3b8;\n\t--danger: #d70947;\n\t--radius: 10px;\n}\nhtml,body{height: 100% !important;}\nbody{\n\tbackground-color: #ffffff !important;\n\tbackground-attachment: fixed;\n\toverflow: hidden;\t\n\tfont-family: \"Segoe UI\", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;\n\tpadding: 6px 8px;\n}\n\n#title {\n\tcolor: #0f172a;\n\tfont-weight: 600;\n\tfont-size: 13px;\n\tletter-spacing: .2px;\n}\n#subtitle {\n\tcolor: var(--text-soft);\n\tfont-weight: normal;\n\tfont-size: 10px;\n}\n#liste {\n\tcolor: var(--text);\n\tfont-size: 12px;\n\tfont-family: inherit;\n}\n.divfilters label {\n\tcolor: var(--text);\n\tfont-size: 12px;\n}\n\n#liste_val {\n\tborder: 1px solid var(--border);\n\tborder-radius: var(--radius);\n\tbackground: #ffffff;\n\toverflow-y: auto;\n\tpadding: 4px;\n\tbox-shadow: 0 1px 3px rgba(15,23,42,.06);\n\tscrollbar-width: thin;\n\tscrollbar-color: #cbd5e1 transparent;\n}\n#liste_val::-webkit-scrollbar { width: 8px; }\n#liste_val::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }\n#liste_val::-webkit-scrollbar-thumb:hover { background: var(--text-soft); }\n\n#liste_val .chk_item {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 3px 8px;\n\tmargin: 1px 0;\n\tborder-radius: 6px;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tcursor: pointer;\n\tfont-weight: normal;\n\tuser-select: none;\n\ttransition: background .12s ease;\n}\n#liste_val .chk_item:hover {\n\tbackground: #f1f5f9;\n}\n\n#liste_val .chk_item:has(input:checked) {\n\tbackground: var(--accent-soft);\n\tcolor: var(--accent-text);\n}\n#liste_val .chk_item input[type=\"checkbox\"] {\n\twidth: auto !important;\n\tmargin: 0 8px 0 0;\n\tflex-shrink: 0;\n\tcursor: pointer;\n\taccent-color: var(--accent);\n}\n#liste_val .chk_all {\n\tposition: sticky;\n\ttop: -4px;\n\tz-index: 1;\n\tbackground: #ffffff;\n\tborder-bottom: 1px solid var(--border);\n\tborder-radius: 0;\n\tfont-style: italic;\n\tcolor: var(--text-soft);\n}\n#liste_val .chk_all:has(input:checked) {\n\tbackground: #ffffff;\n\tcolor: var(--accent-text);\n}\n\n\n#search {\n\theight: 28px;\n\tborder: 1px solid var(--border);\n\tborder-radius: 8px;\n\tpadding: 0 24px 0 10px !important;\n\tfont-size: 12px;\n\toutline: none;\n\ttransition: border-color .12s ease, box-shadow .12s ease;\n}\n#search:focus {\n\tborder-color: var(--accent);\n\tbox-shadow: 0 0 0 3px rgba(0,140,178,.15);\n}\n#search_x {\n\tposition: absolute;\n\tright: 8px;\n\ttop: 5px;\n\tline-height: 18px;\n\tcursor: pointer;\n\tcolor: var(--text-soft);\n\tfont-size: 14px;\n\tdisplay: none;\n\tuser-select: none;\n}\n#search_x:hover { color: var(--text); }\n#selzone {\n\tdisplay: flex;\n\talign-items: center;\n\theight: 22px;\n\tmargin: 4px 0 2px 0;\n}\n#sel_items {\n\tflex: 1;\n\tmin-width: 0;\n\toverflow-x: hidden;\n\twhite-space: nowrap;\n\tcolor: var(--text-soft);\n\tfont-size: 10px;\n}\n.sel_item {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tbackground: var(--accent-soft);\n\tcolor: var(--accent-text);\n\tborder-radius: 20px;\n\tpadding: 1px 7px;\n\tmargin-right: 4px;\n}\n.sel_sep { display: none; }\n.sel_x {\n\tcursor: pointer;\n\tcolor: #5ba7bd;\n\tfont-style: normal;\n\tfont-size: 12px;\n\tline-height: 1;\n\tmargin-left: 4px;\n}\n.sel_x:hover { color: var(--danger); }\n.sel_arrow {\n\tdisplay: none;\n\tcursor: pointer;\n\tcolor: var(--text-soft);\n\tfont-size: 9px;\n\tline-height: 22px;\n\tpadding: 0 4px;\n\tuser-select: none;\n\tflex-shrink: 0;\n}\n.sel_arrow:hover { color: var(--text); }\n\n#divbuttons {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 5px;\n\tmargin-top: 4px;\n}\n#liste .buttons {\n\tbackground: var(--accent);\n\tcolor: #ffffff;\n\tborder: none;\n\tborder-radius: 8px;\n\tpadding: 5px 0;\n\tmargin: 0;\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: background .15s ease, transform .05s ease;\n}\n#liste .buttons:hover {\n\tbackground: var(--accent-hover);\n\tcolor: #ffffff;\n}\n#liste .buttons:active { transform: scale(.97); }\n\n#clean_btn, #reset_btn {\n\tbackground: #f1f5f9;\n\tcolor: var(--text);\n}\n#clean_btn:hover, #reset_btn:hover {\n\tbackground: #e2e8f0;\n\tcolor: var(--text);\n}\n#infoprog {\n\tmargin-left: 8px;\n\tfont-size: 10px;\n\tcolor: var(--text-soft);\n\twhite-space: nowrap;\n}\n\n.divfilters{ margin-top: 5px;}\n.filter_lists {\n\tborder: 1px solid var(--border);\n\tborder-radius: 8px;\n}\n.filter_lists option:first-child { font-style: italic; color: #888; }\n#liste select:disabled { background: transparent; }\n#liste input{\n\tpadding: 0 0 0 0.25em;\n\tbackground: #ffffff;\n\twidth: 100%;\n}\n\n#liste_val .chk_item:hover {\n\tcolor: #121212;\n}"
}
},
"createdAt": "2026-07-08T16:36:49.851Z",
"version": 2,
"updatedAt": "2026-07-10T15:27:13.617Z"
}
},
{
"id": "template_1782996106947",
"Value": {
"name": "Styled Trend/Progress Tile",
"description": "Add a custom style to the N4V Trend & Progress Tile.",
"type": "bstrendtiles",
"target": "bstrendtiles",
"settings": {
"Extended_Parameters": {
"custom0CSS": ":root{\n --radius:18px;\n --shadow:0 6px 20px rgba(15,23,42,.12);\n --shadow-hover:0 14px 34px rgba(15,23,42,.22);\n --label:rgba(255,255,255,.85);\n --footer-bg:rgba(0,0,0,.16);\n --divider:rgba(255,255,255,.18);\n --up:#34d399; --down:#fb7185; --eq:#38bdf8; /* flèches de tendance */\n --font:\"Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n}\n\n/* fond de page : voile très léger (optionnel, supprimez la ligne si gênant) */\nbody{ background-image: radial-gradient(80% 60% at 50% -10%, rgba(99,102,241,.06), transparent 60%) !important; }\n\n/* ---- La carte ---- */\n.tile-progress{\n box-sizing: border-box;\n border-radius: var(--radius) !important;\n overflow: hidden; /* coins arrondis conservés sur les enfants */\n border: 1px solid rgba(255,255,255,.18);\n box-shadow: var(--shadow);\n /* surcouche de profondeur : marche sur n'importe quelle couleur tile-N */\n background-image:\n radial-gradient(120% 80% at 18% 0%, rgba(255,255,255,.28), transparent 55%),\n linear-gradient(160deg, rgba(255,255,255,.10), rgba(0,0,0,.22));\n transition: transform .25s cubic-bezier(.23,1,.32,1), box-shadow .25s ease;\n}\n.tile-progress:hover{\n transform: translateY(-4px);\n box-shadow: var(--shadow-hover) !important; /* écrase le hover coloré d'origine */\n}\n.tile-progress:active{ transform: translateY(-1px); }\n\n/* ---- En-tête transformé en libellé ---- */\n.tile-progress .tile-header{\n height:auto !important;\n padding:18px 16px 4px !important;\n font-family:var(--font) !important;\n font-size:13px !important;\n font-weight:600 !important;\n letter-spacing:.08em;\n text-transform:uppercase;\n color:var(--label) !important;\n}\n\n/* ---- Indicateur principal ---- */\n.tile-main-ind{\n font-family:var(--font) !important;\n font-size:40px !important;\n font-weight:700 !important;\n line-height:1.05 !important;\n letter-spacing:-.02em;\n font-variant-numeric: tabular-nums; /* chiffres alignés */\n padding:2px 16px 16px !important;\n text-shadow:0 1px 2px rgba(0,0,0,.18);\n}\n\n/* ---- Barre de progression (si présente) ---- */\n.tile-progress .tile-progressbar{ height:3px !important; }\n.tile-progress .tile-progressbar span{\n background:rgba(255,255,255,.95) !important;\n box-shadow:0 0 8px rgba(255,255,255,.6);\n}\n\n/* ---- Pied de tuile ---- */\n.tile-progress .tile-footer{\n height:auto !important;\n padding:14px 10px !important;\n background:var(--footer-bg) !important;\n border-top:1px solid rgba(255,255,255,.12);\n border-radius:0 !important;\n -webkit-backdrop-filter: blur(2px);\n backdrop-filter: blur(2px);\n}\n/* séparateurs verticaux entre les colonnes visibles */\n.bloc_prev,.bloc_var,.bloc_trend{ position:relative; padding:0 6px; }\n.bloc_var::before,.bloc_trend::before{\n content:\"\"; position:absolute; left:0; top:50%; transform:translateY(-50%);\n height:60%; width:1px; background:var(--divider);\n}\n.title_prev,.title_var,.title_trend{\n font-family:var(--font) !important; font-size:10px !important;\n text-transform:uppercase; letter-spacing:.06em; opacity:.8; margin-bottom:3px;\n}\n.mes_prev,.mes_var,.mes_trend{\n font-family:var(--font) !important; font-size:14px !important;\n font-weight:600 !important; font-variant-numeric: tabular-nums;\n}\n.mes_trend img{ filter: drop-shadow(0 0 4px rgba(0,0,0,.25)); }\n\n/* ---- Flèches CSS modernisées (autres tuiles) ---- */\n.arrow-up,.arrow-down,.arrow-eq{ width:18px; height:18px; }\n.arrow-pos{ background-color:var(--up) !important; filter:drop-shadow(0 0 5px var(--up)); }\n.arrow-neg{ background-color:var(--down) !important; filter:drop-shadow(0 0 5px var(--down)); }\n.arrow-neutre{ background-color:var(--eq) !important; filter:drop-shadow(0 0 5px var(--eq)); }\n\n/* ---- Titre / sous-titre ---- */\n#title-table{ padding:14px 0 6px; }\n#title{ font-family:var(--font) !important; font-size:16px !important; font-weight:700 !important; color:#0f172a !important; letter-spacing:-.01em; }\n#subtitle{ font-family:var(--font) !important; font-size:11px !important; color:#64748b !important; }"
}
},
"createdAt": "2026-07-02T12:41:45.371Z",
"version": 2
}
},
{
"id": "template_1782988614879",
"Value": {
"name": "Styled Chart Tile",
"description": "Add a custom style to the N4V Chart Tile. The left border is colored as the trend.",
"type": "charttile",
"target": "charttile",
"settings": {
"Extended_Parameters": {
"palette0choice": "custom",
"pal0custom": "[\"#002157\",\"#E40109\",\"#001740\",\"#94A3B8\",\"#F5A623\",\"#7BAFD4\",\"#10836B\",\"#5C7A99\",\"#8B6F47\",\"#64748B\"]",
"custom0CSS": ".kpi { padding-left: 1.5em !important; } .kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #002157; z-index: 2; } .kpi[data-trend='up']::before { background: #10836B; } .kpi[data-trend='down']::before { background: #E40109; } .kpi[data-trend='warning']::before { background: #E40109; } .kpi[data-trend='neutral']::before { background: #5C7A99; } .kpi__maintitle { text-transform: uppercase !important; letter-spacing: 0.8px !important; font-weight: 700 !important; color: #64748B !important; } .kpi__subtitle { font-style: normal !important; color: #64748B !important; } .kpi__value { color: #001740 !important; } .kpi .kpi__delta { background: #00215714 !important; border-color: #00215733 !important; }\n.kpi[data-trend='up'] .kpi__delta { background: #10836B14 !important; border-color: #10836B33 !important; }\n.kpi[data-trend='down'] .kpi__delta,\n.kpi[data-trend='warning'] .kpi__delta { background: #E4010914 !important; border-color: #E4010933 !important; }\n.kpi[data-trend='neutral'] .kpi__delta { background: #5C7A9914 !important; border-color: #5C7A9933 !important; }",
"bkg0color": {
"color": {
"rgb": "255,255,255",
"alpha": 255
}
},
"width0border": "1",
"radius0border": "16",
"border0color": {
"color": {
"rgb": "31,41,55",
"alpha": 255
}
},
"main0title0font": {
"face": "Arial",
"size": 16,
"bold": false,
"italic": false,
"underline": false,
"strike": false,
"color": "110,116,139"
},
"subtitlet0font": {
"face": "Arial",
"size": 12,
"bold": false,
"italic": false,
"underline": false,
"strike": false,
"color": "110,116,139"
},
"pos0tend0col": {
"color": {
"rgb": "16,131,107",
"alpha": 255
}
},
"symb0tend0pos": "up5",
"neg0tend0col": {
"color": {
"rgb": "228,1,9",
"alpha": 255
}
},
"symb0tend0neg": "up5"
}
},
"createdAt": "2026-07-02T10:36:54.864Z",
"version": 2,
"updatedAt": "2026-07-02T11:36:25.032Z"
}
},
{
"id": "template_1782988479448",
"Value": {
"name": "Styled Chart Tile 2",
"description": "Add a custom dark glass style to the N4V Chart Tile.",
"type": "charttile",
"target": "charttile",
"settings": {
"Extended_Parameters": {
"custom0CSS": ".kpi {\n background: linear-gradient(160deg,#0E2A54 0%,#001740 55%,#000D26 100%) !important;\n border: 1px solid rgba(255,255,255,.14) !important;\n border-radius: 20px !important;\n}\n.kpi::before {\n content: '' !important; position: absolute !important; inset: 0 !important;\n pointer-events: none !important;\n background: radial-gradient(60% 55% at 88% 0%, #00215745, transparent 70%) !important;\n}\n.kpi[data-trend='up']::before { background: radial-gradient(60% 55% at 88% 0%, #10836B45, transparent 70%) !important; }\n.kpi[data-trend='down']::before { background: radial-gradient(60% 55% at 88% 0%, #E4010938, transparent 70%) !important; }\n\n.kpi__maintitle { text-transform: uppercase !important; letter-spacing: 1.2px !important; font-weight: 700 !important; font-size: 12px !important; color: #8FA6CC !important; }\n.kpi__subtitle { font-style: normal !important; color: #64789B !important; }\n.kpi__value { color: #ffffff !important; }\n\n.kpi__delta {\n background: rgba(255,255,255,.08) !important;\n border: 1px solid rgba(255,255,255,.18) !important;\n border-radius: 999px !important;\n backdrop-filter: blur(4px);\n}\n.kpi[data-trend='up'] .kpi__delta { color: #4ADE9F !important; }\n.kpi[data-trend='down'] .kpi__delta { color: #FF7B7B !important; }\n\n/* sparkline lisible sur fond sombre (le navy #002157 disparaît sinon) */\n#chart-dark .highcharts-graph { stroke: #7BAFD4 !important; }\n#chart-dark .highcharts-area { fill: #7BAFD4 !important; fill-opacity: .15 !important; }\n#chart-dark .highcharts-point { fill: #7BAFD4 !important; }"
}
},
"createdAt": "2026-07-02T10:34:39.437Z",
"version": 2,
"updatedAt": "2026-07-02T10:44:10.640Z"
}
},
{
"id": "template_1782986946046",
"Value": {
"name": "Styled Chart Tile 3",
"description": "Add a custom neo minimal style to the N4V Chart Tile.",
"type": "charttile",
"target": "charttile",
"settings": {
"Extended_Parameters": {
"custom0CSS": ".kpi {\n background: #FDFDFC !important;\n border: none !important;\n border-radius: 24px !important;\n}\n.kpi:hover {\n transform: translateY(-3px) !important;\n}\n\n.kpi__maintitle { text-transform: uppercase !important; letter-spacing: 1.2px !important; font-weight: 700 !important; font-size: 12px !important; color: #94A3B8 !important; }\n.kpi__subtitle { font-style: normal !important; color: #64748B !important; }\n\n.kpi__value {\n background: linear-gradient(120deg, #001740, #2F5FA3) !important;\n -webkit-background-clip: text !important; background-clip: text !important;\n -webkit-text-fill-color: transparent !important;\n letter-spacing: -1px !important;\n}\n\n.kpi__delta {\n border: none !important;\n border-radius: 999px !important;\n color: #ffffff !important;\n background: #5C7A99 !important;\n}\n.kpi[data-trend='up'] .kpi__delta { background: #10836B !important; }\n.kpi[data-trend='down'] .kpi__delta,\n.kpi[data-trend='warning'] .kpi__delta { background: #E40109 !important; }"
}
},
"createdAt": "2026-07-02T10:09:06.033Z",
"version": 2,
"updatedAt": "2026-07-02T10:44:10.640Z"
}
},
{
"id": "template_1782748369451",
"Value": {
"name": "Styled Vertical Scroll Table",
"description": "Add a custom style to the N4V Vertical Scroll Table",
"type": "csstablev",
"target": "csstablev",
"settings": {
"Extended_Parameters": {
"custom0CSS": ":root{\n --accent:#008cb2; /* reprend votre teal (en-tête / pied) */\n --accent-2:#00a8d6; /* haut du dégradé d'en-tête */\n --txt:#334155; /* texte des cellules */\n --muted:#64748b; /* sous-titre */\n --row-alt:rgba(2,132,199,.045); /* zébrage très léger */\n --line:rgba(15,23,42,.06); /* séparateurs de lignes */\n --hover:rgba(2,132,199,.12); /* survol (vos classes JS) */\n --sel:#0ea5e9; /* sélection moderne */\n --radius:14px;\n --font:\"Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n}\n\n/* ---- Titre / sous-titre ---- */\n#title{ font-family:var(--font) !important; font-size:16px !important; font-weight:700 !important; color:#0f172a !important;}\n#subtitle{ font-family:var(--font) !important; font-size:11px !important; color:var(--muted) !important;}\n\n/* ---- Zone scrollable transformée en carte ---- */\n#div-table{\n border:1px solid var(--line);\n border-radius:var(--radius);\n box-shadow:0 6px 24px rgba(15,23,42,.06);\n scrollbar-width:thin;\n scrollbar-color:#cbd5e1 transparent;\n}\n#div-table::-webkit-scrollbar{ width:10px; height:10px; }\n#div-table::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px; border:2px solid #fff; }\n#div-table::-webkit-scrollbar-track{ background:transparent; }\n\n/* ---- Base table ---- */\ntable{ border-collapse:separate !important; border-spacing:0 !important; font-family:var(--font); }\n\n/* ---- En-tête flottant ---- */\nthead{ position:sticky; top:0; z-index:2; }\nthead th{\n background:linear-gradient(180deg, var(--accent-2), var(--accent)) !important;\n color:#fff !important;\n font-family:var(--font) !important;\n font-size:11px !important;\n font-weight:700 !important;\n letter-spacing:.06em;\n text-transform:uppercase;\n padding:12px 14px !important;\n border:0 !important;\n white-space:nowrap;\n box-shadow:0 2px 6px rgba(15,23,42,.12);\n}\nthead th:first-child{ border-top-left-radius:var(--radius); }\nthead th:last-child{ border-top-right-radius:var(--radius); }\n\n/* ---- Cellules ---- */\ntbody td{\n color:var(--txt) !important;\n font-family:var(--font) !important;\n font-size:12.5px !important;\n padding:11px 14px !important;\n border:0 !important;\n border-bottom:1px solid var(--line) !important;\n}\ntbody tr:last-child td{ border-bottom:0 !important; }\n\n/* colonnes calculées : on conserve leur texte blanc (fond coloré attendu) */\n.measure_calc_1,.measure_calc_2{ color:#fff !important; }\n\n/* ---- Zébrage modernisé (on garde vos sélecteurs) ---- */\n.table-striped>tbody>tr:nth-child(odd){ background-color:var(--row-alt) !important; }\n.table-striped>tbody>tr:nth-child(even){ background-color:#fff !important; }\n\n/* ---- Survol ---- */\n.hover, .hover_c{ background-color:var(--hover) !important; }\n\n/* ---- Sélection ---- */\n.selected{\n background-color:var(--sel) !important;\n color:#fff !important;\n box-shadow:inset 3px 0 0 #0369a1;\n}\n\n/* ---- Pied (totaux) ---- */\ntfoot{ position:sticky; bottom:0; }\ntfoot td, tfoot th{\n background:var(--accent) !important;\n color:#fff !important;\n font-weight:700 !important;\n border:0 !important;\n padding:11px 14px !important;\n}"
}
},
"createdAt": "2026-06-29T15:52:49.449Z",
"version": 2
}
},
{
"id": "template_1782748394426",
"Value": {
"name": "Styled Formular",
"description": "Add a custom style to the N4V Formular (Input Text)",
"type": "csstablev",
"target": "csstablev",
"settings": {
"Extended_Parameters": {
"custom0CSS": ":root{\n --accent:#008cb2; --accent-d:#0e7490;\n --txt:#334155; --muted:#64748b;\n --line:rgba(15,23,42,.16);\n --ring:rgba(2,132,199,.18);\n --font:\"Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n}\n\n/* ---- Titres ---- */\n#title-table{ font-family:var(--font) !important; font-size:16px !important; font-weight:700 !important; color:#0f172a !important; }\n#subtitle-table{ font-family:var(--font) !important; font-size:11px !important; color:var(--muted) !important; }\n\n/* ---- Lignes label + champ ---- */\n.input-group.lbl_input{\n display:flex !important; align-items:center; gap:12px;\n position:relative; padding:6px 6px 6px 5px;\n}\n.form-label{\n font-family:var(--font) !important; font-size:12px !important;\n font-weight:600 !important; color:#475569 !important;\n flex:0 0 140px; width:140px; margin:0 !important; white-space:nowrap;\n}\n\n/* ---- Champs texte / nombre / liste / date / zone de texte ---- */\n.input_text,\ninput.form-control, textarea.form-control, select.input_text{\n font-family:var(--font) !important; font-size:13px !important;\n color:var(--txt) !important;\n border:1px solid var(--line) !important;\n border-radius:8px !important;\n background-color:#fff !important; /* ← était background:#fff !important */\n box-shadow:none !important;\n transition:border-color .15s ease, box-shadow .15s ease;\n}\ninput.form-control, select.input_text, input[type=\"date\"]{\n height:36px !important; padding:6px 12px !important; flex:1;\n}\ntextarea.form-control{\n min-height:64px !important;\n padding:8px 12px !important;\n resize:vertical; /* la largeur est gérée par le flex */\n flex:1;\n}\n/* focus : anneau accent (remplace le halo Bootstrap) */\n.form-control:focus, .input_text:focus, select.input_text:focus{\n border-color:var(--accent) !important;\n box-shadow:0 0 0 3px var(--ring) !important;\n outline:none !important;\n}\n\n/* ---- Liste déroulante : chevron custom ---- */\nselect.input_text{\n -webkit-appearance:none; -moz-appearance:none; appearance:none;\n padding-right:32px !important;\n background-color:#fff !important;\n background-image:url(\"data:image/svg+xml;utf8,\") !important;\n background-repeat:no-repeat !important;\n background-position:right 11px center !important;\n}\n\n/* ---- Cases & radios : teinte native ---- */\ninput[type=\"checkbox\"], input[type=\"radio\"]{\n accent-color:var(--accent);\n width:16px !important; height:16px !important;\n cursor:pointer; box-shadow:none !important;\n}\n.radio_bouton{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:2px 4px; }\n.lib-radio, .radio_bouton .input_text{\n font-family:var(--font) !important; color:var(--txt) !important;\n border:0 !important; background:transparent !important;\n}\n\n/* ---- Curseur (range) refait ---- */\ninput[type=\"range\"].form-control{\n -webkit-appearance:none; appearance:none;\n height:6px !important; padding:0 !important; border:0 !important;\n border-radius:999px !important; background:#e2e8f0 !important;\n box-shadow:none !important; flex:1;\n}\ninput[type=\"range\"]::-webkit-slider-thumb{\n -webkit-appearance:none; appearance:none;\n width:16px; height:16px; border-radius:50%;\n background:var(--accent); border:2px solid #fff;\n box-shadow:0 1px 4px rgba(15,23,42,.3); cursor:pointer;\n}\ninput[type=\"range\"]::-moz-range-thumb{\n width:16px; height:16px; border-radius:50%;\n background:var(--accent); border:2px solid #fff; cursor:pointer;\n}\ninput[type=\"range\"]::-moz-range-track{ height:6px; border-radius:999px; background:#e2e8f0; }\n#rangeValue.input_text{\n min-width:34px; text-align:center; font-weight:600 !important;\n color:var(--accent) !important; margin-left:10px !important;\n}\n\n/* ---- Pastille de confirmation ✔ ---- */\n.checkmark{ left:auto !important; right:8px !important; color:#16a34a !important; }\n\n/* ---- Boutons (Annuler = fantôme, OK = plein, par position) ---- */\n.input_btns{ display:flex !important; justify-content:flex-end; gap:8px; margin-top:8px; }\n.input_btn, .btn:focus{\n border:0 !important; border-radius:8px !important;\n padding:7px 18px !important; font-family:var(--font) !important;\n font-weight:600 !important; font-size:12px !important;\n transition:all .15s ease; cursor:pointer;\n}\n.input_btns .input_btn:last-child{ /* OK */\n background:var(--accent) !important; color:#fff !important;\n}\n.input_btns .input_btn:last-child:hover{\n background:var(--accent-d) !important; color:#fff !important;\n box-shadow:0 4px 12px rgba(2,132,199,.35);\n}\n.input_btns .input_btn:first-child{ /* Annuler */\n background:transparent !important; color:var(--accent) !important;\n box-shadow:inset 0 0 0 1px rgba(2,132,199,.45);\n}\n.input_btns .input_btn:first-child:hover{\n background:rgba(2,132,199,.08) !important; color:var(--accent) !important;\n}"
}
},
"createdAt": "2026-06-29T15:53:14.425Z",
"version": 2
}
},
{
"id": "template_1782748511024",
"Value": {
"name": "Styled Sparkline",
"description": "Add a custom style to the N4V Sparkline",
"type": "highchartsparkline",
"target": "highchartsparkline",
"settings": {
"Extended_Parameters": {
"custom0CSS": ":root{\n --accent:#008cb2; --accent-2:#00a8d6;\n --txt:#334155; --muted:#64748b;\n --line:rgba(15,23,42,.06);\n --hover:rgba(2,132,199,.10);\n --sel:#0ea5e9;\n --radius:14px;\n --font:\"Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n}\n\n/* ---- Titre / sous-titre ---- */\n#title{ font-family:var(--font) !important; font-size:16px !important; font-weight:700 !important; color:#0f172a !important; }\n#subtitle{ font-family:var(--font) !important; font-size:11px !important; color:var(--muted) !important; }\n\n/* ---- Zone scrollable = carte ---- */\n#div-table{\n border:1px solid var(--line); border-radius:var(--radius);\n box-shadow:0 6px 24px rgba(15,23,42,.06);\n scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent;\n}\n#div-table::-webkit-scrollbar{ width:10px; height:10px; }\n#div-table::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px; border:2px solid #fff; }\n#div-table::-webkit-scrollbar-track{ background:transparent; }\n\n/* ---- Bordures ---- */\n#table-sparkline th, #table-sparkline td{\n border-left:0 !important; border-right:0 !important;\n border-bottom:1px solid var(--line) !important;\n vertical-align:middle !important;\n}\n#table-sparkline tbody tr:last-child td,\n#table-sparkline tbody tr:last-child th{ border-bottom:0 !important; }\n\n/* ---- En-tête flottant ---- */\n#table-sparkline thead th{\n background:linear-gradient(180deg, var(--accent-2), var(--accent)) !important;\n color:#fff !important; font-family:var(--font) !important;\n font-size:11px !important; font-weight:700 !important;\n letter-spacing:.06em; text-transform:uppercase;\n padding:12px 14px !important;\n border-top:0 !important; border-bottom:0 !important;\n box-shadow:0 2px 6px rgba(15,23,42,.12); /* ombre au scroll */\n}\n\n/* ---- Cellules ---- */\n#table-sparkline th.th_left{\n font-family:var(--font) !important; font-size:12.5px !important;\n font-weight:600 !important; color:var(--txt) !important;\n padding:9px 14px !important; cursor:pointer;\n transition:color .15s ease;\n}\n#table-sparkline tbody tr:hover th.th_left{ color:var(--accent) !important; }\n#table-sparkline td.td_mes1, #table-sparkline td.td_mes2{\n font-family:var(--font) !important; font-size:12.5px !important;\n color:var(--txt) !important; padding:9px 14px !important;\n text-align:right !important; font-variant-numeric:tabular-nums;\n cursor:pointer;\n}\n#table-sparkline td[data-sparkline]{ padding:4px 8px !important; text-align:center !important; }\n\n/* survol de ligne */\n#table-sparkline tbody tr:hover > *{ background-color:var(--hover) !important; }\n\n/* ---- Sélection (remplace le rouge vif + text-shadow) ---- */\n.val_selected{\n background-color:var(--sel) !important; color:#fff !important;\n text-shadow:none !important; box-shadow:inset 3px 0 0 #0369a1;\n}\n\n/* ---- Infobulles des sparklines ---- */\n.highcharts-tooltip-box{ fill:#fff !important; stroke:var(--line) !important; stroke-width:1px !important; rx:8px; ry:8px; }\n.highcharts-tooltip{ filter:drop-shadow(0 6px 16px rgba(15,23,42,.18)); }\n\n/* ====== Fenêtre-graphe (survol) + fenêtres épinglées ====== */\n/* Si votre CSS externe (N4VCustomElements/res/css) stylise déjà ces */\n/* éléments, gardez la version qui vous convient. */\n\n/* popup au survol */\n#tooltip-graph{\n border:1px solid var(--line) !important;\n border-radius:var(--radius) !important;\n box-shadow:0 18px 48px rgba(15,23,42,.22) !important;\n padding:12px !important; background:#fff !important;\n}\n#pin-tooltip-btn.pinTooltipBtn{\n position:absolute; top:8px; right:10px; z-index:5;\n width:26px; height:26px; border:0; border-radius:8px;\n background:rgba(2,132,199,.10); cursor:pointer; font-size:13px; line-height:1;\n transition:background .15s ease;\n}\n#pin-tooltip-btn.pinTooltipBtn:hover{ background:rgba(2,132,199,.22); }\n\n/* fenêtres clonées */\n.chart-clone{\n border:1px solid var(--line) !important;\n border-radius:var(--radius) !important;\n box-shadow:0 18px 48px rgba(15,23,42,.28) !important;\n overflow:hidden !important; background:#fff !important;\n}\n/* barre de titre draggable */\n.chart-clone .TooltipChartBar{\n height:32px; line-height:32px;\n padding:5px 120px 0 14px; /* place pour les 4 boutons à droite */\n background:linear-gradient(180deg, var(--accent-2), var(--accent));\n color:#fff; font:600 12px var(--font);\n cursor:move; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;\n border-top-left-radius:var(--radius); border-top-right-radius:var(--radius);\n}\n/* boutons de la barre */\n.chart-clone .TooltipChartBtn{\n position:absolute; top:10px; width:22px; height:22px;\n border:0; border-radius:6px; cursor:pointer;\n background:rgba(255,255,255,.18); color:#5b5b5b;\n font-size:12px; line-height:22px; text-align:center; padding:0;\n background-size:14px 14px; background-position:center; background-repeat:no-repeat;\n transition:background .15s ease;\n}\n.chart-clone .TooltipChartBtn:hover{ background:rgba(255,255,255,.34); }\n.chart-clone .TooltipChartBtnC{ right:8px; } /* fermer */\n.chart-clone .TooltipChartBtnR{ right:34px; } /* réduire */\n.chart-clone .TooltipChartBtnA{ right:60px; } /* réorganiser */\n.chart-clone .TooltipChartBtnCA{ right:86px; } /* tout fermer */"
}
},
"createdAt": "2026-06-29T15:55:11.009Z",
"version": 2
}
},
{
"id": "template_1782748629874",
"Value": {
"name": "Styled Horizontal Scroll Table",
"description": "Add a custom style to the N4V Horizontal Scroll Table",
"type": "csstableh",
"target": "csstableh",
"settings": {
"Extended_Parameters": {
"custom0CSS": ":root{\n --accent:#008cb2; --accent-2:#00a8d6;\n --txt:#334155; --muted:#64748b;\n --line-h:rgba(15,23,42,.10); /* séparateurs horizontaux (entre lignes) */\n --line-v:rgba(15,23,42,.05); /* séparateurs verticaux (entre colonnes) */\n --hover:rgba(2,132,199,.12);\n --sel:#0ea5e9;\n --radius:14px;\n --font:\"Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n}\n\n/* ---- Titre / sous-titre ---- */\n#title{ font-family:var(--font) !important; font-size:16px !important; font-weight:700 !important; color:#0f172a !important; }\n#subtitle{ font-family:var(--font) !important; font-size:11px !important; color:var(--muted) !important; }\n\n/* ---- Conteneur scrollable = carte ---- */\n#div-table{\n border:1px solid var(--line-h); border-radius:var(--radius);\n box-shadow:0 6px 24px rgba(15,23,42,.06);\n scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent;\n}\n#div-table::-webkit-scrollbar{ width:10px; height:12px; } /* height = barre horizontale */\n#div-table::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px; border:2px solid #fff; }\n#div-table::-webkit-scrollbar-track{ background:transparent; }\n\n/* ---- Cellules : grille épurée ---- */\n#div-table td, #div-table th{\n border-top:0 !important;\n border-left:0 !important;\n border-right:1px solid var(--line-v) !important;\n border-bottom:1px solid var(--line-h) !important;\n font-family:var(--font) !important;\n font-size:12px !important;\n padding:8px 12px !important;\n}\n#div-table tr:last-child td, #div-table tr:last-child th{ border-bottom:0 !important; }\n#div-table td{\n color:var(--txt) !important;\n}\n/* ---- Colonne figée à gauche (libellés de lignes) ---- */\n.header{\n position:sticky; left:0; z-index:3;\n background:linear-gradient(180deg, var(--accent-2), var(--accent)) !important;\n color:#fff !important;\n font-family:var(--font) !important;\n font-weight:700 !important; font-size:11px !important;\n letter-spacing:.04em; text-transform:uppercase;\n white-space:nowrap;\n border-right:0 !important;\n box-shadow:4px 0 8px rgba(15,23,42,.14); /* ombre droite au défilement */\n padding:9px 14px !important;\n}\n\n/* ---- Zébrage modernisé (sur les | uniquement, la colonne figée garde l'accent) ---- */\n.table-striped>tbody>tr:nth-child(odd)>td{ background-color:rgba(2,132,199,.035) !important; }\n.table-striped>tbody>tr:nth-child(even)>td{ background-color:#fff !important; }\n\n/* ---- Sélection ---- */\n.selected{\n background-color:var(--sel) !important;\n color:#fff !important;\n}"
}
},
"createdAt": "2026-06-29T15:57:09.873Z",
"version": 2
}
},
{
"id": "template_1782748709769",
"Value": {
"name": "Styled Angular Gauge 1",
"description": "Add a custom light style to the N4V Angular Gauge",
"type": "highchartangulargauge",
"target": "highchartangulargauge",
"settings": {
"Extended_Parameters": {
"custom0CSS": ":root{\n --bg-1:#f8fafc; --bg-2:#eef2f7; /* dégradé de fond clair */\n --accent:#0e7490; /* aiguille / pivot / contours */\n --track:rgba(15,23,42,.06); /* anneau de fond */\n --txt:#475569; /* libellés (gris ardoise) */\n --ok:#10b981; --warn:#f59e0b; --crit:#ef4444; /* bandes */\n --card:#ffffff; /* pastille / infobulle */\n --line:rgba(15,23,42,.10);\n}\n\nhtml,body{\n background: radial-gradient(120% 120% at 50% 0%, #ffffff, var(--bg-2) 75%);\n}\n\n/* fond du graphe transparent (forcé en #fff dans le JS) */\n.highcharts-background{ fill: transparent !important; }\n\n/* anneau du cadran : track neutre, sans effet métallique */\n.highcharts-pane{\n fill: var(--track) !important;\n stroke: var(--line) !important;\n stroke-width: 1px !important;\n}\n\n/* bandes colorées : tons modernes + halo très léger */\n.highcharts-plot-band{ opacity:.95; }\n.highcharts-plot-band:nth-of-type(1){ fill:var(--ok) !important; filter:drop-shadow(0 0 4px rgba(16,185,129,.45)); }\n.highcharts-plot-band:nth-of-type(2){ fill:var(--warn) !important; filter:drop-shadow(0 0 4px rgba(245,158,11,.45)); }\n.highcharts-plot-band:nth-of-type(3){ fill:var(--crit) !important; filter:drop-shadow(0 0 4px rgba(239,68,68,.45)); }\n\n/* graduations */\n.highcharts-tick{ stroke: rgba(15,23,42,.45) !important; }\n.highcharts-minor-tick{ stroke: rgba(15,23,42,.20) !important; }\n.highcharts-axis-line{ stroke: transparent !important; }\n\n/* libellés d'axe (style inline Highcharts → !important obligatoire) */\n.highcharts-axis-labels text{\n fill: var(--txt) !important;\n font-weight: 500 !important;\n font-family: \"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif !important;\n}\n\n/* aiguille + pivot en accent, halo discret */\n.highcharts-dial{\n fill: var(--accent) !important;\n filter: drop-shadow(0 1px 3px rgba(14,116,144,.45));\n}\n.highcharts-pivot{\n fill: var(--accent) !important; stroke:#fff !important; stroke-width:1.5px !important;\n filter: drop-shadow(0 1px 3px rgba(14,116,144,.45));\n}\n\n/* pastille de valeur : carte blanche, coins arrondis */\n.highcharts-data-label-box{\n fill: var(--card) !important; stroke: var(--accent) !important; stroke-width:1px !important;\n rx:12px; ry:12px;\n}\n.highcharts-data-label text{\n fill:#0f172a !important; font-weight:600 !important;\n font-family:\"Inter\", system-ui, sans-serif !important;\n}\n\n/* infobulle façon carte claire */\n.highcharts-tooltip-box{ fill: var(--card) !important; stroke: var(--line) !important; stroke-width:1px !important; }\n.highcharts-tooltip text{ fill:#334155 !important; }\n\n/* ombre douce sous l'ensemble de la jauge */\n.highcharts-series-group{ filter: drop-shadow(0 8px 20px rgba(15,23,42,.12)); }"
}
},
"createdAt": "2026-06-29T15:58:29.764Z",
"version": 2
}
},
{
"id": "template_1782748755687",
"Value": {
"name": "Styled Angular Gauge 2",
"description": "Add a custom dark style to the N4V Angular Gauge",
"type": "highchartangulargauge",
"target": "highchartangulargauge",
"settings": {
"Extended_Parameters": {
"custom0CSS": ":root{\n --bg-1:#0f172a; --bg-2:#1e293b; /* dégradé de fond */\n --accent:#38bdf8; /* aiguille / pivot / contours */\n --track:rgba(255,255,255,.06); /* anneau de fond */\n --txt:#cbd5e1; /* libellés */\n --ok:#34d399; --warn:#fbbf24; --crit:#fb7185; /* bandes */\n --glass:rgba(15,23,42,.65); /* verre dépoli (pastille/tooltip) */\n}\n\nhtml,body{\n background: radial-gradient(120% 120% at 50% 0%, var(--bg-2), var(--bg-1) 70%);\n}\n\n/* Fond du graphe transparent (il est forcé en #fff dans le JS) */\n.highcharts-background{ fill: transparent !important; }\n\n/* Anneau du cadran : on remplace l'effet métallique par un track épuré */\n.highcharts-pane{\n fill: var(--track) !important;\n stroke: rgba(255,255,255,.08) !important;\n stroke-width: 1px !important;\n}\n\n/* Bandes colorées : palette modernisée + léger halo */\n/* ⚠ l'ordre nth-of-type suit l'ordre de déclaration ; inversez les */\n/* numéros si le rendu ne correspond pas. */\n.highcharts-plot-band{ opacity:.9; }\n.highcharts-plot-band:nth-of-type(1){ fill:var(--ok) !important; filter:drop-shadow(0 0 6px var(--ok)); }\n.highcharts-plot-band:nth-of-type(2){ fill:var(--warn) !important; filter:drop-shadow(0 0 6px var(--warn)); }\n.highcharts-plot-band:nth-of-type(3){ fill:var(--crit) !important; filter:drop-shadow(0 0 6px var(--crit)); }\n\n/* Graduations */\n.highcharts-tick{ stroke: rgba(255,255,255,.40) !important; }\n.highcharts-minor-tick{ stroke: rgba(255,255,255,.15) !important; }\n.highcharts-axis-line{ stroke: transparent !important; }\n\n/* Libellés d'axe (style inline → !important obligatoire) */\n.highcharts-axis-labels text{\n fill: var(--txt) !important;\n font-weight: 500 !important;\n font-family: \"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif !important;\n}\n\n/* Aiguille + pivot avec accent et halo */\n.highcharts-dial{ fill: var(--accent) !important; filter: drop-shadow(0 0 8px var(--accent)); }\n.highcharts-pivot{\n fill: var(--accent) !important; stroke:#fff !important; stroke-width:1.5px !important;\n filter: drop-shadow(0 0 8px var(--accent));\n}\n\n/* Pastille de valeur : pilule \"verre dépoli\" (rx/ry = coins arrondis) */\n.highcharts-data-label-box{\n fill: var(--glass) !important; stroke: var(--accent) !important; stroke-width:1px !important;\n rx:12px; ry:12px;\n}\n.highcharts-data-label text{\n font-weight:600 !important;\n font-family:\"Inter\", system-ui, sans-serif !important;\n}\n\n/* Infobulle façon carte sombre */\n.highcharts-tooltip-box{ fill: var(--glass) !important; stroke: var(--accent) !important; stroke-width:1px !important; }\n.highcharts-tooltip text{ fill:#e2e8f0 !important; }\n\n/* Halo doux sous l'ensemble de la jauge */\n.highcharts-series-group{ filter: drop-shadow(0 10px 30px rgba(0,0,0,.45)); }"
}
},
"createdAt": "2026-06-29T15:59:15.679Z",
"version": 2
}
},
{
"id": "template_1775548908612",
"Value": {
"name": "Styled Checkbox Buttons",
"description": "Add a custom style to the N4V Checkbox Buttons",
"type": "checkbox",
"target": "checkbox",
"settings": {
"custom0CSS": ".input-group { border: none; margin: 5px; width: auto; } input[type=checkbox] { display: none; } .input-group label { display: inline-block; padding: 6px 12px; border-radius: 20px; border: 1px solid #1e90ff; background: #fff; color: #1e90ff; cursor: pointer; transition: all 0.2s ease; } .input-group label:hover { background: #1e90ff; color: #fff; } input[type=checkbox]:checked + label { background: #1e90ff; color: #fff; border-color: #1e90ff; } .input-group label:active { transform: scale(0.95); } .input-group label { font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } input[type=checkbox]:checked + label { box-shadow: 0 2px 6px rgba(30,144,255,0.4); } .input-group:hover{ color: unset !important; background: unset !important; }"
},
"createdAt": "2026-04-07T08:01:48.611Z"
}
},
{
"id": "template_1775719601457",
"Value": {
"name": "Styled Radio Buttons",
"description": "Add a custom style to the N4V Radio Buttons",
"type": "radiobouton",
"target": "radiobouton",
"settings": {
"custom0CSS": ".radio_bouton { border: none; margin: 5px; width: auto; } .radio_bouton input[type=radio] { display: none; } .radio_bouton label { display: inline-block; padding: 6px 12px; border-radius: 20px; border: 1px solid #1e90ff; background: #fff; color: #1e90ff; cursor: pointer; transition: all 0.2s ease; font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .radio_bouton label:hover { background: #1e90ff; color: #fff; } .radio_bouton input[type=radio]:checked + label { background: #1e90ff; color: #fff; border-color: #1e90ff; box-shadow: 0 2px 6px rgba(30,144,255,0.4); } .radio_bouton label:active { transform: scale(0.95); } .radio_bouton:hover { background: unset !important; color: unset !important; }",
"radio0align": "left"
},
"createdAt": "2026-04-09T07:26:41.440Z",
"updatedAt": "2026-04-09T08:08:13.380Z"
}
},
{
"id": "template_1782997901397",
"Value": {
"name": "Styled Dropdown List",
"description": "Add a custom style to the N4V Dropdown List.",
"type": "listederoul",
"target": "listederoul",
"settings": {
"Extended_Parameters": {
"custom0CSS": "/* Contrôle fermé */\nselect#list_1 {\n appearance: none !important;\n -webkit-appearance: none !important;\n font-family: arial !important;\n font-size: 13px !important;\n color: #001740 !important;\n background-color: #ffffff !important;\n border: 1px solid #D6DEE9 !important;\n border-radius: 10px !important;\n padding: 8px 38px 8px 14px !important;\n min-width: 200px !important;\n box-shadow: 0 1px 2px rgba(0,23,64,.06) !important;\n cursor: pointer !important;\n transition: border-color .15s ease, box-shadow .15s ease !important;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C7A99' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\") !important;\n background-repeat: no-repeat !important;\n background-position: right 12px center !important;\n}\nselect#list_1:hover { border-color: #94A3B8 !important; }\nselect#list_1:focus {\n outline: none !important;\n border-color: #002157 !important;\n box-shadow: 0 0 0 3px #00215722 !important;\n}\n\n\nselect#list_1.optionGroup { font-weight: 700 !important; font-style: normal !important; }\nselect#list_1.optionChild,\nselect#list_1.optionAllval { font-weight: 600 !important; }\n\n/* Liste ouverte (stylable partiellement sur select natif) */\n#list_1 option { font-family: arial !important; font-size: 13px !important; padding: 6px 10px !important; background: #ffffff !important; }\n#list_1 .optionAllval { color: #001740 !important; font-weight: 700 !important; }\n#list_1 .optionGroup {\n color: #5C7A99 !important;\n font-weight: 700 !important;\n font-style: normal !important;\n font-size: 11px !important;\n text-transform: uppercase !important;\n letter-spacing: .6px !important;\n background: #F1F5FA !important;\n}\n#list_1 .optionChild { color: #334155 !important; padding-left: 18px !important; }\n#list_1 option:checked { background: #00215714 !important; color: #002157 !important; }"
}
},
"createdAt": "2026-07-02T13:11:41.387Z",
"version": 2
}
},
{
"id": "template_1775727759485",
"Value": {
"name": "Full N4V menu",
"description": "Add the fullscreen, data table view and CSV export in the N4V menu of the widget",
"type": "donutcharts",
"target": "donutcharts",
"settings": {
"menu0fullscr0disp": "true",
"menu0data0disp": "true",
"menu0export0csv": "true"
},
"createdAt": "2026-04-09T09:42:39.479Z",
"updatedAt": "2026-04-10T09:40:56.141Z"
}
}
] |