/* ========================================================= modern-front.css — lift moderno per i master del lato cliente (MPAccessoFidoka.master + MPFrontFidoka.master). - Attivato solo se sul e' presente la classe "fk-modern". - Pensato come overlay di style.css: non rimuove regole esistenti, le sovrascrive con maggiore specificita' (`.fk-modern ...`). - Nessuna modifica richiesta al markup delle pagine .aspx. Convenzioni: - Palette verde Fidoka #83b941 mantenuta come accent. - Font system stack per nitidezza su Windows/Mac/Linux/mobile. - Border-radius 8-14px, shadow morbide, focus ring accessibili. ========================================================= */ /* ---------- BASE TYPOGRAPHY + PAGE BACKGROUND ---------- */ body.fk-modern { background: linear-gradient(180deg, #f6f8fa 0%, #eef1f5 100%) !important; font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #1f2328; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.fk-modern h1, body.fk-modern h2, body.fk-modern h3, body.fk-modern h4 { font-weight: 600; color: #1f2328; letter-spacing: -0.01em; } body.fk-modern a { color: #4f8a1f; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; } body.fk-modern a:hover { border-bottom-color: #4f8a1f; } /* ---------- CONTENITORI PRINCIPALI ---------- */ /* Layout container area riservata: card bianca con radius+shadow. Forziamo background shorthand a #ffffff per nascondere completamente sfondo_03.jpg (image verticale che style.css applica come bg image di #container e che, sotto al gradient morbido della sidebar, riemerge come blocco verde + watermark "F" gigante centrato). */ body.fk-modern #container, body.fk-modern #containerw { background: #ffffff !important; background-image: none !important; border: none !important; border-radius: 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06); overflow: hidden; margin-top: 18px; margin-bottom: 24px; } /* Top bar: padding piu' arioso */ body.fk-modern #top { padding: 6px 18px 0 18px; box-sizing: border-box; background: #ffffff !important; } /* Menu top (assistenza/privacy) */ body.fk-modern #menutop ul { margin-top: 38px; } body.fk-modern #menutop li { background: none !important; } body.fk-modern #menutop a:link, body.fk-modern #menutop a:active, body.fk-modern #menutop a:visited { background: none !important; color: #424a53; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 12px; border-radius: 8px; border-bottom: none; transition: background 0.15s ease, color 0.15s ease; } body.fk-modern #menutop a:hover { background: rgba(131, 185, 65, 0.14) !important; color: #2f6b35; border-bottom: none; } /* Sidebar sinistra (menu area riservata): allargata a 200px per far entrare label lunghe come "Richiedi nuova password". #right scende corrispondentemente a 900px: la somma deve restare 1100px per non fare wrap floating. */ body.fk-modern #left { background: linear-gradient(180deg, #f8faf3 0%, #eef5e0 100%) !important; box-shadow: inset -1px 0 0 #e6efd5; box-sizing: border-box; padding: 8px 0; width: 200px !important; } body.fk-modern #right { width: 900px !important; } /* TreeView default renderizza tabelle nidificate con icone gif per espansione e tante celle. Le nascondiamo per avere un menu pulito. */ body.fk-modern #left table, body.fk-modern #left tr, body.fk-modern #left td { background: transparent !important; border: none !important; padding: 0 !important; } body.fk-modern #left img { display: none !important; } /* Voci del menu: tutte allineate a sinistra alla stessa colonna. Approccio brute-force perche' TreeView genera markup imprevedibile e le CssClass applicate via RootNodeStyle/LeafNodeStyle non sempre finiscono sull'. Forziamo tutto con !important e selettori generici. */ body.fk-modern #navigazione_fab { width: 100%; padding: 0; margin: 0; } /* Reset di TUTTI gli elementi struttura interni: niente padding, niente margin, niente centratura ereditata dai generati dal TreeView. */ body.fk-modern #navigazione_fab, body.fk-modern #navigazione_fab *, body.fk-modern #navigazione_fab table, body.fk-modern #navigazione_fab tbody, body.fk-modern #navigazione_fab tr, body.fk-modern #navigazione_fab td, body.fk-modern #navigazione_fab div, body.fk-modern #navigazione_fab span { text-align: left !important; padding-left: 0 !important; margin-left: 0 !important; background: transparent !important; border: none !important; } /* Le tabelle interne del TreeView non devono prendere width fissa: full width cosi' l' figlio puo' espandersi tutto a sinistra. */ body.fk-modern #navigazione_fab table { width: 100% !important; border-collapse: collapse !important; } /* Voci di base (foglie e sezioni): tutto block, padding-left uniforme. */ body.fk-modern #navigazione_fab a, body.fk-modern #navigazione_fab a:link, body.fk-modern #navigazione_fab a:visited { display: block !important; box-sizing: border-box !important; width: auto !important; color: #1f2328 !important; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important; font-size: 13.5px !important; font-weight: 400 !important; text-align: left !important; text-decoration: none !important; padding: 6px 10px 6px 14px !important; margin: 1px 4px !important; border-radius: 6px !important; line-height: 1.3 !important; transition: background 0.12s ease, color 0.12s ease !important; border-bottom: none !important; border-left: 2px solid transparent !important; text-transform: none !important; letter-spacing: normal !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; } body.fk-modern #navigazione_fab a:hover { background: rgba(131, 185, 65, 0.18) !important; color: #2f6b35 !important; border-left-color: #83b941 !important; } /* Sezioni (root + parent nodes): distinguibili perche' TreeView le renderizza in bold. Le riconosciamo via :has(b), [style*="bold"] o classe .fk-tree-root. Stesso padding-left 14px, ma maiuscolo + verde + margin-top per stacco. */ body.fk-modern #navigazione_fab a:has(b), body.fk-modern #navigazione_fab a[style*="bold" i], body.fk-modern #navigazione_fab a[style*="font-weight" i], body.fk-modern #navigazione_fab a.fk-tree-root, body.fk-modern #navigazione_fab .fk-tree-root a, body.fk-modern #navigazione_fab .fk-tree-root { color: #2f6b35 !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; font-size: 12px !important; margin-top: 18px !important; padding-top: 6px !important; } body.fk-modern #navigazione_fab a:has(b):hover, body.fk-modern #navigazione_fab a[style*="bold" i]:hover, body.fk-modern #navigazione_fab a.fk-tree-root:hover { background: transparent !important; border-left-color: transparent !important; color: #2f6b35 !important; cursor: default !important; } /* Se TreeView usa dentro : anche il deve essere uppercase/bold ma senza padding/margin extra. */ body.fk-modern #navigazione_fab a b, body.fk-modern #navigazione_fab b { color: #2f6b35 !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; font-size: inherit !important; display: inline !important; padding: 0 !important; margin: 0 !important; background: transparent !important; } /* Pannello destro: padding orizzontale per dare respiro tra il bordo della sidebar e i contenuti (gridview, scheda pagamento, ecc). Con box-sizing border-box la width 940px resta invariata (il padding entra dentro), cosi' non si rompe il layout floating: #left 160 + #right 940 = 1100. */ body.fk-modern #right { background: transparent !important; background-image: none !important; box-sizing: border-box; padding: 0 24px 16px 24px; } /* Sicurezza: stessa proprieta' su #right per qualunque tag interno che potrebbe avere width 100% nominale ma non eccede il box. */ body.fk-modern #right > table, body.fk-modern #right > div, body.fk-modern #right > asp\:Panel { box-sizing: border-box; } /* User bar in testa al contenuto: la lasciamo verde acceso (la specificita' di #right > table:first-of-type tr supera la regola attribute-selector sui tr con bg #83b941 inline, e un verde chiaro renderebbe il testo bianco invisibile). Aggiungiamo solo un gradient sottile per ammorbidire. */ body.fk-modern #right > table:first-of-type tr { background: linear-gradient(180deg, #8cc448 0%, #74a932 100%) !important; } body.fk-modern #right > table:first-of-type td { color: #ffffff !important; font-size: 13px; padding: 8px 12px !important; } body.fk-modern #right > table:first-of-type a { color: #ffffff; } body.fk-modern #right > table:first-of-type a:hover { color: #f6f8fa; border-bottom-color: #ffffff; } /* ---------- FORM INPUT GENERICI ---------- */ body.fk-modern input[type="text"], body.fk-modern input[type="password"], body.fk-modern input[type="email"], body.fk-modern input[type="tel"], body.fk-modern input[type="number"], body.fk-modern input[type="search"], body.fk-modern textarea, body.fk-modern select { padding: 8px 12px; border: 1px solid #d0d7de; border-radius: 8px; background: #ffffff; font: inherit; color: #1f2328; transition: border-color 0.15s ease, box-shadow 0.15s ease; box-sizing: border-box; } body.fk-modern input[type="text"]:hover, body.fk-modern input[type="password"]:hover, body.fk-modern input[type="email"]:hover, body.fk-modern input[type="tel"]:hover, body.fk-modern input[type="number"]:hover, body.fk-modern input[type="search"]:hover, body.fk-modern textarea:hover, body.fk-modern select:hover { border-color: #adb5bd; } body.fk-modern input[type="text"]:focus, body.fk-modern input[type="password"]:focus, body.fk-modern input[type="email"]:focus, body.fk-modern input[type="tel"]:focus, body.fk-modern input[type="number"]:focus, body.fk-modern input[type="search"]:focus, body.fk-modern textarea:focus, body.fk-modern select:focus { outline: none; border-color: #83b941; box-shadow: 0 0 0 3px rgba(131, 185, 65, 0.20); } /* Checkbox e radio: piccoli ma con accent color */ body.fk-modern input[type="checkbox"], body.fk-modern input[type="radio"] { accent-color: #83b941; width: 16px; height: 16px; vertical-align: middle; } /* ---------- BOTTONI ---------- */ /* Bottoni generici (asp:Button renderizza input type=submit o type=button). line-height esplicito + min-height + box-sizing: senza questi il body line-height 1.5 schiaccia il testo dentro l'input e il bottone appare "tagliato" a meta'. */ body.fk-modern input[type="submit"], body.fk-modern input[type="button"], body.fk-modern button { padding: 9px 18px; min-height: 38px; border: 1px solid #6ea22f; border-radius: 8px; background: linear-gradient(180deg, #8cc448 0%, #74a932 100%); color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; cursor: pointer; box-sizing: border-box; vertical-align: middle; transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease; box-shadow: 0 1px 2px rgba(95, 138, 44, 0.30); } body.fk-modern input[type="submit"]:hover, body.fk-modern input[type="button"]:hover, body.fk-modern button:hover { filter: brightness(1.04); box-shadow: 0 4px 10px rgba(95, 138, 44, 0.28); } body.fk-modern input[type="submit"]:active, body.fk-modern input[type="button"]:active, body.fk-modern button:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(95, 138, 44, 0.40) inset; } /* Mantenere la classe .Pulsante esistente coerente col nuovo stile. In style.css ha gia' shadow al hover, qui aggiungiamo radius+transition. */ body.fk-modern input.Pulsante, body.fk-modern input.PulsanteBig, body.fk-modern input.PulsanteBigO, body.fk-modern .PulsantePrint { border-radius: 8px !important; transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease; } /* ---------- ASP:LOGIN ---------- */ /* asp:Login e asp:PasswordRecovery renderizzano tabelle interne. Le trasformiamo entrambe in card moderna con shadow e border morbido. */ body.fk-modern .Pulsante, body.fk-modern table[id*="lgnControl"], body.fk-modern table[id*="PasswordRecovery"] { border-collapse: separate; } body.fk-modern table[id*="lgnControl"], body.fk-modern table[id*="PasswordRecovery"] { background: #ffffff !important; border: 1px solid #e6e8eb !important; border-radius: 14px !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.08); padding: 0 !important; overflow: hidden; margin: 32px auto !important; } body.fk-modern table[id*="lgnControl"] td, body.fk-modern table[id*="PasswordRecovery"] td { padding: 6px 10px; } /* Titolo dell'asp:Login / asp:PasswordRecovery: header card piu' arioso */ body.fk-modern table[id*="lgnControl"] td[colspan], body.fk-modern table[id*="PasswordRecovery"] td[colspan] { padding: 16px 22px !important; } /* La tabella esterna che racchiudeva lgnControl (border verde 1px solid #008000): la rendiamo invisibile per non avere il doppio bordo con la card interna. */ body.fk-modern table[style*="1px solid #008000"] { border: none !important; background: transparent !important; padding: 24px 0 !important; } /* login.aspx (root) non usa asp:Login: e' una tabella custom. Le diamo lo stesso look "card" delle pagine LoginBO / RecuperaPassword tramite la classe .fk-login-card applicata esplicitamente nel markup. */ body.fk-modern table.fk-login-card { background: #ffffff !important; border: 1px solid #e6e8eb !important; border-radius: 14px !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.08); border-collapse: separate !important; overflow: hidden; padding: 0 !important; min-width: 360px; } body.fk-modern table.fk-login-card td { padding: 8px 14px; } /* ---------- PANEL / CARD GENERICI ---------- */ /* asp:Panel con BorderColor #83B941 (pattern card delle pagine Application). Padding interno per dare respiro al contenuto; la prima tabella (header verde) esce dal padding con margin negativo per restare full-bleed. */ body.fk-modern div[style*="border-color: #83B941" i], body.fk-modern div[style*="border-color:#83B941" i] { border: 1px solid #e6e8eb !important; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); background: #ffffff; overflow: hidden; padding: 0 18px 18px 18px; box-sizing: border-box; } body.fk-modern div[style*="border-color: #83B941" i] > table:first-of-type, body.fk-modern div[style*="border-color:#83B941" i] > table:first-of-type { margin: 0 -18px 14px -18px !important; width: calc(100% + 36px) !important; } /* Header verde dentro i panel (es. "Paga con carta di credito") */ body.fk-modern td[style*="background-color: #83b941" i], body.fk-modern td[style*="background-color:#83b941" i], body.fk-modern tr[style*="background-color: #83b941" i], body.fk-modern tr[style*="background-color:#83b941" i] { background: linear-gradient(180deg, #8cc448 0%, #74a932 100%) !important; color: #ffffff !important; } body.fk-modern td[style*="background-color: #83b941" i] *, body.fk-modern td[style*="background-color:#83b941" i] *, body.fk-modern tr[style*="background-color: #83b941" i] *, body.fk-modern tr[style*="background-color:#83b941" i] * { color: #ffffff !important; } /* ---------- GRIDVIEW / FATTURE / TRAFFICO ---------- */ /* asp:GridView default renderizza senza class. Su pagine traffico/fatture rendiamo le righe piu' leggibili. */ body.fk-modern table.grid, body.fk-modern table[id*="GridView"] { border-collapse: separate; border-spacing: 0; width: 100%; background: #ffffff; border: 1px solid #e6e8eb; border-radius: 10px; overflow: hidden; font-size: 13px; } body.fk-modern table[id*="GridView"] th { background: #f6f8fa; color: #424a53; text-align: left; padding: 10px 12px; border-bottom: 1px solid #e6e8eb; font-weight: 600; } body.fk-modern table[id*="GridView"] td { padding: 8px 12px; border-bottom: 1px solid #eef1f5; } body.fk-modern table[id*="GridView"] tr:last-child td { border-bottom: none; } body.fk-modern table[id*="GridView"] tr:hover td { background: rgba(131, 185, 65, 0.06); } /* ---------- ETICHETTE / VALORI ---------- */ /* I "labelValue" in blu acceso (#0000ee, #00529b) sono datati: ammorbidiamo */ body.fk-modern span[style*="color: blue" i], body.fk-modern span[style*="color:Blue" i], body.fk-modern .ForeColor-Blue { color: #1f2328 !important; font-weight: 600; } /* ---------- LINK GENERICI HOTSPOT BLU ---------- */ /* asp:LinkButton/HyperLink default colore blu standard: morbidiamo a verde */ body.fk-modern a[id*="lnk"], body.fk-modern a[id*="Link"] { color: #4f8a1f; } /* ---------- HEADER PAGINE APPLICATION (.fk-page-title) ---------- Le pagine traffico/pagamenti/fatture usano una tabella esterna con width fissa (624/692/708/750/...) come "wrapper di pagina" + prima riga verde come titolo. Le forziamo full-width con look card per uniformarsi a dati_utente/modifica_password (che usano asp:Panel BorderColor #83B941). Nessun padding aggiuntivo sull'header: viene mantenuto il cellpadding originale del markup per non rendere la barra piu' alta di quella di dati_utente.aspx. */ body.fk-modern table.fk-page-title { width: 100% !important; height: auto !important; border-collapse: separate !important; border-spacing: 0 !important; border: 1px solid #e6e8eb !important; border-radius: 12px; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); overflow: hidden; margin-bottom: 8px; } /* La cella header verde delle .fk-page-title viene gestita dalla regola generica sui td/tr con bg #83b941 (gradient + colore bianco). Qui non aggiungiamo nulla per non aumentare il padding. */ /* ---------- DevExpress ASPxDateEdit (controlli data nelle pagine traffico) ---------- Arrotondamento angoli e bordo morbido sul wrapper esterno del controllo data DevExpress. I selettori .dxeButtonEditSys e .dxeEditArea sono i nomi delle classi CSS pubbliche di DevExpress. */ body.fk-modern table.dxeButtonEditSys, body.fk-modern table.dxeButtonEdit { border-radius: 8px !important; overflow: hidden; border: 1px solid #d0d7de !important; background: #ffffff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } body.fk-modern table.dxeButtonEditSys:hover, body.fk-modern table.dxeButtonEdit:hover { border-color: #adb5bd !important; } body.fk-modern table.dxeButtonEditSys input.dxeEditArea, body.fk-modern table.dxeButtonEdit input.dxeEditArea { border: none !important; background: transparent !important; padding: 6px 10px !important; } body.fk-modern table.dxeButtonEditSys td.dxic input { border: none !important; background: transparent !important; } /* ---------- BOTTONE LINK FATTURA (pagamento_modifica.aspx) ---------- */ /* Bottone evidente in fondo alla scheda pagamento per scaricare la fattura. Reso come pill bianco con bordo verde per essere riconoscibile come azione secondaria (l'azione primaria resta il bottone Nexi sopra). */ body.fk-modern a.fk-btn-fattura, body.fk-modern a.fk-btn-fattura:link, body.fk-modern a.fk-btn-fattura:visited { display: inline-block; padding: 10px 20px; border-radius: 999px; background: #ffffff; border: 1px solid #6ea22f; color: #2f6b35 !important; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.08s ease; } body.fk-modern a.fk-btn-fattura:hover { background: #f4f8ed; box-shadow: 0 4px 12px rgba(95, 138, 44, 0.22); border-bottom: 1px solid #6ea22f; color: #2f6b35 !important; } body.fk-modern a.fk-btn-fattura:active { transform: translateY(1px); } /* Variante "azione" dei bottoni pill (es. Scarica fattura / Paga con carta in pagamento_modifica): larghezza fissa uguale per tutti, testo centrato su una riga e ombra piu' marcata, da bottone vero. Va usata INSIEME a fk-btn-fattura. */ body.fk-modern a.fk-btn-azione, body.fk-modern a.fk-btn-azione:link, body.fk-modern a.fk-btn-azione:visited { width: 340px; box-sizing: border-box; text-align: center; white-space: nowrap; box-shadow: 0 2px 5px rgba(15, 23, 42, 0.18), 0 1px 2px rgba(15, 23, 42, 0.10); } body.fk-modern a.fk-btn-azione:hover { box-shadow: 0 5px 14px rgba(95, 138, 44, 0.30); transform: translateY(-1px); } body.fk-modern a.fk-btn-azione:active { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18) inset; transform: translateY(1px); } /* ---------- FINE ---------- */